然而，一些最有效的 UX 设计原则几十年来都没有改变。（Steve Krug 在互联网早期撰写的《Don’t Make Me Think》现在对 UX 的相关性一如25年前。）理解这一点的设计师们——那些能够将永恒的可用性洞察与现代设计执行相结合的设计师们——正在创造既能取悦用户又能推动业务成果的网站。以下是如何加入他们。

为什么以用户体验为中心的设计很重要（而美学还不够）

任何设计师都想要什么？当然是取悦用户。许多设计师，或许是考虑到用户在短短50毫秒内形成第一印象，倾向于通过关注美观来达到这个目标。在某种程度上，这确实有效：即使设计本身并不实用，用户也会认为美观的设计更易用。（在用户研究中，这被称为审美-可用性效应。）

然而，华丽的微交互和时髦的调色板只能让你走这么远。正如 Mailchimp 前 UX 总监 Aarron Walter 在他的著作《Designing for Emotion》中解释的那样，深层次的用户满意度只有在解决了功能性和可用性的基本问题之后才能实现。一旦这些元素到位，你才能叠加美感。

忽视这条建议的品牌可能仍然会给人留下良好的第一印象，但如果客户难以浏览网站和完成任务，这种印象很可能会付诸东流。一旦他们离开，他们很可能就不会回来了。

幸运的是，有一个解决方案：以用户为中心的设计。这里有七个永恒的以用户体验为中心的网站设计原则，值得你每天贴在显示器上参考。

1. 使用清晰的视觉层次结构来指导用户操作

大多数网站失败是因为用户无法弄清楚首先要做什么。他们登陆你的页面，扫描三秒钟，然后困惑地离开。问题不在于你的内容没有价值——而是你的视觉层次结构没有发挥作用。

使用大小、颜色和对比度来突出重点

打开你的主页并进行注意力审计。什么最先吸引你的注意，然后是其次、再次？如果不是你的价值主张、社会证明，然后是行动呼吁，那么你存在层次结构问题。

尺寸、颜色和对比度是创建层次结构的主要工具。例如，你最重要的行动号召不应该与你的隐私政策链接大小相同。使用缩放比例来创建标题层级之间的一致关系，从而形成一种用户感觉自然的节奏。

修复基础：

• 将你的主要 CTA 设为页面上对比度最高的元素

• 使用大小来表示重要性——你的主要标题应该占据主导地位

• 通过接近性和间距对相关信息进行分组

• 通过在标题中放置关键要点来方便浏览

• 创建清晰的视觉路径，引导用户到达你的 CTA

将空白区域作为设计元素，而非剩余空间

空白区域是引导用户注意力并减少认知负荷的强大工具。拥挤的网页会使用户不知所措，而空白区域则创造了视觉上的“休息站”，防止用户疲劳。你还可以利用空白区域通过接近性将相关元素分组，隔离重要的行动号召以产生最大影响，并减少与你的信息竞争的视觉噪音。

这里有一个关于空白区域的经验法则：对相关元素使用紧凑的间距，对转化关键内容周围使用宽松的间距。

避免破坏流程的视觉设计错误

常见的影响转化的层级错误：

• Call-to-action 对比度弱

• 所有元素粗细相同

• 糟糕的对比度，不符合可访问性标准

• 桌面优化的层级在移动端崩溃

• 随机的间距模式和元素之间不一致的间隙

用五秒钟规则测试你的层次结构：将你的页面展示给某人五秒钟，然后问他们认为你想让他们采取什么行动。

提示：如果你想认真地完善网站的信息架构，请花时间制作线框图。由于线框图没有任何创意干扰，它们是找出布局核心元素（如间距、对齐、层次结构、对比度以及字体大小）的理想选择。使用Framer Wireframer，你可以使用 AI 在几秒钟内创建简洁、响应式的原型。

2. 让你的网站快如闪电，让用户无需等待

作为设计师，我们对性能的影响比我们意识到的要大。不幸的是，这意味着许多设计师在无意中通过善意的创意选择破坏了网站加载时间。每一个自定义字体、高分辨率图像和流畅动画都增加了“重量”，转化为收入损失。

好消息是：你可以做很多事情来加快速度。

不要给你的网站增加不必要的负担——并优化一切

许多网站被巨大的视频和图片文件或笨重的动画所困扰。使用像GTmetrix这样的页面速度测试工具来衡量你的网站是否有任何意外文件拖慢了速度。

以下是你应重点优化的地方：

• 图片：使用 WebP 格式，文件大小比 JPEG 小 25-35%

• 视频：将视频托管在第三方平台，然后嵌入

• 动画：保持轻量和有目的性——如果动画增加超过 100 毫秒的加载时间，请考虑它是否值得

• 字体：限制字体变体，并尽可能使用系统字体以实现即时加载

设计感知性能

有时，让事情感觉更快比让它们实际更快更重要。加载动画和骨架屏会减少感知等待时间，同时内容在后台加载。当用户理解正在发生的事情时，他们会等待更长时间。

提示：尽可能将优化工作外包给你的网站平台，这样你就可以专注于用户体验设计。Framer 会自动提供响应式图像、延迟加载资产、优化字体加载并将图像文件转换为 AVIF 等下一代格式。通过前往菜单 → 站点设置 → 版本，你可以确保你网站的最新发布版本已优化。

3. 设计与用户意图相符的响应式体验

移动电话已成为许多用户首选的网页浏览设备，这一点已不是秘密。但在你开始新的“移动优先”网页设计之前，请记住，现实情况更为微妙：例如，许多 B2B 网站的桌面流量比例很高，因为用户通常在工作中访问它们。

你的设计方法应该由你的特定用户画像以及他们实际如何与你的产品互动来驱动。

移动优先什么时候最有意义

对于面向消费者的网站、电子商务、内容网站和本地企业，移动优先仍然是黄金标准。鉴于所有网络流量的 64%来自移动设备，你的移动体验有时是用户看到的唯一版本。

在调整你的网站以适应移动端时，请关注以下基本要素：

• 直接支持转化目标的内容

• 足够用拇指点击的触控区域

• 单手导航模式

• 简化的转化流程

桌面优先可能更适合你的时候

B2B 软件、数据密集型应用程序、专业工具和复杂工作流程通常受益于桌面优先设计。当你的用户有以下情况时，请考虑桌面优先：

• 在你的应用程序中花费了大量时间

• 需要同时查看大量数据

• 执行需要精确度的复杂多步骤任务

• 定期使用键盘快捷键和高级功能

财务仪表盘、设计工具、项目管理平台和企业软件在首先为桌面工作流程优化后，再为移动设备上的快速检查和通知精心调整时，通常表现更好。

使用情境驱动设计

情境与屏幕尺寸同样重要。例如，当你在线购物时，你可能会使用笔记本电脑研究和比较产品，并使用手机查看订单更新。项目管理应用程序可能会优先考虑桌面端以进行深入的工作会话，同时确保移动端擅长快速更新和批准。

如果你想考虑这种情境——并更好地取悦用户——那么仅仅将桌面端适应移动端（反之亦然）是不够的。相反，你需要策略性地添加和删除视觉元素，创建独特的布局，让用户能够在每台设备上轻松找到他们正在寻找的功能。

提示：Framer 可以轻松为不同的断点创建不同的体验——而不仅仅是同一设计的缩小版本。你可以根据每个设备的功能优先显示不同的内容、交互和布局，同时保持品牌一致性。

4. 在不牺牲创意的情况下创建可访问的设计

在美国，每四名成年人中就有一名有残疾，因此可访问的设计确保你能够覆盖最广泛的受众。只有 3% 的网站被认为是可访问的，这意味着你的品牌可以通过深思熟虑的 UI 设计轻松脱颖而出。

没有残疾的人也能从可访问性设计中受益：视频字幕帮助嘈杂环境中的用户，良好的对比度改善强光下的可读性，清晰的导航减少认知负荷。

从无障碍设计的基础开始

理解核心WCAG 无障碍原则有助于你做出更好的设计决策：

• 确保普通文本对比度为 4.5:1，大文本为 3:1

• 使用 alt 文本为人类和搜索引擎提供有用的图像描述

• 用描述性文本代替“点击此处”的链接文本，解释目的地和目的

• 使用正确的标题层次结构（H1、H2、H3），这对屏幕阅读器有意义

• 为移动端交互创建至少 44px 的触摸目标

• 每个交互元素都应可通过键盘访问

• 为键盘导航提供可见的焦点指示器

测试实际的可访问性

一旦你打好基础，就可以做很多事情来确保它们真正创造出可访问的体验。

最简单的开始是自己进行一些测试：

• 键盘导航审计：仅使用 Tab、Enter 和方向键浏览你的整个网站。

• 屏幕阅读器测试：使用 VoiceOver (Mac) 或 NVDA (Windows) 体验你的网站，以了解内容对于视力障碍用户的流动方式。

• 技术验证：部署像 aXe DevTools 或 WAVE 这样的工具来发现代码级别的可访问性问题。

• 颜色和对比度验证：使用对比度检查器即时检查 WCAG 合规性。

如果在发布前进行用户测试，请务必获取残疾访问者的用户反馈。您还可以使用 Hotjar 等工具记录用户会话，以发现访问者遇到问题的网站区域。

一旦设计具有可访问性，就添加创意表达

以完全可访问性为核心构建你的体验，然后在此基础上添加可能不符合所有指南的增强功能。虽然你永远不应破坏功能性可访问性，但为了实现项目的更大目标，你可能需要在视觉可访问性指南（如对比度）上留出一些余地。

例如，摄影师的作品集可能会使用低对比度叠加层以达到艺术效果，同时确保导航仍然可以通过键盘访问，并且图像具有有意义的 alt 文本。前卫的品牌可能会使用大胆的排版和非传统的布局，同时确保屏幕阅读器能够有效地浏览网站。一些网站构建器，如 Framer，允许你向大多数用户显示完整版设计，同时向需要更易访问体验的用户提供轻量级的“减少动画”版本。

提示：Framer 会自动将语义标签（如

和

）应用于你的文本样式。你还可以通过“辅助功能”选项卡访问一套广泛的辅助功能控件，用于每个元素，包括图像 alt 文本、视频描述、框架标签、 Tab 键顺序自定义和 ARIA 标签。

5. 让你的导航比你想象的更简单

一个称为雅各布定律的 UX 原则表明，偏离用户习惯通常是个坏主意。由于用户大部分时间都在其他网站上度过，他们期望你的网站也符合他们的习惯。这意味着导航通常是遵循惯例的好地方——而进行实验的坏地方。

通过遵循用户已知的方式来减少摩擦

与其试图重新发明轮子，你在导航方面的任务是使用用户熟悉的标准体验，并在可能的情况下对其进行改进。

从这些标准导航元素开始：

• 用于主要部分的顶部横向导航

• 移动端的汉堡菜单（在经过深思熟虑的实现下）

• 带有深层层次结构的复杂网站的面包屑导航

• 只有少数主要部分的菜单（以减少选择过多造成的困扰）

• 行为像谷歌一样的搜索功能（快速、宽容，带有有用的建议）

通过一些微调来扩展这些基础元素，以改善用户体验，例如在标签中添加图标以帮助用户更快地浏览菜单。许多设计也受益于粘性菜单（尤其是在移动设备上），这样用户可以减少滚动时间。

让你的菜单瞬间易懂

用户体验专家想出了各种各样的简称——比如“像用户喝醉了一样设计”或者“让它变得如此简单，你奶奶都能用”——来提醒自己用户讨厌复杂的设计。在创建导航系统和菜单时记住这一点；完成后，尝试回去让它更简单。

需要注意的几点：

• 过度解释：标签和工具提示是好的，但如果你发现需要添加很多，你的设计可能太复杂了。

• 摩擦：如果用户尝试导航你的设计时存在学习曲线，那么是时候回到绘图板了。

知道何时打破常规（提示：很少）

偏离导航规范应该很少进行，并且只为解决特定的痛点。在偏离标准模式之前，请问自己：“这真的是好的用户体验吗，还是仅仅看起来不同？”

如果你正在创建一个基于沉浸式叙事的用户界面，或者发布一个极简主义的应用程序，那么标准的导航栏可能会削弱用户体验。而以转换为导向的落地页有时会完全删除导航元素，这样最终用户就可以完全专注于行动召唤，而不是被分心。

提示：使用 Framer，你无需编写代码即可设计下拉菜单、面包屑和移动菜单等导航元素。通过将预构建的导航栏和响应式菜单直接拖放到你的设计中，你可以快速迭代和测试跨设备的导航元素。

6. 使用组件构建可扩展的设计系统

不一致的设计体验会让用户感到困惑并损害转化率。当按钮在每个页面上看起来不同，或者表单在不同部分工作方式不同时，用户就会对你的网站失去信心。他们开始怀疑点击那个按钮是否真的能奏效，或者输入他们的信息是否安全。
有一个两部分的解决方案：设计一个可重用的组件库，并在你的整个网站上应用系统化的设计规则。

创建一致的设计规则

大多数设计师通过从零开始创建所有内容来启动项目。这种方法适用于一次性项目，但随着你网站的增长，它会变得不可持续。你最终会得到几十种略有不同的按钮样式、不一致的间距和一个维护噩梦。

在你的设计系统中设置的基本规则：

• 按钮层级：主要动作用主要按钮，辅助动作用次要按钮，不那么重要的任务用三级按钮

• 排版系统：一致的标题大小、正文文本和间距，创建清晰的内容层次结构

• 颜色使用规则：针对不同类型的操作（主要操作、警告、成功状态）使用特定颜色

• 表单模式：标准化的输入字段、标签和验证消息

• 布局网格：在所有屏幕尺寸上都适用的一致的间距和对齐规则

当品牌标准发生变化时，你可以更新这些集中式规则，更改将自动在你的整个设计系统中传播。

设计可重用的组件库

在你的网站上多次重新创建相同的元素有严重的缺点：它需要更多时间，会给用户造成不一致，而且更新起来很麻烦（尤其是在大规模情况下）。通过在项目早期创建组件库，你可以避免重复工作，并使你的用户体验设计过程更高效。

组件的范围可以从简单到复杂的元素：

• 按钮

• 页脚

• 导航

• 页面区块

• 交互式图形和元素

当你更新主组件时，所有实例都会自动更新。

提示：使用 Framer，你可以通过更新组件库中的“主文件”，然后在使用该组件的各个项目中点击“更新”，从而使多个项目中的组件保持一致。

7. 密切关注表单优化和摩擦

当用户到达表单时，你已经让他们完成了大部分转化过程。不幸的是，这往往是事情崩溃的地方。

在电子商务领域，整整 70% 的用户在未完成交易的情况下放弃了购物车。更简单的网站表单摩擦较少，但每一个不必要的字段或令人困惑的交互仍然意味着丢失转化。

解决方案：减少摩擦并提供即时反馈。

使用减少摩擦的表单设计技巧

你添加的每个表单字段都会增加用户放弃的可能性。在包含任何字段之前，问问自己：“这些信息现在绝对必要吗，还是以后再收集？”

从这些表单优化基础知识开始：

• 尽量减少必填字段——只询问你立即需要的信息

• 使用单列布局（多列表单会增加完成时间和错误率）

• 提供智能默认值，例如根据 IP 地址预填充国家/地区

• 使字段标签清晰，而不是使用会消失的占位符

• 根据预期的输入长度适当调整字段大小

减少摩擦的高级技术：

• 将长表单分解为步骤，一次只显示几个字段

• 在 @ 符号后自动建议电子邮件域名

• 用户输入时自动格式化电话号码和信用卡号

• 清晰标记哪些字段是可选的，而不是标记必填字段

目标是让填写表单感觉轻松而不是像工作一样。

处理错误而不让用户感到沮丧

你处理错误的方式决定了用户是纠正错误还是完全放弃。糟糕的错误处理是扼杀表单转化最快的方式之一。

错误预防策略：

• 当用户移动到下一个字段时提供即时反馈

• 显示正确格式的示例（例如日期的“MM/DD/YYYY”）

• 使用适当的输入类型，弹出正确的移动键盘

当错误真的发生时：

• 具体说明：不要说“无效输入”，要解释具体哪里出错了

• 保留用户输入——永远不要让用户重新输入他们已经提供的信息

• 使用清晰的视觉指示器并将错误消息放置在相关字段附近

• 提供正确输入应该是什么样子的示例

提示：使用 Framer，你可以将表单拖放到网站上的任何位置，并轻松自定义验证状态、布局和重定向等方面。你还可以使用 Formflow 等插件创建复杂的多步骤表单。

创造令用户回味无穷的愉悦体验

当用户说“它太好用了”而不是“它看起来太棒了”时，你就知道你设计了一些特别的东西。用户体验设计原则让你能够创建人们真正想要与之互动的网站。你将构建用户友好型体验，这些体验感觉直观、易于访问且真正有用，而不是那些幕后让访客感到沮丧的表面美观设计。

当用户可以毫不费力地浏览你的网站，找到他们需要的东西，并且没有任何障碍地完成他们的目标时，他们会不断回来。这就是为美观设计和为真实用户行为设计之间的区别。

准备好将用户放在首位了吗？加入成千上万使用 Framer 构建网站的人，在不牺牲视觉吸引力的情况下优先考虑用户体验。注册一个免费的 Framer 帐户，从数百个模板中选择，快速开始，并开始创建既能取悦又能转化的体验。