使用Sketch来创建UI风格设计的样式,将受益匪浅。使用本教程构建UI套件,并同时创建自定义(可重复使用)库,以提高设计效率与质量。
无论是Sketch专家还是Sketch的新手,设计师都会发现:Sketch中所创建的设计样式是项目的宝贵资源,能节省大量的设计时间。
设计样式不仅可以使内容保持一致,还可以轻松地更新多个文档中的颜色和图标等元素。本教程分步介绍了创建设计样式和UI套件的过程,并将使设计人员对Sketch symbol有更好的理解。
创建UI样式
“UI样式是一个全面的“使用文档”,可跟踪项目的所有重复元素,从品牌规则到文本用语的使用规范”
一个风格指南可以包括从简单的视觉元素的词汇和批准图像什么。本教程涵盖组织,颜色,图标,字体,文本样式和资产。
第一步:整理
1. 创建一个主文件夹来保存sketch文件,插件和其他必要的资源,例如字体和图标。(插件将在本教程的最后进行讨论。)
2. 启动一个新的Sketch文件,并将其命名为“ 项目名称库”。例如,如果您的项目是Toptal,则您的文件应命名为“ Toptal库”。
第二步:颜色
如果已经选择了颜色,则下一步是将颜色转换为symbol。
1. 为此,制作相同大小的正方形,并相应地更改其颜色。单击“创建symbol”,然后使用颜色/ @ color-name标签系统保存这些元素。颜色/ @粉色,颜色/ @背景灰色或颜色/ @ FFFFF 等标签的示例。标签的命名对UI样式的整理很重要,因此应从一开始就建立并遵循命名格式。
2. 完成后,将它们添加到UI样式页面。
3. 将色样保存在调色板的“文档”部分中。
有用的快捷键:R-矩形工具,T-文本工具,alt-测量距离。
将色样保存在调色板中。
第三步:图标
将图标变成动态symbol可以使它们的颜色轻松更改为上面第二步中保存的任何颜色。这意味着在将图标放入设计后,可以使用画布右侧的“检查器”通过一个简单的下拉菜单(称为“替代”)来更改颜色。
1. 将图标另存为符号(如果可能,请坚持使用.svg文件格式)。
2. 进入符号页面,找到图标,并使用以前保存的颜色中的默认颜色对其进行遮罩。为此,将颜色symbol覆盖在图标上方,然后在工具栏中单击“蒙版”(或右键单击并从弹出菜单中选择“蒙版”)。
3. 屏蔽图标后,通过取消选中检查器中“填充”部分下的复选框来删除填充。
4. 建立UI风格样式的图标。为图标指定颜色以及任何其他重要的颜色设定, 这种规范对于设计师很有帮助。
首先,使图标成为symbol。
接下来,使用先前的颜色symbol创建遮罩。
必要时,使用[替代]下拉菜单更改图标的颜色。
第四步:文字样式
一旦选择了字体,就该指定文本样式了:H1,H2,H3,H4,H5,正文,链接,标题,标签等。
1. 根据需要,选择多种样式的大小、粗细、字符和行距。
2. 写出一个单词(当您按下文本工具T时会自动显示“ Type Something”)并对其进行格式化参数以反映所选样式的详细信息。
3. 点击“创建新的文字样式”。
4. 在UI风格样式指南中整理文本样式。
创建文本样式可使UI风格样式保持一致。
第五步:设计工作
现在该结合所有前面的步骤来做一些设计了。如果已经以此来开展工作,则为了保持一致性,最好使用已经选择的文本样式,图标和颜色来重新创建设计资源。例如,在设计工作中可能有许多不同的灰色未曾考虑到,因此重新创建资源将保证所选颜色的一致性。不要忘记保持命名的一致性,并确保在工作时将其添加到风格样式指南页面中。
以下是一些工作建议:
按钮
1. 通过将按钮设为默认颜色并删除填充,可以使这些动态symbol像图标一样。
2. 若要始终使文本居中,请将文本框的宽度与按钮设为相同,然后使文本居中。
3. 为确保一致性,请使用已保存的文本样式。
4. 系统地给按钮命名,将这些元素另存为symbol。
5. 使用替代功能更改标签和颜色。
搜索栏
1. 将应用于搜索字段以及该字段本身中使用的图标和文本做大小约束。
2. 不要忘记使用以前保存在文档调色板中的文本样式和颜色。
3. 使用搜索作为标题将此元素另存为symbol,或者,如果您具有不同类型的搜索,请遵循标签命名系统,例如:搜索/标准、搜索/无图标。
单选按钮和复选项
1. 可以在symbol中包含一个symbol,可以创建一个智能单选按钮和复选项来进行进行测试。
2. 首先,在设计按钮时。使用复选框/选中的和复选框/取消选中,作为示例标签将该元素另存为symbol。
3. 创建输入时。在复选框符号旁边添加占位符文本,然后将整个设计转换为symbol。由于现在是输入,还需要设计:输入/复选框/选中并输入/复选框/取消选中等样式。
第六步:使用UI风格指南!
一旦创建了所有设计样式,就可以将库应用于要设计的文档了。在Sketch中,转到“首选项->添加库…”,然后添加库文档。
将库添加为项目设计文件后,即可在“symbol”部分中访问该库及其symbol。您会看到Sketch中的库,附带有iOS UI设计库,以及最近导入的设计库。
您可以在设计文档的symbol部分中找到所有库。可以根据需要,任意添加和删除设计库。
如果要更新symbol,请双击symbol本身,然后将显示库文档。进行更改后,请返回设计文档,然后单击右上角的更新按钮。
“可用的库更新”将出现在Sketch的右上角。
当库更新可用时,将显示库中已更改的符号。单击“更新符号”将批准更改。
导入/导出文本样式
文本样式不会随库一起保存,但是Sketch 的“ 共享文本样式”插件可以解决该问题。下载插件后,转到库文档,然后进入菜单:“插件->共享文本样式->导出...”。将此文件保存为库文档所在的文件夹。然后,在设计文档中再次转到菜单:“插件->共享文本样式->导入文本样式...”,然后导入刚刚保存的文件。您的文字样式将会出现。
导入/导出调色板
与文本样式类似,文档颜色不会保存在Sketch库中,但是Sketch Palettes插件可以解决该问题。与上面的基本相同,使用“插件->草图调色板->文档颜色->保存调色板”导出调色板,并使用“插件->草图调色板->文档颜色->加载调色板”导入调色板。请记住将其与其他库文档保存在同一文件夹中。
字体
InVision Craft是一套插件套件,可将Sketch软件提升到一个新的水平。Craft可让您用库存照片,原型替换图像,并同步到InVision,创建库等。如果下载了Craft,请在文档中单击“ cmd-shift-C”,然后将生成样式表。字体将在这里列出。
遵循上面概述的六个步骤,将使大型和小型设计项目的运行更加顺畅,最终结果将更加优美。如果它们是独特的或非常特定的,则样式指南,库和UI套件可用于一个客户端,如果不断创建标准UI元素(例如线框和原型),则可用于许多项目。
在项目开始时,投入时间来正确创建这些Sketch UI组件将节省大量时间,并可能在以后的许多项目中节省大量时间。