学习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学习笔记
第二章
定义
人物角色模型:人种学信息、行为、需求、目标
用户场景:使用产品的时间、环境、情绪对设计的影响
用户目标:图额外你结合的形式描述一个完整的目标
构建
任务流程
信息架构
交互动作
视觉设计
产品氛围
质控
第三章
用户
实现模型、心理模型、表现模型
新手、中间人群、专家
构建用户角色模型:行为变量、对应的群体行为、群体目标
第四章
场景剧本
(在何时,何地,和什么在一起,特定类型的who 萌生了某种desire,会想到通过某种method来满足欲望)
用户需求
定义:用户主观的难以描述和混杂的对于自身需求的描述
- 用户需要
- 用户目标、用户任务
- 定义用户需求:产品用户的需求来自人物角色,包括场景、任务、目标
设计目标
人物角色的目标
- 人物角色的目标驱动着行为方式
- 通过定性的研究确定人物角色
- 人的认知层次(本能、行为、反思)
- 三种用户目标(体验目标、最终目标、人生目标)
了解用户
定性研究
方法
- 访谈利益相关人
- 访谈问题专家
- 访谈用户与顾客
- 用户观察 (可用眼动仪等)
- 焦点小组 (视觉上、UI方面)
- 可用性测试(已有可使用的原型)
- 卡片分类(信息架构、选择范畴)
- 文献调研
用户访谈步骤
- 识别候选人:人物角色假设
- 组织计划: 人数、环境、调查阶段策略
- 访谈过程
- 访谈观后感
访谈过程要注意的点
- 在交互发生的场景中访谈
- 准备一些标准化问题
- 避免诱导性问题发生
- 首先关注目标、任务其次
- 避免让用户成为设计师
- 避免讨论技术
- 鼓励用户讲故事
- 请求演示
访谈后总结
定量研究
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、用户帮助设施:使用户简单快速的了解产品的核心功能