用 ai 给UI 页面打分
文章目录
- [用 ai 给UI 页面打分](#用 ai 给UI 页面打分)
- [怎么让 ai 判断 你的ui 是否美观 ，交给 AI 判断](#怎么让 ai 判断 你的ui 是否美观 ，交给 AI 判断)
- 总结结论
-
- [结论 & 推荐](#结论 & 推荐)
- [UI Token 差异表模板](#UI Token 差异表模板)
-
- [A. 加权总分 & 排名](#A. 加权总分 & 排名)
- [B. 维度打分（1--7，供你回查）](#B. 维度打分（1–7，供你回查）)
- [C. 选择建议（怎么落地更强）](#C. 选择建议（怎么落地更强）)
- [D. UI Token 合并建议（模板已给）](#D. UI Token 合并建议（模板已给）)
怎么让 ai 判断 你的ui 是否美观 ，交给 AI 判断
。
有一个需求 ，UI 设计师，设计了3个App 首页，3个页面只有 细微的变化。怎么判断那个图片更好？
下面给你一份**"微调点速查清单"**（你可以边看图边核对，基本覆盖 90% UI 细微差异）：
-
Header / 顶部栏
状态栏图标顺序与对比度（电量/Wi-Fi/时间是否一致）
标题字号/字重与 Logo 相对位置、左右内边距
搜索 / 通知 / 消息图标的尺寸与点按区域是否统一
公告条是否出现、颜色/高度/图标是否一致
-
Hero / Banner 区
Banner 数量、排序是否有变；图像裁切与对焦是否变化
CTA 文案（动词、语气）、按钮形状/对比度/阴影
角标（如 NEW/TOP/限时）有无与颜色、位置是否统一
-
快捷入口 / 功能栈
快捷入口个数与顺序、图标填充/线性风格是否混用
入口标签大小写（Sentence/Title）、字重、字距、图标与文案间距
触达尺寸是否≥44px，点击态/选中态是否一致
-
Feed 卡片
卡片四边内边距与卡间距；缩略图圆角半径是否统一
标题行数限制（line clamp）/ 省略号出没
元信息（浏览/评论/参与人数）的位置、灰度、Icon 尺寸
标签/话题 # 的颜色、位置、是否加描边或底色
-
字体与排版
主/副文字的字号、字重（600 vs 500）、行高与段间距
左右对齐、网格对齐是否有 1--2px 的偏差
数字/单位对齐（尤其统计数据）
-
颜色 / 对比
主色是否轻微偏移（H/S/B 变化），中性色等级（灰 600/700）
背景分区对比是否一致（白 / 浅灰）、分割线/投影强度是否统一
暗黑模式适配（若有）色值是否一致
-
CTA / 转化线索
主 CTA 的显著性（大小/对比/文案动词强度）
二级 CTA（"了解更多 / 加入讨论"）是否存在或位置变化
引导性微文案（空态提示、首登指引、滚动提示）是否增减
-
交互可用性
轮播/横滑是否有手势暗示（渐隐/指示点）
骨架屏 / 占位符样式是否统一
Toast/Badge 的位置与层级是否改动
-
底部 Tab Bar
Tab 个数、顺序、激活态颜色/粗细
文案是否显示/隐藏、与 Safe Area 关系
-
Brand 一致性
插画/图标语系是否混用（线性 vs 扁平 vs 拟物）
统一的圆角系统（8/12/16）与阴影高度 Token是否一致
总结结论
**三张都看到了（11.png / 33.png / 44.png）。它们的版式整体一致，只在若干"微调点"上有差异。按你给的 10 个检查维度，我把可见差异与优劣判断逐项列出来，并给出最终选择。
总结结论
更好的一版：11.png（小幅领先）
层级最稳定，公告条---双 Banner---快捷入口三段的视觉节奏最均衡；
CTA 对比与品牌灰阶关系最稳，整体最"耐看"；
33.png：第二名
与 11.png 基本一致，但在 Banner 与角标的对比更强，更"跳"更促转化；
44.png：第三名
快捷入口与信息卡片出现多处样式偏差（灰度/描边/间距），一致性略弱。
11 与 33 的中部区（快捷入口与首条 Feed）几乎一致；44在这些区域与前两者差异最大。**
逐项微差异对比
- Header / 顶部栏
状态栏：三者一致（时间/信号/电量布局一致）。 右上角"首页"图标：三者形态略有差别，11/33 的对比更清晰；
44的紫底更"重"，与公告条竞争注意力。
公告条：三者文案一致；
11/33 的图标与文案基线对齐更自然，44的图标饱和度更高、看上去更抢眼但略显"跳"。
👉 判定：11≈33 优于 44（一致性与对比更平衡）
- Hero / Banner 区（双卡）
Banner 构图：主体一致；33 左侧 Banner 的CTA 与底边描边更实，对比最强；11 次之；44 的 CTA 边界与阴影最弱。
角标/标签：三者都有；33 的"#话题# 群聊"色块更醒目（橙底饱和度微高），44 最弱。
👉 判定：33 ＞ 11 ＞ 44（33 的转化信号更强）
- 快捷入口 / 功能栈（4 个圆角胶囊）
数量/顺序：一致。
样式一致性：11/33 完全一致（填充、描边、阴影、内外距一致）；44 的绿胶囊（#TOP）描边/发光与其他三个不完全一致，整排看轻微破版。
点击面积：三者均满足。
👉 判定：11=33 ＞ 44
- Feed 卡片（首条）
内边距与行距：11/33 一致；44 的元信息（头像圆点+小贴纸）样式与灰度有变化，看起来更淡，与正文的层级对比略不足。
话题标签：44 的标签底色/描边略不同，识别度稍弱。
👉 判定：11=33 ＞ 44
- 字体与排版
标题/副文：11/33 的副文灰度与字重一致；44 的副文灰度略浅，在浅底上可读性略降。
网格/对齐：11/33 更稳定；44 某些元素（如角标、元信息）相对参考线略有 1--2px 偏差感（视觉观感上）。
👉 判定：11=33 ＞ 44
- 颜色 / 对比
品牌主色与中性灰：11/33 最接近同一套 Token；44 的绿色与蓝色饱和度更"发光"，与品牌灰阶关系稍"跳"。
分区背景/投影：11/33 一致；44 的投影与描边在个别组件上不完全一致。
👉 判定：11=33 ＞ 44
- CTA / 转化线索
主 CTA（Banner 上）：33 最突出（按钮外形与对比更强），11 次之，44 最弱。
二级 CTA（引导语/讨论入口）：三者相当。
👉 判定：33 ＞ 11 ＞ 44
- 交互可用性
轮播/滚动提示、点击区、空态提示均一致；无明显改动。
👉 判定：三者≈一致
- 底部 Tab Bar
完全一致（Icon、激活态、Safe Area 处理一致）。
👉 判定：三者一致
- Brand 一致性
11/33 更统一（图标语系、圆角与阴影高度 Token 更稳定）；
44 出现少量"发光/描边"不一致，品牌调性略不如前两者统一。
👉 判定：11=33 ＞ 44
结论 & 推荐
第一名：11.png（综合最稳）
适合"长期主版"与大部分场景；
第二名：33.png（促转化版）
如果你做应用商店截图或活动期，33 的 CTA 强度更合适；
第三名：44.png
建议回收其"发光/描边"做法，使其与其余组件 token 对齐。
可落地的微调建议（把最好的一版再优化 10%） 采用 11.png 的整体框架 + 33.png 的 Banner CTA 强度（把 33的橙色 CTA 与角标样式迁移到 11）。
统一快捷入口四枚胶囊的描边/阴影参数，锁定一个 token（比如：r=16、border=1、shadow=dp2）。
Feed 元信息（"24 人在讨论"）统一灰度为灰 700，保证弱光场景可读性。
UI Token 差异表模板
A. 加权总分 & 排名
-
标准权重（信息30 / 视觉25 / 品牌15 / 可用性15 / 转化10 / 记忆5）
排名：11.png ＞ 33.png ＞ 44.png
11.png：信息、视觉、品牌、可用性全面领先，转化略低于 33.png
33.png：CTA 更强，转化项更高，但整体秩序略逊于 11.png
44.png：快捷入口与 Feed 灰度/描边不一致，拉低整体一致性与可读性
-
应用商店优先（把转化提到 20%，视觉降到 20%，品牌降到 10%）
排名仍为：11.png ＞ 33.png ＞ 44.png（33 与 11 差距缩小）
解释：即便提高转化权重，11.png 在信息/视觉/可用性上仍有稳定的领先优势；33.png 适合"促转化场景"，可做活动期或商店截图版本。
B. 维度打分（1--7，供你回查）
11.png：信息6｜视觉6｜品牌6｜可用性6｜转化5｜记忆4
33.png：信息5｜视觉5｜品牌6｜可用性5｜转化6｜记忆4
44.png：信息5｜视觉4｜品牌5｜可用性5｜转化4｜记忆3
雷达图展示了三者在 6 维上的轮廓，便于你在汇报中直接截图使用。
C. 选择建议（怎么落地更强）
主版用 11.png（稳定、耐看、风险低）。
把 33.png 的 CTA 强度迁移到 11.png（保留 11 的秩序与灰度，引用 33的橙色 CTA/角标对比）。
回收 44.png 的"发光/描边"做法，统一到同一份阴影/描边 token。
D. UI Token 合并建议（模板已给）
在 ui_token_diff_template.csv 里我预置了字段，你们只需填入规范值即可。参考建议：
color.brand.primary：紫色主色保持 11/33 的 Hue/Sat，不要用 44 的更高饱和版本
color.accent.orange：沿用 33 的 CTA 强度
color.accent.green：话题 #TOP 胶囊去发光，统一border=1
radius.card / radius.pill：统一到同一半径（例如 16）
elevation.card /elevation.pill：锁定 1--2 个 dp 等级，Feed 与胶囊不要混用
typography.body.color：用11/33 的灰700；避免 44 的偏浅灰