新手教程!Lynda的读书笔记之视觉设计师该怎样入门?

2016/04/03 9771

visual-designer-getting-started

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

首先,什么是视觉设计

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

什么构成好的视觉设计

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

第三点尤其重要,过于花哨而不实用的设计,引用教程里的一句话就是 > Form without function is just a piece of paper. – UNKNOW

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

Example1

Example3

Example4

Example2

下面,三种你需要的技能:

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

一,六个排版的基本法则

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

对称排列

非对称排列

径向对称排列

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

Example

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

Example

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

Example

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

Example

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

Example

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

编者注:分享一些适合新手的排版教程

  1. 《排版宝典!20个设计新手常犯的排版设计误区》
  2. 《关起门来涨姿势!如何从AV封面中学习平面设计?》
  3. 《关起门来涨姿势!如何从AV封面中学习平面设计?(二)》

字体如何选择

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

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

Paste_Image.png

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

Paste_Image.png

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

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

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

sj20160403

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

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

Typekit

编者注:字体教程推荐

  1. 《字体的性格!未成曲调先有情
  2. 《腾讯设计师的私人笔记!帮你全方位掌握英文字体基础》

颜色如何选择

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

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

Color Palette

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

Color Rules

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

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

Adobe Color CC

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

Chinese Style

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

编者注:配色教程推荐

  1. 《色彩搭配速成!3个实用方法帮你全面搞定配色》
  2. 《帮你从零开始全面掌握UI设计的配色方法》

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

  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哦。

作者目前在美国读设计专业,欢迎同学们加他微信交流:

yzqr160403

【优设人气PS人像教程合集】

广告最爱的牛奶泼溅效果人像!
《PS新手教程!手把手教你打造广告级的牛奶喷溅美女人像效果》

超酷炫的文字人像效果!
《PS教程!手把手教你绘制酷炫的文字人像效果》

手绘人像效果!
《PS人气教程!手把手教你将照片做成手绘作品(附方法大全)》

原文地址:joeyqiang.me

yestone-uisdc-1

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量112万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/visual-designer-getting-started

sketch UI 界面设计 平面设计 转场动效 交互设计师 设计师 设计师专访 扁平化设计 排版布局 职场 设计流程 用户体验设计 视觉设计 素材下载 配色 web前端开发 海报设计 AI教程 设计规范 设计理论 字体下载 产品设计 设计趋势 神器下载 动效设计 psd下载 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 用户体验 优秀网页设计 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里