二、系统布局的要素：视觉层次与格式塔理论

视觉层次是设计页面时非...不可考虑的一个关键要素。它通过巨大细小、颜色、对比度等手法，引导用户关注沉点内容。格式塔理论则帮我们搞懂用户怎么将视觉元素组合成一个整体。

以苹果官网为例， 其字沉对比、颜色对比、图文排版等手法都体现了视觉层次与格式塔理论的运用。

三、 信息框架：构建系统布局的骨架

信息框架是将信息内容进行组织分层，它决定了用户在浏览或操作页面时能够飞迅速找到沉点内容。以今日头条和飞书为例，它们的布局方式彻头彻尾不同，这反映了它们不同的业务属性。

四、 系统布局规范：一致性、可适配、可控性

系统布局规范需要通过统一的设计元素和间距规范，确保界面元素的一致性、可适配性和可控性。

一致性：界面中的元素和结构需要保持一致性。可适配：布局需要根据不同的设计周围，通过交互动效、界面样式有效作出适配反应。可控性：界面需要直观有效传递内容，少许些用户记忆负担。

五、 设计画板尺寸与屏幕分辨率

在设计过程中，我们需要考虑屏幕分辨率和设计画板尺寸。一般觉得能用 1280 宽阔度画板，以确保在不同分辨率下页面没有遮挡或挤压问题。

六、 界面框架：分层搭建系统布局

界面框架将页面的用户操作行为进行层级区分，将界面中全部的信息层级提取分类，并按结构属性分层。

背景层内容层全局控制层内容弹层

七、 关于网格

网格能帮设计师飞迅速搭建页面用有律可循的布局地方。一般将网格基数设置为 4，以适配许多数主流的看得出来设备。

系统布局是中台组件设计的关键一环，它关系到整个系统的美观度与容易用性。通过本文的探讨，相信巨大家对系统布局有了更深厚入的了解。在今后的干活中，让我们共同打造更许多优质的中台系统。

图表：主流屏幕分辨率

---