ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

不懂设计怎么判断网站设计好坏:一份非设计师可用的检查清单

不懂设计怎么判断网站设计好坏:一份非设计师可用的检查清单

非设计背景的人评审网站方案,最容易陷入两种局面:要么被效果图说服,要么完全说不出问题。其实设计好坏有相当一部分是可核对的——不需要审美训练,只需要几张表和几个数值。这篇给一份不依赖设计背景的检查清单,全部条目都可以由甲乙双方当场验证。

一、先看有没有「表」,再看图

设计好的方案通常伴随两类文件:页面清单(栏目、页面类型、每类页面的目标动作)和设计规范(栅格、间距、字号层级、色彩角色、组件状态)。

如果对方只给效果图,判断可以到此为止——不是设计得不好,而是没有可维护的设计系统,第二期加页面必然走形。

二、四个可以当场量的数值

  1. 正文可读性:正文行宽控制在适合连续阅读的范围内,行高与字号成比例;拉到 1440px 与 1920px 两档看是否出现超长行。
  2. 层级是否唯一:一个页面里主标题层级是否唯一,标题层级有没有跳级(h1 直接跳 h3 这类)。
  3. 点击热区:移动端按钮与链接热区是否足够大,相邻可点元素是否有误触风险。
  4. 对比度:浅灰文字压在浅色底上是最常见的可用性缺陷,用对比度工具量一下就知道。

这四个数值不需要审美判断,任何人都能核。

三、三个必须走完整流程的验证

流程一:新用户三秒测试。打开首页,遮住 logo 只看三秒,说出「这家是做什么的、主要客户是谁、下一步该干什么」。说不出来,说明主视觉与信息的优先级有问题。

流程二:完成一次转化动作。用自己的手机走一遍留资或咨询流程,注意提示是否清楚、失败是否有反馈、提交后有没有人接到。

流程三:找一条低频路径。比如从列表页翻到详情页再返回、空状态下的页面、报错状态下的提示。这些页面最能暴露设计深度,也是最容易被跳过的地方。

四、需要看代码/配置才能核的三件事

  1. 语义化结构:标题层级、列表与表格是否用语义标签,这既关系到可读性也关系到机器理解;
  2. 结构化数据:企业主体、站点全域、面包屑导航等 Schema 是否落地并在上线前校验——这是收录与 AI 识别的地基,不等于曝光或推荐,但没有它机器更难读懂你;
  3. 资源与性能:首屏关键内容渲染、图片是否压缩并使用现代格式、字体加载策略是否造成文本延迟渲染。

五、把清单变成验收单

上面四段可以合并成一页验收单:可量化的四条(行宽、层级、热区、对比度)、必须走流程的三条(三秒测试、转化动作、低频路径)、需要看配置的三条(语义化、Schema、性能)。

把验收单写进合同附件,评审就不再依赖「我觉得好看」,而是变成逐项打勾。双方都省力。

RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进