办公环境设计手绘图标技巧(还为自己的设计工作效率低而发愁？学会手绘让你事半功倍)

成果预览：

想要快速提高手绘稿逼格需要注意以下几点，首先，需要学会手绘的工具使用，其次是手绘的方法。

（一）手绘工具的使用：

1. 自动铅笔，主要牌子的使用有红环、三菱、无印良品，适合UI手绘。

这样的铅笔前重后轻，减少对手腕的压力，不会让手腕感觉到累。笔芯硬度适中，不轻易断。

2. 网点本，上面的点都是等边等距的，对于手绘能起到尺子的作用，可以让我们不要把线画歪。

3.交互尺，有着手机的外形，上面的图形都是交互稿的基础图形，交互尺很薄，也很锋利，使用须小心。

（二）手绘的方法：

1. 学会用尺子，借助尺子画辅助线，不会让我们把线画歪

2. 该重就重，该涂就涂，不要吝啬铅笔铅，要脱出视觉感。

3. 注意画影子或环境。

在画影子和周围环境时，可以使用棉签，在手绘稿周围轻轻的涂一涂，就可以制造出很好的渲染气氛。

4. 学会画线条，练出手感。没有经过训练的线条会显得杂乱无章，练好线条，反而提高了设计感，还能培养画画的手感。将线条练到整齐度高时便可不用继续训练。如图所示

综上所述，提高一个手绘稿我们需要借助工具，还需要勤加练习，还要用对方法。

接下来，我们做一个图标从有到无的过程：

1. 收到一个需求或是指令，比如说：请设计一个视频播放软件的图标。

2. 提取关键字，一个是视频，一个是播放。

3. 无限联想

说到视频会联想到新闻联播

之后我们可以通过视频可以想到摄像机

通过摄像机还可以想到胶片

播放用三角形元素

4. 逆向思维

胶片——视频

5.想法关联：

＋

举例说明：

运用20秒画出了一个简易稿，之后需要运用20分钟在基础上画出一份手绘稿，再用ps将其完善。那么，这样的一个稿子该怎么做？首先，我们需要在网格本上画出四条辅助线变成正方形，但是虽然联想到了胶片，但是并没有一个雏形。又想要打破传统的图标，所以在正方形的两边再次画了两条辅助线，变成长方形，然后将四个角变成圆角。同时需要明白圆角的画法，圆角的两个点画上叉，表明起点和终点。或者可以将其用三条直线画出圆角，或者可以借助交互尺的一个图形，上面有一个正方形的角很像圆角，我们可以借此画出圆角。当然，我们也会担忧圆角的角度是否是我们想要的，圆角会不会不够精准，其实不用担心，圆角的精准度是需要在ps里面完成的，手绘稿只是给人展现想法。圆角画完之后，图形的雏形便完成了，之后我们需要将其辅助线去除，也可不去。但是图形的雏形并没有胶片的特征，胶片的特征是有镂空的小孔，所以我们需要规定出镂空孔竖向的范围，而我们要画出四条线，之后用尺子画出镂空小孔横向的距离。之后镂空孔的圆角只需要结合之前圆角的画法套进去便可以了。继而我们需要结合播放的元素，也就是三角形的图标。我们可以运用三条线将其结合成三角形的图标，确定好位置，将三角形也结合圆角。而后为了打破传统造型，再次在画了一条辅助线，取得是底边终点的位置，然后画了一条斜线，取得是底边中点的位置。下一步，去除多余的线，将两条辅助线结合圆角，这个图形的雏形便完成了。但是这幅图我们还需要继续深入，结合视觉稿，可以选择拟物风格和扁平风格。想到拟物风格之时，便想将这个加上一点厚度。同时我们要保证画面的整洁度。所以在底边和镂空的图标上加了一点厚度，之后，我们需要加上些许线条，突出底部的厚度，还有在镂空的图标上加上些微线条，为了凸显厚度，我们还可以加重底部的线条，借此突出视觉感。为了调和画面感，在镂空的小孔上加上斜线，借此突出镂空感。雏形结束后，我们需要加上周围，运用交叉线借此突出周围的环境，交叉线需要随着形体排线。如果感觉并不能突出视觉感，我们可以用棉签来完善一下周围的环境带给我们的视觉感，将交叉线周围变得模糊，之后可以继续用交叉线继续排线以此完善，这样的黑白对比会让我们的视觉中心聚焦在中间的图形上。这样的一个图标便形成了，这样也能增加设计稿的过关率。因为这样的图片远比文字更有说服力，比如说淘宝上的卖家，一件衣服，并没有图案，只有文字，怎么会让你有想买的欲望？所以在图片面前，所有的文字和语言将变得苍白无力。

交互稿的形成也是一样的。你的上司将会给你一个需求，上面是一些文字描述，然后形成一个交互稿。可以简单的设置一个模板，然后继续加工成一个完整的模板，将上面的文字在上面排列。一个简单的交互稿便形成了。

而我们在一个优秀的app团队中，有四种职位，产品经理，程序员，设计师，还有后续的测试人员，缺一不可。