Question

如何用 Sketch 进行网页设计

Answer 1

Sketch基本设置要了解。
画布
按住键盘 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 的设计，让设计稿和实现稿无缝对接，见下图。
Sketch 还提供了保存组件的功能。如果某些元素在设计中会重复出现，则可以利用 Symbol 功能进行保存，需要时直接插入即可。一次设计，循环使用。
结构
一个好的交互设计师需要对网站结构有一个非常清楚的认知。这个网站的目的是什么，用户群是谁，为了实现目的需要有哪些功能，这些功能如何组织成页面，页面之间如何跳转，功能如何实现等。比如该网站是销售网站模板的购物网站，导航栏有如下几项：主页，联系页，支持页，购物页，个人账户，购物车，如下图。
先设置主页，然后由主页发散延展到其他界面。当然，这一切应该在 UI 设计之前的交互稿就考虑清楚。UI 更加强调美观性，如何利用美观更好的引导用户实现既定目标。
交互
设计时需要考虑用户使用网站时的交互场景。
界面的交互状态，比如登陆和未登录时界面的不同状态，如下图。
元素的交互状态，Hover 和未 Hover，Click 和未 Click，是否 Disabled等。细节产生美！
插件
Sketch 的插件是独立与 Sketch 本身，可以第三方开发的。在这里像那些默默奉献的伟大程序员们表示无比的敬意。强推插件下载软件 Sketch Toolbox[见下图]。可以一键下载/卸载插件，再也不用从 GitHub 上下载然后拖到指定文件夹了，节省了大量时间。

Answer 2

基本设置 画布 按住键盘 A 快捷键，可以创建画布。 Sketch 已经良心的为你默认设置了各种设备尺寸，你想要的全都有，如下图。 Artboard 栅栏 通过 Layout settings 设置栅栏[布局参考线]，这个功能好的真是不要不要的[下文回介绍其实际用处]，可以根据需要自主选择每列宽度，间隔宽度以及最外侧 margin 宽度， Layout settings Settings details 这时画布上就出现了栅栏参考线，文字段落的宽度，按钮的宽度，图片的宽度都可以根据栅栏进行合理设置。通过栅栏布局可以极大的统一页面的布局设置，给人一种和谐美[Ctrl + L 可以快捷键显示/隐藏栅栏]，效果如下。 Layout effect 字体 注重对比和统一。对比是指在需要突出区别的地方用不同字号，粗细和字体突出不同。统一是指对于网站同一元素，使用相同的字体设置，比如 H1, Body Text. 英文字体建议两种即可, 一个 sans-serif 字体作为标题，显眼；一个 serif 字体作为正文，易读。可以提前设计好各个字体的数值，利用 Sketch 的 Style Text 功能进行保存，方便以后频繁使用。也可以再设计的时候，边做边保存[前者适合在经验用户，后者更适合初学者]，如下图。 Font categories 对字体另外一个重点是确定 line height [行高]，确定行高的作用是方便确定控件上下 margin, 左右 margin 可以通过栅栏进行确定。比如你确定默认字体大小为 20px, 行距为 1.5，则行高 = 20px * 1.5 = 30. 那么控件之间的上下间距则可以设为 30px 的倍数，比如 30px, 60px, 90px, 以此类推。间距和行高相同可以使页面看起来更加和谐美观。

Answer 3

用 Sketch 做网页设计会用到的道具很多，具体的教程可以看看相关网站，完成设计之后，用蓝湖标注切图，在借助标注切图进行开发，实现网页设计的落地。