设计好的用户体验Maczheng2014.09.10

•看邮件，安排工作•纵观行业新闻，洞察内因，定下自己目标•开例会，讲目标•开始思考……•拉上同事边吃边谈5年后格局，•开各部门协作会议，成功推销自己的目标和计划•认真写好BRD，+昨天的会议纪要发给CEO，定在明天宣讲•收产品数据，查问题，重申战略•毙掉设计方案，重申价值观•请兄弟团建。

而实际上• 接需求、画原型、写PRD；• 开会、开会、开会；• 被设计师喷；• 被前端喷；• 被RD喷；• 被测试喷；• 想去喷运营，结果想了想，妈蛋，需求是老板给的，关运营P事；

• 晚上9点半，抬着盒饭去工程师旁边蹲下来，内心艹了他千百遍之后慢慢的说：哥，再给加个功能呗~这次这个真的很简单~

苦 逼

404做个缓解用户失败的页面，

不要太单调，要轻松点产品君

O(╯□╰)o 很轻松，但，

是不是太开心了点产品君

O(╯□╰)o

又是不是太紧张了点产品君

最后，就挂了~

改需求 就掉血

需求改来改去！什么需求啊？纠结！你懂我的设计吗？谁来拍个板！来浪费时间！

不是我想要的，再改改~还差么一点啦~你听明白我的需求了吗？？ 产品君

设计狮

成就感

什么问题？

沟通不畅

需求怎么讲清楚？

Example：近期用户抱怨我们浏览器的崩溃率高，为此我们得做些优化。

1. 场景2. 用户3. 任务功能4. 逻辑策略5. 文案6. 目标

需求文档样例

版本体验走查表

需求列表都不好使，怎么办？

需求可视

需求可视

白板文化

系统性需求怎么照顾全面？

思维导图有利于分析产品架构，对比竞品，把握优势，通观全局

Feature List 1. 场景2. 用户3. 任务功能4. 逻辑策略5. 文案6. 量化目标

思维导图1. 整体架构2. 对比竞品3. 把握优势4. 确定机会

可视.白板1. 形象2. 直观3. 发散4. 同步

产品的用户体验？

“人们对于针对使用或期望使用的产品、系统或者服务的认知印象和回应”。通俗来讲就是“这个东西好不好用，用起来方不方便”。因此，用户体验是主观的，且其注重实际应用。

——ISO 9241-210

交互设计Interaction Design, 缩写 IxD 或 IaD。

UCD

UED

可用性

IDUR GUIHCI

UE

.org

职位

方法

理念

团队

用户体验

UED

UX

交互设计师： HCI 或IxDer也不要称呼视觉叫美工！

UI

用户体验要素

所有人都为用户体验做贡献直接负责的是交互设计师&视觉设计师

Don’t make me think

Discoverinsight into •customers,•Competitors,•client brand, •key opportunities.

Designa range of design approaches and concepts to more fully address the client’s challenge. The concepts are reviewed, tested, refined, and crafted into a focused design direction

DeliverIdeas Become RealityIn this phase we specify, document, and deliver project details to the client for implementation, or we get involved directly in the production process—both guarantee the accurate translation of ideas into reality

discover

望 observe

闻 notice

问 questionnaire

切 experience

论坛

微博

同事

后台反馈

数据分析

用户访谈

新 老

重度

轻度

重要不重要

紧急

不紧急

用户 需求

Design

基础知识

设计原则

如何理解这两张图？

信息.互动

注意 知觉 记忆

信息的检测和加工 记忆结构和过程

知识 思维 言语

高级的认知

认知心理学• 研究信息是如何获得、贮存、加工和

使用的，表现在注意、知觉、表象、记忆、思维和语言阶段的试验研究。

1. 有限容量;2. 信息加工学说;3. 格式塔完型学说。

OK Cancel

视觉注意在计算机屏幕上的分布（staufer，1987）

40% 20%

25% 15%

•注意分区•F型浏览•倒金字塔•特异

注意

• 动画

• 大字title

• 图片

• 导航要素

• 筛选要素

Taobao手机端行为测量 注意

人类大脑在最短时间内对于复杂造型会作出快速分类。这种知觉分类群化现象又称为

完形法则

知觉

http://en.wikipedia.org/wiki/Gestalt_psychology

Law of Proximity 接近律

电梯按钮

Law of Similarity 相似律

Law of Closure 封闭律

Law of Symmetry 对称律

Law of Common Fate

共同命运律

Law of Continuity

连续律

Law of Good Gestalt

秩序律

相似律

接近律

闭合律

连续律

知觉

13985214937139-8521-4937

记忆

图比字更容易被记住

给关键任务加图标

记忆

7±2

分组

信息要少“7±2”信息组块（chunk）图形和文字要搭配

记忆

Don’t make me think

注意：减少干扰、聚焦核心知觉：整体性记忆：减少信息、分组、加图

如何实现呢？

9个关键词

通话记录页面 未接来电提醒窗标记陌生号码页面

34分钟前

3小时前

昨天

5月7日

文案统一

1

取消和完成都是退出，为什么一会儿左一会儿右？

1

— +

—

—

+ …

同样适用android

积极前进更多操作

消极回退取消

左←

右→

1

关闭 动作取消

交互行为统一

1

浏览器4.x对话框 1

操作引导

标题

关键信息

引导操作

5.0弹窗

模式统一

1

减少变量

凸出核心内容

一致

• 语言、图标，图形、整个产品的控件或组件保持一致

• 通用快捷键与系统保持一致

• 交互方式保持一致

If not•产品品质低下•增加用户识别成本•增加开发、维护成本•增加运营成本

Why inconsistent

• 模块分工，缺乏沟通

• 缺乏规划，临时凑合

• 项目周期太长，项目成员变更

多沟通

长规划

文档归档

solution

1

就近反馈，已申请专利

2

状态的反馈

2

反馈

• 准确、及时、有意

• 符合预期

• 适宜动效

2

响应式设计 3

3

3

3

初级用户需求

高级用户需求

通用

• 可定制、可选择、可扩展

• 可以灵活使用和控制

• 初级与高级需求

3

4

4

Android

iPhone

iPad

WP7-8

Mac 多指手势，左侧关闭

返回键、action bar、 notification 、顶部tab、长按与滑动

左侧返回，滑动返回

避免大面积的动画转场

鼠标右键、快捷键、右侧关闭、metro

4

习惯

• 用户操作习惯

• 系统习惯

• 视觉习惯

• 用语习惯

• 行业习惯

4

5

情景化菜单 5

手机助手PC端备份还原模块

系统中用户能看到更多细节，更好做决策，减少设计，开发和数据同步会出现的bug等坑。

系统更适合做的，让系统来做

5

如果一个功能需要很复杂的逻辑才能实现，那就说明这个功能本身就是错的。

5

• reduce• organize• time• learn• difference• context• emotion• trust• failure• the one

基础

中级

深度

总结

SHEShrink Hide Embody

5

精简

• 减少操作步骤

• 突出重要信息，弱化非必要信息

• 配置最佳默认项

• 结构化信息，实现理解清晰

• 情景化的菜单

5

6

文案引导：具体动作

色彩引导：加深处理

正负引导：左负右正

导向• 有效指引• 避免误解• 顺应认知• 提高效率

6

The hero One

One核心服务

应用

One核心功能 One in & One out

界面 流程

ADSApplication Definition Statement

One核心服务

• 让手机用户减少垃圾电话和短信的骚扰，激励用户标记骚扰。

• 提供更多来电辅助信息或查号、拨号功能。

主路径

次路径

One核心服务

减少tab，更换首页，收纳设置，突出标记

One核心功能

logo

Button（s）

当前页面titlelogo

次要操作区域

主要操作区域

•非主要操作放在此区域；

•此区域操作建议不超过2个；

•样式icon/文字（尽量不同页面保持统一，最终参考视觉效果）；

•多与2个时操作收在“更多”里；

•符合FIT原则的操作放在此区域；(Frequent Important Typical)；

•数量不超过3个；

•样式建议：icon/icon+文字/文字；（参考视觉效果）

Android客户端-号码通

Android L中的FAB凸显标记功能

FAB是一种Promoted Actions。用来承担页面中最重要或最想让用户点击的操作。每个页面只能有一个FAB。两种尺寸，标准版和mini版，mini版只在和页面其他元素保持视觉连续性的时候使用。

One in & One outBeyond equality

One in & One out

One in & One out

One in & One out

One in & One out

One in & One outBeyond equality

别误用了导向！

平等

设计原则

一致 反馈 通用

习惯 精简 导向

智能 美的 卓越

智能

美的

8

变化与统一对比与和谐比例与尺度对称与均衡节奏与韵律空白与虚实

卓越

9

卓尔不群 神超形越

Deliver

模板

工具

File Name：semob iPhone2.0-阅读模块交互设计方案0515

交互设计动作和手势库（axure和visio）

交互设计控件库（axure和visio）

360x640

手机端Demo展示神器—POP（ Prototyping on Paper ）

maczheng59943134