首先,什么是视觉设计
通过对文字,符号,图片的有意设计达到视觉上的和谐交流
什么构成好的视觉设计
- Form: 审美层,好不好看,视觉上是否吸引,颜色是否和谐,字体是否搭配
- Feeling: 是否传递了意图信息,传递的信息是否统一,是否能引起用户的情感共鸣
- Function: 是否满足设计目的,是否易于理解,是否可使用
第三点尤其重要,过于花哨而不实用的设计,引用教程里的一句话就是
Form without function is just a piece of paper. – UNKNOW
优秀设计欣赏[尝试总结好在哪里,便于自己下次使用]
Example1 Example2 Example3 Example4下面,三种你需要的技能
- 排版类:将页面中的元素进行视觉上的排列
- 字体类:字体类型,字体设置等
- 图像类:摄影,插画,绘画,配色等
一,六个排版的基本法则
Balance: 让你画面给人一种平衡感,介绍三个方法,对称排列,非对称排列,径向对称排列。
对称排列 非对称排列 径向对称排列Proximity:将相同的元素尽量聚集在一起,不同的元素尽量分开
ExampleAlignment: 尽量让相似元素彼此对齐,让页面中的非对齐线条尽可能少
ExampleRepetition: 重复元素用于将设计连为一个有节奏的整体
ExampleContrast:有意对比强化反差[大小,粗细,形状,颜色等],突出效果
ExampleWhite Space: 留白是一种艺术,less is more
Example不了解这些法则之前,可能对排版只有主观上的美和丑。了解之后多留意身边的设计,你会会发现世界竟是如此多娇。
字体如何选择
教程是英文的,很多内容只适合英文字体。但核心内容主要是强调字体选择需要既区分又统一。区分是指标题和正文尽量一个采取无衬线字体,另一个采取衬线字体。
类比到中文上,一如黑体,笔画粗细接近,转弯处较圆滑,没有明显的起锋和收锋痕迹。
Paste_Image.png再如宋体,笔画有明显粗细过度,笔锋明显。
Paste_Image.png将二种不同类型的字体用于不同功能的文字,可让人对文字有明显的区分感,从形式上便可知其功能。
统一是指尽量不要用两种不同的字体在同一功能区域,且让所有相同功能区域的字体保持一致,不要来回变化。
如下图,标题采用非衬线 Proxima Nova Soft 字体,正文采用衬线 PT Serif 字体。同时,增大和加粗标题,整体上就会给人一种良好的视觉感。
Example有时,将标题和正文的字体颠倒过来,能带来更好的视觉效果,多选择,多尝试,你的眼睛会告诉你哪一种方案更美。
Typekit颜色如何选择
这需要你对颜色认知有长久的积累,最基本的暖色调和冷色调。其次要记住每一种对应什么情感(不同文化有差异),比如黄色容易让人感到快乐,紧张。蓝色容易让人感到镇定,沉稳,信任。绿色让人感到舒适,和谐,缓解紧张。粉色让人感到浪漫,兴奋,刺激。
因此,大部分政府,银行类网站会选用蓝色作为主色调,想象一下12306化身为粉色小公举的赶脚,分分钟出戏有木有。
Color Palette选取一个主色调后,如何配色让整个页面看上去和谐呢?主要有三个规则,互补,类似,三角。这是设计们总结出来的宝贵经验,教程也没有解释为什么这么做看上去很美,可能是人天生的神奇特质吧(知道的朋友还请科普下)。
Color Rules选取主颜色后,可以在下拉菜单中选择配色方案,Adobe 会自动帮你生成对应色板,并且你还有继续自定义。保存后,可下载或同步至任何 Adobe 软件中使用,真的是业界良心。
Adobe Color CC当你对一个主题的颜色犹豫不定时,你还可以使用它的搜索功能,比如老外想设计一个中国风的网站,他不知道该使用什么颜色。点击 Explore Tab, 搜索 China, 亮瞎他钛合金双眼的中国红分分钟出来有没有。
Chinese Style了解了入门知识,下面便可以开始试着设计了。
实战时,你必备的三个基本设计软件
- : 排版软件,尤其在处理段落字体排版上无出其右。
- :图片处理软件,没有你做不到的,只有你想不到的。
- :矢量图编辑软件,Logo, Icon, 插画的最爱。
第一次用 AI 画的,有没有很丑呢。
Example这些软件个人觉的入门都不难,后期主要是耐心和不断练习,抽时间多逛逛设计网站,发现一些软件使用的技巧,逐渐积累,不断坚持,有一天相信你也会成为这一领域的大神。
先画草图,再用软件
人都有高估自己,低估他人的「自负」倾向,觉得自己付出努力的东西总比别人做的好。因此,如果当你一开始就用软件绘制高保真草稿时,你会有很大的排斥感去修改你的作品当别人给你修改意见时。所以,教程中建议大家先在纸上进行草图绘制,头脑风暴,从众多草图中汲取精华,然后讨论,修改,验证,确定终稿思路后再进入软件绘制。
草图:
草图结合各个元素后的终稿:
终稿 Sketch TemplateLAST BUT NOT LEAST
雄关漫道真如铁,而今迈步从头越,与君共勉。– 野子Joey