恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
作为UI/UE的你,知道这些关于iPhone X的知识点吗?
0.0°
2017-09-27 原创文章 规范/资料 举报 2162 22 8 1

伴随着苹果发布会新的iPhone X问世,很多人也是忙碌了起来。毕竟新设备代表着新问题及所需的解决方案。

苹果也是第一时间为我们带来了相关的一些指导规范。


Image title

伴随着苹果发布会新的iPhone X问世,很多人也是忙碌了起来。毕竟新设备代表着新问题及所需的解决方案。


苹果也是第一时间为我们带来了相关的一些指导规范。视频地址文档地址


新的屏幕尺寸


这次发布的三款产品中,iPhone 8及iPhone 8 plus 保持了同上两代产品一致的尺寸规格。


全新设计的iPhone X采用了一块尺寸为1125*2436px(375*812pt)的柔性OLED屏幕。不过值得庆幸的是这次苹果采用了真正的@3X尺寸,并且保持了纵向上与iPhone 6 / 7 / 8 一致的宽度 375pt 。所以撇去交互上的考虑,新版本 X 的适配看上去要比 plus来的简便一些。


出血


之所以说是看上去简便了,是因为实际考虑到交互层面的逻辑,适配上需要更变的可以用巨量来形容。


首先就是为了配合屏占比被放大的屏幕所形成的圆角。由这个圆角及热议的「齐刘海」所形成的遮挡区域苹果引入了我们在平面印刷上才用到的「出血线」的概念。Image title


在平面印刷设计中,为了考虑印刷中纸张的位移及裁切中可能的误差,设计师会在设计原稿时在标准尺寸外围预留3毫米左右的缓冲区域,这个区域包含主体内容的画面延伸,但并不包含主体内容,作为裁切的缓冲地带的这块区域被叫做「出血」。


在新手机中,与不规则的屏幕所构成的外切矩形和内切矩形所形成的这块半遮挡区域就形成了手机上的「出血」。


安全区


新iPhone取消home实体键改用home 指示条,并且这个指示条是作为强制元素被钉在屏幕底边上的。所以我们在考虑屏幕内内容时就不得不考虑到与之对应可能产生的问题。由此就产生了安全区的概念。

Image title


苹果定义的iPhone X 的安全区域


当手机纵向时,安全区域是距离顶部44pt,距离底部34pt的这么一个矩形区域。值得注意的是顶部区域并不是与「齐刘海」齐平的,而是稍微再往下一点。


而当手机横向时,苹果给出的安全区域就有些值得商榷了:首先 home 提示条被移到了底边,但因此而空出来的一侧却并没有被作为安全区域而释放。相反的而是被设定成了与另一侧「齐刘海」宽度一致。这样安全区域只有顶边紧贴屏幕,其余三遍都流出了相当位置。


对此苹果给出的解释是:由于你无法预测用户会把「齐刘海」放在左侧还是右侧,如果不把安全区域放在纵向剧中位置,就会造成界面元素与屏幕边缘位置的相对浮动。而苹果认为相较于更高的屏幕空间利用率,固定的元素位置更为至关重要。


这种逻辑虽然有着其自洽的因果关系,但总感觉是把自己绕进去的那种线团式的逻辑,并不是那种一眼就觉得非常合理的交互方式。


所以,由于这种种原因,在设计带有底部菜单栏的应用时,我们需要注意到在iPhone X上的底部菜单栏并不是真正的「底部」,它需要悬浮在 Home 条上方的安全区内。

Image title


不过,苹果的设计规范指出,如果应用底部是不含固定的可滚动内容(比如一个长列表视图),那么就让他与底部的home条重叠显示吧。home条并不会阻挡你点选最下面选项栏的操作。

Image title


同时由于home 指示条的关系,有低端上滑操作的应用或许需要修改你的交互方式。


屏幕比例变化带来的不同


这个跟iPhone 4 / 4S 变化到 5 是一样的逻辑,iPhone X 的屏幕比例是 13:6 ,相对于16:9 在全屏图片设计上会有一些变化。

Image title


而纵向屏幕尺寸的变长,相对于iPhone 6/7/8 的 4.7 寸变大到 5.8 寸。这一切让拇指的盲区更大了,最直接的问题就是当你单手操作时左上角的返回键你已经够不到了。在 iPhone 6 中最早被引入的轻点两次 home 键整体下移屏幕的交互也随着 home 键的落幕而消失。而最人们常用的左划返回操作又受限于其他交互方式(比如邮件类应用的列表左划删除操作,走马灯的横向滚动等)无法成为标准交互方式。

Image title


这些或许只是iPhone X 在未来移动设计中为我们展现的问题中的冰山一角而已。随着设备的更新,交互方式也势必会随之不断变化,不过是否能被合理诠释,还有待观察~






我是阿喵,更多原创文章请访问我的个人原创博客「猫屋羊舍」。




更新:2017-09-27

收藏

22人已收藏

阿喵_Shiloh_Miao

界面/交互/平面 设计师 个人网站-maouys.com

  • 19

    作品

  • 537

    粉丝

  • 22

    关注

  • 每个人都该有个一个自己专属的头像~
  • 网页设计中基础布局
  • PhotoShop 自CC以后新添加的那些好用的功能们
  • 助攻小能手,辅助神器-Craft
相关标签

    猜你喜欢

      2017-09-27 原创文章 规范/资料 举报 2162 22 8 1

      作为UI/UE的你,知道这些关于iPhone X的知识点吗?

      0.0°

      你确定要举报作为UI/UE的你,知道这些关于iPhone X的知识点吗?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年09月27日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      8
      22
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录