形状
不同的形状往往传递着不一样的情绪,这些微小的视觉元素加起来形成用户潜意识中一致、独特的品牌个性。
形式
组件形状皆基于以下形式构成:
方形
方形是常见组件和容器的基本形状,例如按钮、文本框、卡片和图像。
圆形
圆形让内容更聚焦,常用于任务头像、单选框。
胶囊
胶囊可以表示像滑块轨道或切换通道的路径。常用于开关、进度显示。
圆角
建议使用以下梯度圆角大小来构建形状,让界面更规范一致。
Type | Value | Usage |
---|---|---|
small | 4 | 小标签 |
medium | 12 | 中按钮、分段导航 |
large | 16 | 大按钮、输入框、卡片 |
x-large | 24 | 弹出框、对话框 |
circle | 50% | 开关、筛选标签、搜索框 |