UI新手必须知道的步骤

1.Teambition（团队协作软件）

2.移动端产品设计流程

①产品设计（市场调研/用户调研/需求分析）

②交互设计（产品原型/交互逻辑）

③产品研发（视觉设计/后台搭建/前端研发）

④测试上线（测试/修改/上线/迭代）

3.用户体验设计

①对用户体验有正确的评估

②挖掘用户的真实期望和目的

③在还能够以低成本加以修改的时候，对设计进行修正

④保证功能核心同ui之间的协调工作

4.以用户为中心

角色---目标---任务场景

用户画像：

①来自用户研究的提炼

②是该类产品的典型用户的代表

③是产品设计的目标对象

④让用户需求变得更真实

5.了解产品用户

用户研究、市场调研、用户访谈

用户研究方法：

①问卷调查：避免过于专业问题；避免笼统，抽象；避免主观引导；考虑是否容易回答。

问题从简到难；引起兴趣；先封闭式问题；先事情，后态度；敏感问题在最后。

②用户访谈：撰写访谈提纲

用户背景；相关的心理需求；现有产品使用环境；其他使用者；动机；现有产品使用评价；现有产品使用习惯；功能及期望；

③焦点小组：

头脑风暴；分析数据。

6.关键词（可使用wordart生成关键词云）

7.故事板

故事是信息最强大的表达工具

①可视化——将要表达的信息以图像的形式表现出来，会更加有说服力。

②印象深刻——故事会比普通的事实更让人印象深刻。

③同理心——在有同感的故事当中找到与自己相似的角色。

④参与感——当故事勾起我们的好奇心而带入角色，会让我们感觉更加有意义，从而更多的参与进去。

故事板三要素：

角色——你创建的用户角色模型。她们的行为，外表和期望等。

场景——一个地点和人们真实的环境。

情节——用户在一个地点发生一些情节最终构成故事板。

注意⚠️：线下任务故事板中场景居多，线上任务故事板中屏幕画面居多。

8.竞品分析：(了解行业，了解市场，了解对手)

定义：对竞争对手的产品进行分析，产出物是竞品分析报告

选择：同功能、同行业、同目标、同用户群

目的：

① 了解行业、获得情报。

②明确分析目的，分析有价值的情报。

③观察、学习、跟随、反制。不同的目的在分析的过程中 有不 同的侧重点。

9.竞品分析步骤：

①确定竞品分析的目的

②筛选出目标产品

③收集竞品资料

④分析、输出竞品分析报告

10.竞品分析方法：

①YES/NO法

主要适用于功能层面，将这类产品的功能点全盘列出，具有该功能点的产品一标记为“YES”，没有改功能点的产品二标记为“NO”，通过比对可以清晰的了解不同产品的功能点的异同。

②用户体验五要素法

战略层（产品目标、用户需求）

范围层（定义需求、需求优先级排序）

结构层（交互设计、信息架构）

框架层（界面设计、导航设计）

表现层（感官设计）

③分析描述法

指定不同产品特性以比较的形式描述出来（一般会用信息架构图或思维导图来表现）

④SWOT分析法

针对"优势、劣势、机会、威胁"四个维度进行比较和梳理。

Strength--优势 / 内部的有力因素

Weakness--劣势 / 内部的不利因素

Opportunity--机会 / 外部的有利因素

Threat--威胁 / 外部的不利因素

⑤Base➕Solution分析法

Base：目标用户是什么/目标用户的核心需求是什么/通过什么解决方案能够满足/同其他产品相比，解决方案有什么差异化和卖点/如何推广营销/市场效果如何。

Solution：解决方案如何实现/信息组织、交互如何/是否符合用户预期/配色、UI是否符合用户审美/用户打开产品频率/用户是否会向他人推荐产品。

11.竞品分析工具（信息架构图）

XMind、keynote、Mindjet MindMannger（软件）

12.竞品报告结果

①产品定义：使用人群/产品功能/特色功能

②用户需求：目标用户/用户目标/使用场景

13.竞品分析报告要求

①报告的输出既是结论，里面包含整理的信息和最终的建议。有多种形式（PPT,WORD，脑图等）

②竞品分析使用为主，但是能做出高大上的文档也很加分。

③竞品分析做完，产品的方向要有基本的概念，并且依据结果去实现。

14.竞品分析数据获取

艾瑞网、易观智库、企鹅智库、CNNIC、百度指数、友盟数据、App Annie。

15.产品流程图分类：（也称作输入-输出图或框图）

①顺序结构 ②条件结构 ③循环结构 ④分支结构

16.流程图制作：

①圆角矩形--表示“开始”与“结束”

②矩形--表示普通工作环节

③菱形--表示问题判断或判定（审核/审批/评审）环节

④平行四边形--表示输入输出

⑤箭头--代表工作流方向

17.流程图制作工具：

Visio&OmniGraffle Pro / AI&Word

18.登录注册：

用户登录注册系统分类：

①自建用户系统：邮箱、手机号、用户名

②第三方账号授权用户系统：微信、微博、支付宝、豆瓣、人人、Facebook

19.交互设计（Interaction Design--人和人造物之间的沟通方式）

层级关系：

①硬件层级--支持交互形式的基础（触屏感应，重力感应，人脸识别）

②系统层级--延续交互习惯的平台（OS-IOS，LINUX-ANDROID,WINDOWS）

③UI层级--设定交互方式和界面风格的参考

④APP--安装在手机上的软件，完善原始系统的不足与个性化

20.交互设计三要素

①任务（要做什么） | ②行为（怎么做） | ③目标（为什么做）

21.流程设计

业务流程：通常会有几个模块来组成，就像流水线一样。A完成后传给B，B完成后传给C，C完成后将结果传给A。它是产品运行起来的最根本行为。

操作流程：用户要完成某个人物要经过的哪些操作。

页面跳转流程：主要是让用户理解产品的交互过程。会涉及到逻辑的一些问题。

22.流程设计目的：为了帮助角色在场景中达到目标

①角色：仔细分析整个流程里面你的用户，有哪些特征，他们的心理预期是什么；

②目标：用户想要通过这个流程达到的目的是什么，能给他们带来什么好处；

③场景：思考这个流程下用户的心理场景和外部场景，合适的场景做适合的事；

23.交互设计流程

①交互设计师通过用户目标，分析出用户需求；

②然后给出能帮助用户完成目标的功能；

③将这些功能做合理的组织，规划使用的路径，设计合理的流程；

④确定流程中的细节功能或是所包含的具体内容，也就是交互界面了；

24.纸模原型：为了呈现功能或者内容版式

作用：低成本、快速、高效

25.原型图包涵元素

①界面（图标、按钮、内容、版式）

②交互（逻辑、反馈、提示、热区、手势、动效）

③注释（数量、尺寸、点击范围）

26.纸模到原型图步骤

①导航设计-用户操作路径

②功能排列-布局功能、预留内容区

③内容展示-移动端版式和内容层级划分

27.功能排列

①考虑眼部热区和手部热区（通常情况下页面上半部分为阅读区，下半部分为操作区，先看后操作）

②权衡功能的重要程度（从多角度考虑。重要的阅读顺序靠前；视觉放大；做差异化设计；放在好操作的地方）

③用户使用的顺序和频次

④反相操作弱化处理

28.导航设计（导航就像是房间里的门，门会影响房屋结构，导航会影响整个产品的结构）

作用：①引导访问，突出核心 ②聚合内容/功能，操作方便 ③避免无关信息干扰 ④优化布局，提高利用率

29.导航分类：（标签导航、抽屉导航、tab导航、轮播导航、列表导航、宫格导航、组合导航）

①标签导航（舵式导航、FAB导航、tab导航）

优点：直观，易操作，能快速在多个模块入口之间进行切换，适用于大部分应用，IOS主推模式。

缺点：占用屏幕空间，数量受限。

②抽屉导航（左侧边栏、右侧边栏、顶部下拉）

优点：突出内容，弱化操作，节省空间，适用于辅助功能的信息流产品，或次要功能导航。

缺点：不易发现，不易操作

30.低保真原型图特点：

①交互逻辑清楚 ②界面功能明确 ③版式布局合理 ④内容划分层级

31.内容的版式布局：内容的版式布局以{目的导向}为原则

高效浏览（竖向分栏、竖向列表、宫格）

内容展示（竖向分栏、上下分割、中轴重复图版、左右分割）

功能展示（列表、宫格）

①竖向分栏布局（新闻、资讯、音乐、电商、视频...）

自上而下区分内容层级，首屏卡展示丰富内容，有助于提高浏览率，给人严谨、理性的感觉，适用推广。缺点是信息过多，易杂乱。

②竖向卡片布局（深度阅读、教程攻略、收藏分类...）

将图片和文字上下分开，通栏大图&文章预览-便于引导阅读，卡片可添加更多的功能，提升App的使用效率。缺点是一屏展示内容减少，信息量降低。

③中轴重复图版布局（深度阅读、教程攻略、收藏分类...）

突出标题，高图版率，视觉冲击力强。但是对背景图要求较高，需要：风格统一、精致、高度契合标题，好的背景图会显得界面更高级。

④列表布局（功能设置、信息浏览、内容分类、资讯...）

简洁明了展示内容，便于集中浏览，突出效率。缺点是通常以文字为主，形式比较呆板，视觉冲击力弱。

⑤左右分割布局（图片浏览、社交、深度阅读）

兼顾竖幅和横幅图片的展示效果，符合人眼本能的看图顺序和习惯，排版更活泼，多以瀑布流形式呈现。缺点是信息层级不明显，不易区分主次。

⑥宫格布局（视频、深度阅读，工具）

整体感很强，近似传统平面及网站的布局，适合陈列内容。缺点是信息层级不明显，不易区分主次，在首页使用时缺乏气势。

⑦满版布局（工具、展示、文艺、启动页、登录注册页）

图片可以充满整个版面，视觉效果直观而强烈，适合品牌传递。缺点是偏视觉展示，实用性较低。

32.Axure（制作原型图）

连接：界面与界面之间的交互关系。按住空格键可调整点的位置。

元件库：载入元件库---载入移动组件

33.IOS基础及尺寸规范

①尺寸

photoshop内的设计尺寸

机型	iphoneX	8plus 7plus 6splus 6plus	8 7 6s 6	SE
单位像素	458ppi	401ppi	326ppi	326ppi
屏幕分辨率	1125*2436px	1080*1920px	750*1334px	640*1136px
设计分辨率	1125*2436px	1242*2208px	750*1334px	640*1136px

sketch内的栏高设计尺寸

机型	X	8/7/6/6S plus	8/7/6/6S	SE
界面	375*812	414*736	375*667	320*568
状态栏	44px	20px	20px	20px
导航栏	44px	44px	44px	44px
标签栏	49px	49px	49px	49px
工具栏	44px	44px	44px	44px
虚拟home	34px
ps里的大小	3倍	3倍	2倍	2倍

②界面

状态栏--文字只有黑白两色，根据背景色或图片的明度自适应，20px。

导航栏--又叫标题栏，可放置页面名称、按钮、icon、搜索等，ios标题居中时，每侧最多两个功能按钮，文字15-22号，高44px。

标签栏--ios主推的导航样式，可放置2-5个标签，居中等分原则，高度49px。

工具栏--对当前页面进行操作，高度44px。

输入框--40-49px。

搜索框--44px。

分段式选择器、可点击图标--22-30px。

34.页面原型设计的步骤（位置、大小、距离、形式、色彩）

①位置：视觉优先网上放，操作频繁的往下放。先把元素按顺序排布位置。

②大小：重要信息放大后适当下移位置，次重要信息但内容较少适当上移。给重要信息更大的地盘。

③距离：距离上一个焦点近的层级高，调整间距引导用户的视觉浏览顺序。

④形式：图片的层级更高，文字最低，跳脱页面风格的内容形式层级更高。

⑤色彩：高反差颜色层级更高。

35.色彩

六步配色法：（调色软件spectrum）

确定主色

①联想：根据产品特性联想关键词（功能特征、行业特征、产品定位、地域特征、流行趋势、用户群特征、品牌文化、背景故事、相关事物、相关形容词...）

②查找：摄影图片、设计作品、工艺品

③提取：用软件分析提取主要色彩（将图片像素化提取颜色）

完成配色

④调色：色彩调和搭配形成配色方案

⑤验证：与产品特性比对

完美执行

⑥定规范：指定合理的色彩使用规范

36.Android尺寸和规范

①获取设计尺寸——官方GUI数据&设备截屏

②尺寸：sketch：720*1280

photoshop：1080*1920 2160*3840

屏幕大小	启动图标	操作栏图标	上下文图标	系统通知图标	最细画笔	状态栏	导航栏	标签栏
720*1280	96*96px	64*64px	32*32px	48*48px	不小于4px	50px	96px	96px
1080*1920	144*144px	96*96px	48*48px	72*72px	不小于6px	60px	144px	150px

37.启动图标

①优秀APP的特点：三美四得

视觉美、情感美、意义美、看得懂、记得住、找得到、用得开

②logo设计步骤

创意

分析产品定位、确定一个方向（目标用户、主要功能、slogan、产品认知度）

充分展开想象

头脑风暴、提取关键词（产品名称、核心理念、slogan、情感&心理、用户群体、事物联想&比喻、产品属性、应用场景）

设计手绘稿

坚持使用纯手绘。可借助简单的辅助工具。自由发挥，单/多个关键词、二次联想。追求数量，不要求质量。禁止评论。

呈现

宣传推广呈现 （网页广告、微信朋友圈、宣传彩页、平面广告、视频媒体、二维码）

APP内呈现（深入产品细节，可出现在启动页、引导页、用户提示、空白页、错误页、加载动效...）

应用市场呈现（APPlogo、应用截图、应用介绍视频、文字说明）4-5页应用市场页

③APP logo常见形式

①具象图形

②抽象图形

③文字/文字变形