如何提高设计出图效率

设置

【首选项】中的设置

PS中的设置

常用模数（手机端、PC端）

模数的概念：

在建筑设计中，通常选定的标准尺寸单位，所有的建筑材料、制品都以此标准尺寸长度进行协调进行设计。从而达到统一、美观、标准的设计目的。同样的思路也可以被引用在网页、app设计当中。

iOS：

iOS通常的设计都是在@2x分辨率下进行，通常以2px作为倍数作为基本模数即可，基本可以参照Android的设计模数进行调整。但注意：在iOS中常用到而Android设计中不会用切图大小 44px × 44px。

Android：

Android因为分辨率比较多，需要考虑不同分辨率的大小。因此在设计中通常使用xxhdpi作为常用分辨率进行设计。通常使用8px作为基本模数。
因此在做Android的图标设计时，icon切图通常是：
40px × 40px
48px × 48px
64px × 64px
72px × 72px
元素距通常用：64px、48px、32px
字体常用：32点、40点、48点、60点

总体来说，都是以8作为基本模数来进行设计。通常来说，按照此标准做出来的设计会比较规整。

Web：

Web相对于App的不同在于承载的物理屏幕，在web中，我们通常以5作为最小的模数单位。而常用的多是10px、20px...等5的倍数。

---

工具

【移动工具】的 自动选择 功能

建议使用【自动选择-图层】，因为相对来说，【群组】的选择是比较少的。

如图所示

【位移工具】V工具配合【直接路径选择工具】A 的使用

在zcool中看到有小伙伴提出不建议用【位移工具】的自动选择，原因是会无操做，选择到许多其他图层。但是作者比较喜欢用【位移工具】配合【直接路径选择工具】来使用。

通常我们需要用到【位移工具】的时是因为我们需要�** 对图层进行位移操作 **，那么可以分为，以下几种情况

• 单一图层移动

单一图层的移动，建议使用【移动工具】简单处理即可。

此处应配图

• 仅有多图层移动（可框选范围）

比如在web设计中，通常我们会遇到需要选择一个页面中的一整个模块进行位移，这时候最方便的不是去打开【图层】面板找图层，而是直接用【移动工具】直接左击鼠标按住拿出一个选框，被选框选中（哪怕只是局部选中）的图层会可以直接进行移动。当然，这时候如果有部分icon或者其他元素需要增减进移动的范围，那么可以配合右键选择+shift或者ctrl使用。

此处应配图

• 仅有多图层（不在同一框选范围）

此处应配图

• 有不可见或者复杂图层移动——放在最后因为是大招啊！！！

有时候我们在作图过程中很难免的会产生很多过程中的痕迹，比如【隐藏图层组】。而这个时候如果我们需要选择多图层，而图层之间可能还有很多【隐藏图层组】，这时我们如果按照先前的方式进行操作，结果只能是我们把很多隐藏图层都召唤出来。
因此，这个时候我们最合适的方式是使用【直接路径选择工具】进行框选选择，而再使用【位移工具】进行移动。
那么为什么不直接使用【路径选择工具】呢？因为在多图层的移动中，如果是用【路径】的方式进行移动，在作者的经验中，发现会变得无比卡顿（可能是因为计算机需要按照矢量进行运算所有位移），而且使用【直接路径选择工具】多图层的时候，会有明确的选中路径边缘显示，更加直接明了，因此最方便的方式是用【直接路径选择工具】。

此处应配图（此处应有对比图）

Ai配合Ps

在我们做Ps的时候，是不是会遇到一些小icon或者插图需要画。这时，建议使用Ai，而不是使用Ps直接画，好处如下：

• 可以节省Ps在渲染路径过程中耗费的系统资源（一个设计中运用的路径过多的时候，通常Ps会出现明显的卡顿）；
• 可以减少Ps中的图层数量，降低管理图层成本。通常我们需要画个插图，没有一、二十个图层是搞不定的。而过多的图层在选择和管理，会降低我们的设计效率。
• 修改调整不会因无操作，影响其他图层。只要我们在Ai导入Ps的时候选择【智能图层】贴入，那么在我们需要调整插图的时候的时候，只要选择双击插图的智能图层就可以完美切换到Ai，而在Ai中保存后，Ps会只能调整呈现结果。
• Ai在做复杂路径的方面比Ps更加方便。在Ai中，除了定义了ps本身就有的钢笔工具，还定义了 【增加锚点】、【删除锚点】、【转换锚点】工具，这样的操作其实比单纯用ps编辑路径要方便很多。

巧用智能图层

在我们的设计进行过程中，可能会有些元素在一个页面要反复使用，而元素本身可能在后续进行微调。而如果进行微调，那么势必回带来重复性劳动。因此作者习惯在这个时候使用【智能图层】，只需要在文件中，修改一个智能图层，即可达到所有相同图层修改的结果。减少了设计中的重复性劳动。

---

规范的建立

从一开始就建立规范

只要是平台类项目，建议从一开始就建立视觉规范。
无论是字体大小还是用色，尤其是Android，在设计完成，有些团队需要设计给出color.xml文件，因此最好养成习惯在设计开始就进行规范的制定。
通常来说在设计的起始就考虑清楚一下问题，在设计的过程中不易出现设计规范之间的矛盾，从而影响到设计效率。
在建立规范的时候，要考虑如下几个设计点：

• 颜色

主色
辅助色
文字突出颜色
文字描述颜色
文字提示颜色
文字连接颜色
文字警示颜色

• 字体

主标题
副标题
普通文字大小
备注文字大小

• 间距

左右模块之间间距
上下模块之间间距
模块内元素之间间距
模块内图片之间间距
模块内文字之间间距

• 分割

模块内部分割方式
模块之间的分割方式

• 按钮

大按钮
中按钮
小按钮

• 图标

• 表单

---

图层归档

何时使用 Ctrl+G

设计师的源文件通常都是惨目人睹的。而处女座的设计师无疑比惨目人更让接手的设计师抓狂。

此处应有vicky图层对比类似的图。

归档命名规范

移动端的归档命名规范

移动端通常的命名通常形式为【模块+类型+一级名称+二级名称】的形式组成

Web端的归档命名规范

---

文件归档

版本迭代

文件命名

文件夹整理

---

输出

sketch配合zeplin——设计与开发撕逼终结神器

Ps CC 15配合Ps CC 16——CC16也有爱

之所以使用CC15配合

Acdsee替代Ps导图——导图挚爱没有之一

Principle替代AE做效果演示

---

快捷键

Shift+位移

V+T改字体属性

Ctrl+Backspace / Alt+Backspace

---

避免的问题

避免少用【图层样式】

尽量多使用【路径形状】