在之前的文章中，对影响UX的5个要素做了整体介绍，其中一个要素就是视觉层级。没看过的朋友点这里可快速回看
帮你改善产品UX设计的实用要素
今天为大家深入分析UX中视觉层级的关键原则，探讨如何使用视觉层级来改进产品并优化用户体验。
自设计之初，我们已经使用它来传达重要的信息。设计中的每个元素都应有助于改善用户体验，并清楚传达该信息。视觉层级也是传达信息。如何组织、排序内容，让接受者能够尽可能轻易地理解信息。设计师可以利用视觉元素去区别信息的重要性，引导观看者阅读的顺序或焦点。视觉层级结构用于按设计者希望用户查看它们的顺序对设计元素进行排序。通过使用对比，比例，平衡等原则，帮助在正确的位置排布每个设计元素，并让最重要的元素脱颖而出。
视觉层级结构可以在信息架构中发挥关键作用，可以帮助用户更轻松地浏览产品，大大减少与产品互动所需的时间和精力。UX设计的目的是消除使用时的摩擦并提高产品的易用性，而关注视觉层级结构是实现这一目标的关键方法。让我们来分析其中的一些原则，看看它们如何影响内容的排布。
大多数界面（例如网站和应用程序）的设计都是二维平面的。通过运用透视，我们可以在元素中产生距离和分隔的错觉，以帮助将焦点集中到设计中重要的区域。要让用户产生透视的错觉，首先可以增加元素相对于周围元素的大小；这将使这些元素看起来更接近用户。将视差运动效果添加到元素中使它比周围元素移动得快或慢，或在背景或前景上添加模糊也可以产生显著效果。
从上面左侧的图中，能看出来所有元素看起来都是平坦的，没有深度。由于文字和背景粘连在一起，造成文字的可读性变差。而在右面的图中，将模糊添加到背景图像中，并为文字添加适当的阴影。这有助于为设计元素间增加一些距离，使信息更容易可视可读。在看火人的游戏首页中，多个图像层被设置成以不同的速度滚动，来提供视差效果，从而使观看者更好地理解游戏的深度内容。
其实每个人在观看内容的时候，都会有一个潜意识的观看模式。这种模式可能会因为用户正在查看的内容类型的不同而有所差异，但是可以说最受用户欢迎的两种浏览模式是Z型模式和F型模式。两种浏览模式都可以根据要设计的内容类型来达到独特的目的。这些浏览模式将页面的信息流动起来，帮助观者获得更好的体验。Z型视觉动线的设计最适合于文字信息不繁重的页面中。将内容设计成以这种模式的排布将帮助读者快速浏览每个元素，并清晰地知道每个元素的重要性。
在Apple的网站中，页面顶部有多个Mac的选项，所以我们首先会进行水平浏览，然后沿对角线方向看到标语，最后以目标产品的详细介绍作为结束。所有信息的布局都非常清晰明了，同时大多数人已经下意识地被这种浏览模式吸引。
F型视觉动线更多地使用在诸如文章和博客之类的文字比较密集的页面上。对于文章和资讯内容繁杂的网站，简单的F型布局可以有效地帮助读者扫描图像和标题。
以这种浏览模式进行设计布局时，尽管读者可能会扫描前几行的信息，但随着他们快速向下移动视线时，他们通常只会浏览最吸引其注意力的地方。
通过使用参考线和网格来布局设计，可以使所有元素保持整洁和对齐，从而不会破坏观者的浏览体验。他们的注意力知道要跟踪的位置，并且这些信息都是整齐的对齐和分组，所以每组元素都可以紧密关联。诸如黄金分割率之类的公式试图做到这一点；但是可以将重要元素从这些既定规则中分离出来，以增加其视觉层次。
在这个的示例中，网站为了保持整体界面的工整，使用网格的方式来排布信息，但是为了更加关注Mercedez的形象，图片忽略了网格布局，从而创建了一种弹出效果。
正确的字体可以让网站拥有自己的个性，并引起用户对某些领域的关注。具有不同大小和粗细的字体也可以用于增加层级结构，并使更重要的文本信息脱颖而出。大多数网站旨在利用不同大小的标题来强调与它们相关的内容。优良做法是将主标题用作页面的最大和最重要的标题，并使用副标题、小标题等来标注不太重要的内容。这也有助于读者浏览文本页面，以准确定位在他们感兴趣的区域。
Slack的网站就是一个很好的例子，该网站使用恰当的标题为内容赋予重要性。在标题部分，它们具有最大的主标题，其中包含介绍信息和号召性用语。横幅下方有许多带有较小标题的版块，以介绍更多功能。
在页面上对称出现的元素可以帮助平衡设计，使信息保持简单，有条理并易于遵循。Avioc利用其主页上的对称性将重点放在其主要优势上，同时在图像的两边提供更丰富的文字摘要。焦点直接位于中心，可以轻松浏览页面以查找信息，不会感到迷茫。
有时候除了标准的平衡，我们还可以在设计中打破平衡和对称性来传达某些信息的重要性，让我们的设计布局显得更加流畅和活泼。
调整大小是一项非常基本但至关重要的原则，这样可以使重点元素比其他元素更突出，有助于将观众的视线吸引到特定区域。通过增加重点元素的比例，可以吸引观看者的注意力。但是在设计过程中，需要注意的是不要放大太多元素，以免降低屏幕上其他元素的重要性。
Simply Chocolate就是一个很好的示例，用来说明如何使用比例的变化来强调视觉层级。在这个页面中，最先吸引我们视线的是放大的标题文字而不是底部的图片，这些文字解释了产品的全部含义。同时这样的方式不会影响屏幕上其他的元素。
颜色可以与元素大小的调整一起使用，提高设计中关键信息的重要性。通常，明亮的颜色比无色或不饱和的颜色更能吸引观众的注意力。
同样，具有较高对比度的颜色将显得更重，更接近观看者，从而赋予它们更多的重要性。在上面的示例中可以看到，较亮的颜色在较暗的背景下看起来更近，而在较亮的背景上则较远。
无论信息在界面中怎样排布，使用一种明亮的颜色作为焦点都可以帮助吸引注意力。在上面的网页以及大多数网站的导航中，我们都会注意到按钮上高对比度的颜色，这是最关键的操作暗示。通过为用户带来良好的操作导航提示，为他们提供更愉快的体验并增加所需流量的转化。记得互联网还很新的时代，每个弹出窗口或标注都必须眨眨眼才能引起用户的注意？这种做法确实引起了我们的注意，但是在此过程中，它牺牲了令人愉悦的体验，并给观者带来烦躁的感觉，这对参与度没有帮助。如今，我们可以更细微的方式使用这些相同的动效原理来引起注意或重视某些领域。以巧克力页面为例，说明它们如何结合微妙的动作来吸引注意力并提供提示，促使用户参与设计。
在滚动口味选择中时，颜色会更改以匹配产品。当把鼠标悬停在包装纸上时，它会打开一条缝隙，露出内部的巧克力，给用户的印象是可以将其打开以了解更多信息。
这里我们讨论了许多不同的UX设计原则和视觉层级结构的示例。它们现在可能都有意义，但是当需要将它们付诸实践并找出一种在所有设计中平衡所有这些原理的方法时，有时候页会更加令人困惑。视觉层级结构用于帮助将重点放在设计的某些元素上，但是认为“最重要”的元素越多，完善设计的难度就越大。从简单开始，专注于最重要的一件事，它可以帮助设计走向成功。原文:https://xd.adobe.com/ideas/process/information-architecture/visual-hierarchy-principles-examples/
作者：Caleb Kingston
我们致力于提供一个高质量内容的交流平台。为落实国家互联网信息办公室“依法管网、依法办网、依法上网”的要求，为完善跟帖评论自律管理，为了保护用户创造的内容、维护开放、真实、专业的平台氛围，我们团队将依据本公约中的条款对注册用户和发布在本平台的内容进行管理。平台鼓励用户创作、发布优质内容，同时也将采取必要措施管理违法、侵权或有其他不良影响的网络信息。
一、根据《网络信息内容生态治理规定》《中华人民共和国未成年人保护法》等法律法规，对以下违法、不良信息或存在危害的行为进行处理。
1. 违反法律法规的信息，主要表现为：
1)反对宪法所确定的基本原则；
2)危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一，损害国家荣誉和利益；
3)侮辱、滥用英烈形象，歪曲、丑化、亵渎、否定英雄烈士事迹和精神，以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉；
4)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动；
5)煽动民族仇恨、民族歧视，破坏民族团结；
6)破坏国家宗教政策，宣扬邪教和封建迷信；
7)散布谣言，扰乱社会秩序，破坏社会稳定；
8)宣扬淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪；
9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序；
10)侮辱或者诽谤他人，侵害他人名誉、隐私和其他合法权益；
11)通过网络以文字、图片、音视频等形式，对未成年人实施侮辱、诽谤、威胁或者恶意损害未成年人形象进行网络欺凌的；
12)危害未成年人身心健康的；
13)含有法律、行政法规禁止的其他内容；
2. 不友善：不尊重用户及其所贡献内容的信息或行为。主要表现为：
1)轻蔑：贬低、轻视他人及其劳动成果；
2)诽谤：捏造、散布虚假事实，损害他人名誉；
3)嘲讽：以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述，以此来激怒他人；
4)挑衅：以不友好的方式激怒他人，意图使对方对自己的言论作出回应，蓄意制造事端；
5)羞辱：贬低他人的能力、行为、生理或身份特征，让对方难堪；
6)谩骂：以不文明的语言对他人进行负面评价；
7)歧视：煽动人群歧视、地域歧视等，针对他人的民族、种族、宗教、性取向、性别、年龄、地域、生理特征等身份或者归类的攻击；
8)威胁：许诺以不良的后果来迫使他人服从自己的意志；
3. 发布垃圾广告信息：以推广曝光为目的，发布影响用户体验、扰乱本网站秩序的内容，或进行相关行为。主要表现为：
1)多次发布包含售卖产品、提供服务、宣传推广内容的垃圾广告。包括但不限于以下几种形式：
2)单个帐号多次发布包含垃圾广告的内容；
3)多个广告帐号互相配合发布、传播包含垃圾广告的内容；
4)多次发布包含欺骗性外链的内容，如未注明的淘宝客链接、跳转网站等，诱骗用户点击链接
5)发布大量包含推广链接、产品、品牌等内容获取搜索引擎中的不正当曝光；
6)购买或出售帐号之间虚假地互动，发布干扰网站秩序的推广内容及相关交易。
7)发布包含欺骗性的恶意营销内容，如通过伪造经历、冒充他人等方式进行恶意营销；
8)使用特殊符号、图片等方式规避垃圾广告内容审核的广告内容。
4. 色情低俗信息，主要表现为：
1)包含自己或他人性经验的细节描述或露骨的感受描述；
2)涉及色情段子、两性笑话的低俗内容；
3)配图、头图中包含庸俗或挑逗性图片的内容；
4)带有性暗示、性挑逗等易使人产生性联想；
5)展现血腥、惊悚、残忍等致人身心不适；
6)炒作绯闻、丑闻、劣迹等；
7)宣扬低俗、庸俗、媚俗内容。
5. 不实信息，主要表现为：
1)可能存在事实性错误或者造谣等内容；
2)存在事实夸大、伪造虚假经历等误导他人的内容；
3)伪造身份、冒充他人，通过头像、用户名等个人信息暗示自己具有特定身份，或与特定机构或个人存在关联。
6. 传播封建迷信，主要表现为：
1)找人算命、测字、占卜、解梦、化解厄运、使用迷信方式治病；
2)求推荐算命看相大师；
3)针对具体风水等问题进行求助或咨询；
4)问自己或他人的八字、六爻、星盘、手相、面相、五行缺失，包括通过占卜方法问婚姻、前程、运势，东西宠物丢了能不能找回、取名改名等；
7. 文章标题党，主要表现为：
1)以各种夸张、猎奇、不合常理的表现手法等行为来诱导用户；
2)内容与标题之间存在严重不实或者原意扭曲；
3)使用夸张标题，内容与标题严重不符的。
8.「饭圈」乱象行为，主要表现为：
1)诱导未成年人应援集资、高额消费、投票打榜
2)粉丝互撕谩骂、拉踩引战、造谣攻击、人肉搜索、侵犯隐私
3)鼓动「饭圈」粉丝攀比炫富、奢靡享乐等行为
4)以号召粉丝、雇用网络水军、「养号」形式刷量控评等行为
5)通过「蹭热点」、制造话题等形式干扰舆论，影响传播秩序
9. 其他危害行为或内容，主要表现为：
1)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好影响未成年人身心健康的；
2)不当评述自然灾害、重大事故等灾难的；
3)美化、粉饰侵略战争行为的；
4)法律、行政法规禁止，或可能对网络生态造成不良影响的其他内容。
二、违规处罚
本网站通过主动发现和接受用户举报两种方式收集违规行为信息。所有有意的降低内容质量、伤害平台氛围及欺凌未成年人或危害未成年人身心健康的行为都是不能容忍的。
当一个用户发布违规内容时，本网站将依据相关用户违规情节严重程度，对帐号进行禁言 1 天、7 天、15 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号，或者滥用多个帐号发布违规内容时，本网站将加重处罚。
三、申诉
随着平台管理经验的不断丰富，本网站出于维护本网站氛围和秩序的目的，将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议，可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)