FARFETCH España 网站预览
FARFETCH España 网站预览

FARFETCH España

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

页面以白色为基底,搭配近黑色文字。字体采用 Farfetch Basis。视觉特点包括网格布局、摄影展示、衬线字形、居中构图。适合参考的场景:品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • 所有文本与交互元素统一使用 #222222 —— 不存在任何色彩调性可参考
  • 网格中使用 24px 作为标准元素间距,区块间距使用 48–72px
  • 所有标题和正文使用 400 字重,仅将 700 字重用于品牌标识和强调类目标签
  • 商品卡片渲染为 0 圆角、0 边框、0 盒阴影——摄影是整个视觉表现
  • 将页眉锚定为三区布局:左侧为类目链接,中间为品牌标识,右侧为工具图标,整体背景为 #ffffff
  • 仅使用 #f5f5f5 作为工具栏和悬停效果的非白色表面,#e6e6e6 用于细线
  • 页脚使用 #222222 作为唯一强烈对比的收尾,以终结一个整体明亮的白色页面

建议避免

  • 界面中任何位置均不可引入色彩——色彩仅存在于摄影之中
  • 商品卡片、类目卡片或导航元素均不可添加盒阴影、渐变或边框
  • 不可使用 500 或 600 字重——系统为二元结构:400 用于一切,700 仅用于品牌标识
  • 不可使用带背景色的填充按钮——交互表面的唯一处理方式为下划线和悬停效果
  • 商品区域的任何部分均不可打破 3 列或 4 列网格,禁止使用非对称或砖墙式布局
  • 任何文本均不可直接置于图像上,除非经过对比度测试或叠加遮罩处理
  • 不可使用颜色来表示状态——通过下划线、字重变化或不透明度变化传达激活、悬停和选中状态