前言

本文来自拉勾网课程整理

作为iOS工程师，我们开发的绝大部分功能都是与用户界面和用户交互有关。所以，和设计师协调沟通也成了我们的日常工作之一。在这个过程中，就免不了和他们争论有关间距大小，字体粗细，字号大小，颜色深浅等问题。想必有时候你也很烦恼，怎么和这些设计师们沟通就那么麻烦呢！

其实，这些问题都可以用一套统一的设计规范来解决，从而有效降低沟通成本。有了规范，设计师可以根据明确的指引和预定义好的设计元素，来设计出新的界面；而开发者也能使用预先封装好的、可重用的设计组件实现快速开发。最后，开发的产品为用户提供一致的体验。

那一套统一的设计规范到底是怎样的呢？它通常包括间距、字体、颜色、图标和常用组件等，这一讲，我们就一起看看怎样定义这些设计规范吧。

间距

间距（Spacing）是父子组件之间，以及平级组件之间的留白，合理使用间距能有效分离和组织内容，也能保证页面风格一致，提升用户体验。

但是，在实际工作当中，你有没有遇到过打开设计师给的设计稿后发现，同一个界面里的间距定义杂乱无章，不同页面类似组件的间距也大不相同，这样导致的结果是，开发出的 App 在视觉上会给人风格混乱的感觉。

那怎样定义统一的间距呢？其实很简单，我们只保留几个可用的间距，并给它们赋予定义，下面是我们Moments App 的间距定义。

33320b76303566e7e62176bf6a827420

根据我们的经验，在选择间距的值时，为了具有和谐感，我们把间距分成三组：小（Small），中（Medium），大（Large）。两个小间距之间的差别是 4pt，中间距与小间距相差6pt，而大间距直接相差 8pt，给用户一种循序渐进的感觉。这些间距的定义能覆盖 App所有的使用需求了.

有了统一的间距定义，设计师就可以在设计稿里面标注间距的定义，而不是具体的值。开发者也可以通过代码中原先定义好的间距，而无须每次都硬编码（Hardcode）间距的值。

除了iOS以外，统一的间距还可以用到Android和Web上，如下面是开源设计规范Backpack 所定义的间距，其包含了iOS， Android和 Web 三个平台。

00bd338fb43b445bf00b24b110b38d17

有了这些间距的定义以后，设计师只需设计一份设计稿，不同平台的开发者都可以使用同一份设计稿进行开发。

字体

任何一款App，都离不开文字，除了其本身传达信息，文字的各种样式，包括字体类型、大小、粗细，在其中也承担着重要角色。比如合理使用行楷会给人美感；字体放大可以暗示优先阅读；字体加粗，会起到强调的作用，吸引用户关注等等。

在开发当中，字体类型、字号大小、字体粗细分别由 Font family、Font size、Font weight 属性定义。除非有特殊的原因（如品牌需要，或者为了增强游戏体验），iOS的 App 一般都使用iOS系统所自带的字体系列。这样更能符合用户的阅读习惯。在自带的字体系列的基础上，通过把字号大小和字体粗细组合起来定义一些字体类型。下面是我们 Moments App 所定义的字体规范。

1bc990c69f15d6f653ff13f3a5696bdf

根据字体类型的时候，我们分成四组：

• 大标题（Display），用于显示这个页面的唯一标题，使用特大字号（如 42pt 和 36pt）；
• 标题（Titile），用于显示段落的标题，我们提供了五种不同的段落标题，其字号由大变小；
• 文本（Body），用于显示一般的内容文本，我们提供了普通和加粗两种类型来呈现不同的文本；
• 小文本（Small text），使用较小的字体来显示辅佐内容，例如备注，版本信息等等。

为了让读者有更好的阅读体验，我们在字体粗细上都统一选择了偏细的字重，比如使用semibold而不是bold，并且选择light而不是regular来定义这套字体。

有了这些字体类型的定义，设计师可以很方便地选择字体，比如在设计文章内容部分时，可以从body或者bodyBold中选择出来，而不需要思考到底是使用 14pt, 15pt 还是 16pt。同时，开发者也可以使用原先定义好的字体组件，提升效率。

除此之外，还有动态字体，因为我们在此之前已经对字体的类型、大小、粗细做了定义，设计师只需要做一个设计稿就行了，无须为不同的字体设计出不同的版本，而我们开发者只需要通过封装好的字体组件来支持即可。

颜色

在一款App的视觉体验中，颜色毫无疑问在其中占据很重要的位置。如果颜色搭配不当，很容易被用户吐槽甚至弃用。所以设计之初，就要对颜色做好规范。

为了给用户提供颜色一致的体验，在 App设计中，我们一般采用统一的调色板(Color palette)来完成。在实际工作当中，你可以和设计师一起在各类开源设计网站中寻找，比如，以天蓝为主色调的 Backpack，还有谷歌的 Material Design还提供了调色板生成工具，你可以根据自己品牌的颜色来生成一个调色板。

8625a0244bed7425fe512adbaee6b259

3fd979487f96d3a66e565a404905fa38

有了调色板，我们就可以在设计常用组件时（如按钮，卡片，警告信息等）使用调色板里面的颜色。例如 Backpack 的主色是天蓝色，在设计按钮时，主按钮的背景可以使用天蓝色（#0770e3）。

为了照顾不同用户的使用习惯，提高夜间视觉体验，iOS系统在原有的浅色模式之外，还提供了深色模式。我们在设计调色板的时候，也最好考虑到对深色模式的支持。

2f153293a7884b7905c8e50f629ffbfb

在 Moments App 项目中，我们采用Backpack 的调色板来设计深色模式下的颜色。该调色板定义了一组语义化的颜色（Semantic color）供我们选择。比如设计师在选择背景颜色的时候可以根据需要从背景主色、背景副色、背景第三色中任选一个，Backpack 每种颜色都提供了浅色模式和深色模式两种类型，设计师在设计过程中就不需要为这两种模式制作不同的设计稿了，开发者也可以使用定义好的颜色组件来同时支持两种模式，不需任何额外的工作。

需要注意的是，在定义语义化颜色时要特别注意颜色之间的对比度，例如使用了Text Primary Color的文本在使用Background Color的背景下能容易阅读，而使用灰色的背景再使用黑色的文本会难以阅读。

如果你所在团队没有专门的设计师来定义这些颜色，也可以使用iOS提供的动态系统颜色（Dynamic System Colors），它为我们定义了同时支持浅色和深色模式的各种颜色。

图标

图标（Iconography）在App 设计中也承担重要的作用，它可以有效地把功能呈现给用户，例如一个加号（+）的图标能让用户知道点击的时候可以进行新增操作。图标也能简化界面的设计，让页面更加吸引用户，例如在买房的 App 里面我们可以使用一辆车的图标表示多少个车位，一个浴缸的图标表示多少个洗手间，这样能省去大量的文件描述。图标还能帮助用户导航。因此我们在设计App的时候也需要合理地使用图标。

如果你们公司没有专门的图标设计师，那么你可能会购买或者使用一些开源的图标。这里我有一些建议。

首先，同一个App只需要一种图标，千万不要把不同风格的图标混合使用。

其次，如果没有特殊要求，我推荐直接使用苹果公司提供的。具体来说，在 iOS 系统内置的SF Symbols 为我们提供了3150个一致的、可定制的图标，如下面的例子。

6066023a5813fee74011c20f17ef82a4

SF Symbols 有很多优点：

• 它数量巨大，几乎覆盖所有应用场景；
• 整合了 San Francisco 字体系统，当用户改变字体大小的时候，这些图标都会自动对齐；
• 所有图标都支持颜色，我们可以根据需求搭配不同的颜色；
• 使用这些图标时也无须安装，可以减少App的体积。
• 我们的 Moments App 也使用到 SF Symbols 来呈现点赞按钮。

86e25fae372e8212fe2b94fc5dd34dc0

SF Symbols 里绝大部分的图标都通过了轮廓和填充两个版本，我们可以使用填充的图标表示选中状态。

737d59cef4b217b58adde783b73066d0

常用组件

随着App功能的增多，你会发现一些UI会出现在许多地方，例如下图的用户头像，分别出现在个人主页、朋友圈、点赞处。

6bfdf5dd351d8a307f2a860935850536

在这种情况下，我们就可以把这个重复出现的UI封装成一个常用的设计组件，并纳入我们在制定设计规范中。常用的组件一般有按钮（Button）、用户头像（User avatar）、复选框（Checkbox）、徽章（Badge）等等。下面是 Moments App 设计规定中用户头像组件的定义。

e4b6e6af6492457170260209590c3528

有了用户头像组件，设计师在设计过程中就不需要考虑在呈现头像是需要怎样设计，使用的圆角到底要多少度，是否需要阴影和边框等等。开发者也可以使用原先封装好的组件来加快开发。

需要注意的是，UI组件是在开发过程中发现某个UI反复使用后才封装的，在开始的时候不要贪多，避免定义一堆不用的组件。

总结

我们通过间距，字体，颜色，图标和常用组件为例子来讲述一套统一的设计规范。有了它，能极大降低设计师与开发者的沟通成本，也节省设计师和开发者在设计或实现过程的时间，一举多得。

7e32032f5cf2ab8facf18bb8cce4ac77