←→ 切换·Esc 返回

圆角的气质Corner Feel

视觉效果与操作状态
用圆角大小调整界面的整体气质

较小圆角通常显得克制，较大圆角通常更柔和，但这只是设计经验。先建立稳定的圆角 BorderRadius档位，再结合组件尺寸、品牌和场景选择，相同角色要保持一致。

按钮直角 · 严肃 按钮小圆角 · 克制 按钮中圆角 · 友好 按钮胶囊 · 活泼

什么时候用

  • 直角：金融、工程工具的严肃与专业
    直角卡片确定
  • 小圆角 4~8px：商务工具的克制与精致
    6px 卡片保存
  • 中圆角 8~16px：卡片 Card、按钮 Button 友好现代，最百搭
    12px 卡片关注我
  • 胶囊与正圆：年轻产品活泼亲和，头像 Avatar 用正圆
    立即体验林

什么时候不用

  • 一个产品里圆角体系不统一：性格混乱，气质全垮
  • 圆角和品牌气质打架：严肃金融用大胶囊，像开玩笑
    恒丰银行 · 大额转账
    立即转账
    严肃金融配糖果胶囊，谁敢转钱
  • 所有元素全用大圆角：腻得发慌，还没了层级
    大圆角卡片大圆角输入框大圆角按钮全都圆滚滚，腻得发慌
  • 7px、13px 随手写数值：不定档位，越写越乱
    7px13px5px
组成结构 · Anatomy
1直角Sharp0px，严肃、专业、工程感
2小圆角Subtle4~8px，克制、精致
3中圆角Friendly8~16px，友好、现代，最百搭
4胶囊Pill999px，活泼、亲和、年轻
常见变体 · Variants
直角Sharp
严肃专业，工程与金融气质
小圆角Subtle
克制精致，商务工具常用
中圆角Friendly
友好现代，最百搭的一档
胶囊Pill
活泼亲和，年轻产品标配
典型使用场景
金融与工程工具
大额转账复核 待确认
收款方恒晟贸易有限公司
金额¥ 500,000.00
企业 SaaS 界面
新建报销单 ×
消费级 App
周末徒步 · 云海线
2.3 万人想去 · 难度 ★★
理想工位大赏
8,412 人看过 · 家居
儿童与社交产品
小豆丁
3 分钟前 · 亲子乐园
Lv.6
今天拼完了一整座恐龙城堡，太有成就感啦！