圆角的气质Corner Feel
你可能会说
全站的圆角统一一下，别有的方有的圆，看着乱。
圆角的气质是指不同圆角大小在界面中带来的视觉感受和一致性规则较小圆角常显得克制，较大圆角常显得柔和，可为按钮、卡片和输入框建立少量圆角 Border Radius档位。它们是设计经验，不是固定语义；相同角色应保持一致，具体数值仍要结合组件尺寸、品牌和场景测试。
什么时候用
- 先按组件角色建立圆角档位：卡片、输入框、按钮可不同，但相同角色保持一致较小圆角卡片保存
- 用尺寸比例检查圆角：小组件的大圆角会显得更强，胶囊通常适合高度较小的标签或按钮立即体验林
- 在真实页面中对照边框、阴影和密度：圆角的感受来自组合，不由某个数值或行业决定较大圆角卡片关注我
什么时候不用
- 同类元素的圆角规则不一致：相同角色看起来像来自不同系统
- 某个控件的轮廓与页面系统差异过大：应结合品牌、任务风险和其他控件一起评估恒丰银行 · 大额转账立即转账按钮轮廓与页面其他控件差异过大，可能削弱整体一致性
- 所有层级使用相同显著圆角：卡片、输入框与按钮的角色可能不易区分大圆角卡片大圆角输入框大圆角按钮
- 随意增加圆角数值：没有对应组件角色或 token，后续难以维护值 A值 B值 C
组成结构 · Anatomy
半径为 0；可与边框、字重和间距共同形成更硬朗的轮廓
相对组件尺寸较小的半径，适合需要保留边缘感的界面元素
半径占尺寸的比例更高；和组件比例、间距一起检查
半径至少接近高度的一半，形成两端圆弧的形状
常见变体 · Variants
直角Sharp
需要清楚边缘或与既有直角系统保持一致时
较小圆角Subtle
需要保留边缘感，同时略微柔化轮廓时
较大圆角Rounded
组件尺寸允许更明显圆弧，且与系统其他角色协调时
胶囊Pill
长条标签或按钮需要两端完整圆弧时
典型使用场景
金融与工程工具
大额转账复核
待确认
收款方恒晟贸易有限公司
金额¥ 500,000.00
企业 SaaS 界面
新建报销单
×
消费级 App
儿童与社交产品
小豆丁
3 分钟前 · 亲子乐园
今天拼完了一整座恐龙城堡，太有成就感啦！
延伸阅读 · 权威出处