常见UI设计师技能树

一、初级设计师最普遍的工作产出和要求是什么？

一、普遍的工作产出

主要产出：

APP相关设计，产品主页设计，管理界面，广告图

其他产出：

H5，LOGO，VI，线下物料，PPT，商品精修...

主要的工作产出类型，是判断初级设计师能力最核心的指标。

设计全面发展最好的方式，是在有一、两项技能提升到登堂入室，旁人无法轻易替代时再进行拓展。

二、具体的产出

-手机APP UI

1.APP界面

定义：根据产品需求，在界面中设计和排版对应的交互/视觉元素。

要求：能满足平面四要素的正确性；知道如何应用标准的系统Kits；能合理定义i 提和元素尺寸；熟悉并能设计主流的组件类型。

软件：sketch，xd

2.界面图标

定义：包含APP启动图标，以及应用内的一般工具图标。

要求：对图标的基础规范有所了解，了解主流的图标类型及使用场景，在绘制整套图标时可以保持基本的风格一致，形式简约美观。

软件：sketch，ai，ps

3.可交互原型

定义：用来展示可以点击并跳转的交互原型文件。

要求：能清晰表达页面跳转逻辑即可。

软件：Sketch，xd，蓝湖，墨刀

4.基础动效（权重较低）

定义：可以表达出发界面交互效果时的动画。

要求：了解可以实现的动画范围，并能明白如何具体编写表达式动画的文档。

软件：AE,flinto，principle

5.标注切图

定义：将设计稿的内容进行标注，和将开发过程中需要的图形进行导出。

要求：了解对设计还原中开发人员需要知道的参数，了解不同图片格式的作用与区别，并能对应导出符合规范的切图。

软件：蓝湖，sketch，xd，markman

6.设计规范

定义：设计到开发中要遵守到相关规范文档。

要求：针对最主要色彩/元素使用到规范，简介明了，容易被执行。

软件：任意设计软件

-pc网页设计

1.网页界面

定义：主要是公司官网或产品介绍页，将需求中的内容合理置画布并进行排版和设计。

要求：了解基本的网页画布设置和规范，网页的主流结构和交互方式，能设计出简约美观，表意清晰的设计。

软件：xd，sketch，ps

2.管理界面（除特定行业，权重较低）

定义：根据业务需要，设计在网页端操作的管理系统，用来管理财务/库存/客户信息等等的工具。

要求：能了解基本的软件管理界面组件功能和交互规则，网页拉伸适配方式，和文字色彩应用。

软件：xd，sketch

3.标注切图

定义：对设计稿对说明和导出开发用的图片。

要求：能导出正确的切图，和必要的区域进行说明。

软件：蓝湖，markman

-广告宣传图

1.banner设计

定义：根据运营，营销活动的需求设计出在产品广告位中展示的广告图。

要求：能掌握基本的图文混排方法，能对文字做出简单有效对标签，具备入门合成技巧。

软件：ps，ai

2.H5活动页面

定义：根据运营/营销活动的需求设计出在网页中展示的活动专场页面。

要求：了解活动页的基本结构，手机端网页设计规范，有入门的主视觉设计能力。

软件：ps，ai

三、软件学习

PS，AI，Sketch，XD：UI，设计，修图等

蓝湖，Markman，SketchMeasure：切图标注

AE，Flinto，Principle：制作关键帧动画

PPT，Keynote：制作演示文件

四、理论知识

-美术理论

1.光影明暗

深刻理解光线会对物体产生什么样的影响，高光/背光/反光/暗部等知识。以及懂得如何分析画面中明暗的强弱与层次。

2.构图技巧

美术构图与摄影构图基本一致，一些基本的几何构图方法认知。

3.透视关系

平行透视，成角透视，倾斜透视等多种透视类型的理解，能在自己的创作中发现透视使用的错误。

4.色彩原理

对于色彩的基础认识，以及如何通过色相环进行不同类型的色彩搭配，如对比/临近/相似等配色原理。

-平面理论

1.平面四要素

对齐/亲密/对比/重复四要素是我们设计中最基础的理论知识，是UI设计的重中之重。（书籍《写个大家看的平面设计书》前半部分有详细介绍）

2.平面几何原理

除了黄金比例之外，了解如何通过几何的数学推导进行设计创作。（推荐书籍《平面设计中的几何原理》）

3.字体认识

中英文，衬线非衬线等多种基础字体等设计原理和认识，以及文字所包含的属性设置，如行高，字重等对阅读和界面有什么影响。

4.格线系统

排版中网格是如何设置以及如何发挥作用的知识点。（推荐书籍《平面设计中的网格系统》）

5.印刷设置

设计需要印刷打印的内容时，ps，ai对画布如何设置和导出。

-UI理论

1.设计审美

能分辨出设计优秀和差劲对作品，并能通过基础对平面理论对他们进行点评，在开始具体设计前，能有较高对品质追求和分析能力支撑。推荐在花瓣上创建画板持续收集优秀作品。

2.分辨率

屏幕分辨率相关知识，对于不同系统，手机对像素倍差异有清晰对认识。

3.设计规范

关于网页，iOS，Android等平台对应等设计规范，知道如何创建出保守等，不会出错等设计稿。

4.控件类型

了解主流的控件类型，并知道不同控件类型所包含的状态和实际应用场景。

5.组件类型

了解主流等组件类型，知道特定行业或功能，会使用哪中类型的组件以及他们相关的交互逻辑。

6.切图标注

在完成设计后，如何对设计作出相应对标注，以及切图的目的和方法。

7.动画知识

app中主流的交互动画类型，以及动画相关的实现参数类型，包括缓动和动画曲线等内容。

五、工作效率

1.项目流程

主流APP团队项目开发流程，从立项到上线会经历哪些过程，团队不同角色负责什么具体工作，对敏捷、精益、OKR等协助方式有一定的入门理解。

2.设计流程

在开始我们的设计工作时，如何使用正确的规划和执行步骤保证能力发挥的最大化和效率的提升。

3.时间精力管理

想要保证学习效率，时间管理比前面任何一样技能的学习优先度都高。（推荐书籍《专注力管理：让你的努力更高效》《如何科学管理你的疲劳与压力》）（推荐工具：xmind，mindnode，todo-list、things、滴答、疯狂番茄等）