企业官网建设流程全解析

UI 基础设计，怎样先拿到及格分？

兰亭妙微ui设计公司分享：UI 界面底层逻辑并不复杂，但不少新手，甚至从业多年的设计师，产出的作品依旧容易给人 “不够高级、不够精致、缺少设计感” 的观感。

出现这类问题，多数时候并非图片素材、色彩搭配或是审美能力的短板，根源往往出在UI 元素的尺寸与间距把控不到位。

我们可以观察一些黑白灰原型稿：仅仅摆放基础界面元素，不添加色彩、插画，整体却规整和谐、视觉稳定，几乎挑不出基础层面的硬伤，这就是做好尺寸与间距带来的效果。

我把这种状态称作界面的 “规整感”：各个模块元素尺寸合理，排布位置得当。抛开交互与用户体验，在视觉基础层面做到无明显瑕疵。

这也是我建议 UI 学习者优先打磨的核心能力。尺寸与间距就是界面的骨架，如同人的骨相。骨架基础没打好，再花哨的配色、装饰，不仅无法挽救界面，反而容易放大问题，让整体画面更加违和。

读懂 UI 的尺寸：固定尺寸与自适应尺寸

尺寸，代表元素在界面内实际占据的空间大小，即元素的长宽数值。UI 设计里主要分为两类：固定尺寸、自适应尺寸。

先看固定尺寸：元素长宽数值固定，不会随内容变化。像导航栏、底部标签栏、按钮、文本，都有对应的合理取值区间。 并非所有组件都有唯一标准答案，更多是合理范围。例如正文字号建议 13‑16px，关注类按钮高度 24‑32px，数值一旦超出区间，就会显得突兀，和整体界面割裂。

按钮、输入框这类复合控件，采用固定尺寸定义背景与边框时，内部图文元素一般做水平、垂直居中，完成内部定位。 这是 UI 入门的基础知识点，但很多设计师遇到复杂组件时，就容易混淆逻辑：五花八门的模块，内容千差万别，很难提前预设一套固定尺寸。这时就需要用到自适应尺寸—— 组件背景大小跟随内部内容自动变化。

举个例子弹窗提示：提示文案可能是一行、两行、三行。如果强行设置固定卡片高度，就需要按照最多文字的场景预留空间，文案少时会出现大量无效留白，观感很差。主流实现方案，就是卡片高度自适应内容。

自适应模式有个关键点：区分内间距 padding 与外边距 margin，对应 CSS 盒模型的两个属性。 内间距提前设定好，组件自适应后的总尺寸 = 内部内容尺寸 + 内间距。

外边距同样承担两种作用：

1. 限定组件整体最大尺寸：比如 B 端画布 1440px，卡片宽度 = 画布宽度‑左右外边距；移动端 App 画布 393px，卡片宽度 = 393‑16×2。
2. 控制组件与组件之间的距离，例如商品列表卡片之间的间隙，依靠外边距实现。

UI 界面的骨架搭建，本质就是一套尺寸、间距的定义体系。把这套逻辑吃透，就能搭建稳固的界面底层，为后续视觉表现打好地基。

实战案例：C 端动态卡片搭建流程

以移动端 C 端动态卡片举例，完整梳理自适应组件的设计步骤：

1. 依据页面全局外边距，确定卡片总宽 361px；设定卡片内间距 12px，得到内容可使用区域宽度：361‑12×2=337px。
2. 在内容区域内排布全部元素：顶部用户信息、宽度 337px 的图片模块、底部操作图标。
3. 根据内部内容高度，确定卡片背景高度，保证上下内间距统一，再复制组件，生成完整列表。

这里有一条铁则：同级、同类组件，间距必须保持统一，尤其内间距。如果上下、左右内间距数值混乱，页面会显得松散失衡，是首要排查的问题。

很多设计师会反着操作：先把组件背景框定死，再往里面塞内容。内容和固定背景不匹配时，就强行拉扯、压缩内部间距来 “凑数”。这正是组件凌乱、缺乏精致感的主要原因。

自适应组件标准设计流程

1. 判断组件宽高：使用固定尺寸，还是自适应尺寸

2. 预先定义组件的内间距、外边距数值

3. 完成组件内部全部元素的布局排版

4. 根据内容 + 间距，反向确定组件背景的实际大小

Figma、即时设计里大名鼎鼎的「自动布局」，底层正是这套逻辑。 很多同学误区是上来死磕软件操作，到处给组件套自动布局，却不懂背后的设计逻辑。先理解尺寸‑间距‑内容的关系，再使用工具提升效率，这才是正确顺序。工具只是手段，设计逻辑才是内核。

如何刻意练习，掌握界面骨架能力

尺寸间距的把控，不能只靠看懂理论，需要大量刻意练习。最高效的练习方式：纯原型训练。暂时不去纠结产品逻辑、交互体验、视觉美化，只用黑白灰、基础文字、几何图形，专注打磨界面骨架。

骨架设计和视觉表现可以完全拆分。完成高质量黑白原型，本身就可以充当交互原型，直接给到评审环节，不会额外增加工作量，还能提前规避大量基础问题，提升团队整体效率。

练习素材来源十分灵活：拿自己过往旧稿重新改版；截取线上优秀产品界面，做临摹重构。 练习目标：做到不需要反复思索，凭设计直觉就能输出合理的尺寸参数。给自己定一个小目标：完成一百个界面原型练习。

结尾

在日常答疑中，尺寸间距基础薄弱是非常普遍的问题，因此专门整理这篇内容。后续我会带来更多实战改版演示，覆盖移动端、PC 端各类界面。如果你手上有效果不满意的界面稿件，欢迎在社群提交，作为后续改版案例。