A0Visual Archive / 2026
A0 — Independent Visual Practice

六个课程作品的重编版：一套名片、一款情绪天气应用、两个浏览器游戏、一支 68 秒动态图形、一件手势交互装置。叙述被重写过一遍，私人信息已全部移除。

Archive of Six / 2026

视觉设计
档案2026

A Visual Design Archive — Type, Weather, Game, Motion, Gesture

不是把作品放在一起，而是让它们互相证明：
同一套方法，可以长成六种完全不同的东西。

06Projects
03Media
01Method

索引

06 Projects / Selected 2026
01

名片 · 三种语气

Three Tones — A Name Card System

平面设计 品牌基础物料 90 × 54 mm 网页内重绘

90 × 54 毫米里，先把「我是谁」说清楚，
再决定用什么语气说。

命题
同一身份，三种语气
载体
纸质名片 · 双面
方法
8 栏网格 / 单一强调色
年份
2026
A / B / C 三版 · 正反两面 · 纯 2D 印刷稿
A 瑞士国际主义 / Swiss International
A0
视觉传达设计 ／ 视觉识别与动态

a0@a0.studio

WeChat · a0_studio

Tel · +86 000 0000 0000

B Y2K 酸性 / Acid Graphics
Visual
Communication Create
Explore
Connect
A0
视觉传达设计 / AI VISUALS
Visual
Communication

a0@a0.studio

wechat · a0_studio

+86 000 0000 0000

C 侘寂 / Wabi-sabi
零号
视觉传达设计
手工纸 / 单色＋哑金

a0@a0.studio

wechat · a0_studio

+86 000 0000 0000

图 1-1三版名片，正反两面。为规避私人信息，网页内按原版式重绘，联系方式替换为占位内容；点右上按钮可叠加 8 栏网格与黄金分割线，检查版式依据。

命题

名片是品牌最小的单位，也是最常被做错的一件平面物料——多数人把它当信息表，把能写的都塞进去。这组实验反过来：三张名片共用同一套信息层级（署名 ＞ 定位 ＞ 联系方式），只换语气——理性的、躁动的、安静的。

策略

A 版用严格 8 栏网格，全部左对齐，署名压在黄金分割点上，落款只留一颗 6 × 6 mm 的克莱因蓝方块。B 版把署名当图像处理：字重被拉变形、荧光绿与品红错位重影、背面紫到蓝的平面渐变配扫描线与半调网点。C 版用和纸底、明朝体竖排、一道哑金细线，留白占掉六成面积，让材质替文字说话。

取舍

三版都被限制在纯 2D 印刷稿：不许阴影、不许渐变光效、不许 3D 渲染。因为名片最终落在纸上，屏幕里好看的光到了印刷机上只会变成一团灰。唯一允许的过度是 B 版的高饱和撞色——它必须和 A、C 拉开最大反差，否则这组实验就没有意义。

90 × 54mmFinished Size
3 × 2语气 × 面
8栏网格
1强调色
0张位图

好名片不是信息齐全，是让人记住一种语气。三版同源，才证明语气是可以被设计的，而不是碰运气碰出来的。

本次深化 — 原稿仅以位图交付，本次改为在网页内重绘：网格、字距、色值可查，联系方式全部替换为占位信息，让其成为可讨论的方法样本，而非某个人的通讯录。
02

情绪气象台

Emotion Observatory — Weather as a Language for Feeling

网页 · 交互叙事 视觉设计 实拍 + 矢量混用 可在本页打开

情绪很难被准确描述，但天气可以。
于是把四种心情，翻译成四种天气。

命题
用天气代替情绪词汇
载体
网页 + 移动端同源版
构成
4 套天气 / 12 个 JS 模块
年份
2026
情绪气象台首屏：晴天的草原与夕阳，左下角落版一个「晴」字
图 2-1喜 · 晴。标头、落版、伙伴、天气四层结构在四套天气里位置完全不变，只有「大气」在换。
暴雨场景：低垂的云层与雨幕
图 2-2怒 · 暴雨
雨夜街道，蓝色调，地面反光
图 2-3哀 · 雨夜
暮色下的雪街
图 2-4惊 · 骤雪
情绪天气光线动效语法落版一句
喜晴暖金 / 高对比云缓慢横移、光晕呼吸抬头，天就晴了。
怒暴雨冷灰 / 压暗横向雨幕、云层堆叠云在攒劲。
哀雨夜蓝调 / 低饱和贴地反光、细雨斜落雨替你说。
惊骤雪暮色 / 高亮短促落雪、呼吸变白世界忽然安静。

表 2-1情绪—气象映射表。四行不是四套皮肤，是四套语法：光线、动效、文案必须同时换，情绪才成立。

情绪气象台中的柴犬伙伴角色
图 2-5伙伴角色。身体、眼白、虹膜、尾巴是四层独立贴图：眨眼、视线跟随、呼吸都由代码驱动，不靠序列帧。
寸天22:14
22°
阴 转 晴
今天不用太用力。
把窗户开一条缝就好。
Pocket Weather01 / 04

图 2-6寸天 · 移动版界面示意（按项目样式在网页内还原）。去掉了按钮和标签，只留天空、一行温度和一句话。

同源移动版 · 寸天 Pocket Weather

桌面版回答「此刻像什么天气」，移动版只回答「此刻我需要知道哪一句」。所以它把界面拆到只剩三件东西：一片天、一个温度、一行字。视觉从「场景」退到「空气」——米白纸感的径向渐变、极细的分隔线、被拉开的字距，让文字自己承担重量。

两个版本共用同一套情绪设定与文案语气，这是系列化的关键：换尺寸、换媒介，不换人格。

命题

我们习惯用「还行」「有点烦」描述情绪，词汇正在退化。这个项目不再问「你心情如何」，而是直接把人放进一场天气里。用户不需要填表、不需要选标签，只需要「进入天气」，剩下的交给光线、色温和声音。

策略

四套天气共用同一个界面骨架（左上标头 / 左下落版 / 右下伙伴），只有大气在变：晴天把 3D 光晕贴在实拍太阳上，暴雨用压暗云层加横向雨幕，雨夜换成蓝调街景与贴地反光，骤雪用暮色雪街加飘落粒子。骨架不变，保证「还是那个应用」；大气全换，保证「心情真的变了」。

取舍

实拍视频和矢量界面混用，最怕两套质感打架，所以界面元素全部退成半透明、低饱和，把颜色让给天气。性能上用海报兜底、视频按需预载、页面不可见即暂停，并遵循 prefers-reduced-motion：动效不是必须的，情绪也不该被强制播放。

4套情绪天气
4段实拍素材
12个 JS 模块
0外部依赖
2端同源版本

情绪不需要被解释，需要被认领。天气预报的语法刚好够用：它承认天气会变，也承认人拿天气没办法。

本次深化 — 把「桌面版」与「移动版」并置成一个系列来叙述，并补上情绪—气象映射表，让四套视觉从「四种皮肤」变成「四套可复用的语法」。
03

沧溟锁龙 · 深渊印狱

Abyss Seal — A Chinese Mythic Bullet-Shooter

游戏 · 2.5D 弹幕射击 Three.js 单文件离线 可在本页打开

弹幕游戏里，玩家一直在躲。
这次给他一件必须主动去做的事：把龙重新钉回深渊。

命题
两条相反的压力轴
载体
浏览器 · 键鼠
技术
Three.js 正交 2.5D
体量
5.3 MB 单文件
沧溟锁龙战斗界面：青碧深海遗迹，角色立于中央，HUD 分布四角
图 3-1青冥印狱。右边竖条「封印进度」是打赢的进度条，底部横条「深渊侵蚀」是杀死你的时钟——两条轴方向相反，中间才是走位。
沧溟锁龙主菜单，三名角色并排
图 3-2主菜单。角色卡不直接开局，选择与开始被刻意分开。
第二关赤锁潮廊，朱砂色调
图 3-3赤锁潮廊。关卡机制不是加怪，而是改「地形会动」。
第三关玄雷龙宫，靛青与金雷
图 3-4玄雷龙宫。三关三种色温：青碧、朱砂、靛青，一眼能认出自己在第几层。
玄渊潮龙 Boss 立绘
图 3-5玄渊潮龙。双阶段封印战：一阶段打不穿本体，只能拆护甲。
御潮者澜生立绘 符阵师绛纱立绘 镇狱卫玄岳立绘
图 3-6三名角色：御潮者 · 澜生（均衡远程）、符阵师 · 绛纱（双符并行）、镇狱卫 · 玄岳（重甲近战）。立绘带透明通道，直接作为战场精灵。

命题

纯弹幕的乐趣是「读」与「躲」，但躲是消极的——玩家越熟练，越只是在等血条走完。这个项目给玩家第二条轴：击碎战场上的封印柱推进封印进度，同时被深渊侵蚀从背后追赶。一条向前，一只时钟向后，中间才是玩家的走位。

策略

选正交相机的 2.5D 而不是真 3D：弹幕游戏的第一需求是可读，透视越少，判读越快。HUD 全部交给 DOM + CSS，战场交给 WebGL，文字永远锐利、布局可控。三名角色对应三种走位，三关对应三种色温，BOSS 做双阶段——先破龙鳞护甲，护甲崩解后核心才亮。

取舍

放弃移动端和真实骨骼，换来「双击即玩」的单文件：贴图全部内联，断网也能跑。音效不用一个音频文件，全部 Web Audio 实时合成——水刃、龙吟、侵蚀的低频轰鸣都随侵蚀值加压，声音本身成为第二只时钟。

107项自动化断言
56–60fps 满屏弹幕
38–42draw calls
8.4k三角面
5.3MB单文件

难度不该只来自数值。真正让人上瘾的是「我读懂了」，而不是「我血够厚」。

本次深化 — 交付前补了一轮键盘可用性加固：屏幕上的键位指示灯会跟着按键亮，开局 6 秒收不到按键则弹出诊断卡，直接说明是窗口失焦、被内嵌窗口截走，还是输入法劫持。玩不到，比不好玩更容易毁掉一次答辩。
04

烬山 · ASHEN PEAK

Four Duels — A 2.5D Boss Rush

游戏 · 动作 Boss Rush Three.js 单文件离线 可在本页打开

四场仗只教一件事：
看抬手，不要看血条。

命题
难度来自「读」，不来自数值
载体
浏览器 · 键鼠
技术
2.5D 立绘 billboard
体量
10 MB 单文件
烬山标题页：巨大的石傀俯视着持杖行者
图 4-1标题页。整张主视觉只给一条金裂光，其余全部压进烟尘与暗部——游戏中「破防」的瞬间用的就是同一个颜色。
烬山选关界面
图 4-2选关。四战的差异提前写在卡片上：机制、场地、前摇。
烬山序章任务界面
图 4-3序章。不做过场动画，用一页字把动机说完。
烬山战斗画面：角色与首领对峙，地面有预警
图 4-4战斗。所有预警都放在地面，且只有一种颜色——玩家的注意力只需要管一件事。
烬山结算界面
图 4-5结算。不给长动画，让玩家立刻能再来一次。
烬山首领概念图
图 4-6首领概念。石头负责体量，火负责情绪。

命题

动作游戏的难度常常堆在数值上，越到后面越是「血更厚、招更疼」。这个项目反过来：四场首领战的数值几乎不动，动的是前摇——从 1.14 倍压到 0.74 倍。玩家不是在变强，是在变快。

策略

闪避做成「擦身」判定：在命中前一瞬闪开，触发「见招拆招」，画面进入慢镜、下一击前摇减免 1.8 倍——奖励精准，而不是奖励连按。蓄力重击在首领破防时直接变成处决，不弹 QTE，因为打断节奏的交互不是难度，是噪音。场地半径随关卡收缩，压迫感来自空间被夺走。

取舍

角色是 2.5D 立绘 billboard，绕到侧面大角度会露出「纸片感」——这是方案的天花板，只能用固定机位、雾效与景深遮住，不假装它是真 3D。素材走绿幕生成，51 MB 原始 PNG 不入包；第一轮生成的 9 张因为和「写实中景 + 立绘」的路线不统一，单独留档当筛选记录。

4场首领战
1.14 → 0.74前摇倍率
33张入画素材
9张被淘汰
10MB单文件

所有手感数值都是占位值：它们只经过无头浏览器回归验证，没有做过真人 playtest。这句话应该写在每个作品的说明里，而不是藏在心里。

本次深化 — 补上「已知边界」一章：哪些是设计，哪些是妥协，哪些还没被真人验证过。诚实的说明，比完美的演示更耐问。
05

AVA · 68 秒

Mind in Motion — A Canvas MG Animation

动态图形 · MG Canvas 2D 实时渲染 零素材 可在本页播放

一个点想成为它自己。
它长出线、长出网、长出形状，直到把自己撑爆。

命题
过量与减法
时长
68.0 秒 / 五幕
技术
Canvas 2D + Web Audio
素材
0 图片 / 0 视频 / 0 音频
MG 动画落版画面：一张极简的脸与 AVA 字样
图 5-1落版。整片唯一的「人脸」出现在第 60 秒之后，前 60 秒它只是几何。落版署名 AVA 是这支片子的作品人格，不是真人姓名。
MG 第一幕：黑暗中一个发光的点
图 5-20–12s · 静
MG 第二幕：网格与折叠的几何体
图 5-312–30s · 痒
MG 第三幕：过载的高密度画面
图 5-427–35s · 绷
MG 爆炸段落
图 5-535–41s · 炸（全片唯一允许吵的 6 秒）
MG 吸入段落
图 5-641–48s · 崩塌
MG 留白段落
图 5-748–60s · 空

命题

68 秒不讲「科技改变生活」，讲「过量与减法」。前 48 秒是加法：生长、堆叠、过载、爆炸；后 20 秒是减法：归零、留白、凝视。最后一幕那个圆睁开眼，看向鼠标——它已经不是作品了，它是作者本人，正在看你。

策略

先把情绪写成曲线，再写画面：峰值锁在 35–41 秒，41–48 秒断崖式下跌，48 秒之后几乎不动。五幕、23 个叙事节拍，每个节拍都有明确任务。技术上时间轴是纯函数——任意时刻的画面只由时间决定，与播放历史无关，所以能任意跳帧、也能逐帧导出。

取舍

全片零素材：没有一张图片、一段视频、一个音频文件，全部 Canvas 2D 绘制加 Web Audio 实时合成，44 条音画对位。60fps、DPR 上限 2、像素预算 2.5 兆，宁可在高分屏降采样也不掉帧。伪 3D 的头部用分层卡片加透视投影，够用就好。

68.0s总时长
5幕
23叙事节拍
44条音画对位
128KB单文件

如果把 68 秒砍成 30 秒，它会更好看，但会更假。前面那 12 秒的安静不是浪费，是让后面 6 秒的爆炸值钱。

本次深化 — 把「分镜脚本」和「技术方案」压缩成一条可读的情绪曲线，让观众先看懂节奏，再看画面。
06

种子方舟

Seed Ark — A Gesture-Driven Micro Ecology

交互装置 · 手势识别 MediaPipe + Three.js 本地推理 需摄像头

把一只手伸进微观森林：
张开手掌让种子萌发，握拳让它停下。

命题
手就是输入设备
载体
浏览器 + 摄像头
技术
MediaPipe Hands + Three.js
隐私
画面不上传，全部本地推理
种子方舟生态面板：墨绿背景上三株植物与信息卡，右上角是手势提示
图 6-1生态面板。界面把「实验过程」直接暴露出来：场景、手势、生长势能、FPS、手部骨骼——可观察的系统，才谈得上调试。
STATE MACHINE / 7-FRAME MAJORITY VOTE OPEN FIST POINT PINCH VICTORY 张开手掌 握拳 食指指向 拇指食指捏合 双手张开 SPROUT HALT ENTER HARVEST ECOLOGY FLASHBACK ROUTE　A → B → C → A　任意状态都可回到起点

为什么是状态机

手势识别的抖动比想象中大：同一个「张开手掌」，连续三帧可能给出三种答案。所以加了 7 帧多数表决——只有多帧一致才切换状态，代价是几百毫秒的延迟，收益是画面不再神经质。

路由走 A → B → C → A 的闪回结构：任何状态都能直接回到起点，不会卡死在某个手势里。这在展厅里是保命的——观众不会按说明书比手势。

图 6-2手势状态机。五个手势、四条主路径，外加一条虚线闪回路由。

命题

摄像头是每台电脑上最被忽略的输入设备。这个实验把手变成园丁——不用鼠标、不用按键，只用手掌的开合决定一株植物生长还是停下。所有推理都在浏览器本地完成，画面不上传任何服务器。

策略

先解决「稳」，再谈「美」：7 帧多数表决过滤抖动，状态机用闪回路由兜底。然后才处理视觉——墨绿底、细线卡片、粒子孢子、Bloom 泛光，全部为「微观」服务。界面刻意保留诊断 HUD 与手部骨骼，因为一个看不见内部状态的交互装置，无法被调试，也无法被信任。

取舍

延迟是硬约束，所以反馈都做成迟滞而不是实时——手势变了，画面用 0.3 秒过渡跟上，反而更像生物。没有摄像头也能演示：自动演示模式用合成 landmark 喂进同一套状态机，答辩现场不必赌设备。代价是需要 http 环境与 CDN，file:// 打开会被浏览器拦掉。

5个手势
3个场景
7帧多数表决
60fps 目标
0帧上传服务器

手势交互最难的不是识别，是让人相信它认对了。所以我把识别过程画在屏幕上——信任来自可见，不来自准确。

本次深化 — 把状态机与「7 帧表决」从实现细节提升为设计论点：技术约束如何变成交互语言。

方法

One Method / Six Outcomes

六个作品的媒介完全不同，做法却是同一套：
先看够，再压成一句话；
让这句话长成系统，最后用可验证的东西兜底。

01 / OBSERVE

观测

先把素材看到能复述。情绪气象台看了两天实拍天气；沧溟锁龙先画完两条压力轴的曲线，才写第一行代码。

02 / DISTILL

提炼

把感受压成一句话。压不成一句话的，就是还没想清楚——「把心情翻译成天气」「看抬手，不要看血条」都是这一句。

03 / SYSTEM

系统

一句话必须能长成系统：网格、色板、时间轴、状态机。系统让第二次、第三次输出不跑偏，也让别人能接手。

04 / VERIFY

校验

用可验证的东西兜底：107 项断言、56–60fps、68.0 秒、前摇倍率。不是炫技，是为了让「感觉对了」有据可查。

隐私声明 / Privacy

本档案使用代号 A0 对外署名，不包含真实姓名、学号、班级、手机号与私人邮箱。名片为版式重绘，其中的联系方式全部是占位内容；作品截图内不含个人信息；手势装置（种子方舟）的所有识别都在浏览器本地完成，画面不会被上传。如日后需要真实署名，只需替换页面中的 A0 与联络信息，其余内容无需改动。