在一款 APP 中，首页是用户接触最频繁的界面，也是设计决策密度最高的页面。设计师需要同时处理导航、功能入口、内容推荐、运营活动等多种信息，在有限的屏幕空间里建立起清晰的优先级，让用户打开 APP 后几秒内就能找到自己要做的事。设计师用来建立这个优先级的工具，就是视觉层级。

在我做过的首页设计评审里，视觉层级出问题最多。在实际项目中，业务压力、审美惯性和需求叠加会不断打乱原本清晰的层级，最终让一张首页变得什么都有、什么都不突出。

什么是视觉层级

用户打开一个页面时，不会像读书那样从左上角开始逐行扫描，也不会把页面上所有元素看完之后再决定先操作哪一个。人的视觉系统会在几百毫秒内完成第一次扫视，注意力自动落在视觉权重最高的元素上，然后沿着权重从高到低的顺序往下走。这个过程是无意识的，用户不需要刻意判断"哪个更重要"，视觉权重替他们做了这个判断。

视觉权重由五个因素决定：大小、颜色、对比度、位置和间距。一个元素在这五个因素上的得分越高，就越容易被用户优先注意到。设计师的工作，就是通过调节这五个因素，在页面上建立起一个从主到次、从重到轻的注意力路径。用户的视线沿着这条路径走，先看到最重要的信息，再看到次要的信息，最后才是辅助性的内容。

视觉层级做对了，用户会觉得这个页面"很清楚"。视觉层级出了问题，用户的感受是"乱"，或者"不知道该干什么"。用户觉得"清楚"还是"乱"，往往不取决于页面上元素多还是少，而取决于元素之间的视觉权重有没有拉开足够的差异。

下面五个错误，覆盖了首页视觉层级问题里最高频的五种情况。

错误一：所有功能入口的视觉权重相同

打开很多 APP 的首页，会看到一种典型的布局。功能图标排成整齐的网格，三列或四列，每个图标大小一样，颜色风格一致，图标下方有文字标注，行与行之间间距均等。整张页面对称、工整，视觉上很给人一种很"稳重"的感觉。

这种布局看起来确实整洁，但问题在于它没有帮用户做判断。当所有入口在视觉上看起来同等重要时，用户的注意力往往没有落脚点。他们不得不从第一个图标开始逐个扫视，才能找到自己想要的那个入口。对于熟悉这款 APP 的老用户，长期使用后已经记住了位置，影响不大。但对新用户，或者不经常使用某个功能、需要临时找入口的用户，这种布局会迫使他们在首页上花费不必要的时间。

设计师做出这种布局，通常出于两种原因。第一个是审美驱动。整齐的网格有一种天然的秩序感，设计师会本能地认为"对齐、均等、规律"就意味着"设计得好"。这个判断在排版层面是对的，但在信息层级层面是错的，因为均等的排版恰恰取消了信息之间的优先级差异。第二个原因来自业务方的压力。每个功能团队都认为自己的入口应该和其他入口平等，没有人愿意让某个功能比别人更显眼。设计师在多方博弈中缺少区分优先级的依据，于是把所有入口做成一样大，用均等来回避优先级判断。

解决这个问题的方向不是把所有图标做得更大，而是做出差异。设计师需要先想清楚，这个首页上最希望用户做的一件事是什么。确定了答案之后，把对应的入口在视觉上放大或加重，让它从其他入口里跳出来。次级功能保持正常大小，不常用但需要保留在首页的功能可以适当缩小或降低对比度。

具体做法有很多。可以给主操作的图标做得更大，用品牌色，而其他图标用灰色或浅色。可以把主操作单独放在一个卡片容器里，和下方的网格在视觉上形成层级区隔。也可以给主操作加上一行文字描述，让它占据更多的视觉面积，而其他功能只保留图标和标注。具体选哪种方式取决于产品的视觉风格，但方向是一致的，就是让最重要的那个入口在视觉上明显突出于其他入口。

这里有一个容易被忽略的认知误区。有些设计师会说"我们的首页没有一个明确的最重要功能，几个核心功能同等重要"。这个说法在业务角度可能成立，但在视觉层级角度不成立。即使四个功能在业务上同等重要，它们在首页上也不能拥有完全相同的视觉权重，因为用户的注意力是线性的，同一时刻只能落在一个地方。设计师需要做的是建立一个扫视的顺序，让用户先看到第一个、再看到第二个，而不是四个同时争抢注意力。

错误二：只用图标，不加文字标注

入口之间的视觉权重拉开之后，还有一个条件决定用户能不能快速操作：每个入口本身是否容易识别。很多首页的功能图标没有文字标注，设计师觉得图标本身已经能表达含义，购物车、放大镜这些通用图标确实如此，去掉文字之后页面也更简洁。

这个判断在少数非常通用的图标上成立。购物车、搜索、首页、返回，这几个图标经过多年的行业使用，已经形成了稳固的认知惯例，大多数用户确实不需要文字就能识别。但首页上的功能入口远不止这几个通用图标。生活服务类 APP 的首页可能有"家政""维修""搬家""保洁"，电商类 APP 可能有"百亿补贴""限时秒杀""品牌闪购""新人专区"。这些功能对应的图标没有行业统一的视觉惯例，不同的设计师会画出完全不同的图形来表达同一个功能。

用户面对一个没有文字标注的非通用图标时，做的事情不是"认出"含义，而是"猜测"含义。猜测需要消耗认知资源，而且猜测经常是错的。用户猜错之后，需要点进入口确认，发现不对再退回来，重新猜另一个图标。几次这样的经历之后，用户对这款 APP 的操作信心会明显下降。

图标含义在不同产品之间并不统一，这让猜测的成本进一步升高。"星形"图标在一些 APP 里代表收藏，在另一些里代表评分，在还有一些里代表会员等级。"人形"图标可能是个人中心，也可能是通讯录，也可能是联系客服。设计师每天和自己产品的图标打交道，已经对每个图标代表什么形成了条件反射，但用户没有这层经验积累。设计师觉得"一看就懂"的图标，用户可能需要三秒钟才能猜出来，而三秒钟在移动端的交互节奏里已经很长了。

文字标注的作用不是解释用户已经知道的事情，而是消除用户需要猜测的部分。图标加文字的组合，识别速度远快于单独的图标，因为用户不需要调用任何图标解读经验，直接读文字就能确认这个入口是什么。文字把识别过程从"猜测—验证"变成了"直接确认"，认知负担大幅降低。

有设计师会担心文字标注让页面显得拥挤。这个担心是合理的，但解决方法不是去掉文字，而是给文字设置合适的视觉层级。标注文字通常用 10px 到 12px 的字号，颜色比图标浅一个层级，让它作为辅助信息存在，而不是和图标争视觉权重。文字在这个层级上不会让页面变拥挤，但会让每个入口的识别效率大幅提升。

错误三：首屏没有一个明确的主操作

前两个错误分别发生在入口的权重分配和入口的可识别性上。第三个错误发生在更宏观的层面。用户打开首页，扫视首屏之后，感受不到"这个页面最想让我做什么"。

用户打开 APP 后的前两三秒，视线不会往下滑，停留在首屏范围内。这几秒是用户建立第一印象、决定下一步操作的窗口。如果首屏里所有模块的视觉权重相当，没有一个位置在明确地说"从这里开始"，用户在这几秒里感受到的就是"什么都有，但我不知道该先做什么"。

设计师自己很难察觉这个问题，因为设计师对产品的功能结构非常熟悉，他们打开首页时已经知道每个入口通往哪里、哪个是核心功能。这些知识让设计师很难还原用户的真实感受。用户没有这些背景知识，他们面对的是一个陌生的界面，需要从视觉信号里判断"我应该先看哪里"。

首屏缺少主操作，原因通常有两个。第一个原因是产品定位模糊。如果一款 APP 同时要服务很多不同类型的用户，不同用户有不同的核心任务，而产品团队没有做出优先级决策，首页就会变成一个"陈列室"，把所有功能平铺展示，不做取舍。这种首页对每个用户都勉强可用，但对任何一个用户都不够高效。

第二个原因是内部博弈的结果。多个业务线都想要首屏的黄金位置，没有人愿意让步。设计师在这个博弈中没有足够的决策权，最终做出的选择往往是把所有业务线都放在首屏，但谁都不突出。这个方案对业务方看起来公平，对用户来说就是没有导引。

主操作应该是什么，需要产品团队来回答。但设计师可以主动向产品团队提一个问题，就是如果用户打开这款 APP 只做一件事，最可能做的是什么。确定了答案之后，把对应的入口放在首屏视觉权重最高的位置，让它不需要寻找就能被看到。

突出主操作有几种常用的方式。位置上，把主操作放在首屏的视觉中心或上半部分，不被其他元素挤压。大小上，主操作的按钮或卡片比周围元素明显更大，点击区域宽裕。颜色上，用品牌主色或高对比色给主操作上色，周围元素用中性色，让主操作在首屏里形成视觉焦点。

有一个验证方法。把首页截图发给一个从来没用过这款 APP 的人，让他在三秒内说出"这个页面最想让你做什么"。如果他说不出来，或者说的和产品团队预期的不一致，首屏的主操作就不够清晰。

错误四：字号层级混乱

字号是建立视觉层级最基础的工具之一。通过字号的大小差异，设计师可以让用户在不逐字阅读的情况下，快速判断哪些是主要信息、哪些是辅助信息。标题大、正文中、注释小，用户的视线会自然地按照字号从大到小的顺序扫视。

字号层级出问题，通常有两种表现。

第一种是字号种类太多。设计师在搭建首页时，每加一个新的文本元素就随手选一个字号，一张首页上最终出现了五六种甚至更多种字号，每种之间的差距都很小。用户扫视这样的页面时，字号差异不足以传递优先级信号，所有文字看起来都差不多重要。

第二种是字号层级设置了，但差距不够。标题用 16px，副标题用 15px，正文用 14px。这三个字号在设计稿上放大查看时能分辨出差异，但在手机屏幕的实际尺寸下，1px 的差距人眼几乎无法察觉。用户看到的是三行大小差不多的文字，字号层级形同虚设。

字号层级能被用户感知到，靠的是层级之间的差距足够大。设计首页的字号层级，通常三个档位就够用：主信息、次级信息、辅助信息。一个可以直接参考的范围是主信息 16px 到 18px，次级信息 13px 到 14px，辅助信息 11px 到 12px。三个档位之间要有明显的跳跃，而不是 1px、2px 的渐变递减。

字号层级在首页上容易被破坏，是因为首页的内容不是一次性设计完的。一个模块最初只有标题和功能入口，字号层级清晰。后来运营需要加促销文案，产品需要加角标提示，再后来又加了副标题和描述文字。每次新增一个文本元素，设计师都是单独决定字号，没有回到整张页面的层面重新审视字号体系。几轮需求叠加之后，一个原本层级清晰的模块里就会出现六七种字号，层级已经乱了。但每次只加了一个元素，单次变化很小，设计师很难从视觉上察觉到整体层级在退化。

遇到这种情况，最有效的做法是退出局部视角，把整张首页上所有的文本元素列出来，按信息重要性排序，然后统一映射到三个字号档位里。最重要的用大号，次级的用中号，辅助的用小号。在这个过程中，经常会发现一些"随手加进来"的文本其实并不需要在首页出现，或者可以和相邻的文本合并。

除了事后整理，还可以从源头预防这个问题。在设计系统或组件库里预先定义好首页使用的字号档位，把每个档位固定下来，后续所有新增的文本元素必须从已定义的档位里选择，不允许自定义字号。这个约束能从机制上防止字号层级在需求叠加中被逐步打乱。

错误五：颜色用得太多

字号控制的是用户对信息优先级的感知，颜色控制的是用户对信息类别和状态的感知。一个按钮用品牌色，用户知道它可以点击。一个标签用红色，用户知道这里需要注意。一个图标用灰色，用户知道它当前不可用。当页面上的颜色种类足够少时，每种颜色都能建立起明确的含义关联。当颜色种类多到一定程度时，颜色不再传递信息，它变成了视觉噪声，用户的眼睛不知道该把注意力放在哪个颜色上。

首页颜色过多，最常见的原因是各业务模块各有一套主题色。电商模块用红色，健康模块用绿色，金融模块用蓝色，出行模块用橙色，全部放在同一个首页上。每个模块单独看配色是协调的，放在一起就像把几个不同设计师的作品拼接在了一张画布上。整个首页没有统一的色彩节奏，用户的视线被多个高饱和度色块同时吸引，分不清哪个颜色代表"这里需要你注意"，哪个颜色只是装饰。

设计师在这种情况下很难要求每个业务模块放弃自己的主题色，因为这些颜色往往已经成为各业务线的品牌标识，改动会遭到强烈抵制。但设计师可以控制这些颜色在首页上出现的方式和面积。

可以从颜色面积入手。每个模块保留自己的主题色，但主题色只用在小面积区域，比如图标本身、按钮、角标。卡片背景、分割线、模块底色统一用低饱和度的中性色。这样每个模块的主题色都保留了，但在视觉上被中性色压住，不会同时争抢用户的注意力。

颜色失控还有另一个常见的触发场景，就是运营活动。一个节日活动上线，运营团队希望首页有节日氛围，于是给多个模块加上红色、金色、绿色的装饰元素。活动结束后，下一个活动又来了，换一套新的配色。如果没有规范约束，首页的颜色体系会在一次次活动中被反复改写，最终变成没有体系的拼凑。

解决这个问题需要在设计规范里明确几件事：首页日常状态下允许使用的颜色有哪几种，活动期间可以叠加的装饰色上限是多少，哪些区域在任何情况下都不能被活动颜色覆盖。

评审首页配色时可以做一个测试：把首页截图转成灰度图。如果灰度图里层级完全消失、主操作也看不出来了，说明页面的视觉层级过度依赖颜色，大小、位置和间距没有承担起应有的区分作用。

五个错误背后的同一个问题

这五个错误覆盖面不同，但根源是同一个。设计师在搭建页面时，是从元素出发的，而不是从用户的扫视行为出发的。

从元素出发时，设计师想的是这个位置放图标、那个位置放文字、这一排要对齐、那一块要对称。每个决策解决的是"这个元素放在哪里、长什么样"的问题。从用户出发时，设计师想的是用户的视线第一秒会落在哪里、落下之后会往哪个方向移动、扫视三秒之后用户能不能建立起"我应该先做什么"的判断。每个决策解决的是"用户的注意力怎么走"的问题。

把这个思路落到日常工作里，可以用五个问题对照检查自己手上的首页。第一，首页上有没有一个入口在视觉上明显比其他入口突出？如果所有入口看起来一样大、一样重，用户的注意力就没有起点。第二，每个功能入口的图标下面有没有文字标注？去掉文字之后，一个没用过这款 APP 的人能不能在三秒内认出每个图标的含义。第三，首屏里有没有一个明确的主操作？把首页截图发给一个陌生人，他能不能马上说出这个页面最想让他做什么。第四，整张首页上一共用了几种字号？如果超过三种，检查一下多出来的那几种是不是需求叠加时随手加进去的，能不能合并回三个档位。第五，把首页截图转成灰度图，层级还清晰吗？如果灰度图里看不出重点，说明视觉层级过度依赖颜色，大小和位置没有承担起区分作用。

五个问题不需要做用户研究，不需要专业工具，在工位上花十分钟就能过一遍。如果有两个以上答案是否定的，就先回到整张页面的层面重新梳理层级体系，再推进后续的设计工作。