UX/UI 设计：从研究到交接的真实过程

用户体验与用户界面：花费金钱的区别

用户体验是一个网站的运作方式。用户界面是它的外观。好的设计始于用户的问题，而不是颜色调色板。如果有人无法判断在哪里点击，即使是最美观的界面也无法拯救你——他们会关闭标签页，去找一个按钮可见的竞争对手。

正式来说，用户体验是整个旅程：一个人是如何到达的，他们在寻找什么，他们找到了什么，花了多少步骤，在哪里遇到困难，最后的感受如何。用户界面是这个旅程的视觉层面：排版、颜色、网格、按钮状态、图标、间距。这些层是相互连接的，但它们解决不同的问题。

为什么这种差异是商业性的，而不是学术性的

想象两个在线商店。第一个看起来很简单，但过滤器响应迅速，价格一目了然，结账只需三个字段。第二个有美丽的动画、巨大的摄影作品，并且购物车在显示运费之前要求注册。第一个卖得更多。并不是因为外观不重要，而是因为收入来自于完成的动作，而不是印象。

所以这里是工作公式：用户体验决定某人是否达到目标，用户界面决定他们在达到目标的过程中是否信任你。你需要两者。但当你必须选择先修复什么时，先修复逻辑。

设计不能做什么

• 它无法拯救一个糟糕的产品。如果你的价格高于市场而没有解释，布局也无法掩盖这一点。
• 它不能替代流量。强大的 用户体验/用户界面设计 提升了从访客到咨询的转化率，但仍然需要有人带来访客。
• 它不能读心。没有关于客户的数据，设计师只能猜测——而猜测的成本高于研究。

这就是为什么在我们的 工作室服务中 设计从来不会作为单独的项目出现，称为“绘制模型”。它与分析、内容和开发并行——否则你得到的只是一个昂贵的图像，实际上没人能构建。

步骤 1. 研究、目标和竞争对手评估

设计始于“这个网站上必须发生什么”的问题，而不是“你喜欢哪个颜色”。在这个问题得到回答之前，每次修订都是基于品味的争论——而品味是没有人能赢得的争论。

我们事先确定的内容

• 商业目标。咨询？订单？预订？求职申请？一个目标是主要的，其余的是次要的。
• 目标行动。一个人应该点击的特定按钮。如果有五个按钮，而它们都被称为“主要按钮”，那么没有一个会被点击。
• 受众。他们是谁，对该主题了解多少，使用什么设备，他们对你已经了解多少。
• 反对意见。他们犹豫的原因：太贵、太慢、不明确，"他们会做我这种工作吗"。
• 限制因素。截止日期、预算、现有的CRM、品牌形象、法律要求。

数据不一定要昂贵。销售电话录音、聊天记录、现场搜索查询、热图、客户最常问的问题——这些已经足够让你停止猜测。如果分析正在进行，看看人们在哪个步骤掉队。

竞争对手评估——不是为了复制

你查看竞争对手是为了了解市场规则和发现空白。规则是用户默认的期望：价格、时间表、包含的内容、评论。空白是没有人提供的东西：计算器、诚实的交付时间、真实的照片而不是库存照片、对流程的简单解释。复制别人的布局是毫无意义的——你不知道它是否对他们有效，同时你也会继承他们的错误和决策。

启发式评估

如果一个网站已经存在，在任何人绘制任何东西之前，先对照基本的网站可用性原则进行检查：你所在的位置是否清晰；系统状态是否可见；一个动作是否可以撤销；错误是否易于理解；界面是否使用客户的语言；在屏幕之间是否需要记住内容。两天的时间可以产生一个问题列表，其中一半的问题可以在不重新设计的情况下解决。

步骤 2. 用户场景而不是页面

人们不是来"访问网站"的——他们是来完成某件事情的。所以你设计的是场景，而不是页面：一个人从到达到结果的每一步。

一个场景可以用一句简单的句子来概括。"一个家长正在寻找家附近的课后俱乐部，想查看时间表和价格，并希望在五分钟内通过手机预订试用课程。" 就这样。仅凭这句话，你就可以看到需求：位置过滤器、可读的时间表、没有“联系我们获取详细信息”的价格、一个简短的表单和一个可点击的电话号码。

你需要多少个场景

对于服务网站，通常需要三个到五个。太多会让你分散精力；太少则会遗漏某些东西。一个典型的集合："从未听说过这家公司，只是在研究"，"与竞争对手比较，寻找选择的理由"，"已经决定，想快速联系"，"现有客户，需要联系或文件"。

不同状态，不同屏幕

初级设计师只画出完美状态：完整的目录、简短的名称、每张照片都到位。现实更为丰富。每个关键屏幕都需要状态：

• 空的 — 过滤器没有找到任何内容，购物车是空的，还没有订单。这个人看到什么，他们接下来去哪里？
• 加载中 — 数据传输时屏幕上显示的内容。
• 错误 — 服务器宕机，支付失败，某个字段错误。
• 溢出 — 三行产品名称，40个项目，2000个字符的评论。
• 成功 — 表单已发送。接下来怎么办？“谢谢”不是答案；人们想知道什么时候会有人打电话。

状态是工作中最无聊但最有价值的部分。它们正是将可以构建的模型与每半小时就会有开发者联系你的模型区分开的关键。

步骤 3. 信息架构

信息架构是事物的存放位置及其名称。它在第一个像素存在之前解决了你一半的导航问题。

这项工作听起来简单，但在实践中却很繁琐：收集所有内容，按意义分组，用客户的语言命名这些组，设定优先级。关键部分是客户的语言。“解决方案”对你来说是有意义的；这个人正在寻找“冰箱维修”。你的内部组织结构不应该泄露到菜单中。

节省时间的规则

• 菜单不是一个垃圾场。五到七个顶级项目。如果不合适，分组就是错误的。
• 最多三次点击的深度到任何重要页面。超过这个，你就会失去人。
• 一个含义，一页。两个相似的页面在导航和搜索中相互竞争。
• 标签是查询。菜单项应该与人们实际思考和谈论的方式相匹配。

页面内的优先级

在页面内同样适用这个逻辑：先回答，然后详细说明，再提供证据，最后进行行动。访客在几秒钟内决定他们是否在正确的地方，并且他们从第一个屏幕开始做出决定。如果页面顶部写着“欢迎来到我们的网站”，那么你就把最宝贵的空间用在了一个占位符上。

区块顺序也是设计——而且是最能带来收益的部分。我们在我们的文章中分析了区块顺序的逻辑着陆页结构：相同的机制，压缩到一个页面中。

没有模型的测试架构

将章节名称的列表给五个项目外的人，让他们将其分组并说出他们期望在哪里找到什么。分歧将在一个小时内显示出问题所在。这很便宜，而且胜过在会议室争论。

步骤 4. 线框图：没有化妆的骨架

线框是屏幕的黑白示意图：什么在后面，什么更重要，行动在哪里。没有花哨的字体，没有阴影，没有摄影。故意如此。

灰色的重点在于剥离一切分散注意力的元素。展示一个彩色的模型，客户不可避免地会说“让按钮更亮”，而关于按钮位置不对的讨论就不会发生。灰度线框将讨论拉回到实质：这个公司是什么，它提供什么，为什么值得信任，以及接下来该做什么。

线框中应包含的内容

• 真实的标题和标签，而不是Lorem ipsum。虚假文本在长度和意义上都不真实。
• 真实的元素数量：如果目录有12个项目，就不要画三个。
• 来自上一步的每个关键状态。
• 立即提供移动和桌面版本的关键屏幕，而不是“我们稍后会适应它”。

需要绘制多少个屏幕

并不是所有的。你绘制的是页面类型：主页、服务页面、目录、项目页面、表单、文章、联系方式、实用页面（404、感谢页面）。其他所有内容都由相同的模块组合而成。如果每个新页面都需要一个新的模型，你就没有系统——你只有一堆图片。

这是争论的最便宜地方

在线框中移动一个模块只需几分钟。在构建好的、与CMS连接的网站中移动它则需要几天和金钱。因此，这正是你应该反击、提出尴尬问题并要求理由的地方。从这里开始，变更的价格随着每一步的增加而上升。

步骤 5. UI 概念：信任的表现

一旦结构达成一致，视觉层就会到来。它的工作不是装饰——而是使结构显而易见并赢得信任。

界面中的信任来自无聊的东西：整洁的网格、一致的间距、可读的文本、真实的照片而非库存照片、诚实的数字、没有视觉噪音。没有人会想“我爱这个模块化网格”——他们只是感觉这里的东西井然有序，因此工作也可能是有序的。反之亦然：不对齐的客户标志和三种不同的蓝色被解读为“随意拼凑”。

UI概念由什么构成

• 排版。类型配对、大小、行高、行长。这是网站感觉的80%，因为网站主要是文本。
• 颜色。一个中性色基础，一个强调色用于目标操作，功能色用于错误和成功。只在重要的地方使用强调色，否则它就失去作用。
• 网格和节奏。一个间距步骤（比如4或8的倍数），而不是凭眼睛估算每个间隙。
• 图像。你自己的工作和人们的照片胜过完美的库存照片，因为没有人相信库存照片。
• 语气。界面在说话：正式、友好、技术。这是一个决定，而不是偶然。

一个概念是一个屏幕，而不是整个网站

通常你会在两个或三个方向上展示主页或一个关键服务页面。目标是达成一种语言，而不是签署最终版本。真实项目中这种语言的样子更容易在投资组合：不同的行业需要不同的视觉语调，即使它们背后的过程是相同的。

而关键点是：一个概念的评判标准是“它是否服务于目标”，而不是“我是否喜欢它”。更多内容请参见反馈部分。

步骤 6. 设计系统和组件

设计系统是一组现成的构件以及使用它们的规则。按钮、字段、卡片、标题、间距、状态——一次定义，随处重用。

没有系统，每个新屏幕都是从头开始绘制。六个月后，网站上有七种灰色、四种按钮大小和三种产品卡片，没人记得为什么。有了系统，新页面在几个小时内组装完成，而不是几天，并且看起来像整体的一部分。

系统中包含什么

• 令牌。颜色、字体大小、半径、阴影、间距步长——作为命名变量，而不是现场发明的值。
• 组件。一个包含每种状态的按钮（默认、悬停、聚焦、按下、加载、禁用），一个带有错误和提示的输入框，一个卡片，一个模态框，一个表格，分页。
• 组合规则。何时使用哪个标题，块之间的间距，元素在溢出时的行为。
• 模式。表单、过滤器、结账 — 从组件构建的标准组合。

客户为什么应该关心，而不仅仅是设计师。

一个系统是对你未来的节省。一个新服务，一个活动着陆页，一个额外的部分 — 所有这些都可以从现有的内容中组合而成，无需新的设计项目。它还可以防止网站随着不同人员的编辑而逐渐分散。

规模取决于项目：一个小型宣传网站只需要一页规则，而一个大型目录或产品则需要一个完整的库。在Astrina项目中，组件系统正是使每种页面类型保持一致而无需单独绘制每个屏幕的原因。

步骤 7. 原型、开发者交接和设计质量保证

原型是一个可点击的模型，在其中你可以在没有一行代码存在之前走完整个场景。它回答了静态图片无法回答的问题：“当我按下这个时会发生什么？”

原型可以捕捉到昂贵的错误：表单中的冗余步骤、提交后的死胡同、令人困惑的返回方式、重置自身的过滤器。五个人大声走过场景教会你的东西比一个月的内部辩论要多。你不需要实验室——你需要观众中的某个人、一个任务和一个保持安静的观察者。

交接实际上包含的内容

• 在两个或三个关键宽度下的模型：移动设备、平板/中间、桌面。
• 每个组件和屏幕状态。
• 令牌和规则：颜色、字体、间距步骤、溢出行为。
• 行为：什么是可点击的，什么会打开，什么会动画，以及持续多少毫秒。
• 最终文案，而非占位符文案。资产：图标、图片、以正确格式的徽标。
• 边缘案例：非常长的标题、缺失的照片、零结果。

良好的交接不是“这是文件的链接”。而是设计师和开发者一起走过模型并大声说出那些不明显的部分的会议。半小时的对话可以节省一周的消息。

设计质量检查：构建后的检查

一旦网站组装完成，设计师会再次检查——这次是在浏览器中。间距、文本换行、状态、真实数据上的行为、焦点、动画速度、表单行为。这是一个短暂的阶段，但如果跳过它，模型和实际网站之间总会有差距。规则很简单：在设计质量检查通过之前，项目就没有完成。

移动优先和无障碍的简单语言

你开始在手机屏幕上设计——不是因为它时尚，而是因为那里的限制更严格。如果内容适合并且在 360 像素宽时正常工作，它将在桌面上无缝展开。另一种方向几乎从不有效。

移动优先是一种优先级的学科。在小屏幕上，你不能一次性展示所有内容，因此你被迫诚实地回答什么更重要。这个答案也会改善桌面版本。

在移动设备上检查什么

• 点击目标不小于一个手指尖。紧凑在一起的小链接会导致误触和烦恼。
• 没有内容超出边缘；没有水平滚动。
• 电话号码可以拨打，地址可以打开地图，表单字段可以调出正确的键盘。
• 重要的操作可以在不需要无尽滚动的情况下到达。
• 大图像不会在移动连接上导致加载缓慢。

可访问性：四个因素可以带来 80% 的结果

• 对比。浅灰色文本在白色背景上在模型中看起来优雅，但在阳光下户外则难以阅读。对比度有助于视力低下的人——也有助于你在便宜的屏幕上移动时。
• 专注。使用键盘导航时，您可以看到您所在的元素。因为“丑陋”而去除焦点环是一个常见且严重的错误。
• 键盘。整个表单可以在不触碰鼠标的情况下填写和提交。可以关闭模态框；可以退出菜单。
• 替代文本。对图像含义的简短描述。它对盲人用户和搜索引擎都有帮助。

无障碍设计并不是一个单独的昂贵阶段。这是一组习惯：永远不要仅依赖颜色传达意义，给字段加标签而不是依赖占位符，编写人类可以采取行动的错误信息。在设计阶段内置成本微乎其微。发布后再加上去则需要花费真正的钱。

文案是设计的一部分

界面更多是由文字而非图形构成。标题、字段标签、按钮文本、错误信息——这些都是以文字形式表达的设计决策。

这给我们一个规则：在没有完成内容的情况下设计就像是在算命。设计师发明了一个三字标题；客户的标题是十二个字。发明了三个好处；真实的只有两个，而且不同。模型在内容阶段崩溃，大家都感到惊讶。

修复界面的文字

• 按钮描述结果。"获取报价"胜过"提交"。人们应该知道点击后会发生什么。
• 标题要回答问题，而不是引发悬念。"医疗诊所的网站"有效；"我们创造未来"无效。
• 错误信息告诉你该怎么做。"无效格式"不好。"请输入格式为 +44… 的电话号码"好。
• 标签胜过猜测。如果一个领域需要特定的东西，请在错误之前说明，而不是之后。
• 更少的词，相同的意思。每多一句话就降低了必要的一句被阅读的几率。

一个实践可以节省数周时间：在任何东西被绘制之前，先为关键屏幕起草文案——即使是粗略的，在电子表格中。然后设计师可以使用真实的长度和真实的含义，而不是为了适应布局而扭曲现实。

如何提供有用的反馈，以及多少轮修订是正常的

拖延项目的最常见原因不是“糟糕的设计师”——而是以品味表达的反馈。“这让我没有吸引力”，“让它更现代”，“我妻子不喜欢”——你无法用工作来回应这些，只能再次尝试猜测。

有用评论的公式

谈论问题，而不是解决方案。结构是：我看到的 → 让我担忧的 → 它的风险例如："第一个屏幕没有说明我们在全国范围内工作。客户在第一次通话中就会问这个——我担心他们中的一些人根本无法到达表单。" 这是设计师可以处理的事情。"把按钮做成红色"是一个完成的解决方案，这可能与按钮无关。

加快签署的规则

• 将修订意见汇总成一个列表来自所有相关人员，而不是整天在聊天中逐渐提出。
• 指定一个决策者。如果五个人都批准，模型就变成了一个平均值——而平均值是无法销售的。
• 在你自己的手机上查看，而不仅仅是在大屏幕上。这就是你的客户查看它的方式。
• 不要重新开启已定的决定。一个达成一致的结构是为了新事实而重新开启，而不是为了新的情绪。

正常情况下多少轮

常见做法：每个阶段（结构、概念、模型）进行两轮修订，加上一轮最终润色。这不是工作室的吝啬——这是为了保护项目。无尽的轮次几乎总是意味着目标没有达成，而不是像素。如果第三轮仍在争论同一件事，问题就出在研究阶段，这就是你应该回去的地方。

昂贵的常见错误

• 在没有内容的情况下设计。基于虚拟文本构建的模型在真实文本到来时会崩溃。总是如此。
• 抄袭竞争对手。你在抄袭一张图片，却不知道它是否适合他们。
• 装饰胜于清晰。动画、视差和滑块，而不是回答“你在卖什么”。
• 一个屏幕上有多个目标。五个权重相等的按钮等于零次点击。
• 为陪审团设计。奖项模型和销售模型是不同的类型。
• 没有人拥有接受权。没有决策负责人的项目拖延数月。

清单：在设计进入开发之前的评判

在模型进入构建之前，运行此列表。每个项目都是现在花费几分钟，之后花费几天的更改。

意义

• 在5秒钟内，第一屏告诉你：这是什么公司，它提供什么，面向谁，以及接下来该做什么。
• 每个屏幕都有一个主要操作，并且在视觉上是主要的。
• 关键异议得到回应：价格或价格范围、时间表、保证、你是谁。
• 每个声明都有支持：案例研究、带有姓名的评论、您可以实际证明的数字。

结构

• 模块遵循 "回答 → 细节 → 证明 → 行动"。
• 导航：5–7个项目，标签使用客户的用词，任何重要内容在3次点击内。
• 没有两页关于同一主题的内容。

完整性

• 每种页面类型都有移动版本，而不仅仅是桌面版。
• 状态被绘制：空、加载中、错误、成功、长文本、多个项目。
• 文案是最终版，图片是真实的，任何地方都没有Lorem ipsum。
• 实用页面存在：404、感谢页面、支付失败页面，如果您需要一个。

系统和可访问性

• 按钮、字段和卡片来自同一套，而不是每个屏幕重新绘制。
• 间距遵循单一步骤；颜色的数量正好是所需的。
• 文本对比度足够，焦点可见，表单可以通过键盘完成。
• 图像有替代描述，字段有标签，错误有可读文本。

构建准备

• 开发人员在签署之前审查了模型，并确认可以按计划构建。
• 行为有文档记录：点击、打开、动画、表单行为。
• 在管理员中，哪些是可编辑的，哪些是硬编码的，清晰可见。
• 有人被指定在构建后接受设计质量保证。

如果每个项目都是肯定的，就自信地交给它。如果有超过三个是否定的，你还没有准备好——而构建不会修补这些漏洞，它会把它们固定在混凝土中。想要对你当前的网站或某人为你绘制的模型有一个外部的看法吗？联系我们——我们会根据同样的列表进行评估，并诚实地告诉你首先需要修复什么。

常见问题