M4 交互 · 流体无边
响应式网页 · 落地页 · 站点
硬约束 尺寸未知,视口可变——尺寸不是设计输入而是运行时输出。连续滚动,非分页。
骨架特征 先定元素关系再指派尺寸,与 M1「先定画布再排版」方向相反。可访问性是硬约束不是加分项。
可取用
7 套有规格、有可运行的参考实现、有打包 prompt,且过了 AI 复现测试。点一下复制,整份交给你的 AI。
入馆藏品
113 件 · 35 席入选按加权分降序。每件都有八维分与逐条评语,可以打开可运行的原件。 还没拆成规格,所以没有 prompt——它们是选品与参照。 淡掉的是留池未入选的,评语里写着为什么。
-
-
-
-
-
-
-
-
-
-
fs editorial forest
入选4.50- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
草木染工房的季度回执,最强是把「浸染次数→实测布色」做成六格双行色阶矩阵、茜草红与艾草绿两个色彩既是内容又是配色角色,加上贯穿全幅的深绿数据带把页面切开;最弱是骨架仍是「页眉—大标题—四格指标—图表」的常规堆叠,色阶行侧的媒染参数小字(约10px 灰绿)偏小偏淡。
打开可运行的原件 → -
Ocean Depths(theme-factory)
入选4.50- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
深潜科考专题:页面从浅到深逐层变暗,左侧刻度尺 0→8216m,往下读的顺序就是下潜的顺序——形式与内容同构。
打开可运行的原件 → -
ux editorial grid magazine
入选4.50- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
《候鸟》非虚构双月刊封面故事,讲一只编号 E07 的东方白鹳四千公里夜航;最强是中文排印功力——汉字数字、首行缩进、把「三」当首字下沉红字用、三栏灰度均匀、全页只有一个红做强调且路线图仍复用这个红;最弱是那张月夜插画偏通用矢量味,撑不起「摄影」署名,且三栏底部参差未收、底部路线图被裁断。
打开可运行的原件 → -
ux e ink paper
入选4.49- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
墨水屏周报头版(一周只推一次的离线阅读器刊物):最强是把「电子墨水」当成材料而非贴图——局部刷新方块、已离线四天、上一版残影做成真的淡灰重影、点阵抖动插图、首字下沉与三栏宋体,中文报刊排印功力全库前列;最弱是三栏栏宽偏窄导致两端对齐处字间被拉开,且黄色同时充当划线高亮与主 CTA,在一张宣称无背光的墨水屏上既角色重复又略出戏。
打开可运行的原件 → -
ux nature distilled
入选4.49- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
柴烧陶所「出窑名录」页:窑膛剖面温区图 + 九件器物明细表(釉相色点、落灰七划记、认领状态三色点)+ 单件特写考释,母题原创且全部承载信息,中文竖式地址与汉字数字气质拿捏最准;最弱是窑体与碗的插画完成度明显低于排印,温度标注压在插画上略乱。
打开可运行的原件 → -
ux swiss modernism 2 0
入选4.48- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
美术馆「楼梯间」建筑档案特展页:最强是内容与形式真正咬合——楼梯剖面图带尺寸线、平面图上红色虚线动线、一二三汉字序号分栏、四格事实条,红色只承担「强调/下一场/购票」一个角色,零装饰;最弱是瑞士网格+红黑白本身是被复刻最多的语言,盖掉内容后视觉母题的原创度有限。
打开可运行的原件 → -
fs creative mode
入选4.47- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
孔版印房的九月机台开放页,四支油墨既是色板又是数据本身——4×4 叠色对照表把先印后印顺序、叠印结果色和命名全摊开,对角线斜纹表 100% 单色,粉卡的橙色偏移阴影是套准错位的自觉引用,颜色角色零漂移;最弱是全页找不到预约机位的主行动入口,「还剩 11 个半天机位」只到告知为止。
打开可运行的原件 → -
fs monochrome
入选4.47- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
城中村小卖部六年手写账簿的田野档案释读说明;最强是把内容直接变成形式——74 根竖条=74 本账簿、条高=页数、斜线网点=不可释读页,配括注、图例与「图一」注释,米黄纸面+等宽微型字+发丝线的档案气质全库少见,文案「这份说明不解释这些数字意味着什么」毫无自夸;最弱是顶部导语单栏行长偏长(近 40 字),且正文字重偏细,密度虽好但阅读负担比 editorial 略重。
打开可运行的原件 → -
-
ux minimalism swiss style
留池4.45- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
轨交站牌版式引擎页:黑白红三token、站牌实样 + 1:8 工程约束图 + 时刻表同源字阶,删无可删且像素级对齐;最弱是「输入/规则/输出」三栏偏薄,且瑞士网格+等宽拉丁本身是被走熟的路,离心力略输给题材更冷僻的几张。
打开可运行的原件 → -
fs biennale yellow
留池4.44- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
盐场双年展的观展手册页:最强是中文排印的整体克制——宋体正文、汉字数字"一二三四"作单元编号、右侧三行式元数据栏、左侧黄块出血标记,文案还有真声音("那段路我们没有修,它是展览的一部分");最弱是标题后那团黄色高斯光晕本质仍是渐变球,是全页唯一纯装饰,四个单元行与右栏元数据重复同一模板四次略显机械,双栏正文行长只有约 24 字导致断行偏碎。
打开可运行的原件 → -
fs bold poster
入选4.43- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
兰州牛肉面主题季刊创刊号页:最强是"十种面实测截面"表——按 9px=1mm 等比画出十种面的真实横截面并共用一把毫米标尺,是全批次最原创的信息图,红黑双色与斜体 LANZHOU 只用在拉丁字与数字上、中文另用重黑体,混排处理干净;最弱是标题上方那段引言被压成极小号窄栏,导致视线第一落点是最小的字,五格规格条里"十六开"用正体中文而其余四格用斜体数字,同一行内出现字体轴摆动,格宽也随内容长短不齐。
打开可运行的原件 → -
ux inclusive design
入选4.42- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
社区卫生中心的家庭用药表(六种药三时段,含无障碍多通道):最强是概念即设计——圆形横条纹/方形网格/三角/六边等形状图案编码让颜色只排第四位,再用「同一张表,四种读法」四栏并置证明它,颜色角色零挪用、焦点黄环与停用斜纹一致到像素;最弱是排印本身只做到「正确」没做到「有品」,全页单一无衬线、字阶朴素,四栏对比区小字偏小,艺术指导是这批里最克制也最寡淡的。
打开可运行的原件 → -
ux micro interactions
入选4.42- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
把「三手势收件箱」做成一份可读的动效规格页:最强是原创图解语言——彩色滑动带里画出 72pt/96pt 判定虚线、触感波形行、同一按钮六态条,全是为这个内容发明的图,且绿=成立/红=不可逆/琥珀=蓄力的语义色在图表与按钮态中零漂移;最弱是规格行字号偏小且密,手机样机与绿色带的卡片内容有轻微重复。
打开可运行的原件 → -
fs grove
入选4.40- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
自然保护地七年物候年报,最强是把一整年绕成一个圆、四条轨道各代表一个树种的极坐标物候环,陶土红只承担「提前量/变化」这一个语义并贯穿标题、指标与图例,全库辨识度极高;最弱是图内月份刻度与坐标小字对比度约 2.5–3:1 近乎不可读,且元信息行与指标行两排四栏结构雷同,中段层级偏平。
打开可运行的原件 → -
fs long table
留池4.40- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
一席二十四座长桌晚宴的订位页,最强是 6.4 米长桌的座位平面图(实心=已订/空心=可订,与文案里 07/12/18/21/24 完全对得上)和砖红单色系+斜体衬线数字的严格规则,全页只有一个最高强调即那枚订席胶囊;最弱是右上巨型「十一」与 ELEVENTH SEATING 小栏基线与左栏未对齐、属可删的装饰余量,座位图内 11–12px 砖红小字在米黄底上对比接近临界。
打开可运行的原件 → -
ux brutalism
留池4.40- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
《毛刺》第41期消费维权测评刊——实测退订一个音乐App要走七道门;最强是内容与形式同源:七道门流程图、绿字原始记录、可直接抄走的投诉信模板、页脚「本站没有Cookie横幅因为本站不放Cookie」,野蛮主义在这里不是皮肤而是立场,且信息密度极高秩序不乱;最弱是小字号中文被整体加了宽字距(「2026 年 8 月 5 日」「实测机 iPhone 15」),机械感重、灰度不匀,且层级相当程度依赖粗黑框堆叠而非字重灰阶。
打开可运行的原件 → -
fs broadside
入选4.39- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
工业遗产纪录片巡展的首站页:最强是二号高炉纵剖面图,左侧标高轴(±0.00 至 +38.5M)、炉喉/炉身/炉腰/炉腹/炉缸分段、橙色只标"这次加进去的三处"(银幕、放映机位、阶梯观众席)并附 1:200 比例尺,制图精度和现场感全批最高;最弱是页面骨架仍是幻灯片式的"标题—标签行—四个大数字—章节",三组"四连排"节奏叠在一起显得重复,且橙色在图里被赋予明确语义后,又被拿去做统计数字、标签边框和日期的通用强调色,语义与装饰混用。
打开可运行的原件 → -
-
-
fs mat
留池4.37- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
木作工坊的单椅规格档案页,最强是侧立面与正立面两张 CAD 式线图配带 ±1 毫米公差的实测尺寸表,文案全是事实、逐条删不掉,橙色只标注「折点」这个设计要害;最弱是首屏左栏文字止于中段而右侧图纸继续下延,留下近三百像素的失衡空档,图纸内标注文字(1:8、节点 A、435 座高)在橄榄底上偏淡。
打开可运行的原件 → -
fs pin and paper
留池4.37- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
杭州旧衣修补铺的接单记录页;最强是「破损定位图」——外套线描图上 5 个圈号与右侧工时价目表逐条对位,带 10CM 比例尺、红线=破损/网点=织补区的图例,红色只用于破损与「在修」印章,色彩语义零漂移,手写体只出现在两句店主批注上,克制得体;最弱是店名与主标题两块深蓝几乎同量级,身份与主张的一二级关系含糊,外套线描本身略糙(口袋是两个方框),插图框内右上留白空得有点无理。
打开可运行的原件 → -
fs editorial tri tone
留池4.36- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
单件红裙九版修改的档案展主页,最强是酒红/芥黄/粉三条通栏色带配 § 编号的章节体系,以及九版裁剪轮廓叠印的技术图+1-9 修改年表这组真内容图解;最弱是右下角六个圆点分页指示器是幻灯片残留(删掉无损),且斜体衬线数字的使用规则漂移(712 号、418 ㎡、第 3 次用斜体,1994 年、9 月 12 日却不用)。
打开可运行的原件 → -
ux dark mode oled
入选4.36- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
野外天文摄影的暗夜控制台(曝光队列+星图取景+今夜时间窗);最强是语义色治理——黄=正在发生/绿=已稳定/蓝=天象校准/紫=被干扰,四色角色在页面里自陈且零挪用,纯黑是功能(护暗适应)而非装饰,全批唯一把风格约束写成产品守则的一张;最弱是排印偏保守,标题之外字阶跨度小,纯黑上的三级灰小字(如「整夜白光输出低于 3%」)对比贴着下限,时间轴上下两排标签在 21:33/21:47 处挤
打开可运行的原件 → -
ux kinetic typography
入选4.36- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
Livehouse 现场歌词投字机(黑底酸绿,含五种投法与对轴台):最强是把「动态字体」落成一个真产品并用静帧证明——逐字上浮/翻牌换词/竖排走字/描边呼吸/双行预告五张卡各自演示一种排印行为,超粗压缩黑体加单一荧光色,中文字体气质与字重层次是全批最好;最弱是执行的收边——卡片网格两行宽度参差、底部对轴台左栏留下大片空白、描边呼吸那张叠影糊成一团,跑马灯两端切字虽是有意但读起来像溢出。
打开可运行的原件 → -
-
fs cartesian
留池4.34- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
美术馆祠堂檐口测绘展的展览页,层级全靠字号灰阶和留白撑起、几乎不用边框,手绘剖面图配六项编号图例带尺寸标注和制图署名,是真正的展陈级信息图;最弱是首屏右上那圈虚线同心圆纯属可删装饰,且「米色极简展览页」这一骨架本身在全库里辨识度不算高。
打开可运行的原件 → -
fs pink script
留池4.34- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
上海无招牌深夜酒吧的第十四期酒单;最强是招牌酒的杯体剖面图按真实毫升等比绘制,冰块标 -7℃/180G、皮油喷点、引线标签与右侧配方表逐项互证,中文宋体重体配拉丁衬线做标题、正文用中文数字「二十三点开门」,气质对味且非套模板;最弱是最小一级信息(毫升刻度 80/60/40/20、图注)在近黑底上灰度偏低,接近可读性下限,配方副行说明也偏暗。
打开可运行的原件 → -
ux parallax storytelling
留池4.34- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
「归墟三号」深海冷泉观测潜标的下潜叙事页;最强是版面结构直接由内容生成——左侧深度标尺(0m/120m/400m/1523m)与正文段落一一对位,中央系缆贯穿全页,背景色由表层青绿渐变到深渊黑就是「光在这里用完了」本身,中文衬线大标题配几何数字形成真正的对比轴,是这批里排印最考究的一张;最弱是顶部船体图形块状粗糙、器材图解笔画略单薄,中段青绿区正文对比度偏软,底部「↑47 min 上浮」刻度与正文关系稍脱。
打开可运行的原件 → -
fs cobalt grid
留池4.33- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
中文网页正文字号十年调研的通报页,最强一手是让可见网格底纹和直方图的计数单位是同一套格子(一格=2.75 个百分点),形式与内容彻底咬合,宋/黑/等宽三家族对比轴干净;最弱是右上那组条纹阶梯加像素方块没有任何图注,视觉重量不轻却读不出含义。
打开可运行的原件 → -
fs raw grid
入选4.33- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
面馆合伙人招募页:瑞士网格+重黑体中文标题,最强处是那张半小时出餐柱状图——午市/晚市分段括注、后厨上限虚线、峰值数值标签一应俱全,属全库图表第一梯队,粉色面板里的幽灵数字 386 也是可指认的原创母题;最弱处是语义色漂移,粉/鼠尾草本是图表的午市/晚市编码,却被拿去当四格指标卡的装饰底色,另有幽灵 386 被右边缘拦腰切断、图例里"共卖出 15 碗"数字两侧的空隙失控。
打开可运行的原件 → -
fs soft editorial
留池4.33- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
草木染工作坊季刊内页,主体是五染材×四媒染的二十格色谱表加三日课招募;最强是色彩系统与内容同构——页首五个色点就是刊物长期用色、页面唯一的高饱和accent(槐米黄绿)既是染料又是报名条底色,注解还把这层关系写明,语义色零漂移,中文宋体行高与全角标点处理是这批里最干净的;最弱是版式骨架偏常规(页眉/通栏标题/招募条/双栏正文/表格自上而下),圆角与柔色让它带一点「温柔 SaaS」尾音,招募条内文把「满四人开/课」拆行也略糙。
打开可运行的原件 → -
-
-
ux exaggerated minimalism
留池4.32- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
一年只做一件的服装品牌第七件产品页:最强是克制与减法——通栏「无肩线」超大字+规格表+11.07 黑场三段,逐个元素都删不掉,文案「做完即止,不做第二批」零自夸,橙色只承担朱砂内衬这一条语义线;最弱是执行完成度,大衣剪影几何生硬、朱砂三角是块生料,顶部那道无来由的黑边也没交代。
打开可运行的原件 → -
ux neubrutalism
入选4.32- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
自由插画师的改稿计次结算工具(v1–v8 版本账本+撕齿结算单+三种语气催款话术);最强是 A 离心力 4.6——「把甲方每句『就改一点点』记成有编号的版本并自动计费」这个母题是原创的、和场景死死绑定,v4-7 折行折叠、三档语气切换都是真功能不是装饰,去掉硬阴影后信息结构照样成立,执行上描边粗细/阴影方向/零圆角像素级一致;最弱是 B 层级 4.0:黄色同时承担导航登录键、v1-v3 标签、v8 当前行、结算按钮、底部大横幅五种角色,眯眼后有四五块同亮度黄在互抢,最高强调不唯一
打开可运行的原件 → -
ux zero interface
留池4.29- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
「候」——藏在抽油烟机灯带里的无屏厨房助手产品页;最强是把「唯一可见界面是灶台上方78厘米的一条光」变成了真正的视觉母题:四段光色(冷白/绿/暖/泛红)先在渐变条上定义,再在十一分钟时间轴里逐条复用成右侧色标,颜色角色零漂移,克制维几乎找不到可删元素;最弱是全页没有任何可辨识的主行动,更像宣言页而非产品页,且多处浅灰说明文字(「贴在抽油烟机下沿…」)接近对比度下限。
打开可运行的原件 → -
fs retro zine
留池4.28- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
独立乐队巡演小报:牛皮纸底+祖母绿单色,最强处是那张手绘感路线示意图,节点编号、公里数标签、实线自驾/虚线托运的图例区分都成立,配合首字下沉「县」、胶带贴痕、手写体英文边注,整页像真做过的乐队 zine 而非模板;最弱处是执行细节,上海节点的日期"11.0…"被绿色圆点压住截断,且绿色小型大写标签压在暖褐纸底上对比度只有 2 出头,胶带那两块也是纯装饰。
打开可运行的原件 → -
fs signal
留池4.27- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
江汉水情观测台的枯水期通航预研判公报(深藏青+鎏金+测绘方格底纹):最强处是把「航道纵断面」做成真正的原创母题——河床剖面图上方另挂 55 倍纵向放大的欠深金条,并在图注里如实交代双比例尺,卡口标签还做了错层避让,这是懂数据的人画的图而不是贴的图表;金色严格只标数量与关键词,未沦为装饰,眉标+短金线+图一/表一的组件复用零漂移。最弱处是把「三级灰」压到了 78,90,110(对比度仅 2.14:1),而这一层不只装订信息,还包括解释图表比例尺的图注和整张表的列头;叠加正文单行近 48 个汉字的失控行长、三级文字给中文加字距导致的灰度松散,以及正文写「3.70 米」有空格、图注写「6.00米」无空格的中西混排规则不统一。
打开可运行的原件 → -
ux trust authority
入选4.27- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
电子数据司法鉴定所委托页:最强是「意见书」文书拟真件(红章、案号、哈希片段)作为原创母题,加上送检/出具双栏对照与提取记录表,权威感靠证据而非形容词;最弱是克制——信任信号在英雄区四格、证照带、三张证照卡、页脚勾选条里重复了四遍,另外文书卡左缘有一处红色小图形像未清理的残件。
打开可运行的原件 → -
ux bento box grid
留池4.26- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
台面发酵机产品页:陶土/釉白/苔绿三色有固定语义(赭=温、绿=湿),腔温曲线、湿度环、夜噪柱与程序卡全是真数据,文案「没有联网,没有提示音」是有效的克制;最弱是执行细节——老面温度曲线出血到卡片右边缘像溢出而非留白,酸奶玻璃杯被卡底切断。
打开可运行的原件 → -
Cobalt
入选4.25- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
Strata API 页,「Documents in. Typed JSON out.」Stripe 学派满分作业——但正因学派成熟,A 维最低
打开可运行的原件 → -
fs retro windows
入选4.24- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
老电脑陈列室开馆页:Win3.1/9x 窗口外壳被当作真正的信息架构用(每个窗=一个章节),最强处是那张 486 主板俯视图——十个编号热点与右侧清单一一对应、红色虚线标出自加飞线,是这一批里少有的自制图解;最弱处是跨窗层级扁平(所有蓝色标题栏等权,眯眼看排不出 1-2-3),终端窗里的自检长句被右边缘硬切成断句,另外绿色状态字压在灰底上只有 3.4:1 左右。
打开可运行的原件 → -
ux interactive cursor design
留池4.23- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
「你就是那只光标」的浏览器解谜游戏宣传页:最强是把光标轨迹做成一条贯穿全页的荧光点线母题(英雄区→六种手感波形→06 号房间路径→开始按钮),并在页首直接列出 #CBFF3C/#7B5CFF/#FF4A32 三色台账后全页严守,系统一致性几乎无懈可击;最弱是英雄画布里的虚线弹道与散落小方块偏随意,右上「试玩」主按钮做得过小。
打开可运行的原件 → -
ux skeuomorphism
留池4.23- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
「听匣」把中文夜间电台做成一台桌面收音机,木纹机身+刻度盘+VU 表+皮革节目板+金属面板说明书;最强是材质系统的完成度与一致性——光源统一在上、螺丝/倒角/斜面参数零漂移、金色=主行动的角色分工干净,文案也克制到位(「开机需要八秒预热,和真的一样;不想等,可以在设置里关掉」);最弱是骨架其实仍是 hero+列表+功能四栏的常规落地页,拟物只在表皮,且金属面板与 hero 副段的灰字对比偏低。
打开可运行的原件 → -
ux minimal direct
留池4.22- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
独立平面设计师「只做字标/名片/信纸抬头」的一口价服务页:最强是层级与克制——全页只有一个红,且只用在首尾两个同一个 CTA 上,层级全靠字重字号留白不靠边框,文案反向销售(不做网站、不做 VI 手册、通话不收费);最弱是离心力,瑞士极简的词汇太通用,盖住名字只能认出「一张体面的极简自由职业页」,中间三件样品带里那块黑色矩形+名片的叠压关系也是全页最没想清楚的一处。
打开可运行的原件 → -
ux storytelling driven
留池4.22- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
「北归」跟踪白鹤 K13 一整年的迁徙叙事页,四联屏按季节/地点分色、一条橙色航迹连贯穿过四格;最强是叙事与中文质感——宋体标题、汉字纪年、编辑部自陈「我们做的事很笨」毫无自夸废话,认领卡把商业诉求安放得体面;最弱是执行细节:四格作为同级元素的眉标与标题起始高度不齐(第二格明显偏低)、标题字号在四格间忽大忽小,第二格那抹绿色是系统里唯一一次出现的孤儿色。
打开可运行的原件 → -
fs emerald editorial
留池4.20- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
绿道年度体检报告,最强是深蓝底的路网断点地图(图例/比例尺/指北针/D-01 至 D-06 断点齐全)和压缩衬线大数字带来的年鉴气质;最弱是居中 hero+五枚徽章的通用骨架,且胶囊与指标卡的深蓝/米白交替纯属棋盘装饰、颜色没有语义角色,是本组里最像模板的一张。
打开可运行的原件 → -
-
ux pixel art
入选4.20- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
独立像素 RPG《县城夏天》的宣发页(存档条+桃溪镇地图+队伍面板+背包+柜台);最强是 A 离心力 4.7——整页被组织成一套真的游戏 UI 而不是加了像素装饰的落地页,「零花钱 3.50 元/蝉蜕七只/队伍只有三个,其中一只是狗」把玩法讲完了,地图图例三色与地图内色块严格对应、黄=当前绿=可去灰=未开门是真编码;最弱是 C 排印 3.9 与像素中文的先天限制:小字号点阵中文笔画粘连(「含着走完半条街刚好化完」一类),像素体拉不开字重层次只能靠色号补,顶部跑马灯左右被硬裁成半个字是明确瑕疵
打开可运行的原件 → -
ux vintage analog retro film
留池4.19- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
暗房放片活动页:齿孔片带包边、接触印相条(红蜡笔圈第27格)、手写便签与存根票根构成完整道具系统,红色只做批注与日期,语义纹丝不乱;最弱是道具做加法——胶带、拍立得堆叠、录像机插图可删而不损功能,且最小号浅褐说明文字对比不足。
打开可运行的原件 → -
-
-
ux flat design
留池4.17- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
周末市集摆摊排位工具:最强是摊位网格图这个原创母题——色块=品类、虚线=通道并标注宽度与消防车可进、黑块小舞台、选中摊位描黑框联动右侧详情,扫描顺序极干净;最弱是排印只有一个字族靠字重拉层级、缺对比轴,且红色同时当「吃食」品类色和品牌主行动色,语义角色有碰撞。
打开可运行的原件 → -
-
ux social proof focused
留池4.15- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
后厨成本核算 SaaS 的客户实证页(评分分布+连锁品牌墙+落地时间线+毛利表):最强是内容的诚实度与克制——统计口径脚注、样本不足十家不计入、演示数据声明、毛利表里一行超配方成本被标红推送,全页找不到一句自我表扬式废话;最弱是视觉离心力,蓝色主色+白卡+规整栅格是最标准的 B2B 模板脸,盖住品牌名几乎认不出来,中文段落行高也偏紧。
打开可运行的原件 → -
ux 3d hyperrealism
留池4.14- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
天文望远镜整机产品页:最强是光路图解(物镜组/场平校正组/消光刀口环带引线标注)与目镜取景星云这两处原创图示,中文衬线标题「星光走完四百年,最后十厘米归你」气质到位;最弱是执行——望远镜渲染有玩具感、金属参数条的铬色渐变略廉价,三张部件图的形态与文字块对齐方式不统一,规格小字(减速比1:10、透过率99.6%)在深底上偏暗偏小,接近可读性边缘。
打开可运行的原件 → -
ux 3d product preview
留池4.13- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
「见山镜作 川04」板材眼镜的360°环视配置页;最强是执行完成度与系统一致性——十二帧转台缩略图是十二个真实不同角度,滑块停在第2格、标注「正在看第二帧」、左上 YAW 030.0° 三处数字互相咬合不出错,琥珀色只用于选中态、黑色只用于主行动、灰阶只做结构,配件卡是同一个组件的复用,出厂尺寸表虚线引导对齐干净;最弱是离心力——左看图右选配的电商配置器外壳过于标准,盖住品牌名认不出是谁家,渲染的镜片高光偏塑料味,品牌字标那套中文衬线全页再无呼应。
打开可运行的原件 → -
ux conversion optimized
留池4.13- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
柿饼预售的转化落地页(报价卡内嵌表单+对比表+承诺四栏+FAQ);最强是 B 层级 4.6——红色「锁定 1 提 ¥128」是全图唯一最高强调,表单卡自成语义块,扫描顺序毫不含糊,而且难得地把转化套路去了油(「付款后进的是预售名单,不是订单」这种反向克制文案),插画是手绘柿架不是 stock;最弱是 A 离心力 3.5:骨架就是标准高转化模板,盖住品牌名认不出是谁做的,且倒计时/余量信息在顶条、库存条、底部条重复了三遍,承诺四栏的图标风格轴不统一(描边圆/星形/水滴混用)
打开可运行的原件 → -
fs blue professional
留池4.11- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
医药冷链公司的季度股东信:最强是那张 81 分钟断链温度曲线,合规带、车外温度虚线、三处停靠标注、超温区红框一应俱全,加上主动认错的标题与"致/撰写/复核/口径"署名条,把корпоративный报告写成了可追责的文书;最弱是视觉母题最弱——米黄底+蓝强调+四张圆角指标卡几乎等于通用企业报告模板,盖住名字很难认出,开头导语横跨全宽约 55 字一行、行长明显失控,右上角点阵装饰是孤立的多余元素。
打开可运行的原件 → -
ux dimensional layering
留池4.11- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
商场六层调度台:把「抬起一层」做成等距爆炸楼板 + 「抬得越高越先处理」的四级台阶,隐喻与业务逻辑真正咬合而非贴图;最弱是第三段左右两栏语义不对等,左侧台阶组底对齐后上方留出大片空洞,且上行压力条橙/蓝配色的语义规则没交代清楚。
打开可运行的原件 → -
fs 8 bit orbit
留池4.10- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
独立太空打捞游戏的抢先体验页:最强是那张"碎片密度—轨道高度"曲线,把五个关卡直接钉在真实壳层峰值上,配自绘像素飞船,内容与形式咬得很紧;最弱是深蓝网格+四角括号+霓虹青这套科幻 HUD 语汇属于现成套路,四张统计卡的括号装饰是可删元素,底部小号灰色等宽注脚(STEAM · 2026-08-13 一类)对比偏弱,黄色既当装饰边框又当"本次改动"语义标记,角色有漂移。
打开可运行的原件 → -
ux biomimetic organic 2 0
留池4.09- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
3D打印人工珊瑚礁基「生长」页:最强是Voronoi细胞礁体这个真·生成式母题,配G1→G42世代序列与split(θ 38.2°, gap 0.61)参数行,形式确实由规则长出来;最弱是系统一致性——橙色主按钮的渐变与图例里「导流孔」的橙、绿色强调字与「共生藻」的绿撞了角色,语义色被挪去当装饰,正文灰字在深蓝底上也偏小。
打开可运行的原件 → -
ux accessible ethical
留池4.08- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
轨交无障碍设施状态页:形状+文字+颜色三层编码、字号/对比度/动效偏好条前置、换乘路径图与「原路走不通」告警是全库语义色纪律最好的一张;最弱是通篇粗体黑字导致远看灰度不匀、层级只靠字号,且「我们不做这四件事」带自我表扬味。
打开可运行的原件 → -
ux ai native ui
留池4.08- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
厨房语音助手「灶上」对话页:最强是AI原生交互的概念完整度——工具调用回执(读取冰箱清单 0.4s)、流式光标、确认二选一、跟做步骤内嵌计时、右栏「它刚替你做的/等会儿/它记着的一件事」把不可见的agent行为全部显形,文案极克制(「墙上那颗麦克风是物理断电的」);最弱是离心力,浅灰底+白圆角卡+靛紫强调就是AI产品的众数皮肤,盖掉名字认不出来。
打开可运行的原件 → -
ux cyberpunk ui
留池4.08- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
家用网关出站防火墙的控制台(默认 deny all,含出境地图、日志尾随、规则文件与一次事件复盘):最强是没有落进霓虹赛博俗套而是做成真终端——凌晨三点四十七分电视自己醒了的事件叙事配十六进制抓包里高亮的 SNI 明文,绿/品红/青分别绑定 allow/block/unknown,信息密度与叙事一起成立;最弱是中段三栏等宽面板眯眼后是一整片同权重的等宽字墙,层级只靠标题条区分,且多处暗绿小字牺牲了可读性。
打开可运行的原件 → -
ux soft ui evolution
留池4.07- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
护士长排班台:最强是系统一致性——班次柔彩色卡有固定语义,橙色「需要你决定」在图例、疲劳柱、排班格、提示条四处零漂移地复现,像素级对齐与圆角规格也稳;最弱是克制与离心力,「显示与无障碍」面板加绿色「已通过WCAG AAA」自评框有自我表扬嫌疑且可删,整体柔彩SaaS皮肤辨识度低、Soft UI的承诺只在FLAT/SOFT/DEEP分段控件上点了一下。
打开可运行的原件 → -
ux anti polish raw aesthetic
留池4.05- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
「毛边」只收废稿的复印小志征稿页,胶带贴纸墙+征稿红戳+主编手记里带删除线与红字旁批+底部可沿虚线剪下的表格;最强是离心力与概念自洽,全库最不可能认错的一张,文案零自夸(「这本志不评稿,不排名,不挑好看的」),连「说实话我当时想原样退回去」被划掉再补一句旁批都是在演这个概念;最弱是可读性——手写体承担了过多正文级信息,废稿墙注释和三张便条的小字灰度太低,且「一、二、三」三条须知被散落成非线性位置,编号顺序与阅读顺序打架。
打开可运行的原件 → -
ux hero centric design
留池4.05- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
「地听」城市供水管网夜间听漏的 B 端落地页;最强是层级与专业密度——眯眼只有一个主标题一个橙色主按钮,剖面示意图配互相关波形、τ=4.7 ms 与 x=(L−c·τ)/2 的公式让产品可信,三条卖点用细线分隔不加图标很克制;最弱是外壳太模板——居中 hero+胶囊徽章+双 CTA+深色再喊一遍的收尾带是最标准的 SaaS 骨架,遮住那张深色面板就认不出来了,另外「看 90 秒实录」这类按钮把字距加到中文上,字与字之间被撑出假空隙。
打开可运行的原件 → -
fs peoples platform
留池4.04- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
成都社区工具图书馆的开张页;最强是「一把电钻的一生」那组对比——共用钻 1880 分钟/96 次 对 自家钻 13 分钟/1 次,并直接注明「下面那条只有 0.7% 长,不是排版错误」还附入户询问来源,是全批最诚实的数据叙事,文案「居民自办,不是商店」「工具会坏,这是它在用的证明」也没有一句自我表扬;最弱是执行——立体错位投影方向不统一(标题与 1,880 偏左下、01/02/03 与右侧卡片偏右下),双层描边、圆形徽章、手写 just ask. 属可删装饰,减法上还有余地。
打开可运行的原件 → -
fs signal alt
留池4.02- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
末班车延时试点的公众意见期政策简报,米色论述区+藏青证据区两段式;最强是论证结构本身——大标题、一句话摘要、四条要点、分时折线、四个 KPI 层层递进,眯眼后 1-2-3 顺序干净且全页只有一个最强调,图表标注(削峰 41%、原末班虚线、末班前一档 240)真的在解释数据而非装饰;最弱是中西混排的自动间距无差别插入,导致「9 、 12」「01:30 ,为」在全角标点前留出空格,导语段还满宽跑到 44 字左右一行,加上末层小字对比度塌陷。
打开可运行的原件 → -
ux bento grids
留池4.02- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
观鸟出滩记录小结页:潮位×鸟群双线图、鸣声波形、黑脸琵鹭剪影插画与时间记录条把「一次出滩」讲完整,克制干净;最弱是视觉语言就是通用浅色 bento 仪表盘,卡片权重几乎等大缺主次,三种鸟的条形色(青/赭/褐)纯装饰无角色。
打开可运行的原件 → -
ux vibrant block based
留池4.02- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
「夜宵电台」把五家 24 小时便利店改成凌晨舞池的五夜排班页,荧光块面压黑底+施工警示带跑马灯+五张夜场卡;最强是概念与视觉母题的原创度——货架插画、警示带、手环贴纸都不是模板换色,中文超粗黑标题带硬投影的气势很足;最弱是系统一致性:六种荧光色纯粹按卡片轮换、没有固定语义角色,「连开五夜」块与下面五张卡信息重叠可删,卡片宽度在两行间也有随意的漂移。
打开可运行的原件 → -
fs playful
留池4.01- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
北京胡同院子里「一周只烤一次」的面包铺告示页;最强是 22 小时环形工序图,实心弧=有人在动手、空心弧=面团自己在长,环上编号与右侧八行工序表同款圆号一一对应并给出时长,圆体英文 display 只用在 No.58/08/19/1.5h 这类拉丁与数字上、中文回退到黑体,处理干净;最弱是克制——右上波浪线、空心星、同心圆图标、背景大色块四处纯装饰删掉毫无损失,环图下方还有一段无解释的灰弧,5/6/7 三个编号在左下挤成一堆。
打开可运行的原件 → -
ux feature rich showcase
留池4.01- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
仓内拣货路径调度 SaaS:仓平面拣序虚线图、「站长原话 vs 系统做法」左右对照、波次甘特与骑手到店竖线,信息密度高且每块都真的在说事;最弱是底部功能区蓝/紫/绿/白/黑五色卡片把颜色当装饰用,系统一致性明显掉档,章节标题字号全同导致长滚动发平。
打开可运行的原件 → -
ux gradient mesh aurora evolved
留池4.01- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
香水《第七次日落》气味图谱页:最强是把极光网格从装饰改造成信息载体——横轴八小时、纵轴强度、每团光钉在一味料上,七个香调的颜色在光点/色标/占比条三处严格同一,是全批对该风格最有自觉的解法;最弱是层级与自明性,全页找不到购买或预约的主行动、渐变底上的时间轴标签与说明小字对比不足,网格面板左三分之一还有一道可见的矩形接缝。
打开可运行的原件 → -
fs coral
留池4.00- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
手工红油豆瓣的批次溯源页,罐体静置分层剖面图(8/38/29/13 毫米四层带引线标注)和 SHU 辣度刻度对比条都带取样方法与检验编号,严谨度很高;最弱是红底斜纹上压深色小字(取样说明、左栏参数标签)对比与底纹干扰双重折损,且巨大的半透明「07」水印可直接删。
打开可运行的原件 → -
fs sakura chroma
留池4.00- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
磁带社季度目录:昭和印刷味的米底+赭褐重黑+朱红点睛,最强处是中文超大字号标题的气场和那张拆解图(七个编号对应压带辊、防误抹爪等实物细节,还敢写"本季不做杜比降噪"的未勾选项);最弱处是标题把"四种带"拆在两行、换色又换字号,读起来像换行事故而非有意断句,右上彩虹斜带纯属装饰且下方留出一大块死区,构图左重右空。
打开可运行的原件 → -
fs vellum
留池4.00- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
县域图书馆夜间开放的三年观测简报,藏青底+淡金宋体,左栏 §00/§01/§02 边注轨对齐正文段落;最强是中文排印与克制——行高近 2.0、全角标点与「」使用规范、Didone 斜体只承担英文、正文靠加粗数字(30 馆/19 馆)单一信号做强调,折线图每点带值、峰值与末点实心区分、补贴试点期用括弧标出,安静而有密度;最弱是轴线不统一(居中的题图与提要 vs 左对齐的四条发现 vs 最左边注,三套轴并存且左栏大面积空置),英文副标与 Four Findings 属可删的装饰性双语,次级段落 3.9:1、图表轴标 3.3:1 偏灰。
打开可运行的原件 → -
fs neo grid bold
留池3.99- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
中文网页排版大会的两日会议页;最强是没有偷懒照搬幻灯片分页——真做了一张双日三厅带时间轴的日程网格,场次卡含讲者与单位、午休列贯通,黑底 hero 与荧光绿日期块的瑞士/野性网格骨架结实;最弱是排印与克制,hero 段落断成「正文可访问/性。」这种孤字收尾,日程卡全靠 1px 边框划分层级而非灰阶留白,hero 右上两个小方块纯装饰,另外荧光绿黑白格式本身是当下众数配色,遮掉它后辨识度掉得比较明显。
打开可运行的原件 → -
ux tactile digital deformable ui
留池3.97- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
触感音游 App 的落地页(六块果冻鼓垫+一次按压的四十毫秒形变分解);最强是 I 执行完成度 4.5——四帧形变的压缩量与上方小球高度、下方高度曲线的四个节点三者 x 轴精确对位,12ms 最扁球最低、26ms 弹过头球最高,是真正的图表纪律,六种材质色与 hero 手机里 L1/R1/L2/L3/R3 六个 pad 一一对应;最弱是 A 与 H:粉蓝渐变加拟物软胶按钮是近年 soft-UI 众数,盖住名字与同类难区分,且顶部导航金属高光条、漂浮的「震感:短促一记」「+120 刚好」胶囊都可删,一旦去掉全部渐变高光「果冻」这个核心主张会整个塌掉
打开可运行的原件 → -
ux voice first multimodal
留池3.95- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
手上有油时的语音跟做菜谱助手(五分钟对话回放+抬头一瞥屏):最强是真按语音优先思考而非把语音当装饰——聆听/理解/播报/震动四通道配色贯穿时间线,意图切片、被削掉的底噪注释、以及「这一屏永远只有当前一步」的自述都在讲多模态权重;最弱是执行收尾,浅紫灰小字与淡紫药丸控件对比不足、缺主行动、底部直接截断,视觉语言也最靠近通用 AI 助手的柔光白紫默认脸。
打开可运行的原件 → -
fs scatterbrain
留池3.92- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
菜场摊位共创工作坊招募:软木板+便签的形式和"参与式工作坊"内容咬得住,最强处是六张摊位便签的单字圆徽(灯/牌/高/价/水/堆)把问题类型压成一个字,且便签色被二楼平面图原样复用作摊位标识,是真的系统而非配色;最弱处是层级打架——章节标题旁那段灰色粗体导语跟标题同重同号、抢焦点,"老周豆制/品"孤字换行没处理,卡片底边参差、软木纹理是纯皮肤。
打开可运行的原件 → -
ux hud sci fi fui
留池3.89- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
「拾遗轨道」在轨碎片捕获控制台,姿态/推进/链路/交会相机/接近时序/机械臂/目录表/中止判据一应俱全;最强是信息设计与色彩语义——青=正常、橙=注意、红=告警贯穿全表零例外,目录表数值右对齐、中止判据把阈值与当前值并排,是真的能读的仪表盘而不是发光装饰;最弱是视觉语言本身就是 HUD 通货(青光+尖角括框+等宽字),且中文标签被塞进等宽网格里字号约 10–11px、字形发虚,面板之间权重齐平导致标题区之后再排不出 1-2-3。
打开可运行的原件 → -
fs block frame
留池3.88- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
手作市集的摊主招募页:最强是底部 80 格摊位图,粉/青/绿/白/黑五色各自绑定 A/B/C 区已定、可申请、通道,图例与格子严格对应,是真正可用的信息设计;最弱是同一套语义色又被挪去做四角旋转彩块、卡片角点、徽章底色和 CTA,颜色角色明显漂移,斜置的四张数据卡让基线全部错位、点阵底纹与彩色碎片都是删了不损功能的元素,粗黑边+硬阴影这套新粗野语汇本身辨识度有限。
打开可运行的原件 → -
fs studio
留池3.87- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
珠三角丝网印海报展的展讯页,黄/炭黑工业印刷调,核心是一张 1:160 的旧车间平面图,含单向动线、挂点短线、尺寸线与出入口;最强是离心力——「满版 FULL BLEED」中拉丁合体报头+等宽元数据轨+线稿平面图,遮掉名字也能从全库认出来,文案也扎实(四层油墨 62 µm,手摸得出台阶);最弱是执行完成度,动线虚线直接切穿 C/D/E 房间的标注文字、「4 台印台」被平面右边界截断,底下 A–F 六栏卡片又把图内已有的面积/张数重说一遍,六栏使中文只剩十三字行宽,出现「20 / lx。」这样的孤字断行。
打开可运行的原件 → -
ux liquid glass
留池3.85- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
玻璃工坊的委托成形配方页(膜厚/流态/分光三参数+降温曲线);最强是把「液态玻璃」从贴图升级成真实工艺——干涉色来自镀层厚度这个设定让彩虹球有了物理解释,降温曲线四节点与下方四段文案精确对位;最弱是 J 系统一致性 3.3:彩虹被同时用在球体、色球尺、曲线、三卡描边、分光滑杆上,颜色全是装饰没有一个固定角色,三张卡的描边渐变方向各不相同却读不出编码含义,分光卡里那块折射文字已糊到不可读
打开可运行的原件 → -
ux vaporwave
留池3.84- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
已拆除商场负一层的记忆复原站(B1F 平面图+复原度百分比+店内广播曲目+记忆征集表);最强是选题与风格的正面咬合——Vaporwave 的本义就是逝去的商业空间,「复原度 41%,机台外壳复原了屏幕还是黑的」这种诚实的未完成度是真内容,去掉全部光效后平面图/进度/曲目/表单结构仍完整;最弱是 H 克制 3.5 与可读性:三个 Win95 窗口各带一组假窗控按钮、hero 右上「PLAY 0.82×」「SP 20:00:00 REVERB / HALL」、背景网格与扫描线都是纯装饰,正文被背景渐变干扰导致远看灰度不匀
打开可运行的原件 → -
ux interactive product demo
留池3.83- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
「慢镜」数据库慢查询回放工具落地页;最强是把 3.19 秒按真实耗时比例摊成一条全宽色带(等锁1.94s占六成一眼可见),并在深色产品图内复用同一条带,执行完成度高、文案克制可信(「只读 performance_schema,不解析业务字段」);最弱是外壳是最标准的开发者SaaS模板——紫蓝主色+深色截图+三步列表,盖住名字认不出来,且导航右上与Hero各有一个实心紫按钮,最高强调不唯一。
打开可运行的原件 → -
ux motion driven
留池3.83- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
一镜到底动画短片首映页:用四段镜头条宽度=真实时长、车速曲线、以及「本页动效照片子节拍写」的 cubic-bezier 自陈卡,概念是这批里最聪明的;最弱是执行——第四格镜头卡被容器右缘生硬截断、车速曲线的绿黄红紫彩虹色引入 token 外色相、暖渐变主按钮在导航/首屏/卡片/页脚重复四次稀释了唯一最高强调。
打开可运行的原件 → -
ux glassmorphism
留池3.82- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
电致变色幕墙的日落调光控制台(六分格透光率+日照-透光双曲线+分区卡片):最强是给玻璃拟态找到了字面理由——六分格调光矩阵和「室外→外片→电致变色层→内片→工作面」的光路图解是可指认的原创母题,底部日落渐变与城市天际线呼应主题;最弱是渐变全面接管了页面,紫到品红的高饱和背景让轴标和卡片正文对比失守、面板颜色随背景漂移导致颜色没有固定角色,中段图表区亮度反而盖过了主行动。
打开可运行的原件 → -
ux neumorphism
入选3.79- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
助眠声音硬件「眠石」的床头控制台:最强是把风格和内容绑成了一件事——渐弱圆盘+五条物理推子对应硬件手感,文末「按下去会陷,松手会浮」为选型给了理由,蓝=数值、粉=周四异常那天的语义色也守得住;最弱是可读性与层级,推子数值这类必须读的数据只有 2.2:1,主 CTA「开始今晚」3.15:1 且与次级按钮几乎同重,全图灰度被风格压平后只剩字号一种层级信号。
打开可运行的原件 → -
ux aurora ui
留池3.76- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
独立音乐人的专辑封面上色工具(读频段能量生成会呼吸的渐变封面):最强是频段到颜色的映射条——40–160 Hz 深靛、0.6–2 kHz 品红那一排把极光美学变成了产品逻辑,等宽字标注与轻量中文标题的配对也干净;最弱是全页几乎只剩表面,工作台四张卡就是四团模糊色块没有实质信息,删掉渐变后结构近乎清空,且激活态一会儿用青蓝填充一会儿用品红描边,颜色角色不成系统。
打开可运行的原件 → -
fs stencil tablet
留池3.75- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
沉船遗址第三次发掘的现场开放页,压轴是 T01–T06×01–09 的探方平面图(船体轮廓、隔舱板、比例尺、指北针、六类图例);最强就是这张图,是模板给不出的原创信息母题,镂空 Didone 数字只用在拉丁数码、中文一律回退思源宋 Heavy,处理干净;最弱是中段四张等高彩色圆角卡+黄条+黑卡+大卡,全页由容器堆叠而非留白组织,删掉所有色块结构照样成立(H 失分),而且卡片的橙/青/金/棕跟图例里「棕=船体木构件、青=陶瓷器」的语义色是同一批色相却各说各话,语义色被挪作装饰。
打开可运行的原件 → -
ux spatial ui visionos
留池3.72- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
石窟壁画多光谱分层比对的 visionOS 应用页:最强是「深度是这里的排版单位」这个原创论点,把 0/24/56/120pt 连同各自的玻璃度/模糊/投影做成一张可复现的深度字阶表,配自绘的可见光/红外对半分壁画,想法在这批里属上游;最弱是执行完成度,整个左栏零左边距出血——标题「千」被切、主按钮「打开北壁第三铺」左侧胶囊圆角直接被裁掉,且左栏行长只有约 15 字导致六行碎句,「一次注视,三段反应」三态还各自错位下沉。
打开可运行的原件 → -
fs capsule
留池3.70- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
香水小样订阅盒的月度预订页,胶囊母题从标签、按钮一直贯到留香时长条形图,六支香的前中后调分段图是真信息设计;最弱在首屏那六枚随机散落的小胶囊词标签,无标注、无语义、角度随机,纯装饰且把香调语义色挪去做了背景噪点。
打开可运行的原件 → -
ux organic biophilic
留池3.69- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
「檐下」按阳台朝向配苗的季度订阅箱;最强是那张按朝向分东/南/北的日照曲线图和四层土壤剖切图,把「先量光再决定种什么」变成了可读的信息设计而不只是气氛插画,文案也扎实(「苗死了拍张照发来,下一箱补给你」);最弱是有机生物亲和本就是成熟模板(鼠尾草绿+奶油底+圆角+植物插画),插画本身较粗糙(花盆与栏杆透视松),底部三件套之间那条蜿蜒虚线纯装饰且被右侧卡片压穿,中西混排间距不一致(「直径5cm」无间隙而「育苗土 8cm」有)。
打开可运行的原件 → -
fs daisy days
留池3.58- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
社区周六自然手作班的招生页,文案具体到「一片被虫吃过的叶子」「河滩石(老师带)」,右侧课程参数卡和十二次课材料清单信息实用;最弱是笑脸太阳/彩虹/星星/花朵等八处贴纸删掉零损失,十二张课卡的标题条颜色纯轮换不承载分类,珊瑚红同时兼任标题强调色、编号色和末课底色,语义色被摊成装饰。
打开可运行的原件 → -
ux claymorphism
留池3.56- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
6–12 岁孩子零花钱存钱罐 App 的落地页(含孩子端/家长端双视角):最强是把黏土质感和产品动作接上了——「捏一个罐」「捏一下罐子听听还剩多少」,小猪插画也是自绘的;最弱是克制,865/899 的进度在英雄卡和详情卡里重复两次,三条家务任务在「今天可以赚币」列表和手机样机里又重复一次,底部三个彩点纯装饰、把语义色挪去当项目符号,且 3D 拟物图标与扁平勾选圈两套图标风格混用。
打开可运行的原件 → -
ux chromatic aberration rgb split
留池3.51- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
深夜网络电视台的节目单(R/G/B 三路轨道+彩条测试卡+今晚片单+调台指引);最强是立意——把「三路信号各自迟到几帧」写成世界观,让 RGB 分离从视觉缺陷变成节目内容,R=主体 0F/G=环境 2F/B=声音 3F 的语义编码是真的在讲事情,节目单区块本身排印干净(时间等宽红/标题白/描述灰/时长右对齐);最弱是 I 执行 2.6:右侧五处内容被硬切、左侧大标题与两个分区标题贴死 0 边距而下方内容有约 8px 边距、R 卡说明文字溢出卡片黑底之外,这些是真实布局破损不是风格;D 3.2 也差,重影对中文笔画的破坏远大于拉丁字母
打开可运行的原件 → -
ux memphis design
留池3.41- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
「不倒翁家具」十件坐不好的椅子展览页,孟菲斯几何+撞色+黑硬投影+锯齿票根;最强是内容点子和椅子线稿插画(胖墩儿、面条先生、摇不倒的文案很有意思);最弱是克制维全面失守——条纹条、散落圆点、两种密度的碎点底纹、按钮旁的曲线尾巴、页脚波浪和色卡都能删而不损功能,四张卡的形状/圆角/配色/文字基线全在漂移,且做旧描边显示字用在「预约试坐」这种小尺寸中文按钮和跑马条上,笔画糊成一团,主 CTA 反被装饰压过。
打开可运行的原件 → -
ux retro futurism
留池3.37- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
夜路电台第四辑双面卡带预售页;最强是把 SIDE A 青 / SIDE B 品红做成了真语义配色并贯穿曲目表,卡带图形与曲目排版本身干净;最弱是整体就是合成波模板的忠实复刻(霓虹网格+落日+铬字),盖掉网格和渐变后只剩一张普通曲目表,且购买区三个同权重CTA互相稀释、浮动芯片与透视网格打架、页脚有一处未收干净的方块残留。
打开可运行的原件 → -
ux y2k aesthetic
留池3.33- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
独立乐队限量 999 张编号镭射碟的预约开碟页:最强是道具做得足——真镭射渐变碟面、铬面翻页倒计时、Winamp 式播放器、编号卡 #0417,年代语汇齐整且「第 999 张寄出后母版被物理划断」这个产品设定撑住了视觉;最弱是系统一致性与克制,品红同时当主 CTA、导航态、曲目号、标题描边和跑马灯用,页面因此出现三个同权重的品红胶囊、找不到唯一最高强调,碟后的紫蓝光斑和静态均衡器条纯属可删装饰,中文小字反白发虚、标题「爱你到 2099」中文与 Y2K 拉丁数字的重量高度也不匹配。
打开可运行的原件 → -
ux gen z chaos maximalism
留池3.23- 离心
- 层级
- 克制
- 排印
- 工艺
- 一致
- 中文
「烂梗回收站」贴纸盲盒第007批开售页;最强是中文厚体错位标题「已读乱回」做得相当到位(中文极难做的一种字体处理),群聊截图、热敏小票、MOLD DESTROYED印章这些道具级细节真实可信,自嘲文案不油腻;最弱是层级与克制同时塌方——眯眼后没有任何元素胜出,主CTA「抢一袋」被十几个更响的东西盖过,中段贴纸散布区视觉分组与语义分组脱钩,字体家族五六种、颜色纯轮转无固定角色,页脚重复标语胶囊与两条跑马灯说的是同一批话。
打开可运行的原件 →