火星网校
UI界面设计的视觉层级
发布时间：2024-03-14 20:48:47 浏览量：197次
位置是在设计之初就会考虑的因素。人们在阅读和浏览事物时，会遵循一些特定的规律，在用户界面设计上遵循这些规律，能帮助用户更容易、更快捷地看到并理解眼前的事物。其中有两条规律和位置设计元素有关：
①当眼睛偏离视中心时，在偏离距离相等的情况下，人眼对左上的观察最优，依次为右上、左下，而右下最差。因此，左上部和上中部被称为“最佳视域”。
②第二条规律是眼镜沿水平方向运动比沿垂直方向运动更快而且不易疲劳。人们一般先看到水平方向的物体，后看到垂直方向的物体。
依据信息的优先级确定了界面中元素的位置后，应该考虑给各个元素占多大的空间，元素的尺寸大小可以很直观地反映信息的重要等级。
除了元素本身的尺寸大小会影响视觉层级外，元素的细节放大程度也同样起到作用，细节放大后，人眼会感受到元素更清晰，离眼睛更近而容易先去关注，当然前提是保证信息可被理解，如果局部细节放大但用户不能理解信息是什么就不能起到吸引用户的作用。
前面讲到的将元素的细节放大，眼睛会感受离它更近而被优先注意到，虽然信息展现的媒介是个平面，但是通过视觉手段能体现出三维的效果，除了大小，还可以采用一些其他视觉手法来实现。
①拉远三维距离。想要达到距离被拉远的效果，下面列举的方法是让信息变得不清晰，眼睛看起来无法对焦到信息上面，包括：模糊元素；降低透明度也同样可以起到作用，当有些背景图模糊后比较难被整体感知，选择降低透明度也能拉远距离；增加半透明图层，在界面色彩或元素比较多的情况下，仅降低透明度也可能无法拉开距离。
②拉近三维距离。增加投影是最常用到的让元素看起来和其他内容不在同一平面的视觉手法，通常像弹出框、移上后出现的浮层等由于要压在其他信息之上，增加投影能帮助用户聚焦在带投影的模块而不受下面信息的干扰。
③除了三维，二维距离对视觉层级也有影响。根据格式塔心理学接近性定律，距离较短或互相接近的部分容易组成整体。人眼对距离邻近的信息更容易先去关注，在视觉手法应用上，元素距离上一个焦点近的，视觉层级较高。
确定了界面元素的位置、大小和距离关系后，我们应该继续考虑内容的形式，包括视频、图片、文字等，这里主要讲我们经常使用的图形和文字。相比起文字，图片在抓住用户眼球这一点上是功不可没的，同时还能使用户在短时间内形成形象记忆。从视觉层级上，眼睛一般会先关注图后关注文字。
①方向性引导。图片中的形象有些具有明显的方向性，如人眼注视的方向、手势所指的方向、物体运动的方向光线照射的方向等，这些特征会引导人眼视线朝着设定的方向运动，从而达到视觉层级有主有次。
②符号引导。除了图片，一些符号本身带有顺序和方向性，能有效引导视线根据符号来浏览，包括阿拉伯数字，字母顺序、时间顺序、箭头等。时间轴在界面中应用也很广泛，人眼会受时间顺序的影响去测览信息。
色彩是影响用户对界面层级性感知的另一重要因素，色彩的应用对视觉层级的影响也能起到立竿见影的效果，总结起来人眼对色彩的关注度差别主要是以下两点：
①先暖色后冷色。色彩的不同色相，对人眼的刺激及产生的反应目前没有找到绝对的先后顺序，但是冷色类和暖色类色彩，是有明显的层次差别的。
②先高反差后低反差。除了冷暖色对眼睛的刺激不同，色彩的反差是最容易造成关注度差别的因素，在自然界动物为了生存，运用的保护色就是和反差相关。除了尺寸大小、距离能体现视觉的反差外，运用色彩也可以达到视觉的反差：色相反差、饱和度反差和明度反差，数值可以控制，两个颜色之间饱和度或明度数值相差越大，反差也就越大，反之亦然。
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
