这里记录我对网页设计的探索,从完整网站到交互片段。打开预览,感受排版、色彩与动效的不同表达。
机架里的一台机器——近黑的机身、深凹的槽位与上亮下暗的把手,唯一会发光的是紫色;七个控件都能真的拖动、用键盘操作、撤销
白色微缩城市、深蓝文字与橙色笔触,椭圆章节把建筑与日常生活连成一条轻快的叙事。
明亮蓝色、白色缺口标签与会动的微缩世界——从一座车站,探索一种未来。
光学工作台——近黑的仪器底色上,95% 是石墨与白,琥珀色只用来点缀;放大镜逐像素重采样身后的刻度,折射率、色散、镀膜与焦散都是能读出数值的量
信号黄与石墨黑、巨型工程铭牌和精密硬件特写——一套可以亲手组合的工业系统。
皇家蓝渐变、Marcellus 巨号衬线字,和一条随滚动转满一圈、把四颗球依次送上顶点的虚线轨道。

灰阶几何、颗粒品牌图形与樱粉日历——从涩谷走向世界的创新社区。
白色微缩城市、红色招聘入口与沿路行驶的小车,把能源行业的未来感变成亲切的职业旅程。

银灰颗粒里的流动色光、巨型周年字标与纵向品牌年表——一封写给过去与未来的感谢信。
橙红轨道、冷灰留白与纤细大字——客户体验咨询的几何叙事。
两个人的日常礼物——生活摄影、纤细朱红字标与温柔留白,缓慢展开一份可以走进去的礼物目录。
炭黑金属、精密坐标线与建筑影像——以克制排版和滚动镜头讲述下一代数字基础设施。
林间住宅的一场漫步——巨幅字标、整屏真实 3D、烘焙暖光与滚动镜头,从庭院走向生活的细部。
冷蓝山海、巨幅宋体与一点朱红——十个关键词串起一场可以自由停留的动态诗意展。
黑白工作室与大字排版——细线网格、插画、漂浮纸片菜单和橙色终端,串起作品与品牌服务
炭黑研究工作台——银色细线框、圆角笔记组与红色边光,把用户反馈串成可追溯的产品决策
京都山寺夜行——朱红月亮、炭化木殿、薄雾与落叶,滚动镜头穿过庭园,插画卡片像布料一样随指针起伏
日蚀光环下的一款安静的速记工具——石墨底色、银灰衬线字与悬浮输入框,在思路被打断之前记下零散的念头
乳白实验室里的空间档案——无尽的光学档案匣阵列、克制的黑字与抽屉式阅读,把信息变成握得住的物件
林间的增长工作室——晨雾中的建筑、明暗两套主题的玻璃层与酸橙色按钮,把信任、转化和长期增长放进同一条安静的路径
火山荒原上的态势界面——航拍的车队、测量网格与安全橙的锁定框,把地形感知、平台选择和任务档案收进一套精密的现场界面
斜切构图的建筑档案——冷灰纸面、石墨色的现场照片与悬浮的建筑画框,结构、气候和材料围绕同一栋住宅逐层显现
光学目标校准台——纯黑的底、红色的实时指示与可拖动的高精度光圈,把捕获目标、校准、锁定串成一条看得懂的闭环

紫色星云里的产品操作系统——巨大的无衬线标题、光束穹顶与透视的工作台,把 issue、agent 和 release 放进同一个可以逐项检查的平面

共同的时间——黑色的精密钟体、橙蓝两色指针与冷静的工业排版,给独立产品团队定下一套看得见的协作节奏

发光的生态轨道——冷白雾面、蓝紫色的数据核心与环绕它的产品节点,让 Cat Forest 各个产品之间的关系一眼看清

海岸边的一场静心仪式——石油蓝的天幕、象牙色的信息卡与低悬的巨大天体,把被数字生活打散的注意力还给人

认知路由的控制面板——骨白色的工程排版、氧化红强调色与低多边形的决策体,把推理路径画成可以逐步查看的实时拓扑

神经信号控制室——近黑的空间、铜橙色的光轨与冷白的数据面板,把专注状态变成看得懂、用得上的界面

精密的数字建造现场——近黑的网格、琥珀色的光场与细字重的建筑宣言,把复杂系统组织成一座可以走进去的未来基础设施

合成语音的光谱——深靛色的夜幕、青紫色的生成场与高透明的玻璃切片,把语音基础设施做成一片可以亲手操控的声场

空间制图工作台——层叠的山体、测量标尺与奶油色的精密控件,把建筑构想推敲到最后一毫米

四联的建筑长卷——冰雾白、深夜黑与通高空间的摄影,四种未来办公原型在一屏里并排展开

电影式的系统片头——纯黑的底、锐利的闪字与稀疏的连线网络,让动效的节奏本身成为主角
雾面的图标研究室——半透明侧栏、柔灰的彩雾与密集的圆角图标,把应用的视觉语言整理成一份可以筛选、可以逐层查看的活档案
深色的数据工作台——近黑的工作面、珊瑚色的运行指示与高密度的产品界面,让 Python 模型顺势长成决策工具
暖黑色的电影制作台——衬线大字的宣言、胶片式的流程与米白色的编辑纸面,把复杂的产品发布理成一条清楚的叙事
聚光灯下的产品橱窗——哑光黑底、奶油色聚光与特大号的中等字重标题,产品一件件被光照亮
入夜后的海——全屏电影感叙事,一屏一个系列,标题即海报
暗房——近黑的暖色调让照片自己发光,相机参数本身就是排版元素
桌面上的一台大气观测仪——暖灰色塑料的新拟物面板,一块 CRT 屏里只有磷光绿在发光,旋钮能转,单位能拨
处处是边框的技术线框——近黑底色、虚线框加四角小方块,只用 400 一种字重,紫色只填一处,线条自己在走
技术蓝图——淡紫灰的纸面、45° 的剖面线与带刻度的尺寸标注,字标像是一段段量出来的,而不是画出来的
自动化机器学习流水线的控制台——近黑底色、锌灰面板与唯一一根翡翠绿的信号线,光束、旋转的边框和辐条场都在匀速运转
把色彩当尺子的设计课——近黑底色、对位线钉住四角,一段 3.5 秒、分五个阶段的入场,收尾是五根由窄到宽的彩条
骨白叠在纯黑上的多资产基金页——一层 24px 圆角的外壳框住整页,衬线大标题逐词浮起,一条可以拖动的时间轴把五档风险摊开
一束红光里的一叠卡片——近黑底上飘着扫描线,中间的五张 3D 卡片跟着鼠标转向,点一下侧边的卡片,它就转到中间
全天候的智能调价雷达——深青色的暗夜、流动的光波与点睛的衬线斜体,把上千家电商的实时价格变化变成主动的竞争优势