VISUAL LANGUAGE / DESIGN GUIDE

扁平设计

Flat Design

以纯色、简洁轮廓和排版承担层级,弱化表面纹理与体积。这不意味着所有深度都必须删除,必要的遮挡或边界仍能解释关系。

扁平设计设计指南

本站编写的设计取舍与实现建议;实例是说明用的界面方案,不是客户案例、官方截图或效果承诺。目录中的部分条目是交互策略、业务布局或平台设计系统,并非同一层级的视觉流派。

设计原理

以纯色、简洁轮廓和排版承担层级,弱化表面纹理与体积。这不意味着所有深度都必须删除,必要的遮挡或边界仍能解释关系。

适用场景

工具应用、信息目录、需要稳定多端适配的组件系统。

不适用与取舍

主要卖点是材料触感的展示,或缺少任何边界就无法辨认交互的页面。

实现方法

先定义间距、色彩语义和控件状态;使用简单图标并配标签。通过边线、底色和字号区分组别,弹窗保留遮罩与明确关闭。

具体界面示例

任务列表用复选框、文字状态和分组标题区分待办与完成,不需要纹理或投影也能完成操作。

常见误区

去掉所有边界会把输入框与文本混在一起;图标单独出现时不能假定人人理解。

继续比较

结合材料、布局或父子变体比较选择。

启用 JavaScript 可切换浅深色、收藏、使用组件演示并复制提示词。实例用于解释设计,不代表真实业务业绩。