User Interviews 网站预览
User Interviews 网站预览

User Interviews

手绘研究现场笔记,温暖的纸上呈现

User Interviews 是一个阳光明媚的研究平台语言,建立在一个温暖的米白底色上,搭配浅薄荷绿和玫瑰粉的辅助表面。排版采用文学性衬线字体(P22 Mackinac Pro)用于编辑类标题,搭配几何无衬线字体(Sofia Pro)用于自信的界面元素,而 IBM Plex Mono 的宽字间距大写标签则作为区块眉题——整体节奏如同一本精心编辑的研究期刊被转化为SaaS产品。单一深青色(#1c5d5f)作为所有主要操作色,搭配灰蒙玫瑰色、鼠尾草色和藏青色的次级按钮,始终不争夺相同注意力。浏览器框内手绘的人物插画让界面显得人性化且过程导向,而非沉重的仪表盘风格;产品整体保持扁平、低层级和胶囊形按钮的视觉特征。

查看原始网站

使用规范

建议采用

  • 使用 #1c5d5f 深青色填充按钮作为唯一主要操作色——每个视口最多一个
  • 将深青色主要操作色与藏蓝 #16325a 填充按钮搭配,以在同一页面上提示第二个产品方向
  • 标题文字使用 P22 Mackinac Pro 字体,字号范围 44–64px,正常字间距,行高 1.16–1.20 倍
  • 所有区块眉题采用IBM Plex Mono大写文字,字号13–14px、字间距0.038–0.059em,并在前方加一个小彩色圆点。
  • 所有按钮使用 48px 圆角,导航胶囊按钮使用 1000px 圆角,以体现标志性的圆润几何形态
  • 通过 #e4f0f1(薄荷绿)和 #f2e8e2(玫瑰粉)填充卡片表面,绝不使用阴影效果
  • 所有插画以 #231e21 为底色线条,辅以选择性的深青色 #65b8a2 和玫瑰色 #d6aec1 填充

建议避免

  • 卡片或面板绝不添加阴影效果——系统仅使用扁平色彩分层
  • 页面背景绝不使用纯 #ffffff——始终使用 #f2f8f7 以呈现温暖的底色基调
  • 除深青、藏蓝及透明描边变体外,绝不引入其他按钮颜色
  • 标题绝不使用 Sofia Pro 字体——标题必须使用 P22 Mackinac Pro 衬线字体以保持编辑性身份
  • 区块标签不要使用系统字体,眉题必须采用IBM Plex Mono和大写宽字间距。
  • 按钮绝不使用尖锐或低圆角——最小圆角为 48px,胶囊形态是标志性特征
  • 绝不以摄影替代插画——手绘线条艺术风格是品牌的视觉锚点