跳到主要内容

设计原则Design

形状柔和,表面平整,用色安静,动效利落。四条原则决定了每个组件的样子;后面四章把它们落成具体的规矩和令牌,自己写样式时照着来,就能和库里的组件对上。

四条原则

  • 形状柔和

    大圆角、曲率连续的曲线,控件做成胶囊。柔和感全部来自轮廓:内圆角 = 外圆角 − 内边距,层层嵌套,弧线始终平行。

  • 表面平整

    不用阴影和棱台,也几乎不用半透明。层次靠表面色阶和两档发丝线,底色分得开就不描边;只有大块容器顶部留一道高光。

  • 用色安静

    墨色与中性色承担结构和文字;强调色只给主操作和少数状态,面积不超过一成。选中多用加粗、灰色高亮这类中性手段。

  • 动效利落

    动效用来解释因果:从哪来、到哪去、发生了什么。高频操作快而不回弹,内容一次出现;弹簧留给落位,明显的回弹只留给少数几个时刻。

设计基础

四章分别讲原则背后的具体规矩,每章都有跟着主题实时变化的演示。