2025
观山 · 茶品牌官网
用「远山」的层次做导航结构，滚动即入山。全站只有一个墨绿主色，其余交给纸色与留白。
设计思路 →
01
关于葫芦娃
ABOUT THE DESIGNER我是葫芦娃，一名网站设计师。九年里画过品牌官网、数字展馆、产品发布页与设计系统——始终只做一件事：把复杂的东西，做得好看又好懂。
我相信网页设计不是「把海报搬到屏幕上」，而是替内容搭一套秩序：网格定骨架，字体定语气，色彩定情绪，动效定节奏。四件事都对了，页面自然好看。
这个站点是我的公开笔记本——写拆解、写踩坑、写正在想的问题。如果你也在意这些细节，欢迎往下翻。
- 从业年限
- 9年
- 交付项目
- 120+
- 设计奖项
- 18项
- 合作行业
- 12个
02
设计笔记
FIELD NOTES六条反复被验证的原则。它们不时髦，但从来没有失效过。
-
01
Layout
先定秩序，再谈风格
网格、层级、间距——这三样先立住，风格才有地方生长。没有骨架的「好看」，放大到第二屏就散了。
-
02
Type
字体是界面的声音
一套字体系统决定产品的语气。标题用衬线还是无衬线，本质是在选「怎么说话」，不是在挑「什么好看」。
-
03
Color
色彩做减法
一个主色，足够表达态度。其余交给中性色阶。颜色越多，用户越不知道该看哪里。
-
04
Motion
动效服务意图
让状态变化被感知，而不是被表演。如果一个动画删掉之后没人发现，它本来就不该存在。
-
05
Space
留白不是空白
节奏与呼吸感来自有意识的空。留白是设计决策，不是「还没填满」的余量。
-
06
Craft
细节是信任的来源
4px 的对齐差异、1px 的描边深浅、悬停时的那 150ms——用户说不出为什么，但都看得见。
03
精选作品
SELECTED WORKS2023—2025 年间的部分项目。视觉构成由代码绘制，点击卡片看设计思路。
2025
织造局 · 纺织博物馆数字展
把织物经纬翻译成交互网格。观众每滚动一次，就「织」出一段历史。
设计思路 →
2024
轻舟 · 新能源汽车发布页
一条斜线贯穿全页，速度感来自几何而非特效。参数区用等宽字体排成仪表盘。
设计思路 →
2024
一刻 · 咖啡零售视觉
把「一杯咖啡的时间」画成一个圆。包装、小程序、门店物料共用同一套几何语汇。
设计思路 →
2023
字里行间 · 独立书店
把书店的「翻阅感」搬上线：双栏排版、页边批注、章节用衬线大字起头。
设计思路 →
2023
Northline · 户外装备电商
等高线是全站的视觉语言，从分类图标一路用到加载动画。深底色让产品摄影自己发光。
设计思路 →
04
设计工具箱
THE TOOLBOXAa 字体系统
设计师笔记
把复杂讲简单
GRID 08 / 24
◧ 色彩原则
- 纸 底色 #F2EFE6
- 墨 文字 #1C1A16
- 朱 强调 #D6432B
- 灰 辅助 #8A8578
一个主色 + 中性色阶。饱和度留有余地，长期看不累。
⌘ 日常装备
- Figma界面与设计系统
- After Effects动效预演
- Blender三维与材质
- VS Code前端实现
- 纸和笔永远的第一稿
§ 工作方法
- 定秩序 — 网格、层级、栅格先立住
- 定语气 — 字体与色彩对齐品牌性格
- 定节奏 — 滚动动效只服务状态变化
- 定验收 — 对比度 4.5:1，键盘可达
设计不是把东西变好看，
而是把东西变清楚。
LET'S MAKE SOMETHING GOOD
一起做点好看的。
品牌官网、数字体验、设计系统——如果你也在意那些「说不清为什么好看」的细节，我们大概会聊得来。