LESSON 07 · 幕后之旅 / SPEAK OF STYLE
「好看」说不出口，就永远得不到。
情景
你说「想要高级感」，AI 给了你一屏紫渐变。你说「简单点」，它删得只剩白底黑字。你不是没品味，是「好看」这个词太空——AI 只能猜，猜错十次，你就累了。
本课 29 个概念 · 约 7 分钟
风格不是贴上去的皮肤，是字号、对比、层级这些底层秩序。
用字号、字重、行高和间距建立起来的文字层级。
跟 AI 这么说
重建这页的文字排版：定一套字号阶梯（大标题、小标题、正文、辅助说明），统一行高和字重，靠层级分组，别靠滥用加粗。
前景与背景的明暗差异，直接决定文字是否好读。
跟 AI 这么说
检查全站的文字对比度：正文和背景的差异要够大、一眼读清，弱化的信息可以淡一点，但关键操作和说明不能看不清。
用大小、字重和颜色排出主次：主标题最突出，说明次之，按钮最显眼。
跟 AI 这么说
重排这页的视觉层级：最重要的信息最大最显眼，次要信息收敛，用大小、字重和颜色拉开主次，别让所有元素一样抢眼。
把主色、间距、圆角等抽成可复用的变量，避免每个组件重复写数值。
跟 AI 这么说
把全站的主色、辅助色、字号、间距、圆角抽成设计令牌统一管理：改主题色一处生效，别让每个组件各写一组数值。
内容、内边距、边框和外边距共同决定盒子实际占用的尺寸。
跟 AI 这么说
排查这张卡片为什么挤出了容器：从盒模型开始，把内容、内边距、边框、外边距各自列出来，看看加起来到底是多少。
少说，留白替你说。适合内容当主角的场景。
干干净净、不花里胡哨，重点突出内容和按钮。用留白、清楚的字号层级、少量颜色和一致的组件来组织页面。
跟 AI 这么说
整体走现代简约：大量留白、清晰的字号层级、不超过两种强调色，内容和主按钮做视觉主角，装饰能省则省。
强调「少即是多」，大量留白、精简元素。
跟 AI 这么说
按极简主义重做这一页：只保留核心内容和一条主行动，能删的元素全删掉，用呼吸感代替堆料。
苹果官网的极简设计风格：大留白、高质量配图、流畅动画。
跟 AI 这么说
参考苹果官网的风格：超大标题配一句话文案、大留白、高质量产品图、轻量顺滑的滚动动画，配色极度克制。
Notion 笔记应用的简洁排版风格，干净、易读。
跟 AI 这么说
做成 Notion 那种干净的书卷气：灰调分层、轻量边框、适中的行距，内容再密也能保持清爽易读。
面向企业客户的官方网站风格，专业、稳重、可信。
跟 AI 这么说
改成 B2B 企业官网风格：稳重的深蓝灰配色、客户 logo 墙、功能分区一目了然，整体传达专业和可信赖。
让界面摸得着的质感：玻璃、软泥、噪点、渐变。
半透明毛玻璃效果，背景模糊，层次分明。
跟 AI 这么说
卡片用玻璃拟态：半透明背景加背景模糊、1px 细边框、轻投影，配深色或渐变背景突出通透的层次。
半透明模糊背景加白色边框的卡片效果。
跟 AI 这么说
导航栏做成毛玻璃效果：半透明底色加背景模糊，页面内容滚过时隐约透出，固定在顶部但别抢戏。
用软阴影模拟凸起或凹陷的质感效果。
跟 AI 这么说
这组控件用新拟态质感：与背景同色系的双层软阴影，做出微微凸起和凹陷的感觉，整体像一块软质面板。
在纯色背景上叠加细微噪点以增加质感。
跟 AI 这么说
在大面积纯色背景上叠一层极细的噪点质感，透明度控制在百分之几，让画面摆脱生硬的数码感。
大量使用渐变色作为背景和装饰元素。
跟 AI 这么说
背景用渐变色：从品牌主色平滑过渡到邻近色，当氛围背景用，上面压白色文字保证可读性。
风格即立场：要么反叛，要么怀旧，要么亲切。
原始、粗犷、反传统的视觉风格，大胆用色和排版。
跟 AI 这么说
用粗野主义重做首页：默认系统字体、粗黑边框、故意错位的排版、高饱和撞色，像一张不守规矩的海报。
霓虹色、暗色背景、科技感强烈的视觉风格。
跟 AI 这么说
首页走赛博朋克风：深色底配霓虹青和品红的高光、发光描边、网格纹理加一点故障感装饰，像未来都市的夜景。
深色背景搭配霓虹光效的科技感风格。
跟 AI 这么说
做一套暗黑科技风界面：深灰近黑的底色、荧光强调色、细线条和微光效，做出开发者工具般的精密感。
模仿 80/90 年代视觉风格的复古设计。
跟 AI 这么说
页面改成 80、90 年代的复古风：像素字体、老屏幕那种暖黄绿色调、老式界面元素，带一点怀旧的幽默。
模仿手绘线条和涂鸦的亲切风格。
跟 AI 这么说
把这套界面画成手绘风：手写体标题、涂鸦线条、便签纸和胶带元素，让人觉得亲切、没有距离感。
内容怎么摆，本身也是一种风格。
类似苹果宣传页的卡片网格布局风格。
跟 AI 这么说
首页内容用 Bento Grid 排布：大小不一的圆角卡片拼成网格，重要卡片占两格，每张卡片只讲一个卖点。
类似杂志排版的布局：大图、大标题、多列排版。
跟 AI 这么说
这页改成杂志排版：超大标题、通栏大图、双栏正文、图片穿插在文字之间，做出翻阅纸刊的节奏感。
大量使用自定义插画作为视觉主体。
跟 AI 这么说
这套页面以自定义插画为主视觉：每个功能区配一幅同风格的插画，人物场景保持统一，弱化真实照片。
动起来才有记忆点，但动效多一分就腻，得点名「动哪种」。
通过滚动驱动内容逐步呈现的叙事方式。
跟 AI 这么说
把首页改成滚动叙事：内容随滚动逐段显现，每一屏只讲一件事，配一个进度提示，让用户滚到底就听完整个故事。
背景与前景以不同速度滚动，产生纵深感。
跟 AI 这么说
首屏加视差效果：背景和前景以不同速度滚动，产生纵深感，幅度要轻，滚动必须保持顺滑，别让人晕。
用粒子动画营造科技感和动态背景。
跟 AI 这么说
登录页背景加一层低密度的粒子动效：粒子缓慢漂移、靠近鼠标时轻微散开，数量克制，别拖慢页面。
按钮或卡片跟随鼠标轻微移动的交互效果。
跟 AI 这么说
主按钮做磁贴效果：鼠标靠近时按钮被轻轻吸过去几像素，带一点弹性回位，只用在最重要的行动上。
文字本身的入场、变形、逐字显现等动画效果。
跟 AI 这么说
大标题做文字动画：首屏标题逐字显现，滚动到对应区块时标题轻量变个形，动画只演一次，不循环打扰。
使用 Three.js 等库实现 3D 元素和交互。
跟 AI 这么说
首屏中央放一个能 360 度拖拽旋转的 3D 产品模型，底部加柔光和接触阴影，模型加载完成前给一个占位图。
试一试
选择题 · 选一个你认为最合适的答案