移动端APP用户体验设计交互界面

绿色：用户最容易触摸 黄色：较容易触摸 红色：最难触摸，死角 左手的单手操作正好相反。
移动端的用户体验设计
Part 2. 聊聊微博 | 用户如何使用手机？
移动端的用户体验设计
Part 2. 聊聊微博 | 可视化编辑
移动端的用户体验设计
Part 2. 聊聊微博 | 工作流程
移动端的用户体验设计
体验新app 参加画展等
设计方法、设计思维和设计趋势
移动端的用户体验设计
Part 5. 设计师的知识储备 | 浏览和收集
移动端的用户体验设计
Part 5. 设计师的知识储备 | 浏览和收集
移动端的用户体验设计
Part 5. 设计师的知识储备 | 浏览和收集
移动端的用户体验设计
Part 5. 设计师的知识储备 | 浏览和收集
视频转码或图片上传：预处理，缩短等待时间
41
移动端的用户体验设计
Part 2. 聊聊微博 | 如何提升移动端的用户体验？ - 高响应度
内容加载：先出现界面的框架结构，逐级显示内容 前一级的信息代入或利用缓存，减少界面空白（如微博正文）
42
移动端的用户体验设计
Part 2. 聊聊微博 | 如何提升移动端的用户体验？ - 高响应度
移动端的用户体验设计
Part 1. 如何设计？ | 设计准则 – 七大定律（7）
奥卡姆剃刀原理（简单有效原理） “如无必要，勿增实体”，即如有两个功能相等的设计，那么选择最简单的。
移动端的用户体验设计
Part 1. 如何设计？ | 移动端设计准则
为触摸而设计 考虑操作中断 尽量少的文字输入 一个界面一个主要操作 提供自然而然的下一步操作 界面外观遵循用户行为
动效应该是： 有意义的 符合现实运动规律的 能够开发和实现的
一到两个让人愉悦的小细节 任何和动作结合的动画效果都不要超过0.5-1秒
移动端的用户体验设计
Part 2. 聊聊微博 | 如何提升移动端的用户体验？ - 动效
移动端的用户体验设计
Part 2. 聊聊微博 | 如何提升移动端的用户体验？ - 动效
移动端的用户体验设计
Part 3. 不得不说的用户研究
用户研究是以用户为中心的设计流程中的第一步。 它是一种理解用户，将他们的目标、需求与商业宗旨相匹配的理想方法
微博移动端
周边产品
微博PC端
用户研究
品牌
商业
……
移动端的用户体验设计
Part 3. 不得不说的用户研究
问卷调查、用户访谈、可用性测试、远程可用性测试、眼动追踪、经验性评估……
移动端的用户体验设计
Part 1. 如何设计？ | 移动端设计准则
尽量少的文字输入 虚拟键盘空间限制，手指点击容易造成误触
移动端的用户体验设计
Part 2. 聊聊微博
移动端的用户体验设计
Part 2. 聊聊微博
n个项目组和无数个事业部
移动端的用户体验设计
Part 2. 聊聊微博
之前
之后
移动端的用户体验设计
信息发布：预占位，条件允许时自动发出。 点触反馈：利用界面间跳转的时间差，预加载
43
移动端的用户体验设计
Part 2. 聊聊微博 | 如何提升移动端的用户体验？ - 信息设计
信息布局：同类信息的归类和整理 冗余信息的归属，要么删除要么折叠 适度留白，减轻视觉疲劳
移动端的用户体验设计
Part 2. 聊聊微博 | 如何提升移动端的用户体验？ - 动效
交互设计是个跨学科专业。 心理学是其中很重要的一部分。
知识储备包括：设计资源、设计方法、常识、思维
移动端的用户体验设计
Part 5. 设计师的知识储备 | 浏览和收集
1.提升专业度 2.快速获取有效信息 3.培养视觉眼界 4.启发思维
专业书籍
微博 知乎 36氪 专业网站
站酷 Dirbbble 花瓣
接近法则 当对象离得太近的时候，意识会认为它们是相 关的。在交互设计中表现为一个提交按钮会紧 挨着一个文本框，因此当相互靠近的功能块是 不相关的话，就说明交互设计可能是有问题的。
移动端的用户体验设计
Part 1. 如何设计？ | 设计准则 – 七大定律（4）
移动端的用户体验设计
Part 1. 如何设计？ | 设计准则 – 七大定律（5）
移动端的用户体验设计
Part 1. 如何设计？ | 移动端设计准则
为触摸而设计 界面的交互系统以自然手势为基础建构， 符合人体工学并保持一致性。
移动端的用户体验设计
Part 1. 如何设计？ | 移动端设计准则
考虑操作中断 考虑应用的使用情境，确保在各个产出中断的情境下，让用户 恢复之前的操作，保持用户的劳动付出。
移动端的用户体验设计
Part 4. 交互设计师存在的价值
产品经理≠交互设计师 视觉设计师≠交互设计师
移动端的用户体验设计
Part 4. 交互设计师存在的价值
对需求进行重新评估和分析 需求是否合理？用户是否需要？ 经过分析找到真实的需求。 福特，马，车
移动端的用户体验设计
Part 4. 交互设计师存在的价值
移动端的用户体验设计
Part 1. 如何设计？ | 设计准则 – 一致性
应用内部的一致性
移动端的用户体验设计
Part 1. 如何设计？ | 设计准则 – 一致性
系统间的一致性
移动端的用户体验设计
Part 1. 如何设计？ | 设计准则 – 一致性
平台间的一致性
移动端的wenku.baidu.com户体验设计
Part 1. 如何设计？ | 设计准则 – 七大定律（1）
结束
感谢你的时间！
67
移动端的用户体验设计
Part 2. 聊聊微博
移动端的用户体验设计
Part 2. 聊聊微博 | 用户如何使用手机？
单手操作：49%（67%，33%） 一手拿，一手操作：36% 双手操作：15% 由此可见，大部分的人更喜欢单手操作
移动端的用户体验设计
Part 2. 聊聊微博 | 用户如何使用手机？
移动端的用户体验设计
Part 4. 交互设计师存在的价值
推动项目进行，跟进并保证质量 从立项开始，交互设计师除了产出设计文 档以外，还会持续跟进视觉、开发、测试 一系列过程，反复校验已实现的细节。同 时还会跟进后续的用户反馈，持续改进产 品的用户体验。
移动端的用户体验设计
Part 5. 设计师的知识储备
梳理结构，设计界面 交互设计师加入后，设计过程会变得更加 轻松。好的设计师可以用较短的时间提供 出优秀的解决方案。
移动端的用户体验设计
Part 4. 交互设计师存在的价值
提高设计质量，提升效率 经过一定时间的积累后，UE通常会输出 一份产品通用的设计规范文档，用来规范 后续的设计和开发。它能够提高产品的一 致性，并且提升工作效率。
移动端的用户体验设计
Part 1. 如何设计？ | 设计准则
“
Alan Cooper：除非有更好的选择，否则就遵从标准。
”
许多设计准则都基于人类心理学： 人们如何感知、学习、推理、记忆，以及把意图转换为行动。
移动端的用户体验设计
Part 1. 如何设计？ | 设计准则 – 一致性
一致性，相似从而有预期 交互逻辑的一致性 元素的一致性 语言的一致性 信息架构的一致性 视觉的一致性
美观主要是通过视觉层面传达给用户的信息。 通常来讲，用户会认为好看的东西更实用。
移动端的用户体验设计
Part 2. 聊聊微博 | 如何提升移动端的用户体验？ - 思考
换位思考，把自己当作一名普通用户 • • • • • • • • • 人如何观察 人如何阅读 人如何记忆 人如何思考 人的动机来源 人是社会性动物 人如何感知 人会犯错 人如何决策
移动端的用户体验设计
移动端的用户体验设计
Contents
Part 1. 如何设计？ Part 2. 聊聊微博 Part 3. 不得不说的用户研究 Part 4. 交互设计师存在的价值 Part 5. 设计师的知识储备 Part 6. 一些推荐
移动端的用户体验设计
Part 1. 如何设计？
设计准则和设计方法
移动端的用户体验设计
Part 2. 聊聊微博
3.5改版，重构图片选择界面
支持多图（最多9张） 由新至旧的排列 在选择图片的同时，支持拍摄新照片 勾选照片时显示排序数字 勾选后加至下方的已选栏，允许取消选择
移动端的用户体验设计
Part 2. 聊聊微博
4.6 支持相册筛选和图片预览
去掉相册界面，改为顶导筛选 将一行3张图片改为4张 单张图片上变为双触区：勾选和预览 去掉数字排序，降低干扰 增加原图功能
Part 2. 聊聊微博
移动端的用户体验设计
Part 2. 聊聊微博
移动端的用户体验设计
Part 2. 聊聊微博
移动端的用户体验设计
Part 2. 聊聊微博
上线版本
移动端的用户体验设计
Part 2. 聊聊微博
移动端的用户体验设计
Part 2. 聊聊微博
3.0的相册选图界面
仅支持单图选择 由旧至新，由上至下 选择单张照片后添加至发布器 单张照片即一个触区 需返回前一页面选择 调用的系统相册
泰思勒定律（复杂性守恒定律） 该定律认为每一个过程都有其固有的复杂性， 存在一个临界点，超过了这个点过程就不能再 简化了，你只能将固有的复杂性从一个地方移 动到另外一个地方
移动端的用户体验设计
Part 1. 如何设计？ | 设计准则 – 七大定律（6）
防错原则 防错原则认为大部分的意外都是由设计的疏忽， 而不是人为操作疏忽。通过改变设计可以把过 失降到最低。
Part 2. 聊聊微博 | 设计流程
理解、发散、决策、制作原型、验证
39
移动端的用户体验设计
Part 2. 聊聊微博 | 如何提升移动端的用户体验？
达到高响应度 冗余信息的折叠 平滑清晰的动画效果 增加趣味性，提高愉悦感 尊重用户习惯 界面美观度 ……
移动端的用户体验设计
Part 2. 聊聊微博 | 如何提升移动端的用户体验？ - 高响应度
摘自“席克定律”
移动端的用户体验设计
Part 1. 如何设计？ | 设计准则 – 七大定律（3）
神奇数字 7±2 法则 人类头脑最好的状态能记忆含有7（±2）项信 息块，在记忆了 5-9 项信息后人类的头脑就开 始出错。
移动端的用户体验设计
Part 1. 如何设计？ | 设计准则 – 七大定律（4）
移动端的用户体验设计
Part 2. 聊聊微博 | 如何提升移动端的用户体验？ - 趣味性
“
好的产品关注功能，优秀的产品关注情感
”
移动端的用户体验设计
Part 2. 聊聊微博 | 如何提升移动端的用户体验？ - 习惯
尊重用户习惯。 让人熟悉的设计，使用起来也会更顺手。
移动端的用户体验设计
Part 2. 聊聊微博 | 如何提升移动端的用户体验？ - 美观
移动端的用户体验设计
Part 1. 如何设计？ | 设计准则 – 七大定律（2）
席克定律 定律内容：一个人面临的选择（n）越多，所需 要作出决定的时间（T）就越长。 在人机交互中界面中选项越多，意味着用户做 出决定的时间越长。
移动端的用户体验设计
Part 1. 如何设计？ | 设计准则 – 七大定律（2）
① 风格统一 ② 尽量少的元素和文字信息，一页讲一件事 ③ 不超过5页 ④ 有明确的入口，允许跳出 ⑤ 显示点状提示，告知用户当前位置
移动端的用户体验设计
Part 5. 设计师的知识储备 | 消化和沉淀
归纳和总结，将收集的内容整理为素材或提炼出设计方法
移动端的用户体验设计
Part 6. 一些推荐
菲茨定律（费茨法则） 定律内容：从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和 目标的大小（上图中的 D与 W），用数学公式表达为时间 T = a + b log2(D/W+1)。
• 按钮等可点击对象需要合理的大小尺寸。 • 屏幕的边和角很适合放置像菜单栏和按钮这样的元素，因为边角是巨大的目标，它们无限高或无限宽，你不 可能用鼠标超过它们。即不管你移动了多远，鼠标最终会停在屏幕的边缘，并定位到按钮或菜单的上面。 • 出现在用户正在操作的对象旁边的控制菜单（右键菜单）比下拉菜单或工具栏可以被打开得更快，因为不需 要移动到屏幕的其他位置