一.设计流程：

1.设计研究 2.人物模型 3.定义需求 4.框架和细化

设计过程：

1. 产品开发三原则：可行性、功用性、称许性

2.为什么有的产品不好用：工作重点错误、不了解用户、工作流程缺失

3.好产品的基础：目标、心理模型

4.目标导向设计过程：研究、建模、定义需求、定义框架、提炼、开发支持

二.人物模型：

1.模型：用户的期望、用户与其他用户的关系、用户与社会、物理的关系、用户与产品的关系视觉化。

2.步骤：

根据角色对访谈对象分组、找出行为变量、将访谈主题与行为变量对应起来、找出重要的行为模式、综合各种特征、阐明目标、检查完整性和冗余、指定人物模型和类型、进一步描述特征和行为

三.定义用户需求：

1.三类场景：情景场景（定义需求）、关键路径场景（设计细化）、验证场景（测试设计）

2.步骤：

创建问题／表述愿景、探索场景、确定人物模型期望、构建情景场景（人＋活动＋故事）、明确设计需求

四.设计框架和细化

1.创建设计框架：

 创建交互框架

1）定义产品平台（网页、app）、姿态（用户投入精力：独占姿态、暂时姿态）、输入方法（用户与产品交互方式：语音］触摸屏。。。）

2）定义功能性、数据元素

3）确定功能组、层级

4）勾画交互框架

5）构建关键路径场景剧本

6）运用验证场景完善设计

替代（关键路径某个点的替代，分叉点）、必须使用（不经常、一定使用，需要设计地简单易懂（如：产品升级））

创建视觉框架

2.细化外观和行为

3.验证与测试设计

五.设计流程

1.产品要体贴聪明（人本能：与周围有意识的生物进行交流）

1）提供相关的信息：与用户需求有关的信息（搜索烧烤店未果，推荐其他的烧烤店）

2）不要把危险的按钮与普通的按钮放在一起（清空按钮）

3）产品不因为本身的问题加重用户的负担

4）及时通知用户

5）不问过多的问题（会使用户产生被胁迫感）

6）即使失败也不失风度（表格提交失败，需保留部门内容。找回密码，软件自动填写帐号）

7）知道什么时候调整规则

8）承担责任（及时终止打印过程）

9）帮助用户避免低级错误（转发文章给好友，弹框突出发送好用姓名，确定是否发送正确）

10）利用计算机空闲时间

11）预测用户需求（根据用户操作历史（上一次操作））

总结：一个真正关心别人的心是如何与其他人打交道的

2.产品姿态：产品的视觉样式和行为反映产品的使用方式

1）分类：独占姿态、暂时姿态

独占姿态：长时间占据用户注意力

a）锁定中级用户

b）使用保守的视觉风格，紧凑布局

暂时姿态：短暂占据注意力

a）细致清晰显眼地显示控件

b）记住用户的选择

2）网站类姿态：信息类、事务类、应用类

信息类网站：需要平衡「有用信息的显示密度」和「便于新手用户搜索」，需要在独占姿态与暂时姿态中找到平衡，需借助人物模型和行为模式找到平衡。

事务类网站：

应用类网站：

3）移动设备姿态

3.为中间用户优化设计

//使用频率低的功能安排地层级深一些

1）新手用户：想象成聪明且忙碌的人

a）符合用户心理模型、帮助提示及时消失、功能易发现

2）专家用户：探索深奥功能

3）中间用户（不需要提示）

总结：为中间用户优化设计，帮助新手快速上手，为专家用户提供探索空间。

4.保持用户流的状态（避免破坏用户的专注度）

流：温和的快感、感觉不到时间流逝、高效、愉悦感、与产品的交互变得透明、让用户直接面对自己的目标、感受不到产品工具的介入。

1）遵循用户的心理模型：红色警戒色

2）少就是多：使用最少的元素实现功能

3）让用户指示而不是讨论

4）慎用对话框：会打断用户进程，让用户产生被质问的感觉

5）让必要的工具近在咫尺（导航栏固定、重要按钮放在单手操作范围内）

6）提供非模态反馈（清晰地显示操作的状态和结果很重要）

模态反馈：需要用户操作才能返回正常的流程（对话框、弹框）

非模态反馈：不打扰用户的主线进程，不打扰正常的活动流。（选择后的视觉显示告诉用户可以进行下一步操作了）（关闭时确认保存弹窗）

7）可能性不等同于概率（简书自动更新编写的文章而不是询问是否保存）

8）可视化显示数据：图形更直观

9）反映对象或者产品的状态（按钮）

10）避免不必要的报告，除非了解运转情况让用户受益。（默默拦截广告，不需要通知用户）

11）为用户提供模板或者示例

12）区别命令和设置（默认）

13）确定危险按钮

14）为响应优化，但容许延迟：（0.1响应及时，1s有响应，10s走神可拉回，10s+注意力不在）

15）适度的动效

响应式、沉浸式的；帮助用户创造心理模型，上下页面建立逻辑关系；给用户屏幕外都有内容的感觉，弥补移动端屏幕小，内容显示少的缺点。让用户的注意力注意集中在合适的地方；展示对象与用户操作之间的关系；

过渡动效会影响效率，让用户感到反感

5.消除负担

类型：导航、模态、视觉负担

1）导航：标签页面的跳转，严重打断用户的注意力，中断用户的工作流。在当前页面进行跳转的越来越多。

信息导航：滚动、跳转、缩放

无尽模式让用户更沉浸

2）模态负担

3）视觉负担，过度使用界面元素，过度的拟物化

4）如何消除负担：

a）减少要去地方的数量

b）提供导航标志：使用持久对象作为导航标志，增强用户的定位能力；产品使用共同的视觉样式，保证视觉的连贯性，适当的不同可以避免用户混乱，帮助用户定位。

c）提供概览：网页由层级结构转向关联结构，层级变浅，面包屑废用；滚动条：便于用户定位

d）恰当地把控件映射到功能上：排序按照升降序还是最近最早

e）避免层级关系：

f）不要复制真是物理世界的模型（日历的排版）

g）审视用户与产品交互的过程：认知、记忆、视觉工作、肢体

6.设计习惯用法形式的界面

界面形式：以实现为中心、隐喻、习惯用法

习惯用法：文字、形状（能供性：形状与操作的统一（需要提示与反馈））

7.优化数据输入、存储、检索：

1）输入：减少必填项、提供防错机制（相关下拉选项）、程序自动纠错、为用户提供非模态提示。

8.运用反馈、撤销、预览等防止错误

1）反馈：视觉反馈（富视觉非模态反馈、警告授权用模态反馈）、听觉反馈（负面、正面（暗示错误、暗示成功、引导操作））、触觉反馈

2）撤销：心理模型（不相信自己犯错、让用户敢于尝试）

3）对比和预览：（例：滤镜），特别适合图片处理软件

9.为不同的需求而设计：易学性和帮助、可定制性、本地化和全球化、无障碍性。

1）易学性：

有效功能工作集：最少有效工作集+每个用户的个人偏好=有效功能工作集

2）上下文帮助和辅助界面：

a）导览和覆盖层教程（引导页、半透明遮罩的文字教程，最多不多于5-7屏）

b）模板：为用户提供模板

c）占位符和空白提示（404，搜索提示）

d）安装向导

e）工具提示（hover文本）和覆盖性工具提示

f）在线帮助

3）可定制性：个性化、配置、特质模态行为

4）无障碍性：

//F型阅读顺序，

10.视觉设计原则

1）视觉界面设计原则：

a）传达风格/传播品牌

腾讯云：稳定（提供稳定的云服务）、快速（提供快速访问）、安全（安全可靠地储存每个用户数据）

b）带领用户理清视觉层次

c）保持清晰的视觉结构和流

d）在特定屏幕上告诉用户能做什么

e）响应命令

f）把注意力吸引到重要事件上

g）最小化视觉工作量：减少元素

h）保持简单：减少元素

2）视觉信息设计原则：

a）加强视觉对比：折线图的颜色

b）显示因果关系：非模态

c）显示多个变量

d）在一个界面整合文本、图形和数据

e）确保内容的质量、相关性和完整性

f）在相邻空间上显示事物，而不是按照时间堆积

g）可量化的数据就要量化

3）一致性和标准化：易学性、易用性，降低了用户培训和基础支持的费用，减少设计师的工作量。

11.移动端交互设计

对于需要旋转画面的app最好是用图标控件

1）浏览控件：垂直列表、水平列表、网格

a）水平列表：屏幕边缘显示部分遮挡的内容卡片、页面控制器

2）标签栏：底部更多icon、水平轮显（可以左右滑动的暗示）、下拉标签栏

3）导航栏（navbar）

4）工作区域（滤镜区）

5）抽屉：安卓里担任主导航业务的控件，适合最重要的内容只有一类的APP；次要对象放在右侧；工具（微博发布，path发布）；条目级（右滑）；

6）点击显示和其他直接操作：视频软件

7）搜索：预加载、最近/频繁搜索建议、搜索发现、语音搜索、自动填充，减少用户输入工作、推荐关键词

  // 输入不是app擅长的，但搜索是不可避免的。

8）筛选、排序：允许用户重置

9）欢迎和帮助页面

10）多点触摸手势

12.网页端交互设计

1）导航：一级导航（简洁有力）

左侧导航的弊端：因为人的阅读习惯是F型，阅读右边主要内容的时候会时不时的扫到左边导航，影响阅读。（可做收敛）

2）搜索：自动填充与推荐；属性检索；分类推荐

3）滚动

4）页眉和页脚

5）分页/无线滚动：快速到达底部或者页面滚动中的某个位置就选择分页

6）移动网页：自适应/单独网页版设计（微博）

13.设计细节：

1）控件：命令、选择、输入、显示控件

a）命令控件：按钮（操作动作）、图标按钮、超链接（内容导航）

b）选择控件：复选框、开关按钮、状态切换按钮。选择空间不直接触发动作，动作是通过命令控件来触发的。

c）列表控件：文字过长不要使用水平滚动，而是选择换行或者省略的方式。

d）输入控件：无界输入控件、有界输入控件（限制用户输入值大小和性质的控件，可以避免用户输入无效的值。微调器（购买数量）、刻度盘和滑块（进度条））

e）显示控件：滚动条、文档导航器（小缩略图）、分割线（可移动的分割线应该借助光标暗示其受范性）、对话框（属性、功能、进度、通知、公告）