iOS配色、字体、排版

13年，Apple Inc.推翻了拟物化设计，走向现代化的扁平iOS7。视觉上更为简单，将设计重点着眼于功能而不是复杂的视觉细节。

初探设计，难免想寻求捷径。虽然没有万金油，但是还是有些“条条框框”值得分享的。即便是为完全不同的平台设计，引领潮流的设计理念是不会变的。如果你只有过Web和印刷品设计的经验，也无须担心，设计语言是相通的。iOS平台的设计理念考究，却并非无木之本、无水之源。它就像是一本现代的时尚杂志，字体精致，排版简约。下面，既包括我搜集来的前辈的经验，也包括自己的一些实践总结，希望能够赢得互相学习的机会。学习iOS，一起来设计触动人心的产品吧。

官方的三大核心理念

iOS设计由三大核心理念驱动：Deference，Clarity，Depth。通过学习，下面总结一些实操性强的技法具体解释这些指导方针。

Deference（ISUX的翻译是“遵从”，我解释为“主从”）

“内容为王”，其它的都是从属，把页面看作一个整体，但“主从”的“从属”不应分散注意力，更不能喧宾夺主。（主从的例子，官方天气APP，闪电、下雨的效果再华丽，也不应喧宾夺主哈哈。）

精简

界面的设计“脱得越简单越好”（不是吗哈哈）。坚持核心的视觉标准，不要画蛇添足。每当你增加一个视觉元素，都要问问自己“这真的需要吗？”除非是在设计游戏或者有其他特殊的需求，否则一定要压制住使用厚重纹理质地、“炫酷”3D效果、多重阴影的欲望。还是把设计的精力放在考究的颜色，协调的渐变（泪啊泪啊），时尚的排版上吧。

挖掘内容的潜力

将内容“霸占”整个屏幕，好好地设计排版，让图片、字体、链接都能在小屏幕上表现出来。利用滚动避免多重的文本框，也为交互留下更多的空间。

颜色

用显眼的颜色说明元素是可点击的，是重点。选对主色，配合无彩色（或高亮/低纯的有彩色）完善你的设计。除了精致的颜色符合Simplify，颜色也有助于Depth。对于配色，可以参考“与色彩为伴”。

排版也是重要的一部分

界面设计走向扁平，“天然去雕饰，清水出芙蓉”。除掉了厚重的纹理，注意力自然就关注内容，排版会占据页面分量的50%甚至90%，它的重要性自然更加突出。慎重选择字体的字号、粗细、颜色、间距，保证视觉上的美感与可读性。（系统默认的数值往往是需要调整的。）具体可以参考后续的“排版”。

图形－背景关系

利用图背关系凸显内容。为重要的内容提供足够的留白，手掌大小的有限空间也需要“呼吸”。在其中堆积太多的信息结构、视觉元素只会显得更糟。如，分割线与内容的间距至少要有8pt，同列的元素间的距离最好也在5pt以上。

按钮的状态

导航栏的Tab按钮要设计两种：灰色轮廓和颜色填充。轻量的灰色轮廓不扎眼，也足以起到提示的作用。颜色填充的按钮自然会在其他一排灰色按钮中凸显出来，提示用户处于当前页面。

Clarity（清晰）

明确的设计思路才能产出明确的设计。按钮图标的意义要不言自明，排版要在手眼的间距下易读、易浏览。用户“一眼”就能明白你的APP是干什么的。例如星巴克的APP，一眼看上去就能使你联想到咖啡，仿佛散发出特有的香味。

可读性

为了保证可读性，R屏下字体最小不能小于11pt，以16pt最佳。越大的字体就要越细，小字体不要轻易加粗，影响阅读。

含义明确的图标

图标忌讳意义不明，它应该能够清晰地表达其象征或含义。如果能在图标旁有文字解释再好不过（这也是为可用性的考虑）。一个图标一旦被选择，就千万不要在别处使用类似的变体混淆用户。同样，不要使用通用意义的文字描述，如“返回”、“提交”（是否用，要酌情考虑上下文）；而是尽量简短而明确，如“返回主页”、“注册新账户”。

这个5秒实验网站（http://fivesecondtest.com），可以用来测试网页、广告、图标等设计对用户留下的第一印象。被试者注视作品5秒，然后会被问及一些问题，如＊＊是做什么的，你最喜欢其中的什么，最不喜欢什么等。结果会以云标签的形式展示。

还有需要指出的，当然大家可能都已经知道了，如分享，发布等按钮，Android与iOS是不一样的。

界面的描述性

用户应该一眼就能明白每个页面的用途，寸土寸金，品牌推广的内容不应喧宾夺主，应降至最低限度。出于可用性的考虑，布局的重点应该是将内容表达清楚。

颜色的文化内涵

正如“与色彩为伴”一节所说，颜色具有特定的内涵。红色指向破坏性操作，蓝色用以显示可跳转的链接，而不可点击的操作都是用灰色填充。在使用这些颜色的时候，我们注意不要对用户造成误导，比如，别把“删除”按钮填充为绿色。重要的事情再说一遍。

Depth（景深层次）

最难理解、最难消化的估计就是Depth了。这是一个比较抽象的概念，虽然我把它翻译成“景深层次”。在iOS下，景深处于了独特而又强大的位置，是区别于其他系统的标签。“景深”意味着上下文相关性，也能描述出过渡跳转。就像在家中，在你从卧室穿过走廊到达客厅的过程中，门框“放大”，光线变化，距离缩短，是一步一步地，有着比较自然的过渡。即便是黑灯瞎火，你也不会迷路。

界面跳转

其实iOS物理模型下的界面跳转既出彩又容易理解。从桌面可以放大进文件夹，紧接着放大进APP。这当然得益于强大的Xcode。关于这个技术模型就放在“动效”中细说吧。

背景模糊

虽然毛玻璃效果在Windows Vista中就出现了，但是能够完美地应用在手机系统上，也是自iOS7以来令人惊喜的改观。不应为了展示背景内容而牺牲当前内容的可读性，过多的焦点反而会分散注意。模糊背景不仅可以建立空间导航感，而且可以凸显当前内容。这也与人眼的机能有关，当你注视眼前的事物时，周围的其它事物就会自然变得模糊。

"What you think people want�, multiplied by ten is what you should create. Anything less won't last longer than a day in people's mind. Do it right and it'll last a lifetime."
（用户想要的，就要十倍的满足于他们。否则，不要一天就会被用户遗忘。加强它，让用户终身难忘。要的就是这种感觉！）

愉悦的体验

除了以上官方给出的三大理念之外，还有其它3个能让APP脱颖而出的要点：动效、手势、音效。之所以没被官方看中，可能是因为这些“花瓶”很容易过犹不及吧。所以，再好吃的美食也要有节制。

动效

动效不单是为了服务页面的跳转，它还可以为你的设计增添趣味性与惊喜（情感化）。甚至，可以作为强调，使用户注意到容易被忽略的元素。

手势

当5出来的时候，大家没少吐槽一把变长的iPhone。现在更是大屏占据主流。处于左上位置的“返回”很难单手操作了，按钮无法突破固定位置的局限，此时手势的威力就显现了。现在只需手指在屏幕边缘的任何位置右滑即可返回，这一手势可谓帮了大忙。不要把手势当作专家用户的高级功能，其实很多标准用户也都需要。大家都很实在，有了便捷的操作流，谁会乐于去看那些视觉提示（“返回”按钮）呢？

音效

音效在APP中虽然使用的最少，但不妨碍它给设计、给用户带来有诚意的回报，尤其是在完成枯燥的任务的时候。用户只听不看就能知道是你。（比如，陌陌，哈哈，这个例子有点不恰当。）这正不是设计想要的吗！日积月累，就能深化用户的印象。

民族的就是世界的，好的设计也是。无需多言，就能理解。

下面3点

如果你觉得我上面说的都是废话，请至少考虑一下如下有关iOS设计的3点：为触摸而设计、为可读性而设计、为分辨率而设计（4s，5/s，6/s，Plus）。

为触摸而设计（论文）

啊～～～这部分可能要写在毕业论文里。因为之前有个人博客里的内容被算作重复率的先例，我还是不要作死吧。总之，触摸的是按钮，按钮就要容易触摸！

为可读性而设计

数字排版。字体不要小于11pt，大段文章最好16pt左右。行距1.2倍到1.5倍之间。

为分辨率而设计

目前，对于iPhone，我们需要为3个分辨率设计：320480pt（4s、拉长的5、5s），375667pt（6、6s），414*736pt（Plus）。恰当利用有限的空间，将你所要展示信息的价值最大化。

iPhone分辨率.png

有关iOS的UI Kit很多，但是一定要保持更新，符合官方的标准，才不会出大错。

横屏模式

大屏手机越来越受到欢迎，横屏模式的使用场景也越来越多，很多APP开始适配横屏模式。之所以单独列出，是因为横屏模式的布局与竖屏不同，需要再设计，比如菜单、排版。比如，iOS自带的天气APP。

San Francisco Font

现在iOS9/EI Capitan的默认字体是苹果自制的San Francisco（英）、苹方（中）了，更新下字体库吧。也可以看看官方的介绍视频，理解理解字体在iOS设计中的影响。

3D Touch技术

iOS9又一惊天新功能，触摸有增加了一个维度。现在用户无需打开程序就可以进行快捷操作了，尼玛，剁手更方便了，而且是“用力”剁。

3D Touch就像是键盘快捷方式，可以快速完成重复的任务。为你的深度用户设计提高效率的快捷方式吧。但是，请对屌丝用户手下留情啊，没有这些快捷方式也不会影响APP的正常使用就好。

Apple Watch

虽然Watch不是标配，却是很大的加分项，瞬间高大上了有没有！依然记得有个社交APP为Watch用户设计了新功能，歧视！歧视！抗议！抗议！戴在手上，与iPhone协调，传感器数据瞬间提升操作体验，amazing！PS还是本人，账号没盗，突然发现每天不同时段好像在切换模式。并且，手表也很适合通知提醒。如果你热爱健身、关注健康或者是工作狂，这个小小的装备还是有极大助益的。最最重要的是，开发成本、设计工作量都不大。

最后，多看官方文档iOS Human Interface Guidelines，虽然只是“蜻蜓点水”地涉及到方方面面。（https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556）

还有iBook版本方便随身携带。（https://itunes.apple.com/us/book/ios-human-interface-guidelines/id877942287?mt=11）
这里还有ISUX的翻译版本（https://isux.tencent.com/ios9-guideline-ch1.html）。

资源

设计也是时尚，需要持续跟进。最新的资源要像“套套”一样必备身边。