主页 > APP设计 > 转行 UI 设计前,需要学习哪些底层知识?

转行 UI 设计前,需要学习哪些底层知识?

一些转行UI的新手设计师跟我聊天时谈到自己的迷茫和瓶颈,深入挖掘会发现,这种无力感和大学课程的缺失有很大关系,而培训机构也不会覆盖这些内容,只能靠自己弥补、领悟和沉淀。所以今天谈谈这些底层知识之所以重要的原因,并解析工作中需要的应用知识如何和这些底层知识建立对应关系。

转行 UI 设计前,需要学习哪些底层知识?

素描、色彩

不用多说,这是设计专业课程里,基础中的基础。从这里开始,系统的学习构图,把握形体结构,感知光影变换带来的色彩微妙变化,理解物体与物体的主次、虚实关系,学习如何表现空间中的气氛和意境。

转行 UI 设计前,需要学习哪些底层知识?

△ 左图:静物素描草稿;右图:静物水粉画

觉得自己拍照水平不佳的朋友,可以学学画画了!掌握了最基本的规律之后,你就是朋友圈摄影大赛里最靓的仔!

这个底层知识对应到工作中就是用软件画图了。画图软件替代了笔和纸,提升了创作者的效率。但如果不了解「三大面」、「五大调子」,那么哪怕画一个小小的图标,在表现立体感和空间感上都会觉得别扭,也就是那种觉得哪里不和谐,但是又找不出来的感觉。

平面构成、立体构成、色彩构成

三大构成基本上是所有设计专业的基础艺术训练。跟素描、色彩不同的是,三大构成训练的是抽象构成能力,即利用最基本构成元素(例如平构中的点、线、面)表现形式感和艺术感,感知领悟形式美法则。

转行 UI 设计前,需要学习哪些底层知识?

△ 左图:平面构成中的图形解构;右图:毕加索作品,利用了解构和重构的技巧

转行 UI 设计前,需要学习哪些底层知识?

△ 左图:色彩构成中的色相对比;右图:荷兰「风格派」画家,蒙德里安作品

转行 UI 设计前,需要学习哪些底层知识?

△ 左图:立体构成中的面立体构成;右图:日本服装设计师三宅一生设计的手袋

有不少转行来的新晋设计师会问,该如何提升审美?我的建议是,这三大构成的学习内容一定要前置,用来理解、解构、重构所有的形式美。举个例子,平构里关于形态间的大小、比例、平衡、对比、节奏、律动等等关系,不管是视觉传达、UI界面、工业产品、室内装修和建筑的专业设计领域,还是绘画、拍照摄影和日常穿搭,简直无孔不入。所以,一定要让这三门课程的内容在脑袋里溶解吸收!

 

 

三大构成的规律如何应用到日常设计中,下面举两个网页设计的案例。

转行 UI 设计前,需要学习哪些底层知识?

图片来自Dribbble作者Søborg by Fredericia。色彩构成上使用了同色相的色彩调和。形状采用背景的圆形和前景的梯形进行对比(漂浮和下沉)。材质上通过抽象的纯色填充和木质质感包括投影,形成轻和重的对比。

转行 UI 设计前,需要学习哪些底层知识?

图片来自Dribbble作者Bitcoin。背景图案使用立体构成的元素,并在色相上形成对比。加粗的文字和左侧菜单文字粗细不同,一个呈块状,一个呈线条状,形成鲜明对比。

人机工程学、设计心理学

百度百科在「人机工程学」这个词条下面有这样一句描述:

「以心理为圆心,生理为半径,用以建立人与物(产品)之间和谐关系的方式,最大限度地挖掘人的潜能,综合平衡地使用人的机能,保护人体健康,从而提高生产率。」

所谓「交互」,就是人机交互,它可以应用的范围非常广,不仅仅是UX设计中的概念,可以在人的视觉、听觉、触觉、嗅觉、味觉和下意识,进行多通道的交互。

转行 UI 设计前,需要学习哪些底层知识?

△ Wilson等人将人机工程学的研究分为8个领域,图片来自《人机工程学基础与应用》(夏敏燕)

转行 UI 设计前,需要学习哪些底层知识?

△ 《Humanscale》产品尺寸建议图,图片来自《人机工程学基础与应用》(夏敏燕)

转行 UI 设计前,需要学习哪些底层知识?

△ 铅垂面内色觉视野与水平面内色觉视野,图片来自《人机工程学基础与应用》(夏敏燕)

转行 UI 设计前,需要学习哪些底层知识?

△ Rasmussen于1983年提出了技巧—规则—知识的认知控制模型,该模型认为人的信息输出形式应用了三个层次的认知控制行为,图片来自《人机工程学基础与应用》(夏敏燕)

转行 UI 设计前,需要学习哪些底层知识?

△ 唐纳德·A.诺曼将情感化设计分为三个层面,即本能层、行为层和反思层,图片来自《人机工程学基础与应用》(夏敏燕)

泛泛地说,所有「人」使用的产品,都需要将人的生理心理需求,生理心理极限考虑进去,这是原则。如果用户说「不好用、不舒服」,那设计者应该检讨是否忽略了用户的生理心理感受。

我们在设计界面的时候,针对不同尺寸的智能设备,用户握持姿势、方向和使用距离存在巨大差异,这就是为什么需要分别出设计方案,而不是一个方案的简单缩放。

转行 UI 设计前,需要学习哪些底层知识?

△ 单手操作手机时,操作区域友好度划分。图片来自《触类旁通——多终端时代的触屏界面设计》

转行 UI 设计前,需要学习哪些底层知识?

△ 双手手持平板时,操作区域友好度划分。图片来自《触类旁通——多终端时代的触屏界面设计》

设计史、设计哲学

关于设计史,我大学的课程是工业设计史。可能因为大学老师讲课生动,再有教材内容优美文笔的加持,大家都感觉非常有趣。了解设计师,会发现设计不只是设计师个人层面灵感和才华的表达,也受到经济、技术、社会的大环境综合影响,所以诞生了层出不穷的设计风格和经典作品。

转行 UI 设计前,需要学习哪些底层知识?

△ 美国国会大厦,新古典风格的建筑

转行 UI 设计前,需要学习哪些底层知识?

△ 费迪南德·波尔舍站在他设计的甲壳虫汽车前(1937)

转行 UI 设计前,需要学习哪些底层知识?

△ 左图:波普艺术家安迪·沃霍尔创作的《玛丽莲·梦露》(1967);右图:波普艺术家罗伊·利希滕斯坦创作的《也许(一个女孩像)》(1965)

了解设计史之后,结合设计哲学,有助于形成自己的价值观。有过几年设计经验的设计师,如果还没有形成自己的设计价值观,恐怕是个危险的信号。这可能说明你的知识面或眼界狭窄,也可能说明设计过程中缺乏思考——日常设计工作就是浮于表面,没有去深入去探索过问题的本质,对「问题-设计方案」之间的矛盾,选择性的视而不见。

转行 UI 设计前,需要学习哪些底层知识?

△ 左图:日本中生代国际级平面设计大师——原研哉;右图:日本著名产品设计师——深泽直人

我个人很喜欢上面两位设计师。原研哉的《设计中的设计》对我启发很深,是我建立设计价值观的第一块基石,推荐大家阅读。

 

 

而深泽直人则是工业设计学生的集体偶像了,他的作品探索了「人」与「环境」之间的哲学关系,并具悠悠禅意,仿佛有穿透五感触达灵魂的魔法,让人宁静。

结语

这些大学就已经接触过的知识,实在太重要,也太广阔,大学也只能个皮毛,等真正为工作所用时还是会感觉学得不够深、不够透彻。所以直到现在我都会时不时翻翻资料「回炉再造」,寻找指导和灵感。希望今天的内容能给大家的迷茫带来一点方向,笔芯~