当前位置 : IT培训网 > ui设计 > UI培训 > 视觉层级的设计要点,你懂了吗?

视觉层级的设计要点,你懂了吗?

时间:2021-07-15 21:52:37  来源:我爱设计网  作者:IT培训网  已有:名学员访问该课程
视觉层级似乎和审美有关,但不仅于此。首先,通过构建和组织视觉元素,设计师需要确保产品使用清晰,导航正确。

提升视觉层级的9个设计要点,无论是新手还是老手,赶紧都来看看吧,学习好UI设计,就在这里了!

今天IT培训网UI老师为设计师创建清晰的视觉层级提供了几点有用的设计技巧。

1. 牢记目标

每一个产品都有商业目标。要实现这些目标,创意团队需要确定哪些UI元素更重要,并根据角色优先考虑。比如,电子商务网站上的所有元素都执行各种不同的任务。项目图片是第一层级,因为它必须让客户去认知它。标题是解释产品是什么,其次是按钮鼓励人们去购买。根据产品的业务目标和营销目标,设计团队可以有效的优化视觉元素突出产品,让人印象深刻。

2. 考虑浏览模式

人们会大致的浏览页面以确定是否对产品感兴趣。许多研究都表明,流行的浏览模式有“F”和“Z”形。 了解这些模式的设计师会有效的组织内容,将所有核心的界面元素放在最多的扫描点上,引起用户注意。

3. 功能第一

视觉层级似乎和审美有关,但不仅于此。首先,通过构建和组织视觉元素,设计师需要确保产品使用清晰,导航正确。在美学上,异常的视觉元素的视觉层次不能有效的发挥作用。严重结构化的用户界面会导致糟糕的用户体验。因此,在构建视觉层次时,设计师考虑UI元素的功能以及他们在导航中的角色。

4. 留白也是视觉元素

留白或负空间不仅仅是设计元素之间的区域,实际上是每个视觉构图的核心部分。是一种能让所有界面元素都能让用户引起注意。设计师可以对UI组件进行分组或分离,以便创建有效的布局。此外,负空间有助于强调需要用户高度关注的特定元素。留白是创建视觉层次结构的有效工具,因此设计师需要平衡使用留白。

5. 应用黄金比例

黄金比例是被认为人眼最美观的元素。是不同尺寸元素的数学比例。这个比例等于1:1.618,可以用许多人看过的贝壳形螺旋来说明。设计师通常在线框图阶段应用黄金比例。它有助于规划布局和调整用户界面元素大小,这对于用户来说是合适的比例。

6. 使用网格

网格是创作过程中的不同阶段的关键工具之一,视觉层次结构也不例外。网格有助于构建所有组件,并将它们放到合适的大小和比例中。更重要的是,设计师可以有效的利用负空间,因为网格显示的元素是否按比例均匀放置。

7. 添加一些颜色

颜色选择和组合对视觉层次至关重要,它们可以帮助用户区分核心元素。颜色有自己的层次结构,这是由影响用户心智的模型来决定的。大胆的颜色,如红色和橙色,很容易被注意到,所以设计师经常使用它们作为突出显示或设置对比度的手段。

8. 关注字体

视觉层次结构包括一个称为印刷层次结构的核心部分。它的主旨是通过修改和组合字体,将需要突出的部分建立对比,这些元素应该最先被注意到,并与普通文字形成对比。字体可以通过调整大小、颜色和对齐的方式。不同的字体可以将内容分成不同的级别,以便用户可以感知信息。但是,建议设计师将字体保持在三种以内,因为太多的字体看起来很乱,并且使设计不一致。

9. 网页三种层级,手机两种层级

如上所述,不同字体形成不同的级别,包括标题、副标题、正文副本,号召性用语元素和标题等。有三种级别,第一个是最高层级,旨在吸引用户关注屏幕上的核心信息。第二级提供副元素,可以让用户轻松的了解所浏览的内容。第三级通常应用正文和一些娇小的类型的元素呈现数据。

许多情况下,数字产品都包含三个级别,因为它们能提供大量内容。另一方面,建议设计师为移动设备设计时将层级保持在两个以内。小屏幕不能提供足够的空间用于三个级别,因此辅助元素(如子标题)必须放在一边,使UI看起来干净整洁。

有效的视觉层级不仅关乎美学。它旨在提供解决问题的导航和交互系统以及友好的用户体验。为了创建足够的视觉层级,设计师需要考虑功能和业务的目标来组织所有UI元素。

顶一下
(0)
0%
踩一下
(0)
0%

IT培训0元试听 每期开班座位有限.0元试听抢座开始! IT培训0元试听

  • 姓名 : *
  • 电话 : *
  • QQ : *
  • 留言 :
  • 验证码 : 看不清?点击更换请输入正确的验证码

在线咨询在线咨询

温馨提示 : 请保持手机畅通,咨询老师为您
提供专属一对一报名服务。

------分隔线----------------------------
------分隔线----------------------------

推荐内容