iconwerk 网站预览
iconwerk 网站预览

iconwerk

白色基底、摄影展示与网格布局。

页面以白色为基底,搭配近黑色文字。字体采用 Graphik (custom)、Arial。视觉特点包括摄影展示、网格布局。适合参考的场景:设计作品集、创意服务介绍页。

查看原始网站

使用规范

建议采用

  • 每个卡片、按钮和独立容器表面都采用28px border-radius;这一种圆角是系统最容易辨认的特征。
  • UI附属元素保持单色,使用Ink、Paper、Fog和Ash;所有彩色和图像都由作品图块承载。
  • 分区开场采用Graphik 24px/600,正文采用16–21px/400;1.18–1.21行高让文字紧凑,而非宽松。
  • 作品以4列、1:1图块网格展示,纵向间距45px,栏间距24–36px。
  • 唯一的填充操作按钮使用#000000填充和#ffffff文字;绝不要引入第二种填充按钮颜色。
  • 9999px胶囊圆角只用于小型导航标记;限定这一用途能形成有意安排的两种圆角系统。
  • 照片在28px圆角遮罩内从边到边铺满图块;绝不要将照片缩进图块边框内部。

建议避免

  • 不要给界面附属元素添加彩色;画廊墙必须保持中性,才能让作品充分表达。
  • 不要为图块添加阴影或抬升效果;网格保持平面,深度来自内容对比,而非视觉特效。
  • 不要引入第二种按钮样式,例如描边或无填充样式;黑色填充按钮是唯一的操作形式。
  • 正文字号不要低于14px或高于22px;字体尺度刻意保持紧凑,为14/16/21/22/24。
  • 不要在UI元素中将28px卡片圆角与4px、8px或12px等较小圆角混用;一种圆角构成一个系统。
  • 不要添加首屏区域、横幅图像或营销区块;图块网格本身就是首页。
  • 不要使用渐变背景、装饰形状或没有功能的装饰;作品集是唯一的视觉内容。