frontend-design

前端设计

设计从进入页面到获得有用结果的最短清晰路径。将视觉上的精致视为优秀界面决策的结果，而非额外添加的装饰。让产品给人沉静、可靠、深思熟虑的感觉。

从用户的任务出发

在选择卡片、颜色或导航之前，先明确：

1. 谁在使用这个屏幕？
2. 他们来到这里要完成什么？
3. 最主要的操作或信息是什么？
4. 他们需要了解什么，才能放心采取行动？
5. 移除哪些内容不会妨碍他们完成任务？

让每个屏幕只回答一个主要问题。只有在确实存在次要需求时，才添加次要功能，绝不要为了填充空间而添加。要假设创作者对产品过于熟悉；对新用户的引导应比你觉得必要的程度更明确。

如果需求不完整，就根据产品背景推断出合理的主要任务，并简要说明这一假设。如果有参考截图或既定设计系统，应先查看并遵循，而不是另创一套毫不相关的视觉方向。

先确立规则，再构建屏幕

定义一套精简的系统，并在各处重复使用：

• 克制的中性色基调和一种主强调色；
• 用于状态、图表、警告和危险操作的语义色；
• 一种字体，或经过审慎选择的少量字体搭配，并建立精简的层级；
• 一致的间距比例、控件高度、图标尺寸、边框粗细和圆角比例；
• 稳定统一的操作和对象用语；
• 清晰区分主要、次要、辅助和危险操作的样式。

优先使用近白色或低调的中性色表面、细边框和微妙的层次区分。只有在需要表达层级、焦点或重要起点时才使用阴影。避免光晕效果、冲突的渐变、随意的玻璃拟态，以及多个相互竞争的强调色，除非品牌或需求明确要求如此。

使用同一套连贯的图标系列，例如 Lucide、Phosphor，或项目现有的图标集。除非表情符号属于产品内容或品牌语言，否则不要将其用作界面图标或装饰。对于不熟悉的纯图标控件，应配上标签或工具提示。

保持控件的几何样式一致。仔细检查文本居中、图标对齐、内边距、圆角和基线对齐，不要盲目接受框架默认样式。

建立层级，而非堆砌内容

把每个屏幕都当作只有一个主语的句子。通过尺寸、字重、对比度、位置或留白，让最重要的元素一目了然，再降低周围元素的视觉权重。

将鲜明的颜色留给有意义的内容或操作。让产品数据、状态和主要操作承载色彩，导航和界面外框则保持低调。不要给每个标签、按钮、关键指标或类别都使用不同颜色。

根据所呈现的信息和任务选择组件：

• 对于密集且需要比较的记录，使用表格和紧凑列表；
• 只有在分组有意义时才使用卡片，不要把卡片当作所有内容的默认容器；
• 将低频的行操作放入清晰易懂的更多菜单；
• 突出重要的数字或字段，弱化元数据；
• 对于简短、专注的表单，使用居中模态框，而非空的侧边面板；
• 根据内容的重要性调整留白，不要反复使用完全相同的卡片网格；
• 如果能让用户掌控浏览进度并明确知道何时结束，优先使用明确的分页或“加载更多”。

用一个问题审视每个元素：它能帮助用户理解、决策或完成任务吗？如果它只是让屏幕看起来更充实，就将其移除。

将界面文案写成导航

从用户视角出发，使用朴实、具体且以结果为导向的语言。根据操作结果为控件命名，例如“保存更改”“发送邮件”或“删除项目”；如果有更准确的动词，就不要使用“提交”或“继续”这类含糊标签。

在整个产品中，同一操作始终使用同一个词。如果按钮写着“发布”，完成消息就写“已发布”。不要对同一操作交替使用“删除”“移除”和“丢进回收站”。

标签、辅助文本和消息各司其职。说明错误时提供恢复路径。空状态应引导用户采取有意义的第一步。将营销文案的重点从实现方式或功能清单转向买家想要的结果。

设计完整的状态模型

不要只设计理想状态下的截图。测试真实且棘手的内容：长名称、缺失值、零结果、大量行、窄屏幕、缓慢请求、请求失败和权限有限的情况。根据内容定义换行、截断、溢出和响应式行为，而不是使用任意的字符数限制。

对于每个异步或影响重大的流程，都要包含适用的状态：

• 初始和空状态；
• 加载或进度；
• 部分可用或禁用；
• 错误及恢复方式；
• 成功或完成；
• 可行时提供撤销。

立即让用户看到操作正在进行。加载内容时使用与内容形状相符的骨架屏，短暂等待时使用熟悉的进度指示器，长时间任务则显示明确的进度或令人安心的状态文本。绝不要让用户面对毫无解释的空白界面。

为破坏性、高成本或不可逆操作添加适度的防误触机制。说明后果，根据风险程度要求确认；仅在操作确实严重时要求输入指定文本进行确认，并明确显示完成状态。对于可恢复的破坏性操作，尽可能提供撤销。

渐进式引导新用户

避免强制用户在开始有效操作前必须关闭的导览。让第一个有价值的操作一目了然，完成后再揭示下一步；如果设置包含多个步骤，则显示简短的进度路径。

通过克制的反馈来庆祝有意义的进展。首次成功或重要里程碑可以使用彩纸动画或轻松活泼的动效，但日常操作不宜如此。对于 B2B 产品，只有在数据确实支持时，才展示节省时间、完成工作或带动收入等可信的成果指标。

让动效发挥作用

使用动效传达状态、连贯性、进度、层级或因果关系。保持精准简短。避免滚动劫持、纯装饰性的入场动画、持续的背景动态，以及无法帮助用户理解的视差效果。尊重减少动态效果的偏好。

请问：“这个动效告诉用户什么？”如果答案是“什么也没有”，就删掉它。

围绕证据设计 SaaS 落地页

在首屏中清楚说明产品是什么、面向谁或解决什么问题、承诺带来什么结果，以及用户接下来该做什么，不要让用户自行猜测。同一页面中，前往相同目的地的链接应使用相同标签。

优先展示真实的产品证据，而非泛用的图库图片。展示经过聚焦裁剪的画面或简短的产品演示，以证明该版块的主张；不要让访客必须检查整张仪表盘截图才能找到相关细节。避免在页面中反复使用相同的文字与图片交替版块，或一模一样的四卡片行。为重要证据留出更多空间，让页面保持疏朗。

只添加回答以下问题所需的版块：这是什么？它如何提供帮助？它如何运作？我可以信任它吗？它的价格是多少？我接下来该做什么？只有在真实内容和产品深度足以支撑时，才添加品牌标志、用户评价、徽章、巨型菜单、插图或动画。

构建、检查并简化

开始实现前，编写一份精简的设计约定，涵盖屏幕的主要用途、层级、配色、字体层级、间距、圆角、操作层级、图标系列和用词。项目已有合适的设计令牌和组件时，优先复用。

然后：

1. 构建主要路径和响应式结构。
2. 添加真实的内容和完整的状态模型。
3. 检查桌面和移动端尺寸下渲染的 UI。
4. 检查对齐、信息密度、对比度、焦点、键盘操作和减少动态效果的设置。
5. 先删减视觉元素，再考虑添加更多。
6. 确认新用户能快速识别主要操作和当前系统状态。

优先打造精简、连贯的界面，而非大而全的展示。产品的真实内容、品牌、文案或一个合理的标志性细节，都可以体现独特性，但绝不能以牺牲清晰度、信任感或任务完成度为代价。

最终审核

交付前确认以下各项：

• 每个屏幕都只有一个明确的主要意图和视觉主体。
• 主要、次要和破坏性操作都一目了然。
• 颜色用于传达含义，而非装饰界面。
• 字体、间距、圆角、图标和操作动词保持一致。
• 重复组件经过精简，便于浏览。
• 空状态、加载状态、错误状态、成功状态和破坏性操作状态都已处理。
• 真实数据和窄屏布局不会破坏设计。
• 动效能够传达信息，并尊重减少动态效果的设置。
• 落地页的宣传内容都有明确的产品实例作为支撑。
• 每个保留的元素都能帮助用户理解、决策或完成任务。