优秀的视觉形象设计师是怎样炼成的？
视觉设计是当今一个很人们的职业，希望成为一名合格的优秀的视觉设计师的人很多很多，但是苦于对它没有实际的操作经验，或者设计的作品一般般，灵感也很难( [ Y Z ^ 8把握，所V b o z (以今天先知中国品牌全案策划公司小编为大家整理了史上更全的视觉q ; H 4 z设计师需要掌握的技能方法，希望能够对大家有所帮助哦。
我的职责通常是产品战略和设计方向的规划，很少参与具体的设e H ! p 5 a ; O计细节，但我一直相信基础设计技能对于设计思维的影响，以下五条是我认为页面设计更基础的技能要求。没有经历任何艺术教育的设计师也可以通过对以下五项修炼的培养迅速提高基础设计能力。先知中国品\ 7 = ` w / Y C c牌全案策划
一、草绘
无论i s = W P h前端f u { @ : `技术发展成什么样，在自然交互界面没有大行其道，只要图形界面依然是交互设计的主流，网页设计的基础还是版式设计。换句话说，很多人的设/ q . ) $ s G l计感不好来源于对于版式设计的基础并不了解。
在传统的印刷物或图形设计领域，一件作品的创造过程通常经历4个基础步骤：
Sketch草绘：也叫做Thumbnail Sketch，通k S H过大量的设计F / ) + 3 = = a /草绘逐渐形成设计概念；
Layout初版：初版主要构建基础的元素以及体现元素间的主次关系；
Comp精版：在精版中一部分展示更多的细节* g X I U o A I；
Finish完成：完成更终设计。
源于传统平面设计领C y V _域的页面设计同样也应该遵循草绘、初版、精版、完成的过程。可惜的是很多页面设计师因为种种原因，并没有养成从草图开始逐步细化的职业设计习惯。事实上，我只是从2012年时开始练习草绘的，在此之前我也有上手就是PS或者代码的习惯，下面这张图是我自己练习的更张草绘图：
经过三个月的练习! ! K S，逐渐可以达到草绘场景图、信息图、& x ` S | Y 0 j )Sketchnote等水平，当场景图都能熟练表达的时候，绘制一个页面就变得非常简单了，如下面的图：
值得提的是我并没有接受过专业的美术训练\ \ O ) 9，只是很小的时候喜欢画画而已，在短时间内，只要不断进行练习，相信| 7 F I z *在更多不到6个月的时间内，就能完全掌握草绘的技能。先知中国品牌全案策划
二、使用网格
草绘是更基础的页面设计技能，而对网格（或栅格系统）的使用更是被很多设计师忽视。同样作为平面设计重要的工具之一，早在1629年，法王路易十四命令成立一个管理印刷的特别委员会，由数学家尼古拉斯·加宗（Nicolas Jaugeon）担任。委员会提出了新字体设计建议：以罗马体为基础，采用方格为设! h u计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36小格，这样，一个印刷版面就由2304个小格组成。这& _ O p是世上更早对字体和版面进行科学实验的活动。也@ y f & U ~ = }是栅格系统的雏形（下d 3 G k L _ ( :图）。
巧合的是，我2 L s一直推崇的水平网格单元正是8px，更初n P G k的想法是中文基础字符高度为12$ * – 3 } 8px，通常1.5倍行高正好是16px也就2 \ O R I K ! k是两个网格高度，在这里并没有什么科学依据，也许8这S _ w个数字比较吉利吧。
网格使用主要是两个方向，一个是水平网格，用于控制纵向节奏（Vertical Rhythm）如下图的比较：
另一个是大家更熟悉的纵向网格，也叫做GrJ [ F Y Fid System（如下图），因为960.gs等前端框架的流行，Grid System目前C D [ 5 [ 9较为普遍，大部分设计师都懂得使用纵向的栅格规划页面结构。
而真正规范的页面设计同样要考虑纵向页面栅格和纵向节奏，无论你使用Photoshop还是Sketch都可以较为方便地生成横向和纵向两个方向的辅助线，以Photv ( ( ] : *oshop CC 2014为例，使用插件GuideGuide可以快速生成自定义的页面网格系统，如下图：
当我们看细节，每个页面元素的左边缘都和纵向辅助线对齐k Y Y z * @ & $，同时观察元素高度、字体的行高、元素间的u u o y L \ ^ h空隙、段落间距，都由横向网格进行规范，保证高度都是8的整数倍，以及纵向居中，如下图：
值得提醒的一点是，使用s N a这样大规模的网格系统，一个页面做下来眼睛不残废也要半瞎，0 / g E n G 6我特别贴c 9 @ N ^ F 4 D心地告诉大家在全局设置里可以更改网格的颜色，默认的Cyan蓝基本坑人，再将画板背景颜色改成浅灰色：
更后的操C } H ( y F 8 u作界面看起来就舒服多了，多么的贴心。先知中国5 # D J D品牌全案策划
当然M 9 l P q E o，更重要的h + R d + C快捷键是cmd+H，它帮助你快速切换是否显示网格。
使用网格是一种习惯，它的基本逻辑是：美也许还需要一些天赋和感觉，但是对齐这件事，是可以通过后天努力和细心以g D Z 4 ( v f及一些工具完成的。
三、使用留白
罗伯特卡帕说：If your photographs aren’t good enough, you’re not close enough（照得不够好，靠得不够近），在页面设计的领域，这句话应该改为“设计得不够好，隔的不够开”—— 实际上m . q，设计成功的决定因素往往在空白处。留白本身的含义其实并不是t C V页面上空白的区域，而在于如何用更少的视觉元素表现足够的含义，比较下面两个表格：
这就是空白的力量，它既减少了视觉元素的使用，同时提高了信息的N ] 3 [ y g ;可读性，当我们回头看看Google更新一; V } * 7次设计改版的变化，更显着的便是空白的使用：
空白还可以赋予页面元素更多的含义，让你用简单的文字表现出从属关系，例如下面这个例子：
更个例子中留白放在正文上部，标题和URL成为一体，URL成为标题的附属元素；2 – | Q G个例子中不留白，三者成为了一体，看起来就像Google搜索结果；{ h m ~ B第三个例子留白放在了URL上面，URL变成了正文的一部分% * G。先知中国品牌全案策划
再从美学的角度，传统平面设计（下图）的经典设计\ K . J G G 6 [原则亦是如此——视觉元素的功能是“辅* Y P R | # n助”内容本身，切勿喧宾夺主。$ a / *回过头来看拟物化和扁平化风格的争执，我对此的观点是，至少在Web端，y + Y V 8 0 r一定会向平面设计（Print）风格倾向，意味着阅读性内容的设计中一定会减少阴影、渐变、图标、浮动的使用，而更q J 2 ! W y g –重视字体的使用、更丰富的排版方式、高质量图片、以及大量的留白。
总而言之，学会使用留白，不但是提升信? b 7 B ; D L i Y息传达效率、还是符合美学趋势的重要技能。
四、使用字体
字体才是内容与用户的交互界面，学会处理字体也是网页设计的基础技能之一。在使用字体的时候，有如下几点需要加强练习：
字体的选择
字体重量的组合
字符间距
行高
当然这里讨论的是丰富程度] n t P / P远超中文网页字体（Web Font）的西文字体，在字体的选$ 8 ^ ^ . 5 3择时，有以下两个原则：
多种字体重量（Weight）的优先；
有Condensed的字体优先；
基于这个选择原则，四套更受欢迎的英文网页字体分别是Helvetica Neue、Roboto、Avenirk g a p [以及OpeT u S , :n Sans。
字体重量和样式丰富的字体集在页面设计时有更大的选择空间和丰富的组合方式。不同重量和风格的字体通常有不同的含义，例如以更简单的Y T p 7 9斜体（Italic）为例/ R { ! 9 y {，它的使用含义可表达在正文中的“强调”，例如强调某个词、某个专门定义、特定名称；也可以表达引言；而i , [粗体大写通常是表达强烈的标题性文字。
不同字体的组合可以体现更加舒适的阅读体验，在下面的例子4 N y { e 7 t = `里，我只使用了一种字重的：
当我们学会不同字重的组合时，阅读体验将会变得更加好，用户从字重中就可以识别文字的含义。
这里有一个小技巧，大标题通常使用超粗字重，超粗字重适当缩小字母间距? 4 7 k ^效果会更加紧凑，在CSS中定义letter-spacing一定量的负值，例如下面的对比：
五、使用颜色
颜色通常是一个初级设计师比较头疼的事情，我们对于色彩的敏感往往不能够很好地对色彩进行搭配，但通过一定s Q + ` @ !的练习也可以达到好的效果，这里我的练习方法是填色练习。
首先，下载一个UI模板的PSD文件，下面是一个完全没有颜色的PSD：
找一张你喜欢的图片用蒙板的方式放在框体上面，变成下面的样子：
从图片上吸附两种主色，一k ) i A s $冷一热，进行填充，就变成了下面的样子：
反复重复锻炼，可以形成下面多个色彩w e . @ & r搭配的，用这样的T h q E H i i w方式可以帮助你培养你对色彩的配搭感觉。
只要我们不那么贪心（使用多于两种的颜色），从艺术作品中借鉴某些6 L | $ q M { q颜色的配搭，选取冷热两种主色，再加上不同灰度的黑色作为辅色，或者冷热主色的不同透明度的色阶，一个简单的网页界面色彩的管理是足够胜任的j ( B x ?，如d # p下面这个界面的设计：
写在更后
我并不像很多设计师是从工业设计开始设计生涯的，也并没有接触过专业的美术基础教育，在我的工作里也并不需要我进行细节的视觉设计，但是我相信，4 p @ W ^ q (基础视觉设计技能是谈论设计的基础。同时我也看到，很多视觉设计师并没有养成“干净”~ h o N | x b O O的设计习惯，对于留白、字体、栅格的使用都非常随意( M w } 3 r R C /，我相信本篇的内容对他们也会有些帮助。
因此，一个非专业视& = p )觉设计师视觉方面的修炼，就是以下五步：
练习草绘；a @ \ ! : [ s d
严格使用网格（对TM齐）；
练习留白；
练习字体组合表达内容；
练习色彩搭配。
看了这篇文章，您有信心成为一个优秀的视觉设计师了吗，想必你现在因为看了这篇文章而欣喜若狂了吧，不要太感谢我哦，如果可以的话，您尽可能的转载到你的QQ、朋友圈和泡过的论坛，帮助更多的跟你有同样理想的朋友，做好事从来不留名的哦，所以您是不要指望我告诉你我是先知品牌全案策划公3 $ O司的啦。嘿嘿！
