发布时间:2021-10-3 分类: 行业资讯
本文有一些关于iPhone X适应的规则,希望对你有所帮助
iPhone X于11月发货,但也许你现在已经收到了改装任务。
官方的“为iPhone X设计”视频,结合官方文档“人机交互指南”,您需要适应指南墨水姐姐为您挑选!
文章较长,建议先查看。
注意:文中的大部分图片均来自官方视频截图和文档图纸,请随意吃。
好的,让我们开始理清关键点!
更高更清晰的屏幕
1.比例变化
iPhone X的显示宽度与4.7英寸iPhone 6,7和8的显示宽度相同。但是,iPhone X的显示屏比4.7英寸显示屏高出145pt,为显示屏增加了约20%的垂直显示空间。内容。
对于更窄的屏幕,需要考虑是否需要重新排列按钮和内容。
另外,当我们进行全屏时,我们需要注意纵横比的差异,特别是由于屏幕比例的变化引起的切割位置的变化。
看着切割说明,我觉得我还是单独改编一下iPhone X的图片是安全的… …
2.超级视网膜
iPhone X的分辨率达到2436 x 1125像素,458 ppi,官方称为Super Retina屏幕。
更高的屏幕质量意味着位图材料的尺寸相应更大。
对于Super Retina屏幕,官方建议尽可能使用PDF矢量图形,这将为您提供更好的显示效果,同时还会降低应用程序的容量。
全面的屏幕折衷产品:“离开大海”和安全区域
让这种强迫症混乱的“留在海里”可以说是对苹果制作全面屏幕的妥协。同时,为了使屏幕尽可能大,屏幕的四个角都是圆形的。
外星人的屏幕无疑让产品设计师感到生气。官方解决方案是:“安全区域布局指南”。
1.安全区布局
顾名思义,“安全区”是一个可以将重要元素放入其中的区域,而不必担心屏幕不规则引起的交互问题。
对于iPhone 8和之前的iPhone,由于常规的矩形屏幕,安全区域是整个屏幕。但对于iPhone X来说,圆角,大海和Home栏使得屏幕交互变得非常棘手。
在这里你可以参考外国用户与“离开海洋”的互动的恶搞:
为了不进行这样的反人类交互,我们需要在形状屏幕的基础上划分矩形安全区域以放置重要内容。
2.安全区值
当移动电话处于垂直方向时,安全区域的上边缘距离屏幕顶部44 pt。因此,安全区并没有与“齐六海”完全齐平,但它必须下降一点。
在“下巴”位置,为了给Home指示器留出足够的空间,它被认为是从底部到顶部推动34磅的安全区域。
当屏幕被越过时,“安全区域”再次改变:Home指示器移动到屏幕的底部,并且“离开海”和“下巴”的安全范围保持不变。换句话说,水平安全区域通过“挤压”更加压缩。
对于指示条位移但纵向安全区不变,官方解释是:
用户在使用手机时严重依赖肌肉记忆(例如,您可以在不键入键盘的情况下打字)。尽管非对称设计可以更有效地使用屏幕,但它与用户的肌肉记忆相反并且可能导致误用。在水平布局中,交互元件两侧之间的距离相等,右侧左侧的位置是固定的,便于用户记忆。
如果你能想到细节,你仍然要向Apple致意。
绿色区域是安全区域,蓝色是边缘
3.例外
但是,有一个例外。如果是长卷轴列表,则复制和按钮可以超出安全区域以实现全屏显示。
安全区域看起来很烦人,但是如果你想把安全区域遮挡并隐藏大海,你就不能放弃它。因为这会使您的应用看起来比其他应用更小,并且它与iOS系统没有统一的整体感觉。
家庭指标
为了实现全屏,Apple删除了物理主页按钮,并将其替换为134 x 5 pt虚拟主页栏。谈到Macbook Pro的Touch Bar,我觉得库克真的很喜欢可以滑动的吧。
简而言之,最初需要主页按钮的操作将由此主页指示器执行。为了与Home Indicator兼容,您需要这样做:
1.避免交互式干扰
“自下而上”成为返回桌面和切换程序的全局系统操作。因此,您需要在应用中避免这种情况,以避免与指标栏进行交互。
但是,在过去的iPhone中,“底端笔画”也用于调用控制中心的手势,因此对于大多数产品设计师来说,它不应该是App中的这种交互。
值得注意的是,不建议在屏幕底部放置太多交互式控件。 Home Indicator周围的间距纯粹是为手势触摸而创建的。将按钮放在条形图附近,用户可能会意外触摸条形图标,或在使用条形图时意外触摸应用程序按钮,从而导致操作干扰。
2.整合为一体
主页指示器将从背景颜色变为白色/黑色,以区别于背景。不要特别强调指标栏,这将被视为官方,仔细审查不会通过你!
面部识别
正如主页按钮的按钮功能被主页指示符替换一样,主页按钮的触摸ID将被面部ID替换。因此,对于Touch ID应用,请务必将Touch ID更改为面部识别码。
话虽如此,我觉得我的脑袋很大。最重要的是,如果真正的机器没有得到它,它需要进行调整。
« 在世界杯期间,为什么蒙牛能够成功地进行老式的热情营销? | 公司代购源码网站建设的价值是什么,为什么你需要做代购源码网站 »