主页灵感对照

2026-11-04 · 两个助手翻了 Awwwards、Codrops、Dribbble、GitHub 和你的小红书收藏,共 40+ 个案例。点图看大图,点「打开原站」直接去玩。标 ⚠️ 要梯子 的是国内直连可能打不开的。

🚂 当前方向:一趟绿皮车

11-04 第三轮:博古架、园林、山水都太古(项目有古有今),已否;唱片好看但不独特。你补充了熄灯、车票、车窗能出去、桌上的东西、喇叭,方向定在火车。

票夹(目录;封面 = 关于我) └ 抽一张票 → 走到那扇窗前 车厢:左右走,一扇窗一个项目;窗前小桌板上散着这一站的东西(能点、能拿起来) └ 推开车窗出去 → 那个项目的世界 → 进入项目网站(原路回到这扇窗) 熄灯开关:全车入夜,窗外变夜景,车里只剩点点孤灯(每个项目白天 / 黑夜两张皮) 广播喇叭:开关音乐 加项目 = 多一扇窗、多一张票;车厢不够就再挂一节

🎨 画风第二轮:10 种手绘 + 4 种高级 3D

都是 image2 按同一节车厢画的,这次每张都要求「高级、大气、留白、克制配色」。书上的字和车票还是假的,只比画风。点图看大图。

手绘

① 写实油画 · 几何光影 ⭐
② Riso 孔版印刷 · 三色油墨 ⭐
③ 现代木刻版画 ⭐
④ 光感动画背景
⑤ 手绘动画水粉背景
⑥ 彩铅 · 暖色底纸
⑦ 清线漫画
⑧ 杂志封面式 · 颗粒渐变
⑨ 粉彩印象派
⑩ 多层剪纸(没画出纸感,失败)

高级 3D(真实烘焙光影、胶片颗粒、不要模型感)

⑪ 电影级写实 · 白天 ⭐
⑫ 电影级写实 · 熄灯 ⭐
⑬ 电影级写实 · 过道机位 ⭐
⑭ 手绘质感 3D
我觉得最「高级大气」的几张:
手绘:①写实油画,最像美术馆里的画,光影成块、很安静,有电影感;②Riso 孔版,最有设计感也最独特,颜色大胆,像独立杂志、艺术海报;③木刻,黑白为主、图形感强,熄灯版会很漂亮。
3D:⑪⑫⑬电影级写实,比第一轮高级很多,关键在低饱和、胶片颗粒、体积光;⑬ 这个机位一眼看到整列窗户,每扇窗一个世界,最「大气」,可以当首屏。
④⑤ 好看,但动画感强,容易被认成某部动画的同人;⑦⑧ 偏商业插画;⑨ 偏柔,不够大气。

🎨 画风第一轮(已看过):四种画法

都是 AI 按同一段描述画的效果图,只为比较画风,细节(书上的字、车票)都还是假的。点图看大图。

白天

A · 3D 写实柔光
B · 3D 微缩模型
C · 轻快水彩
D · 钢笔淡彩

熄灯后

A · 3D 写实 · 夜
C · 水彩 · 夜
画风好在哪担心什么
A 3D 写实最「摸得着」,光影、材质真实,熄灯那一下最有电影感跟 sasshi 气质接近;最重,简历打开慢;每个项目都要建模,做起来最难
B 3D 微缩已排除:你说 3D 不要模型感,要真实烘焙的光影(= A 这种)
C 轻快水彩明亮、透气、少见,最像「一幅画」;古风、现代的窗外景都能画进去不违和东西拿起来、翻过来时,要做出「纸片」的立体感,不能像贴图
D 钢笔淡彩线条清楚,桌上的小东西一眼认得出、好点;像旅行速写本,贴「热爱旅行」比 C 素一点,颜色不够饱满时「哇」感弱
我的推荐:C 轻快水彩为主,桌上能拿的东西用 D 的细线勾一下边。
理由:① 你要「艺术作品」,水彩最像一幅画,而且网上几乎没有水彩风的个人主页,独特;② 古诗词的山、旅行的云海、冰箱里的厨房窗,水彩都能画,不会像 3D 那样一到可爱项目就换了个世界;③ 熄灯后的水彩夜景(右下)很美;④ 比 3D 轻得多,简历打开快、手机不卡;⑤ 水彩本来就允许每张有点不一样,AI 出的素材风格差一点也不违和,以后加项目最容易。
想要的「实物手感」用动作来补:东西被拿起来时微微翘起、带投影,翻面、晃动都有。

⓪-A 博古架 · 一格一件宝贝已否:太古

故宫 · 数字多宝阁首页就是一面多宝格,大大小小的格子里放着不同文物,点进去能 360° 转着看。证明「格子各异、整体统一」成立。缺点:太像官网,没光影没手感。
沈阳故宫 · 数字多宝阁一件文物占满一屏,竖排题字在旁边。可以参考「取出来端详」那一层的排版。
识典古籍线装书立在白展台上,留白多、光很干净,比故宫那种红底高级。
拿在手里会反光倾斜手机,表面光泽流动。用在「取出来端详」:玉的温润、描金的闪、宣纸的哑光都能摸出来。
钻进小世界一个小东西里藏着一个完整的世界。用在第 3 层:钻进山子,里面就是山河。
穿门过场(FOLIO)镜头绕到窗前再钻进去,窗里的画渐变成真画面。钻进每件宝贝都用这一招。

⓪-B 园林回廊 · 移步换景已否:太古

沿一条回廊走(电脑横着走,手机往下走),墙上的漏窗一个一个过:月洞门、海棠窗、扇面窗、瓶门……每个窗的形状就是项目的肉身,窗里框着项目的世界(诗词是山水,冰箱里是一扇暖光的厨房窗)。点窗,穿过去。新项目 = 回廊再长一段、墙上多一个窗。园林的漏窗有上百种样式,用不完。

故宫名画记 · 手卷横着一路展开,景一段段过。回廊走起来就是这个节奏。
每扇窗一个世界窗框统一、窗外各异,换成漏窗就是园林版。
无限山水回廊外的远景可以用它一直「画」下去,走多远都不会到头。
我的看法:意境最好,也能一直加。但它是「看窗」,不是「拿起东西」,手感比博古架弱;冰箱里、工历的世界要放在中式窗框里,得设计好才不违和。

① 一桌册子 · 穿门而入过场可借,桌子太窄

作品 = 桌上的一本本册子。翻开,书里立起纸机关,穿过它进入作品。你收藏的两篇都在这里。

FOLIO 的「穿过圆窗」过场(助手读了它的代码)

① 封面翻开
② 名字像纸片立起
③ 书页上的圆窗
④ 镜头钻进纸隧道
⑤ 落进作品

镜头先抬高、绕到窗正前方,再钻进纸筒;窗上的画从「印在纸上」渐变成真视频;全程约 2.8 秒,出来 1.8 秒原路倒退,手机返回键也能退回书里。

FOLIO · Paper Machines台灯下一本立体书,每页立起一台纸机关。整本书只靠滚动驱动,往回滚书会倒着合上。⚠️ pages.dev 可能要梯子;作者不开源,只能学思路
sasshi(冊子)清晨窗边书桌上的三本册子;履历册里的拉链袋装着名片、门票、拍立得,摇手机会互相碰撞。从不跳页,新册子落到桌上自己打开。开源(AGPL:改了公开部署要公开源码)
cchu 手绘立体纸书不用 3D 引擎的纸书:每翻一页,旧页的纸片躺倒,新页的立起来。手机上变成叠起来的卡片。很轻。
StPageFlip 翻页拖住书角,纸会真的卷起来、带阴影。缺点:不支持从右往左翻(线装古籍要用 turn.js)。
识典古籍一册册线装书立在白展台上,像博物馆展柜,可以参考诗词那两册古籍的样子。
用在你身上:诗词古风版 = 蓝布面线装书,从右往左翻,页上立一座纸山和月洞门;立体版 = 同一套的下册,翻开是立起来的山河;旅行地球 = 盖满邮戳的护照折页,页上一扇舷窗;冰箱里 = 贴满食物贴纸的手帐,贴纸能揭下来;工历 = 一本台历,从上往下翻。
我的看法:穿门过场和「每本材质不同」都很好,但桌上只能摆几本,以后加项目就挤了。诗词那两本古籍可以搬上博古架。

② 唱片架 → 抽出 → 唱机播放可行

作品 = 唱片店箱子里的一张张唱片。翻找,抽出,放上唱机,标题浮上来。

Codrops 交互唱机封套右边露出一截黑胶;点开 → 唱臂摆进来落到碟上开始转,封面变成碟心贴标,左上浮出名字。几乎就是你描述的那样。缺点:手机上不能滑,只能点箭头。
Vinyl Vault 唱片箱「翻箱子,抽封套,带回家」。手机上往上滑就是往后翻,抽出的那张转过来正对你。手机上翻找做得最好。
App 动效:唱片滑出手机横滑,滑到中间那张的唱片自己从封套里滑出一半,再滑走它就缩回去。手机手感最自然。
唱片轨道就是导航唱片上一圈圈的纹路是菜单(介绍 / 简历 / 作品),唱针落在哪圈就去哪。概念最巧。⚠️ vercel 要梯子
会反光的卡片倾斜手机,卡面的光泽跟着流动。可以让诗词封面像宣纸、冰箱里封面像亮面贴纸,材质「摸得出来」。
我的看法:现成参考最多、实现最稳,手机上横滑抽唱片很顺手。但「唱片」装不下「古籍」「台历」这种不同的东西,每个项目只能换封套图案,「容器各不相同」会打折扣。另外唱片作品集网上不少,不够独特。

③ 绿皮火车 · 一站一个项目已选

你坐在车厢里,窗外的景依次变成不同项目。网上没有人完整做过「绿皮车厢 + 手绘 + 一窗一项目」,都只做了一部分。

Lofi Radio Train坐在老车厢里,看得到自己的膝盖、收音机和圆角车窗,窗外可以切雨、切雪。画面最接近老火车。手机版只写了「请用电脑」。⚠️ pages.dev 可能要梯子
Poonno 夜行列车作品集往下滚 = 火车往前开,每到一站停一下,内容像发黄的旧报纸浮上来。结构最贴「一站一站」。
Lofi Worlds舱内视角,每扇窗外是不同的世界,在它们之间旅行。对应你说的「左右走,每扇窗一个项目」。
纯 CSS 火车视差远山慢、近树快,三层就能让窗外风景流起来。最轻的做法。
The Boat水墨插画 + 滚动叙事,画面会随船摇晃。墨色和晃动感可以借给绿皮车。
我的看法:做出来是独一份,怀旧感最强,声音(哐当哐当)也最有戏。但车窗是「看」,不是「拿」,实物手感比册子、唱片弱;每扇窗都是同一个窗框,「容器各不相同」只能靠窗外的景来体现。

④ 一天:生活艺术家的一天已否:加项目会太窄

往下滑,时间往前走:清晨 → 正午 → 黄昏 → 深夜。每个项目出现在它的时辰:早上翻工历,中午打开冰箱,下午摊开地球,夜里点灯读诗。这是我想的,网上没有完全一样的,下面是借光影和换色手法的参考。

Firewatch 官网分层插画,一种光就是一种情绪。用在「一天」里,每个时辰一套光。
同一间屋子换颜色屋子不变,换一个状态就整体重印一套颜色。「一天」里房间不变,换的是时辰和光。⚠️ pages.dev 可能要梯子
窗外的天气和时辰Lofi 系列都能切雨雪昼夜,配上环境音(清晨鸟叫、午后蝉、夜里虫鸣),时间就「听得见」。
我的看法:最贴「生活艺术家」,每个项目有自己的光,风格不同是理所当然的。但它是「时间轴」,不是「一层层往里走」,你要的层次感要另外设计;没有现成参考,风险最大。所以我建议把它的光借给方向①:桌上的光跟真实时间走。

⑤ 山水长卷偏单一

主页是一幅水墨长卷:电脑横着拖,手机竖着滑(变成立轴)。卷上依次出现五处景,滑过时由淡墨变青绿、落一方朱印,点印章进入项目。或者走在园林回廊里,每个漏窗、月洞门框着一个项目。

{Shan, Shui}* 无限山水用代码一笔笔画出的水墨长卷,往右拖永远画不完。开源,免费可用(6.4k 星)。
故宫名画记手卷横向展开,竖排题字。一卷画就是一扇连续流过的窗。
我的看法:意境最纯、不用 3D、最轻。但整站都是水墨,冰箱里、工历这种可爱或实用的项目放进去会违和,跟你「每个容器风格不同」的想法是反着的。更适合做诗词那本古籍「里面」的世界。

⑥ 老电视 / 收音机调台最轻

同一间书房,一台老式收音机或电视。左右拨频道,刻度转动、沙沙响,整个房间换一套双色印刷的配色:诗词台墨+朱砂,旅行台群青+米白,冰箱台奶油黄+番茄红。屏幕里放项目预览,点屏幕进入。

Bedroom BroadcastCH 00 是关于我,CH 01 起每台一个作品。换台时房间重新「印」一遍,换成这个台的两种油墨。(跟 FOLIO 同一个作者)⚠️ pages.dev 可能要梯子
同一个房间,三个台对比屋子一样,颜色全变。「混搭不乱」最好的示范。
我的看法:手机上左右滑换台最顺,比册子轻很多。但它是「换颜色」,不是「拿起不同的东西」,实物手感和层次感都比方向①弱。现在这个风格偏美式潮玩,要整个重做成中式。

⑦ 微缩世界 / 小星球已并入博古架第 3 层

柜子里摆着几个小世界(山水盆景、装着云的玻璃球、小冰箱模型),点一个,镜头一头扎进去。

Messenger 小星球一颗能走一圈的小星球,小人在上面遇见别人。
Bruno Simon开着小车在岛上兜风,撞到哪个牌子就是哪个作品。3D 作品集里最有名的一个。
我的看法:「钻进去」的感觉很爽,但很重、偏游戏,当简历用加载太慢;而且它是 3D 卡通模型的质感,跟你喜欢的纸感、手作感不太搭。

⑧ 手帐拼贴 / 行李箱的小手法零件

这些不是完整方向,而是可以装进任何方向的「零件」,特别适合冰箱里那本手帐和「关于我」。

揭贴纸拖住贴纸一角,它沿弧线卷起来,背面和阴影跟着变,松手能甩出去。冰箱里那页:揭下一张食物贴纸 = 进入项目。
撕边纸 + 胶带撕边纸、拍立得、手写体;点哪里就「啪」地贴上一条半透明胶带。
TRAVELER'S notebook一个皮质封套夹着各种不同的内页纸,正好说明「外壳统一、内页各异」。
mmm.page散落的贴纸、3D 小物件、荧光笔划过的标题,拖拽拼贴。

每个项目风格不同,怎么做到不乱

所有做得好的案例都用了同几招,不管选哪个方向都照这个来:

统一什么用在你身上
同一个容器一张桌子(或一节车厢)贯穿全站,项目只是上面的「东西」
同一束光全站一个光源、同一个方向的影子,宣纸和亮面贴纸放在一起也不打架
同一套动作不管什么材质,拿起、翻开、穿门的动作和节奏都一样
同一套外圈文字册子可以花,标签、编号、简介的字体全站一套
环境色跟着项目走拿起诗词那本,整个桌面泛青绿;拿起冰箱里,泛暖粉
已经定下的事
  • 五个项目:诗词山河卷古风版、立体版、冰箱里、工历、旅行地球
  • 每个项目的容器风格不同,贴合项目(诗词 = 古籍);文案讲「能干嘛」,但用项目自己的口吻
  • 交互像长镜头,有逻辑层次地一层层往里走,原路退回
  • 滑动、翻页要有摸实物的手感
  • 电脑为主(当简历),手机也要好用,单独设计
  • 有声音(对方第一次点或滑之后才出声,带静音开关)
  • 关于我:生活艺术家;热爱旅行、美食、vibe coding、一切美的事物;联系方式留小红书和邮箱
  • 名字待定,不叫「鹅鹅小站」;「鹅鹅小站」只和备案号一起放在页底
  • 整体框架不能太古(项目有古有今);方向定为绿皮火车(结构见顶部)
  • 以后还会一直加项目,结构要能无限往上加
  • 成功标准:对方看完说「哇,很有审美、很有创意」

上线前要处理:立体版补南海诸岛并换正式网址;冰箱里、工历、旅行地球搬到 eely.com.cn 子域名。