几年前写过一个长篇的零基础学 UI 回答《超实用新手指南!零基础如何自学UI设计?》,这么长时间过去了,陆陆续续接触了不少新人,包括我自己课程里的学生,想法已经发生了比较大的改变。那一个体系更适合的是毅力高时间充足心态良好的同学使用(说白了几乎就适用于大一、大二学生)。
一般人,终究是想要见效快,学习效果回馈周期短的形式来执行。新人直接乱学手绘是没用的,乱看书并真把看书当成学习,也是没用的!所以针对这个需求,我给出了新的答案,具体见下文。
成为一名 UI设计师,首先得明白,日常工作需要应用什么样的技能解决问题。但对于不同的企业,不同的职业阶段,我们要处理的问题是不同的,且差异极大。
这当中涵盖了非常广的技能类型,从印刷广告到3D建模、动画特效应有尽有,尤其是在小公司中,需要身兼多职,例如小外包公司,可能设计师除了出图还得和客户接触做项目经理, 或者做网页的时候得自己写前端代码的部分!这是任何一种职业都没办法避免的,公司越小层次越低,就越不可能在工作内容中保持单一性。
当然,也因为这些公司的工作环境不理想,干的活杂,和想象的有出入,所以当这些设计师们在发表意见时往往都是大吐苦水,例举在工作中需要的其它技能,每日疲于奔命。久而久之,就有人把这些相关的技能进行汇总,做成复杂的思维导图,类似下面这种。
里面的每一项技能都有用吗?肯定是有的,甚至可以单独针对每一项技能写一篇长文进行分析,列举各种数据来告诉你们它的重要性。但是,我们不可能在初期阶段全部囫囵吞枣的学完,很多技能你也没办法评估什么才是「学完」,要学到什么「程度」。这是对新人和初级设计师阶段最大的陷阱,热衷于收罗职业可能涉及到的方方面面,然后毫无规划地乱学。
例如,设计心理学,网上对它的解释整体都很肤浅,不是看了诺曼的《设计心理学》系列,就是学会设计相关心理学知识了。真正与设计相关的心理学要从生理层面开始认知,诸如视网膜是如何成像,视觉皮层如何进行工作的机制,到意识对图形的反应和关联的行为。没有系统性的解构相关知识,就无法顺利的将它们应用到真实项目。
尤其是新人,想要比较快的入行,时间如果全花在这些无法直接应用进项目,或是短期内不容易产生效果的技能学习上,那么你入行的时间会大大加长,而且进步的速度会极其缓慢。
新人应该先了解的,是初级设计师最普遍的工作产出和要求是什么,再制定出核心的技能学习范畴。而诸如设计心理学也好,插画手绘技能也罢,都是在你已经能达到满足核心技能条件,可以找到工作以后,再根据实际情况拓展的。
下面,我会从行业最普遍的工作产出内容出发,到需要的水准,以及如何进行学习,来讲解初级设计师最应该先学好哪些技能,让你们少走一些弯路。
一、普遍的工作产出
首先,UI设计师最主要的产出包含下面的几类,APP 相关设计,产品主页设计,管理界面和广告图(在界面广告位的),占了工作中的绝大部分比例。
然后是 UI设计师在工作中可能要遇到的设计类型,比如 H5,LOGO 和 VI,线下物料,PPT,商品精修等等。
主要的工作产出类型,是判断初级设计师能力最核心的指标,决定我们的应聘和工作绩效。当然,你们可能会说很多公司,写的岗位是 UI 但完全在做平面或其它工作, 那些属于特殊的情况是不能代表整体的。即使是招聘者,看见简历中属于 UI 主要产出的表现超过预期,那么其它次要技能的要求是可以降低的,通常这些东西能做好,那么其它类型的东西应该学学做一下也差不到哪里去,这才是招聘者真实的想法。
在真实招聘经历中,招聘方对于程序、手绘、平面的要求如果排在 UI 前面,以那些技能来衡量你的价值,恕我直言,这个职位只是在招聘一个懂点 UI 的前端(或插画师、平面设计师),企业从一开始招人的需求可能就没有想清楚,或者根本没分清楚 UI 和其它工种的区别,不要被这些状况扰乱了情绪。
实际情况,市面上大多数初级的 UI 设计师,在主要产出的几种设计类型中,都没有什么有用的建树,水准堪忧,所以在这几个领域要做到比他们更好超出平均水平,还是相当容易的。类似下面这些案例,能做出这种设计的设计师,就是准备被新人取代和喊行业不行了的那种。
顺便提一点,想要设计全面发展最好的方式,是在有一、两项技能提升到登堂入室,旁人无法轻易替代时,再进行拓展。不仅学起来更轻松,还可以借助其它方向上的知识点和思维方式带动自己最擅长领域的进步,而不是同时开工。这也是为什么,优秀的团队和设计师在处理第一次面对的某些设计类型时,远胜该类型拥有数年经验的平庸设计师。
大部分人,甚至是成年人,从来没有在任何领域中达到足够的技能水平,这使得他们无法像杰出人物那样感受到心理表征的真正力量,来规划、执行和评估他们的表现。因此,他们从来没有真正理解达到这种水平需要做些什么,不仅仅是花时间,还需要进行高质量的练习。一旦他们懂得了在某个领域中要达到那种足够高的技能水平必须要做些什么,那么他们至少从原则上理解了在其他领域追求卓越也需要做些什么。——安德斯·艾利克森
所以下面我们再好好研究一下,主要产出中,要设计哪些具体的内容。
二、具体的产出
1. 手机APP UI
APP界面
定义:根据产品需求,在界面中设计和排版对应的交互、视觉元素。
要求:能满足平面四要素的正确性;知道如何应用标准的系统 Kits;能合理定义字体和元素尺寸;熟悉并能设计主流的组件类型。
软件:Sketch、XD
界面图标
定义:包含 APP 启动图标,以及应用内的一般工具图标。
要求:对图标的基础规范有所了解,了解主流的图标类型及使用场景,在绘制整套图标时可以保持基本的风格一致,形式简约美观。
软件: Sketch、Ai、PS
可交互原型
定义:用来展示可以点击并跳转的交互原型文件。
要求:能清晰表达页面跳转逻辑即可。
软件:Sketch、XD、蓝湖、墨刀
基础动效(权重较低)
定义:可以表达触发界面交互效果时的动画。
要求:了解可以实现的动画范围,并能明白如何具体编写表达动画的文档。
软件:AE、Flinto、Principle
标注切图
定义:将设计稿的内容进行标注,和将开发过程中需要的图形进行导出。
要求:了解对设计还原中开发人员需要知道的参数,了解不同图片格式的作用与区别,并能对应导出符合规范的切图。
软件:蓝湖、Sketch、XD、Markman
设计规范
定义:设计到开发中要遵守的相关规范文档。
要求:针对最主要色彩、元素使用的规范,简洁明了,容易被执行。
软件:任意设计软件或 Office
2. PC 网页界面
网页界面
定义:主要是公司官网或产品介绍页,将需求中的内容合理置入画布并进行排版和设计。
要求:了解基本的网页画布设置和规范,网页的主流结构和交互方式,能设计出简约美观,表意清晰的设计。
软件:XD、Sketch、PS
管理界面(除特定行业权重较低)
定义:根据业务需要,设计在网页端操作的管理系统,用来管理财务、库存、客户信息等的工具。
要求:能了解基本的管理界面组件功能和交互规则,网页拉伸适配方式,和文字、色彩应用。
软件:XD、Sketch
?标注切图
定义:对设计稿的说明和导出开发用的图片