视觉设计师该怎样入门

笔者的专业是交互设计，课程框架更注重用户研究和逻辑分析，视觉设计的课程十分有限。然如今交互设计师的岗位更希望求职者同时能胜任视觉设计的工作，为了提升自己，不被社会所淘汰，笔者最近自学了 Lynda 上的 Introduction to Graphic Design 的课程，现将课程重点整理如下，希望能对大家有所裨益。

首先，什么是视觉设计

通过对文字，符号，图片的有意设计达到视觉上的和谐交流

什么构成好的视觉设计

1. Form: 审美层，好不好看，视觉上是否吸引，颜色是否和谐，字体是否搭配
2. Feeling: 是否传递了意图信息，传递的信息是否统一，是否能引起用户的情感共鸣
3. Function: 是否满足设计目的，是否易于理解，是否可使用

第三点尤其重要，过于花哨而不实用的设计，引用教程里的一句话就是

Form without function is just a piece of paper. – UNKNOW

优秀设计欣赏[尝试总结好在哪里，便于自己下次使用]

Example1

Example2

Example3

Example4

下面，三种你需要的技能

1. 排版类：将页面中的元素进行视觉上的排列
2. 字体类：字体类型，字体设置等
3. 图像类：摄影，插画，绘画，配色等

一，六个排版的基本法则

Balance: 让你画面给人一种平衡感，介绍三个方法，对称排列，非对称排列，径向对称排列。

对称排列

非对称排列

径向对称排列

Proximity：将相同的元素尽量聚集在一起，不同的元素尽量分开

Example

Alignment: 尽量让相似元素彼此对齐，让页面中的非对齐线条尽可能少

Example

Repetition: 重复元素用于将设计连为一个有节奏的整体

Example

Contrast：有意对比强化反差[大小，粗细，形状，颜色等]，突出效果

Example

White Space: 留白是一种艺术，less is more

Example

不了解这些法则之前，可能对排版只有主观上的美和丑。了解之后多留意身边的设计，你会会发现世界竟是如此多娇。

字体如何选择

教程是英文的，很多内容只适合英文字体。但核心内容主要是强调字体选择需要既区分又统一。区分是指标题和正文尽量一个采取无衬线字体，另一个采取衬线字体。

类比到中文上，一如黑体，笔画粗细接近，转弯处较圆滑，没有明显的起锋和收锋痕迹。

Paste_Image.png

再如宋体，笔画有明显粗细过度，笔锋明显。

Paste_Image.png

将二种不同类型的字体用于不同功能的文字，可让人对文字有明显的区分感，从形式上便可知其功能。

统一是指尽量不要用两种不同的字体在同一功能区域，且让所有相同功能区域的字体保持一致，不要来回变化。

如下图，标题采用非衬线 Proxima Nova Soft 字体，正文采用衬线 PT Serif 字体。同时，增大和加粗标题，整体上就会给人一种良好的视觉感。

Example

有时，将标题和正文的字体颠倒过来，能带来更好的视觉效果，多选择，多尝试，你的眼睛会告诉你哪一种方案更美。

这里推荐一个在线查看字体的网址，Typekit. 你可在右侧选择字体的大致特征，Adobe 会在左侧推荐给你相应字体，真的狂拽酷炫屌炸天。

Typekit

颜色如何选择

这需要你对颜色认知有长久的积累，最基本的暖色调和冷色调。其次要记住每一种对应什么情感（不同文化有差异），比如黄色容易让人感到快乐，紧张。蓝色容易让人感到镇定，沉稳，信任。绿色让人感到舒适，和谐，缓解紧张。粉色让人感到浪漫，兴奋，刺激。

因此，大部分政府，银行类网站会选用蓝色作为主色调，想象一下12306化身为粉色小公举的赶脚，分分钟出戏有木有。

Color Palette

选取一个主色调后，如何配色让整个页面看上去和谐呢？主要有三个规则，互补，类似，三角。这是设计们总结出来的宝贵经验，教程也没有解释为什么这么做看上去很美，可能是人天生的神奇特质吧（知道的朋友还请科普下）。

Color Rules

了解了三个基本法则后，Adobe 又送给了设计们一个神器，配色网站 Adobe Color CC.

选取主颜色后，可以在下拉菜单中选择配色方案，Adobe 会自动帮你生成对应色板，并且你还有继续自定义。保存后，可下载或同步至任何 Adobe 软件中使用，真的是业界良心。

Adobe Color CC

当你对一个主题的颜色犹豫不定时，你还可以使用它的搜索功能，比如老外想设计一个中国风的网站，他不知道该使用什么颜色。点击 Explore Tab, 搜索 China, 亮瞎他钛合金双眼的中国红分分钟出来有没有。

Chinese Style

了解了入门知识，下面便可以开始试着设计了。

实战时，你必备的三个基本设计软件

1. Adobe InDesign: 排版软件，尤其在处理段落字体排版上无出其右。
2. Adobe Photoshop：图片处理软件，没有你做不到的，只有你想不到的。
3. Adobe Illustrator：矢量图编辑软件，Logo, Icon, 插画的最爱。

第一次用 AI 画的，有没有很丑呢。

Example

这些软件个人觉的入门都不难，后期主要是耐心和不断练习，抽时间多逛逛设计网站，发现一些软件使用的技巧，逐渐积累，不断坚持，有一天相信你也会成为这一领域的大神。

先画草图，再用软件

人都有高估自己，低估他人的「自负」倾向，觉得自己付出努力的东西总比别人做的好。因此，如果当你一开始就用软件绘制高保真草稿时，你会有很大的排斥感去修改你的作品当别人给你修改意见时。所以，教程中建议大家先在纸上进行草图绘制，头脑风暴，从众多草图中汲取精华，然后讨论，修改，验证，确定终稿思路后再进入软件绘制。

草图：

草图

结合各个元素后的终稿:

终稿

这是我会绘制的草图模板，A4大小，直接打印即可，节省自己画方框的时间成本，下载地址。

Sketch Template

LAST BUT NOT LEAST

多分享，多讨论。任何大神都是从菜鸟一步一步成长起来，我们走过的坑他们之前全都走过，如果你认识有经验的设计师，多问问他们的学习经验对你会大有裨益。如果你不认识，NO PROBLEM, 在互联网的时代，任何人你都可以「网」住。推荐 Behance 社区，PO 出你的作品，收集众多小伙伴的反馈，进而改进，他人的关注和鼓励是自我努力前进的极大动力。此外，还可以关注上面的大大，私人套瓷获取设计经验，运气好还可以找到属于你的那个TA哦。

雄关漫道真如铁，而今迈步从头越，与君共勉。– 野子Joey