从IOS 10设计指南变化看设计的新趋势

趋势:大而简，简而精在HIG最重要的设计原则中，依然是万年不变的Deference//Clarity（清晰）/Depth(深度)。但是不知道大家有没有注意到，有一个非常微妙的变化，那就是万年老二的克里斯蒂姆(清晰)原则，这次成了老板。

变化:越来越像是给设计师用的「设计指南」

首先，让我们来看看iOS 10之前的HIG历史版记录，了解Apple在之前的版本中所做的事情：

图1 iOS HIG Revision History

自从iOS 7开始每个版本的HIG都是在同一个框架内维护的，维护频率的低变化范围令人发指(当然和Apple一贯的严谨风格有关)

设计部分的内容只有两次变化，这种情况一直持续到iOS 9.如果你愿意使用iOS， 7、8、拿出93个版本的HIG一起看，简直就是在玩找茬游戏。

然后我们再拿iOS 9 和 iOS 10 对比HIG结构框架：

图2 iOS 对比HIG版本

结构框架几乎完全不同！

经过三年或三个版本没有移动的框架，我相信Apple的设计师绝对不会因为无聊而做这样的事情。

对于像Apple这样严谨而强迫症的公司来说，做每件事都必然有其原因，其中有一个信号：iOS 会发生10个设计「重大改变」，Apple也希望通过设计的变化获得更多的用户。

让我们把视角深入到具体的章节中，看看有什么变化：

1)增加了以前从未见过的Interaction章节 (主要内容是软硬件与用户的互动)

2)原来的Icon and Image Design章节(主要内容是系统中不同情况下的icon设计定义)改名为Graphics章节，优先上浮

3)原始iOS Technologies章节(系统中的新技术)更名为Technologies章节，优先下移

4）原来UI Design Basics章节中的动画/品牌/色彩/布局/字体内容专门提取生成新的Visual design章节

图3 iOS 对比HIG版本

图7apple Music改版

答案是:增加字体大小！加粗字体！多留白！降低页面的视觉水平！

另外...增加控件！！！在锁屏播放界面中，播放和音量的控件明显放大，控件之间的间距也增加，大大降低了误触的概率。

图8 锁屏播放改版

并给重要的控制器颜色。新的控制中心按钮有不同的颜色，使它们有更明显的区别和视觉注意力。同样，按钮也增加了很多，Night Shift、AirPlay和AirDrop更加独立。

图9Control center改版

以新版地图为例，这种优化出现在更多的界面中：

首先是控制位置的变化。原来的“开始”从底部移动到规划路线的右侧，变得更加明显，与路线本身有更强的相关性；集中在顶部的所有操作都移动到底部。大屏幕手机下的用户操作更加方便，手指可以完成所有操作，无需上下移动。

然后是控制形式的变化。原来的“开始”从纯文本Label变成了绿色按钮，为用户提供了更强的视觉指导。另一个细节是文案也是从原来的「Start（开始）」变成了「Go（出发）」

图10Apple Map改版

这些改进有一些共同点：

1. 通过调整字体大小和厚度以及更多的空白，用户可以理解界面的层次结构，而不是以前使用平面元素的划分和分层来构建界面结构，使界面更加平坦，内容更加突出。此外，具有一定视觉障碍的用户（色盲/色弱/老年人）也可以无障碍地使用。

2. 放大按钮的大小，改变按钮的布局，给按钮不同的颜色，提高用户对可操作内容的认知，降低点击操作的难度，使界面与用户的互动行为更加友好。引用Apple在其Accessibility Guideline(无障碍指南)中的描述是「You view what you can do」 和「We make it easy to push all the right buttons」

当然，这些变化解决了一些问题，但也带来了一些新的问题，比如Apple 在Music中，内容显示效率的下降，原本可以显示6张专辑的界面，现在只能放下3张。但是Beta版还是发布的，不知道Fix会不会在正式版本中出现。

但是，「The biggest iOS release ever」，iOS 10名至实归

比较Apple Music更早、更彻底地做Airbnb

似乎不仅仅是Apple一家试图做出这样的改进，这一趋势已经开始蔓延。例如，Airbnb在今年4月推出的新设计几乎完全放弃了基于图片背景的原始设计，取而代之的是大面积的空白和粗体的文本，底部标签的高度也增加了很多，当然，按钮也增加了一个圆圈。

新设计消除了任何可能给用户带来视觉干扰的东西，变得极其纯粹。

图11 Airbnb改版

朋友JJ-Ying也在前段时间的博文中「后扁平化时代」的 i18n 和 L10n详细分析了Airbnb的修订，并在文章中引用了对Airbnb新设计的有趣描述「比互动稿还有互动稿」，然而，他在文章中更加关注的问题是：在这种趋势下，设计师在本地化和国际化设计中遇到的字体设计与产品品牌之间的关系以及挑战。感兴趣的学生可以点击上面的链接阅读。

另一家乘坐这辆车的公司是Instagram

接着Airbnb的步伐Instagram发布了他们的新标志和新设计。我们暂时把不同的新标志放在一边，主要是看UI的变化:

Ins删除了头栏和底栏的颜色，通过粗化文本来区分内容结构，取代了之前通过添加文本的颜色(如用户昵称和赞数)。

图12 Instagram改版

Ins的设计总监Ian在Medium上对修订的解释是:“我们的新icon已经足够colorful了(真的很colorful……)，所以我们希望应用程序中的颜色来自用户上传的照片和视频，而不是应用程序本身，然后我们消除了影响用户内容显示的干扰。”

结语

总结成一句话来形容这种趋势就是「大而简，简而精」。

在这种趋势下，未来的设计将更加关注产品的内容和操作体验，减少其他因素对用户使用的干扰，这对设计师来说是一个巨大的挑战，因为设计越简单，设计就越困难，特别是如何掌握界面设计「大」和「简」以及如何通过更有限的手段和空间传达更多的信息和引导用户「精」这是我们未来需要不断考虑、探索和解决的问题。