9月7日，apple将会召开本年度的秋季发布会，发布的新产品包括新款的macbook pro、iphone 7以及apple watch 2。但是我更加关注的是随着iphone 7一起发布的ios 10正式版，因为在之前6月份的wwdc 2016大会上，apple就宣称ios 10是「the biggest ios release ever」，这次正式版的发布，apple应该会对ios 10给予重大的期望。
在ios 10正式发布前夕，本文主要针对已经发布的ios 10的人机界面设计指南(human interface guidelines，简称hig)来对比分析新老版本的ios系统在设计上究竟有哪些改变，有哪些设计趋势值得我们注意。
先上ios 10 官方指南的原地址：
腾讯isux介绍
腾讯社交用户体验设计，简称isux (internet social user experience)，成立于2011年1月11日，是腾讯集团核心、全球最具规模的ux设计团队，专业成员包括用户研究、交互设计、视觉设计、品牌设计、视频动画设计、ui开发、产品设计与市场研究等，至今isux分布于中国深圳总部、北京、上海、成都及韩国首尔。
改变：越来越像给设计师用的「设计指南」
首先，我们先来看一下ios 10之前的hig历史版本记录，了解一下在以前的版本中apple都做了些什么：
图1 ios hig revision history
自从ios 7开始，每个版本的hig都是在同一个框架中进行维护的，而且维护频率之低改动幅度之小令人发指(当然跟apple一贯的严谨风格有关)
而针对设计部分的内容一共也只有两次改动，这种情况一直持续到ios 9，如果你愿意把ios 7、8、9三个版本的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版本对比
5)原来的ui elements一级目录被取消，其中的二级目录全部成为了一级目录
图4 ios hig版本对比
6)增加了新的resources章节，提供了psd templates、san francisco fonts和xcode projects的下载!这是让我觉得最有诚意的部分了!你什么时候见过apple爸爸这么贴心了!
图5 增加的resources章节
apple的设计师对内部的细节内容也进行了翻新和扩建，在这里就不赘述了，但是确实值得大家细细去研究一番的，传送门在此：ios 10 human interface guidelines
我个人的感觉是，以前的hig像是写给非设计人士/个人开发者的，使当年的他们在缺乏专业设计师的条件下也能保证产品的基础体验;现在的hig更像是写给专业设计师的，说明了移动互联网整个行业已经成熟，职业分工越来越细，职业化程度越来越高，而用户和行业对设计的要求、设计对于产品的重要性也达到了一个新的高度。
而重视设计的apple变的更加关注设计，试图像当年ios 7一样，在设计和体验上带一波新的节奏。
p.s. 在这个方向上走在前列的是早在14年就发布了material design的google。
趋势：大而简，简而精
在hig最最最重要的设计原则的部分，仍然是万年不变的deference(顺从)/clarity(清晰)/depth(深度)。
但是不知道大家有没有注意，其中有了一个非常细微的变化，就是万年老二的clarity(清晰)原则，这次成了老大。具体原因也只有apple的设计师知道了(貌似是来自于用户吐槽)，但是就结果来说，「清晰」这一设计准则应当会是以后的设计趋势和重点
另外，对于设计原则的解释的内容也增多了，不要以为apple突然抽风从冰山美人变成了话痨，增多的内容恰恰告诉了我们apple重视的究竟是什么。
图6 新老设计三原则对比
如对本文有疑问， 点击进行留言回复！！
flash怎么返回上一步? flash撤销操作的三种使用方法
我要评论
网友评论