如何用 Sketch 进行网页设计_html/css_WEB-ITnose

如果你是一名网页设计师，相信你一定对 Sketch 这个软件不陌生了。作为一个交互设计师，UI设计乃一核心内容。以前常使用 Photoshop 进行 P 图，但总觉的其实在是比较冗余。于是转而运用 Sketch 进行 UI 设计。该文将通过一个完整案例来介绍如何运用 Sketch 进行网页设计的，同时也会分享笔者的一些 tricks.

这次的网站设计主题是 An eCommerce Website，教程地址 tuts+ ，笔者最终版本可见笔者 Behance .

基本设置

画布按住键盘 A 快捷键，可以创建画布。 Sketch 已经良心的为你默认设置了各种设备尺寸，你想要的全都有，如下图。

栅栏通过 Layout settings 设置栅栏[布局参考线]，这个功能好的真是不要不要的[下文回介绍其实际用处]，可以根据需要自主选择每列宽度，间隔宽度以及最外侧 margin 宽度，见下图。

这时画布上就出现了栅栏参考线，文字段落的宽度，按钮的宽度，图片的宽度都可以根据栅栏进行合理设置。通过栅栏布局可以极大的统一页面的布局设置，给人一种和谐美[Ctrl + L 可以快捷键显示/隐藏栅栏]，效果如下。

字体注重对比和统一。对比是指在需要突出区别的地方用不同字号，粗细和字体突出不同。统一是指对于网站同一元素，使用相同的字体设置，比如 H1, Body Text. 英文字体建议两种即可, 一个 sans-serif 字体作为标题，显眼；一个 serif 字体作为正文，易读。可以提前设计好各个字体的数值，利用 Sketch 的 Style Text 功能进行保存，方便以后频繁使用。也可以再设计的时候，边做边保存[前者适合在经验用户，后者更适合初学者]，如下图。

对字体另外一个重点是确定 line height [行高]，确定行高的作用是方便确定控件上下 margin, 左右 margin 可以通过栅栏进行确定。比如你确定默认字体大小为 20px, 行距为 1.5，则行高 = 20px * 1.5 = 30. 那么控件之间的上下间距则可以设为 30px 的倍数，比如 30px, 60px, 90px, 以此类推。间距和行高相同可以使页面看起来更加和谐美观。

调色板一个好的配色对界面美观的重要性不言而喻。Sketch 也贴心的为用户提供了颜色版用于记录颜色，方便你重复使用，见下图。

最主要的是一下几个颜色，背景色，默认字体颜色，减淡字体颜色，强调色，边框颜色，和适当数量的辅助色[Material Design鼓励用多种颜色，用鲜明大胆颜色]。这里再说一下阴影颜色，Material Design 建议使用 #000 全黑，然后减弱 opacity 不透明度，而不是直接设置灰度颜色。因为这样可以保证阴影不论在亮色还是暗色背景下都有一个良好的视觉效果。

##操作

页面Sketch 的左侧提供了页面导航列表。用户可以创建不同页面，同一页面中又可以创建不同画布。这样一来，用户便可以将网站的所有页面有条理的保存在一个 Sketch File 中[见下图]，it is amazing!

间距Sketch 对于排版可谓是考虑的极其周到。学习 CSS 的朋友应该知道在排版时，对于 margin 的四个数值往往纠结不以，往往凭感觉设置。而 Sketch 可以在设计时就解决这个问题，鼠标选中指定元素，按下 Alt 键，界面自动现实该元素的 margin top, right, bottom, left. 精确到 1px 的设计，让设计稿和实现稿无缝对接，见下图。

SymbolSketch 还提供了保存组件的功能。如果某些元素在设计中会重复出现，则可以利用 Symbol 功能进行保存，需要时直接插入即可。一次设计，循环使用。

结构一个好的交互设计师需要对网站结构有一个非常清楚的认知。这个网站的目的是什么，用户群是谁，为了实现目的需要有哪些功能，这些功能如何组织成页面，页面之间如何跳转，功能如何实现等。比如该网站是销售网站模板的购物网站，导航栏有如下几项：主页，联系页，支持页，购物页，个人账户，购物车，如下图。

先设置主页，然后由主页发散延展到其他界面。当然，这一切应该在 UI 设计之前的交互稿就考虑清楚。UI 更加强调美观性，如何利用美观更好的引导用户实现既定目标。

交互设计时需要考虑用户使用网站时的交互场景。 界面的交互状态，比如登陆和未登录时界面的不同状态，如下图。

元素的交互状态，Hover 和未 Hover，Click 和未 Click，是否 Disabled等。细节产生美！

##插件 Sketch 的插件是独立与 Sketch 本身，可以第三方开发的。在这里像那些默默奉献的伟大程序员们表示无比的敬意。强推插件下载软件 Sketch Toolbox [见下图]。可以一键下载/卸载插件，再也不用从 GitHub 上下载然后拖到指定文件夹了，节省了大量时间。

Sketch 用了快三个月了，插件也尝试过20多个，现在把我喜欢的插件分享如下，希望能够帮到朋友们。

• Artboardzoom : Cmd + 4 一键 zoom in 画布到适当大小。
• Sketch Arrange Artboards ：可以将多个画布整齐排列。
• Content Generator Sketch Plugin ：添加伪元素必备。
• Generate Gif Sketch 也可以做 Gif 动图。
• Magicmirror ：透视变形图让你的作品集看起来更酷。
• Sketch User Fontawesome ：一键添加字体图标。

##总结

尽管 Sketch 相比 PS 而言缺乏很多操作位图的功能，插件稳定性不足，同时限定了只能 Mac 用户使用。但作为一个初学者，个人确实觉的使用 Sketch 比 Photoshop 更加适合 UI 设计。它的各项工具都是专门为 UI 流程进行设计的，比如画布尺寸，控件，指定尺寸导出等。相信使用 Sketch 可以极大的提升你的工作流程，从项目初期设计阶段到项目最终实施阶段。还没有尝试过 Sketch 吗？更多功能等待你去探索呢。如果你有其他的 tricks，let me know in the comments!

##题外

来自： http://joeyqiang.me/design/2016/01/06/如何用 Sketch 进行网页设计/