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

FARFETCH España

白立方时尚画廊。想象一个高端零售空间,墙面、地面和固定装置均被漂白至骨白,仅由服装和穿着者提供每一种色彩、质感和视觉重量。

Farfetch 以时尚白立方画廊的形式运营:界面几乎不使用任何颜色,让编辑摄影承担所有视觉决策。字体承担全部结构功能——采用定制几何无衬线字体(Farfetch Basis),字重为 400 和 700,标题与品牌标识使用衬线装饰性排版,将文字视为整体构成元素。布局具有建筑感:全宽居中内容,严格的3列和4列商品网格,充足的 48–72px 区块间距,无任何装饰性 界面外围元素。组件简洁朴素——搜索使用细线下划,导航链接为透明描边,图像下方使用大写类目标签,商品卡片无阴影或边框。系统中唯一的颜色是摄影本身;界面是画框,从不成为画面主体。

查看原始网站

使用规范

建议采用

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

建议避免

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