100天UI学习笔记-APP入门

内容整理自线下课程笔记。

使用软件：Axure、XMind

文章内容：APP相关知识，用户体验、用户画像、竞品分析、交互设计、产品流程设计、原型图设计、APP版式设计

一个APP的研发流程

产品设计流程：认知分析 → 交互原型 → 界面视觉 → 研发实施 → 验证改良

用户体验设计 User Experience Design

良好的用户体验是成功的一半

用户体验 UE / UX

是一种纯主观在用户使用产品过程中建立起来的感受。

包含了用户的认知，情绪，偏好，知觉，生理与心理，行为习惯等。

覆盖了产品，系统，服务使用的前，中，后期。

不同的人群对同一间事物的需求不同

1、对用户体验有正确的预估

2、挖掘用户的真实期望和目的

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

4、保证功能核心同UI之间的协调工作

用户画像

构成用户画像的基本元素通常有：姓名、照片、个人信息、经济状况、工作信息、计算机互联网背景。

用来丰富用户画像的元素有：居住地、工作地点、公司、爱好、家庭生活、朋友圈、性格、个人语录等等。

用户研究的方法

调查问卷、用户访谈、焦点小组（头脑风暴）、沉浸式、数据挖掘、观察法、设计网络

调查问卷设计

比如：你对这个产品满意吗？

导致结果：无法回答或勉强回答

拆分满意度

将满意度拆分：好用吗？价格合适吗？

用起来愉快吗？比同类产品怎么样？等等

注意：

避免过于专业问题

避免笼统，抽象

避免主观引导

考虑是否容易回答

问题的排序

从简到难

引起兴趣

先封闭式问题

先事情，后态度

敏感问题在最后

问卷设计网站：问卷星，问卷网

访谈

访谈准备工作

撰写访谈提纲

用户背景：职业、教育、家庭、社会关系等

相关的心理需求：喜恶、渴望

现有产品使用环境：生活环境、工作环境

其他使用者：他们的信息、使用情况等

动机：希望达到的目标、选择某些产品的原因等

现有产品使用评价：满意or不满意

现有产品使用习惯：常规的和用户个性化的方式

功能、期望：想要的功能，预期

注意事项

以开放性问题为主。注意问题的顺序，先简单的问题，逐渐深入，最后以简单的问题收尾。引导访谈顺利进行，先从家常开始，不要像面试一样严肃，不要为用户的不熟悉操作，或者知识面狭隘而感到焦虑，这样不利于研究者打开心灵

焦点小组

头脑风暴，分析数据

用户角色采集板：想什么、看什么、说什么、做什么、听什么、感觉到什么

故事板

故事板就是一个用户场景

包含：角色、场景、情节

角色，你创建的用户角色模型，他们的行为，外表和期望，以及他们做出的任何决定都是非常重要的

场景，这是一个涉及地方和人们的真实世界环境

情节，尝试使用freytag的金字塔构造你的情节

竞品分析

所谓竞品分析，就是对竞争对手的产品进行分析，产出物是竞品分析报告。

竞品如何选择：同功能、同行业、同目标、同用户群

1、现在在一个分类下的，未必都是你的竞品，有可能是可以合作的对象

2、目前没有在一个分类下的未必不存在竞争，所以要从行业、功能、用户出发，去选择竞品

3、即便不存在明显竞争可能的产品，也可能因为某个功能点进行单纯的产品分析

竞品分析的步骤：

1、确定竞品分析的目的

2、筛选出目标产品

3、收集竞品资料

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

竞品分析流程

了解产品 → 头脑风暴 → 确定竞品 → 探索竞品 → 分析重点

竞品分析的方法

1、Yes/No法

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

2、用户体验五要素法

战略层、范围层、结构层、框架层、表现层

（从抽象到具体）

战略层

产品目标：我们想通过产品得到什么

用户需求：我们的用户要通过这个产品得到什么

范围层

定义需求（内容清单+功能规格说明）

需求优先级排序

结构层

交互设计：描述“可能的用户行为”+“系统如何匹配和响应这些行为”

信息架构：如何将信息表达给用户（模式：顺序）

框架层

界面设计：页面布局和界面各类控件

导航设计：全部/局部/友好/辅助导航/site map

表现层

感官设计：实现其他四个层面的表现需要，满足用户的感官感觉

3、分析描述法

指将不同产品特性以比较的形式描述出来

交互设计

定义人和人造物之间的沟通方式（UI界面）

好的交互设计，能让人和人造物的沟通（UI界面）更简单、方便、直观

考虑用户需求，方便人和人造物之间的交流，配合用户达成目的

交互形式

点击、双击、滑动、拖拽、放大、缩小、按压、双指点击、按住拖拽、旋转、晃动

交互设计源自于使用环境而设计设计的是符合使用环境的交互行为

适当的环境和场景决定交互方式

适当的交互方式决定UI界面设计

使用场景 → 交互方式 → 界面设计

交互设计三要素

任务（what，要做什么），行为（how，怎么做），目标（why，为什么做）

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

2、然后给出能帮助用户完成目标的功能

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

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

产品流程图

流程图：也称作输入-输出图或框图

流程图可以直观地描述一个过程的具体步骤

流程图的分类：顺序结构、条件结构、循环结构、分支结构

为了便于识别，绘制流程图的习惯做法是：

圆角矩形标识“开始”与“结束”

矩形表示普通工作环节

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

箭头代表工作流方向

纸模

纸模的作用：低成本、快速、高效

原型图需要包含的元素：

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

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

3、注释（功能描述、内容描述）

APP UI的设计规则，是根据信息层级来布局页面的

功能排列：

1、考虑眼部热区和手部热区

2、权衡功能的重要程度

3、用户使用的顺序和频次

4、反相操作弱化处理

重要的&需要引起注意的

1、阅读顺序靠前

2、视觉放大

3、做差异化设计

4、放在好操作的地方

导航设计

导航是房间里的“门”，并影响到房屋“结构”

导航的作用：

1、引导访问，突出核心

2、聚合内容/功能，操作方便

3、避免无关信息干扰

4、优化布局，提高利用率

导航类型

标签导航、抽屉导航、tab导航、轮播导航、列表导航、宫格导航、组合导航

标签导航

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

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

变化：舵式导航、FAB导航、tab导航

抽屉导航

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

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

变化：左侧边栏、右侧边栏、顶部下拉

纸模和低保真原型图的区别：

1、头脑风暴工具

2、用户需求落地

3、产品创意实现

低保真原型图的特点：

1、交互逻辑清晰

2、界面功能明确

3、版式布局合理

4、内容划分层次

纸模到原型图的步骤：

1、导航设计-用户操作流程

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

3、内容展示-移动端版式布局和内容层级划分

APP版式设计

移动端屏幕尺寸受限，信息的有效呈现非常重要

内容的版式布局要以目的导向为原则

竖向分栏布局：新闻、资讯、音乐、电商、视频……

上下分割布局：深度阅读、社交、视频……

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

列表布局：功能设置、信息浏览、内容分类、资讯

※竖向的版式布局在目前APP版式设计中仍是主流，其灵活普适的特点可以最大程度符合大多数类型APP的需求

左右分割布局：图片浏览、深度阅读

宫格布局：深度阅读、视频、工具

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

以目的导向来说

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

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

功能展示：列表、宫格