所有内容沿垂直中轴对齐居中排列：标签、主标题、副文案、按钮。最经典也最不容易出错的首屏形式。
首屏 Hero
Hero Section
画面左右两栏切分，左侧文案右侧视觉稿。视觉平衡感强，是 SaaS 产品首屏的主流形态。
背景铺满整个视口宽度、不留边距，内容叠在深色图上。视觉冲击力最强的一类首屏。
深色底上铺多层高斯模糊的彩色光斑，缓慢漂移，营造出极光般流动的质感。近年 AI 产品最爱的首屏。
把首屏拆成大小不等的圆角方格，像日式便当盒一样拼在一起，每格放一个卖点或数据。
把产品截图套进一个带红黄绿圆点和地址栏的浏览器窗口框里，让画面立刻"像个真产品"。
不靠图片、只靠排版层级撑起首屏：一枚小小的眉题 + 一行巨大的标题，其中一个词做渐变强调。
一个实心主按钮 + 一个描边次按钮并排出现，下面跟一行极小的"降低门槛"微文案。
首屏只做一件事——收邮箱。输入框和按钮被包进同一个圆角容器里，像一颗胶囊。
背景播放一段渐隐循环的短视频，正中放一枚带脉冲光环的圆形播放按钮。
布局
Layout
大小不一的圆角方格严丝合缝拼成一块，重要内容占大格，次要指标占小格。
列宽固定、高度随内容自然错落，像 Pinterest 一样从上往下填补空隙。
按"左上→右上→左下→右下"的 Z 字路径排布图文块，模拟人眼扫视的天然路线。
屏幕被垂直切成两半，一边深色一边浅色，各自承载完全对等的内容。
左栏固定在视口上不动，右栏内容继续滚动——浏览长文时关键信息始终可见。
粗黑短横线 + 超大标题 + 双栏正文 + 斜体引文，像一本印刷杂志的内页。
把页面宽度切成 12 等份，任何元素都跨整数份排列。所有精致布局背后的隐形骨架。
多组"图 + 文"行依次交替方向，形成锯齿般的阅读节奏，是最耐看的特性展示结构。
一行三张等宽小卡：图标、标题、两行说明。独立站特性区最经典的组合。
一块横贯整个视口宽度的色带区，内部的窄容器居中——用颜色宽度制造呼吸与节奏。
卡片
Card
半透明白底 + 背景模糊 + 1px 白描边，卡片像一块真正的磨砂玻璃浮在彩色背景上。
浅灰底上用"一明一暗"两道阴影把元素雕出来，像从同一块材料上压制而成的浮雕。
卡片外圈是一道 1.5-2px 的渐变细线，内部纯白——只描一圈边就足够特别。
鼠标在哪，一圈柔光就跟到哪，边框在光斑附近微微亮起。Linear 风格的招牌交互。
卡片默认带一点透视倾斜，悬停时回正；内部元素用 translateZ 分层，立体感立刻出来。
默认只露一张图和标题，悬停时整卡上滑、描述文字从底部浮现。
一个大号数字是绝对主角，配标签、涨跌徽章和一条迷你趋势线。
三档定价里中间那档用深色底 + 渐变描边 + "最受欢迎"徽章，视觉重量碾压另外两档。
五星 + 一句原话 + 头像签名。评价内容要具体到场景，不要笼统的"很好用"。
封面图 + 分类日期 + 标题 + 摘要。信息层级清晰，是内容站列表页的基本单元。
居中圆形头像 + 姓名 + 职位 + 一排社交小图标。关于我们页的标准件。
图 + 角标 + 标题 + 价格 + 加购按钮，电商列表页的心脏，转化全靠它。
一道 conic-gradient 光带沿着卡片边框匀速旋转，像有一圈光在流动。
卡片顶部骑缝贴一枚旋转了几度的彩色胶囊徽章，像手账里贴的贴纸，瞬间有了亲和力。
按钮
Button
一屏之内按钮的视觉权重必须分层：实心主按钮每屏只出现一次，其余一律降级。
圆角拉满到 999px 的按钮，圆润友好，是消费级产品的默认选择。
渐变实心按钮外再包一圈同色系的模糊光晕，像按钮在微微发光。
一道斜向的白色光带从按钮左端扫到右端，像抛光金属表面的反光划过。
鼠标靠近时按钮像被磁铁吸住一样朝光标偏移，离开后弹性回位。
点击后按钮原地切换为转圈加载，完成后变绿色对勾——三态闭环的提交反馈。
只有图标没有文字的方形按钮，省空间但必须配 tooltip 说明含义。
多个按钮连成一条、共享外框，用内部 1px 分隔线代替各自描边。
点击后按钮原地变绿、图标换成对勾，1.5 秒后还原——复制成功不言自明。
手指点在哪，一圈水波就从哪扩散开——Material Design 的标志性触觉反馈。
悬停时颜色从左到右把按钮"灌满"，描边按钮一秒变实心。
左边是默认主操作、右边一枚下拉箭头展开更多同类选项，二合一省一次点击。
表单与输入
Form & Input
标签一开始待在占位符的位置，聚焦或输入后缩着升到边框上，一个元素干两个活。
输入框内嵌前置图标和后缀提示（如域名、单位、显隐密码的眼睛）。
输入框自己在边框上报告状态：绿框对勾是合法，红框加一行小字说明错在哪。
几位数字各占一格，输入完自动跳下一格，粘贴时自动分拆——安全感的具象化。
长表单拆成几步，顶部步骤条显示进度，每步只问 3-5 个问题。
一颗滑块在轨道里左右滑动，开是绿色关是灰色——比复选框更"物理"的布尔选择。
重绘的勾选框：选中时品牌色填充 + 白色对勾弹出，单选用内圆表示。
拖动滑块选一个数值，上方浮着当前值气泡，已滑过部分填充品牌色。
一圈虚线框住的上传区，拖文件悬停时整块变色——"放这儿就行"的直觉设计。
输入时下方浮出匹配项列表，选中项回填输入框——输入和选择二合一。
搜索框下方实时给出结果，命中的关键词在结果里高亮加粗。
五颗星从灰变琥珀，悬停时预览、点击后定格，星星还会微微弹一下。
滚动动效
Scroll Effect
元素滚动进入视口时才淡入上浮，多个元素之间错开 80-150ms 形成接力感。
背景、中景、前景以不同速度滚动，制造肉眼可感的纵深。
动画进度直接绑定滚动位置：滚动条就是时间轴，倒着滚动画也倒着放。
在竖直的页面里嵌一段左右滑动的卡片列，打破滚动方向的单调。
一侧画面钉在屏幕上不动，另一侧文字随滚动逐段推进，讲一个三幕式的故事。
一排内容匀速循环滚动，接缝完全看不出来。两端渐隐是点睛之笔。
滑动松手后自动吸附到最近一页，像原生 App 的翻页，纯 CSS 零 JS。
进入视口时数字从 0 翻滚到目标值，像老式里程表一样逐位转动。
一串随机字符飞速跳动，逐位"解密"成真实文字，赛博感十足。
图片以 1.1-1.2 倍缓慢放大或从放大回缩，让静图有纪录片般的呼吸感。
每张卡滚动到位后钉住，下一张盖上来，像一叠纸被逐张码齐。
滚动时整个画面或关键词向观者放大推近，制造"冲进屏幕里"的过场。
反馈与浮层
Feedback & Overlay
角落里冒出来、几秒后自己消失的小通知条。不打断、不阻塞、看完即走。
遮罩压暗全页、对话框居中弹出的重型交互。出现即垄断注意力，慎用。
从屏幕边缘滑出的面板，右边进左边留——比弹窗温和，比新页面轻。
带小三角指向触发源的富内容浮层，可以装标题、正文甚至按钮。
悬停 500ms 后出现的一行小黑条，解释"这个图标/词是什么"。
内容加载前先用灰色几何块占好版面，一道高光来回扫——比转圈高级得多。
一条圆角细条从左往右填色，不确定时长时用斑马纹循环动画代替。
圆点 + 连接线的流程指示：完成的实心、当前的带光圈、未来的灰色。
没有数据时的页面不能真的空白——插画 + 一句话 + 一个行动按钮把用户带回来。
完成的瞬间彩纸从上落下或从中心炸开——给用户一个值得截图的仪式感。
深色提示条自带一个"撤销"按钮，删除类操作给用户留 5 秒后悔药。
转圈、跳点、翻方块——等待超过 300ms 就该给用户一个"正在干活"的信号。
社会证明
Social Proof
一排灰度的客户 Logo，"这些公司都在用"是最省字的证明。
Logo 云的动态版——一排 Logo 匀速循环滚过，两端渐隐。
评价卡 + 左右箭头 + 圆点指示器，一次只看一条，信息够大才读得进去。
大号综合分 + 五星 + 评价数，应用商店同款的信任三件套。
一行小徽章：SSL 加密、支付认证、合规标志——在掏钱的地方消除安全疑虑。
"被这些媒体报道过"——一排斜体媒体名 + 一句引言，借媒体的势。
一个客户 + 一个可量化的结果数字 + 一句话方法论，B2B 转化利器。
一个微微跳动的实时数字，"此刻有 342 人在浏览"——从众心理的实时化。
三五个头像叠在一起 + "等 12,000 人"——比任何 Logo 都有人味。
一行三四个超大数字：用户数、处理量、满意度——数字自己会说话。
转化 CTA
Conversion CTA
商品信息 + 价格 + 购买按钮悬浮在底部，滚多远都能一键购买。
检测到鼠标移向关闭按钮/地址栏时弹出最后一搏——折扣码或免费资料。
标题 + 一行承诺 + 输入框 + 按钮，嵌在页尾或文章中段的常驻转化位。
"14 天免费、无需信用卡、随时取消"——把试用门槛的三个顾虑一次说清。
"仅剩 12 席"的呼吸徽章 + 快满的进度条——限时限量带来的行动力。
"我们 / 传统方案"两列勾叉对比，你的优势行全部高亮。
一列可展开的问答，默认展开第一条——消化购买前的最后疑虑。
右下角圆形气泡 + 主动弹出的问候卡片，比表单快 10 倍的问题出口。
底部深色横条：说明用途 + 拒绝/接受两个按钮。合规必备，也别做得太丑。
一列绿色对勾 + 短句，把"你会得到什么"逐条钉死在按钮旁边。
盾牌徽章 + "30 天无理由退款"——把用户的风险转嫁到自己身上。
一条快满的进度条 + "已报 87%"——比纯文字的"仅剩 X 席"更有说服力。
定价
Pricing
左中右三张价卡：入门 / 推荐（深色凸起）/ 旗舰。中间那张永远卖得最好。
一颗开关切月付/年付，价格数字带过渡动画地变便宜——年付转化神器。
行是功能、列是套餐的完整矩阵，绿色的勾和灰色的杠一眼分出高下。
拖滑块选用量，价格实时联动——把"算钱"变成一个好玩的小游戏。
只有一个价格、一张卡——当你的产品简单到不需要选择时，别制造选择。
深色卡片写"价格面议"，靠合规、安全、SLA 关键词吸引大客户来询。
划掉的原价 + 红色折扣角标 + 现价大字——原价越显眼，现价越香。
免费档也要认真做一张卡——它是付费版的"广告位"和信任起点。
数据可视化
Data Visualization
一排从底部长起来的柱子，最高那根用对比色强调——最直白的"谁多谁少"。
一条平滑曲线画趋势，线下方铺一层渐变面积——增长故事的最佳讲法。
一圈分色的圆环中心放总数，占比关系 + 汇总数字一图两得。
一条 60-100px 的小曲线塞在数字旁边，趋势一眼扫到不打断阅读。
一行行小色块，颜色深浅编码数值密度——GitHub 贡献图同款。
半圆刻度盘 + 一根指向当前值的弧线，像汽车仪表一样报告"状态好不好"。
一圈从 0° 画到当前百分比的圆环，中心数字同步——比横条进度更紧凑。
一根条里分几段颜色，各段代表组成部分——"钱都花哪儿了"的最佳表达。
按数值从高到低排的横向条形，第一名用强调色——排行榜的极简形态。
从宽到窄一层层收窄，每层之间的跌幅就是每一步的流失率。
多边形能力网：五个轴五条边，形状越饱满越全面。适合"多维对比一个主体"。
图表不裸奔——套一层带标题、大数字和时间筛选的"壳"，才是仪表盘的单元。
排版与文字
Typography
80-160px 的超大字重标题，tight 字距 + tight 行高——纯排版立起来的画面。
background-clip:text 让文字内部流淌渐变色，一个属性拯救一整句标题。
把一张照片/渐变图填进文字轮廓里，字即画、画即字。
文字下半截垫一条荧光色，像用记号笔划过的重点。
标题拆成单字，每个字错开 40-70ms 依次上浮入场——高级感的入场标配。
标题上方的那行小字：大写、宽字距、品牌色，为下方大标题做预告。
段落第一个字放大下沉占两三行，杂志排版的经典开场仪式感。
左侧一道竖线 + 斜体金句 + 署名——把一句话从正文中"拎"出来。
text-wrap:balance 让标题两行一样长；pretty 消灭正文最后一行孤字。
浅粉底色的行内代码 + 深色圆角代码块 + 右上角复制按钮。
超大数字用 tabular-nums 等宽 + 紧字距，跳动时不抖、排版不散。
无衬线正文里，让关键词跳成衬线斜体—— editorial 味道立刻出来。
背景与装饰
Background & Decor
一层细密的半透明噪点盖在渐变上，消除色带、增加"胶片感"。
1px 浅线画出的方格网，配中心径向淡出——设计工具感的背景。
比网格线更柔和的点阵，radius 1-2px 的圆点按 16-24px 间距铺开。
两三颗大号高斯模糊彩色圆球在角落缓慢漂移，深色页面的氛围担当。
一束从顶部打下来的椭圆光，中心亮四周暗——产品发布页的舞台感。
不规则圆角（border-radius 八值语法）的色块，像液体一样缓慢变形。
绕中心旋转的色轮，配深色径向蒙版——中心内容、边缘流光。
网格从顶部渐隐消失，顶部再压一团品牌色光晕——SaaS Hero 的标配背景。
从顶部一点放射出明暗相间的光束，复古而隆重的仪式感。
两个色块之间用一道 SVG 波浪衔接，比直线分隔柔美得多。
区块之间用一条斜线切割，比波浪硬朗、比直线有动感。
圆形蒙版控制网点密度，角落的网点由密到疏渐隐——复古印刷味。
图片与媒体
Image & Media
图片被一层"幕布"盖住，进场时从一侧擦开——比淡入有力得多。
拖动中线左右滑，两张图实时分割对比——修图、装修、改造类内容的王牌。
悬停时图片缓缓放大 5-12%，配文字浮现——列表卡片的标准交互。
图片底部压一层透明→深的渐变，白字放上面永远清晰可读。
App 截图套进带刘海/灵动岛的手机壳里，产品瞬间可感。
大小格子混拼的图片墙：一张 2×2 主图压阵，小图错落围绕。
点击缩略图后深色幕布升起，大图居中 + 左右切换 + 底部说明。
先显示一张 20px 的模糊缩略图，真图加载完淡入接替——Medium 的经典手法。
几张照片像桌面上的实体照片一样错位叠放，悬停时散开。
一张大图 + 错落小图 + 文字块的自由拼贴，像杂志版面一样有呼吸。
交互进阶
Interaction
小圆点 + 缓迟圆环的双层光标，悬停可点元素时圆环放大——仪式感拉满。
用户划选文字时的高亮颜色——一行 CSS 的小细节，藏着品牌感。
一条竖线串起一列节点：圆点 + 日期 + 事件，品牌故事的标准讲法。
桌面端也能像手机一样按住拖动横向列表，光标变成"抓手"。
一条 2.5px 的品牌色下划线在标签间平滑滑动，比"跳变"高级一个档次。
卡片在列间拖来拖去，被拖的卡微微倾斜浮起，目标列出现落点指示。
页码 + 省略号 + 前后箭头：当前页品牌实心，其余可点。
一排可多选的胶囊标签，选中的变深色并长出小叉——可随时移除。
多条通知像扑克牌一样层层叠起，越往后越小越淡——空间减半信息不减。
列表项左滑露出红色删除层，iOS 邮件同款手势。
滚到底部自动加载下一页，底部一枚小 spinner 代替"下一页"按钮。
<kbd> 键帽样式的快捷键提示：描边 + 底部厚边，一眼"可按"。
移动端
Mobile UI
App 式底部导航：3-5 个图标 + 文字，当前项品牌色 + 微动画。
右下角一枚渐变圆角方块按钮，滚过首屏后出现，承载页面最重要的动作。
当前卡片占屏 80%，左右各露出下一张卡的边缘——暗示"还能滑"。
列表顶部下拉时 spinner 被拉出来，松手转两圈后新内容落下。
用 env(safe-area-inset-*) 让内容避开刘海、圆角和 home indicator。
一排分类标签横向滑动，选中的深色实底——移动端分类导航的标配。
手指按下瞬间元素缩小变灰——没有 hover 的移动端，:active 就是全部反馈。
inputmode 属性让手机弹出对的键盘：电话号出数字盘、邮箱出 @ 键。
设计系统
Design System
太阳/月亮滑块开关 + data-theme 属性切换整套 CSS 变量。
不叫"蓝色"叫"primary"——语义化色板让换肤、暗色模式成为可能。
font-size: clamp(32px, 5vw + 16px, 72px)——字号随视口丝滑缩放，零断点。
间距只允许 4 的倍数（4/8/12/16/24/32/48/64/96）——杂乱间距的解药。
4/8/12/16/24/全圆的圆角刻度：小元素小圆角、大容器大圆角，全站统一。
0-4 级阴影对应元素的"海拔"：越浮起投影越大越散、越贴近投影越小越锐。
全站动画只用 3 条曲线：入场 ease-out、出场 ease-in、位移 ease-in-out。
组件按"自己容器"的宽度自适应，而不是按视口——放进哪都能用。
键盘导航时的品牌色焦点圈：鼠标点击不出现，Tab 键导航才出现。
尊重系统"减弱动态效果"设置：视差、视差滚动、大面积动画全部退场。
动效特效
Motion Effect
一道光沿着容器描边循环跑动的边框特效。Aceternity UI / Magic UI 的招牌组件，比静态渐变边框更有「正在运行」的暗示。
一个亮点沿按钮轮廓跑圈的按钮。Aceternity UI 的代表组件，比渐变按钮更有科技感，常用于首屏主 CTA。
整圈彩虹渐变缓慢自转的描边，比 Border Beam 更「厚」更饱满，是 Magic UI 的 shimmer 系命名之一。
多条沿贝塞尔曲线流动的光束，铺在深色底上做首屏/区块背景。Aceternity UI 命名，是深色官网最常见的「科技底纹」。
一个发光圆点沿垂直时间轴自上而下跑动，拖出光束。Aceternity UI 用它做滚动进度叙事，本质是时间轴的动态版本。
多条斜向划过的流星，带 56px 左右的拖尾。Magic UI / Aceternity UI 均有同名组件，是深色首屏的常客。
底色星空 + 几颗带短线拖尾缓慢划过的星星的组合，比 Meteors 更克制，像真实夜空。Aceternity UI 的 Stars Background 变体。
顶部一根发光的横条，向下打出锥形光晕，像天花板射灯打亮下方的标题。Aceternity UI 的 Lamp 组件，常用作区块分隔头。
从画面顶部中央向下打来的柔光，把标题像舞台主角一样照亮。Aceternity UI 的 Spotlight 与 Magic UI 的 Backlight 属于同一族。
零散分布的星形符号依次放大缩小 + 明暗变化，给深色底加「灵气」。用于点缀标题或卡片角落。
同心圆环一边旋转一边向中心收缩消失，形成「被吸进去」的隧道错觉。加载页与上线页的常见主角。
向地平线汇聚并持续向前滚动的网格，80 年代合成器浪潮风格。Magic UI 有同名组件，配合霓虹色最出效果。
由小方格组成的网格，格子依次点亮形成对角波浪。Magic UI / Uiverse 均有同族组件，鼠标跟随版也常见。
一道斜向的白色高光带周期性扫过深色表面，像金属反光。Magic UI 的 glare-hover、Aceternity 的 Glare Card 都是这一族。
点击位置向外迸发一圈小粒子。ReactBits 的 ClickSpark 把「点击被收到」这件事从颜色变化升级成了事件感。
卡片右下角翘起并露出背面阴影，像一张贴纸被掀起一角。ReactBits 的 Sticker Peel 用 3D transform 与阴影深度实现。
用一片小方格按顺序渐次显隐，完成两个画面之间的像素化切换。ReactBits / Aceternity 都有同族组件。
从中心一圈圈向外扩散的同心圆环。Magic UI 的 Ripple 组件常放在标题背后做「信号发出」的隐喻。
两排卡片在透视倾斜的平面上反向滚动，做出立体纵深。Aceternity UI 用它展示客户评价或合作方。
技术栈图标分布在一个虚拟球面上缓慢自转，Magic UI 的 Icon Cloud 是这一族最出名的实现（多为 Canvas）。
跟随指针移动的圆形放大镜，圆内显示同一图像被放大的局部。Magic UI 有 Lens 组件，常用于产品截图细节展示。
指针悬停在链接上时，浮出一张带缩略图与摘要的预览卡。Aceternity UI 的 Link Preview，本质是 hover card 的一种。
在同一图层上从清晰过渡到模糊，像镜头景深。Magic UI 的 Progressive Blur，比纯色渐变遮罩更自然、更有层次。
新条目从上方滑入、旧条目向下淡出，循环往复。Magic UI 的 Animated List，首屏「实时动态」区块的标准做法。
文字动效
Text Effect
标题里的每个字符依次（可带旋转）入场，节奏感极强。ReactBits 的 SplitText 与 Magic UI 的 text-animate 都属这一族。
文字从大模糊渐渐对焦变清晰，像镜头调焦。ReactBits 的 BlurText 是这类效果的标准命名。
文字逐字敲出，末尾带闪烁光标。Magic UI 的 Typing Animation、Aceternity 的 Typewriter Effect 都是同族。
文字带红青双色错位的抖动，像信号故障。ReactBits 的 GlitchText、Magic UI 的 Hyper Text 都在这个家族。
同一位置的多组词交替：旧的放大模糊消失，新的从缩小清晰浮现。Magic UI 的 Morphing Text 与 ReactBits 的 Word Rotate 同类。
字符在细体与粗体之间波浪式变化，用可变字体的字重轴（wght）做动画。Magic UI 的 Kinetic Text 就是这个名字。
渐变色带在文字内部横向流动。Magic UI 的 animated-gradient-text / aurora-text 都是它的变体。
文字外裹多层发光，像霓虹灯管，并做明暗闪烁模拟灯管不稳定。
只有轮廓、内部镂空的大字，常与实心版本叠用做层次或做背景水印。
一个固定宽度的词位里，候选词像翻牌一样绕 X 轴翻进翻出。Aceternity UI 的 Flip Words 是标准命名。
文字沿贝塞尔曲线排布，自带弧形节奏，是 SVG textPath 的典型用法。ReactBits 的 Text Path 组件即此。
文字沿圆周排列并整体缓慢旋转，中间留空放图标或简短标签。Magic UI 的 spinning-text 就是它。
一条带斜切边缘的彩色高亮从左往右刷过关键词，模拟荧光笔手写。Magic UI 的 Highlighter 即此。
文字背后有两层描边副本来回错动，制造「残影/回声」的动感。Magic UI 的 line-shadow-text。
微交互
Micro-interaction
输入有误时，表单字段左右快速抖动并转为错误色，比只变红文字更不容易被忽略。属于最经典的反馈型微交互。
圆形底放大出现，勾线随后像被手写一样描出来。把「操作成功」变成一个有仪式感的瞬间。
点击「加入购物车」后，商品缩略图沿弧线飞向购物车图标，图标同步弹跳 +1。电商最经典的微交互。
点赞瞬间心形填充并做心跳式缩放，同时外圈扩散一道光环。让「喜欢」这个动作有情绪重量。
移动端操作时设备给出一次短促震动，同时界面做微小的位移抖动。Web 端用 navigator.vibrate 实现。
三条横线在打开菜单时形变为叉号：上下两条旋转 45 度并移动到中线，中间那条淡出。移动端菜单的标准解法。
新旧页面沿水平方向一推一让，右侧新页从右滑入、旧页向左退场。移动端 App 的默认空间语言（前进 = 推入，后退 = 拉出）。
三个小圆点依次弹跳的气泡，表示对方正在输入。即时通讯里最有效的「时间填充」，比转圈更有人味。
用户一操作界面就立刻变更（不等服务端），同时在角落转一个小进度环；失败再回滚并提示。感知速度的决定性细节。
按住不放时按钮外圈画出一圈进度，走满才触发动作。用「需要一点耐心」的形式给不可逆操作加一道心理闸门。
在内容上双击，一颗心从点击处放大弹出再飘走。把点赞从「找一个按钮」降级成「想点哪就点哪」。
按钮外围持续扩散淡淡的同色光环，像心跳一样把视线吸过来。最轻量的「引导点击」手段。
产品流程
Product Lifecycle
把「如何用起来」拆成 3-5 个可勾选步骤，顶部有完成度进度条。把新用户推向「第一次获得价值」的最有效工具之一。
用半透明遮罩压暗整个界面，只把要讲的那个控件挖亮，旁边弹出说明气泡并标出第几步。
空状态的一种进阶形态：不只说「暂无数据」，而是明确告诉用户第一步做什么，并直接给一个可点的入口。
被锁的内容虚化显示，上方浮出锁标记 + 升级说明 + 按钮。让用户先看到「我错过了什么」，再谈付费。
用户正要使用超出当前套餐的能力时才弹出升级提示。此刻他已经有明确意图，转化率远高于常驻的倒计时横幅。
在用户已完成某个动作后（结算、订阅、保存），顺势推荐互补的附加项。是提高客单价最自然的位置。
一张渐变卡片，给出专属邀请码与一键复制，说明双方各得什么。把老用户变成拉新渠道。
产品未上线时收集邮箱的落地页模块：一个大数字展示已有多少人在等，加一个极简邮箱输入 + 排队进度条。
用一个大数字 + 一周七天的小格子展示连续使用天数，已打卡的格子填色。用「不想断掉」的心理维持留存。
金色圆环徽章，带持续扫过的高光和名称说明。用于奖励里程碑，是游戏化体系里最直观的正反馈。
按分数排序的名单，前三名有特殊标记，自己那一行高亮。用社会比较驱动参与度。
集中展示未读提醒的面板：顶部标题 + 未读数量徽章，下面按时间倒序列出条目，未读项带浅色底。
一条竖线串起时间倒序的事件列表，最新一条带脉冲点。用在仪表盘或团队页，证明「这里一直有人在用」。
左侧品牌区 + 右侧表单区的分栏登录页。左侧承载信任（产品截图或价值主张），右侧只留最少字段。
把死路变成一次有礼貌的引导：超大错误码 + 一句人话 + 回首页/搜索的出口。
页脚与骨架
Footer & Shell
深色大页脚，左侧品牌区（logo + 一句话介绍），右侧 3-4 组链接列，底部一条版权与社交。承载 SEO 长尾与「这家公司很完整」的观感。
一行搞定：左边 logo + 版权，右边几个关键链接。适合作品集、工具站、单页落地页。
页脚上方再嵌一块浅色 CTA 区块，用最后的转化机会收尾。滚动到底部的用户往往已经认真看完了整页。
深色底、大标题、单行邮箱订阅。适合内容型产品把访客沉淀成可反复触达的名单。
最经典的白底四列页脚：四组链接并列，底部一条版权 + 语言切换。信息密度高但不压迫。
左侧窄图标导轨 + 顶部条 + 内容区的经典后台骨架。图标导航比文字导航省空间，适合功能多的产品。
顶栏 + 一行 KPI 卡 + 大图表 + 侧栏区块的经典信息密度布局。让用户在 3 秒内看到「现在怎么样」。
左导航 + 中正文 + 右页内目录（TOC）的三栏文档骨架。右侧目录随滚动高亮当前小节，是长文档的必备件。
顶栏 + 左导航 + 主内容 + 右辅助 + 页脚的万能骨架，Web 布局史上有名字的经典结构。
数据表格
Data Table
结构化数据的标准呈现：表头一行 + 若干数据行，列宽按内容权重分配，数字右对齐。信息密度最高的展示形式。
点击表头按该列排序，当前排序列显示方向箭头。数据表最基本也最常用的交互。
每行前面一个复选框，表头那个是全选（支持半选态）。选中后通常在上方浮出批量操作条。
选中若干行后在表格上方（或底部吸底）浮出一条深色操作栏，显示「已选 N 项」与可用动作。
横向滚动时把关键列（通常是名称列）钉在左侧，右侧列滚过去但名称始终可见。宽表格的必备能力。
点击行首的箭头，在行下方展开一块明细区展示详情。比跳转新页面轻，比弹窗更不打断上下文。
直接点单元格就变输入框，改完回车保存。省掉「打开编辑页 → 改一个字段 → 保存 → 返回」的四步。
用「字段 + 运算符 + 值」的条件行组合出复杂筛选，行间用 与/或 连接。适合数据量大、筛选逻辑复杂的后台。
只渲染可视区内的行，滚动时复用 DOM。把万级列表的渲染成本从「行数」降到「可视行数」。
筛选后没有结果时，用一个带图标的居中提示替代空白表格，并给出「清除筛选」等出口。
无障碍
Accessibility
页面第一个可获得焦点的元素，键盘 Tab 时出现「跳到主要内容」，把几十个导航项一次跳过。WCAG 2.4.1 的硬性要求。
视觉上不可见、但会被屏幕阅读器朗读的文本。用来给纯图标按钮、需要额外解释的标题补语义。
弹窗打开后，Tab 只在弹窗内循环，不会跑到背后的页面上；关闭后焦点回到触发元素。弹窗可用性的底线。
页面局部变化（保存成功、条数更新、加载完成）时自动被屏幕阅读器朗读，不需要焦点移动。
一组按钮里只有「当前项」的 tabindex 是 0，其余是 -1；方向键在组内移动焦点，Tab 一次直接跳出整组。
正文文字与背景的对比度至少 4.5:1，大字号至少 3:1。很多「看起来很高级」的浅灰字其实是不合格的。
用 header / nav / main / aside / footer 等语义标签划分页面大区块，让屏幕阅读器用户能一键跳到任意区域。
可点区域至少 44×44 CSS 像素（iOS HIG）或 48×48dp（Material）。视觉可以小，但点击热区要够大。
现代 CSS
Modern CSS
CSS 终于能「向上看」：选择「包含某个元素的父元素」。以前必须靠 JS 加类名才能实现的联动，现在一行搞定。
只给宽度，高度按比例自动算。以前要靠 padding-top:56.25% 的 hack，现在一个属性解决。
嵌套的网格可以继承父网格的轨道，让跨卡片的内容真正对齐。解决「卡片内元素对不齐」这个困扰多年的老问题。
动画进度直接绑到滚动位置，纯 CSS 实现，不需要滚动监听 JS。是视差与滚动进度条的最优解（跑在合成线程上）。
浏览器自动为新旧两个状态截图并做补间，几行代码换来原生级的页面/状态切换动画。SPA 与多页应用都能用。
让 tooltip / 下拉 / 气泡自动贴住触发元素，还能在空间不足时自动翻转方向。以前必须用 Popper/Floating UI 这类 JS 库。
给元素加 popover 属性 + 一个按钮配 popovertarget，就得到一个自动支持顶层渲染、点击外部关闭、Esc 关闭的浮层。零 JS。
<dialog> + .showModal() 一行得到一个真模态：自动焦点锁定、自动遮罩、自动 Esc 关闭、自动惰化背景。
一个 <details> 包一个 <summary> 就是可折叠区块，天生支持键盘、天然可访问、完全零 JS。accordion 的最省事做法。
一行 accent-color 就让原生的复选框、单选框、滑块、进度条跟随品牌色，不用再自绘控件。
在 CSS 里按比例混合两种颜色，做悬停变深、禁用变淡、色调叠加，不用再手动算十六进制值。
感知均匀的色彩空间：同样的 L 值在任意色相下「看起来一样亮」。生成色阶时不会出现某个色相莫名发暗或发灰。
用形状或渐变把元素「剪」出来：圆形、三角、波浪、渐隐。做非矩形图片与渐变淡出最干净的方式。
让上下图层按数学方式混合，做出自动反色、正片叠底、叠加发光等效果。文字在色块上自动反色就是它的经典用法。