sketch做网页设计

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

基本设置
画布
按住键盘 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, 以此类推。间距和行高相同可以使页面看起来更加和谐美观。

2、如何用sketch进行网页设计

那个做手机端APP比较方便吧。软件是英文版的，可以搜下翻译，用过PS那么sketch就比较顺手了，因为很多符号包含的意思都是一样的

3、如何用 Sketch 进行网页设计

基本设置
画布
按住键盘 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, 以此类推。间距和行高相同可以使页面看起来更加和谐美观。

4、UI设计可以干什么？

 ui设计要做什么，ui设计主要做什么工作？ui设计作为设计大类的一个细分岗位，如今已经随着时间的推移成为了最热门的职业。而现阶段非科班转行，依靠兴趣的入行的人也非常多。但是很多人并不完全了解ui设计师是做什么的，要想知道这个问题，那就要先知道ui设计师工作中的产出有哪些？

1、手机APP UI

APP界面

定义：根据产品需求,在界面中设计和排版对应的交互、视觉元素。

要求：能满足平面四要素的正确性;知道如何应用标准的系统Kits;能合理定义字体和元素尺寸;熟悉并能设计主流的组件类型。

软件: Sketch、XD

界面图标

定义：包含APP启动图标,以及应用内的一般工具图标

要求：对图标的基础规范有所了解,了解主流的图标类型及使用场景,在绘制整套图标时可以保持基本的风格一致,形式简约美观

软件：Ai、PS

可交互原型

定义：用来展示可以点击并跳转的交互原型文件

要求：能清晰表达页面跳转逻辑即可

软件： Sketch、XD、蓝湖、墨刀

基础动效

定义：可以表达触发界面交互效果时的动画

要求：了解可以实现的动画范围,并能明白如何具体编写表达动画的文档。

软件：AE

标注切图

定义：将设计稿的内容进行标注,和将开发过程中需要的图形进行导出

要求：了解对设计还原中开发人员需要知道的参数,了解不同图片格式的作用与区别并能对应导出符合规范的切图。

软件：蓝湖、 Sketch、XD、 Markman

设计规范

定义：设计到开发中要遵守的相关规范文档

要求：针对最主要色彩、元素使用的规范简洁明了,容易被执行

软件：任意设计软件或ofce

2.PC网页界面

网页界面

定义：主要是公司官网或产品介绍页,将需求中的内容合理置入画布并进行排版和设计

要求：了解基本的网页画布设置和规范,网页的主流结构和交互方式,能设计出简约美观,表意清晰的设计。

管理界面

定义：根据业务需要,设计在网页端操作的管理系统,用来管理财务、库存、客户信息等的工具

要求：能了解基本的管理界面组件功能和交互规则,网页拉伸适配方式,和文字、色彩应用

软件：XD、 Sketc

标注切图

定义：对设计稿的说明和导出开发用的图片。

要求：能导出正确的切图,和必要的区域进行说明。

软件：Sketch、XD、蓝湖、墨刀

3.运营设计（广告宣传图）

Banner设计

定义：根据运营、营销活动的需求设计岀在产品广告位中展示的广告图

要求：能掌握基本的图文混排方法,能对文字做出简单有效的表现,具备入门的合成技巧

H5活动页

定义：根据运营、营销活动的需求设计岀在网页中展示的活动专场页面。

要求：了解活动页的基本结构,手机端网页设计的规范,有入门的主视觉设计能力

ui设计要做什么，ui设计主要做什么工作？这个问题你清楚了吗？如果你还有其他关于ui设计的问题欢迎持续关注易夏岚或者留言评论与我进行交流哦~

5、如何用sketch制作精致的APP原型

1. sketch自带模板

Sketch做的非常人性化的一点，就是自带了很多模板，而且用来画交互完全够用，省去了从网上各种非正规渠道找资源的麻烦，如果你是sketch的老用户，而不知道自带模板功能的话，真的是要面壁思过了。

其中，APP相关的模板有两个“iOS用户界面设计”和“Material Design”，顾名思义，分别用来设计ios界面和Android界面。以ios为例，模板中包含了常用的各种控件：状态栏、导航栏、弹窗、键盘等等，当我们需要的时候，直接拿过来用，不仅省事而且非常精致，并且如果我们多去研究并拆解一下官方的这些控件的制作过程，能给我们提供很多设计思路，比如如何用各种形状拼合成想要的图形，如何利用填充和阴影达到想要的视觉效果......这部分就不展开讲解了，留给你自己去发现。

2. APP原型样式
知道利用sketch自带的APP界面模板之后，我们首先讨论一下APP原型采用哪个样式比较合适。
2.1 待选样式
在Sketch中插入画板的时候，软件会提供一些常用设备的尺寸供用户选择，我们需要用到的是iPhone6（375×667px），为什么一定要采用iPhone6呢？非常重要的一点，是因为上边提到的sketch自带模板，iOS界面的所有控件大小全部是以iPhone6尺寸为基准的，拿过来可以直接使用。如果采用了plus或se的手机型号尺寸，控件大小和画板大小标准不一致，还得需要人为调整，异常的繁琐。

当我们在同一个画布（或称为页面）下插入多个iPhone6画板时，sketch会自动排列所有的画板，间隔100px。然后经过一番设计，在各个画板上填充相关元素之后，大概就形成了这样一份交互稿，如下图：

看上去，整齐划一、非常美观，所以这种样式比较适合从全局的角度来展示APP所有页面的交互样式，但并不适用于作为交付物，提供给开发和测试同学在实际工作中使用，主要的问题有以下两点：
标注信息无法体现，标注信息包括了“页面之间的跳转关系”和“相关交互逻辑的说明性文案”。在sketch内，由于位于画板之外的元素无法显示并导出，如上，即以一个iPhone6页面为一个画板，造成画板之外的“箭头”或“文字”就无法派上用场；
功能点结构化的展示比较欠缺，上面也提到了，这种形式比较适合进行全局展现，但在实际项目运作中，会拆分成多个相关的独立功能点，并且每个主要功能点，又要分为正常主干流程和多个异常分支流程，同时对于分支流程来说，不一定需要整个页面做信息呈现，很可能局部模块展示就足够了。
针对第1个问题，其实也有专门用来做标注的sketch插件，比如Notebook，直接用插件做标注虽然方便，但是格式太受限，非常的不灵活，尤其是经常需要修改时候，所以在我试用了两次之后，最终还是放弃了。
2.2 采用样式
否定了上边提到的APP原型样式后，我们又该如何通过其它的样式来解决遇到的一些问题呢？
在sketch中，是以画板或切片为单位进行导出的，所以我们可以根据需要，自由把握一个画板的大小，而不是局限于以一个iPhone6页面为一个画板。比如如果需要全局展示APP整体样式，则可以将所有APP页面放在一个画板中，如果只是讲解某个具体的功能点，则可以只将涉及到的APP页面放在一个画板中。
那每个具体的APP页面该怎么体现呢，很简单，通过一个375×667px 的矩形框来表示一个常规的APP页，或许你已经注意到了，这个尺寸正好是sketch默认的iPhone6画板的大小，采用这个尺寸矩形的好处就是，所有自带的控件仍可以继续无缝的使用。
这样做的另一个好处，APP页面之外可以体现更多的元素，比如表示跳转关系的“箭头”，比如解释性“文字”，比如表示分支流程的“局部模块”

如图所以，其中有几点使用习惯可以参考一下：
可以针对每个画板或者某个功能模块，宏观上用一句话概括一下功能点，从而帮助阅读者能快速的知道下面的交互针对哪个具体功能，如图中左上角的标题所示，说明这是与“增加在线客服”相关的需求；
可以对每个具体的页面取一个小标题，从而帮助阅读者快速定位这是哪一个页面，如图中“1.1 个人中心”、“1.2 在线客服”两个页面标题，同时在需要引用其它相关页面的时候，也可以通过1.1、1.2的序号进行快速定位；
对于每个页面的注释信息，可以采用一个固定的特殊颜色来进行区分，对于颜色选择恐惧症来说，直接从sketch全局颜色库中选择一个即可，另外注释部分放置的位置，可以在相关页面的右侧，也可以在下侧，具体怎么选择可以根据信息多少等实际情况来考虑；
对画板中相关的元素根据相关性进行灵活的编组，比如可以将如图所示的1.1和1.2两个页面编成两个大组，同时对每个大组，再根据“页面”和“注释”两部分分别编组，当然层级可以继续下探，比如“注释”组中可以根据“文字”、“箭头”维度继续分组，具体维度的和粒度，可以根据个人习惯而定；
3. 控件使用技巧
讲完了原型样式，下面说一下控件的使用技巧，主要有组件和文本样式两部分
3.1 组件
上边提到过，sketch自带模板中包含了很多常用控件，我们可以直接在自带的模板基础上进行设计，也可以自己创建一个新文件作为模板，然后根据情况，将需要使用到的控件复制过来用。我个人倾向于后一种，因为很多时候不需要这么多，按需提取即可，另外除了直接采用自带控件，自己也可以创建，同时可以灵活的维护多套模板，使用在不同的项目中。
无法采用哪种使用形式，控件的使用中都会涉及到了一个非常重要的sketch功能点，那就是“组件/Symbol”，sketch自带模板中的控件实际上就是组件的形式，它能够帮助我们方便的在多个页面和画板中重复运用某组内容，其实类似于Axure中的母版功能。比如APP端常用的cell控件，可以将常用的几种类型维护成组件，需要使用的时候，直接拖过来用，方便快捷。

除了系统层面的“状态栏”、“导航栏”、“键盘”等组件，针对特定的项目，自己也可以将常用的某个模块创建为组件，比如电商项目中常用的商品模板，可以创建“商品/横排”“商品/竖排”两种形式的组件，从而可以不断的快速复用。
并且有个命名的小技巧可以参考一下，通过符号“/ ”进行名称的层级划分，sketch会自动将“/”符号之前名称相同的组件归为一组，分门别类之后，我们在插入组件的时候就能快速定位，尤其是组件比较多的时候。

在使用“组件”功能的时候，我们会经常遇到一种情况，视觉样式都是一样的，但是文案有不同，比如“按钮”控件，和上边提到的“cell”控件。sketch非常完美的解决了这个问题，当我们插入一个组件后，可以用特定的文字去覆盖原有组件的文字，甚至不透明度、混合形式、阴影都可以自定义。如下图所示，我从同一个组件插入了三个按钮，每个都可以配置不同的文案和不透明度。

综上，我们可以直接复制sketch中自带的控件（以组件形式存在），也可以自己把常用的某些模块创建为组件，这些就组合成了针对某个项目的特定组件库，在画交互的时候直接可以复用，并且还支持文案、不透明度等自定义，效率和美观性都得到了保障。
3.2 文本样式
“组件”功能的核心使用场景就是某些元素经常需要复用在不同地方，字体和图层也如此。在一个项目的交互稿中，使用到的样式种类是有限的，如果对每个元素如果都单独维护，会比较繁琐，sketch中的“文本样式”和“图层样式”功能就完美解决了这个问题，针对文字和图形元素，在“检查器”中选择需要共享的样式，能够快速的将颜色、阴影、不透明度等样式配置套用过来，而不再需要做重复性的样式配置，非常的便捷。
可以根据需要，整理一套自己常用的样式规范，比如”正文常规性文字”，统一采用“微软雅黑，色值#ffffff，字号18pt”的样式，在之前提到的“页面注释说明”，统一采用“微软雅黑，色值#5CD600，字号20pt”.......将规范维护成共享的样式文本，在需要的地方直接复用即可，不仅仅提高了效率，并且保证了交互稿统一美观性。
熟练使用“组件”和“文本样式”，不仅仅是在创建的时候能提高效率，尤其是在涉及修改时，你会发现只要修改一处，全局同步调整完成，那种快速带来的痛快感更加明显。当然效率的提升是一方面，通过不断复用标准精致的控件，采用统一规范的文本样式，也保障了交互稿整体的美观性。
4. 原型文件维护和导出
原型设计的一些思路说的差不多了，那不同项目以及不同版本的原型该怎么维护比较合适，将原型同步给团队成员的方式有哪些呢？
4.1 原型文件维护
需要注意的一点是，上边提到的“组件”和“文本样式”，它们均保存在某一文件中，并不能在不同文件中共享，并且这两个东西是跟项目有比较大的相关性，所以我比较倾向于一个项目维护一个sketch文件，比如“某某应用APP端原型”文件。
以一个页面（或称为画布）呈现一个版本的原型内容，然后在某个页面/版本内，以一个画板呈现一个功能点模块的原型内容。当然，主体思路是这样的，特殊情况也可以做灵活的调整，比如对应用的第一个版本来说，原型内容会非常多，也可以分成多个页面来呈现。
这样做，不仅仅是“组件”和“文本样式”可以在一个项目内复用，其它相关的元素，比如某个页面，或者某个画板，都可以更加方便的复用。

4.2 导出和共享

然后简单说一下导出，对于交互稿来说，基本上以画板为单位进行导出就够了，至于是图片格式，还是PDF等其它格式，以团队内其他成员普遍接受的形式既可。当然也可以用插件，以HTML的格式进行导出，我常用的就是这一种，好处就是以网页形式打开，在左侧可以看到所有画板的列表，也就是某个版本内所有的功能点信息，相互切换也比较方便。
最后推荐一个sketch插件，sketch-measure 下载地址：utom/sketch-measure 这块插件功能非常强大，导出只是其中一个（我就是用这块插件来导出html格式原型），更多功能可以自己去探索。

5. 总结
以上，基本就是用sketch设计APP原型的整体思路，产出物从视觉上看会非常精致，完全达到了高保真原型的水准，使用熟练的话，制作效率也非常高。在同样甚至更短的时间内，如果能设计出更精致的原型，何乐而不为呢？

6、网页UI设计稿里的标注是用什么软件标注的

在国外做项目的时候，同事都在用zeplin，使用体验也是非常顺畅的。国内的开发设计流程环境不同，zeplin反而水土不服，现在团队主要在用摹客iDoc，除了基础的标注切图功能以外还有交互原型和需求文档功能，能够很好地应对目前的产品开发环境，整体使用体验比不上国外已经成熟zeplin，但是还是算易用

7、用sketch设计中文网页时使用什么字体合适

中文用得最多的是微软雅黑

8、sketch设计网站切图尺寸会按原尺寸导出就行是吗

开发时需要的切图尺寸很多，为了避免需要做很多切图的麻烦，建议用蓝湖一键切图吧，效率高，而且开发可以选择需要格式的切图进行下载使用。

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

10、网页设计属于什么 领域？

平面设计包括一切平面,包括网页设计,现在做网站需要排版、插图内等，这zhuan都是跟平面设计分容shu隔不开的，但做网站需要平面设计师，两者有联系，但不一样。
如果你想学习的话，可以先从软件学起来，一般会用SKETCH、AXURE这些，还要用蓝湖设计协作平台，方便切图和标注信息，而且还可以对文件进行在线保存和管理，就算改了再多版，每一版都能找到不会丢。