20 种网页设计风格

每个页面独立自包含，点击卡片在新标签页打开预览

大量留白、超细字重、1px 分割线。个人作品集。

留白单色排版

毛玻璃卡片、多彩渐变背景、半透明层叠。SaaS 落地页。

blur渐变透明

柔和双阴影、凸起/凹陷按钮、单色底。音乐播放器 UI。

Soft UI光影圆角

霓虹发光、glitch 故障动画、扫描线、透视网格。游戏官网。

霓虹暗黑动效

Retro Pixel / 8-bit

NES 调色板、box-shadow 像素画、方块边框。独立游戏宣传。

像素等宽怀旧

孟菲斯设计

高饱和撞色、几何散落、粗黑描边、倾斜。创意工作室。

撞色几何反叛

瑞士国际主义

Swiss / International

严格 12 列网格、Helvetica、红色点缀、理性排版。建筑事务所。

网格理性排版

米色大地色、不对称留白、ensō 圆相、和纸纹理。茶道品牌。

留白自然静谧

粉紫渐变、透视网格地板、落日、日文装饰。音乐专辑页。

复古未来粉紫网格

Brutalism / Anti-design

系统字体、刺眼配色、粗边框、故意"丑"。艺术展览。

反设计原始挑衅

杂志编辑风

Editorial / Magazine

超大衬线标题、首字下沉、分栏排版、图文混排。时尚杂志。

衬线分栏优雅

Gradient / Fluid

流动渐变 blob、深色底、鼠标视差、发光效果。科技大会。

渐变blob深色

CSS 3D 等距方块、立体卡片、蓝紫配色。项目管理工具。

Hand-drawn / Illustration

手写字体、涂鸦边框、蜡笔质感、暖色调。儿童绘本品牌。

手写童趣温暖

蓝白灰、规整栅格、数据图表、专业严肃。金融咨询公司。

专业数据信任

全屏分段、滚动触发动画、大字排版、进度条。环保纪录片。

滚动叙事沉浸

撕裂边缘、混合字体、重叠旋转、胶带装饰。独立音乐厂牌。

拼贴撕裂混搭

密集元素、多色混搭、跑马灯、信息过载感。潮流电商。

密集喧闹过载

终端命令行

黑底绿字、等宽字体、打字机动画、CRT 扫描线。开发者工具。

终端等宽极客

Organic / Nature

绿色系、叶片形状、圆润曲线、自然纹理。有机农场。

自然圆润生机