作为样式切片的方向
原因: 情绪板太模糊,无法在此基础上构建;而完整的页面模型又过于具体:人们会开始讨论在第4步中已经确定的结构。样式切片(Samantha Warren)和元素拼贴(Dan Mall)介于两者之间:它们在不包含页面布局的情况下展示颜色、字体和界面元素,因此讨论能够停留在外观和感觉上。借助AI,变体的成本几乎为零,因此选择成为瓶颈。因此,这一步故意分散方向,并为选择提供了一个衡量标准。
需要: brand.md、taste-profile.md、anti-defaults.md、sitemap.md 和一个线框图(用于文案)、personas.md。
生成: 06-directions/tiles/r<round>/*.html、06-directions/direction.md。
1. 选择轴
命名两个或三个方向之间的差异轴,这些轴来自品味档案中未解决的问题。示例:冷静 ↔ 引人注目、密集 ↔ 通透、温暖 ↔ 冷峻、编辑性 ↔ 技术性、扁平 ↔ 有纹理。将每个方向放置在不同的点上。仅在强调色上有所不同的三个方向算作一个方向。
如果阶段A的情绪板产生了不同的板子,则从它们开始。
2. 构建三个切片
每个方向一个独立的HTML文件。每个切片展示:
- 一个名称和一句描述其背后的理念(来自品牌,而非趋势)
- 作为色板展示的调色板及其角色(背景、文字、强调色、操作色),以及文字和按钮的对比度(WCAG AA:文字4.5:1)
- 字体:展示字体的显示体和正文字体,附带几种字号,以及来自文案草稿的真实标题和段落
- 界面元素:主按钮和次按钮、链接、输入字段、导航栏、一张卡片
- 一个英雄区片段(不是完整的英雄区域)以及另一个特征元素:一段引用、一个数字、一个列表、一行价格
- 图像:样式样本或对照片、插图或屏幕处理的描述
- 一个只有这个品牌才会有的细节(来自标志的形状、来自行业的术语、一个度量单位)
规则:
- 首先阅读
anti-defaults.md。仅使用来自具有可用许可证的来源(Google Fonts、OFL、客户授权的字体)的字体;标注许可证和文件大小。 - 使用来自项目的真实文案,绝不使用Lorem Ipsum。样本界面文本仅使用来自
facts.md的事实:不得编造功能、优惠、可用性或数字。 - 无完整页面布局,无完整导航树,无页脚。
- 在390像素和1440像素下渲染每个切片,并在展示前查看。
3. 评分
在评审页面上,将三个切片并排显示(在移动端上一个接一个显示)。对于每个切片:
- 词汇测试: 每个切片一个问题。用户(以及可能的同事)从一个混合了品牌属性及其对立面的词汇列表中挑选三个词(复选框,
data-max="3")。统计哪一方胜出。 - 逐元素评分: 每个元素(颜色、字体、按钮、图像、细节)一个问题:哪个切片应该提供此元素,A、B、C还是无,并附带一个理由字段。这样整个表格大约有八个问题。
- 可选五秒测试: 向项目外的人展示一个切片五秒钟,然后问:“这是什么类型的公司?你想到了哪三个词?”
4. 融合
根据评分结果,编写 direction.md:每个类别选定的元素,来自哪个切片及原因,以及面向第7步悬而未决的内容。如果融合规模较大,则构建一个组合切片并在第2轮中再次展示。运行不超过三轮;如果未能收敛,问题通常出在品牌属性上,因此返回第3步。
完成条件: direction.md 已确认,且针对组合方向的词汇测试指向品牌属性。