你有没有按照图中指引的顺序阅读文本？
大部分用户和你一样，首先注意到黑色加粗的文字，然后往下阅读两行，最后才意识到顶部还有一句话。这是根据用户的浏览习惯，设计出预想的效果。如何将相关原理应用到商务网站中，是一个重要的问题。
我们使用A+ Group公司（主要业务为零部件批发）的两代网站对比，帮助你感受视觉层次的重要性。观察以下旧与新两种首页排版，哪一种从视觉上阅读起来更轻松？
抛开设计风格不说，图1的信息层级过于混乱，信息冗杂，拉不开层次。这样容易让用户感到疲惫，抓不到重点。在改版的图2中，白色加粗文本为第一层级，这是该网站想表达的核心内容。下方显眼的红色按钮，引导用户进入条目内页。页面设计干净清晰，文本层级明确，用户知道第一眼该往哪里看，知道哪里才是重点。
优秀的视觉层次带来的核心利益就是效率。提高用户的浏览使用效率，增强用户体验感。随着现代互联网和社交媒体的发展，这一点将会日益重要。
好的网页视觉层次应该怎么做？
01
内容优先级排序
这一点听起来很简单，但恰巧是决定用户体验感的关键一步。大部分用户没有时间通读所有内容，如果你在他们眼前放一堵文字墙，他们就会绕道走。所以设计者需要对信息进行优先级排序和分类，将其按照视觉浏览顺序进行排版。
第一层级：核心内容标题，让用户快速理解这一版面在提供什么信息。如用户痛点、产品卖点、主题活动等。
第二层级：普通标题和子标题，帮助用户快速扫视阅读，补充重要内容。如产品功能、优惠力度、限制条件等。
第三层级：正文及详情，通常需要使用非衬线字体，确保内容的可读性。在必要的情况下适当加粗文字或改变字色，突出段落的关键词。
02
字重及字号
如上图示例，第一层级的字重宜使用Bold（大多数情况下）或Light（如文化行业），其字号往往是最大的，为第二层级字号的2-4倍，随着级数的增加，字号也越来越小。注意网页的字号最小为12pt，否则影响阅读。字号越大，字间距反而要缩小，以增强文本的连贯性和可读性。
另外，加强不同层级的文本字重的对比，可以引导用户的视线走向。一般用户的浏览习惯是从左到右，从上到下，从大到小，从粗到细。
03
亲密性
所谓亲密性，就是将物理视觉上靠近的东西视作相关，帮助用户快速理解内容层级。当设计的亲密性出错时，就会加大用户对信息分类理解的时间成本。我们发现很多公司网站上也存在这样的问题。
比如上图中，“面议”和“议价”在内容上是相关的，二者中间却有大面积的空白，导致二者的关联性降低，容易导致用户对网站产生怀疑。另外，该页面中产品之间的间距较小，容易引起视觉疲惫或引发混淆，产生不良的用户体验。
04
配色
色彩能将条目作出分类。不需要强烈对比的配色，只用稍稍改变产品背景卡的灰度，加大条目的边界感，就能让用户轻松地浏览。这样增强视觉层次和用户可操作性。配色的目的是忠于品牌风格，服务于用户的浏览体验感。
另外，以对比度较强的配色进行内容凸显是比较常用的手法。色彩也包含着不同的性格和隐喻，以恰当的色彩区分不同主题，也是一种低成本的处理方式。这种情况下强调的不是内容的平行关系，而是突出差异性。
清晰的视觉层级，建立在清晰的内容结构之上，而好的内容结构建立在对市场和用户的充分理解之上。这是网站或广告内容成功的关键之处。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
