Loading...
Loading...
十一篇精炼、有主张的参考指南,涵盖配色、字体、动效、无障碍,以及如何避开千篇一律的 AI 味。
懂得好界面设计的规则,和在 deadline 压力下记得去用它们,这中间隔着一道鸿沟。这十一篇短指南就是为填补这道鸿沟而做的清单,每一篇只聚焦一个手艺主题,几分钟就能读完。
整套涵盖配色克制、字体层级、UX 法则、动效节制、完整状态覆盖、表单校验、无障碍基线、从右到左与双向排版,以及如何避开那种让产品彼此雷同的千篇一律 AI 味。这些指南刻意带有主张,因为含糊的建议改变不了任何人的做法。所有内容都在浏览器里阅读,无需安装。
关于收紧调色板、用好中性色、让强调色保持有意义而非纯装饰的实用规则。
如何设定字号、字重和间距,让读者的视线自己知道往哪看,不用你额外说明。
真正会改变布局决策的少数几条认知原理(Hick、Fitts、Jakob),不堆术语地讲清楚。
动画什么时候帮助理解、什么时候只是炫技,外加合理的时长与缓动默认值。
提醒你设计空、加载、错误、成功等状态,并以帮助而非斥责的方式做表单校验。
对比度、焦点和 RTL 支持的基线,加上一份坦率的指南,教你绕开那种一眼就是模板的通用渐变外观。
把它们当成上线前的检查清单,而不是睡前读物。在你准备把一个界面定稿之前快速翻一遍对应指南,就能抓住那些积少成多的小疏漏。
浏览十一篇指南的列表,挑出和你当前工作相关的主题。
花几分钟读完,记下你当前设计忽略掉的要点。
把修正应用到界面上,先从性价比最高的那些做起。
上线任何东西之前,再回看一遍无障碍和状态覆盖这两篇。
把这些指南当作自查量表,在队友或用户发现之前先抓住问题。
给初级队友一套共同的手艺基线,而不必自己从头写一本内部手册。
当关于间距或动效的讨论卡在个人偏好上时,拿出一条具体原理作为依据。
照着避开 AI 味那篇做,让界面显得是经过用心设计的,而不是又一个生成出来的仪表盘。
基于 React 与 TypeScript 构建,完全在客户端渲染。十一篇指南来自一个随页面加载的打包 JSON 数据文件,因此阅读它们从不触及后端。
不收集任何内容。我们不追踪你打开了哪篇、停留了多久,因为这个工具完全在你的浏览器里运行,没有可上报的服务器。
指南是轻量的静态文本,因此篇与篇之间切换即时,首屏加载之后即便网络较慢页面也保持流畅。