构建设计师和程序员的共同语言

2019-2-24 分享达人

从控件封装、布局说明、标注语言三个方面，指导设计协同开发，共同建立项目框架和控件库，规范设计方式和开发方式。

undefined

设计师拿到开发刚写好的页面时，往往会眉头一皱，这跟自己的设计稿差别有点大啊。在设计走查的时候才发现，几乎每个页面都有大大小小的问题。从颜色样式到按钮组件、从元素尺寸到界面布局，都多多少少存在偏差。开发一般情况都是在完成功能开发后，才对页面视觉进行统一优化，但是无奈需要优化的地方太多太分散，成倍地增加了工作量。

那么能否制定一套协作方案，把固定的、通用的和可复用的元素或组件封装起来，运用在项目初期设计和开发的工作流程中。从而统一地把控设计项目中的所有可变元素，方便设计师和开发在项目中后期做各种改动，同时也利于项目的迭代升级呢？

这里我做了以下思考，欢迎大家一起来交流探讨。

/目录

一、写在前面

二、控件封装

三、布局规范

四、标注语言

五、总结

一、写在前面

UI设计要有组件化、模块化、结构化的思维。以各平台设计规范为基础，从控件封装、布局规范和标注语言三个方面，构建一套设计师和开发之间的共同语言。

/文字&文本

在封装前我们先定义一下设计中最常用到的元素——文字。文字在UI界面中几乎撑起了绝大部分内容，它的功能包括但不限于标题导航、内容构建、说明解释、标签示意等等。把文字跟图标、背景等元素组合起来的时候，在界面中形成了更明确的意符。

（一）换行规则

文字在界面中的显示方式可分为标签、短文本、长文本三种。标签和短文本一般情况下不换行显示、如在特殊情况下会超过一行，则使用省略号显示。长文本特指会换行显示的文本。

（二）行高设定

各系统平台都有自己默认的字体行高规则，但是这些行高规则并不统一，比如iOS的字体行高对照表如下：

来源见水印

而且默认的行高在展示长文本（多行显示）时，效果并不一定理想，甚至可能会很丑陋。所以我们需要制定统一的标准来规范各平台的字体设计和开发规则。

解决方案：对于标签和短文本默认设定1倍行高，长文本根据文本内容和字号大小来设定行高，以达到最佳阅读效果。

undefined

行高设定

（三）视觉间距

规范短文本行高，确保视觉间距等于实际标注间距，才能保证开发准确还原界面布局。

undefined

视觉间距示意图

/特殊情况

有些控件的文本长度在少数特殊情况下会换行显示，为了简化适配过程，我们可以直接使用长文本来设计。

（一）Toast

（二）横幅

/图标&切图

图标在某些场景下可以无需文字说明，更直观简洁地表达含义。设计同一类图标时应该保持视觉效果统一，视觉尺寸可以通过使用模板来进行规范。

undefined

图标设计模版

为了保证同一组图标的影响范围相同，我们在设计图标时首先设定视觉安全区域，然后加入透明度为1%的背景作为影响范围图层。切图时需把影响范围图层包含进去，不仅便于设计师规范所有图标的尺寸大小，也方便开发直观获取到图标的实际切图大小。

图标设计示例

二、控件封装

利用组件化的思维，将可重复利用的元素或者控件打包成固定的模版，称之为封装。

这里设计师可以使用Sketch的文字、图层、组件封装功能，构建可协作、方便维护、完整的控件库。程序员在构建项目框架时，也应对每一个元素进行可复用性封装。

（一）封装基础颜色

基础颜色有主色、辅色、强调色、中性色（灰色）、功能色（成功、失败、警告、不可点）等。

在sketch中，新建一个图层，设定好图层样式，点击新建图层样式完成封装。封装样式按固定格式“类别/编号+颜色”来命名，其中“/”可以自动识别为列表层级。

颜色封装

（二）封装常用字体

每个项目都应该设定常用字体库，例：导航标题、文章标题、正文、说明、链接等等。

在sketch中，新建一个文本，设定好文本样式，点击新建文本样式完成封装。封装样式按固定格式“主类别/二级类别/颜色”来命名，其中“/”可以自动识别为列表层级。

字体封装

（三）封装图标

APP项目中的图标大小一般设定为20px、24px、28px、32px、44px等。

在sketch中，新建图标影响范围图层，设定安全区域，画好图标后点击新建symbol按钮。封装的图标按固定格式“范围/具体位置/名称”来命名，其中“/”可以自动识别为列表层级。

图标封装

（四）封装按钮

按钮一般情况下有两种适配方案，第一种固定边距，第二种固定尺寸。封装时结合Dynamic Button 3.5插件，可以动态制作同类型按钮。

在sketch中，利用已封装好的字体和颜色来组合成按钮的文本和背景，文本命名格式为“上边距：右边距：下边距：左边距”，如果上下和左右边距并分别相同，则只需要给出上边距和右边距的数值。如“10:20”。按钮背景命名为BG，设定为已封装的颜色。执行一次“⌘+J”的操作，关联文字和背景，然后将两者用symbol封装。