25 lines
2.0 KiB
Markdown
25 lines
2.0 KiB
Markdown
|
# 说服型页面首屏骨架
|
||
|
|
|
||
|
|
落地页、品牌页、产品发布页、展览页等以说服、传递理念为主的页面，按本规范选定首屏骨架（整体设计方向流程见 [设计方向](design-direction.md)）。
|
||
|
|
|
||
|
|
模型最顽固的习惯是左右分栏，它在写文案之前就定下来了：先想好标题、一段说明、一个按钮，摆好就是左右两栏。所以骨架要在写任何文案之前决定。
|
||
|
|
|
||
|
|
每个方向先从下表选一个首屏骨架，再用 3–5 个方框画出首屏线框：每块是什么、占首屏多大面积、阅读从哪里开始。
|
||
|
|
|
||
|
|
| 骨架 | 首屏长什么样 |
|
||
|
|
| --- | --- |
|
||
|
|
| 满版图像压字 | 一张图占满首屏，标题和动作压在图的安全区里 |
|
||
|
|
| 居中单一物件 | 一个物件或一句话居中，四周是大面积空白 |
|
||
|
|
| 画面即界面 | 首屏就是产品界面或一件实物本身，标题、导航和按钮都长在它上面 |
|
||
|
|
| 满版文字 | 文字本身就是画面，字大到占满首屏、跨过边缘或被裁切 |
|
||
|
|
| 通栏上下堆叠 | 通栏大标题横跨整个宽度，下面紧接内容 |
|
||
|
|
| 网格拼贴 | 多块内容同时出现，按网格或拼贴排列，没有单一主角 |
|
||
|
|
| 纵排或斜向 | 文字竖排、斜切或旋转，打破从左到右的阅读 |
|
||
|
|
| 左右分栏 | 文字一侧，画面一侧。这是模型的默认，一轮最多一个方向使用，并写出为什么非它不可。另一侧必须是跨越结构的图像、色块或图形装置，不能是装在卡片里的产品界面 |
|
||
|
|
|
||
|
|
规则：
|
||
|
|
- 同一轮的方向，骨架互不相同。
|
||
|
|
- 所谓“大标题九栏、说明三栏”同样算左右分栏。
|
||
|
|
- 骨架定好之后再写文案。文案去适应骨架，不让骨架去适应“标题 + 说明 + 按钮”的组合。
|
||
|
|
|
||
|
|
构图的大胆程度和调性无关。安静精致的产品，一样可以把一句话放在空白首屏正中，或让纵排标题贯穿整屏，或让界面本身占满首屏。调性决定音量，骨架决定结构；不要因为调性偏安静，就退回左右分栏。
|