1.1.1 UI设计师的产出

1.基本工作产出

首先，UI设计师最主要的产出包含App相关设计、产品主页设计、界面和广告图（在界面广告位的）管理，它们占了工作的绝大部分。图1-2所示为UI设计师的主要产出类型。

UI设计师在工作中可能要遇到的产品类型有H5、Logo和VI、线下物料、PPT、商品图片精修等，这些是UI设计师的次要产出类型，如图1-3所示。

主要的工作产出类型是判断初级设计师能力的核心指标，能决定我们的应聘结果和工作绩效。

但是在真实招聘中，招聘方对于程序设计、手绘技能、平面设计的要求如果排在UI前面，以那些技能来衡量你的价值，那么，这个职位可能只是在招聘一个懂点UI的前端设计人员（或插画师、平面设计师），有些企业（一般以创业公司居多）可能一开始就没有想清楚招人的需求，或者根本没分清楚UI设计师和其他工种的区别，不要被这些状况扰乱了情绪。

实际情况是，大多数初级的UI设计师在主要产出方面基本都没有什么建树，水准堪忧，所以在这几个方面要做得比他们更好，超出平均水平，还是比较容易实现的。

2.具体的产出

（1）手机App UI

如图1-4所示，App界面是目前UI设计师的产出物之一，涉及排版布局、交互设计、设计规范文档等。

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

要求：能满足平面四要素的要求；知道如何应用标准的系统套件；能合理定义字体和元素尺寸；熟悉并能设计主流的组件。

（2）界面图标

界面图标是目前UI设计师的产出物之一，如图1-5所示，所有界面都包含图标设计。

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

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

（3）可交互原型

一般交互软件都会有丰富的组件库、图标库和交互设计可视化功能，只需要拖动鼠标，安排好交互关系，即可完成交互的设计，所见即所得，如图1-6所示。

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

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

（4）基础动效

在UI设计中，动效是很重要的组成部分，它和整个交互设计紧密关联，分割不开。想要让产品能够像呼吸一样自然，动效的处理很关键，如图1-7所示。

定义：可以表现触发界面交互效果的动画。

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

（5）标注与切图

当界面设计定稿之后，设计师需要对图标进行切图，提供给开发工程师。标注与切图是为了满足开发人员对于效果图的高度还原需求，直接影响到工程师对设计效果的还原度，这是设计师重要的产出物之一。合适、精准的切图可以最大限度地还原设计图，起到事半功倍的效果。

通常我们只需要对图标与图片进行切图即可，文字、线条和一些标准的几何形状是不需要切图的，例如，对于搜索框，只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度，开发工程师即可用代码实现这种效果，如图1-8所示。

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

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

（6）设计规范

产品发展日趋平稳时，参与设计的人越来越多，设计的统一性和效率的问题会渐渐显现。为了保证平台设计统一性，提高团队工作效率，打磨细节，就需要定义和整理设计规范，如图1-9所示。

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

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

3.PC端网页界面

（1）网页界面

一个网站是由若干个网页构成的，网页是用户访问网站的界面，如图1-10所示。在网页设计中，首先要提到的就是网页的布局。布局是否合理、美观，将直接影响到用户的阅读体验及访问时间。

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

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

（2）B端管理界面（除特定行业外权重较低）

B端产品：B to B全称为Business to Business，其中B为Business，意为企业，B to B即从企业到企业，企业与企业之间的商务模式，买卖双方都为企业。

管理界面解决的痛点是企业、组织机构等B端的需求，如图1-11所示，主要有以下3个特点。

①提高工作效率：通过提高团队的工作效率，更快地完成任务，适应当前快节奏的市场，如HRM、ERP、CRM。

②节省成本：通过减少重复建设、统一管理，来减少投入。例如，建立统一认证中心，避免重复造轮子。

③通过资源整合发挥价值：公司规模较大之后，各个子公司之间往往可以互相利用。

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

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

（3）标注与切图

当网页设计定稿之后，设计师需要对网页进行切图，提供给开发工程师，如图1-12所示。

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

要求：能导出正确的图片，并对有必要的区域进行说明。

4.广告宣传图

（1）Banner设计

Banner可以作为网站页面的横幅广告，还可以是报纸、杂志上的大标题，如图1-13所示。Banner主要体现中心意旨，形象鲜明地表达最主要的思想或宣传主旨。

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

要求：掌握基本的图文混排方法，能对文字做出简单有效的表现，具备初级的合成技能。

（2）H5活动页面（低权重）

一份H5页面海报通常涵盖文字、图片、音乐（声音）、视频、链接等多种元素，以富媒体形式打造多种用户使用场景，能够实现企业宣传、促销活动展示、产品介绍、预约报名、会议组织、收集反馈、微信“增粉”、网站导流等多种营销目的，如图1-14所示。

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

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