如何用 Sketch 进行网页设计

1. 如何用 Sketch 进行网页设计

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 上下载然后拖到指定文件夹了，节省了大量时间。

2. 如何高效使用Sketch

自从知道xcode6支持使用矢量图后就开始用sketch，顺手记录下使用中的一些能够提高效率的方法
Sketch适用范围
sketch主要是做图标和界面的。如果是板绘或者处理照片还是用Photoshop之类的比较合适。和ps相比，sketch的优势是开启速度会快很多，是用来原生开发，支持退出后再开启保持退出状态等特点，这些都是ps所没有的。
图层操作
command+d复制图层，或者按住option键拖动
按住shift键能够选择多个图层
按住shift键能够能够严格按照垂直活水平移动
按住shift键改变图层大小是按等比变化
按command加上方向键会精确到像素的调整
图层透明度可以使用快捷键进行调节，选中一个图层按1到9的数字快速将图层透明度从10%到90%，按0调成100%
command+shift+l 锁定图层
绘制图形
可以在Insert > Shape里找到预设的一些图形，比如圆形，方形等基本图形。按o添加圆，r添加矩形，l添加直线，u添加圆角矩形，t添加文本
按v可以自己绘制图形
绘制时按住shift画Sketch会自动按45度对齐前一个点适合绘制直线
善用布尔运算将简单的图形组合成复杂的图形，布尔运算有四种，合并形状（Union）,减去顶层形状（Substract）,与形状区域相交（Intersect）,排除重叠形状（Difference）
布尔运算后可以使用扁平化功能（Flattening）,使用后会将其合并成一个图形
复制旋转是个比较有意思的功能，能够很方便绘制出类似花瓣的效果，通过菜单进入 图层 > 路径 > 复制旋转 (Layer > Paths > Rotate Copies)即可。如果希望让复制的图形独立出来，可以分离路径通过菜单 编辑 > 路径 > 分离 (Layer > Paths > Split)即可。
画出粗细不均效果的线条效果可以使用描边宽度 通过菜单进入 图层 > 路径 > 描边宽度 (Layer > Paths > Stroke width)，然后点击希望加宽的地方以添加锚点拖动使之变宽
填充可以按从下到上的顺序叠加
选中图层control+command+m创建蒙版
control+c会出现放大镜，然后可以方便选择颜色替换当前选择对象的颜色
画布的控制
使用空格进行抓手移动画布
按command加鼠标滚轮进行画布放大和缩小
control+p能够切换到像素模式查看，相当于输出png后点开图片查看的效果。
control+g开启关闭网格
按住option键能够看到各个对象之间的距离
command+1缩小至能看到所有对象，command+2放大到选中对象到屏幕适合的大小，command+0缩小至100%
Symbol共享元素，一次编辑所有地方都能够生效。
什么会影响Sketch的性能
模糊
阴影
多页面
文本转轮廓

3. 如何高效使用Sketch

如何高效使用Sketch


自从知道xcode6支持使用矢量图后就开始用sketch，顺手记录下使用中的一些能够提高效率的方法
Sketch适用范围
sketch主要是做图标和界面的。如果是板绘或者处理照片还是用Photoshop之类的比较合适。和ps相比，sketch的优势是开启速度会快很多，是用来原生开发，支持退出后再开启保持退出状态等特点，这些都是ps所没有的。
图层操作
command+d复制图层，或者按住option键拖动
按住shift键能够选择多个图层
按住shift键能够能够严格按照垂直活水平移动
按住shift键改变图层大小是按等比变化
按command加上方向键会精确到像素的调整
图层透明度可以使用快捷键进行调节，选中一个图层按1到9的数字快速将图层透明度从10%到90%，按0调成100%
command+shift+l 锁定图层
绘制图形
可以在Insert > Shape里找到预设的一些图形，比如圆形，方形等基本图形。按o添加圆，r添加矩形，l添加直线，u添加圆角矩形，t添加文本
按v可以自己绘制图形
绘制时按住shift画Sketch会自动按45度对齐前一个点适合绘制直线
善用布尔运算将简单的图形组合成复杂的图形，布尔运算有四种，合并形状（Union）,减去顶层形状（Substract）,与形状区域相交（Intersect）,排除重叠形状（Difference）
布尔运算后可以使用扁平化功能（Flattening）,使用后会将其合并成一个图形
复制旋转是个比较有意思的功能，能够很方便绘制出类似花瓣的效果，通过菜单进入 图层 > 路径 > 复制旋转 (Layer > Paths > Rotate Copies)即可。如果希望让复制的图形独立出来，可以分离路径通过菜单 编辑 > 路径 > 分离 (Layer > Paths > Split)即可。
画出粗细不均效果的线条效果可以使用描边宽度 通过菜单进入 图层 > 路径 > 描边宽度 (Layer > Paths > Stroke width)，然后点击希望加宽的地方以添加锚点拖动使之变宽
填充可以按从下到上的顺序叠加
选中图层control+command+m创建蒙版
control+c会出现放大镜，然后可以方便选择颜色替换当前选择对象的颜色
画布的控制
使用空格进行抓手移动画布
按command加鼠标滚轮进行画布放大和缩小
control+p能够切换到像素模式查看，相当于输出png后点开图片查看的效果。
control+g开启关闭网格
按住option键能够看到各个对象之间的距离
command+1缩小至能看到所有对象，command+2放大到选中对象到屏幕适合的大小，command+0缩小至100%
Symbol共享元素，一次编辑所有地方都能够生效。
什么会影响Sketch的性能
模糊
阴影
多页面
文本转轮廓

4. 界面设计常用软件有没有sketch

那肯定是有啊！
Sketch 有很多优点也有缺点，下面会说
优点：
快，用 Sketch 好像没有冷启动时间一样，这也就是为什么 AI 和 PS 需要启动画面
OSX 支持好，原生全屏，原生的版本控制，支持 Retina
功能集足够，支持贝塞尔曲线，支持布尔运算，支持文字转曲，支持图层样式
功能亮点
原生支持 @2x 图片导出
保存切片时，可以选择导出的图层。
像素对齐
不限制画布大小
缺点：
快捷键覆盖少
像素图像编辑功能弱
只支持SVG导入
文字编辑弱
生成文件支持率低（哪个设计师会把原文件给别人）
总而言之，Sketch的优缺点明显，在现在的扁平化年代Sketch刚刚好
希望可以帮助到你，希望采纳谢谢~~~~~

5. Sketch - 给设计师的10个Sketch小技巧

 已经使用了Sketch一段时间了，当然觉得非常不错。所以我觉得可以把我觉得有用的一些小技巧分享给大家，在日常使用Sketch的时候，也许能更加顺手。
                                           通过这个技巧，我们可以快速的复制的样式到其他图层上，而不用一个个的重新设置。
                                           在做设计的时候，会经常碰到图层需要移动的状况，用鼠标来拖动图层实在是效率太低，因此这个方法可以很好地减少不必要的操作时间。
                                           这个技巧可能大家没有太注意到，在使用Sketch的颜色选择器的时候，可以提取到屏幕里所有可见目标的颜色，而不用再麻烦的截个图，扔进Sketch，再提取颜色，简单的把Sketch往旁边拉开一点吧，然后随意的提取吧。
                                           又是一个值得学习的技巧，Sketch支持设置不同的圆角，那如何设置呢？只需要在Radiuses里填写想要的数值即可。    顺序为： 左上角/右上角/右下角/左下角。 
                                           Sketch里有一个Symbol的概念，在做设计的时候极其方便，比如不同页面里同样的导航栏，同样的按钮。Symbol是一个可以重复使用的元素，改变一个Symbol元素的内容，其他的也跟着改变。那么如何操作呢？
   只需要选择打组工具，“ ⌘+G ”。再将所需原色打组后，点击“ Create Symbol ”，这时候，你就会拥有一个新的Symbol。
                                                                                   面对经常使用的功能，我们不应该每次都去在下拉菜单选择使用，而是应该常驻在我们的工具栏里面。
   在工具栏右键选择“ Customize Toolbar ”，我们就可以拖拽想要的工具到菜单栏，也可以把菜单栏里不需要的快捷操作删除。
                                           官方其实已经提供了我们这样的工具，Mirror（￥30），支持同一WIFI下的连接，新版支持IP直连，更加稳定。
   Mirror功能唯一且简单，支持各个Artboard的切换，左右滑动可快速在相邻Artboard查看设计稿，值得拥有。
                                           这部分原作者只推荐了SketchToolBox，也是大家应该相对比较熟悉的工具。
   在这我再补充推荐一个网站，一个根据使用场景来分的Sketch插件网站。名字叫Sketch Plugin Filter。
                                           进入首页，会列出很多的插件，我们点击左侧的“ FILTER BY USE CASE ”按钮，会进入下图界面。
                                           我们此时就可以根据自己的使用场景需求来选择最合适的插件，而不用在成千上万种插件里去大海淘针一样的去找到需要的插件。   [插件地址]
                                           当我们给其他人展示我们的设计时，不想出现那些条条框框和格子，这时候我们就可以点击“ ⌘+. ”，进入全屏模式，去掉那些烦人且不重要的部分。
                                           有时我们碰到了一些好的动态效果，但没法记录下来，但想保存下来，作为素材库中的素材。那么如何实现录屏功能？
   首先，将iPhone或者iPad用线与电脑连接（必须），之后打开” Quicktime ”，选择 ” Moive Recording ”，在下拉菜单里选择我们的设备，iPhone或者iPad，最后的事，当然就是愉快的录屏了。
   Sketch其实还有很多小技巧，原文作者只是分享了其中的一部分，而工具终究是工具，需要的还是提高我们自己。

6. sketch有哪些非常好用的技巧

昨天我们介绍了一些Sketch的常用快捷键，同样和 figma 一样，sketch也有一些非常不多的技巧，下面就给大家介绍一下几个用了用了就会爱上的 Sketch 操作技巧。
  
 一、管理页面的表情符号.画板和图层。
  
 随着项目越来越大， sketch 中的页面和图层会越来越多，我们可以使用表情符号来对页面.画板和图层.sketch中调整表情符号面板的快捷键是control+command+space，我们可以使用表情符号来对页面.画板和图层.sketch中调整表情符号面板的快捷键是control+command+space，打开后可以看到所有的系统表情。将相应的表情符号插入页面和画板。在图层名称中，通过符号可以很容易地识别组件。如下图所示:
                                          
 二、提高Sketch运行性能的方法。
  
 1.不必要的Sketch插件卸载或停用。
  
 强烈建议只保留高频使用的插件，越多的插件开启安装，Sketch运行越慢，资源占用越多，导致软件越卡顿，不顺畅。
                                          
 2.避免使用大画板。
  
 避免使用太大的画板，除非设计网页适合。特别是把画板的页面放在大画板上，Sketch缩放的时候会很卡顿。
  
 3.向多个页面分散画板。
  
 不要把整个项目的画板集中在一个页面上，你可以建立一个新的多个页面，把单个页面中的画板分成一个模块，分成多个页面，一个模块一个页面。每个页面的画板数量越少，Sketch在显示过程中需要计算的内容就越少，而且更流畅。
                                          
 4.删除多余的图层样式和效果。
  
 在设计中，我们必须注意控制特殊效果的大小和数量，如图层样式、阴影、模糊和配色。当有多余的图层样式时，我们应该删除无用的样式和效果。这与任何设计工具是一样的。数量和图层样式和效果的大小将增加软件实时渲染的工作量。
                                          
 注：将多余的图层样式和效果删除在图中框起来。
  
 三、自定义画板尺寸如何创建。
  
 Sketch带来了很多大小的画板，但是我们通常使用@2x图纸作为设计草稿，所以每次都不方便更改尺寸。此时，我们可以定制最常用的画板尺寸。
  
 按下快捷键A，调整最右边的画板板，然后选择下拉菜单的自定义，点击底部的创建自定义尺寸，设置画板名称和宽度和高度尺寸，就可以了。

7. Sketch的10个小技巧分享

1.学会“Insert”的快捷键
什么是你在设计中最常用的?创建一个新的Artboard A，插入文字T，创建一个矩形R或者椭圆形O。

2.用正确的方式缩放
· 缩放到100%：⌘CMD+0;
· 查看你画布全部的设计：⌘CMD+1;
· 缩放特定的对象：选择对象然后按下⌘CMD+2。
3.滚动
在没有触控板的情况下如何横向滚动? 使用⇧Shift+滚轮。
4.隐藏/显示sidebars
如果你再一个小的屏幕上作业，你可能需要隐藏左右两边的图层面板(Layer-List-sidebar)和右侧的工具面板(Inspector Sidebar)，使用⌘CMD+⌥Alt +3。或者只隐藏左侧⌘CMD+⌥Alt +1,隐藏右侧⌘CMD+⌥Alt +2。 5.Presentation mode(全屏模式)
按下⌘CMD+.可以进入"Presentation" mode(全屏模式)，将会让你的作品全屏展示。
6.标尺
按下Ctrl+ R你可以显示或者隐藏标尺。在标尺上双击可以添加参考线，将参考线拖到最左侧或者最右侧就会将其删除。
7.移动对象
Sketch中我最喜欢的功能是，能够通过按下⌥Alt来查看对象间的margin值(CSS属性)。
你如果需要查看选中对象到其他对象间的margin值，你只需鼠标移到那个对象上即可。使用方向键你可以移动选中的对象1px，如果在按着⇧Shift则可以每次移动10px。
8.在移动的时候查看margin值
在移动的时候按下⌥Alt即可查看对象的margin值。
9.改变对象尺寸
按下⌘CMD+方向键可以改变对象的尺寸，同样的按下⇧Shift+⌘CMD+方向键可以每次10px的改变对象的尺寸。
10.为对象命名和建组
当你的设计项目很大的时候，你会发现给对象命名和建组会很有用。每次我创建新的对象的时候我机会按下⌘CMD + R，为其名一个有意义的名字。
建组则可以使用⌘CMD + G。
以上就是关于Sketch技巧的相关分享，希望对大家有所帮助，想要了解更多相关内容，欢迎大家及时关注本平台!