第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

iPhone X 的小刘海,UI 设计师的da麻烦(2)

时间:2017-09-26 16:42来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
全世界也许 99.99% 的手机屏都是规整的矩形,我们的安全区就是整块矩形屏(安卓系统底部的虚拟按键可以近似理解为屏幕外,设计时可以忽略)。然而 iPh

  全世界也许 99.99% 的手机屏都是规整的矩形,我们的安全区就是整块矩形屏(安卓系统底部的虚拟按键可以近似理解为屏幕外,设计时可以忽略)。然而 iPhone X 这个妖蛾子的出现,又迫使我们重新找回那个久远的记忆……

  让我们来看看苹果定义的 iPhone X 设计「安全区」吧:

  

iPhone X 的小刘海,UI 设计师的da麻烦

  手机纵向持握状态下,安全区是从屏幕最顶端往下 44 PT 开始计算的,要注意的是,它并不是和「齐刘海」完全齐平的,而是要再往下一点。「下巴」位置上,从下往上推 34 PT 以上的部分开始才被视为安全区。

  纵向持握状态下的安全区设计还比较容易理解,但到了横向持握状态,安全区的概念就有点反直觉了:

  

iPhone X 的小刘海,UI 设计师的da麻烦

  横向状态下(假设是逆时针旋转 90 度),原本的「刘海」部分到了左侧,「出血」部分实际占用面积不变,而尽管虚拟 Home 条挪到了下方的长边上,屏幕最右边虽然没有任何系统及元素,但苹果依然建议将其设置为与左侧「刘海」相对称的「出血」。

  也就是说,在横向状态下,你的安全区是个半岛,只有上方是连接到屏幕边缘的。这又是为什么呢?为什么苹果官方不建议设计师充分利用最右边的空白面积呢?为什么非要左右对称地设置「出血」呢?

  尤其考虑到对于很多手机游戏来说,任何一点屏幕空间都是宝贵的,血条,金钱,操作键,小地图,大地图等等,太多元素逼着设计师充分利用每一寸空间了。

  苹果官方给出的解释是:由于你无法预测用户在横向持握下会把「刘海」放在左边还是右边,如果安全区不是横向居中放置的,会造成界面中元素与手机边缘的相对位置不固定。

  他们认为,用户在使用手机时(尤其是玩游戏的时候)高度依赖手部的肌肉记忆,不对称设计尽管空间利用率更高,但与用户的肌肉记忆相背,由此导致的失败操作容易让用户沮丧。因此,苹果向广大设计师们高声疾呼:请把按键全都放到安全区里来吧!

  

iPhone X 的小刘海,UI 设计师的da麻烦

  尺寸大了,比例变了,这意味着……

  

iPhone X 的小刘海,UI 设计师的da麻烦

  在 iPhone X 之前,尽管 iPhone SE,7 和 7 Plus 的屏幕尺寸大小不同,但都是 16:9 的屏幕。而 iPhone X 差不多是个 13:6 的屏幕(812 × 375 PT)。屏幕的绝对尺寸也变大了,从 4.7 寸增大到 5.8 寸——这些对设计来说意味着什么呢?

  「拇指盲区」更大了

  乔布斯曾说,手持设备最理想的屏幕尺寸应该是 4 寸。然而随着乔老爷子英年早逝,苹果在「越来越大」的路上越走越远(据说很大一部分原因是为了顺应亚洲市场的需求)。iPhone 如今已经增大到了惊人的 5.8 寸。

  一般人大拇指大概 2.5 – 2.7 寸长,iPhone 7/8 Plus 是 5.5 寸,日常生活中我注意到,广大 Plus 用户已经发展出了一套独特的手部微调动作,来让自己的拇指够到左上角的「返回」键(为人类的适应力感到惊叹!)。尽管如此,这么大的屏幕已经超越了绝大多数普通用户的拇指覆盖范围。

  

iPhone X 的小刘海,UI 设计师的da麻烦

  无论是在通勤地铁上,还是走在路上一手拿奶茶,另一手拿手机,在很多情境下单手操作是无法避免的。苹果在 iPhone 7 / 7 Plus 中设计了两次轻触 Home 键将屏幕整体下移的精彩交互。

  

iPhone X 的小刘海,UI 设计师的da麻烦

  然而,随着 iPhone X 移除了实体 Home 键的,这个精彩的交互设计也随之消失了。虽然很多人已经习惯了直接在 iPhone 上的左滑返回,但以下两个因素阻碍了它成为事实标准的返回操作:

  该交互方式的可见性为零,可发现性较低

  App 自带的横滑操作可能造成交互冲突。比如:邮件类 App 中的归档操作,列表控件中的删除操作,「走马灯」控件(Carousel)的横向滚动等等。

  也许现在是时候重新思考左上角的返回键了。在这里提供一个特殊的应用例子仅作抛砖之用:

  

iPhone X 的小刘海,UI 设计师的da麻烦

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕