学习UX 学习笔记

学习UX 王煜

2016.01.11

学习笔记

第一章

入门书籍

《设计心理学》 唐.诺曼

《用户体验要素》

《About Face 3》

《信息架构设计》

《用户体验草图设计》

网站资源

Dribble

Medium

Smashing

Axure论坛

IXDC/UPA

收集、模仿好的作品，并可按以下分类
Mobile/Web
1导航 2表单3表格 4搜索 5图表6工具 7反馈 8帮助9邀请 10 反模式

常用工具

Mindjet

Evernote

Snagit（截图软件）

Axure

Keynote

PS/Sketch

2016.01.12学习笔记

第二章

定义

1. 人物角色模型：人种学信息、行为、需求、目标

2. 用户场景：使用产品的时间、环境、情绪对设计的影响

3. 用户目标：图额外你结合的形式描述一个完整的目标

构建

1. 任务流程

2. 信息架构

3. 交互动作

视觉设计

产品氛围

质控

第三章

用户

实现模型、心理模型、表现模型
新手、中间人群、专家
构建用户角色模型：行为变量、对应的群体行为、群体目标

第四章

场景剧本

（在何时，何地，和什么在一起，特定类型的who 萌生了某种desire，会想到通过某种method来满足欲望）

用户需求

定义：用户主观的难以描述和混杂的对于自身需求的描述

• 用户需要
• 用户目标、用户任务
• 定义用户需求：产品用户的需求来自人物角色，包括场景、任务、目标

设计目标

人物角色的目标

• 人物角色的目标驱动着行为方式
• 通过定性的研究确定人物角色
• 人的认知层次（本能、行为、反思）
• 三种用户目标（体验目标、最终目标、人生目标）

了解用户

定性研究

方法

• 访谈利益相关人
• 访谈问题专家
• 访谈用户与顾客
• 用户观察 （可用眼动仪等）
• 焦点小组 （视觉上、UI方面）
• 可用性测试（已有可使用的原型）
• 卡片分类（信息架构、选择范畴）
• 文献调研

用户访谈步骤

1. 识别候选人：人物角色假设
2. 组织计划： 人数、环境、调查阶段策略
3. 访谈过程
4. 访谈观后感

访谈过程要注意的点

• 在交互发生的场景中访谈
• 准备一些标准化问题
• 避免诱导性问题发生
• 首先关注目标、任务其次
• 避免让用户成为设计师
• 避免讨论技术
• 鼓励用户讲故事
• 请求演示

访谈后总结

定量研究

Axure

web 端应用模型

载入部件库
创建部件库
母版：每个界面都需要的 只要做一次

移动端应用模型

考虑移动端常见的手势

• Tap 点击 手指大小要考虑，最小的空间表现按钮，大的空间让用户触发
• Slide Finger 滑动 滑动文章 如闹铃的滚轮 （滑动方式：轻盈、粗暴）
• Drap Item 拖动 轻触后再拖动 （拖动时要有及时的反馈）
• Pinch Spread 缩放、旋转
• 长按唤醒设置表单
  推荐书目
  《移动设备交互设计》
  《移动应用UI模式》
  《IOS Human interface guideline》
  《Material Design》 中文版
  快速制作原型的工具
• Axure
• invision
• pop
  第五章

信息架构

什么是信息架构

信息架构是组织信息、设计信息环境、信息空间，信息体系结构以创建满足用户需求的信息产品。提高可用性和可查找性。

架构步骤

• 获得、理解信息使什么
• 优化信息结构
• 面向用户传达内容
• 提供一个清晰易于获得的界面

如何展示信息结构

• 这里是哪里
• 我要找什么
• 怎么找 怎么逛
• 有什么
  （面包层导航）

信息架构

• 组织系统 ：组织信息
• 标签系统：表示信息
• 导航系统
• 搜索系统
  -叙词表、受控词表、元数据

组织方法

一、精确组织

• 字母：电话本
• 时间：照片
• 位置：evernote
  二、模糊组织
  按主题：图书馆
  按任务
  按隐喻：电脑
  混用
  用户自己分类：豆瓣

组织结构

等级式 （窄而深、宽而浅）
数据库式
超链接式

信息架构图

常用的可视化方法：
1、表达语言数据关系：亲和图KJ 根据元素间的相互关系分组命名
2、表达架构的表现形式：概念图 360手表
3、表达用户任务： 业务流程图 、visio、页面流程图
4、表达网站的导航系统结构： 网站蓝图 辅助导航
此外还有Ecosystem Diagram
Journey Map

页面流程图

1、业务流程图和页面流程图
2、页面流程图的价值

• 聚焦用户目标和人物
• 简化繁杂不必要的流程
• 提升重点交互环节的效率
• 评估用户的行为路径
• 评估工作量

3、制作工具

• 笔和纸
• Omnigraffle
• visio
• keynote
  4、分析一个案例时
  从以下四个步骤入手
  确定用户角色 确定用户需求 确定业务流程以及绘制页面流程
  第六章

交互设计原则

清晰是首要的

1、信噪比原则
2、易于辨识
3、28原则 ：20%重要的 要优先完成
4、信息渐次呈现原则 ：例如表单分步骤
5、组块原则： 网页中的频道如咨询、娱乐、生活
6、临近原则：紧挨着的元素更紧密

形式遵循原则

1、所见即所得：加强页面的易用性 appmachine
2、直接输入原则：如注册某一个账号填写兴趣爱好时，不让用户输入文本而是让用户勾选

保持一致性原则

例如：ipad、icloud、内部一致性、外部一致性

少就是多

如没有表盘数值刻度的手表
形式上的减法，功能不能少，繁杂中找到一种秩序

别让用户思考

《Don't make me think》
①别让用户思考
②点击多少次没关系，只要每次点击都是无需思考且准确无误的
③去掉每个页面上的文字，然后把剩下的文字再去掉一半
1、易学性原则：简洁易学 苹果的滑动解锁
2、反应用户的心理模型：如：①QQ聊天界面：查看更多消息 -以上是历史消息- ②微信中 拍照后： 你可能要上传的照片 ③ 输入法的联想功能
3、符合用户的使用需求
4、减轻用户的记忆负担 如有些密保问题： 你喜欢的明星是谁？ 就加重了用户的心理负担，如果是你身份证的后六位就好一些
5、使用用户的语言

让界面处在用户的掌控之中

1、及时有效的反馈 “加载中”的动画提示
2、避免干扰和打断
3、让用户放松心态不怕出错：允许界面的反复操作，或是可以退回
4、包容原则：删除时的二次确认、自动保存填写记录、淘宝确认收货时的二次提醒
5、用户帮助设施：使用户简单快速的了解产品的核心功能