UI Style Research · Mood Board

萝卜城 ROBOE CITY · UI 风格全网调研

故事内核已定——一座住着 25 位 AI 同事的萝卜城。这次不凭内部感觉,直接扫了 2025–2026 的设计趋势、Awwwards 获奖案例与真实品牌站,带回 4 个有出处、可落地的视觉方向。

调研日期 2026-08-15 信源 Figma / Adobe / NN-g / Awwwards / 站酷 等 候选方向 4 个 参考图 8 张(已本地化)
01

趋势雷达

本轮检索到的高频信号

新粗野主义 Neo-brutalism

粗黑边框、硬位移阴影、高饱和撞色、卡通图形,反精致、强记忆。Gumroad / Figma 在用。

NN-g · Bejamas · Envato

黏土感 3D / 盲盒角色

软糯哑光的 3D 黏土角色,暖光、可收藏感,像潮玩盲盒。温度感与辨识度拉满。

站酷 · Behance 趋势

便当盒 Bento 布局

Apple 式卡片网格,大小格错落,信息密度高又整洁,极适合"工具合集"。

bentogrids.com · Figma

Barely There 极简隐形

细字型、大量留白、黑白灰+单一强调色。OpenAI / Perplexity 的冷静高级感。

404web · 趋势报告

手作感 Human Touch

手绘涂鸦、蜡笔色、纸纹肌理,"反 AI 打磨"的温暖人味,贴故事气质。

404web · 蜡笔回归

滚动叙事 Scrollytelling

靠滚动推进剧情,元素按节点浮现,把"故事好"直接变成浏览体验。

UX Pilot · 404web

等距城市插画 Isometric

等距视角的城市/地图插画,Awwwards 常客。当前首页已用此语言。

Awwwards 案例集

微交互 + 游戏化

小反馈代替大动画、奖励/进度机制,让"逛城"有手感、有粘性。

UX Pilot

千禧怀旧 / 像素

像素图标、旧电脑界面感。已作为主题 F 落地。

UX Pilot · 已落地
02

推荐方向 · 四选一

每个都不同于现有 A 夜城控制台
1

新粗野 · 玩具萝卜城

Neo-brutalism Toy City
新粗野主义参考
参考:新粗野主义的粗边框 + 撞色 + 位移阴影

把萝卜城做成一个贴纸玩具世界:粗黑边框的建筑、硬位移阴影、大面积撞色、圆润粗字体。25 位 AI 同事变成一张张贴纸式角色卡。反精致、极有性格,在一众"冷淡 AI 站"里一眼跳出来。

强记忆粗边框撞色贴纸卡片圆润粗字
适合
  • 想与 OpenAI 式冷淡风拉开差距
  • 性格鲜明、年轻化、社交传播强
  • 纯 CSS 即可实现,成本中等
权衡
  • 高饱和看久易累,需控制留白
  • 商务/严肃场景观感偏"玩"
萝卜城适配度
88%
来源:NN-g Neobrutalism · Bejamas · Envato(代表站:Gumroad / Figma)
2

黏土盲盒 · 手办收藏城

Claymorphism Blind-box City
黏土风3D角色参考一 黏土风3D角色参考二
参考:软糯哑光的 3D 黏土角色,潮玩盲盒质感

每位 AI 同事都是一个可收藏的黏土手办,萝卜城是展示架。软糯、哑光、暖光,手感与温度拉满——正好回应"温暖有机+科技"的初衷。这是四款里辨识度最高、最贵气的方向。

辨识度天花板最温暖3D 黏土盲盒收藏暖光
适合
  • 把 25 位同事做成 IP 形象/周边
  • 温度感、高级感、情感连接最强
  • 天然适配"抽角色/认识同事"玩法
权衡
  • 需 3D 资产,成本与周期最高
  • 可先用 2.5D/插画过渡
萝卜城适配度
92%
来源:Behance 2026 趋势 · 站酷 2026 十大预测(黏土/盲盒风)
3

便当盒 · 城市分区图

Bento Grid City Map
便当盒布局参考
参考:Apple 式 Bento 卡片网格,大小格错落

整页就是一张城市地图,每个便当格是一个街区/一位 AI 同事/一个工具。大格放主角,小格放功能,错落有致。最"好用"的方向——信息多而不乱,扩展 25→250 个角色也不崩。

最能装卡片网格错落大小整洁现代易扩展
适合
  • 把"AI 工具合集"讲清楚
  • 结构清晰、加载快、利于 SEO
  • 响应式天然友好
权衡
  • 故事感/情绪弱于 1、2、4
  • 需在格里加插画补足温度
萝卜城适配度
82%
4

手绘绘本 · 滚动讲故事

Hand-drawn Scrollytelling
手绘涂鸦风参考一 手绘涂鸦风参考二
参考:手绘涂鸦 + 蜡笔色 + 纸纹肌理

把"故事好"这个优势直接做成体验:手绘涂鸦的萝卜城、蜡笔色、纸的肌理,页面像一本翻开的绘本,随滚动一步步讲城里的故事。最有"人味"、最反 AI 塑料感的方向。

最贴故事最有温度手绘涂鸦蜡笔色滚动叙事
适合
  • 放大已认可的故事内核
  • 情感连接强、品牌记忆深
  • 与冷冰冰的 AI 站彻底区分
权衡
  • 需定制插画资产,工作量不小
  • 信息效率低于便当盒
萝卜城适配度
90%
来源:404web 2026 趋势(Human Touch / 蜡笔 / Scrollytelling)· UX Pilot
03

一张表看清取舍

方向气质故事感温度落地成本一句话
1 新粗野张扬·玩具感●●○ 中一眼跳出来的贴纸城
2 黏土盲盒软糯·收藏感最高●●●把 25 位同事做成 IP 手办
3 便当盒整洁·工具感中低○○ 低最能装下工具与角色的地图
4 手绘绘本温暖·叙事感最高●●●把故事翻给你看
04

信源清单

均可公开访问