UI 设计不是「把页面做好看」

客户在和我们沟通设计需求时，最常说的一句话是："你们帮我把页面做得好看一点就行。"

这句话背后有一个误解：认为设计等于美化。实际上，一个合格的产品设计师做的事情，80% 都和"好不好看"没有直接关系。

UI 和 UX 是两件事

UI（User Interface，用户界面）是视觉层面的设计，关注颜色、字体、图标、布局——也就是大家理解的"做好看"。

UX（User Experience，用户体验）是行为层面的设计，关注用户怎么使用产品：用户在哪一步会迷路？完成一个任务需要几步？按钮放在哪里点击率更高？

一个页面可以很好看（UI 好），但用户却找不到他想要的功能（UX 差）。这种产品在真实使用中会让用户沮丧。好的设计是两者都照顾到。

一个设计稿从草图到交付的完整流程

第一步：需求梳理与信息架构

在打开设计软件之前，设计师需要搞清楚：这个产品是给谁用的？他们的目标任务是什么？核心页面和功能列表是什么？信息架构（功能和页面的树状结构）确定了，才开始画界面。

第二步：低保真线框图

用黑白的线框图确定页面布局和信息层级，不加颜色和具体图片。这一步的目的是快速验证逻辑是否合理，便宜地发现问题——这个阶段改一个功能入口的位置，只需要移动几个矩形；如果等到高保真稿再改，设计师要返工几个小时。

第三步：视觉风格确定

在一两个关键页面上确定整体视觉风格：主色调、字体、圆角大小、阴影风格、图标风格。这个阶段通常需要出 2–3 个方向供客户选择。

第四步：高保真设计稿

按照确定的视觉风格，完成所有页面的详细设计，包括各种状态（加载中、空状态、错误状态）。

第五步：标注与切图，交付开发

设计稿需要标注尺寸、颜色、字号，并导出图标和图片素材，供开发人员按照设计稿还原界面。

设计系统为什么能省钱

设计系统（Design System）是一套可复用的设计组件库：按钮有几种状态和样式，输入框长什么样，卡片的间距规则是什么，颜色有哪几种……

有了设计系统之后，新页面的设计时间会大幅减少，因为大多数组件直接复用，而不是每次都从零画。更重要的是，整个产品的视觉风格会保持一致，不会出现这个页面蓝色按钮、那个页面绿色按钮的情况。

对于需要长期迭代的产品，前期投入时间建立设计系统，后期每个功能迭代的设计成本都会明显降低。

甲方最容易踩的坑

如果你想了解我们的设计流程，或者对现有产品的设计做一次评估，欢迎联系我们。