O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

设计好的用户体验 郑磊

3.429 visualizações

Publicada em

Publicada em: Design

设计好的用户体验 郑磊

  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

×