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

上网第一站

当前位置: > SEO >

谷歌设计师:如何评价新版 IPHONE X 的设计规范?(2)

时间:2017-09-19 10:02来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
手机纵向持握状态下,安全区是从屏幕最顶端往下 44 pt 开始计算的,要注意的是,它并不是和「齐刘海」完全齐平的,而是要再往下一点。「下巴」位置

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

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

  

谷歌设计师:如何评价新版 IPHONE X 的设计规范?

  横向状态下(假设是逆时针旋转 90 度),原本的「刘海」部分到了左侧,「出血」部分实际占用面积不变,而尽管虚拟 Home 条挪到了下方的长边上,屏幕最右边虽然没有任何系统及元素,但苹果依然建议将其设置为与左侧「刘海」相对称的「出血」。也就是说,在横向状态下,你的安全区是个半岛,只有上方是连接到屏幕边缘的。这又是为什么呢?为什么苹果官方不建议设计师充分利用最右边的空白面积呢?为什么非要左右对称地设置「出血」呢?尤其考虑到对于很多手机游戏来说,任何一点屏幕空间都是宝贵的,血条,金钱,操作键,小地图,大地图等等,太多元素逼着设计师充分利用每一寸空间了。

  苹果官方给出的解释是,由于你无法预测用户在横向持握下会把「刘海」放在左边还是右边,如果安全区不是横向居中放置的,会造成界面中元素与手机边缘的相对位置不固定。他们认为,用户在使用手机时(尤其是玩游戏的时候)高度依赖手部的肌肉记忆,不对称设计尽管空间利用率更高,但与用户的肌肉记忆相背,由此导致的失败操作容易让用户沮丧。因此,苹果向广大设计师们高声疾呼:请把按键全都放到安全区里来吧。

  

谷歌设计师:如何评价新版 IPHONE X 的设计规范?

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

  

谷歌设计师:如何评价新版 IPHONE X 的设计规范?

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

  「拇指盲区」更大了

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

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

  

谷歌设计师:如何评价新版 IPHONE X 的设计规范?

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

  

谷歌设计师:如何评价新版 IPHONE X 的设计规范?

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

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

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

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

  

谷歌设计师:如何评价新版 IPHONE X 的设计规范?

  在 5.8 吋的 iPhone X 上,左上角的「拇指盲区」变得更大了。而基于 F 型流动视线设计的很多 App,通常都会将它们最重要的功能入口置于左上角(用户最先看到的内容原本正好处于拇指舒适区的边缘)。而到了 iPhone X 上,视线优先和拇指舒适就未必重合了——iPhone X 给设计师出了一道难题。

  注意全屏图

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