5.5 KiB
视觉语言与构图
风格骨架
把画面想成一张平放的手工纸海报:纸底上贴有彩纸便签,便签上用马克笔写标题、用细笔画小图标。俯视、近乎正投影;材质有触感,整体仍是平面信息图。无需桌面背景、手、笔或拍摄道具。
关键是几种对比:大字与小字、饱和蓝与柔和纸色、粗实心标题与细线图标、自由纸边与清楚的信息分组。
配色
以下是近似工作色,不是对参考图的像素采样或必须使用的精确色值:
| 用途 | 起始色 | 分配方式 |
|---|---|---|
| 整页纸底 | 奶油白 #F2E8D5 |
最大面积,均匀偏暖 |
| 主要文字与线条 | 可可深棕 #3E2117 |
替代纯黑,维持清楚对比 |
| 第一强调色 | 钴蓝 #2456A4 |
巨型数字、一个关键词或边角撕纸 |
| 第二强调色 | 珊瑚粉 #DC6682 |
下划线、圈号、小心形 |
| 高亮底色 | 蜜黄 #F2CB64 |
标题后的一两条粗刷色 |
| 便签 | 灰蓝、藕粉、鼠尾草绿、淡紫、旧纸黄 | 降低饱和度,颜色彼此能区分 |
优先暖底、棕字、蓝色重心,粉黄作辅色。一张纸通常一种底色,线条统一为深棕。深色背景或品牌色可按用户要求改,但保留足够明暗层级。
材质与线条
- 纸底:细密纸纤维、轻微暖色斑驳;近看可见,远看安静。不要污渍盖住信息,不做焦黑旧报纸。
- 纸片:不规则撕口、轻微毛边、小幅弯曲;约四边形但不严格方正。少量便签可有细横线、浅方格或笔记本孔,不能每张都加所有特征。
- 贴合:纸片边缘下只有短、淡、软的接触阴影;不出现悬浮卡片的长阴影、塑料高光、厚重 3D 倒角。
- 胶带:大部分纸片可在一处用小段胶带固定,少数不贴;格纹与纯色交替。边缘可粗糙,透出一点纸色。不要像相框一样四边封死。
- 笔触:棕色线略有粗细变化,转角圆润,存在轻微自然偏差;不要全图等宽矢量描边,也不要抖到影响识别。
- 实心色块:大数字和标题保留轻微马克笔或印刷颗粒;仍需实、厚、易读,不做破碎镂空字。
字体层级
主标题像手写的粗头马克笔:紧凑、厚实、轮廓略不规则;关键词可钴蓝,其他用深棕。一行短副标题可以放在不规则粉色或黄色刷色条上。不要给每一行都加色条。
卡片名称比注释大约 1.7–2.2 倍,用活泼但清楚的手写字。标题与注释在卡片内部相对端正;纸片本身稍微倾斜即可,不要逐字随机旋转。中文用圆厚、自然的手写字,不能把英文连笔形状机械搬到汉字上。
编号可以是略歪的手绘椭圆圈,墨色在蓝、粉、棕中少量切换。统一使用 01、02…或 1、2…中的一种。只有少数条目时可以省略编号和巨型数字,保留强标题重心。
图标与小装饰
每张纸片一个简洁的棕线图标,选择熟悉且具体的物件:写作用纸笔、设计用调色盘、网站用浏览器或电脑、视频用场记板、拍摄用相机。Codex skill 根据真实输出选择物件,例如地图、画笔、文档、表格;不要全部画成机器人。
图标通常占卡片约四分之一至三分之一,不压过标题。少量柔和填色即可,避免高精度软件标志、复杂截图和写实物件。
空隙可画星星、空心心形、短放射线、双下划线和弯箭头;总量服务阅读。箭头通常只连接注释和对应图标;卡片间没有实际关系时不画连线。皇冠、飞钞票等具有特定含义的装饰只在主题吻合时使用。页脚口号仅在用户要求或用途确实需要时加入。
布局选择
中心标题与外围便签
适合 5–7 条简短信息,默认竖版 2:3。参考布局可理解为三层:上方两个便签,中央强标题及两侧便签,下方三张便签;不是七等分网格。
主标题占据中上部一个明显区域,约占整页面积的四分之一至三分之一;若有总数,大数字可放在标题左侧形成整体。外围纸片大小随文案调整,绕开标题轮廓;一侧稍高、另一侧稍低,底部也不要完全齐平。纸片多数旋转约正负 2–6 度,偶尔保留端正的一张。
这里的层次是阅读动线,不是强制坐标。需要中文大标题、不同数量或其他画幅时重新分配空间,保持内容完整。
上标题与错落便签
适合 3–4 条信息或稍长中文。标题占上部,便签在下方错落排列。维持有组织的左右阅读顺序;不要以“自由拼贴”为由让用户找不到下一条。
多页系列
内容密集时每页 3–6 条,按实际字数调整。同一系列保持纸底、笔触、标题层级与主要强调色一致,便签形状和排列可变化。保留全局编号;页标题说明本页范围,不把整组总数误标为当页数量。
常见偏差及对应修正
| 偏差 | 修正方向 |
|---|---|
| 像数字仪表盘 | 打破等宽等高网格,改撕边纸、有机标题与手绘物件 |
| 像儿童涂鸦作业 | 减少表情、贴纸和杂色,增强大字与小字的层级 |
| 纹理太脏 | 降低斑点和纤维对比,文字区域更干净 |
| 有纸但没有拼贴感 | 加少量接触阴影、胶带与纸片角度差异 |
| 标题漂亮但正文读不清 | 增大卡片、缩短可改写注释或分页,保持必需原文 |
| 信息越来越挤 | 先删无用装饰,再扩版或分页,不持续缩小正文 |