全面掌握用户体验设计UX：从设计概念到实际应用的详尽指南

tip：推荐您使用侧边栏的目录表，以便查看文章结构

用户体验设计概念

为什么设计很重要？如果用户不清楚自己做错了什么，又没有简单的方法来解决，那么他们就很可能放弃。

什么是好的设计？如果设计良好，你不会真正注意到它。只有当设计糟糕时，你才会注意到它。

设计原则

组件设计

表单

• 使用内联表单字段验证
  内联表单验证是一种在访客填写表格时实时检查其信息的程序。假设访客在某个字段中输入了错误信息，如错误的信用卡号或电子邮件。错误信息将显示在表单字段下方或内部，提醒访客他们的错误，并允许他们快速更正，然后继续下一个问题。
• 将表单字段从最简单到最困难排序
  从最简单的问题（如姓名和电子邮件）开始填写表格，然后再填写耗时较长的问题，如账单和发货信息。当访客开始填写表格时，他们会想 “好的，我可以快速添加我的姓名和电子邮件”，这样他们就不太可能离开页面了，因为他们已经决定提交。
• 文本应向左对齐
  将所有文本（包括 Query 和标签）对齐到表单的左侧，这样便于访客阅读和填写。巴塞尔大学的研究人员发现，将文本对齐到表单字段框上方的左侧可以减少填写表单所需的时间。这种对齐方式减少了用户眼睛移动的时间，使表单更容易阅读。
• 对敏感信息额外使用策略。不要要求提供电话号码。或提示告诉对方为何要收集
  除非收集访客的电话号码至关重要，例如报价请求或产品演示，否则不要在表单中包含电话号码。要求访客提供电话号码会让访客产生怀疑，除非他们知道要求提供电话号码的正当理由。在可能的情况下，要求提供电子邮件地址，并在访客同意的情况下使用电子邮件地址与访客联系。或者，将表单中的电话号码栏设为自愿填写。
• 表单页你可能采用分柱比横排效果直观
• 非必要或一些东西不是立即要的不要让用户提供输入信息
• 进入表单页是否有自动聚焦
• 清晰的提示。大多数网站都要求密码由小写和大写字母、符号和数字混合组成。你应该清晰提示用户需要输入什么
• 对于长表单，添加进度条
  您是否在填写长表单或调查时想过："还有多少问题？进度条可以显示访客必须回答的问题数量。进度条会让访客知道完成任务需要多长时间，从而激励访客完成手头的任务。这些提示对长的多步骤表单尤其有用。
• 验证应使用弹窗而非字符串，这样避免了表单占用一个验证码单
• 限定输入，自动匹配识别
• 使用合适的默认值
  • 提供示例方式邮箱输入框如76dcbjde@qq.com
• 主动获取默认值，比如
  • 大多数时候，您可以通过IP 或地理位置轻松检测用户的国家/地区和城市。
  • 如果用户通过您的时事通讯/营销活动进入结账流程，您肯定知道他的电子邮件。因此，请预先填写电子邮件字段

密码

• 避免过度复杂。复杂的密码方案通常会导致大量错误，更糟糕的是，还会导致很高的放弃率。
• 鼓励人们记下自己的密码，把它们写下来或放在密码管理器中。
• 允许用户显示密码

邮箱

• 对尾部空格的处理。

搜索功能

如果网站有超过 100 页，则提供搜索。

员工对内联网搜索的期望很高，但实际体验常常令人失望，导致失去信心。
失败的搜索体验会导致员工停止使用搜索功能，转向其他导航方式，效率降低。

• 使用明显的搜索框，而不仅仅是搜索图标。
• 搜索框应位于全局导航菜单的右上角。
• 搜索框中应包含精心设计的占位符文本，告诉用户可以搜索什么内容。
• 保持搜索结果页面的内容按照相关性和新近度排序，确保最近的结果更相关和可信。
• 使用带标签的图标帮助用户快速区分不同类型的结果。
• 使用“你是想找”建议功能，帮助用户纠正拼写错误或部分搜索词。
• 使用分页显示搜索结果，而不是懒加载或无限滚动，确保用户控制并便于访问。
• 是否有必要严格要求用户区分大小写？

如何改进
搜索性能的两个指标：准确率和召回率
定期查看搜索日志，详细了解用户的搜索行为以及搜索引擎的成功和失败。使用内容标记和网站搜索工具的功能（如最佳匹配）来推广特定查询的最合适结果。
提高方法：

1. 手动改进常见查询的结果
2. 提供精选的搜索建议
3. 认识同义词和替代词
4. 利用词干提取来适应不同的词形
5. 支持同音词
6. 忽略停用词

欢迎

• 不要字面意义上地欢迎用户访问您的网站。在将首页的主要空间让给问候语之前，请考虑将其用作标语。您可以为用户提供的最佳欢迎语是具体定义他们可以在网站上做什么，以及明确的起点。本指南的一个例外是，在确认网站已识别注册用户的短语中使用“欢迎”更为合适。

收藏

收藏时注意网站标题。

• 不要在窗口标题中包含顶级域名，例如“.com”，除非它实际上是公司名称的一部分，例如“Amazon.com”。
• 不要在标题中包含“主页”。这只会增加毫无意义的冗长内容。只要您有网站主页的简单 URL，就没有必要在窗口标题中指定主页。当然，您网站中的每个页面都应该有一个唯一的窗口标题，这样历史列表和书签中的其他页面就不会与主页混淆。
• 在窗口标题中添加网站的简短描述。此描述对于尚未广为人知的网站尤其重要，这样如果用户之前已将该网站加入书签或将其作为搜索结果，他们就可以轻松记住或了解该网站的目的。如果有网站标语，请考虑使用，但前提是标语简短、有意义且使用直白的语言，而不是模糊的市场术语。例如，Slusser 的窗口标题“Slusser 的商业园林绿化和重型公路”效果很好，因为它首先列出公司名称，然后是易于理解的描述（尽管我们建议将“园林绿化”移到最后）。
• 将窗口标题限制为不超过七或八个字，总字符数不超过 64 个。较长的标题不易扫描，尤其是在书签列表中，并且在许多应用程序中无法正确显示。请参阅 JobMagic 的窗口标题，了解过长、截断的窗口标题的示例。

快速链接

• 是图标的当前状态元素清楚地指示？
• 图标是否具体而熟悉？
• 所有图标是否都有标签？

图标

• 是图标的当前状态元素清楚地指示？
• 图标是否具体而熟悉？如果您花费超过 5 秒的时间来思考某个事物的合适图标，那么该图标不太可能有效地传达该事物的含义。测试图标的可识别性：询问人们他们认为图标代表什么。测试图标的可记忆性：询问一组重复使用的用户，在几周前被告知图标代表什么之后，他们是否能记住图标的含义。
• 所有图标是否都有标签？
• 谨慎使用下拉菜单，尤其是当其中的项目不直观时。
• 图标旁边必须有一个文本标签，以阐明其在特定上下文中的含义。
• 对于导航图标，标签尤其重要。不要依赖悬停来显示文本标签：这不仅会增加交互成本，而且在触摸设备上的翻译效果也不好。因为只有少出的几个图标才被大家通识。
  tip：

1. 没有必要为国际用户翻译图标，只要图标考虑到文化差异即可（例如，不同国家的邮箱看起来非常不同，而信封看起来相同，因此对于电子邮件程序来说，信封比邮箱更具国际化意义）。
2. 主页、打印和搜索放大镜图标就是这样的例子。除了这些例子之外，大多数图标对用户来说仍然是模棱两可的，因为它们在不同的界面上具有不同的含义。缺乏标准会随着时间的推移阻碍图标的采用，因为用户不能指望它每次遇到时都具有相同的功能。

图像

• 若使用轮播图，是否停留超过4秒？避免快速的动画会让用户忽略闪烁的文字或其他刺激性动画的区域

• 优先考虑携带信息的图像而不是装饰图像

• 避免使用水印图形（背景图像上带有文字）

• 对于软件产品或在线服务，请显示全分辨率的屏幕截图而不是照片。

• 切勿将页面的关键元素（如徽标、标语或主标题）制作成动画。

• 避免过于抽象，是否有意义用户一眼能看出你网站是干嘛的？若需要图像则利用具有积极内涵的通用视觉模式

  根据英格丽德·费特尔·李 (Ingrid Fetell Lee) 关于积极美学的研究 ，人们倾向于认为拥有流域和不同地形的景观是美丽的，无论他们来自哪种文化。这种现象并不仅限于风景，还延伸到许多其他视觉效果：婴儿般的面部特征、植物、圆形、充满活力、饱和的颜色、五彩纸屑、烟花等等。这些听起来可能像是随机的一些令人愉悦的视觉效果，但所有这些视觉效果的共同点是满足人类需求的承诺：食物、水、住所、安全、温暖、陪伴和社区。例如，自然界中鲜艳的色彩通常与水果和蔬菜（食物的承诺）有关，而湖泊或河流的风景则与水有关。

• 避免过度使用图像，文字也是有必要的

• 平衡图像与文本

• 若有文字，避免两者重叠，以下左图即文本和图重叠了，影响了用户阅读
  

• 只要有可能，请编写传达图像内容的替代文本。不要复制标题中已提供的内容，也不要使用替代文本来替代搜索引擎优化。

• 图片预览大图是否有关闭按钮

导航/菜单

菜单分为两部分组成，一部分是图标，一部分是文本

• 菜单选择是否合乎逻辑地归类到有意义的类别中？
• 多级菜单情况下，是否有方法返回到上一个菜单？
• 菜单中是否有良好的层次结构

按钮

• 避免使用多个操作按钮，因为它们可能会分散用户对提交表单的目标的注意力。
• 对不同重要性的按钮，是否有不同颜色/类型的按键，如确认/取消。前进/返回
• 尽量少使用通用文本，比如按钮提交是订阅就不要使用提交模糊信息
• 避免重置按钮
• 按钮应该有阴影

点击开关按键

• 避免文本描述时用否定状态，如隐藏通知这样的文本用户会先迷惑打开还是关闭。会由于隐含的双重否定而导致额外的解释困难。

框架设计

导航设计

导航组件包括全局导航、本地导航、实用导航、面包屑导航、过滤器、方面、相关链接、页脚、宽页脚等。

导航组件的一些示例：1）实用导航；2）全局导航；3）面包屑路径；4）本地导航；5）相关链接（在本例中为文章和博客文章）；6）宽页脚。（www.sba.gov）

对于每个导航组件，必须做出一系列决策：

使用优先级：用户对这个导航组件的依赖程度有多高？例如，用户主要使用本地导航浏览网站吗？还是他们更可能依赖相关链接？
位置：它应该出现在哪些页面上？它应该放在页面布局网格的哪里（例如，顶部、左侧、右侧、底部）？
模式：哪些导航设计模式最能支持可查找性和可发现性——标签、超级菜单、轮播、手风琴等等？

IA（信息架构）设计

定义信息架构所采取的活动包括：

内容清单：检查网站以查找和识别现有网站内容
内容审核：评估内容的实用性、准确性、语气和整体有效性
信息分组：以用户为中心的内容关系定义
分类法开发：定义适用于所有网站内容的标准化命名约定（受控词汇表）
描述性信息创建：定义有用的元数据，可用于生成“相关链接”列表或其他有助于发现的导航组件

设计规则

简约视觉设计

极简主义设计策略旨在通过删除不支持用户任务的不必要元素或内容来简化界面。

简约设计原则

• 只显示在屏幕上做出决策所需的所有信息吗？
• 是否避免大量文字
• 避免网站组件板块看起来像广告，因为用户会对看起来像广告的区域失明。比如链接的设计越花哨，用户就越有可能误以为它是广告。
• 是否避免过度极简*
• 分组设计是否符合期望。可以假设这是个报纸，你需要有亮点且分块明确
  • 网站排版是否按照语义分块？
  • 分块是否符合视觉设计？在左上角显示更重要的信息。朝着右下角的方向移动，信息从更重要的级别变为不太重要的级别。只要记住，眼睛会被吸引到页面的左上角，然后一路向下。
  • 同等组件排版如多个表单是否按照语义分组？
  • 是否有意义的项目组之间有白色空间分隔？

是否避免过度极简*
归纳出为了极简经常使用的元素，并且可能有常见问题，你需要注意一下

现象	注意
过度使用扁平化UI	注意：保留点击、悬停等效果
过度使用单色	缺点：可能无法识别出有哪些是强调点 注意：对强调元素有一致的配置
省略大量元素如，菜单项、链接、图片、图形、线、字幕、纹理（如渐变）、颜色、字体、图标	缺点：用户可能很难触发到你隐藏的重点 注意：确保您不会通过删除或隐藏用户所需的内容而使用户的主要任务变得更加困难
大量负空间	注意： * 添加或删除负空间将如何影响页面的传达层次结构？ * 负空间将如何影响页面顶部显示的内容？页面折叠仍然很重要：如果有理由，用户会滚动，但他们更关注页面顶部的内容。 * 负空间将如何影响交互成本：用户是否需要更加努力才能获得他们需要的信息？ * 负空间在不同的分辨率下需要如何化？
选择大面积的背景或轮播图	注意： * 确保您选择的图像或视频具有真正的目的或帮助人们了解网站 - 否则它们只会分散用户对您的实际内容的注意力。 * 如果您想让人们理解它，请确保文本清晰易读。请记住，易读性是用户可以区分单个字母的程度。可读性是指他们处理单词、短语和浏览文本的能力。如果您使用轮播或视频，则需要测试每种可能的背景 - 视频的每个图像或帧，以及各种屏幕分辨率。 * 请注意大图像和视频对性能的影响。确保您采用自适应方法，这样您的移动用户就不会等待桌面大小的视网膜照片通过网络数据连接加载。 * 不要自动播放视频。许多用户对未经他们同意而自动播放的视频感到沮丧，特别是如果这些视频有音频。 * 避免制作人物在背景中缓慢移动的哈利·波特绘画风格的视频。您不想分散用户的注意力并让他们感到害怕。

• 每个图标是否与其背景显著不同？
• 页面上最重要的元素位于层次结构的顶端，页面上最重要的元素位于层次结构的顶端： 标题和称谓 、 小标题 、 引语 、 正文 、 不太重要的信息
• 在设计中创造深度感和错觉：阴影、重叠、透视
• 平衡确保设计中的任何元素都不会喧宾夺主：考虑元素的大小、形状和重量

系统状态可见性

每当用户与系统交互时，他们都需要知道交互是否成功。系统是否真的捕捉到了按钮按下的情况，或者是否正忙于其他事情而忽略了它？该商品是否已添加到购物车？请求通过了吗？ （用户产生这些疑问的原因之一是，他们之前曾被无法正常工作的技术所困扰。然而，即使技术无错误的快乐日子到来，人们仍然会怀疑他们是否真的正确地单击或点击。）

对用户操作的适当反馈可能是用户界面设计的最基本准则。它可以让用户了解当前状态，并允许他们将交互引导到正确的方向，而不浪费精力。

此类反馈可以很简单，例如用户单击按钮后颜色的变化，或者流程需要更长的时间才能完成时的进度指示器。这些指示器表明系统正在运行，并减少不确定性——例如，防止用户多次点击同一个按钮，因为他们不确定第一次是否有效。
所有互动都必须有开头、中间和结尾。一旦任务完成，也许可以给用户一些安心的感觉，为他们提供信息反馈和明确的下一步选择（如果适用）。不要让用户猜测！

• 每个界面都以标题开头吗/描述页面内容的页眉？
• 所选图标/元素是否高亮显示从未选择的其他图标/元素？
• 何时有视觉反馈是否选择或移动了对象？
• 是否通知用户系统通过反馈延迟（超过400ms）？

如果命令需要 2 到 10 秒的时间，则显示等待动画，例如“加载中”。这种进度指示器告诉用户稍等，在正常光标返回之前不要单击任何其他内容。
如果某个命令需要超过 10 秒，请设置一个明确的 进度条，最好是完成百分比指示器（除非您确实无法预测操作完成之前还剩下多少工作）。

传达系统状态
传达系统状态的最佳方式取决于几个关键因素：

• 所传达的信息类型
• 信息的紧急程度——用户立即看到它有多重要
• 用户是否需要根据信息采取行动

状态通信的三种常见方法包括弹窗、通知和状态指示器

---

指示器
指示器可能会给您的整体界面带来噪音和混乱，并可能分散用户的注意力，因此，考虑在设计中使用多少个指示器（如果有的话）非常重要。
在确定某个指标是否合适时，请考虑以下因素：

• 这些信息对用户有多重要？是否值得占用页面空间来告知用户？
• 这些信息的使用频率是多少？
• 用户是否希望看到该信息？
• 如果不提供的话，是否会被错过？
• 用户发现这些信息对于应用程序来说有多重要？

---

允许轻松撤销操作

犯错后发现有 "撤消 "选项，会让人松一口气。如果用户知道有一种简单的方法可以撤销任何错误，他们就不会那么焦虑，也更愿意探索各种选项。这一规则适用于系统中的任何操作、步骤序列或数据输入。范围可以从一个按钮到一整套操作。

• 是否提供了撤销操作的选项？
• 撤销选项是否易于找到？
• 撤销操作是否易于理解和使用？
• 用户是否可以撤销多个步骤？
• 撤销操作后，是否有清晰的反馈？
• 撤销选项是否涵盖所有关键操作？
• 用户是否能够在特定时间内执行撤销操作？
• 撤销功能是否能够恢复原始状态而不引起其他问题？

用户控制和自由

必须给予用户控制权和自由度，让他们感觉自己在控制着系统，而不是相反。作为设计者，要尽量避免意外、干扰和任何用户没有要求的事情。用户应该是行动的发起者。

• 用户能取消正在进行的操作吗？
• 提示是否意味着用户有控制权？
• 用户是否被提示确认会导致严重破坏性后果的操作？
• 避免跳转，或打开新的窗口尤其是手机端会让用户不知道如何返回上一级。您需要让受访者专注，并且不要通过重定向到其他页面来中断该过程。否则，他就会“迷失”在某个地方，并且忘记他最初做了什么。
• 避免打开pdf，研究表明这会让人沮丧，而是提供一个pdf导出链接

一致性和标准

一致性是关键。无论是布局、按钮的大小、颜色代码，还是编写页面时使用的语气。如果你在一个页面上以特定格式显示信息，那么它在所有页面上都应该是一样的。

• 页面语气
• 样式是否统一
• 即点击、悬停、选中的样式应该只有一套

防止出错

精心的设计能从一开始就防止问题的发生，这比良好的错误信息更好。Interface 的设计应尽可能消除错误。如果出错，系统应让用户简单理解并解决问题。一个好办法是显示清晰的错误提示和解决问题的描述性提示。这些都是处理系统错误的简单方法。

• 是否提前约束输入条件如数值范围选择范围，以防止最终操作出错
• 若有关联的输入是否有视觉约束，即A选了若影响B，就使得B为下拉框而非用户指定。
• 错误消息是否提示问题的原因？
• 如果有输入错误，产品是否会突出显示错误/表单字段？
• 提示是否以建设性的方式陈述，没有对用户进行公开或暗示的批评？

识别而非记忆

让用户识别用户界面中的信息，而不是期望他们记住或回忆起这些信息。简而言之，就是不要让用户付出不必要的努力！让导航尽可能清晰、详细和直接。为他们提供提示，在需要完成一些时间敏感的任务时提醒他们，并在屏幕或流程发生变化时通知他们。尽量保持 Interface 简洁一致，并遵守模式、标准和惯例。这可能有助于提高识别度和易用性。根据用户的目标，您可以添加各种功能来帮助他们。例如，在电子商务环境中，可以显示最近浏览或购买的商品列表。

• 相似的项目是否相互作用并以相同的方式行动？
• 完成一个操作所需的所有信息是否都已提前提供？
• 是否有全局搜索
• 改变访问过的链接的颜色

使用的灵活性和效率

何时使用快捷方式：重点关注那些许多人倾向于重复使用的功能。
简而言之，系统的设计必须让有经验和无经验的用户都能使用。Thinking 在设计系统时，新用户可以在不知道任何快捷方式的情况下找到执行任务的方法。但是，在设计系统时，也要让有经验的用户能够使用快捷方式快速高效地完成操作。

• 系统提供了提高效率的快捷方式吗？
• 这些快捷方式可以自定义吗？
• 系统提供多个选项/方法来完成一个动作吗？
• 系统是否能够适应新用户和高级用户？
• 保留用户的输入。让用户通过编辑原始操作来纠正错误，而不是从头开始。例如，即使输入的原始文本不符合该字段的要求，也显示该文本，并允许用户修改它。

不同平台的转换需流畅*

1. 相互作用
   除了屏幕大小之外，您还需要考虑用户与每个平台交互的方式以及这些交互可能如何影响您的设计决策。
   在每个点开发设计时考虑可访问性也很重要。不同的人群会以不同的方式与您的产品进行交互，例如使用屏幕阅读器、隐藏式字幕或切换设备。首先，亲自尝试使用其中一些技术会很有帮助，以便了解残障人士如何在不同平台上与您的产品进行交互。

2. 内容布局
   在用户体验设计领域，布局是指信息在屏幕上组织的方式。例如，在为台式机或笔记本电脑进行设计时，您可以使用熟悉的标准化尺寸：横向（水平）模式。屏幕很宽，内容可以分栏布局，设计也更加灵活。
   相比之下，手机内容通常以纵向（垂直）模式布局，非常适合滚动。此外，移动电话通常允许用户通过旋转设备来选择使用横向（水平）模式。在设计中实现这一点需要设计师做更多的工作，但为用户提供了更广泛的选择。
   考虑更多平台上的内容布局：平板电脑结合了台式机和移动电话用户体验，这意味着您可以在设计中结合台式机和移动电话内容布局的各个方面。智能手表往往具有紧凑的方形或矩形屏幕，提供很少的数字空间来布局内容。

3. 功能性
   用户选择一个平台而不是另一个平台的原因有很多，但功能和他们想要完成的任务类型是一个巨大的驱动因素。您对每个平台的设计可能会根据您期望用户需要该产品的方式和时间而有所不同。

帮助用户识别、诊断和恢复错误

一条好的错误信息应该礼貌、易懂、Precision、有建设性、清晰可见，并尽可能缩短解决问题以及教育用户的时间。

• 有没有明确的迹象表明出了问题？
• 有没有错误消息准确说明了出了什么问题？比如模糊表达，XX字段出错，请重试。更改为XX字段，必须是以3，4，5开头，请重试
• 有没有提供解决方案，比如一个可以立即解决错误的快捷方式？

用用户熟悉的理解设计系统

用户可能会根据以往使用类似系统的经验，对系统的运行方式做出假设。你可以使用他们熟悉的语言，帮助他们克服最初的不适应。

• 产品是否使用专业行话或技术性语言？

用户会看到“出了点问题。请重试。”错误消息，但没有任何关于错误原因或如何修复的详细信息。至少过去的原生桌面应用会告诉人们（通常使用普通用户无法理解的技术术语）问题是什么。

• 是否避免使用不常见的图标？
• 使用方式是否符合人期望
• 是否避免网站提供的信息零散，彼此之间没有或者很少有联系。即IA设计是否符合期望。尝试重新访问这些信息的用户可能会进入网站完全不同的区域，所看到的内容与第一次体验不同。那些确实找到脱节信息的用户只能自己拼凑起来。无论哪种方式，他们都会给网站留下负面印象。
  从组织的角度来看，这不仅是用户体验的失败，而且也是内容管理的噩梦：网站某个区域的信息可能会与其他地方的信息重复、不同甚至相矛盾。一种解决方案是在提供相关信息的页面之间添加相关链接。更好的解决方案是考虑为什么信息分散在整个网站中，适当地整合信息，并为其选择最佳位置。网站的其他区域可以参考有关该主题的内容的主要位置，而不是重复信息。

网上购物车 用户期望网上购物车像实体店一样直观。 意外添加费用（如运输保险）会导致用户困惑和不满。

在某些移动应用中，“后退”按钮会带用户到更高层级，比如用户看完A新闻跳到B新闻，用户其实返回是想看A新闻，但是返回可能被设计为了回到首页，违背用户期望。

搜索栏 网站应只有一个搜索栏。 多个搜索栏会导致用户混淆，认为网站没有信息。

字体设计规范

在中文的字号设置中，不需要严格参考英文官方规范，可根据以下分类进行调整：

字段类型	字号	字重
标题	16-34pt	Medium/Semibold
正文	13-16pt	Regular/Medium
注释	10-12pt	Light/Regular

UX流程

按照以下流程并不会损坏你的创造力，相反在流程下工作会使得你具有更多时间产生创造力

图UX设计的五个阶段，虽然这听起来像是一个线性过程，但设计思维框架应该是迭代的，这意味着您在完善设计时将重复某些阶段。例如，根据您在测试期间收到的反馈，您可能需要进行额外的研究、集思广益新想法或开发新原型。

与网上主流的：理解、定义、构思、设计、测试不同，我将其改为更适合一般项目的五个阶段：调研、构思、设计、测试、迭代

调研

注意光环效应，人们在评估事物时常常受到一些非相关因素的影响，而这些因素使得他们的判断不完全准确。这种现象被称为“光环效应”。

1. 光环效应：

   • 当一个人或一个事物的一个显著特征（例如美观）影响了我们对其其他特征（例如易用性）的看法时，这就是光环效应。因为美观容易评估，所以它可能会过度影响我们对易用性等更难评估的特征的判断。

2. 示例说明：

   • 如果你问某人一个网站是否易于使用，他们可能会说“是的，它很漂亮。” 但实际上，美观和易用性是两个不同的特征，仅仅因为一个网站很漂亮并不意味着它易于使用。

3. 任务分析和数据源三角测量的重要性：

   • 为了避免光环效应在用户体验评估中的影响，使用基于任务的分析（让用户完成特定任务以评估易用性）和数据源三角测量（使用多种数据源来验证结果）是非常重要的。这些方法能够提供更全面和准确的评估。

结论

• 在网站规划、设计流程、定义关键绩效指标。

我通常喜欢报告总体可用性，因为​​它们是最简单的可用性指标，而且非常容易理解：人们可以使用设计吗？
例如，网站总体可用性为 70% 意味着用户能够完成他们在该网站上尝试的任务的 70%。当然，这意味着他们有 30% 的时间会失败，这就是失败率。

版本	任务时间（分钟）	规范化任务时间	每个任务的错误	规范化错误	总体可用性
1.0	30	0.8	2	0.1	95%
1.1	25	0.7	1	0.05	96%
1.2	20	0.6	3	0.15	94%
2.0	15	0.5	0	0	98%

调研用户主体

通过采访等方式，回答有关用户的五个问题：

用户到底是谁？他们的情况如何？

1. 是否熟悉技术？
2. 用户文化如何？
3. 常用平台：手机/网站？
4. 是否有色盲？–颜色配置
5. 是否残疾？–语音输入

用户对该产品或类似产品的体验有何评价？

用户对他们的体验有何看法？

用户在体验之前、期间和之后会做什么？

用户对他们的体验有何感受？

构思

1. 在https://dribbble.com/ 中搜索你的目标，通过该网站可以大量的获得一个同类应用。

比如我搜索关键词profile，且我开发的是手机端，在参考完大量项目后我大脑就有个怎么设计这个目标的初步想法。

2. 进行头脑风暴，有很多头脑风暴工具，我使用的是Figma的Brainstorm，将想到的词写下来
3. 对头脑风暴进行分组（即简要版的map）
4. 画线框图，可以根据自己熟悉的页面开始画。首先先画整体架构，画完后对重要的部分再第二步进行细化

设计

迭代

迭代简单来说就是逐步完成一个又一个的设计版本。对于每个版本，你都会进行可用性评估（例如用户测试或启发式评估），并根据这些可用性发现修改下一个版本。建议至少进行 2 次迭代。这 2 次迭代对应 3 个版本：第一个设计草案（我们知道它永远不够好），然后是 2 次重新设计。但更好的是喜欢5-10 次迭代或更多，特别是每周迭代 （甚至更频繁）。直至产品已经没有优化的了。迭代需要设计到敏捷开发，可以结合我的项目管理文章看

如何表明你的重要性
在迭代之前，你需要先评估此次优化有会带来的ROI，这个一般是用于告诉你的领导者你的工作为何重要的，详细看

测试方法-数据驱动设计

报表	日期	访问人数	访问次数

根据该表可以通过判断是否出现以下情况进而使得网站更健康:

• 重点页面的类别流量低
• 类别着陆页跳出率高

收益可量化（UV，PV，日活，转化率）

测试方法-A/B 测试

比如A/B 测试、5 秒测试、访谈、实地研究、卡片分类或树测试。（有些服务——最著名的是 UserZoom——支持多种此类研究方法。）

测试方法-树测试

通常用于

测试方法-大声思考

用户测试迭代

在您的日程安排中安排尽可能多的迭代。我真正喜欢的是每周测试；例如，将每个星期三设为您的用户日，并安排 4 位客户进行测试。

选多少个测试人员
最好的结果是测试每次不超过 5 个用户并尽可能多地运行小型测试，根据预算可以选3-5个做首批测试。您需要至少使用 15 位用户进行测试才能发现设计中的所有可用性问题.您需要运行多个测试，因为可用性工程的真正目标是改进设计，而不仅仅是记录其弱点。在对五名参与者进行的第一次研究发现了 85% 的可用性问题后，您将希望在重新设计中解决这些问题。你永远不知道用户会创建什么样方式使用产品，因此你需要每周大约与5个用户对话，搞清楚为什么他们放弃使用了你的产品，直到持续几周，访问用户没有什么信息量那就可以停止

创建新设计后，您需要再次测试。尽管我说重新设计应该“修复”第一次研究中发现的问题，但事实是您认为新设计克服了这些问题。但由于没有人能够设计出完美的用户界面，因此无法保证新设计确实解决了这些问题。第二次测试将发现修复是否有效。此外，在引入新设计时，即使旧问题得到修复，也始终存在引入新可用性问题的风险。

例如，如果你有一个网站，供孩子和父母使用，那么这两组用户的行为就会有很大差异，因此有必要对这两组用户进行测试。对于旨在将采购代理与销售人员联系起来的系统，情况也是如此。多组测试时你不需要像单组一样特别具体，因为很多项都是重叠的。但仍旧建议分好组。

调研模板
在进行可用性测试之前，您应该准备一份与测试目标相一致的测试脚本。为了最大限度地发挥测试的作用，你需要准备一份合适的脚本，并知道如何提出好问题。

观察测试
让用户大声思考，若用户不习惯可以先给出别人大声思考的视频。

主动测试

主题	测试脚本
热身问题	首先，请问您的职业是什么？ 你白天都做些什么？ 您上网时经常访问哪些网站？ 您使用哪种类型的移动设备，如智能手机或平板电脑？ 您在这些设备上都做些什么？ 您有喜欢的网站或移动应用程序吗？
屏幕浏览	很好。 我们已经完成了问题的回答，下一步就是开始浏览了。 首先，我想请大家看一下产品详情屏幕，并告诉我你对它的看法：你可以在这里做什么，它有什么用途。
任务	现在我们准备开始测试。我想提醒您几件事。你们可以尽可能自然地独自使用软件，就像没有人在看一样。 请在使用我们的程序时大声思考。请您在不使用搜索功能的情况下完成这些任务。我们想听听您的意见，比如您在页面上的导航位置、为什么要点击那里，以及点击后您期望发生什么。如果您在测试过程中有任何问题，我会在测试结束后尽量回答。现在我将大声宣读测试步骤，并给你们打印一份。测试步骤如下 1. 你知道如何浏览其他页面吗？ 2. 你认为xx图标是做什么用的？ 3. 你能找到返回上一页的方法吗？ 4. 你知道如何xx吗？ 5. 屏幕下方的xx是什么意思？ 6. 如果你犯了错误，你能纠正吗？ 7. xx按钮的作用是什么？
总结问题和反馈	完成这些任务的体验如何？ 你认为功能和信息的位置如何？ 我希望您对这些任务逐一打分在 1 到 5 的 Scale 中，您认为难度如何？为什么？ 这项任务有什么复杂之处吗？ 是否与您的预期完全一致？
测试后访谈	您有什么问题吗？ 您觉得有什么遗漏或者可以做得更好吗？ 再次感谢您抽出宝贵时间参与我们的研究。您今天提出的意见对我们很有帮助。

*以上最重要的是任务，可以花多一些时间，多一些观察，你可以根据以下角度去设计你的脚本：

• 失败或成功
• 完成任务的时间
• 首次点击或轻点的时间
• 点击和轻点次数
• 轻扫次数
• 导航路径，如页面或屏幕数
• 任务的重试次数

• 每轮调研后，分析结果并将其转化为下一次迭代的重新设计建议

采用客户旅程图记录用户问题
使用客户旅程图记录用户的问题，很有效。
设计方法：客户旅程地图通常以事件的时间轴为基础。例如，从客户访问网站的那一刻开始。然后，记录他们在实现目标过程中的进展，包括查看他们想要的产品或菜肴、定制、注册网站，甚至取消订单。这些只是您在使用网站时可能要执行的部分操作，但可能还有很多其他操作。最好的客户旅程地图是详细而细化的。

你可以使用很多工具和模板完成，比如
Miro：Miro 是一款在线协作白板工具，非常适合团队一起创建和编辑客户旅程图。它提供了丰富的模板库和强大的设计工具，使得制作旅程图变得简单和直观。

一个基础的客户旅程图为以下样子

举个例子，开发小程序同理，在餐饮店中应用客户旅程图的一些示例包括：
预订体验：顾客如何找到餐厅，预订过程是否简便。
到店体验：顾客进入餐厅的第一印象，接待的效率。
点餐过程：菜单是否清晰易懂，服务员是否友好有效。
就餐体验：食物的质量、氛围、等餐时间等。
结账和离店：结账过程的便捷性，顾客的整体满意度。

启发式迭代

自定义你的设计评估表

你可以参考以下的原则在每次评估一个网站时，建立excel，包含两个表格
表格1：清单总览

启发式评估 评估人员姓名 设备/浏览器/OS 网站URL 日期	容易修复度 (ER) E0.修复需要最大的努力 E1.修复需要相当大的努力 E2.修复需要一些努力 E3.修复很容易，但只需付出很小的努力 E4.修复是琐碎且易于实现的
1.系统状态的可见性 通过建设性、适当和及时的反馈向用户告知正在发生的事情。
问题	ER
2… …
问题	ER

表格2：细节项

启发式评估 评估人员姓名 设备/浏览器/OS 网站URL 日期	严重性等级（SR） 0.未发现违规行为 1.仅外观问题 2.小的可用性问题 3.主要可用性问题 4.可用性灾难
1.系统状态的可见性 该网站通过建设性、适当和及时的反馈向用户告知正在发生的事情。
清单	YES NO NA SR
清单项1 清单项2 …
1.系统状态的可见性 该网站通过建设性、适当和及时的反馈向用户告知正在发生的事情。
清单	YES NO NA SR
清单项1 清单项2 …