视觉层次结构对于有效的ui视觉设计组合至关重要。让我们看看帮助设计师在Web和移动布局上构造和组织UI元素的这9大提示。
充足的视觉层次结构是成功的数字产品的基础它有助于以有效的方式组织UI元素，以便内容易于理解和令人愉快。如果组件被合理地组织起来，用户可以毫不费力地浏览产品并与产品交互并享受该过程。
那么，是什么构成了强大的视觉层次结构呢?当然，不同类型的产品需要不同的构建方法，但是仍然有一些常见的解决方案有助于ui视觉设计的组织。今天的文章提供了为Web和移动产品创建引人注目的可视层次结构的有用提示。
牢记业务目标
数字产品背后往往有业务目标。为了实现它们，创意团队需要找出哪些UI元素更重要，并根据它们的角色对它们进行优先级排序。例如，电子商务网站上的所有元素都执行不同级别的任务。商品图片通常是吸引眼球的主要因素，因为它们必须鼓励顾客考虑它。图片后面有一个标题，说明它是什么，下一个重要的阶段是购物车按钮，呼叫人们购买物品。通过考虑为网站或应用程序设定的业务和营销目标，创意团队可以有效地确定视觉内容的优先级，使产品脱颖而出。
考虑扫描模式
在我们之前的文章中，我们提到，在阅读网页之前，人们会快速扫描它以了解他们是否感兴趣。包括尼尔森-诺曼集团(NielsenNorman Group)的研究在内，不同的研究揭示了几种流行的扫描模式，其中包括“F”和“Z”形。
F模式主要出现在具有大量内容的数字页面或屏幕上，例如博客，新闻平台等。用户的眼睛以F形移动：首先，他们扫描屏幕顶部的水平线，然后向下移动页面稍微在较短的水平线上读取，在副本的左侧以垂直线向下完成，人们在段落的初始句子中查找关键字。
Z模式发生在不那么集中在副本上的页面上或者不需要向下滚动的页面上。模式如下：人们首先从左上角开始扫描页面的头部，搜索核心信息，然后沿对角线向下到达对角，在页面底部以水平线结束从左到右。
了解这些模式后，设计人员会组织内容，将所有核心UI元素放在最多扫描点上，以吸引用户的注意力。
海鲜食谱登陆页面
功能优先
视觉层次结构似乎只面向美学方面，但并不是这样的。首先，通过构建和组织视觉元素，设计师需要确保产品的使用清晰，并且导航工作正常。以美学为基础的视觉层次结构不能有效地发挥作用。内容结构不好的用户界面会导致用户体验不好。因此，在构建可视化层次结构时，设计者需要考虑UI元素的功能以及它们在导航过程中所扮演的角色。
空白是一个视觉元素
空白，或者说负空间，不仅仅是设计元素之间的区域，它实际上是每个视觉构图的核心组成部分。它是一种能够使用户眼睛注意到所有用户界面元素的工具。设计人员可以对UI组件进行分组或分离，以便他们可以创建有效的布局。此外，负空间有助于强调需要用户深度关注的特定元素。空白空间是创建视觉层次结构的有效工具，因此设计人员需要努力实现其均衡使用。
运用黄金比例
我们将最新的一篇文章用于设计中应用的黄金比例。它是不同尺寸元素的数学比例，被认为是人眼最美观的元素。比例等于1：1.618，并且通常用贝壳形螺旋来说明，你们许多人可能已经看过它们。
设计师经常在线框图阶段应用黄金比例。它有助于规划布局的结构，并以适当的比例调整用户界面元素的大小，这将使用户感到愉快。
使用网格
网格是在创作过程的不同阶段应用的关键工具之一，视觉层次结构也不例外。网格有助于构建所有组件并将它们放入适当的大小和比例。更重要的是，设计师可以有效地处理负空间，因为网格显示元素可以确定是否按比例均匀放置。
金融服务网站
添加一些颜色
颜色选择和组合对于视觉层次结构是必不可少的，因为它们帮助用户区分核心元素。问题是，颜色有自己的层次，这是由影响用户心灵的力量来定义的。有大胆的颜色，如红色和橙色，以及弱的颜色，如白色和奶油色。大胆的颜色很容易被注意到，所以设计师经常使用它们作为突出显示或设置对比度的手段。
此外，将一种颜色应用于多个元素，可以显示它们之间有某种联系。例如，您可以为购买按钮选择红色，这样人们可以在需要时直观地找到它们。
注意字体
视觉层次包括一个称为排版层次的核心部分，其目的是修改和组合字体，以构建应首先注意到的最有意义和最突出的复制元素与普通文本信息之间的对比。字体可以通过调整大小、颜色和种类以及它们的对齐方式进行转换。不同的字体可以将复制内容分为不同的级别，这样用户就可以逐渐感知到信息。然而，由于太多的字体看起来杂乱无章，使设计不一致，因此建议设计师将字体数控制在3个以内。
三级网络，两级移动
如前所述，不同的字体构成了排版级别，由标题、副标题、正文副本、动作元素调用和标题等元素组成。有三个排版级别：初级、中级和三级。第一种是最大的类型，旨在吸引人们对屏幕上的核心信息的注意。下一个级别提供了易于扫描的复制元素，并帮助用户浏览内容。第三级通常应用正文和一些通过相对较小的类型显示的附加数据。
在许多情况下，Web产品包括所有三个级别，因为它们更可能提供大量的内容。另一方面，建议设计师在为移动设备创建排版时，将层数保持在两个以内。小屏幕不能为三个级别提供足够的空间，因此二级(如副标题)的元素必须让开以使移动用户界面看起来干净。
有效的视觉层次不仅仅是美学。它旨在提供解决问题的导航和交互系统以及友好的用户体验。为了创建一个足够的可视化层次结构，设计人员需要考虑功能和业务目标来组织所有UI元素。
微信扫一扫