产品设计和用户体验

干货分享！一图带你读懂产品设计和用户体验。这份思维导图整理了相关专题要点，包括什么是用户体验设计、用户体验设计理论、互动和案例、总结：原则梳理、精益设计、用户体验设计方法、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、

减少保存点击

减少“保存”操作，尽量做到离开即保存。特别是对列表类型的编辑。

展示/编辑界面分开

尽量用弹出编辑

批量编辑方式

新增对象

弹出方式

连续新增