Andrei Rybin

单色工坊笔记本——设计师的草稿本,手机屏幕如同接触片被钉在白墙之上
单色工坊笔记本:一个近乎纯黑于白的画布,其中唯一的视觉事件是文字在大量项目方格网格上的呈现。每个表面均为纸白;每个元素要么是墨黑,要么是单一灰度的石墨用于次要信息——没有强调色,没有渐变,没有非中性的填充。组件被简化到其功能本质:胶囊形标签命名作品,圆形箭头按钮邀请进入下一页视图,细1px边框安静地分隔区块。产品是展示重点,因此系统应退居幕后——手机原型图承载全部视觉重量,而框架则保持沉默。
查看原始网站使用规范
建议采用
- 保持整个界面无彩色——墨在纸上,以石墨与石材实现柔和的层级关系
- 项目方格使用8px圆角,图标容器使用16px圆角,胶囊标签和圆形按钮使用40px(或9999px)
- 正文与图注文字使用Inter 12px,字间距-0.0170em;保留24px Inter用于单段引言段落
- 仅用空白间距分隔页眉列——导航项之间不使用垂直线或分隔条
- 卡片内元素间距为10px,页面区块间间距为120px
- 让图像承载页面内容;系统应隐藏在作品之后,不可见
建议避免
- 不要引入任何彩色——没有强调色,没有品牌色,没有语义状态色
- 不要使用多种字重——仅使用Inter 400作为唯一声音;不使用粗体、不使用轻体、不使用斜体
- 不要为方格或按钮添加阴影、渐变或填充;边框是唯一的分隔方式
- 正文文本不要居中——图注和元数据采用左对齐或上下文对齐,仅在内容块自然将下方图注居中时例外
- 卡片的圆角不得小于8px,图标圆角不得大于16px——圆角体现系统的柔和性,必须保持一致
- 不要引入导航模式(汉堡菜单、侧边栏、大菜单);页眉仅为一条文本条
- 不要破坏网格结构——禁止不规则或重叠的方格布局;网格是页面的结构真实