专业的短链接生成工具
链接域名
短网址有效期
五大模块，解析产品设计中的视觉走查
更新时间：2025-6-4 15:16:41 作者：爱短链
视觉走查一般分为五个模块：形、色、字、构、质，本文还将结合这些要点讲述视觉走查的注意事项。
设计评审失败？经常让你改稿？ 当我们每天做设计时，我们经常不由自主地应用过去的经验，沉浸在自己的小世界里，导致方案过于主观或理想化，与目标不一致。
这将导致评估失败和效果不完善，因此我们需要按照一定的规则进行自检。
设计走查 我们都去医院体检了，前台会给我们一张体检表，我们会根据体检表上的项目逐一检查，记录结果，最后总结。
设计检查类似于对方案进行体检，根据一定的设计标准和规则从头到尾发现和总结设计方案的问题，便于修改和迭代。
如何进行设计走查？ 确定角色 设计检查作为设计方案的检查方法，也需要有一个体检表来确定检查项目。
一般来说，设计检查分为交互检查和视觉检查。
本文介绍了视觉检查方法，将在以下文章中介绍。
视觉走查一般分为五个模块：形、色、字、构、质。
制定设计标准 体检表各项目确定后，如何知道该项目是否达标？ 因此，我们需要有一定的标准来确定项目的标准，如果符合标准，则通过，如果不符合标准，则需要调整。
(1)视觉走查-形状 1. 图片 因为图片一般都是留坑上传操作，UGC类APP图片是用户上传的，所以要保证图片的尺寸和比例合理统一。
比如都是商品图坑，应该是1:1。
具体商品地图的比例需要根据实际情况确定，如黄蜂巢等旅游策略，用户通常是手机照片上传，所以比例大多是4：3或1.382:1；像电商一样APP，商品主图一般为方图。
下图为常用图片比例及比例： 2. 标签 标签大致可分为纯文本标签、线框标签、浅色标签、纯色/渐变标签，检查需要注意标签使用是否统一，如促销、卖点等标签一般较多，所以可以使用线框标签，自营、旗舰店等官方属性反映思维水平较高，频率可能较少，因此使用纯色/渐变标签。
在这种情况下，有必要确定颜色是否统一。
3. 按钮 按钮按级别从低到高大致可分为文字按钮、线框按钮、浅色按钮、纯色/渐变按钮。
我们还需要注意按钮是否统一标准化。
例如，取消按钮的统一是线框按钮，而你突然变成纯色/渐变按钮肯定是不合理的。
(2)视觉走查-色彩 1. 层级合理 在上述模块中，一眼就能看出价格水平是最高的，其次是上面的标题，最低的是中间的小字。
不同的颜色代表不同的层次，页面中的层次要清晰合理，颜色越不显眼，层次越低。
什么颜色不显眼：根据背景色，下图，text与背景色相似，不易区分，不显眼，层次低；text2与背景色有一定差异，易于区分，所以显眼，层次高。
2. 统一规范 顾名思义，统一规范应统一颜色使用。
例如，在下图中，如果蓝色被用作文本链接，那么在正常情况下，所有的文本链接都应该是蓝色的。
当然，如果蓝色识别度不高，则需要适当调整。
3. 数量适中 太多的颜色会让人眼花缭乱，所以你需要控制颜色的数量。
一般来说，除黑、白、灰外，页面中的颜色不应超过3种，这需要根据页面的复杂性来确定，但如果有多种颜色，你需要解释原因，并保持所有页面颜色的统一使用。
(3)视觉走查-字字 1. 层级合理 不同的字体大小和重量代表不同的层次。
众所周知，字体大小越大，字体重量越重，层次越高，因此需要合理使用。
例如，下图中的辅助小字选择Semibold，但使用主题Light，明显不合理。
2. 行高舒适 单行文本的行高一般与字体大小相同，而多行文本的行高一般是字体大小的1.618倍（取整、取偶）。
行高过高，页面内容过分散，不利于阅读。
行高太低，内容太紧凑，不利于阅读。
.618为黄金比例，间距适中，阅读方便。
3. 数量适中 除了字体大小和字体重量外，还可能有多种字体。
页面中的字体数量一般不超过两种，一种是传统文本字体（一般是系统字体），另一种是数字字体。
由于很多，字体包很大，不建议嵌入第三方汉字字体包。
数字字体通常去除多余的英文字体和符号，以简化字体包。
(4)视觉走查-构造 页面结构主要分为两部分：层次和间距： 1. 层级合理 不同的模块和内容有不同的层次，不同的页面有不同的目的。
合理的层次意味着页面的层次排列合理。
那么如何理解呢？让我们来看看下图： 这是一些商品信息，显示在商品列表页面上。
在这个页面上，我们希望快速击中用户偏好的商品，让用户进入商品详细信息页面完成转换。
商品信息包括商品地图、价格、卖点和商品名称，那么如何优先安排呢？ 商品地图是最直观、最吸引用户的地方，所以商品地图的优先级必须是最高的，然后我们需要确定哪个优先级是卖点和标题？用户什么时候需要阅读文本？ 当然，当图片无法识别，用户无法确定这是什么商品时，在这种情况下，我们必须做的第一件事就是帮助用户识别商品，然后是显示卖点。
如果我们不能识别商品是什么，显示卖点的意义是什么？ 还有一个价格。
用户在什么情况下看价格？ 当然，在我们知道这个商品之后，我们会去看价格，所以我们优先考虑：商品地图
设计评审失败？经常让你改稿？ 当我们每天做设计时，我们经常不由自主地应用过去的经验，沉浸在自己的小世界里，导致方案过于主观或理想化，与目标不一致。
这将导致评估失败和效果不完善，因此我们需要按照一定的规则进行自检。
设计走查 我们都去医院体检了，前台会给我们一张体检表，我们会根据体检表上的项目逐一检查，记录结果，最后总结。
设计检查类似于对方案进行体检，根据一定的设计标准和规则从头到尾发现和总结设计方案的问题，便于修改和迭代。
如何进行设计走查？ 确定角色 设计检查作为设计方案的检查方法，也需要有一个体检表来确定检查项目。
一般来说，设计检查分为交互检查和视觉检查。
本文介绍了视觉检查方法，将在以下文章中介绍。
视觉走查一般分为五个模块：形、色、字、构、质。
制定设计标准 体检表各项目确定后，如何知道该项目是否达标？ 因此，我们需要有一定的标准来确定项目的标准，如果符合标准，则通过，如果不符合标准，则需要调整。
(1)视觉走查-形状 1. 图片 因为图片一般都是留坑上传操作，UGC类APP图片是用户上传的，所以要保证图片的尺寸和比例合理统一。
比如都是商品图坑，应该是1:1。
具体商品地图的比例需要根据实际情况确定，如黄蜂巢等旅游策略，用户通常是手机照片上传，所以比例大多是4：3或1.382:1；像电商一样APP，商品主图一般为方图。
下图为常用图片比例及比例： 2. 标签 标签大致可分为纯文本标签、线框标签、浅色标签、纯色/渐变标签，检查需要注意标签使用是否统一，如促销、卖点等标签一般较多，所以可以使用线框标签，自营、旗舰店等官方属性反映思维水平较高，频率可能较少，因此使用纯色/渐变标签。
在这种情况下，有必要确定颜色是否统一。
3. 按钮 按钮按级别从低到高大致可分为文字按钮、线框按钮、浅色按钮、纯色/渐变按钮。
我们还需要注意按钮是否统一标准化。
例如，取消按钮的统一是线框按钮，而你突然变成纯色/渐变按钮肯定是不合理的。
(2)视觉走查-色彩 1. 层级合理 在上述模块中，一眼就能看出价格水平是最高的，其次是上面的标题，最低的是中间的小字。
不同的颜色代表不同的层次，页面中的层次要清晰合理，颜色越不显眼，层次越低。
什么颜色不显眼：根据背景色，下图，text与背景色相似，不易区分，不显眼，层次低；text2与背景色有一定差异，易于区分，所以显眼，层次高。
2. 统一规范 顾名思义，统一规范应统一颜色使用。
例如，在下图中，如果蓝色被用作文本链接，那么在正常情况下，所有的文本链接都应该是蓝色的。
当然，如果蓝色识别度不高，则需要适当调整。
3. 数量适中 太多的颜色会让人眼花缭乱，所以你需要控制颜色的数量。
一般来说，除黑、白、灰外，页面中的颜色不应超过3种，这需要根据页面的复杂性来确定，但如果有多种颜色，你需要解释原因，并保持所有页面颜色的统一使用。
(3)视觉走查-字字 1. 层级合理 不同的字体大小和重量代表不同的层次。
众所周知，字体大小越大，字体重量越重，层次越高，因此需要合理使用。
例如，下图中的辅助小字选择Semibold，但使用主题Light，明显不合理。
2. 行高舒适 单行文本的行高一般与字体大小相同，而多行文本的行高一般是字体大小的1.618倍（取整、取偶）。
行高过高，页面内容过分散，不利于阅读。
行高太低，内容太紧凑，不利于阅读。
.618为黄金比例，间距适中，阅读方便。
3. 数量适中 除了字体大小和字体重量外，还可能有多种字体。
页面中的字体数量一般不超过两种，一种是传统文本字体（一般是系统字体），另一种是数字字体。
由于很多，字体包很大，不建议嵌入第三方汉字字体包。
数字字体通常去除多余的英文字体和符号，以简化字体包。
(4)视觉走查-构造 页面结构主要分为两部分：层次和间距： 1. 层级合理 不同的模块和内容有不同的层次，不同的页面有不同的目的。
合理的层次意味着页面的层次排列合理。
那么如何理解呢？让我们来看看下图： 这是一些商品信息，显示在商品列表页面上。
在这个页面上，我们希望快速击中用户偏好的商品，让用户进入商品详细信息页面完成转换。
商品信息包括商品地图、价格、卖点和商品名称，那么如何优先安排呢？ 商品地图是最直观、最吸引用户的地方，所以商品地图的优先级必须是最高的，然后我们需要确定哪个优先级是卖点和标题？用户什么时候需要阅读文本？ 当然，当图片无法识别，用户无法确定这是什么商品时，在这种情况下，我们必须做的第一件事就是帮助用户识别商品，然后是显示卖点。
如果我们不能识别商品是什么，显示卖点的意义是什么？ 还有一个价格。
用户在什么情况下看价格？ 当然，在我们知道这个商品之后，我们会去看价格，所以我们优先考虑：商品地图
