[size=15px]几年前写过一个长篇的零基础学 UI 回答，[/size] [size=15px][url=http://mp.weixin.qq.com/s?__biz=MzI0Njc5NzM5OQ==&mid=2247483728&idx=1&sn=d88c4d081a55a55aee70c3c7729f426f&chksm=e9b88468decf0d7e2405613afa75c39e8f5fc9f0c9ec1e3bea55f127527406d3f328c5ef7c1a&scene=21#wechat_redirect]设计干货 | 从零基础学习 UI 设计[/url] [/size] [size=15px]这么长时间过去了，陆陆续续接触了不少新人，包括我自己课程里的学生，想法已经发生了比较大的改变。那一个体系更适合的是[color=#ab1942]毅力高时间充足心态良好[/color]的同学使用（说白了几乎就适用于大一、大二学生）。[/size] [size=15px]一般人，终究是想要[color=#ab1942]见效快，学习效果回馈周期短[/color]的形式来执行。新人直接乱学手绘是没用的，乱看书并真把看书当成学习，也是没用的！所以针对这个需求，我给出了新的答案，具体见下文。[/size] [hr/] [size=15px]成为一名 UI 设计师，首先得明白，我们日常工作需要应用什么样的技能[color=#ab1942]解决问题[/color]。但对于不同的企业，不同的职业阶段，我们要处理的问题是不同的，且差异极大。[/size] [size=15px]这当中涵盖了[/size][size=15px][color=#ab1942]非常广的技能类型[/color][/size][size=15px]，从印刷广告到3D建模、动画特效应有尽有，尤其是在小公司中，需要身兼多职，例如小外包公司，可能设计师除了出图还得和客户接触做项目经理， 或者做网页的时候得自己写前端代码的部分！这是任何一种职业都没办法避免的，公司越小层次越低，就越不可能在工作内容中[color=#ab1942]保持单一性[/color]。[/size] [size=15px]当然，也因为这些公司的工作环境不理想，干的活杂，和想象的有出入，所以当这些设计师们在发表意见时往往都是大吐苦水，例举在工作中需要的[/size][size=15px][color=#ab1942]其它技能[/color][/size][size=15px]，每日疲于奔命。久而久之，就有人把这些相关的技能进行汇总，做成复杂的思维导图，类似下面这种。[/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671259-9221-small.jpg[/img][/align] [size=15px]里面的每一项技能都有用吗？肯定是有的，甚至可以单独针对每一项技能写一篇长文进行分析，列举各种数据来告诉你们它的重要性。但是，我们不可能在[color=#ab1942]初期阶段[/color]全部囫囵吞枣的学完，很多技能你也没办法评估什么才是“学完”，要学到什么“程度”。这是对新人和初级设计师阶段最大的陷阱，热衷于收罗职业可能涉及到的方方面面，然后[color=#ab1942]毫无规划地乱学[/color]。[/size] [size=15px]例如，设计心理学，网上对它的解释整体都很肤浅，不是看了诺曼的《设计心理学》系列，就是学会设计相关心理学知识了。真正与设计相关的心理学要从生理层面开始认知，诸如视网膜是如何成像，视觉皮层如何进行工作的机制，到意识对图形的反应和关联的行为。没有[/size][size=15px][color=#ab1942]系统性的解构[/color][/size][size=15px]相关知识，就无法顺利的将它们应用到真实项目。[/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671275-4855-small.jpg[/img][/align][size=15px]尤其是新人，想要比较快的入行，时间如果全花在这些无[/size][size=15px][color=#ab1942]法直接应用进项目[/color][/size][size=15px]，或是[/size][size=15px][color=#ab1942]短期内不容易产生效果的技能学习[/color][/size][size=15px]上，那么你入行的时间会大大加长，而且进步的速度会极其缓慢。[/size] [size=15px]新人应该先了解的，是初级设计师[/size][size=15px][color=#ab1942]最普遍[/color][/size][size=15px]的工作产出和要求是什么，再制定出[/size][size=15px][color=#ab1942]核心的技能[/color][/size][size=15px]学习范畴。而诸如设计心理学也好，插画手绘技能也罢，都是在你已经能达到满足核心技能条件，可以找到工作以后，再根据实际情况拓展的。[/size] [size=15px]下面，我会从行业最普遍的工作产出内容出发，到需要的水准，以及如何进行学习，来讲解初级设计师最应该先学好哪些技能，让你们少走一些弯路。[/size] [hr/] [size=24px][b][size=18px]一. 普[/size][size=18px]遍的工作产出[/size][/b][/size] [size=15px]首先，UI 设计师最主要的产出包含下面的几类，[/size][size=15px][color=#ab1942]APP 相关设计，产品主页设计，管理界面和广告图[/color][/size][size=15px]（在界面广告位的），占了工作中的绝大部分比例。[/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671325-1450-small.jpg[/img][/align][size=15px]然后是 UI 设计师在工作中可能要遇到的设计类型，比如 H5，LOGO 和 VI，线下物料，PPT，商品精修等等……[/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671333-9416-small.jpg[/img][/align][size=15px]主要的工作产出类型，是判断初级设计师能力[/size][size=15px][color=#ab1942]最核心的指标[/color][/size][size=15px]，决定我们的应聘和工作绩效。当然，你们可能会说很多公司，写的岗位是 UI 但完全在做平面或其它工作， 那些属于特殊的情况是不能代表整体的。即使是招聘者，看见简历中属于 UI 主要产出的表现超过预期，那么其它次要技能的要求是可以降低的，通常这些东西能做好，那么其它类型的东西应该学学做一下也差不多哪里去，这才是招聘者真实的想法。[/size] [size=15px]在真实招聘经历中，招聘方对于程序、手绘、平面的要求如果排在 UI 前面，以那些技能来[/size][size=15px][color=#ab1942]衡量你的价值[/color][/size][size=15px]，恕我直言，这个职位只是在招聘一个懂点 UI 的前端（或插画师、平面设计师），企业从一开始招人的需求可能就没有想清楚，或者根本没分清楚 UI 和其它工种的区别，不要被这些状况扰乱了情绪。[/size] [size=15px]实际情况，市面上大多数初级的 UI 设计师，在[/size][size=15px][color=#ab1942]主要产出的几种设计类型[/color][/size][size=15px]中，都没有什么有用的建树，水准堪忧，所以在这几个领域要做到比他们更好超出平均水平，还是相当容易的。类似下面这些案例，能做出这种设计的设计师，就是[/size][size=15px][color=#ab1942]准备被新人取代[/color][/size][size=15px]和[/size][size=15px][color=#ab1942]喊行业不行了[/color][/size][size=15px]的那种。[/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671347-9384-small.jpg[/img][/align][size=15px]顺便提一点，想要设计全面发展最好的方式，是在有一、两项技能[/size][size=15px][color=#ab1942]提升到登堂入室[/color][/size][size=15px]，旁人无法轻易替代时，[/size][size=15px][color=#ab1942]再进行拓展[/color][/size][size=15px]。不仅学起来更轻松，还可以借助其它方向上的知识点和思维方式带动自己最擅长领域的进步，而不是同时开工。这也是为什么，优秀的团队和设计师在处理第一次面对的某些设计类型时，远胜该类型拥有数年经验的平庸设计师。[/size] [quote] [size=15px][color=#646464]“大部分人，甚至是成年人，从来没有在任何领域中达到足够的技能水平，这使得他们无法像杰出人物那样感受到心理表征的真正力量，来规划、执行和评估他们的表现。因此，他们从来没有真正理解达到这种水平需要做些什么，不仅仅是花时间，还需要进行高质量的练习。一旦他们懂得了在某个领域中要达到那种足够高的技能水平必须要做些什么，那么他们至少从原则上理解了在其他领域追求卓越也需要做些什么。”[/color] [color=#646464]——安德斯·艾利克森[/color][/size] [/quote][size=15px]所以下面我们再好好研究一下，主要产出中，要设计哪些[/size][size=15px][color=#ab1942]具体的内容[/color][/size][size=15px]。[/size] [hr/] [size=16px][size=18px]二. 具体的产出[/size][/size] [size=16px]- 手机 APP UI[/size] [color=#000000][size=15px]1. APP 界面[/size][/color] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671381-8828-small.png[/img][/align][size=15px]定义：[/size][size=15px]根据产品需求，在界面中设计和排版对应的交互、视觉元素。[/size] [size=15px]要求：[/size][size=15px]能满足平面四要素的正确性；知道如何应用标准的系统 Kits；能合理定义字体和元素尺寸；熟悉并能设计主流的组件类型。[/size] [size=15px]软件：[/size][size=15px]Sketch. XD[/size] [color=#000000][size=15px]2. 界面图标[/size][/color] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671405-2619-small.png[/img][/align] [size=15px]定义：[/size][size=15px]包含 APP 启动图标，以及应用内的一般工具图标。[/size] [size=15px]要求：[/size][size=15px]对图标的基础规范有所了解，了解主流的图标类型及使用场景，在绘制整套图标时可以保持基本的风格一致，形式简约美观。[/size] [size=15px]软件: [/size][size=15px]Sketch. Ai. PS[/size] [size=15px]3.可交互原型[/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671420-6743-small.png[/img][/align] [size=15px]定义：[/size][size=15px]用来展示可以点击并跳转的交互原型文件。[/size] [size=15px]要求：[/size][size=15px]能清晰表达页面跳转逻辑即可。[/size] [size=15px]软件：[/size][size=15px]Sketch. XD. 蓝湖. 墨刀[/size] [size=15px]4.基础动效 (权重较低)[/size] [align=center][img]https://mmbiz.qpic.cn/mmbiz_gif/LjlYomQkqFTyIrkUTsfEP879efMHxibCat75GIWH2Nkzx3qo77fWZMqTZBbnFKoDU6AF4LQNiaKBoibhfs7LD0eFQ/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1[/img][/align][size=15px]定义：[/size][size=15px]可以表达触发界面交互效果时的动画。[/size] [size=15px]要求：[/size][size=15px]了解可以实现的动画范围，并能明白如何具体编写表达动画的文档。[/size] [size=15px]软件：[/size][size=15px]AE. Flinto. Principle[/size] [size=15px]5.标注切图[/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671451-2687-small.png[/img][/align] [size=15px]定义：[/size][size=15px]将设计稿的内容进行标注，和将开发过程中需要的图形进行导出。[/size] [size=15px]要求：[/size][size=15px]了解对设计还原中开发人员需要知道的参数，了解不同图片格式的作用与区[/size][size=15px]别，并能对应导出符合规范的切图。[/size] [size=15px]软件：[/size][size=15px]蓝湖. Sketch. XD. Markman[/size] [size=15px]6.设计规范[/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671498-2757-small.png[/img][/align] [size=15px]定义：[/size][size=15px]设计到开发中要遵守的相关规范文档。[/size] [size=15px]要求：[/size][size=15px]针对最主要色彩、元素使用的会犯，简洁明了，容易被执行。[/size] [size=15px]软件：[/size][size=15px]任意设计软件或 Office[/size] [size=18px][b]- PC 网页设计[/b][/size] [size=15px]1. 网页界面[/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671209-5150-small.png[/img] [/align][size=15px]定义：[/size][size=15px]主要是公司官网或产品介绍页，将需求中的内容合理置入画布并进行排版和设计。[/size] [size=15px]要求：[/size][size=15px]了解基本的网页画布设置和规范，网页的主流结构和交互方式，能设计出简约美观，表意清晰的设计。[/size] [size=15px]软件：[/size][size=15px]XD. Sketch. PS[/size] [size=15px]2. 管理界面 (除特定行业权重较低)[/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671200-4063-small.png[/img] [/align][size=15px]定义：[/size][size=15px]根据业务需要，设计在网页端操作的管理系统，用来管理财务、库存、客户信息……的工具。[/size] [size=15px]要求：[/size][size=15px]能了解基本的管理界面组件功能和交互规则，网页拉伸适配方式，和文字、色彩应用。[/size] [size=15px]软件：[/size][size=15px]XD. Sketch[/size] [size=15px]3. 标注切图[/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671541-9479-small.png[/img][/align] [size=15px]定义：[/size][size=15px]对设计稿的说明和导出开发用的图片。[/size] [size=15px]要求：[/size][size=15px]能导出正确的切图，和必要的区域进行说明。[/size] [size=15px]软件：[/size][size=15px]蓝狐. Markman[/size] [size=18px][b]- 广告宣传图[/b][/size] [align=center][b][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671572-5019-small.png[/img][/b][/align] [size=15px]1、Banner 设计[/size] [size=15px]定义：[/size][size=15px]根据运营、营销活动的需求设计出在产品广告位中展示的广告图。[/size] [size=15px]要求：[/size][size=15px]能掌握基本的图文混排方法，能对文字做出简单有效的表现，具备入门的合成技巧。[/size] [size=15px]软件：[/size][size=15px]PS. AI[/size] [size=15px]2、H5活动页面[/size] [size=15px]定义：[/size][size=15px]根据运营、营销活动的需求设计出在网页中展示的活动专场页面。[/size] [size=15px]要求：[/size][size=15px]了解活动页的基本结构，手机端网页设计的规范，有入门的主视觉设计能力。[/size] [size=15px]软件：[/size][size=15px]PS. AI[/size] [hr/] [size=16px][size=18px]三. 软件学习[/size][/size] [size=15px]以上的产出内容，就涵盖了绝大多数初期 UI 设计师的工作，而接下来，我们就要根据这些设计内容的要求，来分析所要掌握的软件和知识点。每款软件和细致的操作，百度都能搜到教程解释。[/size] [size=15px]在我的公众号“超人的电话亭”中回复“软件”，就可以直接获取准备好的安装包。[/size] [size=18px][b]- PS[/b][/size] [size=15px]PhotoShop 是我们学习设计软件的开始，熟悉它的交互、功能、思路、专业名词对我们快速学会其它设计相关软件有至关重要的作用。并且，在平面相关领域的工作中，PS 也是我们必然会使用的软件。作为一款巨无霸，我们不可能在前期学会它的所有功能，所以，必须要筛选出适合的功能模块。[/size] [size=15px]1、创建保存[/size] [size=15px]如何创建正确的画布，分辨率、色彩模式的认知。以及不同的保存模式有哪些知识点。[/size] [align=center][img]https://mmbiz.qpic.cn/mmbiz_png/LjlYomQkqFTyIrkUTsfEP879efMHxibCarnwIelkcNiaIxt86JicZwooESMxrjCiaTHDDIwE6Em2VHweuycXN8SPAw/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1[/img][/align] [size=15px]2、相关工具[/size] [size=15px]工具栏中基础工具的作用，操作方法。[/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671633-2999-small.png[/img][/align] [size=15px]3、钢笔路径[/size] [size=15px]PS中对于钢笔工具的使用，如何操作贝塞尔曲线。[/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671644-2536-small.png[/img][/align] [size=15px]4、图层属性[/size] [size=15px]图层属性各个选项的具体作用，和对应的应用场景，主要在拟物设计中深入学习。[/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671655-2887-small.png[/img][/align] [size=15px]5、调色功能[/size] [size=15px]PS 色彩相关的功能，如通道、色相调整、曲线等工具。[/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671673-7350-small.png[/img][/align] [size=15px]6、滤镜功能[/size] [size=15px]常见的几种滤镜类型学习，以及它们相关的应用方式。[/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671720-8971-small.png[/img][/align] [size=15px]7、布尔运算[/size] [size=15px]如何对路径使用布尔运算进行图形的绘制。[/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671738-9715-small.png[/img][/align][size=15px]8、字符设置[/size] [size=15px]关于文本图层在属性、段落面板的所有设置。[/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671754-6713-small.png[/img][/align][size=18px][b]- Ai[/b][/size] [size=15px]Illustrator 是 PS 的孪生兄弟，它们看起来很像，但是面向的目的却不一样。Ai 的使用，在前期只需要专注于插画和图标的设计即可，那么筛选过后我们应该掌握的东西就并不多。[/size] [size=15px]1、创建导出[/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671775-3507-small.png[/img][/align][size=15px]和 PS 一样关于文件创建的知识，但是相对更复杂的画板规则应尽可能的了解清楚，并且要区分出 Ai 保存和导出的不同。[/size] [size=15px]2、钢笔路径[/size] [align=center][img]https://mmbiz.qpic.cn/mmbiz_png/LjlYomQkqFTyIrkUTsfEP879efMHxibCaO8My0egvfYKe20WufwWPcia5J13Sv6mGhXP8koRUCyagnwicIYYCGW2Q/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1[/img][/align][size=15px]相对于 PS ，Ai 对路径的处理更完整多样化，路径查找器，变形工具，操控变形工具，圆角控制器等实用功能。[/size] [size=15px]3、色彩填充[/size] [align=center][img]https://mmbiz.qpic.cn/mmbiz_png/LjlYomQkqFTyIrkUTsfEP879efMHxibCat8mWmfUEkA6zfyK9s0HLU5CKHYelsstM80zHBZ2Md0AkdyIiaKZ9cXg/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1[/img][/align][size=15px]Ai 中对于颜色填充的方式，渐变的应用，以及网格填充的方法。[/size] [size=15px]4、画布标尺[/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671824-3354-small.png[/img][/align][size=15px]Ai 画布相关设置，标尺工具使用的规则，如何辅助我们进行创作。[/size] [size=18px][b]- Sketch、XD[/b][/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671842-8935-small.png[/img][/align] [size=15px]这两款软件相对前面两个相当于没有难度，只要熟悉了 PS、Ai 以后，几天时间就能上手。并且它们对于 UI 设计的支持是最友好的，速度快，效率高，选择其中一个主攻就可以。[/size] [size=15px]最近[/size][size=15px][color=#ab1942]我正在准备开始录制它们的详细教程[/color][/size][size=15px]，感兴趣的同学可以持续关注我的公众号。[/size] [size=18px][b]- 蓝狐、Markman、SketchMeasure[/b][/size] [img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671897-8506-small.jpg[/img] [size=15px]这些软件都是用来进行标注、切图和协作的，在了解切图相关的知识以后，只需要花一点点的时间就能学会如何使用它们。[/size] [size=18px][b]- AE、Flinto [back=#ffffff]选修[/back][/b][/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671906-9892-small.png[/img][/align][size=15px]无论使用 AE 或者 Flinto，都可以通过极短的时间学会制作关键帧动画，而学它们之前，需要对应用动效在展示什么内容有清晰的了解。[/size] [size=18px][b]- Powerpoint、Keynote选修[/b][/size] [align=center][img]//image.xuehui.com/member_article/1/1/35/2ce2cb757a2eb951dd1af6da9ab7f9c5/2018/08/19/1534671917-1662-small.png[/img][/align] PPT 是职场中的利器，可以更好的将我们的思路想法展现给其他人。 [hr/] [size=24px][b][size=18px]四. 理论知识[/size][/b][/size] [size=15px]了解了相关的软件学习目标，接下来我们就该知道，理论的学习应该包含哪些内容。[/size] [size=18px][b]- 美术理论[/b][/size] [align=center][img]https://mmbiz.qpic.cn/mmbiz_png/LjlYomQkqFTyIrkUTsfEP879efMHxibCaQBYNXicOb2mwhERS8GpU6tSaG0Jjr3Kog3l76fTCtsZhCdNTZ4rHkDQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1[/img][/align] [size=15px]美术理论并不是一定要通过学习素描才可以掌握的东西，在日常的实践和观察都可以很好的帮助我们提升美术理论的基础。[/size] [size=15px]1、光影明暗[/size] [size=15px]深刻理解光线会对物体产生什么样的影响，高光、背光、反光、暗部等知识。以及懂得如何分析画面中明暗的强弱与层次。[/size] [size=15px]2、构图技巧[/size] [size=15px]美术构图和摄影构图基本一致，一些基本的几何构图方法认知。[/size] [size=15px]3、透视关系[/size] [size=15px]平行透视、成角透视、倾斜透视等多种透视类型的理解，能在自己的创作中发现透视使用的错误。[/size] [size=15px]4、色彩原理[/size] [size=15px]对于色彩的基础认识，以及如何通过色环进行不同类型的色彩搭配，如对比、邻近、相似等配色原理。[/size] [size=18px][b]- 平面理论[/b][/size] [align=center][img]https://mmbiz.qpic.cn/mmbiz_jpg/LjlYomQkqFTyIrkUTsfEP879efMHxibCaPcBrfiaCTeaicIkrqmCqeVqoL63W0YaJria7hKLL9AMw0nWjSM4QDNKMw/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1[/img][/align] [size=15px]1、平面四要素[/size] [size=15px]对齐、亲密、对比、重复四要素是我们设计中最基础的理论知识，是 UI 设计的重中之重，《写个大家看的平面设计书》前半部分有比较细致的说明。[/size] [size=15px]2、平面几何原理[/size] [size=15px]除了黄金比例以外，了解如何通过几何的数学推导进行设计创作的，这个只推荐看《平面设计中的几何原理》。[/size] [size=15px]3、字体认识[/size] [size=15px]中英文，衬线非衬线等多种基础字体的设计原理和认识，以及文字所包含的属性设置，如行高、字重等对阅读和界面有什么影响。[/size] [size=15px]4、格线系统[/size] [size=15px]排版中网格是如何设置以及如何发挥作用的知识点，只需要看 《平面设计中的网格系统》即可。[/size] [size=15px]5、印刷设置[/size] [size=15px]设计需要印刷打印的内容时，PS、AI 对画布如何设置和导出。[/size] [size=18px][b]- UI 理论[/b][/size] [align=center][img]https://mmbiz.qpic.cn/mmbiz_jpg/LjlYomQkqFTyIrkUTsfEP879efMHxibCaDOGDnf8mTiaZZ5sP2go0aLKNOP5Zf9ibo4mKxKhic4oCvNqms7hABVxLg/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1[/img][/align] [size=15px]1、作品审美[/size] [size=15px]能分辨出设计优秀和差劲的作品，并能通过基础的平面理论对它们进行点评，在开始具体设计前，能有较高的品质追求和分析能力支撑，推荐在花瓣上创建画板持续收集优秀作品。[/size] [size=15px]2、分辨率[/size] [size=15px]屏幕分辨率相关知识，对于不同系统、手机的像素倍率差异有清晰的认识。[/size] [size=15px]3、设计规范[/size] [size=15px]关于网页、iOS、Android 等平台对应的设计规范，知道如何创建出保守的，不会出错的设计稿。[/size] [size=15px]4、控件类型[/size] [size=15px]了解主流的控件类型，并知道不同控件类型所包含的状态和实际应用场景。[/size] [size=15px]5、组件类型[/size] [size=15px]了解主流的组件类型，知道特定行业或功能，会使用哪种类型的组件以及它们相关的交互逻辑。[/size] [size=15px]6、切图标注[/size] [size=15px]在完成设计以后，如何对设计做出相应的标注，以及切图的目的和方法。[/size] [size=15px]7、动画知识[/size] [size=15px]APP 中主流的交互动画类型，以及动画相关的实现参数类型，包括缓动和动画曲线等内容。[/size] [hr/] [size=24px][b][size=18px]五. 工作效率[/size][/b][/size] [align=center][img]https://mmbiz.qpic.cn/mmbiz_jpg/LjlYomQkqFTyIrkUTsfEP879efMHxibCaByESr2LwP4mCvslH5YlDiatzkk23FExUY7icBqJXlFy1AedUHplYdqww/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1[/img][/align] [size=16px]1、项目流程[/size] [size=15px]主流的 APP 团队项目开发流程，从立项到上线会经历哪些过程，团队不同角色负责什么具体工作。对敏捷、精益、OKR等协作方式有一定的入门理解。[/size] [size=16px]2、设计流程[/size] [size=15px]在开始我们的设计工作时，如何使用正确的规划和执行步骤保证能力发挥的最大化和效率的提升。[/size] [size=16px]3、时间精力管理[/size] [size=15px]实际上这个理应写在最前面的，但为了防止突兀，我把它放在最后一条做个强调，要想保证学习的效率，时间管理比前面任何一样技能的学习优先度都高，也更重要。[/size] [size=15px]知乎有两本入门读物，值得一看：[/size] [size=32px][b][size=15px]《专注力管理：让你的努力更高效》[/size][/b][/size] [size=32px][b][size=15px]《摆脱疲惫感：如何科学管理你的疲劳与压力》[/size][/b][/size] [size=15px]在了解怎么分配时间以后，就要一定要使用一些工具来帮助自己规划学习的流程和分配任务，如思维导图工具 Xmind、MindNode，还有 To-Do-List 工具 Things、滴答、疯狂番茄等。[/size] [hr/] [size=24px][b][size=18px]结尾[/size][/b][/size] [size=15px]以上就是我对[/size][size=15px][color=#ab1942]最快提升[/color][/size][size=15px]自己 UI 设计能力和转行的思考，只有拥有明确的目标，我们才知道应该怎么实践，才有勇气去征服这些知识的盲区。[/size] [size=15px]这篇回答也是我自己[/size][size=15px][color=#ab1942]课程的出发点[/color][/size][size=15px]，虽然我相信它对于自学有很大的帮助，但是今天的 UI 环境相对于几年前已经复杂了许多，自学的另一大挑战就是要面对网上已经沉淀下来难以分清对错，时效性的知识，如分辨率的解释、平台规范的说明等，试错成本依旧高昂。[/size] [size=15px]最后放一则我课程的广告，它就是要让你们可以[/size][size=15px][color=#ab1942]用很低的成本缩减整体的学习时间[/color][/size][size=15px]，将以上的知识[/size][size=15px][color=#ab1942]更系统地串联[/color][/size][size=15px]起来，在学习的过程能得到[/size][size=15px][color=#ab1942]关键的反馈[/color][/size][size=15px]，以及，很多自学无法接触到的[/size][size=15px][color=#ab1942]职业经验。[/color][/size] [size=15px]有兴趣的同学可以关注公众号：超人的电话亭，点击公众号的【UI 课程】-【咨询课程】，即可报名。[/size] [align=center][size=16px]———— END ————[/size][/align] [align=center][img]https://mmbiz.qpic.cn/mmbiz_png/LjlYomQkqFR0NX6dQRJcTQV3icZHqJp8z4AdjgaaCKIljiauDrTfnJXJMIzJPvwXibs8UlGLfDVyXVR266ve5k4ZQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1[/img][/align][align=center][size=14px][color=#888888]知乎ID：酸梅干超人[/color][/size][/align][align=center][size=14px][color=#888888]交流Q群：476240090[/color][/size][/align][align=center][size=14px][color=#888888]课程咨询Q群：31059928[/color][/size][/align]