IOS11设计师人机交互规范。

这篇文章大部分是读书笔记,小部分是自己的思考。

自从iOS7发布以来,我们已经不自觉地适应了“扁平化的设计”,那些梦幻的光影、精美的材质、迷人的质感,似乎已经离开我们很久了(其实也就三四年)。这深刻地改变了整个移动设计——设计师可以专注于动态效果和内容,而不是错综复杂的视觉细节。如今,Skeuomorphic设计越来越不常见,取而代之的是迷人的渐变,精致的投影和无处不在的卡片。

当iOS在2007年首次发布时,人们对触摸感应智能手机完全陌生。所以在那个时候,苹果引入了一个强大的隐喻——一个模拟现实来教育用户的直白的设计。比如系统内置的iBook程序。

但是当人们对智能手机越来越熟悉的时候,这种强大的比喻会让人觉得过于直白和繁琐。超写实设计是一种包容性不高的设计,其设计隐喻过于直白,越来越不适应内容大爆炸的移动互联网时代。随着移动终端承载的内容越来越多,所有的设计都要让位于内容。

iOS的整个设计围绕着三个核心概念:清晰、合规和深度。

为了使事情显而易见,交互部分(比如按钮和链接)应该是不言自明的。字体大小要合适,间距要合理,方便阅读。你的内容需要清楚地表明你的软件是什么。你能做什么?

标题应该和内容有很好的对比。标题字号建议34pt以上,内容字号建议17-19pt。根据经验,中文的字号可以比英文缩小1-2 pt。文本应该与其他元素对齐,以便流程的视觉流线准备就绪。IOS11多采用左对齐(接近安卓?)和中心对齐。

图标不应该模棱两可!而是让用户一目了然。带图标的文字是最好的方式,因为即使是最明显的图标也不如文字准确。在一个软件中,同一个图标不应该代表两种或两种以上的意思,因为这样会让用户混淆。

为了处理不同分辨率的屏幕,应该使用矢量化设计。

iOS11的一些内置应用使用了区域填充图标,而不是原来的线性图标,图标中的线条也由原来的1pt改为2pt。

每一页都应该清楚地表明它是什么。品牌标识要最小化,你要清楚的记住你的APP是你的产品,不是你企业VI的一部分。

如果页面中有图片,建议选择高质量的素材和干净的背景,加上清晰的标题。

颜色是有意义的。在UI设计中,红色代表破坏行为,绿色代表肯定行为,蓝色代表链接,灰色代表非活动状态。不要混淆颜色,比如绿色代表退出登录按钮(破坏性行为)。

按钮应该易于点击,它们的大小应该在30和30-60磅之间,最佳大小是44磅。如果你的APP有点击查看图片的功能,请确保包含缩放功能,最好添加双击缩放功能。随着iOS设备的屏幕越来越大,需要通过滑动手势轻松导航到上一个屏幕。如果你的页面内容很多,导致页面很长,建议增加双击状态栏返回顶部的功能。

横屏模式在iPad等设备中很常见。苹果建议在6P和iPhone X上使用横向模式,可以尝试在Sketch中使用自动布局设计,Xcode已经在故事板中加入了自动布局和大小类。技术改变世界,技术提高效率。

你的内容应该是屏幕的主角,其他的都是次要的。你应该使用界面设计元素来衬托你的内容,而不是干扰它。

你的用户界面应该直接面向美学核心。每增加一个元素,就问自己“这有必要吗?”如果你的应用是一个游戏或者需要一个特殊的主题,它倾向于使用厚重的纹理,3D效果和多重阴影。如果不是,你应该关注功能性的颜色,和谐的渐变和漂亮的排版。

你的内容要占据整个屏幕,最大化内部元素。避免在同一个滑动区域使用不同形式的手势,以留出更多的互动空间。

你应该使用突出的颜色来显示一个元素是可点击的或者需要突出显示。如果不能选择主题色,就选蓝色,因为这是最保险的颜色。如果是初学者,建议用浅灰色背景/白底黑字开始设计。这个方案有很好的对比度和可读性。

由于用户界面的简化和对内容的重视,文字内容会占据整个屏幕的50-90%。所以你需要选择一个漂亮美观的字体,并设置好字的粗细和颜色,才能有漂亮的视觉体验和最好的阅读体验。为了使您的设计易于理解并适合iOS系统,建议使用默认的三藩市字体(方平字体)。因为苹果在所有的内置程序中都使用它。

使用负空间使视觉焦点集中在内容上。你看到的越少,你就越能专注于某事。空白也给了整个页面喘息的空间。不要用太多的结构层次,不要让你的视觉元素占据你的屏幕。建议使用8pt网格图案设计,这是移动终端的最佳网格设计图案。

深度可能是最难理解的部分。这是一个非常抽象的概念,但同时又非常强大和独特。深度的灵感来源于一切事物与过度场景的关系。在现实世界中,当你从一个房间走到另一个房间时,你会体验到距离感和发展过程。这就是你不会迷路的原因。

iOS最令人兴奋和独特的是动画。每一页的过渡,从主页面到文件夹页面,再到App页面,都充满了深刻的隐喻。

为了防止背景干扰你的内容的清晰度,背景是模糊的。背景虚化不仅可以让你保持背景的原始颜色,还可以聚焦前景内容。当然,背景虚化并不是虚构的发明,它也来源于我们的现实世界。比如你盯着一个东西看,其他的东西就变模糊了。

动画不仅可以从一个画面切换到另一个画面,还可以为你的设计增添愉悦和乐趣。这是提高应用程序质量的一个重要但经常被忽视的因素。通知显而易见。背景有大雨的时候,天气就比较好理解了。

虽然鼓励使用动画,但也不能过度。它们应该为你的内容、功能目标和视觉导向服务。

随着iOS设备的屏幕越来越大,后退键的位置太高,拇指够不着。所以虽然没有可视按钮那么明显,但是手势可以作为可视交互方式的补充。

3D Touch允许用户快速访问应用程序内外的选项。类似于你Mac上的快捷键,其实是一个高级功能,所以不应该是排他性的,也就是你的用户不用也可以完全使用你的APP。

由于手机环境的复杂性和多样性,在应用程序中应尽量少使用声音。但是你可以设置一个特殊的通知声音,让它“先听到它的声音再听到它的声音”,为你的APP形成一个品牌/产品特色。

IOS 11使用大黑标题。因为随着iPhone P和iPhone X的出现,屏幕越来越大,屏幕空间变得充裕。现在有了大标题才合理有意义。大字体的另一个原因是可访问性。随着智能手机对整个社会的渗透,智能手机不再是年轻人的专利。苹果需要让iPhone照顾到各个年龄段。在辅助功能中,允许用户设置字体大小。在iOS 11中,苹果所有的内置程序都支持该功能。希望越来越多的第三方app支持这个功能。

更大的屏幕意味着更多的使用空间。对于狭小的屏幕空间来说,在小屏幕iPhone上嵌套容器(卡片)是奢侈和不合理的。但是当iPhone X和P系列出现的时候,情况就完全不同了。通知栏、标签页和导航以卡片的形式组织得更好,可以让你更方便地浏览。圆角的卡片让内容看起来更有触感,更滋润。您可以使用模糊背景和阴影来增加设计的深度和背景。

是什么导致了极客专用的又黑又酷的iPhone和iOS变成了今天的样子?我个人对苹果设计逻辑的理解如下。

设计背后的原因:移动信息的爆炸,用户的膨胀,多样化和大屏化,普通用户成长为高级用户,软件功能越来越复杂。

怎么做:包容性的设计模式,自动布局,优化的信息结构,可调的字体大小,防丢失的设计,易读的文字。

最终的输出设计:平面设计、特殊动画、卡片设计、漂亮的版面、漂亮的字体和标题。

参考资料:

孟涛-《设计密码2》

苹果-《iOS人机界面指南》