跳转到主要内容
千问AI平台 home page
文档
AI Coding / 开发

界面体检 · 截图挑毛病与定位报错

把界面截图交给视觉理解模型，按四个维度逐项挑刺并打分；页面报错、图片加载不出来也可截图配代码一起定位。

免责声明：本页展示内容均为 AI 模型生成，仅供参考，不构成任何效果承诺；实际产出效果与 Credits 消耗以平台用量统计为准。
自己做的页面看久了就麻了，明明有问题也看不出来。把截图丢给模型，让它按配色 / 字体 / 层级 / 背景逐项挑刺并给评分——它对「整体观感不对」比人眼敏感；页面报错、图片加载不出来这类问题，也可以截图配代码一起给它定位。本篇拿一个「父母用药管家」页面的第一版和改版做体检。 调用链：qwen3.7-plus（视觉理解）→ 传入界面截图 + 四维度体检清单（配色 / 字体 / 层级 / 背景）→ 逐项判断 + 优先改进项 + 评分。

实测产出

对同一个「父母用药管家」页面的第一版与改版做体检，送审素材：

第一版（圆点网格底 + 深绿标题栏 + 多色时段条）

界面第一版

改版（单一强调色 + 纯色底）

界面改版

步骤：四维度界面体检

把界面截图连同下面的指令发给 qwen3.7-plus： 
你是一位 UI/UX 设计师。这是我做的一个「父母用药管家」网页应用的界面截图，请从美观度和可用性角度给我一份体检报告。

请按下面四个维度逐项检查，每项给出 [正常] / [需改进] / [有问题] 的判断，并指出具体位置：
1. 配色：整体用了几种颜色？是否克制统一？颜色的语义是否正确（例如预警色是否用在了该预警的地方）？
2. 字体与排版：字体是否统一？有没有该对齐没对齐、文字被挤断、折行难看的地方？
3. 视觉层级：进入页面第一眼看什么？主次是否分明？有没有多个元素抢注意力？
4. 背景与装饰：背景是否干净？有没有多余的纹理、装饰、渐变影响阅读？

最后给出：
- 整体评分（1-10 分）
- 按「影响面 × 修改成本」排序的前 3 个优先改进项
- 一句话总结这个界面给人的观感

请具体、直接，不要客套。

整体评分：6.5 / 10

优先改进项（按影响面 × 修改成本排序）与模型原话：

1. 去掉背景网格（修改成本极低，影响面极大）
   「页面使用了一个带有明显圆点网格（Dot Grid）的背景。这种背景通常用于设计
     草图或笔记类应用，用在一个面向中老年人的『用药管理』工具中显得非常不合
     时宜。它不仅让界面看起来不够专业、严肃，还增加了视觉噪点，干扰核心信息。」

2. 顶部黄色安全提示框过于抢眼
   「甚至比『今天服药 0/4』的进度还要显眼」——喧宾夺主。

3. 左侧时段条（橙/紫/蓝）
   「饱和度略高，显得有些刺眼」，与核心信息争夺注意力。

它还指出：隐私说明小字「字号过小且颜色太浅」「对比度太低容易完全被忽略」。

一句话观感：像"设计草图"而非"给中老年人用的正经工具"。

说明

  • 消耗：本玩法涉及视觉理解（qwen3.7-plus）单图审查。截图本身会转成 image_tokens 计入输入、占输入侧绝大部分，文字提示词只占很小比例；截图越大越清晰、输入消耗越高，审 UI 用正常网页截图尺寸即可，不必上超大图。
  • 怎么用它的输出：拿它当挑错线索很好用——背景不合时宜、警告框抢戏、颜色刺眼这些"自己看久了会麻木"的问题，它一眼挑出来。
  • 但别当验收报告：实测它在"数颜色、认字体"这类需要精确清点的细节上会看走眼（比如把七八种颜色说成"5 种以内"、没看出用了衬线体），也可能误读界面里的数据含义。每条建议仍要自己回界面确认。
  • 更省事的做法：动手前就把配色、字体、层级要求写进提示词（见「父母用药管家」卡），能少很多返工。