网页模板sketch（网页模板的作用）

本文目录一览：

• 1、sketch是干什么用的？
• 2、来认识一下Sketch
• 3、如何用 Sketch 进行网页设计

sketch是干什么用的？

sketch是一款用来制作矢量绘图的软件。

sketch矢量绘图应用软件，一款适用于所有设计师的矢量绘图应用。矢量绘图也是进行网页，图标以及界面设计的最好方式。

但除了矢量编辑的功能之外，Sketch同样添加了一些基本的位图工具，比如模糊和色彩校正。但是Sketch只支持Macos，其他系统无法体验。

扩展资料

Sketch 软件的特点是容易理解，上手简单，对于有设计经验的设计师来说，入门门槛很低。对于绝大多数的数字产品设计，Sketch 都能替代 Adobe Photoshop，Illustrator 和 Fireworks。

Sketch一个有着出色 UI 的一站式应用。在 Sketch 中，画布将是无限大小的，每个图层都支持多种填充模式；

Sketch 不是一个位图编辑应用。如果使用者想修正一张照片或者用笔刷来画画，不建议使用该软件。

来认识一下Sketch

Jean-Marc Denis（原文作者，前Sparrow设计师，现在在Google工作）在参加WWDC 2013时认识了Sketch的开发团队，所以在第一时间尝试了Sketch，当时由于一些功能的缺失，所以还是折回去使用Photoshop了。过了一段时间，他发现设计师社区开始疯狂着迷于这款新的设计工具，所以决定再试一试，想看看迭代了一段时间的Sketch现在能完成多少原先他需要用Photoshop来做的工作。现在，他80%的设计工作都是由Sketch来完成的，所以写了这篇文章来帮助大家一起了解Sketch。

为什么我们会期待一个新的设计工具？因为当我们更多的关注效率和关注协作，就越发现Photoshop已经不足以满足我们的期待了。下面看看具体的理由：

Photoshop是为图像处理开发的，诸如路径和矢量工具都是后期才加上去的，所以如果你关心一下Photoshop的更新路径，用户界面设计师完全不是Adobe做这条产品时关心的用户群。所以，如果抛去那些复杂的功能，一个为用户界面设计师打造的设计工具完全可以做得更简单，更高效。

相信我们都会觉得为不同的设备输出不同分辨率的素材而痛苦不已吧。或许，你会使用一些第三方插件或是启用一些模板来处理这些事，但依然是很浪费时间的。

Photoshop的引擎是上个世纪为图像处理而打造的，非常的耗费资源，即使是启动一下都要等很久，更别说一次移动多个分组了。话说回来，由于要兼顾Mac和Windows平台，能做到这样已经不容易了。

大公司的执行效率实在太低。不知道大伙是不是和我一样，非常痛苦地等了好几个月才等到Photoshop对Retina屏幕的支持。诸如自动对齐的等功能我已经不做期待了。

有没有梦想过拜托机械的手动保存？Sketch可以做到。Sketch在工作的时候会不断地自动保存成果，并且允许你回复到此前的任一版本。

矢量图意味着可以任意扩展。你没有必要不断地去调整素材的尺寸，Sketch会自动就帮你维持一个像素级完美的作品。如果有的时候你必须用像素点来作图，比如说是画图标或者是插画设计，Sketch 也提供了从矢量切换到像素视图的功能。

你喜欢xScope吗？还是正在用选框工具来进行测量？又或者是难用的网格？Sketch的智能标尺可以帮你轻松地把设计元素的对齐方式、内外间距都调整完美。就我个人而言，这个功能非常节省时间而且避免了复杂的人工计算，是我觉得最有用的功能之一。

在Sketch里我们可以随时随地修改一个元素的圆角、高度和宽度。只需要简单地修改数值就可以轻松调整元素，对于刚从Photoshop切换过来的设计师而言非常好用。甚至会让你产生强烈的依赖。

在Sketch 里你可以很轻松地把多个图形合并，构成一个新的图形。并且Sketch在提供了多种图形合并模式的同时，还允许你随时修改已经合并图形的子图形。这项功能使得你可以很轻松地管理和创造更复杂的图形。

在Photoshop里想要让一个图层有多种混合效果是很困难的。但在Sketch里，你可以很容易给一个图层加上多种混合效果，看看下面的示例就知道了。

自动选择最接近的像素边界可以让一个图形或者是图层自动修正边距到一个像素级完善的位置。比如可以把一个宽度是5.3px的图形自动修正到5px，这样就不会有模糊的像素点和粗糙的图形了。我自己给这项功能设了一个快捷键（Command+Opitons+x），来确保我做出的每一个图形都像素级完美。这比人工一个一个按照网格修改图形高效得多。

有的时候你会做一些充斥文字的设计，样式链接可以帮助你设定一个固定的样式来快速地应用在新的文字上。如果你修改了其中任何一处的样式，那么所有链接该样式的文字都会自动更新到新的样式。并且，这项功能也可以应用在图形上。

用Photoshop的时候，最痛苦的事莫过于切割元素，然后到处素材。Sketch则可以帮助你快速地导出各种分辨率和格式（pdf, eps, svg, png, jpg, tiff）的素材，通常导出只需要一个点击，并且不用借助任何第三方应用程序。

作富文本设计的时候，布局会变得非常重要，这项功能可以帮助你快速地试验不同的方案。

其实可以把网格功能理解成按照纵横两个维度自动地结构化布局内容。这个对于排版布局而言，非常方便。

Sketch的文字渲染引擎非常出色，可以用来做很出色的文字布局和字体设计。因此，你可以放心地放弃Photoshop的抗锯齿功能。

如果你在做一些网页设计，Sketch可以帮助你快速地把你的成果到处成CSS样式。

这是一项小功能，但是确实可以节约你很多时间和精力。

Sketch Mirror是一个Universal App，可以方便你在iPhone或是iPad上查看自己的成果。（作者撰写这个文章的时候Sketch还没有推出官方的镜像工具，所以这一段是译者补充的）。

Sketch是一个小团队，发展非常快速。简单扫一眼Sketch的升级日志，你会发现每一个更新都会带来新的功能。

我非常建议你去使用Beta版本，你会见证Sketch快速的升级。

Sketch团队非常善于聆听用户的诉求，因而软件不断地变得更好。你可以去tenderapp上向他们提出新功能的要求。

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

网页模板sketch的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于网页模板的作用、网页模板sketch的信息别忘了在云尚网络www.ysfad.net进行查找喔。