
希望以下这些学习资源,可以让你很好的入门,以后就不用到处去找UI设计教程了。
通过这些教程的学习,至少能够让你达到初级UI设计师的水准。以下学习资源,非常适合预算较少、但想要系统自学UI设计、获得高质量学习体验的同学。
在准备学习之前, @酷coo豆 个人觉得还是有必要了解以下知识。至于UI设计到底有没前途?能否拿到高薪,这些都是个人因素占主导,我就不在此做过多介绍了。
首先,我个人也是十分赞同自学UI设计的,但题主可能比较迷茫的是:学习UI设计到底该学些什么?简单来说:UI设计的知识体系中包括:软件技法、交互设计、设计规范、图标设计、界面设计、动效设计几个部分。
软件技法,也就是绘制界面或图形设计的能力。常用到的工具有PS、Sketch、XD、AE、Principle等,但你并不需要把所有软件都学得滚瓜烂熟,因为在一个完整的APP或Web项目开发中,你只会用到软件的部分功能。
做界面通常会用到PS、sketch,做动效可用Principle、AE,做交互原型可用sketch、或XD。建议先把PS软件学精通后,其他软件也就是触类旁通的事了。所以有了一个思维上的高度,你就不会觉得要学的软件太多而打退堂鼓。
交互设计确定了用户与界面的交互逻辑,以及沟通方式。通常包括了界面中的图像、文字、icon、按钮的布局,以及以及页面间的来回跳转逻辑。
产品经理把交互稿(线框图》画好后,作为UI设计师的你,得根据交互稿(线框图)及不同平台设计规范,去确定页面的视觉风格,以及视觉元素的具体尺寸、按钮宽高,绘制界面中的矢量图标,选好标准字、标准色,确定字体、字号、颜色、行距等具体的事宜。
图标就是图标咯,英文叫icon。图标的应用场景包括:APP的启动图标、App Store的展示图标,APP页面内的功能性图标、装饰图标等。图标的风格可以说有千万种,是很能反应一个APP产品的调性的,所以图标设计,也一直是UI设计师最热衷的点。
按照UI设计规范的一致性,将错综复杂的线框图,完善并优化为一幅幅高保真的视觉设计稿,确保观感舒适,逻辑层次清晰。UI设计师的大部分时间都耗费于此。
把静态的界面,按一定的规则、逻辑通过相关软件动态的展示出来,让其他接口人员更直观理解UI设计师的成果和理念。
说完了UI设计的知识体系,接下来就该系统学习设计相关的基础知识了。UI设计在某种角度而言,算是平面设计的一个分支,其目的都是为了信息的传达及交流。在具体的视觉设计执行过程中,其就是处理图像、文字、色彩、这些视觉元素以及排版构成。
如果你未有系统学习过平面设计,你可过一遍以下的设计通识理论,以此完善你的理论知识体系。
字体排印,存在于我们阅读的书籍、网站,以及日常生活之中。掌握以下字体排印需要注意的细节,你便能制作出更好的平面设计。
初学平面设计,总觉得色彩搭配晦涩难懂。不过值得庆幸的是,早有专家学者归纳出了如下的色彩理论,能够帮助你更好的认识理解色彩。
设计没有好的排版,信息传达就会受阻,不但影响阅读效率,甚至导致页面凌乱不堪。通过学习本文所讲解到的“5个排版构图基本原则”,很快你就能达到专业设计师的水准。
在信息传播中,图像是最能吸引受众的王牌。从气势磅礴的电影海报到抽象极简的UI图标,正因为有了图像或图形的加入,画面也由此变得生动了起来。
无数令人惊叹的设计作品,都离不开线条、图形、形态、肌理这些最为基础的视觉元素。接下来,我们就从0开始,学习其中的门道。
这一阶段的目的,是掌握UI设计的常用软件,主要以学习Photoshop为主,熟悉其软件操作界面,用作UI界面设计绘制。然后AE软件是用作动效的,也需要你适当了解。如果你有Mac电脑,往后可以再学习一下sketch这款软件。
PS软件基础:photoshop CS6零基础入门教程 (必学,用于界面设计)
Sketch软件基础:Sketch中文用户手册(目前只有Mac版本,Win用户学PS就行了)
AE软件基础:AE零基础中文入门教程(必学,用于UI动效设计)
以上几个教程非常细致,能够帮你一扫软件知识盲点。
这一阶段的目的,是掌握UI相关的设计规范,树立UI设计的思维方式。同时再辅以大量的UI设计临摹练习,在巩固软件技法的同时,加深对UI设计理解,思考UI设计的本质。
掌握UI设计的核心思维方式,学习为什么要这样设计,以及怎么开始UI设计的的背后逻辑,及其指导思想。
书籍:《设计之下》(掌握UI设计流程,以及设计规范)
书籍:《界面设计模式(第2版)》、《交互设计沉思录》
深入学习归纳物体材质、光影、透视结构;并用PS软件绘制表现的技法。
UI图标设计:《精品ui图标制作教程》
UI设计的核心知识一是交互,二是视觉,所以这一部分的知识非常重要!
UI交互:《sketch交互设计入门到精通教程》
把静态的界面,按一定的规则、逻辑通过相关软件动态的展示出来,让其他接口人员更直观理解UI设计师的成果和理念。
UI动效设计:《UI动效设计教程-AE软件》
此阶段,你可以参考或CollectionUI,或UI中国,里面有一些优秀的作品及经验分享,从中临摹以提升你的软件技法,或从中学习别人产品开发流程、以及UI输出经验。
优秀的设计,源于设计师个人对生活的体验,以及对美好事物的向往。这一阶段可以通过多看优秀的设计作品,更多的丰富设计理论知识。保持着长期学习,与时俱进的状态。
Dribble:Show and tell for designers
Behance:Behance
站酷:打开站酷,发现更好的设计!
书籍:视觉设计书籍推荐(丰富更多的设计理论知识)
以上几个分享的教程和书籍,完全足够你掌握UI设计的技能,并找到相应的设计工作。你把上面的所有学习教程买下来,也不会超过1000块。最后不要忘了,善用搜索引擎,是高效自学UI的关键!
@酷coo豆 ,平面设计学习日记网站长,非科班平面设计师,对自学设计有着深刻的见解。乐于分享自学平面设计的相关书籍、教程、经验等资源参考,希望和你一起进步,欢迎订阅我的专栏。
最后推荐:职业平面设计教程、100本设计书单汇总
