UED设计培训
美国上市UED设计培训机构

400-111-8989

热门课程

一起聊聊新iPhone X 设计规范

  • 时间:2017-10-12
  • 发布:UED培训
  • 来源:职场

10 个设计师里 9 个强迫症,剩下那个去设计了 iPhone X……

发布会谢幕了,媒体们也发完了新闻稿,朋友圈也热闹过了,接下来的工作该轮到设计师了, 在这之前,让我们先来看看这个 iPhone X,对 UI设计师的日常工作有什么影响。

新增的虚拟 Home 指示条—你不得不考虑的设计元素之一

iPhone X 迈向了全面屏,移除了原本在手机底部的实体 Home 键,取而代之的是一条 134 x 5 pt 的虚拟 Home 指示条。「底端上划」成为了全局性的系统操作,它可以让你返回桌面(原本的单击 Home 键),或者切换应用程序(原本双击 Home 键)。我将这个虚拟 Home 指示条的特性总结为以下五点:

特性一:如影随形

苹果开发文档指出,这个 Home 指示条是「至关重要的系统元素」,除在某种特殊条件下,这个指示条将永远伴随着你的 App,成为强制的设计元素出现在屏幕中。这就意味着,在App设计中你必须为它保留位置,并考虑周围元素与它的兼容关系。

一起聊聊新 iphone X设计规范

特性二:黑白双煞

什么?你说你想做彩虹渐变指示条?少侠你太天真了…这个虚拟Home指示条只有亮/暗两种模式,它会自动根据周围背景选择将自己变身成白色或是黑色。

一起聊聊新 iphone X设计规范

特性三:真 · 全面屏

一起聊聊新 iphone X设计规范

iOS 自带的通讯录是一个典型的带有底部导航栏的 App,对比 iPhone 8 和 iPhone X,你会发现在 iPhone X 上,底部导航栏并不在真正的「底部」,它是悬浮在虚拟 Home 条上方的。对拥有底部导航栏的 App 而言,iPhone X 这个全面屏的「下巴」并非可用区域,它并不真的「全面」。

同时,iOS设计指南中也指出,如果 App底部是可滚动的内容(比如一个长列表视图),那么官方给出的建议是:放心大胆地霸占整个屏幕吧!发现文字和 Home 指示条重叠了?没关系!这是官方推荐的正确做法!事实上,用户依然可以点选最下方的列表条目。这种情况下,全面屏才是真的「全面」了。

一起聊聊新 iphone X设计规范

特性四:鸠占鹊巢

如果你的 App 带有「底端上划」这样的炫酷操作…Apple的建议是: 要不你还是重新考虑一下?因为这个交互我们已经占了!在 iPhone X 设计时,类似这样涉及到屏幕底部上下滑动的交互都需要更谨慎的思考、更严格的测试。

一起聊聊新 iphone X设计规范

当然,iPhone X 并没有强制禁止这种交互操作。它给开发者们留了一条路:「在万不得已必须要这样做的情况下」,开发者可以开启「边缘保护」功能(Edge Protection)。开启后,第一次底端上划将只是唤醒 Home 指示条,再次上划才会激活原有功能。

一起聊聊新 iphone X设计规范

特性五:自动隐藏

在播放视频时,开发者可以开启虚拟 Home 条「自动隐藏」功能从而获得沉浸式体验。开启后,视频播放时虚拟 Home 条将自动消失;单击屏幕后就又会出现。

一起聊聊新 iphone X设计规范

「安全区」——这词儿怎么听起来有点耳熟?

看着新的 iOS 设计规范,一个陌生又熟悉的词浮现在我的脑海中——出血(平面印刷中常用)

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

一起聊聊新 iphone X设计规范

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

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

一起聊聊新 iphone X设计规范

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

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

一起聊聊新 iphone X设计规范

注意全屏图

如果你的 App 中用到了全屏背景图,比如启动画面(Splash screen),你需要注意不同屏幕比例的适配问题,确保图片被切割后依然保留主体部分。如果你的启动画面里有人物模特,尤其需要注意屏幕比例变化造成的切割位置的变化(半身人像如果正好切到手肘的位置会显得很奇怪)。当然,有资源给两种屏幕比例做适配素材的同学可以忽略这一条。

一起聊聊新 iphone X设计规范

矢量图形 PDF 是你的朋友

iPhone X 的屏幕分辨率达到 1125px × 2436px(458 PPI)。更高屏幕画质意味着位图素材的尺寸也要相应变大。这种情况下,尽可能多地使用 PDF 矢量图形可以在更大程度上为 App 瘦身,节省流量。

一起聊聊新 iphone X设计规范

给设计师唯一的好消息……

看到这里,作为设计师的你也许会觉得:这 iPhone X 就是个大坑!是的,我看完新的设计文档确实也有这种感觉……

对设计师来说,有没有什么好消息呢?

有(且可能仅有这一条)—— 那就是大家再也不用考虑打电话,WIFI 热点分享等特殊状态下的设计啦!因为 iPhone X 用状态栏时间的背景颜色来统一表示这些特殊状态(不再有高度变化),喜大普奔!

一起聊聊新 iphone X设计规范
一起聊聊新 iphone X设计规范

总结

几天后,当你在设计软件里新建出第一个形状诡异的 iPhone X 画布,请记得:

新增的虚拟 Home 指示条,将成为你不得不考虑的设计元素之一。希望你还能记得它的五个特性:如影随形、黑白双煞、真 · 全面屏、鸠占鹊巢、自动隐身。

全面屏 iPhone 更大,也更瘦长了。但对你来说,你要时刻牢记一个陌生又熟悉的词——「安全区」,尤其是在横向持握状态下。

你尽可能多地使用矢量图形了吗?你的 App 安装包变大了多少?全屏图片被奇怪地切割了吗?你放在左上角的主功能键是否超出了拇指舒适区?有空的时候,不妨想一想,「返回」操作是否还有别的可能?

感谢大家阅读“一起聊聊新 iphone X设计规范”希望对大家有所帮助,更多精彩内容请关注UED培训官网

免责声明:本文由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除

上一篇:如何成为一名更加贴心的用户体验设计师
下一篇:抄袭是中国设计师的通病传统是创造出来

UXD用户体验设计师的价值

周复一周,你与成功的距离是在缩短还是在拉大?

做交互设计,最难的地方在哪?

累死你的不是工作,而是工作方法

选择城市和中心
贵州省

广西省

海南省