08d3867f07ebacb3f95527ce8391bb5e
iOS 11 设计完全指南

原文 Learn iOS 11 Design


扁平化设计在过去 5 年中已经普及了,但在 iOS 7 之前并不常见,这种转变形成了当前的设计趋势。但扁平化设计并不是一成不变的,iOS 的设计已经适应了更大的屏幕。一开始扁平化设计还是拟物化设计的对立面,但现在却变得更加细致入微,走上了渐变、阴影和卡片式设计之路。

iOS 进化史

让我们从头开始,下图是拟物化设计,在 2007 年大家都不了解在口袋里有一台超级计算机是什么感觉,所以使用这种强有力的比喻是非常有效的。

2007:iPhone OS

2007:iPhone OS

接下来,如下图所示,我们摆脱了所有的装饰,转而采用扁平的色彩、漂亮的排版以及高分辨率的内容。由于大部分人日益习惯智能手机,因此不再需要借助大量的装饰来进行设计。

2013: iOS 7

2013: iOS 7

下图是 iOS 11 的界面。标题加粗了许多,增强了可读性。由于屏幕更长了,现在底部导航也变得更加常见(Tab bar)。

现在的设计师必须根据多种分辨率和像素密度来调整布局。不过好消息是我们有了更棒的工具,例如 SketchXcode 来适应这些最新的技术。

大标题

iOS 11 正在回归本源。到处都是加粗的字体。标题又黑又大。由于现在的屏幕几乎是最初的两倍长,所以大标题就非常有意义了。大字体还有一个原因是辅助功能,每天有来自各年龄段的数十亿人在使用手机,让内容尽可能清晰和易读变得非常重要。辅助功能让用户可以把支持此功能的 app 的字体设置得非常大。苹果在 iOS 11 中的所有自带 app 都支持这个选项。所以你会发现现在用户对此功能的期待度越来越高了。

卡片

更大的屏幕意味着内容有了更多空间。在大屏 iPhone 之前,不应使用任何容器以便给内容留出最大的空间。但有了 iPhone X 和 8,情况则不同了。可以借助状态栏、导航栏和 tab 栏让导航更加容易,并且使用卡片来更好地管理区域。圆角卡片可以让内容看起来更有触感、更友好。可以使用模糊的背景和阴影来为设计增加深度和上下文。

iOS 设计的状态

设计现在简单了许多,从而让我们可以专注在动画和功能上,而不是错综复杂的视觉细节。
在 iOS 7 之前,我每天的设计工作有一大部分都花在设计错综复杂的纹理上,例如木头、皮革和电镀表面。现在,我把这些时间花在了动画和代码上。不再是静态设计,而要让一切动起来,在更深的层次上去吸引用户。这也是为什么本专栏是设计与编程指南,而不仅仅是视觉设计指南。 从技术的角度来看,动画和代码从没有变得如此重要并可行。这也是为什么我们几乎每周都能看到一款新的原型工具和代码框架。设计变得非常广泛,同时和许多学科联系在了一起。设计师如果能够更好地理解每个学科的技术,就能够独自创造一款产品,同时也会和工程师更好地合作。

有很多人问过我如何开始学设计,以及如何成为更优秀的设计师。虽然并没有什么点石成金的秘诀,但是在 iOS 设计方面有很多技巧和规则可以普遍地影响你的设计方式。

即使你在为另一个平台进行设计,设计概念依然是相同的,同时也可以把学到的技术应用到 Web 和印刷中。iOS 是一个以设计为本的平台,读起来就像一本现代杂志,拥有漂亮的排版和简单的布局。本专栏的内容会极好的服务于你,让你在任何地方都能设计出最好的产品。

核心哲学

我们来复习一下基础知识。iOS 由三个核心理念驱动:遵从(deference)清晰(clarity)深度(depth)。受这些设计原则的启发,我把它们的含义分解为可执行的操作,这样相比于《iOS 人机界面设计指南》就更加简单和更加直观。

遵从

内容才是主角,其它东西都是次要的。使用元素对其进行补充,同时避免与其形成竞争关系,从而导致分散了内容的视觉效果。例如,使用漂亮的动画,从一个界面优雅地转移到另一个界面,从而确保用户不会一头雾水。模糊的背景可以保持上下文,同时可以让用户专注在前景的内容上。如果不明白,可以从官方提供的模板开始设计。

简洁

用户界面应该被剥离到只剩下核心美学设计。每当想添加一个新元素的时候,扪心自问一下:真的有必要吗?除非你的 app 是一款游戏或是特定主题,否则不要使用大量纹理、3D 效果和多层阴影。相反,专注于功能性颜色,和谐的渐变和漂亮的排版。

内容最大化

内容应该填满整个屏幕,给内在元素提供最大的空间。避免嵌套容器,同时最大化滚动区域以允许更多的交互空间。

颜色

用显眼的颜色来表示可点击的或需要强调的元素。你的设计是否成功都取决于是否选择了正确的颜色以及是否使用了中性色调。蓝色用于按钮和选中状态会很保险。另外,建议一开始使用白色或浅灰色背景搭配黑色文字。这样会提供极高的对比度,可读性极佳。

排版即内容

由于用户界面的简化和对内容的聚焦,所以排版将会占据屏幕的50%-90%。
所以,最重要的是选择一款漂亮的字体,然后设置它的粗细程度、行高和颜色,这样美观同时又能完美适配所有尺寸下的阅读。推荐使用默认的 San Francisco 字体 ,因为这款字体的设计初衷就是为了易读性。苹果在其所有 app 中都使用的这款字体。

负空间

使用负空间(negative space)以便让内容更专注。看到的东西越少,就越能专注在某几件事情上。负空间给予了更多的呼吸空间(breathing room)。不要用太多的结构或不必要的视觉元素撑满屏幕。如果不确定就用 Xcode 默认的边距。苹果一贯使用 8 到 16pt 的边距。

清晰

让一切更明显。按钮应该不言而喻(self-explanatory),排版应该大且可读性强,并且拥有舒适的间距。内容应该能清楚表明 app 的用途。例如一款咖啡 app,就应该用咖啡豆、浓缩咖啡和咖啡色来提醒用户。

让文字更易读

标题应该大且对比度鲜明。说明应该简短、便于速读。正文应该有良好的间距,每行不要太长,避免阅读疲劳。

top Created with Sketch.