设计原则Design
形状柔和,表面平整,用色安静,动效利落。四条原则决定了每个组件的样子;后面四章把它们落成具体的规矩和令牌,自己写样式时照着来,就能和库里的组件对上。
四条原则
形状柔和
大圆角、曲率连续的曲线,控件做成胶囊。柔和感全部来自轮廓:内圆角 = 外圆角 − 内边距,层层嵌套,弧线始终平行。
表面平整
不用阴影和棱台,也几乎不用半透明。层次靠表面色阶和两档发丝线,底色分得开就不描边;只有大块容器顶部留一道高光。
用色安静
墨色与中性色承担结构和文字;强调色只给主操作和少数状态,面积不超过一成。选中多用加粗、灰色高亮这类中性手段。
动效利落
动效用来解释因果:从哪来、到哪去、发生了什么。高频操作快而不回弹,内容一次出现;弹簧留给落位,明显的回弹只留给少数几个时刻。
设计基础
四章分别讲原则背后的具体规矩,每章都有跟着主题实时变化的演示。