产品设计和用户体验

干货分享！一图带你读懂产品设计和用户体验。这份思维导图整理了相关专题要点，包括什么是用户体验设计、用户体验设计理论、互动和案例、总结：原则梳理、精益设计、用户体验设计方法、UI设计模式这七方面的内容。快来学习吧！

用户体验&产品设计

• 什么是用户体验设计？
  • 什么是用户体验设计
    • 一、定义： 用户在使用一个产品或系统之前、使用过程中、使用之后的全部感受，包括情感、信仰、喜好、认知印象、生理和心理反应、行为和成就等各个方面。是用户在使用产品过程中建立起来的一种纯主观感受。 1、主观性： 虽然是主观感受，但是人类有很多“共情”（感觉、认知、美、爱好等大多数还是一样的），有一些理论和办法来提高主观感受，提高体验。 2、整体性： 体验是整体的，包括产品使用前、使用过程中、使用后，最终形成口碑。 3、对象： 人 <----> 产品。 4、三个思维层次 使用前：本能层次。 使用中：行为层次。 使用后：反思层次。  二、相关概念解释 UXD/UED： User Experience Design 用户体验设计。 UID：UI：User Interface Design 用户界面设计。 UCD：User Centered Design 以用户为中心的设计 HCI：Human-Computer Interaction 人机交互 IxD：Interaction design 交互设计 视觉设计 用户研究 大家应该能看出来，用户体验设计，实际上是保护了：用户研究、视觉设计、人机交互等环节。 用户体验是一个整体，而其他概念是“用户体验设计”的其中一个环节。
  • 用户
    • 一、用户 1、确定产品的用户是谁？ 2、在设计时，需要确定“用户”为中心。 在以用户为中心的设计中，要兼顾技术、商业。 所以：在产品开发过程中： 设计师、开发、运营三者之间是不可能和气的，需要相互制约、相互提高。 但是：我的理解，在技术、商业、用户三者的平衡中，“用户”维度优先级要更高一些。 大家能够体会吧？ 不是说：设计师就比 开发、运营的地位就高一些，而是在开发人员需要更加耐心的和设计师交流沟通。 二、用户画像 1、对To B产品，不但要考虑使用者（用户）的体验，还需要考虑客户（企业）的价值。 比如说：公司规章制度、公司流程要求、公司安全要求等。就要凌驾在个人用户之上。 2、对To B产品 是在公司环境使用，有一定的时间压力。 用户趋向规避风险：当有一点问题。--体会一下和To C 产品的差别。
    • 个人用户
    • 企业用户
    • 客服
    • 运维
  • 体验
    • 整体
    • 流畅
    • 可用性
      • 可学习性
        • 对一个新用户来说，容易上手。操作简单。
      • 可记忆性
        • 记忆是比较耗费精力的。 系统能充分利用各种方式，协助客户回忆起操作步骤、方式、状态等。
      • 健壮性
        • 是指当用户遇到错误的时候，如何更好的给用户支持，尽快从错误中恢复。
      • 效率
        • 完成一个任务的速度。
      • 规范性/一致性
        • 是遵循某种规范设计。而不是零散、散乱的。
      • 良好的沟通性
  • 设计
    • 设计： 是针对用户的某个问题，设计出能提高用户使用体验和效率的过程。 用户提出问题 --> 分析问题 --> 设计，提出解决方案 --> 解决用户问题。 意向性：
    • 是针对某个具体问题的
      • 所以：问题识别，非常重要。 在双钻模型中，继续介绍。
    • 是面向用户的
    • 是提高用户体验的
    • 是有“意向性”的
      • 一个伟大设计师的标记是： 他们的每个设计决策和设计细节，都充满了“意向性”。 意向性： 是指每个设计决策和设计思路、设计细节，都有强大的背景知识、故事、思考、理论的支持。 即“为什么这么做”的原因。
• 用户体验设计理论
  • 双钻模型
    • 模型图
      • 
    • 第一钻：定位问题
      • 可以列举几个案例。 1、购买锤子 -> 打孔 -> 挂画 2、...
    • 第二钻：设计方案
  • 行动7阶段
    • 定义：是指我们在做一件事情的过程被划分为7个阶段：目的、计划、确认、执行、感知、诠释、对比。 解释：用户完成一件事情（或完成一个功能），需要面对两个心理鸿沟：执行鸿沟、评估鸿沟。 执行鸿沟：怎么做？ 评估鸿沟：是否达到了期望。或者操作结果是否和期望一致。 行动的7个阶段，为产品设计提供了方向。每个阶段都是改进产品的机会。 诀窍就是：培养洞察力，慢镜头放慢7个阶段（拆分）来观察和想象 各个阶段，来找到优化和改进点。  案例：微信摇一摇。 1、确定目标： 用户小明，此时无聊又寂寞，想找个陌生人聊天，最好是周边的，聊得不错还方便约一下。小明的目标就是与周边陌生美女人聊天。 2、计划： 怎么样可以让小明使用这个功能，需要让小明知道‘摇一摇’可以摇到周边的女人。 3、确认顺序： 小明准备使用这个功能，他需要知道怎么操作？先做什么？再做什么？ 4、动作执行 小明对功能步骤有一定的了解后，开始操作，操作的动作适合人体的能力吗？ 5、感知到结果、外界的反馈： 小明摇到了一个人，他能够感知到吗？知道他摇到了一个结果。 6、诠释结果： 小明感知到结果后，他能够知道这个结果是他摇出来的周边的人吗？ 7、对比：根据结果，对比自己的期望。 理解了之后，小明能够判断这个结果吗？能够初步判断这个人是他喜欢的类型吗？达到他的初步目标吗？ 设计师就是要放缓每个阶段，洞察用户在每个阶段遇到的障碍和鸿沟，通过设计来消除这些障碍和鸿沟。 行动7阶段遇到的障碍和鸿沟 1、
    • 目标
    • 计划
      • 人才
      • 资产
      • 原材料
      • 顾客
    • 确认
    • 执行
    • 执行阶段-鸿沟
    • 感知
    • 诠释
    • 对比
    • 评估阶段-鸿沟
    • 概要
  • 交互设计方法
    •  意符：是指告诉你这么做。 示能：是指可以做的什么。 约束：是指限制做什么。 反馈：--刷卡后，会自动打开遮栏板。
    • 示能
      • 
    • 意符
    • 约束
    • 映射
    • 反馈
    • 心智模型
      • 1、什么是心智模型。 2、心智模型举例。 3、建立正确、良好的心智模型，能够让用户对产品有更深层次的理解和掌控感。能更好的执行和评估。
    • 概要
    • 可视性
  • 大脑的三个层次
    • 本能层次
    • 行为层次
    • 反思层次
  • 用户体验5要素
    • 
    • 展现层
      • 视觉层次。 用户拿到产品后，产品呈现给用户的第一印象。例如，产品的主色调是蓝色还是红色、采用了扁平风格还是拟物的风格等
    • 框架层
      • 信息编排方式。
    • 结构层
      • 操作、功能、信息 的流转、页面跳转的组合方式。
    • 范围层
      • 功能范围。
    • 策略层
      • 就是 用户需求、产品定位 1、来源于用户的需求：包括行业的功能需求、痛点需求； 2、来源于公司内部需求：产品定位、用户数量目标、品牌宣传目的或者盈利目的。 用户需求：不用说了，就是这个行业需要的需求。 产品定位：提供满足不同客户需求，低成本定制化。降低开发成本、运维成本。 大家考虑一下：公司产品定位所产生的需求有哪些？
    • 补充
      • 1、检索 快速检索 高级检索 历史检索 检索模板 2、信息展现： List方式： 详情方式： 信息选择： 3、信息编辑 信息修改 新增： 4、页面跳转：
      • 信息
      • 动作
        • 选择、跳转、输入
      • 功能
  • 用户体验法则
    • 菲兹法则
      • 案例： 按钮位置和大小。
    • 希克法则
      • 选项越多，做出决定所需时间也越多。 案例： 1、Form窗体的项目，要少一些。 2、下拉选项，要尽量少一些。--可按需定义自己需要的下拉选项；
    • 雅各布法则
      • 尽量在各个产品间保持一致的心智模型。 目的：尽量减少客户重新学习的成本。
    • 简单法则
      • 让用户用简单的方式，感知复杂的形式。因为简单方式要求损耗的精力较小。 比如：方形、菱形、八角形，"方形"会更加容易理解和舒服。
    • 接近原则
      • 要素分组原则。 接近的对象倾向放在一起，理解成一组。
    • 米勒法则
      • 人的记忆中，最多只能记住7个元素。 超过7个，就会感到混乱。
    • 帕金森法则
      • 给截止日期，能更好的完成任务。而不是给更多时间。
    • 特斯勒法则
      • 复杂性守恒
• 互动和案例
  • 草坪（愿望线）
    • 图和总结
      • 一、“愿望线”出现的理论依据是什么？ 人们为什么要在草坪或花坛上穿越？而不从设计好的“人行道”上走？ 愿望线象征着懒惰吗。 懒惰实际上是物理现象中的基本规律，被称之为“能量最小化”原理。 所有的物理系统都会采取尽量减少能源消耗的状态：人类也是如此。 二、解决方案： 1、按照愿望线设计； 2、但是规则更加重要，这么办？ “意符”：给一个约束符号，标识是“禁止”走的。 “示能”：从产品效果看，是“能”走的。 三、体会： 产品设计的时候， 一是“最小化路径”原则设计，减少用户的付出。让用户越懒越好。 二是有明显的“意符”来告诉用户，不要犯错误。 三是用户行为分析，提高用户体验的重要性。 
  • 心智模型图
  • 需求分析的案例
    • 1、需求：交通，从A点 --> B点，要求更快、更舒服。 方案：养更快的马，制作更舒服的马车。 方案：汽车。 2、需求：抓鱼； 方案：练习技能抓鱼（眼、手、体力）。 方案：养鱼； 3、需求：客户买钻孔机 方案：提供更好的钻孔机； 需求分析：目的是打孔->挂画。 更好的方案是：生产不需要打孔就可以挂的画。
• 总结：原则梳理
  • 1、设计时，把要解决的问题置于最高优先级
  • 2、梳理问题时，不要急于考虑方案
  • 3、设计第一，开发第二
    • 在设计的时候，不要被技术影响
  • 4、设计时，不要急于考虑技术
  • 5、设计、开发分离(至少心理上)
    • 保证在设计的时候，目标在“问题”上，而不是技术上。 设计：要站在用户角度考虑问题，而不是站在技术角度考虑问题。 这是一个职责的问题。在设计的时候，要尽量先不要考虑技术实现。 类似：在做问题分析的时候，暂不考虑方案，是一个道理。
  • 6、设计师要为“用户”负责
    • 一、站在用户角度做设计 设计师，要为屏幕另一边的人（用户）负责。 用用户的“共情”思想来设计。 始终想着“用户”，这样才能有人代笔用户说话，才能做出“用户”需要的东西。 在产品设计过程中，没有“用户角色”，那么：设计师就需要作为用户角色来看待产品。 二、设计师，要时刻想着用户/客户价值。为用户说话，为用户争取利益
  • 7、设计师，要时刻想着客服价值，降低客服/运维成本
  • 设计师心态
    • 1、开放的心态 a、对知识开放，不要陷入习惯和经验当中。 b、对反馈开放， 2、团队合作的心态 a、 3、精益的心态
  • 当用户不能正确使用产品，不要责怪用户，应该优化产品
  • 用户遇到困难，视作产品改善的机会
  • 设计者要帮助使用者避免犯错
  • 设计者样帮助使用者尽快从错误中摆脱出来
  • 潜意识、有意识
  • 设计的意向性
  • 复杂不能降低，但是复杂是可以驯服的
    • 1、“复杂守恒”定律。 2、原则： a、尽量让用户简单，让系统复杂。 b、通过设计，来驯服复杂。
• 精益设计
  • 一、交互： 1、若表单填写错误，应指明填写错误之处，并保存原有填写内容，减少重复工作。 2、搜索提交后，显示清晰列表，并对该搜索结果中的相关字符以不同颜色加以区分。 这是一种考虑。 3、尽量采用无刷新（AJAX）技术，以减少页面的刷新率。 4、尽量减少新开的窗口，以避免开过多的无效窗口，弹出窗口需要有明显的【关闭】功能。 5、路径：无论用户浏览到哪一个层级，哪一个页面，都可以清楚知道看到该页面的路径。 6、为有明确目的的用户提供快速入口。 明确目标包括两个维度： 明确要操作的对象：比如知道工作单号、账单号等。 明确要做的事情：比如要订舱，那么能快速找到要“订舱”的入口和数据。 7、区分用户角色，对不同的用户进行划分（如消费者、经销商、内部员工），为用户提供不同的服务和入口。 至少要能按照用户定义自己的服务和功能入口。 8、确保用户知道自己当前的状态。 9、减少使用线框（） 二、文案 1、采用易于阅读的字体，避免文字过小或过密造成的阅读障碍。可对字体进行大中小设置，以满足不同的浏览习惯。 2、对于每一个操作进行友好提示，以增加浏览者的亲和度。 技术要求：每个提示，都应该能够方便修改。目的：便于产品经理不断优化提示语句。 3、文案药简洁，而不是一段废话。 4、 三、错误处理 1、当用户在使用中发生任何问题，都可随时提供反馈意见。 2、尝试给用户吃“后悔药”的机会。 3、 四、导航： 1、最多不超过三层，导航清晰，运用JAVAscrip等技术使得层级之间伸缩便利。 2、同一栏目下，不同分类区隔清晰，不要互相包含或混淆。 五、客服 1、将公司的服务热线列在醒目的地方，便于客户查找。 2、客服常用语，要专业、准备期； 3、为客户提供投诉或建议邮箱或在线反馈。 4、对于流程较复杂的服务，必须具备帮助中心进行服务介绍。
  • 文案
  • 排版
  • 色彩
  • 交互
• 用户体验设计方法
  • 处理错误
    • "人为错误"还是"拙劣的设计"
    • 产生"错误"是设计优化的来源
    • 错误的原因分析
    • 避免错误的方法
  • 与复杂共舞
  • 精确行为和含糊知识
    • 一、案例 1、滴滴打车：如何确定哪辆车是你约的车？ 精确行为：上正确的车。 含糊的信息：车颜色、车牌等。--记忆车牌是一个难受的事情，一般只记忆后两个字母（含糊不精准的信息）。 滴滴做了什么优化？ 二、对设计的启发 1、降低记忆负担； 2、通过一些文案，降低用户需要记忆的内容； 3、 三、方法： 1、示能、意符、文案、提醒等。 四、理论： 人类使用某个产品，需要一定的知识（头脑中）是有益的，但是设计师如果能提供足够的“线索”（外界的），那么对使用者能大大降低记忆的负担，从而提高体验效果。 1、含糊的信息，可以引导精确的行为。 2、信息存在于脑海中、外部世界中。
  • 团队
    • 设计师需要有Open的心态
    • 团队信任，真诚反馈
      • 反馈者： 1、人都害怕自己说蠢话、错话； 2、人都害怕冒犯别人； 3、有时第一感觉很重要，但是 设计者： 1、不能积极的聆听反馈建议； 2、容易把自己辛苦设计的方案（产品）和自己绑定在一起。 和自己的能力、人品建立等价关系。 当听到别人对自己辛苦的产生物“指手画脚”、“横加批评”的时候，心理难免紧张，不舒服。非常容易启动自我保护意识。 导致最终的交流不是“产品本身”，而是“人本身”。 在设计时，要把“我”和“我的方案”分开。要把“我的方案”变成第三方物件。我作为设计师的目标是协调大家一起把这个物件雕琢的更加完美。
• UI设计模式
  • 信息检索
    • 快速检索
    • 高级检索
    • 常用检索
    • 历史检索
    • 表格二次过滤
    • 网页内容检索
  • 信息跳转
    • 1、在当前页面切换跳转。 2、如果用户有需求，需要同时做多件事情，有两个解决方案： a、可以同时打开两个（或多个浏览器），这样就类似有多个标签页了。 b、支持Copy页面功能。把当前页面重新打开一个标签。 即：系统默认不做多标签页处理。但是提供一些方法让操作员可以自己打开多个窗口，或多个标签。
    • 当前窗口切换
      • 1、原窗口保留再新打开另一个页面 2、是原窗口被替代。 3、弹出打开简洁窗口（没有浏览器的菜单等。） 4、应用控制打开一个新页面。
    • 导航
      • 导航层次要浅，不能超过4层。
    • 多开考虑
      • 默认只在当前页面跳转。 如果要多开，一是可以登陆多次，打开多个网页。而是可以在应用中“Copy”一个新界面。
  • 信息展现
    • 信息展现，和编辑功能，不能混淆用一个界面。
    • 列表模式
      • 列表操作
        • 列内容排序
        • 汇总
          • 汇总位置： 不用表尾来存放汇总信息。统一放到检索界面的下方。 汇总信息： 总记录数、总相关字段汇总（如：件数、重量、体积、金额等）。 汇总和选中行汇总，实现方式分开。
        • 分页
          • 1000条记录，100个字段，其性能如何？
        • 二次过滤
        • 自定义设置
          • 列宽、列顺序、列隐藏等
        • 行选择
          • 收集器
            • 批量操作需要做的事情。
      • 列表展现
        • 简洁模式
        • 详细模式
        • 卡片模式
        • 色彩：选中色、间隔色等
    • 详情模式
  • 信息编辑
    • 1、对单个对象操作，其编辑模式，都是弹出方式。 目的：避免多标签页导致的模式。对操作人员来说，“操作完成”比较直观。 2、
    • 减少保存点击
      • 减少“保存”操作，尽量做到离开即保存。特别是对列表类型的编辑。
    • 展示/编辑界面分开
    • 尽量用弹出编辑
    • 批量编辑方式
    • 新增对象
      • 弹出方式
      • 连续新增