登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

UI 设计适配 iPhone X [复制链接]

2017-11-20 10:23
hellokenken 阅读:416 评论:0 赞:1
Tag:  

UI 设计在 iPhone X 上的变化,一图胜千言:

132.jpg

解开工程项目中的 Safe Area 约束,根据官方 Human Interface Guidelines 稍作调整,大部分的界面适配都没有疑问。然而 80% 的时间总是花在 20% 不确定的地方上,这篇文章试图探讨一下适配过程中可能遇到的疑难。

底部按钮和 toolbar

由于屏幕底部多出 Home Indicator,如果界面中的按钮或 toolbar 元素原先在底部,为了不与 Home Indicator 冲突,需要作出处理。如果是独立成块状的按钮,类似系统原生的 Action Sheet 的视觉样式(下图左),将按钮整体上移即可。

但如果是紧贴屏幕边缘的按钮(下图右),出于对「菲兹定律」的考虑,这时不应该简单将按钮上移,而是同时增加按钮的面积和热区,使得按钮依然紧贴屏幕底部、用户点击屏幕边缘的时候依然对按钮起作用。这取决于按钮的视觉效果。

123.png

1.png

按下按钮、手指离开前的按钮状态

这有一些特殊情况,有时底栏会使用到主题色的色块按钮,它很引人瞩目,如果仅仅将底栏整体上移(下图左),不符合刚才提及的交互法则;如果单独扩大主题色按钮的面积和热区(下图中),视觉效果又让我们难以接受;这时把按钮改为独立的块状样式(下图右),或许是更好的选择。

3.png

4.png

个人更认同的适配方案,左:饿了么,右:支付宝淘票票

甚至事后诸葛亮地猜测一下,iOS 11 的某些风格转变,是不是也有这方面的考虑?

5.png

iOS 的数字键盘、计算器 App,左:iOS 7~10,右:iOS 11

Status bar

If your app currently hides the status bar, reconsider that decision for iPhone X.

如果你们的 App 现在隐藏了 status bar,那么请在 iPhone X 上重新考虑一下这个决定吧。

经常见到隐藏 status bar,或把 status bar 底色设置为透明、和内容重合的设计(一般是焦点图),这可以换来不错的视觉效果,但在 iPhone X 上可能会让内容被遮挡,这会是个潜在的问题。

6.png

尴尬的个人封面图

如果图片由设计师制作或运营人员上传,只需要制商量好图片规范即可,毕竟最终效果还在把控之中。但如果用户可以自由上传图片、效果不可控制,这或许就需要将内容移到 status bar 下方,或者增大图片区的高度、尽量减少这种情况的发生。

底部进度条

依然是与 Safe Area 相关的元素,一些阅读类 app 会在顶部或底部显示有进度条,既体现了阅读进度,又不会干扰到阅读。但现在,这会被屏幕倒角所遮挡,也需要重新考虑了。

7.png

尴尬的底部进度条

简单将进度条上移,虽然可以避免遮挡的问题,但视觉效果不尽人意。或许可以换一种形式,用百分比数字来代替进度条,保证沉浸的阅读。

最后别忘了新增开屏图的尺寸

开屏是国内 App 常见的广告形式。由于屏幕宽高比从 16:9 增大到接近 20:9,比例悬殊,如果共用同一套素材、使用居中裁切的方式,左右两侧会被裁切掉不少。如果要求素材在制作的时候预留出安全区域,不仅安全区域需要定得很大、增加了设计的难度,且效果两边不讨好。

8.png

9.png

在不同屏幕宽高比的手机上共用一套开屏图素材

这不仅是 iPhone X 上会遇到,随着全面屏的趋势,很快,普遍手机的屏幕宽高比也会提高。建议新增一种针对全面屏的尺寸,按屏幕宽高比来调取不同尺寸的图片资源。

分享到:
我来说两句
facelist
您需要登录后才可以评论 登录 | 立即注册
所有评论(0)
关闭

每日头条

通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

返回顶部