做好看UX 提升

什么时候用你会说“页面好乱”“什么都很显眼，反而什么都不显眼”“不知道该点哪个”。

怎么做先认出问题。视觉层级（visual hierarchy）不清。页面上的东西应该有主次：最重要的一件最先被看到，次要的退后。拉开层级靠大小、粗细、颜色深浅、位置和留白。一屏里通常只有一个主操作（primary action），其他按钮是次要样式。

做到这样算完成把截图缩小到拇指大，还能看出哪里是标题、哪个是主按钮。

什么时候用你会说“说不上哪里怪”“看着不整齐”“有点业余”。

怎么做先认出问题。对齐（alignment）乱了。元素应该靠在几条看不见的线上：左边缘对齐、文字基线对齐、卡片网格对齐。常用做法是网格（grid）加统一的左右边距。

做到这样算完成在截图上沿主要内容的左边画一条竖线，大部分元素都贴着这条线。

什么时候用你会说“挤成一团”“透不过气”“东西离得太远，不知道谁跟谁是一组”。

怎么做先认出问题。间距（spacing）和留白（white space）没有规律。相关的东西靠近，不相关的分开，这叫分组（proximity）。间距最好从一组固定数值里选，比如 4、8、12、16、24、32、48，这组数叫间距尺度（spacing scale）。

做到这样算完成随便指两个元素，你能说出它们之间是哪一档间距；样式里没有 13、17 这种零散的数。

什么时候用你会说“灰蒙蒙的”“字太淡”“太阳底下看不见”。

怎么做先认出问题。对比度（contrast ratio）不够。文字颜色和背景颜色的亮度差太小。无障碍标准 WCAG 的 AA 级要求：普通正文至少 4.5:1，大字（约 24px，或约 18.5px 粗体）至少 3:1。W3C：理解 SC 1.4.3 最低对比度

做到这样算完成用对比度检查工具抽查正文、说明文字、按钮文字、输入框占位文字，都达标。

什么时候用你会说“字太小”“大段文字看得眼花”“一行太长，读到末尾找不到下一行”。

怎么做先认出问题。字号（font size）、行高（line height）和行宽（line length）不合适。正文字号一般从 16px 起步；行高给到字号的 1.5 倍左右，中文可以再松一点；一行太长就限制正文区域的最大宽度。标题和正文要有几档固定的字号，这叫字号层级（type scale）。

做到这样算完成在电脑和手机上读一段三百字的内容，不用眯眼，也不会读串行。

什么时候用你会说“满屏都在喊”“重点太多等于没重点”“标题不够有分量”。

怎么做先认出问题。字重（font weight）用乱了。字重是字的粗细，常见常规（400）、中粗（500 或 600）、粗（700）。一个页面用两到三档就够：正文常规，强调中粗，标题粗。

做到这样算完成每一屏里加粗的内容一只手数得过来，而且都是你想让人先看到的。

什么时候用你会说“这页蓝那页绿”“按钮一会儿圆一会儿方”“不像同一个网站”。

怎么做先认出问题。一致性（consistency）差。解决办法是把颜色、字号、间距、圆角、阴影定成一组有名字的变量，全站只从里面取值。这组变量叫设计令牌（design tokens）。比如 主色、文字-次要、间距-中、圆角-小，改一处，全站跟着变。

做到这样算完成在代码里搜颜色值，只出现在令牌定义那一处；新页面不用你提醒就长得和老页面一样。

什么时候用你会说“刚打开是白的，以为坏了”“什么都没有的时候就一片空”“出错了也不告诉我”。

怎么做先认出问题。缺少界面状态（UI states）。一块内容不只有“有数据”这一种样子，还至少有：加载中（loading）、空状态（empty state）、错误状态（error state）、成功状态（success state）。AI 第一版常常只做了一切顺利的那种。

做到这样算完成你能分别让页面进入加载中、空、失败三种状态，每一种都有文字说明和下一步出路。

什么时候用你会说“点了没反应，又点了好几下”“不知道保存上了没”“提交了两次”。

怎么做先认出问题。缺少反馈（feedback）。尼尔森的可用性十原则第一条是“系统状态可见”：界面应该在合理时间内，用合适的反馈让用户知道正在发生什么。NN/g：十条可用性原则 常见的反馈有：按下时按钮变色、处理中按钮显示转圈并暂时不能再点、完成后弹一条短提示（常叫 Toast）。

做到这样算完成在浏览器开发者工具里把网速调慢，点一次按钮，你始终知道它在干什么，连点也只提交一次。

什么时候用你会说“手机上挤成一团”“要左右滑才能看全”“字小得要放大看”。

怎么做先认出问题。响应式（responsive design）没做好。页面要根据屏幕宽度调整布局，调整的那个宽度叫断点（breakpoint）。手机上常见做法：多列变单列，侧边栏收成菜单，表格改成卡片或允许局部横滑。页面头部还需要一行视口设置（viewport meta），告诉手机浏览器按设备宽度显示，而不是把电脑版缩小。MDN：viewport meta 元素

做到这样算完成在浏览器的手机模拟模式和真手机上都看一遍，整个页面不左右晃，字不用放大就能读。

什么时候用你会说“按钮太小，手指点不准”“想点这个结果点到旁边那个”“关闭的叉叉找不到”。

怎么做先认出问题。可点击区域（touch target / hit area）太小或挨得太近。几份常见标准：WCAG 2.2 的 AA 级要求点击目标至少 24×24 CSS 像素，或者周围留够间距 W3C：理解 SC 2.5.8 目标尺寸（最小）；Apple 建议 iOS 控件默认 44×44 点 Apple HIG：无障碍；Material Design 建议触控目标至少 48×48dp，目标之间留 8dp 左右 Material Design 3：无障碍设计结构。可点击区域可以比看到的图标大，靠内边距撑开。

做到这样算完成在真手机上用拇指把每个按钮点一遍，没有点错、没有要点两次的。

什么时候用你会说“按 Tab 键不知道跳到哪了”“弹窗关不掉”“动画晃得头晕”。

怎么做先认出问题。无障碍（accessibility，常写作 a11y）没照顾到。键盘用户靠焦点（focus）知道自己在哪，所以当前聚焦的元素要有清楚的焦点样式；CSS 的 :focus-visible 能做到键盘操作时显示焦点框、鼠标点击时不显示 MDN：:focus-visible。弹窗打开时焦点要进去，按 Esc 能关，关掉后焦点回到打开它的按钮。系统里开了“减少动态效果”的用户，页面可以用 prefers-reduced-motion 检测到并减少动画 MDN：prefers-reduced-motion。图片要有替代文字，只有图标的按钮要有文字标签。

做到这样算完成拔掉鼠标，只用键盘能走完主要任务，每一步都看得出焦点在哪。

“极简”“高级”“科技感”这类词，每个人脑子里的画面都不一样。给 AI 风格词的同时，把它翻译成下面这种可检查的规则，AI 才不会自由发挥。

这张表是起点，不是定律。同一种风格可以有很多做法，选一行，再按你的内容调整。

把风格词交给 AI 时，让它先出规则，再出页面：

第一部分解决“哪里不对、怎么说”。这里是十种工作方法，解决“方向还没定、改了几轮还不满意”。不用全做，按情况挑。

什么时候用心里有感觉，嘴上只能说“高级一点”。

怎么做先把风格词翻译成规则，见第二部分。

做到这样算完成同一套规则用到第二个页面，看起来还是一个风格。

什么时候用需求已经说清楚了，这个 AI 还是反复做不好界面。

怎么做不同模型做界面的水平不一样，而且几个月就换代，别背名字，自己比。

做到这样算完成几个结果并排看过，也在手机宽度下看过，选定用哪个，并记下是哪天比的。

什么时候用要做弹窗、下拉菜单、日期选择、表单这类复杂控件。

怎么做与其让 AI 从零手写，不如用现成的组件库（如 shadcn/ui、Ant Design、MUI）。shadcn/ui 的做法是把组件代码直接放进你的项目，你可以改 shadcn/ui 文档。

做到这样算完成没有引入两套同类的库；控件用键盘和手机都能操作。

什么时候用页面多于两三个，或者流程还没想清楚。

怎么做先画结构，再写代码。原型可以是纸上草图、Figma 这类设计工具，或者让 AI 用文字画线框。

做到这样算完成不靠你口头解释，别人看原型也知道每一步要做什么。

什么时候用有一个喜欢的网站或截图。

怎么做借它的结构、节奏和配色思路，不照搬它的品牌、图片和文案。

做到这样算完成你能说出借鉴的每一条，帮你的用户解决了什么。

什么时候用完全没方向，第一次做这类产品。

怎么做先看同类产品怎么做，再动手。

做到这样算完成调研真的改变了你的一个设计决定，而不只是一份报告。

什么时候用有两三个方向都想试。

怎么做开几个独立的对话或分支，给同样的需求、不同的风格，各做一版再比。别让几个 AI 同时改同一份文件。

做到这样算完成几版按同一套标准比过，选定一版，其他的放弃或只借一两处。

什么时候用在同一个对话里，想比较几种明确不同的做法。

怎么做一次只比一个决定，比如“搜索优先还是分类优先”。

做到这样算完成三版之间差别明显，你选定的理由能说出一两句。

什么时候用想试一个大胆的改动（深色主题、新字体、大改导航），又怕改坏全站。

怎么做先在一个单独的页面里试。

做到这样算完成实验有结论，要么推广，要么删掉，不留两套并存。

什么时候用页面多了，或者 AI 每次改都引入新样式。

怎么做把已经满意的样子写成规范，以后每次让 AI 先读规范再动手。

做到这样算完成新做的页面不用你提醒，就和老页面一个样。

以下是教学示例，演示从一句模糊的抱怨走到能验证的结果。

示例一：按钮太多，不知道点哪个

抱怨：“这个记账页好乱，我自己都不知道该点哪。”

认出问题：页面顶部并排五个一样的实心按钮：记一笔、导出、筛选、设置、分享。这是视觉层级不清。

对 AI 说：

验证：缩小截图看，第一眼落在“记一笔”上；“更多”菜单里三项都能正常打开。

示例二：手机上挤成一团

抱怨：“电脑上挺好，手机上一打开全挤在一起，还要左右滑。”

认出问题：三列卡片没有变成一列，这是响应式；图标太小点不准，这是可点击区域。

对 AI 说：

验证：浏览器手机模拟和真手机上都不左右晃；拇指点编辑和删除各五次，没有点错。

示例三：点了没反应

抱怨：“点保存没反应，我以为没点上，又点了两下，结果存了三条。”

认出问题：缺少反馈，也缺少处理中的状态。

对 AI 说：

验证：在浏览器开发者工具里把网速调慢，连点三次“保存”，只存了一条；拔掉网络再点，能看到失败提示，填的内容还在。

每一项都自己动手试，不要只看 AI 说“已完成”。

先修挡住用户完成任务的问题，再修让人看着累的问题，最后才是个人喜好的细节。