Successfully reported this slideshow.
Your SlideShare is downloading. ×

设计好的用户体验 郑磊

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 110 Ad
Advertisement

More Related Content

Advertisement

Recently uploaded (20)

Advertisement

设计好的用户体验 郑磊

  1. 1. 设计好的用户体验 Maczheng 2014.09.10
  2. 2. •看邮件,安排工作 •纵观行业新闻,洞察内因,定下自己目标 •开例会,讲目标 •开始思考…… •拉上同事边吃边谈5年后格局, •开各部门协作会议,成功推销自己的目标和计划 •认真写好BRD,+昨天的会议纪要发给CEO,定在明 天宣讲 •收产品数据,查问题,重申战略 •毙掉设计方案,重申价值观 •请兄弟团建。
  3. 3. 而实际上 • 接需求、画原型、写PRD; • 开会、开会、开会; • 被设计师喷; • 被前端喷; • 被RD喷; • 被测试喷; • 想去喷运营,结果想了想,妈蛋,需求是老 板给的,关运营P事; • 晚上9点半,抬着盒饭去工程师旁边蹲下来, 内心艹了他千百遍之后慢慢的说:哥,再给 加个功能呗~这次这个真的很简单~ 苦 逼
  4. 4. 404 做个缓解用户失败的页面, 不要太单调,要轻松点产品君
  5. 5. O(╯□╰)o 很轻松,但, 是不是太开心了点产品君
  6. 6. O(╯□╰)o 又是不是太紧张了点产品君
  7. 7. 最后,就挂了~ 改需求 就掉血
  8. 8. 需求改来改去! 什么需求啊?纠结! 你懂我的设计吗? 谁来拍个板!来浪费时间! 不是我想要的,再改改~ 还差么一点啦~ 你听明白我的需求了吗?? 产品君 设计狮
  9. 9. 成就感
  10. 10. 什么问题? 沟通不畅
  11. 11. 需求怎么讲清楚? Example: 近期用户抱怨我们浏览器的崩溃率高, 为此我们得做些优化。
  12. 12. 1. 场景 2. 用户 3. 任务 功能 4. 逻辑策略 5. 文案 6. 目标
  13. 13. 需求文档样例
  14. 14. 版本体验走查表
  15. 15. 需求列表都不好使, 怎么办?
  16. 16. 需求可视
  17. 17. 需求可视
  18. 18. 白板文化
  19. 19. 系统性需求怎么照顾全面?
  20. 20. 思维导图 有利于分析产品架构,对比竞品,把握优势,通观全局
  21. 21. Feature List 1. 场景 2. 用户 3. 任务 功能 4. 逻辑策略 5. 文案 6. 量化目标 思维导图 1. 整体架构 2. 对比竞品 3. 把握优势 4. 确定机会 可视.白板 1. 形象 2. 直观 3. 发散 4. 同步
  22. 22. 产品的用户体验? “人们对于针对使用或期望使用的产品、系统或者 服务的认知印象和回应”。通俗来讲就是“这个东西 好不好用,用起来方不方便”。因此,用户体验是 主观的,且其注重实际应用。 ——ISO 9241-210
  23. 23. 交互设计Interaction Design, 缩写 IxD 或 IaD。 UCD UED 可用性 IDUR GUIHCI UE .org 职位 方法 理念 团队 用户体验 UED UX 交互设计师: HCI 或IxDer 也不要称呼视觉叫美工! UI
  24. 24. 用户体验要素 所有人都为用户体验做贡献 直接负责的是交互设计师&视觉设计师
  25. 25. Don’t make me think
  26. 26. Discover insight into •customers, •Competitors, •client brand, •key opportunities. Design a 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 Deliver Ideas Become Reality In 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
  27. 27. discover 望 observe 闻 notice 问 questionnaire 切 experience 论坛 微博 同事 后台反馈 数据分析 用户访谈
  28. 28. 新 老 重度 轻度 重要不重要 紧急 不紧急 用户 需求
  29. 29. Design 基础知识 设计原则
  30. 30. 如何理解这两张图? 信息.互动
  31. 31. 注意 知觉 记忆 信息的检测和加工 记忆结构和过程 知识 思维 言语 高级的认知 认知心理学 • 研究信息是如何获得、贮存、加工和 使用的,表现在注意、知觉、表象、 记忆、思维和语言阶段的试验研究。 1. 有限容量; 2. 信息加工学说; 3. 格式塔完型学说。
  32. 32. OK Cancel
  33. 33. 视觉注意在计算机屏幕上的分布(staufer,1987) 40% 20% 25% 15% •注意分区 •F型浏览 •倒金字塔 •特异 注意
  34. 34. • 动画 • 大字title • 图片 • 导航要素 • 筛选要素 Taobao 手机端 行为测量 注意
  35. 35. 人类大脑在最短时间内对于复杂造型会作出 快速分类。这种知觉分类群化现象又称为 完形法则 知觉
  36. 36. http://en.wikipedia.org/wiki/Gestalt_psycholo gy
  37. 37. Law of Proximity 接近律
  38. 38. 电梯按钮
  39. 39. Law of Similarity 相似律
  40. 40. Law of Closure 封闭律
  41. 41. Law of Symmetry 对称律
  42. 42. Law of Common Fate 共同命运律 Law of Continuity 连续律 Law of Good Gestalt 秩序律
  43. 43. 相似律 接近律 闭合律 连续律 知觉
  44. 44. 13985214937139-8521-4937 记忆
  45. 45. 图比字更容易被记住
  46. 46. 给关键任务加图标
  47. 47. 记忆 7±2 分组
  48. 48. 信息要少 “7±2” 信息组块(chunk) 图形和文字要搭配 记忆
  49. 49. Don’t make me think 注意:减少干扰、聚焦核心 知觉:整体性 记忆:减少信息、分组、加图 如何实现呢?
  50. 50. 9个关键词
  51. 51. 通话记录页面 未接来电提醒窗标记陌生号码页面 34分钟前 3小时前 昨天 5月7日 文案统一 1
  52. 52. 取消和完成都是退出,为什么一会儿左一会儿右? 1
  53. 53. — + — — + … 同样适用android 积极 前进 更多操作 消极 回退 取消 左 ← 右 → 1
  54. 54. 关闭 动作取消 交互行为统一 1
  55. 55. 浏览器4.x对话框 1
  56. 56. 操作引导 标题 关键信息 引导操作 5.0弹窗 模式统一 1 减少变量 凸出核心内容
  57. 57. 一致 • 语言、图标,图形、整个产品的控件或组件保持一致 • 通用快捷键与系统保持一致 • 交互方式保持一致 If not •产品品质低下 •增加用户识别成本 •增加开发、维护成本 •增加运营成本
  58. 58. Why inconsistent • 模块分工,缺乏沟通 • 缺乏规划,临时凑合 • 项目周期太长,项目成员变更 多沟通 长规划 文档归档 solution 1
  59. 59. 就近反馈,已申请专利 2
  60. 60. 状态的反馈 2
  61. 61. 反馈 • 准确、及时、有意 • 符合预期 • 适宜动效 2
  62. 62. 响应式设计 3
  63. 63. 3
  64. 64. 3
  65. 65. 3 初级用户需求 高级用户需求
  66. 66. 通用 • 可定制、可选择、可扩展 • 可以灵活使用和控制 • 初级与高级需求 3
  67. 67. 4
  68. 68. 4
  69. 69. Android iPhone iPad WP7-8 Mac 多指手势,左侧关闭 返回键、action bar、 notification 、顶部tab、长按与滑动 左侧返回,滑动返回 避免大面积的动画转场 鼠标右键、快捷键、右侧关闭、metro 4
  70. 70. 习惯 • 用户操作习惯 • 系统习惯 • 视觉习惯 • 用语习惯 • 行业习惯 4
  71. 71. 5
  72. 72. 情景化菜单 5
  73. 73. 手机助手PC端 备份还原模块 系统中用户能看到更多细节,更好做决策, 减少设计,开发和数据同步会出现的bug等坑。 系统更适合做的,让系统来做 5
  74. 74. 如果一个功能需要很复杂的逻辑 才能实现,那就说明这个功能本 身就是错的。 5
  75. 75. • reduce • organize • time • learn • difference • context • emotion • trust • failure • the one 基础 中级 深度 总结 SHE Shrink Hide Embody 5
  76. 76. 精简 • 减少操作步骤 • 突出重要信息,弱化非必要信息 • 配置最佳默认项 • 结构化信息,实现理解清晰 • 情景化的菜单 5
  77. 77. 6
  78. 78. 文案引导:具体动作 色彩引导:加深处理 正负引导:左负右正
  79. 79. 导向 • 有效指引 • 避免误解 • 顺应认知 • 提高效率 6
  80. 80. The hero One One核心服务 应用 One核心功能 One in & One out 界面 流程
  81. 81. ADSApplication Definition Statement One核心服务
  82. 82. • 让手机用户减少垃圾电话和短 信的骚扰,激励用户标记骚扰。 • 提供更多来电辅助信息或查号、 拨号功能。 主路径 次路径
  83. 83. One核心服务 减少tab,更换首页,收纳设置,突出标记
  84. 84. One核心功能
  85. 85. logo Button(s) 当前页面titlelog o 次要操作区域 主要操作区域 •非主要操作放在此区域; •此区域操作建议不超过2个; •样式icon/文字(尽量不同页面保持统一,最终参考视觉效果); •多与2个时操作收在“更多”里; •符合FIT原则的操作放在此区域;(Frequent Important Typical); •数量不超过3个; •样式建议:icon/icon+文字/文字;(参考视觉效果) Android客户端-号码通
  86. 86. Android L中的FAB凸显标记功能
  87. 87. FAB是一种Promoted Actions。用来承担页面中最重要或最想让用户点击的操作。每个 页面只能有一个FAB。两种尺寸,标准版和mini版,mini版只在和页面其他元素保持视觉 连续性的时候使用。
  88. 88. One in & One out Beyond equality
  89. 89. One in & One out
  90. 90. One in & One out
  91. 91. One in & One out
  92. 92. One in & One out
  93. 93. One in & One out Beyond equality
  94. 94. 别误用了导向!
  95. 95. 平等
  96. 96. 设计原则 一致 反馈 通用 习惯 精简 导向 智能 美的 卓越
  97. 97. 智能
  98. 98. 美的 8 变化与统一 对比与和谐 比例与尺度 对称与均衡 节奏与韵律 空白与虚实
  99. 99. 卓越 9 卓尔不群 神超形越
  100. 100. Deliver 模板 工具
  101. 101. File Name:semob iPhone2.0-阅读模块交互设计方案0515
  102. 102. 交互设计动作和手势库(axure和visio)
  103. 103. 交互设计控件库(axure和visio) 360x640
  104. 104. 手机端Demo展示神器—POP( Prototyping on Paper )
  105. 105. maczheng 59943134

Editor's Notes


  • 熟悉同学们,产品线,学校,专业,哪儿人?
    自我介绍。麦哥,兴趣,籍贯,经历。

    如何理解产品岗位,
  • 其实设计师也很苦逼
  • 问题:

    产品说404页面太单调了,我们做的好看点。
    是不是太可爱了点,文案调整下
    情景
  • 找找问题
  • 问题:产品沟通的不到位
    正确的描述:
    在用户访问页面意外状况下,缓解用户沮丧的情绪
    要传达用户访问失败的现状
    提供用户可操作的重新打开,和查看网页快照的需求
    推荐用户访问类似的网页
    最后是缓解用户沮丧情绪

  • 听闻有32次修改的需求~
  • 问题
    结论
    看看需求都有什么样的?来个现实的例子。
    传说还有改了30多次的需求。

  • 设计师角度 最大的问题
    需求怎么写的?大家举例
  • 问题

    避免展现具体方案,
    比如关闭 是需求,按钮是形式,关闭的形式可以是按钮,可以是点击框外区域等,可确定需求但不必确定形式。

    避免重复描述模式化的元素:比如弹窗元素,设计有规范不用赘述。

    模块:整体需求,细分为避免崩溃,处理崩溃。
  • Why what when where how

    共建需求的原因。
  • 共建需求
  • 脑补,
    需求可视,表现场景感,流程更清晰,
    问题暴露充分,需求更形象,
    共做需求,参与强,成就感强
  • 需求罗列,不遗漏,挑出重点
    界面罗列,更好做统一
  • 白板用于讨论,进程,to do list同步,项目进度,项目阻塞位置。
    对设计师来说,是挥洒灵感,
  • 竞品分析。
  • 希望大家能有个好的项目合作体验。

  • 得出的结论就是:提升体验的手段都是各种细节。后面我们就来系统的了解这些细节。

  • 为什么不要称呼视觉为美工呢?
  • 美工不会给你考虑开发难度,产品价值。
  • 问题

    没有打开和打开了的,放在桌上没人动,没人知道,打开后一会儿就没了。
    不要让用户思考
    Don’t make me think

  • Frog design,
    由开到收
    从找问题到传递解决方案
  • 用户和需求之间的隔阂。

    不要把自己的需求当成用户的需求。片面。用户有很多类,需求有很多情景。
  • 问题

    信息,information,
    重点,过程

    组织信息消费信息反馈信息
  • 认知心理学放在最后作为保证可用性的知识点
    达到高级认知就不是体验设计的事儿了,比如作词作曲,信息创作此类
  • 问题

    注意右下角按钮的位置,sogou浏览器或其它浏览器的问题,注定被忽略的。解决办法,按钮往上放置。避免底部被莫名的忽略
  • 特异:特异依赖于秩序而存在 ,注意的唯一性

    横向不如纵向好。
  • 特异:特异依赖于秩序而存在 热区


  • 问题
  • 靠近
  • 相似律的一个特例

    1和2
    2和3
  • 一个界面来讲6个规律,目的是让界面更有整体感。
    做个考题
  • 如何快速记住


    是人脑对感知过的事物,思考过的问题,体验过的情绪和做过的动作的反应。

    记忆是个过程,它包括
    信息的编码(识记)、储存(保持)和提取(回忆与再认)这三个环节。
    按照信息加工学说的认知过程和保持时间的长短分为
    感觉记忆、短时记忆、和长时记忆。


    课堂中我们要分组的目的是什么?
    是为了好看吗,是为了更好的找到你,定位到你,你

  • 图和文字那个更有用?
  • 给关键任务加图标
    注意和记忆的结合
  • 7+2 ,分组
  • 长时记忆分为图形等画面,文字等抽象理解的元素,位置
    :画面记忆能力比文字记忆能力强得多,斯丹丁(Anderson,1990)曾做过一个实验,人们可以记忆一万幅画面的73%;

    感觉记忆:不到1s 感觉残像 为认知提供广泛的素材
    短时记忆:不到20s 将重要的少数刺激提取来进行精细加工的准备期
    长时记忆:超过1m
  • 信息多了,就得有重点
    人的理解是有限的,理解是需要过程的,所以我们要简单
    完型心里告诉我们,信息设计是有规律可行的。
    马桶阅读理论:不要给用户超过马桶上看不完的内容

  • 举例揭晓
  • 有什么问题?
    如何解决?提问
    文案统一
  • 问题?
  • 交互方式统一
    问题到提炼规律
  • 组件统一
    浏览器4.2时间都3年了,
  • 最重要 的是?
  • 腾讯可用性的42章经
  • 比如,客户端的设计师和运营需求的设计师是两个team
    开发分为web和native两个team
    对通知体系的规划不足,浏览器4.2时间都3年了,
  • 动作的反馈
  • 状态的反馈,加上动效就更好了。
  • 交互过程的重要一环就是要有反馈。
  • 内容在不同界面上的通用展现。
  • 窗口变化&横竖屏
  • 三个按钮,明显没有按需求把用户区分
  • 个性需求
  • 问题 哪儿有问题
  • 平台的差异。
    用户习惯的差异

    左右手差异

  • 对于Android的建议
    左右滑动切换tab是Android大屏手机上必要的快捷方式
    Android中长按列表出现context menu它的一个特性
    长按和滑动

    Android早期适应PC windows 的界面,左确定右取消,3.0之后逐步借鉴ios,左取消,右确定
  • 左右手的问题
    系统平台的习惯问题
    文案的问题

    为什么北京出租车的配色会是那么多?五方五行五色四季
    故宫有黄,红,绿,黑,

    左舵车


    打破惯例的收益
  • More is less
    谨慎加功能
    加上去是很难拿下来的。
    在众多功能中做好调查,凸显用户常用的功能。
  • 不用第一时间展示全部功能和内容,情境下出现功能和菜单。
  • 转移给系统,你能看到更多,更好做决策,省了我们在界面中的设计,开发和数据同步会出现的bug等坑。
    Android系统比ios强一点的就是开放的众多接口能让一些模块相互调用,比如账号登录,内容分享,可以不再自建,而依赖别家,这种转移是中简化,保证可用缩短研发。

  • 10条原则彼此独立,可叠加使用
    简化 在界面体验中,包括

    简化 reduce记得要through thoughtful reduction 
    SHE  shrink hide embody
    we tend to have  a more forgiving attitude toward smaller ones
    another rule"fear the large, endear the small"

  • 突出内容,弱化界面
  • 第二个关键词 导向
  • 前面讲到的流程中,有意图的引导用户操作,让用户减少思考的时间。
    详解对话框按钮的设计。
    首先我们看到一个 确定和取消的按钮,没有给出足够的引导
  • 好的体验在于给用户引导。
  • 电影和Android
  • Android guide 中有 do one thing and do it well.

    目前来说,做大而全的产品基本是不会有好下场的。

    也是需要众多细节形成整体体验的。

    QQ聊天
  • ADS 网上有苹果的布道师会介绍个十字坐标讲解ads,比较难以实用,回归到app design guideline 中的要求,就是statement。
    从若干任务中,我们筛选出来。比如复制网页文本,扫描二维码,
  • 首要展示谁?
    设置很重要吗?
    最吸引你的是?

    设置tab 没有必要与前3个在同一层级,弱化C=强化A
    换位号码展示,并直接提供标记陌生号码功能。
  • 问题
    不一致
    无重点
  • 底部方便,
  • 核心功能,凸显
    hero的强烈意义。
  • Make first thing first and get done
  • 引导用户操作更可能做的
  • 修复工具
  • 问题?
  • 这些都是多任务的切换,或者浏览器多窗口的切换页面,
    哪个更好,为什么?


  • Focus:让功能更聚焦更单纯,就更便捷。收藏功能单纯,导航更单纯,menu更单纯
    convenience :常用的命令设计长按调出,收藏历史的入口长按收藏图标,长按tab切换按钮,调出新建tab。
    No disabled:当前页面无效的功能不再灰色显示,直接不显示,首页没有返回,就不显示返回。
    Delight:新想法放在home按钮上,切换分屏,色彩转圈,同时打开分屏循环
  • 智能,想你所想,贴心置腹。
    首次启动提示一键安装,排除已安装
    安装一个后提示有更多推荐
    Wifi自动离线
    自动夜间模式
  • 文字的大小,
    行距的宽松
    按钮的安排
    动画的节奏
    所有的细节决定了体验的成败。

    跟设计师们讨论问题,多用这些词汇。
  • Distinguished:我们搜狗的浏览器,跟pc浏览器的dna继承,圆,彩色。

    印象深刻的细节 path 的“+”
    微信的朋友圈评论只看到自己朋友的
  • 拉灯和色板自定义
  • semob iPhone2.0-阅读模块交互设计方案0515
  • 精确传达设计意图,避免设计师,产品,视觉,开发等角色对细节的遗忘,误解
  • Axure画手机界面尺寸建议:360x640

×