THE DESIGN OF FOCUS / 01
让界面,拥有触感。
一套刻痕微立体设计系统。精细的材质、安静的层次,以及恰到好处的暖橙 —— 光线恒定来自顶部:凸起上缘明亮,凹槽顶部阴影更深。
v1.0 · MATTE EDITION
层次来自材质
01 / MATERIAL背景、表面、凹槽、浮起。四个明度层级,配合上下相反的光影,构建清晰的空间关系。
了解材质规范状态始终清晰
02 / STATUS任务、进度与日志相互联动。橙色表示进行,低饱和语义色帮助区分成功、等待与异常。
阅读示例文章拿来就能构建
03 / BUILD统一的 CSS 令牌、语义化 HTML 与原生交互。复制组件示例,即可开始组织自己的页面。
认识博主四种材质
04 / SURFACE ENGINEERING 01 · 浅凹槽 输入、选择与次级操作 box-shadow: var(--carve)
02 · 微凸表面 按钮、徽章与激活状态 box-shadow: var(--raise)
03 · 深雕面板 日志、代码与运行上下文 box-shadow: var(--deep)
已处理邮件
1,284
↗ 12.4% 较上期
平均处理耗时
1.2s
↘ 8.1% 较上期
任务成功率
98.7%
↗ 0.6% 较上期
待复核任务
02
需要你的关注