下面跟着我来亲手绘制一个简单通用的聊天软件的界面，包含主要的几个页面：消息、通讯录、个人中心、对话、联系人资料。这是大家很常见的组成，我将在 下面的内容中介绍如何利用Sketch来快速完成绘制及修改工作。

开始之前，我们需要了解各移动平台的界面规范。通常情况下，为了保持用户的一致性体验，除非我们有特殊的需要，否则都会按照平台规范来进行。

Sketch内置了各种平台的最新模版，包括iPhone、iPad、Applewatch等。这里我们打算绘制一款iOS风格的App，因此我们可以直接用模版来帮助我们建立正确的规格，同时也省得自己画了。

新建一个文件（File－new，或者Command＋N），命名为“聊天App”，保存在您自己想存的位置，建议在文稿中建一个文件夹，存放。

在“聊天App”画布中新建一个艺术板（快捷键A），在右侧选择iPhone7，随后中央画布就出现了一个375x667px的名为“iPhone 7”的艺术板。

此时，我们需要去模版挑选我们需要的模块拿来使用。选择“File－New From Template…”从模版新建，在对话框中右上角选择“Template”选项卡，随后在下方双击“iOS UI Design”。

在打开的模版中，我们可以看到非常丰富的iOS风格组件，如下图：

我们先绘制“消息”界面吧，首先需要有状态栏、导航栏、菜单栏，这些可以直接使用模版，随后稍加修改。在模版中找到相应的组件，选中后复制，切换到“聊天App”到“iPhone 7”艺术板中，并把艺术板改名为“最近联系人”。粘贴后，使用属性面板右上角的对齐功能，可自动对齐到顶部或底部。

到这里，我们接触到了一个新的知识点——元件（symbol）。它是可以重复利用的元素集合，且修改了symbol原始内容后，其他被重复使用的地方都会同步修改。但是考虑到同样的组件在不同的地方可能文字是不同的。比如，在我们“消息”页面，顶部的导航条title叫做“消息”，在“联系人”页面又要改成“联系人”，Sketch考虑到了这个需求，提供了允许修改文字而不影响其他的功能。我们查看左侧图层面板，可以看到我们刚刚粘贴的3个元件。

选中导航条，右侧属性面板可以看到“overrides”覆盖面板，分别对应了导航条中的3个文字，在对应的文本框中填写，可替换文字而不影响其他页面的导航条。对于此页面，我们只需要标题，不需要两侧的按钮，因此直接填一个空格就可以了。

接下来修改底部菜单栏，我们只需要“消息”“联系人”“我”一级菜单，所以下面底部只需要3个图标就行了。由于symbol不能在实例中修改元素数量，只能修改文字，所以我们需要修改symbol原型。双击画布中的菜单栏，进入symbol编辑界面。可以看到编辑状态，画布的左上角是有一个返回按钮的，请注意区分。我们隐藏第二和第四个图标，然后将余下的3个图标，第一个和最后一个各自向中央挪相同的距离，让他们更紧凑些，然后再等分距离即可，如何等分还记得吧？选中留下的3个图层组，然后返回。我们还得修改底部菜单的图标，图标的绘制等我们讲完整体界面布局之后，会单独讲图标的绘制方法。本案例直接用图标素材。

我们来建立一个条目，这个条目包括头像、昵称、消息概览、时间、标记、线条。

先绘制一个矩形，高72，宽375，用于条目的容器。这个容器需要有上下线条。绘制条目于条目之间的线有很多种方法，我的方式对上下各绘制一条线，条目和条目之间瑶重合一条线的高度，这样的好处是在生成规范的时候更直观。

由于我们只需要上下两根线，左右不用，所以我们不能用描边，这里我们用上下内阴影。

我们先建立一个内阴影，参数如图，然后再在这一条属性上点右键复制一个出来，把y轴数值改成负值即可。

画一个头像。这里我们使用圆形头像。这里我们介绍一个插件 Content Generator，可以快速填充头像、英文昵称等。绘制一个圆形，直径50，水平居中于刚才绘制的矩形中偏左位置。去除描边。如果你安装了这个插件，只需要先选中待填充对象——也就是我们刚才画的圆形，再点击顶部菜单 Plugins － Content Generator－Persona－Photos－Female，这里我们选择填充女性头像。

头像ok了，我们添加一个昵称。新建一个文本图层，选中这个图层，用刚才的插件填充人名，Plugins － Content Generator－Persona－Names－Female。随后我们调整文本样式。

随后再增加一个最近一条对话放在昵称下方。这个文本我们需要限制一下它的宽度，因为要给右边的新消息标记预留空间。拖动文本框右侧的锚点就可以拖动了。然后填充样本 Plugins － Content Generator－Text－Fillerati－General Fillerati。你会发现填充的是一大段文字，我们只需要一行，因此你可以删除多余的内容或者直接把文本边界缩小到一行到高度即可。然后调整颜色和大小，以及它的位置和间距。

现在增加消息时间，我们打算把它放在昵称同一高度的屏幕右侧。同样建立文本图层，输入时间，调整样式和位置。

增加一个未读消息标记。绘制一个直径20的红色圆形，其上再建立一个文字图层，输入数字1，白色。

接下来我们应该要把这这些图层编组，然后复制多份即可。但是考虑到我们可能后期要修改整体的文字颜色、大小等，所以我们前面介绍的共享样式就派上用场了。先选中昵称，在右侧属性面板的文字样式上方找到 “no text style”，点击选择“creat new text style”来创建一个文本样式，命名为“消息列表－昵称”以便以后管理。

同样的方法我们依次建立“消息列表－时间”、“消息列表－概述”。随后我们选中这些图层（包括背景容器、头像、昵称、消息概述、时间、提醒图标），按Command＋G来编组。Tips：想快速编辑组内的元素，除了双击进入组内，还可以直接按住command键穿透图层组直接选中。

选中我们刚才建立的组，按住option＋shift，鼠标向下拖移，可以整齐的复制出另个组。保持两个组紧贴在一起，并且两者的边框需要重叠以保证只能看到一条线。这一步最好一次完成，这样我们后面才能快速的重复这一步。

然后我们按command＋d即可重复刚才的移动位置和复制的图层组，重复按一次即可复制一次。然后就生成了下图。

由于我们底部的菜单栏需要始终可见，所以我们需要在图层面板调整顺序让它在最上方。随后我们需要做一些细节的调整，比如我们不需要每一行都有新消息提醒，那么我们挑选并删除即可；我们需要替换每个人都昵称和头像，用content generator即可；我们可能还需要调整一下文本样式，用刚才建立的text style即可。

按住command＋shift即可穿透并跨越图层组选择多个元素，我们这里选择每一行的昵称，然后使用刚才的插件再次导入昵称。即可让每个人的名字都不同了。头像同理。

这里我希望调整一下右侧的时间，把它们颜色减淡些、字号缩小些。首先我们选中一个时间图层，在右侧文本属性面板上调整。调整之后，你会发现只有自己选中的这个文本发生了改变，并没有所有的时间都改变。仔细观察，你会发现文本样式选择列表的右侧有个循环双箭头的图标，点它表示同步样式到所有实例中。

最后要把下面菜单栏的当前栏目改个颜色，由于我们之前用了symbol，但是这个元件我也没研究出来如何灵活的变动单个元素而不影响其他实例的引用。所以我用办法是把当前栏目的图标文字单独复制一份出来盖在原来的位置之上。

至此，消息页就完成了。如果大家有更高的要求，比如符合平台规范，预留屏幕两侧的间距，可以在一开始画好辅助线以便对齐。辅助线的建立很简单，先在工具栏点击标尺，就可以看到画布左边和上边显示了标尺，随后我们选择消息艺术板，即可看到标尺的起始数值产生了变化，变得以我们选中的艺术板的左上角为0了。视图放大到合适的大小，我们先建立一个左侧15pt的内边距（这里也就是15px），鼠标放在标尺上，可以看到具体的数值，我们在移动到15的时候单击一下，即可建立一条对应的红色辅助线；右侧我们建立在360px的位置（375-360）。如果你需要删除某些参考线，可以在标尺内选中这条线拖到画布左上角0点位置松手即可。如下图：

这里还有个细节问题。由于sketch支持retina，且我们是在一倍图标准下制作，所以在电脑上预览也好，在手机上预览也好，都会觉得我们的横线有点粗，并不是像手机系统设置里的那种线那么细。怎么解决呢？抛开高清视网膜屏（plus）不谈，我们只需要将原本Y轴偏移设置的1改为0.5即可。

现在我们准备绘制联系人界面了。你也可以猜到，联系人界面和消息界面的相似度是比较高的，所以我们可以直接复制一份消息界面出来修改。选择“消息”艺术板，按Cmd＋D复制一个艺术板出来，并重命名为“联系人”。

修改导航条标题为“联系人”，并需要在右上角添加一个“加号”，用于添加好友之用。选择矩形工具（R），绘制一个20x2的矩形填充白色，无描边，随后复制一个旋转90度，选择两个相互垂直的矩形，点击工具栏中的“相加”图标，让两者合并成一个加号。移动到右侧辅助线旁。

调整联系人列表，这里我们只需要保留头像和昵称即可，因此行高需要减少，头像也需要缩小。共享样式对于尺寸无可奈何，因此我们需要手动调整。只保留第一行，其他的记录都删除，然后删除第一行里的概述、时间、提醒，缩小头像为40，容器高度改为48，然后让头像和昵称之间的距离恢复为10，最后垂直居中即可。

接下来就是复制工作了，重复我们前面说过的办法即可。复制完毕再用content generator替换昵称和头像。

最后我们进入symbol的底部菜单界面复制一个通讯录图标组出来，调整为蓝色，覆盖在上方。

至此我们完成了2个界面的绘制。下面就是“我”的绘制了。这个页面里通常包括了个人信息维护、设置、清理缓存、帮助、退出。

我们可以直接复制联系人界面，重命名艺术板为“我”。选中艺术板中导航条右边的“加号”，删除它。选择导航条，在右侧属性面板修改文字内容为“我”。将底部“我”修改为高亮。

由于这里的列表于通讯录不同，需要重画，所以我们框选联系人列表，删除它们。

接下来设置一个个人横幅、头像和昵称的组合。我们填充两张图，分别对应横幅和头像。

填充之后，我希望对横幅进行一定的高斯模糊，但事不如人意，高斯模糊会增加羽化面积导致图片外面的空白区域也混进来了，所以这里要用一种全新的模糊方式——背景模糊。所谓背景模糊，是指对当前图层的下方画面透过当前图层时展现出实时运算出的高斯模糊状态。好处是不需对某个特定的图片进行模糊，缺点是需要运算，所以大量运用时会占用很高的资源。

于是我们需要在头像图层下方、横幅图层上方新建一个无描边无填色的图层，尺寸和横幅相同、位置也相同。然后找到属性面板位于内阴影下方的高斯模糊选项，下拉选择背景模糊，数值默认即可。

由于刚才的摆放位置我觉得不太好，所以这一步将头像移动到横幅的左侧，然后在旁边添加昵称和id。顺便我们给头像加一个白圈，外描边4px。昵称20px、＃fff，id14px、＃bcbcbc。

这里是不是感觉像那么回事了呢？下面还要接着绘制菜单列表。

假设我们需要增加“个人信息”“通知”“隐私”“通用”“关于”“帮助”“退出”，那么这里最简单的办法是从sketch提供的模版中拿一个列表过来进行修改，它提供了准确的行高、字号、线条和箭头。根据菜单的关联关系进行分组，下图是我们从模版中拿过来的一组菜单。我们进行文字修改，由于我们需要修改数量，因此要对这个symbol进行提取，让它还原成图层组。选中列表组，右键选择“Detach from symbol”即可。

拆散的图层组即可选中其中的某一条进行复制，从而满足我们对数量的要求。要注意，第一行和最后一行的线是左侧顶边的，请始终保持它们的身份。数量的增加会导致上下边框不能同步，我们需要在左侧图层面板里找到这个图层组里的背景层，将它的高度调整为最后的行高，以能看到菜单组底部的线条。最后我觉得“退出”需要单独放置，所以要另外建立一行独立成组，与前面5项分开。注意菜单与横幅的距离是10px，菜单组之间的距离也是10px。全界面保持一致的间距设定可保持设计风格的统一性。删除多余的其它4行，保留一行，然后删除第一行的底部隔离线，将图层组底部的背景高度调整即可。然后我们需要将“退出”颜色设置为红色以进一步区分，并删除右侧的“>”。

好啦，基本上这个页面就完成了。里面的具体页面大家可根据自己的需求如法炮制。

关注本公众号，持续收到UI、UE、前端教程。

页面比较简单，限于篇幅，我没有对每一步配图，以后我会出一个视频来把过程重现的。欢迎添加我的个人微信 daodaozhang 讨论、打赏。