【亲测】新手设计如何又快又高效？10个省时妙计帮你解决
如下内容由摹客团队翻译整理，仅供学习交流。摹客Mockplus是快速的原型设计工具。摹客iDoc是高效的在线协做设计平台。api
描述：本文将集中分享10个小编平常使用的UI设计技巧，省时又高效。你们能够试试。markdown
1.Sketch等比缩放工具，轻松避免设计变形失真的问题工具
平常使用Sketch设计的过程当中，为节省时间，小编曾尝试过设置整个图层组的尺寸大小。最后却悲催的发现: 设置以后，单个图层的尺寸反而变得很是奇怪，而不得不从新逐个调整。尤为是文本设计的等比缩放尤其困难。你是否也遇到过相似的问题呢？oop
不用担忧。小编通过屡次尝试，发现了一个很是实用的小技巧。简单来说，就是在调整图层组尺寸时， 使用Sketch自带的缩放工具（Scale tool）。如此，即便批量调整图层或组件尺寸，也无需返回逐个从新设置，十分高效。布局
并且，该工具操做起来也至关简单。只需选中单个图层或图层组，点击顶部导航栏的“缩放”或使用快捷键“CMD + K”， 便可快速设置其缩放百分比、宽、高等属性。post
2.Sketch对齐和自动布局工具，快速对齐和布局界面组件学习
Sketch的对齐工具，是小编最喜欢使用的Sketch功能之一。制做界面网格或列表类组件时，此类对其工具可以轻松省去不少麻烦的操做。简单选中所需对齐的多个组件，点击右上角对齐选项，便可一键按需居中、向右或向左对齐。字体
其自动布局工具也很是好用。设计界面网格时，可经过固定宽高的方式，来达到响应式布局的效果。网站
3.Sketch Symbol功能， 轻松制做不一样设计状态ui
Symbol是Sketch中一个很是实用的新功能。如上图，设计过程当中，只需更改按钮内的文本状态，无需修改整个按钮样式和填充方式。
具体操做过程也很简单。首先，制做一个须要不一样状态的按钮，而后将按钮转化成符号，调整到须要的状态。而上图的按钮设计，小编将其设置为了水平居中的布局状态，就轻松作到了图中的效果。
此外，利用该Symbol功能还可制做许多炫酷的设计效果。具体详情你们可查看Sketch的教程。
4.PS快速导出设计稿和切图
Mockplus iDoc的PS插件提供了很是实用的导出功能。设计师不只能够经过该插件批量导出PS设计稿、上传到iDoc、自动生成标注、在线协做设计、评论审核、制做原型并实时交付， 还可轻松标记切图并上传。不一样平台切图倍率也可快速设置。
设计过程当中，便可轻松选择和标记切图，无需过多等待。
5.Adobe Illustrator中快速生成最佳配色方案
UI设计过程当中，也可以使用Adobe Illustrator中的混合工具， 快速生成最佳配色方案。使用该工具，设计师们可直观的查看各种色彩混合以后的效果，无需过多猜想，尽可能消除设计中的不肯定性。尽管，其它工具也能够作到这一点，但该工具倒是最快的。
其具体操做步骤以下：
首先，利用矩形工具绘制两个不一样颜色的矩形。小编这里将一个设置为蓝色，另外一个设置为白色。
而后，选中两个矩形并打开混合工具：对象 > 扩展 >混合选项。以后，将间距设置为“平滑颜色”，并设置须要的色彩数量。
最后，再次选中两个矩形，应用设置或直接使用快捷键“Option + CMD + B，色彩混合就完成了。
6.利用省略符号占位，以维持界面布局
如图，界面设计中，可以使用省略号占位，保持界面布局
省略号是小编平常设计中，用以保持界面布局的重要技巧。而之因此会在这里分享这一技巧，主要是由于设计新手们很容易忽略这一点，而选择更改界面布局来呈现完整的界面功能。其实没必要这么麻烦。
就如上图购买确认页面的“Outback Steakho...”设计，虽然省略部分文本内容，但也足以帮助用户确认产品信息。即便用户还有疑虑，也可单击省略号，查看完整的产品名“Outback Steakhouse”加以确认。
并且，值得注意的是：省略号只用于代替用户不会当即使用，或者能够轻松推断的信息。若是是重要的信息，即便从新布局，也最好不要使用省略号。否则，界面功能，甚至用户体验都会受到影响。因此，为保证界面原有布局，省略号使用须要多方考虑， 避免给用户形成不便。
7.利用WhatFont快速识别各种字体设计
一次偶然的机会，小编在浏览网页时，发现了一款很是喜欢的字体。不一样于以往直接查看网页源代码的方式，小编直接查找并使用一款名为WhatFont的Chrome扩展工具，快速搜寻其对应名称。
今后以后，每当小编在网上看到任何喜欢的字体，都会打开该工具，快速查看其对应的字体类别和名称。而后，根据其名称进行搜索。如若免费，就直接下载，很是实用。
8.精确快速调整和缩放组件宽高和位置
现今不少工具，例如常见的Sketch、Adobe XD、Figma以及其它设计工具都提供相似的设计，容许设计师手动输入数值，精准设置界面组件宽高和位置。并实现必定比例宽高或位置的缩放调整。
例如，当界面添加一个宽度为100像素的矩形时， 设计师可简单输入“100/2”，将其宽度快速缩小为50像素。
如图，当设计中须要快速缩放组件尺寸（例如放大或缩小2倍）时，相似的输入操做就至关便利。无需手动拖拽调整，费时费力，还不够精确。
9.使用快捷键，快速调整透明度
当须要快速修改界面组件透明度时，快捷键操做能够节省大量时间。
设计过程当中，设计师只需选中某个组件，而后点击键盘上1到9的数字按钮，该部件透明度就会相应变化。 例如，须要70%的透明度，点击按钮7便可。
并且， 这样的快捷键操做适用于不少主流的设计工具。你如今使用的是哪一款工具呢？不如当即点击数字按钮试试看， 是否真的适用？
10.利用Iconjar进行图标素材存储和管理
Iconjar是一款简单实用的图标素材管理工具。支持图标轻松导入、分类组合和管理。须要图标时，无需临时在线搜索或下载，打开Iconjar， 直接搜索，便可快速查找最佳的图标进行设计。
其工做原理也十分简单。浏览网页时，发现任何喜欢的图标素材包，例以下面这些小编经常使用的图标素材包：
下载、导入并为其命名， 即完成整个素材存储过程。
须要任何图标时，打开工具，搜索素材库，而后将须要的图标直接拖拽到设计中，便可快速使用。
以上就是小编平时设计过程当中总结省时技巧，但愿能对你们有所帮助。
相关阅读：
【自古套路得人心】最全UI图表设计技巧和套路，分分钟打造最优设计
教你避雷！网页设计中常见的17个UI设计错误集锦（附赠设计技巧）
做者：Danny Sapio
学习工具，但不受限于某种工具。摹客iDoc，高效协做，从产品到开发，只要一个文档，让你的团队高效协做！