界面设计
1. 导读
很多人说"做 UI"，脑子里想到的是颜色、圆角、图标、卡片、插画和动效。这些当然重要，但界面设计真正要解决的是另一组更具体的问题：用户进来后先看哪里，关键状态会不会被错过，危险操作有没有被区分；页面变成真实数据、长文本、错误和小屏幕时，还能不能完成任务。
一个页面可以很漂亮，却很难用。比如表单视觉很精致，但必填项不清楚，错误提示藏在页面底部；仪表盘图表很多，但不知道哪个指标最重要；移动端页面排版干净，但按钮太小、列表太密、关键状态看不见；后台界面组件统一，却没有体现业务优先级。
界面设计是把结构、行为和内容转化为用户可直接操作的界面：它回答的是这些结构和行为如何在页面上清楚呈现，让用户不必猜测。
2. 核心问题
界面设计要处理七件具体的事：用户进来要完成什么，第一眼该看到什么，哪些信息会影响决策，哪些状态和风险不能被藏起来。
界面设计到底设计什么？它设计的是用户能看见、理解和操作的界面结构，而不只是视觉风格。
页面结构如何服务任务？页面上的信息、入口、控件和反馈，要围绕用户目标和业务优先级组织。
视觉层级如何帮助理解？大小、位置、对比、留白、分组和对齐，都会影响用户先看什么、后看什么、是否看得懂。
控件如何选择？按钮、输入框、下拉框、开关、复选框、标签页、表格、卡片和弹窗都有适用边界，不能只按"看起来好看"选择。
界面状态如何表达？空状态、加载中、错误、成功、禁用、无权限、选中、展开、折叠、批量选择，都需要设计。
常见界面如何处理？登录注册、列表筛选、详情页、表单、仪表盘、设置页和移动端页面，都有不同设计重点。
界面设计如何衡量？它可以通过任务成功率、错误率、首次成功率、完成时间、表单错误、页面性能、可访问性检查和用户理解测试来观察。
3. 关键概念与定义
界面设计
界面设计，User Interface Design，是设计用户与系统交互的可见界面和控件层。
它包含页面结构、布局、视觉层级、控件、状态、组件、图标、颜色、字体、间距和响应式规则。界面设计不是 UX 的全部，但它是用户完成任务时最直接接触的层。
例如一个审批详情页，界面设计要决定申请人、金额、附件、历史审批和风险提示怎样分组；"通过""退回""转交"这些操作怎样区分；退回理由在哪里写；异常单据如何被标记；用户从列表进入详情后，能不能不迷路地回到刚才的筛选结果。
页面结构
页面结构是一个页面中信息、操作、反馈和辅助内容的组织方式。
页面结构要回答：用户进入页面后先看什么，主要任务在哪里，次要信息如何放置，关键操作是否清楚，错误和状态如何出现。页面结构不清，再好的视觉风格也会让用户迷路。
视觉层级
视觉层级是通过大小、位置、对比、颜色、粗细、间距和分组，组织用户阅读顺序和注意力。
视觉层级不是为了让页面第一眼更有冲击力，而是帮用户少做猜测。一个客户详情页里，"高风险客户""最近一次投诉""续约日期""下一步跟进"应该先被看见；公司简介、历史备注和低频字段可以退到后面。
控件
控件是用户与系统交互的界面元素，如按钮、输入框、选择器、开关、复选框、单选框、表格、菜单、标签页、弹窗、滑块和日期选择器。
控件选择会直接影响理解和操作。比如"开启双重验证"适合用开关，因为它表达一个立即生效的开关状态；"选择可见部门"适合复选框，因为用户可能同时选多个部门；"审批结果"适合单选，因为通过、退回、拒绝不能同时发生；如果用户需要频繁比较选项，把所有内容藏进下拉框反而会增加负担。
组件
组件是可复用的界面单元，可以包含结构、样式、状态和行为。
组件不等于设计系统。组件库只是设计系统的一部分，设计系统还包括原则、模式、设计令牌、规范和治理机制。
状态稿
状态稿是展示界面在不同状态下如何呈现的设计稿。
同一个页面可能有空状态、加载中、正常状态、错误状态、筛选后无结果、无权限、只读、编辑中、保存成功、保存失败。没有状态稿，开发和测试很容易只实现"理想页面"。
响应式与多端适配
响应式是界面根据屏幕尺寸、设备能力和使用情境调整布局与交互的方式。
它不是把桌面页面缩小到手机。移动端、桌面端、平板端、车载屏、可穿戴设备都有不同输入方式、注意力条件和信息密度。界面设计要根据任务重新组织，而不是简单压缩。
4. 概念边界与相近概念区别
界面设计先回答页面如何承载任务
视觉设计更关注色彩、字体、图形、品牌风格、审美表达和视觉系统。界面设计更关注界面如何承载任务。
两者紧密相关，但不能互相替代。一个页面可以视觉风格统一，却没有清楚主次；也可以结构清楚，但视觉表达粗糙。正式产品需要两者结合。
与界面可理解、可操作直接相关的视觉表达，属于界面设计的责任范围；更系统的视觉设计方法另有专门讨论。
界面设计不是交互设计
交互设计关注行为、流程、状态和反馈；界面设计关注这些行为如何在页面上呈现。
例如"支付失败后允许用户重试"是交互逻辑；失败提示放在哪里、重试按钮如何命名、订单状态如何显示、已填写信息如何保留，是界面设计问题。
如果交互逻辑没有想清楚，界面会变成空壳；如果界面表达不清楚，交互逻辑也无法被用户理解。
高保真不等于设计成熟
高保真设计稿常常让人误以为设计已经成熟。但如果页面结构、控件选择、状态和响应式没有处理，高保真只是把不成熟的方案画得更精细。
线框图也可以做界面设计，只是保真度较低。关键是它是否表达页面结构、信息优先级和基本操作。
组件应根据任务场景选择
使用组件能提高一致性和效率，但组件不是万能积木。
同一个按钮组件，在不同页面承担的任务风险不同；同一个表格组件，在审计、销售、客服和运营场景中的信息密度不同。设计师不能只问"有没有这个组件"，还要问"这个组件是否适合当前任务"。
仪表盘应服务决策判断
仪表盘很容易被做成一堆图表。
有用的仪表盘不是把图表摆满，而是帮特定角色做判断。销售负责人打开页面，应该先知道本月线索量、转化率、重点区域和异常客户；运营打开页面，可能更关心今日订单积压、投诉上升和需要马上处理的队列。如果看完仪表盘仍不知道要做什么，它就只是数据墙。
响应式不是等比例缩放
移动端空间小，但用户不只是看少一点内容。他可能在路上、在会议间隙、用单手操作、网络不稳定。桌面端空间大，但用户也可能需要同时比较、批量处理和长时间操作。
响应式设计要重排任务优先级，而不是把所有内容压进更小屏幕。
5. 方法、流程或框架
从任务和信息层级开始
界面设计应先回答两个问题：用户在这个页面要完成什么任务？为了完成任务，他需要先看到什么、再看到什么？
例如一个订单详情页，用户可能要确认状态、查看物流、申请退款、联系客服、查看费用。页面结构应先突出订单状态和下一步动作，再放订单明细、商品信息、费用和历史记录。
如果设计从视觉风格开始，团队很容易讨论颜色和卡片，却忽略用户真正要做的事。
设计页面结构
页面结构可以按"主任务、关键信息、辅助信息、次要操作、帮助和反馈"来组织。
主任务是用户进入页面最可能完成的事。关键信息是做决策必须看到的内容。辅助信息帮助用户确认细节。次要操作不要抢主任务。帮助和反馈要在需要时出现，而不是到处堆满。
页面结构的好坏，常常决定用户能否一眼理解页面。
建立视觉层级
视觉层级要服务理解。
常用手段包括：更大的标题表达页面主题，更强的对比表达关键状态，更近的间距表达同组关系，更明显的位置表达主要操作，更弱的样式表达次要信息。
但层级不能只靠颜色。如果所有重点都用红色，红色就失去意义；如果所有按钮都很醒目，用户反而不知道哪个最重要。层级要克制，重点要有限。
选择合适控件
控件选择要看用户任务、选项数量、风险和频率。
少量互斥选项可以用单选按钮；多个可并存选项用复选框；即时开关用开关控件；长列表选择可能需要搜索型下拉；高风险操作需要确认或预览；频繁操作不适合藏在深层菜单里。
控件不是纯视觉元素。选错控件会改变用户理解。比如把"是否接收营销短信"做成默认开启的开关，既涉及交互，也涉及伦理和信任。
设计界面状态
界面状态要覆盖真实使用。
一个列表页至少可能有：首次进入空状态、加载中、正常列表、筛选后无结果、搜索无结果、加载失败、无权限、批量选择中、删除后、刷新后。一个表单至少有：默认、输入中、字段错误、保存草稿、提交中、提交失败、提交成功。
状态设计不是补稿，而是产品完整性的一部分。
处理常见界面模式
不同界面有不同重点。
登录注册围绕身份、信任、错误恢复和隐私提示展开；列表筛选要处理信息密度、筛选逻辑、排序和批量操作；详情页侧重状态、关键字段、上下文和下一步；仪表盘服务决策优先级和异常识别；设置页聚焦分组、权限、保存机制和风险提示。
成熟设计师不是记住某个模板，而是知道模板背后的任务逻辑。
做响应式和多端适配
响应式设计可以从内容优先级和任务优先级出发。
哪些信息在任何设备上都必须出现？哪些可以折叠？哪些操作在移动端需要简化？哪些桌面端操作需要批量能力？表格在小屏幕上是否应变为卡片？筛选是否需要变成抽屉？主要按钮是否需要固定在底部？
响应式不是最后把页面"适配一下"，而是在界面结构阶段就考虑。
评审和验证界面
界面设计可以结合启发式评估、设计规范检查、可访问性检查、可用性测试和行为数据验证。NN/g 的可用性启发式能帮助团队检查系统状态、控制、错误、识别和一致性等界面问题。1
平台规范和设计系统也能提供基础边界。读 Material Design、Apple HIG 和 Fluent 时，不要只摘组件截图，更要看它们如何处理导航、状态、反馈、错误和平台预期。读 Carbon、Atlassian 和 Salesforce Lightning 这类企业产品资料时，则可以把注意力放到表格、筛选、权限、批量操作、空状态和异常提示上。
但规范不能替代用户测试。规范告诉团队常见做法，用户测试告诉团队当前场景中用户是否真的理解和完成任务。
6. 实际工作场景
场景 1：登录注册
登录注册看似简单，但它连接着信任、安全和首次体验。
用户在登录注册页上，最怕的不是字段多一两个，而是不知道自己正在进入哪条路径：是在创建新账号，还是找回旧账号；手机号、邮箱和第三方账号能不能互通；验证码失败后是否要重发；忘记密码会不会丢数据；平台会怎样使用手机号和个人信息。
如果界面只追求极简，隐藏了错误原因和恢复路径，用户可能会在第一步就离开。登录注册的好界面不是字段最少，而是让用户快速、安全、可恢复地进入产品。
场景 2：列表筛选
列表是很多产品的核心界面。
电商商品列表、企业后台订单列表、客服工单列表、审批列表、数据记录列表，都需要解决同一个问题：用户如何从大量对象中找到目标，并采取行动。
列表界面要处理信息密度、列的优先级、筛选条件、排序、批量操作、状态标签、空结果和保存视图。对企业后台来说，用户可能每天处理几百条记录，表格行高、列固定、批量选择、快捷操作和异常标记都会影响效率。
场景 3：数据详情页
详情页不是把所有字段都展示出来。
一个订单详情页要突出订单状态、下一步动作、异常提示、费用、物流和售后入口。一个客户详情页要突出客户状态、风险、最近互动、关键联系人和下一步跟进。一个审批详情页要突出审批状态、申请理由、风险字段、历史记录和操作按钮。
详情页最常见的问题是字段太多、重点不清、操作分散。界面设计要帮助用户判断"现在最重要的是什么"。
场景 4：仪表盘
仪表盘的价值是帮助用户监控、判断和行动。
如果一个运营仪表盘堆了 20 张图，用户却不知道今天有没有异常、异常在哪里、是否需要处理，那它就没有完成任务。更好的仪表盘要先区分使用者：高管看趋势和风险，运营看异常和行动，分析师看细分和原因。
界面上也要区分主指标、辅助指标、异常提示、筛选条件和后续行动。图表不是越多越专业，越能支持判断才越有价值。
场景 5：移动端页面
移动端界面要尊重小屏、触控和分散注意力。
按钮要容易点击，表单要减少输入成本，重要反馈要靠近用户操作位置，长列表要支持快速浏览和返回，关键操作要避免误触。移动端还要考虑网络波动、键盘遮挡、单手操作和系统手势。
把桌面页面缩小到手机上，通常会造成信息过密、按钮过小、流程过长。移动端设计需要重新排序任务，而不是压缩界面。
7. 案例
案例 1：Google Material Design3
读 Material Design 时，不要只看按钮长什么样。更值得看的，是它如何把按钮、文本字段、导航、列表、对话框、状态、颜色、间距和动效放进同一套界面语言里。
这能帮助读者理解：成熟界面设计并不只靠设计师个人审美。比如一个团队要同时做注册页、设置页、列表页和错误弹窗，如果每次都重新决定按钮层级、输入状态和提示方式，用户会不断重新学习，研发也会不断返工。Material Design 的价值在于提供一种可复用的组织方式。
案例 2：Apple Human Interface Guidelines4
Apple Human Interface Guidelines 更适合放在移动端和平台一致性里阅读。它讨论平台行为、界面模式、可访问性和交互原则，也提醒团队：用户已经带着某种系统经验进入产品。5
这个案例对设计师的启发是：界面设计不能脱离用户对平台的已有预期。iOS 用户对导航、手势、控件、列表、弹窗和系统反馈有一定熟悉模式。如果产品完全违背这些预期，用户就要重新学习。
8. 数据、指标或衡量方式
界面设计可以从理解、操作、效率、错误和可访问性几个角度衡量。
理解方面，可以看用户是否能说出页面用途、找到主要操作、理解状态和区分不同入口。可用性测试中的首次成功率和任务成功率很适合观察这一点。
操作方面，可以看点击错误、表单错误率、重复提交、取消率、批量操作失败率和输入耗时。界面控件选择不当，常常会在这些指标里表现出来。
效率方面，可以看任务完成时间、列表查找时间、筛选使用率、快捷操作使用率和学习成本。企业后台和 SaaS 产品尤其需要关注效率。
可访问性方面，可以看对比度通过率、键盘可达率、焦点顺序、屏幕阅读器语义和错误提示可感知性。界面设计从一开始就应考虑可访问性。
页面性能也会影响界面体验。加载慢、交互延迟、布局抖动，会让再好的界面结构失效。性能指标不是 UI 指标本身，但会影响用户对界面的感受。
这些指标都不能孤立解释。任务完成时间变短，可能是界面更清楚，也可能是用户更熟练；表单错误下降，可能来自控件优化，也可能是业务规则简化。界面指标要结合任务、用户群、版本变化和业务规则解释。
9. 常见误区
界面设计就是让页面好看——好看重要，但界面首先要支持理解和操作。先说明页面任务、信息层级和状态，再讨论视觉风格。
高保真等于完成——高保真只说明表达精细，不代表结构、交互和状态完整。检查页面是否覆盖关键状态、异常、响应式和真实数据。
组件一致就等于体验一致——组件一致能降低学习成本，但任务逻辑不一致、命名不一致、流程不一致，用户仍会困惑。把组件一致性和任务一致性一起检查。
所有信息都要首屏展示——重要信息需要优先展示，但不是所有信息都要挤在首屏。根据任务优先级、风险和使用频率组织层级。
仪表盘越多图越专业——图表多不代表决策清楚。先定义使用者、问题、异常和行动，再选择图表。
响应式只是适配屏幕尺寸——设备变化会改变输入方式、注意力和任务路径。按设备重新排序任务，而不是等比例缩放。
平台规范会限制创意——规范不是为了压制创意，而是减少用户学习成本和团队重复劳动。在通用模式上保持一致，在品牌、内容和关键体验上做有依据的差异化。
10. 小结
界面设计是把结构、交互和内容转化为用户可直接理解和操作的界面。
它既不是单纯美化，也不是机械套组件。好的界面设计要处理页面结构、视觉层级、控件选择、状态表达、常见界面模式、响应式、多端适配和可访问性基础。
11. 延伸阅读
| 资料 | 推荐理由 | 适合读者 | |---|---|---| | Material Design 3 | 理解跨平台组件、状态、布局和可访问性实践 | UI/UX 设计师、前端工程师 | | Apple Human Interface Guidelines | 理解 Apple 平台界面模式和用户预期 | 移动端设计师、产品经理 | | Fluent 2 Design System | 理解 Microsoft 跨平台组件和界面规范 | 企业产品团队 | | Carbon Design System | 理解企业级 B2B 产品组件和界面模式 | SaaS、后台和设计系统团队 | | Salesforce Lightning Design System | 理解 CRM 和企业后台界面组件实践 | 企业软件团队 | | NN/g 10 Usability Heuristics | 用启发式原则检查界面可用性 | 设计师、产品经理 |2
注释
1 NN/g, 10 Usability Heuristics for User Interface Design。界面应支持系统状态、一致性、识别和错误预防。启发式评估不替代用户测试。 🔗 https://www.nngroup.com/articles/ten-usability-heuristics/
2 Google Material Design / Apple HIG。组件、状态和布局可以通过平台规范建立一致性。 🔗 https://m3.material.io/
3 Apple Human Interface Guidelines。平台规范会影响用户预期和界面模式。 🔗 https://developer.apple.com/design/human-interface-guidelines/
4 IBM Carbon Design System / Salesforce Lightning Design System。企业级界面需要组件、状态、可访问性和复杂模式支撑。 🔗 https://carbondesignsystem.com/
5 Don Norman, The Design of Everyday Things / ISO/IEC 25010。反馈、错误设计和软件质量维度可支撑界面质量判断。 🔗 https://www.iso.org/standard/78176.html