这套笔记来自 Sajid 的 UI 视频教程(Will's Design Notes 资料区),7 个主题。它和 Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) 是同一类东西——给"没有艺术天赋的人"的可照做规则——但 Sajid 的味道更"反鸡汤":他一上来就劝你别追求漂亮,因为漂亮经常是新手的执念;真正赚钱的网站都很朴素。
三条贯穿全篇、且最能代表 Sajid 立场的心法(也是它区别于 Refactoring UI 的地方):
- 功能 > 美观——网站是用来达成目标(流量/销售/订阅)的工具,不是艺术品。
- 抄优秀作品 > 原创——你看到的一切设计都是 remix,你的活儿是"执行得更好",不是"凭空发明"。
- 字体排印占 UI 的 80%——大部分界面本质就是文字 + 按钮,排版做好,界面就成了一大半。
本篇与 Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) 的分工:Refactoring UI 是 50+ 条的全量技巧手册(层级/间距/配色/字体/阴影/图片/收尾八章 + 实战拆解),颗粒度细到像素。本篇不重写那些重叠的间距/配色/字体细节,而是突出 Sajid 独有的:① 三条心法立场;② 把 UI 当"极简变量系统"的思路;③ 两个独家实操招式——HSL 明度分层修复枯燥 UI 和 Motion Contract 动效交付法。重叠处我会明确指给 Refactoring UI 对应章节。
阅读顺序建议:先看本篇一、二章建立"别迷信漂亮和原创"的心态,再看三~七章的具体挑选法,最后第八章(动效)是 Refactoring UI 完全没覆盖的全新内容。
一、只有新手才执着做"漂亮"网站(Only Noobs Build Beautiful Websites)
主题:设计的目的是解决问题,不是好看。 这是 Sajid 全套笔记的地基,也是他最"反直觉"的一章。
1.1 设计不是艺术(Design is Not Art)
心法:网站存在是为了完成某个具体目标——拿流量、产生销售、增加订阅。Why:如果你做网站是为了拿设计奖或给老师交作业,那尽管追求视觉华丽;但如果你要它真的带来商业结果,功能性和实用性必须排在"好看"前面。
反直觉证据:去 Semrush(SEO 数据网站)看各行业访问量最高的网站,你几乎找不到一个"华丽设计"的。
| 网站 | 月访问量 | 长相 |
|---|---|---|
| Indian Railways(印度铁路) | 1.32 亿 | 朴素甚至土 |
| Mercury(银行) | 1.5 亿 | 简洁 |
| Chase(银行) | 1.93 亿 | 简洁 |
| Craigslist(分类信息) | 约 1000 万/天 | 又慢又丑 |
为什么大公司"故意"做得朴素:它们请得起最好的设计师,却选简洁甚至"无聊"的设计,因为目标是盈利。设计师的晋升也是围绕数据指标(转化率/访问量)而不是"页面漂不漂亮"。
给 PM 的生活类比:这就像菜市场最赚钱的摊位往往不是装修最精致的,而是"东西全、找得快、结账利索"的那个。用户来你的网站是带着任务来的(学习/购物/看视频),你的活儿是让他最快完成任务,而不是让他驻足欣赏。
1.2 用户真正想要什么(What Users Actually Want)
人们想要的是简单、易用。 公司做过研究,所以故意把网站做简单。三个现实约束:
- 注意力经济(attention economy):用户的时间和注意力最值钱,谁体验最好谁留住用户、谁赚钱。
- 响应式(responsive)是底线:网站要在电脑/平板/手机上都能用。很多漂亮网站恰恰栽在这里——装饰多就难做到真正的多设备适配,手机上用不了,用户会很火大。
- 技术现实:所有网站都跑在浏览器里(HTML + JS)。漂亮网站通常图片多、装饰多 → 加载慢、小屏排版乱、代码复杂 → 体验更差。
1.3 用户友好网站的五大支柱(Five Pillars)
Sajid 把一个好网站拆成 5 个支柱,做好这 5 点就能成功(注意:"漂亮"不在其中):
| 支柱 | 核心要点 | 在本篇/Refactoring UI 哪里展开 |
|---|---|---|
| 布局 Layout | 用"行和列"的思维搭;4 号法则=所有尺寸和间距尽量用能被 4 整除的数(4/8/12/16…);布局/字体/颜色都要重复 → 视觉一致性(visual consistency)降低认知负担;走组件化(component-based,React/Vue 都基于此) | 见本篇第四章 + Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) 间距系统 |
| 排版 Typography | 全站尽量只用一种字体(字体越多越容易出错);推荐 Inter / Montserrat / DM Sans / Raleway / Roboto;建 typescale(字号比例系统) | 见本篇第三章(80% 那章) |
| 颜色 Colors | 越少越好:黑白为主 + 1 主色 + 1 背景色 + 1 强调色(只用在 5%–10% 的地方)+ 强调色的深色版(给 hover) | 见本篇第七章 |
| 图片 Images | 用清晰图、上传前压缩;不要用无关图填充页面;图多会拖慢网站(icons8 / unsplash 取素材) | Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) 图片处理章 |
| 内容 Content | 最重要的支柱——内容才是流量和销售的核心驱动力 | 见下文 1.4 |
为什么强调"4 号法则"和"重复":人脑天生喜欢找规律、看到重复结构会觉得"舒服、可预测"。所以同类元素(按钮/卡片/标题)长一个样,用户学一次就会用全站,认知负担直接降下来。这和 Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) 的"把一切系统化"是同一件事。
1.4 内容才是王(Content is King)+ 网站是试错过程
Why 内容最重要:Craigslist 又慢又丑,每天约 1000 万访问——因为用户有明确目的,而它的内容满足了需求。做课程网站就做最好的课;做博客就写高质量文章;做电商就给透明信息 + 图片 + 评论。
起步前先问自己:你为什么需要这个网站?然后多问用户想要什么,他们想要什么你就给什么。
网站是 trial-and-error(试错迭代):不会一开始就完美。上线后收集反馈、按数据优化、持续改进。(这条和 Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) §1.3"循环工作 + 做悲观主义者"完全呼应——先做能跑的最简版。)
二、原创想法被高估(Original Ideas are Overrated)
主题:一切都是 remix(重组再创造)。 你不需要从零发明新东西——拿已有的想法,用更好/更快/更干净的方式,或为不同人群重新执行。这是 Sajid 给"怕自己不够有创意"的人的解药。
2.1 你以为的"原创",全是抄来的
Sajid 列了一长串"看起来很原创、其实都有前身"的设计,核心是让你卸下"必须原创"的心理包袱:
| 设计 | 真实来源 |
|---|---|
| 扁平化设计(flat design) | 源自平面印刷的极简主义(减装饰、强调功能与版式) |
| 拟物化(skeuomorphism) | 模仿现实物体,用熟悉外观降低学习成本 |
| 玻璃拟态(glassmorphism) | 不是新概念——2013 iOS 7 带火,但 2006 Windows Vista 的 Aero Glass 早用过半透明 |
| 汉堡菜单图标 ☰ | Norm Cox 于 1981 年为 Xerox Star 设计,沉寂几十年到 2010s 被移动应用带火 |
| 下拉刷新(pull to refresh) | Loren Brichter 于 2009 年在 Tweetie 发明,Twitter 收购后才普及 |
| 无限滚动 | Aza Raskin 于 2006 年提出,被社交信息流带火 |
| 点赞按钮 | 不是 Facebook 首创——Vimeo 2005、FriendFeed 2007 都有,FB 2009 才推"竖大拇指",厉害的是把它推向全球 |
| 弹窗 / 面包屑 / Tab 标签栏 | 分别来自桌面软件 / 文件系统路径 / 实体文件夹标签(图书馆时代就这么干) |
2.2 创新在"执行",不在"首创"(The point is everything is a remix)
心法:伟大产品都是把几个已有想法组合 + 执行得更好:
| 产品 | 它 remix 了什么 | 真正的创新点 |
|---|---|---|
| AltaVista/Lycos 已有的爬虫技术 | PageRank 重构了"相关性"排序(灵感来自学术论文引用) | |
| Friendster 的社交网络 + MySpace 个性主页 + 大学名录 | 把这些执行得更好 | |
| 短信(SMS)+ 博客 | 创造了"微博"这种新形式 | |
| Uber → Lyft/Grab/滴滴/Bolt | 传统出租车调度 + 手机 App + GPS | 本质同一概念,差异在执行和品牌/本地化 |
| Notion / Slack / Figma | Wiki+数据库+笔记 / 邮件→实时频道 / Sketch+协作上 Web | 整合 / 效率 / 协作这一个关键差异 |
| Airbnb | 民宿 + 酒店预订便利 + 陌生人共享 + 分类广告 | 信任机制 + 评价 + 支付保障——解决"敢不敢住"这个最大痛点 |
给 PM 的用法:下次做新功能时,别因为"市面上已经有人做过了"就否定自己。问的不该是"这个原创吗",而是"我能不能执行得更好/更快/更干净,或服务一个被忽略的人群"。这也是 Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) §10"重建你喜欢的界面"和"找出你不会那么做的决定"的同一精神——光明正大地偷师。
三、字体排印占 UI 的 80%(The 80% of UI Design - Typography)
主题:大多数 UI 本质就是文字 + 按钮 + 少量图标。 所以真正决定界面质量的是排版。这是 Sajid 最有标志性的论点。
3.1 一个实验:去掉所有字体样式,界面就垮了
把任意 UI 的字体样式(字号/字重/颜色差异)全部抹平,做前后对比,你会发现:无法判断哪个标签被选中、按钮失去区分、信息没有层级、整个界面像一团文字。这直接证明:排版几乎单独决定了用户体验。
3.2 建立信息层级的三个杠杆(Building visual hierarchy)
只用三个维度就能拉开层级,不必动版面结构:
| 杠杆 | 怎么用 | Why |
|---|---|---|
| 大小 Size | 标题比正文更大更粗 | 最直觉的层级信号 |
| 颜色/明度 Color | 主文字 100% 明度,次要文字 60% 明度 | 自然分出主次,不用加任何装饰 |
| 间距 Spacing | 标题和下面的信息组拉开间距 | 利用"接近律"(离得近=一组),让标题在结构上独立 |
实操技巧:把内容放进卡片,给卡片一个 10%–20% 明度的背景,就能把这块从页面里抬出来。自检方法:把设计缩小看整体,确认标题够显眼、文字好读;最好找真实用户测,实在不行问朋友。(对应 Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) §2 视觉层级章——那里有更全的"按钮三级分""标签是最后手段"等细则。)
3.3 你不需要很多字号(You don't need many font sizes)
心法:做 99% 的应用,只用三种字号 + 字重变化 + 颜色变化就够做完整个界面。
具体配方:
- 选一个基础字号(14px 或 16px)+ 常规字重 + 100% 明度 当基准。
- 真要变化时,只在基础上 ±2px——这就是你的 type scale(字号比例体系)。
- 单位用 rem 不用 px(遵循无障碍规范:用户在系统里调大默认字体时,整站跟着缩放)。
对比 Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) §5.1:那篇也讲手挑 type scale、用 px/rem 不用 em。Sajid 的独特补充是±2px 微调法和"3 种字号就够"的极简主张——更适合 PM 做原型时快速定档,不纠结。
3.4 line-height(行高)自带"呼吸空间"——Sajid 的独家点
心法:标题之所以显得"高级",不只是字大或加粗,而是它在视觉上有呼吸空间——这个空间让大脑把它识别成一个独立信息块。而这个空间,很大程度由 line-height 提供,不必额外加 margin。
关键技巧:字号用 rem,行高用 em:
| 单位 | 相对谁 | 为什么这么选 |
|---|---|---|
| 字号用 rem | 相对根元素(html) | 全局可控 + 遵守无障碍 + 用户调浏览器字体时整体缩放 |
| 行高用 em | 相对当前元素自己的 font-size | 行高自动跟着字号走——字大了行高同比例大,缓冲空间自动对 |
例:font-size: 1.125rem(=18px)配 line-height: 1em,则 1em = 18px,这一行自带 18px 的视觉缓冲。line-height ≈ 文字内部行距 + 外部视觉缓冲区。
给 PM 的人话:很多人做标题时手动加
margin-bottom去"撑开"标题,结果各处不一致。Sajid 的招是——让行高自己把缓冲空间带出来,你只需把字体样式做成全局变量(如--h1),用的时候直接套,不用每处手调间距。
3.5 UI = 极简变量系统(不是"写样式",是"定义规则")
Sajid 的核心世界观:整个界面可以只用 4 种字体变量 + 3 种灰色变量 做完。UI 设计的本质不是逐个写样式,而是定义一套规则,然后到处复用。
字体系统的搭建顺序:字重 → 字号 → 行高 → 字体族(其中行高对可读性影响最大)。任何主流字体都够用。用法:用常识判断用户真正会关注哪段文字,然后强化那一段。
四、设计顶级网站的五条规则(The Easy Way to Design Top Tier Websites)
主题:把"认知重塑 → 原则 → 系统 → 创造力流程"串成一个闭环。核心一句话:设计不是情绪表达,是有结构、有方法的决策过程。
Rule 1:好设计 = 尽量少设计(As Little Design As Possible)
心法:设计核心不是堆元素,是减少不必要的内容。"有创意"不是第一个想到某点子,而是把已有想法连接起来——顶级设计师也不从零开始。
常见错误:从头部往下做、先纠结结构(几个板块?多宽?按钮怎么设计?)——问题太多会拖慢节奏、消耗创造力。正确起手:先问"这个网站最核心的功能/卖点是什么"。(= Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) §1.1"从功能入手不从布局入手"。)
Rule 2:相似律与接近律(Law of Similarity & Proximity)
人脑先看整体再看细节,页面必须几秒内可被扫视。两个格式塔(Gestalt)原则:
| 原则 | 做法 | 效果 |
|---|---|---|
| 相似律 Similarity | 用形状/大小/颜色分组 | 相似元素看起来属于同一类,页面更一致也更好实现 |
| 接近律 Proximity | 用间距分组 | 靠得近的元素被理解为相关联 |
简洁不是审美偏好,而是符合人脑处理信息的方式。背后的认知科学原理见 NNGroup 视觉设计原理·格式塔分组·视觉层次·排版·色彩·图像(19 篇 · 五大视觉原则/格式塔接近-相似-闭合-共同区域/视觉层次-网格-黄金比例/字体术语-搭配-阅读字体/色彩60-30-10/图片优势效应-照片-意象/美学-可用性效应/术语表)。
Rule 3:元素之间的间距比你以为的多
心法:当你专注盯着某个单独元素时,会觉得留白太多;但用户是先扫整体再看细节。做法:先给足够多的间距,整体观察,再慢慢减少到满意为止。(= Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) §3.1"从过多留白开始"。)
Rule 4:使用设计系统(Use a Design System)
设计系统 = 一套统一的规则和组件集合。简单网站只需定几个关键元素,复杂 UI 才需要详细系统。
- 间距系统:建一个可被 4 整除的体系(4/8/12/16/20/24/40…)。间距必须用真实内容来设计——用 lorem ipsum 假数据是糟糕做法,因为不同内容需要不同空间。系统的作用是帮你快速选值,而不是随机试错。
- 字体与颜色:选字体没有绝对科学,别迷信"色彩心理学"。做法:选 1 个字体 + 合适字号比例;选 1 个深色给文字、1 个浅色给背景;再选 2 个颜色加个性。前提是清晰易读、不刺眼。
- 关键组件:从链接和按钮开始,通常需要两种——主操作(primary)和次操作(secondary)。(按钮分级详见 Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) §2.7。)
Rule 5:层级就是一切(Hierarchy Is Everything)
强调最重要的,其余保持克制。用大小/字重/颜色来强调,但别一开始就过度强化——小改动往往大效果。
一条例外——适度打破克制:可以用阴影、渐变、卡片来增加层次和个性。这不是否定极简,而是在极简框架下增加表达张力。(这条直接通向第五章"修复枯燥 UI"。)
创造力的五步流程(Creativity Process)
| 步 | 做什么 | Why |
|---|---|---|
| 1 打牢基础 | 系统学习提升认知 | 没有基础谈不上创意 |
| 2 找灵感 | 上 Mobbin(mobbin.com)按赛道看真实上线产品的单页/流程/交互 | 抄成熟作品(呼应第二章) |
| 3 暂时离开 | 有初步想法后先别急着做,去做点别的 | 大脑会在后台整理信息,回来常冒新点子;还没灵感可能是太累/没睡好 |
| 4 执行 | 开始做,不犹豫不完美主义,做不好也没关系 | 关键是完成 |
| 5 别爱上自己的设计 | 先给朋友/同事看,再找真实用户试,按意见改 | 可能做三版最后只有第三版一个小模块有用,这很正常——先完成,再完美 |
五、修复枯燥 UI:HSL 明度分层 + 阴影(The Easy Way to Fix Boring UIs)【独家招式】
主题:用同一种颜色的几个不同明度做"分层",再加阴影,就能把界面从"普通"快速提到"好看"。 这是 Refactoring UI 没有单独成章的 Sajid 招牌方法,ROI 极高。
核心 ROI 判断:从"普通"到"好设计"只需颜色分层 + 阴影,回报明显;但从"好"到"顶级"需要大量时间打磨细节,而用户感知提升有限。所以 PM 做原型时,把 80% 力气花在分层 + 阴影就够了。
5.1 标签页 / 下拉菜单的层级处理
- 先加一个比页面亮一点的背景;把选中的标签调亮——但文字和图标会变不清楚,所以文字图标也要一起调亮。
- 高亮下拉菜单(它们是 UI 的核心元素)。
- 用渐变 + 顶部浅色内阴影给面板增加纵深——模拟"光从上方照下来,顶部比底部亮"(真实世界光照逻辑)。
5.2 让单选按钮(Radio Buttons)不无聊
- 用一个更亮的卡片把所有选项包起来,高亮选项 + 增加间距,被选中的额外强调。
- 调整排版和内容顺序,建立更清晰的视觉层级。
- 给被选中的卡片加一点深度(阴影)。
(单选按钮做成卡片式,也是 Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) §8.6 的招。)
5.3 完整实战:从普通到明显更好(11 步走查)
一个"所有内容挤在同一平面、没有前后关系"的干净但平庸界面,Sajid 的修复顺序:
| 步 | 动作 | 为什么 |
|---|---|---|
| 1 | 把页面背景调成更深的底色当"地基" | 让之后的卡片能"浮"在页面之上,而不是全贴同一层 |
| 2 | 给不同区域用同一套颜色系统、不同明度的背景(底层最暗 / 中层卡片 / 上层控制器最亮) | 用明度区分上中下三层 |
| 3 | 交互元素用更亮背景 + 较大圆角 + 轻微阴影 | 让用户一眼知道"这些能点",并从背景中抬出来一点点 |
| 4 | 第二个卡片先做"卡片感"(圆角 + 内边距 + 基础阴影),先不管内容细节 | 先让它在视觉上成立为独立卡片 |
| 5 | 卡片成立后,清理多余装饰:把有边框的"Pro"标签去掉边框,改用更亮背景突出 | 已经有层级时,边框显得多余甚至干扰 |
| 6 | 进度条:背景加深浅内阴影显"凹进去",真正的进度条"浮在上面" | 无形中告诉用户:背景是容器,进度是当前状态,更重要 |
| 7 | 优化排版:让重要信息在卡片里有更明确层级 | 别让重点和普通说明文字混在一起 |
| 8–10 | 最后一块两个单选按钮:用更亮背景区分选项(不只选中时变)、加图标辅助理解、调按钮位置统一视觉语言、删掉自解释区域的多余标题 | 内容自解释时标题反而重复 |
| 11 | 三个区域放一起整体检查,拉高偏矮的计费区 | 让模块在层级/节奏/视觉重量上平衡 |
核心心智模型:把界面想象成有高度的几层楼——越靠近用户(越重要)的元素就越亮 + 越有阴影;越是背景容器就越暗 + 内凹。光从上方来,所以顶亮底暗。掌握这一条,枯燥界面就能批量修复。深度/阴影的更细规则(双层阴影、5 档阴影表)见 Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) §6。
六、挑选完美间距的方法(The Easy Way to Pick Perfect Spacing)
主题:用一套系统、而不是凭感觉来定间距。 如果你只能靠感觉调"这里该大点还是小点",说明你缺判断标准。
6.1 核心思路:用 rem 把间距锚定到字号
设计师常犯的错:在 27 寸大屏上设计,间距字号都很舒服,但用户用的是笔记本或更小屏,间距就别扭了。
新思路:
- 字号和间距都用 rem 替代 px,把最常用字号定为基准(多数界面 1rem = 16px)。
- 所有间距都以这个基准做倍数增减(0.5 / 0.75 / 1 / 1.25 / 1.5 rem 这种有规律的值,不用 13px、17px 这种随意值)。
- 这样字号天然和间距产生关系,整个界面比例更协调。
rem 的两个性质要记牢:① rem 跟"字体基准"走,不跟屏幕尺寸走——大小屏都是 16px,不会等比缩放;② 用户在系统里把默认字体调大,用 rem 的间距也一起变大(无障碍友好)。
给 PM 提醒研发的话:这套 rem 思维需要在前端样式层"有意识地采用"。如果工程师随手写死
16px/24px/32px,你设计里的 rem 关系不会自动生效。要在工程里约定:基础字体 = 1rem;padding/margin 优先用 rem;调字号时只改基准字体、其余跟着变。
6.2 六条间距规则(Sajid 的 do/don't)
| 规则 | 内容 | Why |
|---|---|---|
| 正文 vs 标题要区分 | 列表项之间 1rem;标题和列表之间加大(标题不算列表一部分) | 用间距表达"谁属于谁" |
| 组内 < 组外 | 强相关元素用最小间距压紧成组,组与组之间拉远(1rem,空间够可 2rem) | 间距全一样,用户得多想"哪个按钮属于哪组"(= 接近律) |
| 按钮内部 < 按钮外部 | 按钮里图标↔文字的间距 < 按钮的左右内边距/外间距 | 绝不能外部间距 < 内部间距,否则层级被打乱;例:点赞↔点踩之间留大间距,表示是两个独立操作 |
| 按钮上下 padding < 左右 padding | 90% 场景:上下 0.5–0.75rem,左右 1–1.5rem | 眼睛从左往右扫,字母左右宽度不一(W 宽 I 窄)视觉噪音多需更多空间;字高度稳定,上下给太多会显"又高又胖笨重" |
| 卡片要给足内边距 | 纵向元素多的布局用 1.25rem 四周 padding;减到 1rem 就拥挤压抑 | 内容密集让用户难聚焦 |
| 按钮组:间距 = 水平 padding 最干净 | 按钮间距 1rem、左右 padding 也 1rem | "视觉节拍一致性"——眼睛找最小重复单位,节拍一致就觉得稳定均匀,不一致会"说不出哪里不对" |
6.3 选间距的方向:从大往小减,不要从小往大加
心法:每次选间距,从较大的值开始(比如 1.5rem),再按需逐步减小。Why:人对"挤"的敏感远超对"松"——文字按钮挤成一团时,大脑要额外费力拆结构,你会本能觉得累、乱、不想看;而间距偏大时几乎不会有负面情绪,只觉得"有点松",反而帮大脑腾出精力思考信息关系。(= Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) §3.1 同一原则,Sajid 多给了"挤比松更伤"的认知解释。)
补充:间距的第一原则是一致性(being consistent)——哪怕全用 0.5rem 显得拥挤,只要一致,也好过随机。rem 思维还可以用在圆角的定义上。
space-between(flex 两端对齐)不是在"调间距",而是在声明结构角色("信息主体 + 对应操作":左边我在读、右边我能做什么)。
七、配色最简单的方式:HSL 明度造色阶(The Easy Way to Pick UI Colors)
主题:颜色是 UI 里最简单的部分,难的是知道何时停下、直接选一个"能用"的方案。别学术化。
7.1 一个可复用的配色结构(三类色)
| 类别 | 用途 |
|---|---|
| 中性色 Neutral | 背景、文字、边框和大量基础元素——UI 的骨架 |
| 品牌色/主色 Primary | 主要操作,加一点性格——强调重点 |
| 语义色 Semantic | 表达状态:成功(绿)/ 警告(黄)/ 错误(红) |
7.2 颜色在 UI 中本质是"色阶"(shades)——为什么用 HSL 不用 hex
你会到处看到色阶应用(按钮 hover、渐变背景)。三个视觉接近的灰色,用 hex 表示时代码层面毫无规律,难维护;HSL 则每个数值变化对应明确的视觉变化,适合构建系统化色阶。
HSL 三个分量:
| 分量 | 含义 | 关键点 |
|---|---|---|
| H 色相 Hue | 色环上的位置,0–360 | —— |
| S 饱和度 Saturation | 0–100,颜色强度 | 饱和度为 0 时,无论色相是什么都得到中性色(灰) |
| L 明度 Lightness | 颜色的亮暗 | 只调 L,就能用非常简单的数学造出一整套和谐色阶,无需猜 |
和 Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) §4.1 的关系:那篇也主张"用 HSL 不用 hex"。Sajid 的独家落点是"只动 L 明度"这一招——下面这套暗黑模式三层明度,是他最实用的配方。
7.3 用 HSL 构建背景 & 文字(暗黑模式实战)
(Sajid 提到 83% 用户更喜欢暗黑模式 Dark Mode,所以以深色界面举例。)
背景:色相和饱和度都保持 0,只调明度分三层:
| 明度 | 用途 |
|---|---|
| 0% 明度 | 基础色(最底层) |
| 5% 明度 | 卡片等表面元素 |
| 10% 明度 | 强调最重要、被抬高的元素 |
原理:更亮的元素看起来更靠前、更接近用户 → 用在更重要的元素上。光通常从上方来,所以顶部最亮、底层最暗。
文字:同样逻辑——标题和重点文字用高对比,其余文字用稍柔和的色阶。但标题不要用 100% 明度,那样会让眼睛难受(亮模式则把明度反过来,再靠感觉微调)。
命名约定(Sajid 的小技巧):
- 背景有上下层概念(越上越近光源越浅)→ 命名用
BG-Dark/BG-Light。 - 文字没有上下空间层概念 → 命名用
Text/Text-muted(弱化)。
配色更全的规则(灰带冷暖、调亮同时提饱和、靠转色相提亮防发灰、WCAG 4.5:1/3:1 对比、不能只靠颜色要配图标)见 Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) §4。本篇只突出 Sajid 的"只动明度 + 三层暗黑模式"最小可用配方。
八、网页动画的简单方法:Motion Contract 动效交付法(The Easy Way to Do Web Animations)【独家·Refactoring UI 未覆盖】
主题:把"感觉型动效"翻译成 AI 和研发都能精确执行的明确指令。 这不是教你写动画代码,而是教 PM/设计师用一套参数化、可枚举、跨技术栈的约束表去交付动效——Sajid 称之为 Motion Contract(运动约束表)。这是 Refactoring UI 完全没有的内容,对要和 AI/研发对接的 PM 价值很高。
8.1 为什么需要 Motion Contract
UX 给技术的动画表格,本质不是"效果说明",而是一张可实现的运动约束表。一张合格的表要满足 4 个条件:
- 参数化(给数值,不是"自然一点"这种形容词)
- 可枚举(从固定选项里取,不是自由发挥)
- 跨技术栈(CSS / Lottie / Framer Motion 都能用)
- 是约束,不是建议
给 PM 的人话:你跟研发说"这个动画自然顺滑一点",得到的结果一定五花八门。换成"时长 1200ms、ease-in-out、水平位移 ≤10%、只允许 translate、无限循环且首尾一致、注意力权重 Background",研发和 AI 给你的结果就基本一致了。形容词→参数,就是这一章的全部价值。
8.2 一个完整动效描述必须覆盖 6 个维度
| 维度 | 问题 | 例 |
|---|---|---|
| 1 动画目的(Why) | 这段动画在体验上承担什么角色 | 状态提示 / 空间暗示 / 轻度引导(不承担信息讲解、不作视觉焦点) |
| 2 触发与生命周期(When) | 何时开始、活多久 | 元素出现后自动触发,无需交互,页面可见期间持续循环 |
| 3 时间参数(How long) | 单次时长 | 约 2 秒(严谨写 1.8–2.2 秒区间),节奏偏慢 |
| 4 空间变化(What moves) | 动什么、动多少 | 单一维度水平位移,幅度 < 元素尺寸 10%,不缩放/旋转/透明 |
| 5 节奏曲线(How it feels) | 速度怎么变 | 先慢→中段加速→末尾减速,接近自然惯性而非机械匀速 |
| 6 边界与约束(Constraints) | 不能干什么 | 首尾一致无跳变、不影响文本可读性、与可读性冲突时优先内容清晰 |
合并成的"一段式"自然语言 Prompt(可直接喂 AI):
"请为该元素添加一段用于状态暗示的克制型循环动画。出现后自动开始,页面可见期间持续播放。单次约 2 秒,节奏偏慢。仅含水平方向小幅位移,幅度控制在元素尺寸 10% 以内。节奏先慢、后快、再慢,中段有轻微动感,结尾平滑收尾。首尾状态一致,循环无跳变。整体保持低存在感,不干扰阅读,也不作视觉焦点。"
8.3 六个可枚举维度的取值表(挑值用)
把动效拆成 6 个维度,每个维度有固定档位 + 对应的"喂 AI 控制语言":
① Duration 时长(快慢感):
| 区间 | 体验 | 典型语义 |
|---|---|---|
| ≤ 300ms | 瞬时、强反馈 | 点击触发 |
| 300–600ms | 快速响应 | 操作确认 |
| 600–1200ms | 可感知不急促 | UI 反馈 |
| 1200–1800ms | 平稳过渡 | 状态变化 |
| 1800–2500ms | 缓慢、背景化 | 系统级 |
| ≥ 2500ms | 冗长易分心 | ❌ 避免 |
② Easing 节奏(运动"性格"):linear=机械无情绪 / ease-in=克制启动慢 / ease-out=果断结束稳 / ease-in-out=自然真实(最常用) / soft cubic-bezier=高级细腻 / aggressive bezier/spring=强烈活跃。
③ Spatial Change 空间变化幅度:≤5% 几乎不可察觉(背景动画)/ 5–10% 轻微提示(状态暗示)/ 10–15% 明确变化(UI 反馈)/ 15–25% 强调(引导聚焦)/ ≥25% 强烈(情绪/品牌)。方向语义:水平=流程平移 / 垂直=层级出现消失 / Z 轴=重要性变化。
④ Properties Scope 允许的属性(复杂度):仅 translate=极低风险 / translate+opacity=低 / translate+scale=中(注意阅读)/ transform 全集=高(易抢注意力)/ +blur/filter=❌ 避免。
⑤ Loop Policy 循环策略:不循环(操作反馈)/ 有限循环 2–3 次(教学引导)/ 无限循环首尾一致(系统状态背景)/ 无限循环首尾不同=❌ 会跳变。
⑥ Attention Weight 注意力权重:Background(几乎忽略,系统级)/ Supportive(感知但不抢)/ Primary(明确注意,关键反馈)/ Dominant(强制注意,品牌情绪)。
8.4 真正交给研发的三张约束表(按场景分级)
| 维度 | 系统级 / Low Motion | 交互反馈 / Medium | 品牌情绪 / High |
|---|---|---|---|
| Duration | 1800–2500ms(禁 <1.5s) | 600–1200ms(荐 800ms) | 300–800ms(禁 >1s) |
| Easing | ease-in-out(禁 linear) | ease-out(结尾必收) | custom/spring(允许 overshoot) |
| Spatial | ≤10%(translateX/Y only) | ≤15%(可轻微 scale) | ≥20%(多轴可组合) |
| Properties | 仅 transform(禁 opacity/rotate) | translate+scale(禁 rotate) | transform 全集(可 rotate) |
| Loop | infinite 首尾一致(from==to) | once(禁循环) | once(严禁 infinite) |
| Attention | Background(不抢主线程) | Supportive(不覆盖主内容) | Primary/Dominant(明确焦点) |
专业话术:跟研发说"我这边不给具体动画实现,给一套 Motion 约束。不同场景只能在这几个维度和区间内取值,实现方式技术自由,但不要跨级或混用。" 这把"动效靠感觉"变成了可交付、可验收的契约。
附:Sajid vs Refactoring UI 速查对照(避免重复查)
| 主题 | Sajid 的独特角度(看本篇) | 全量细则(看 Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解)) |
|---|---|---|
| 心态/起步 | 功能>美观、原创被高估、抄成熟作品(一、二章) | §1 开局心法(从功能起步、先黑白、循环工作) |
| 字体排印 | 占 UI 80%、3 字号 ±2px、行高用 em 自带呼吸、UI=极简变量系统(三章) | §5 完整 type scale / 行长 / 行高 / 对齐 / 字间距 |
| 间距 | rem 锚定字号、组内<组外、上下<左右 padding、从大往小减(六章) | §3 留白与间距系统、避免歧义间距、网格被高估 |
| 配色 | 只动 L 明度、暗黑模式 0/5/10% 三层、BG/Text 命名法(七章) | §4 8-10 档灰+主色 9 阶、转色相提亮、WCAG 对比 |
| 深度/修复枯燥 | HSL 明度分层 + 阴影,普通→好回报最大,11 步实战(五章) | §6 双层阴影、5 档阴影表、扁平也能造深度 |
| 动效 | Motion Contract:6 维参数化约束喂 AI/研发(八章) | (Refactoring UI 未覆盖) |
| 认知科学原理 | 相似律/接近律(四章) | —— → 见 NNGroup 视觉设计原理·格式塔分组·视觉层次·排版·色彩·图像(19 篇 · 五大视觉原则/格式塔接近-相似-闭合-共同区域/视觉层次-网格-黄金比例/字体术语-搭配-阅读字体/色彩60-30-10/图片优势效应-照片-意象/美学-可用性效应/术语表) |
源自 will-design-notes / Sajid Code UI(Will's Design Notes 资料区,Sajid 的 UI 视频教程中英混排笔记,7 主题 8 篇)。配套教程视频(带音轨)与大量前后对比截图保留在 sources,因路径含空格且已 gitignore,未嵌入本 wiki。与 Refactoring UI 给非设计师的 UI 实战手册(层级·留白与间距·配色系统·字体排印·深度与阴影·图片处理·收尾打磨·实战拆解) 对照看:本篇=Sajid 的独特心法立场 + 明度分层/动效两个独家招式;那篇=50+ 条全量可照做技巧手册。背后的认知科学原理见 NNGroup 视觉设计原理·格式塔分组·视觉层次·排版·色彩·图像(19 篇 · 五大视觉原则/格式塔接近-相似-闭合-共同区域/视觉层次-网格-黄金比例/字体术语-搭配-阅读字体/色彩60-30-10/图片优势效应-照片-意象/美学-可用性效应/术语表)。