规范论 | ios11设计指南 - ProductTour | Created by Tickmao

规范论 | ios11设计指南

Sat, 07 April 2018

ios11设计指南（中文版）

HIG(Human Interface Guideline)是apple为确保ios上各类app的用户体验质量和一致性，为产品设计师们公布的一份设计指导。这份设计知道俨然就是一个移动互联网入门者的教科书，非常值得一读。感兴趣的小伙伴不妨看看。英文较好也可选择阅读原文。

过去五年内，扁平化设计是非常普遍的，但在ios7之前并不是那么常见。它的到来形成了如今的设计方式。但是说它没有发展是错误的。ios设计适配了更大的屏幕。与被取代的拟物化设计进行对比，通过渐变、阴影和卡片等方式，扁平化的设计有更多的微妙差别。

ios的发展

让我们从看下面这幅图片开始。最左边是拟物化的设计。在2007年，很少人口袋里会放上一台超级计算机，因此这很有效、很有表达力。中间的图片用单调的颜色，漂亮的文本和高分辨率的内容代替了复杂的装饰。由于我们大部分人对技术越来越感到舒适，用厚重的装饰来设计变得不再必要。最右侧是ios11的屏幕截图。标题略微加粗，结果更加易读。由于屏幕更高了，现如今底部导航栏更加常见了。如今的设计师不得不去适配诸多的分辨率和像素密度。好消息是我们有了更好的工具，比如Sketch和XCode，这使我们能够应付这些现代技术。

更大的标题

ios11比任何时候都接近它开始的时候。到处能看到加粗的文本。标题又大又黑。由于现如今的屏幕比从前高了两倍，大标题是有意义的。使用大字号的另一个原因是可及性。每天每个年龄段加起来总计有几十亿人使用手机，使内容尽可能清晰可读是很重要的。可及性是指允许用户设置很大的字体在app中。在ios11中所有添加的应用支持这一选项。因为这个原因，你会发现用户名很期待ios11。

卡片

更大的屏幕意味着内容有更大的空间展示。在大屏iphone出现前，尽量去除容器，给内容最多的空间去展示。但是因为iphone X 和 8，这不再是一个问题。我们能够更加容易的导航通过状态栏，导航栏和导航条，使用卡片能更好的组织内容。带有圆角的卡片使得内容更加生动形象。你也可以给你的设计增加虚化的背景和添加阴影。

ios 设计的形式

设计越来越简单了，让我们能够专注于动画和功能，而不是复杂的视觉效果。在ios7之前，我每天的大部分时间要去处理复杂的效果，例如：木纹、皮革和铬等。如今，我大部分时间花在动画和编程上。这不再是关于静态设计，而是使得设计更加生动，更深层次的吸引用户。这也是这本书很少提及视觉设计的原因。从技术角度讲，动画和编程从未这么重要和可行。这也是为什么我们每周都能见到一个新的原型工具和编程框架。设计变得越来越广阔，但是与此同时，许多科目立刻有了联系。一个设计师变得独立执行，与工程师能更好的合作，他们之间能更好的理解对方的技艺。

我被问过很多次，如何开始设计，如何成为更好的设计师。然而没有“银弹”，但是ios设计有很多的技巧与规则，可以普遍应用到你的设计中。即使你在为一个完全不同的平台设计，相同的设计理念留下了，你能将你学到的知识应用到web和印刷方面。ios是一个让设计落叶归根的平台。它看起来像一本杂志，有着漂亮的文字和简单的布局。你在这本书中学到的将会非常好的服务你在你的设计之路上。

核心理念

让我们回到基础。ios由3个核心理念驱动：重点、透明和深度。官方授意的这些设计原则，我已经把它们化成比官方指导更简单可行的内容了。

重点

你的内容应该是主角，其他内容是次要的。使用元素去补充它而不是去分散注意力。例如，使用转场动画，用户不会迷路。虚化的背景使用户仍然专注于内容。如果你感到怀疑，从提供的模版开始，从那里开始工作。

简化

你的用户界面应该精简到符合核心的美学。每次你添加一个元素问问你自己是否是必要的。除非你的应用是一个游戏或者一个特别的主题，减少使用厚重的纹理效果，3D效果和多重阴影。而是专注于功能性的颜色，和谐的渐变和漂亮的文本。使用扁平的基调而不是厚重的纹理，合理的使用渐变。专注于文本和漂亮的图像。典型地，最好让内容获得所有的注意力。用一个主要的颜色，代表一个状态和可交互的元素。如果有疑问，不要使用超过一种的主要颜色。

重视内容

内容应当铺满屏幕，给予最大的空间。避免嵌套的容器，最大化滚动区域，以允许更多的空间来交互。图片和背景几乎撑满宽度，你的内容是主角。使文字大而诱人。不要使用颜色除非它是可交互的。模糊使得提示内容清晰，而不是牺牲按钮的清晰度。

颜色

使用突出的颜色来表示元素被点击了、它是高亮的。选择正确的颜色和中立的基调来设计。蓝色对于按钮和状态来说是安全的选择。并且，白色和额外的浅灰色背景对于起点是推荐的。形成了鲜明的对比，这是完美的、可读的。一个始终如一的颜色表示可交互和高亮的元素。中立的基调给背景，能够专注于内容和行为。灰色用户不活跃的状态。灰色用在文字上代表重复或者不重要的，例如分类和标签。

排版是内容

由于简化界面和专注于内容，你的排版将占据屏幕的50%-90%。因此，漂亮的字体，粗细，行高和颜色，来保证在任何尺寸上最佳的阅读体验。默认的San Francisco font字体是不错的选择，它是为易读性所设计。苹果公司把他应用在所有它们的应用上。排版占据了50%-90%的空间，易于阅读很重要。文字应该大并且对比性强。合适的空间结构促进了阅读。外边距应该最小为8pt。对齐文本、图片和按钮，使得设计更吸引人。

实体周围的空间

实体周围的空间能够专注于内容。你看到的越少，你就越能专注于你所看到的。实体周围的空间带来了“可呼吸的空间”。不要讲你的屏幕充满太多的结构和不必要的可视元素。如果你有疑问，就使用XCode的默认外边距。苹果公司通常使用8pt-16pt的外边距离。边界和内容的最小距离建议是8pt。 5pt建议在相同的元素之间使用。 10pt建议使用于划分不同区域。因为更高的屏幕，不要害怕有太多的实体周围的空间，尽全力去把有趣的内容铺满屏幕。

清晰

使得事物清晰。按钮应该是可以自描述的。排版应当是大的可读的，有舒适的间距的。你的内容应该清楚地表面你的应用是关于什么的。例如，如果你是一个咖啡的应用，你应该想到使用咖啡豆，浓咖啡和咖啡的棕色。

是文字可读

标题应当是大的有对比性的。题注应该是简短的易于浏览的。正文应该有合适的空间，一行不要太长，避免阅读疲劳。正文应该最小11pt。最理想的阅读字号是17pt-19pt。屏幕标题应该是34pt以上，文本中标题应该是20pt-30pt。让文本与其他元素对其使得更易于浏览。最后，使用黑色或者深灰色而不是浅色的背景来加强对比。给标题应用34pt以上的字号，不要害怕使用中等和特粗的。较少的使用加粗。给正文17pt字号，这是用户读的最多的部分。 11-14pt使用在状态栏，导航栏和标签上的次要文字。把较小的文字应用在用户不会长时间阅读的地方。重要的文字要加强对比，就像黑色和白色。

使用明显的图标

图标不应该是模糊不清的；它们应该是清楚地代表符号的意义。只要可以，文字和图标一起使用。一旦你使用了一个图标，不要再使用它的另一个变化的样子了，这会使用户困惑。同样地，使用明确的文字例如：“返回首页”，“注册新账户”来代替“返回”，“提交”。设计清楚的矢量的图标以方便适配不同分辨率的屏幕。保证你的素材能在1倍、2倍和3倍像素密度的屏幕上显示。图标应该是立刻能被是别的。理想状态是伴随着文字一起出现。有颜色的图标代表是被选择的状态。颜色的选择上应该基于你的主色调。如果你有疑惑，就使用蓝色。导航栏和标签的最大尺寸建议是30pt * 30pt。

描述屏幕

每一页应该明确表示它是干什么的。通过屏幕标题和高亮的标签栏来品牌化。考虑好使用什么图片来表示这片区域。标题解释了这一页是干嘛的。合适的字号是34pt。文字应当简短易于理解。

有意义的颜色

颜色是有意义的。使用红色，绿色，蓝色和中立的基调能清晰的表示有破坏性的行为、积极的行为、链接和未激活的状态。避免把颜色使用于不同的目的而使用户困惑。例如，不要使用一个绿色的按钮来代表删除。红色代表了危险的操作和警告。除非它是你的主色调，红色应该有节制的使用。应为它很容易夺取其他颜色的关注度。蓝色代表一个普通操作。使用加粗代表它是一个特别的操作。灰色用于题注和正文。在图中的场景，用于解释图片将如何被删除。

给触摸做设计

按钮应该是可以轻易点击的。它们的大小应该是30pt-60pt宽。最理想的大小是44pt。很少情况下，给文本中的链接设置22pt，但是慎重使用，因为这样不易点击。甚至文字按钮至少要有30pt的可点击区域。当打开图片时，确保能够通过一只手的手势去缩放图片和滑动图片到上一张或下一张。

横向模式

用户通常在使用ipad和大屏iphone时使用横向模式。这种模式下，应用会没有状态栏，更小的导航栏和状态栏。有时，左侧会出现额外的按钮。自适性布局，一种基于屏幕尺寸的布局方式，是非常普遍的实践。多亏了XCode中的自动布局和尺寸类型，基于设备方向的调整布局变得很简单。所以不必在设计时害怕。

深度

也许深度是最难理解的部分。这是一个非常抽象的概念，但同时，它是独特和有力的。深度的意思是所有东西是有联系的和有过渡的。生活中，我们经常从一间房间走到另一间，你有前进和距离的感觉。这种方式你不会迷失。同样的概念应该被应用于用户界面。

不关心人与实际的关系是设计的大忌。——迪特尔·拉姆斯

过渡界面

动画是ios最令人激动和独特的特性之一。一屏过渡到另一屏。首页缩小然后应用放大进入。动画过去是很难执行的，但是有了XCode9，它们比以前实现容易的多。你可以在swift章节学到这些技术。 ps: 这应该是一张gif

虚化的背景

不要让你的背景喧兵夺主，危害到你的内容。虚化背景不仅允许你保持它自然的颜色，而且更能专注于前景。虚化不是什么新发明，它是现实中已经存在的。由于你专注于某物，其他事物便变得模糊。

增加十倍用户想要的。事物在人脑中不会保留超过一天。真确的做法可以记住一辈子。

动画

动画不仅仅给转场服务，也可以增加设计的趣味性。它给元素带来了关注以免被忽略。通知变得更加显而易见，天气更容易被理解通过下雨的动画。尽管动画是被鼓励的，但也不要过渡使用。不要使用户分心和恶心。不必要的强势的动画会引起用户不适。代替地，应该是使用户自己去发现操作内容，把动画应用于温柔的直接的目的如进度条。最后动画要逼真。一个窗口从底部出来也要从底部消失。这样用户能从物理层面上理解，即使它们是电子版的。

手势

随着大屏幕的采用，返回按钮手指已经不容易触碰了。所以，虽然比一个可见的按钮不明显，但是手势已经是一个很好的扩展的交互动作。高级用户会觉得这很容易。我们逐渐成为高级用户，我们不需要很多提示而是需要更多功能。 ps: 这应该是一张gif

三维触控

三维触控允许用户在应用内外快速操作。想象下，三维触控就是你Mac电脑上的快捷键——它允许用户更快地做重复的任务。但是就像快捷键，功能不能是三维触控独有的。你的用户必须也能够不靠它完成工作。例如，用户能重按应用的图标来找到常用的选项。应用中，邮件和链接能在进入全屏前被粗略地看到。 ps: 这应该是一张gif

声音

声音很少在应用中用到。但是一旦应用，它应该把一个普通的任务变为一个值得的体验。用户能不通过通知一样的界面来识别你的应用。声音能用很少的效果来达到令人深刻的效果。

好的设计是很普遍的。你不必用很多文字去解释。用户能够懂得。