火星网校
「UI设计」轻松掌握视觉层次结构的四大武器
发布时间：2024-03-12 09:48:56 浏览量：228次
转自：功夫UX（ID：UX-Talk）
作者：Tony
为什么要学习
好的视觉层次使产品拥有好的形象，好的视觉，能够引导用户很清晰的找到内容的关键点和需要注意的地方。作为设计师，我们每天都面对各种需求，而且有时候经常因为界面排版混乱或者设计没有节奏感，经常被同事或者领导Diss~
那么有没有更好的办法能够长期支持我们今天快节奏的工作呢？除了我们凭借多年工作经验又或者凭感觉来做，但是这些对于新手设计师来说，是不太现实的，“设计”它是有规律可循的，建立视觉层次结构，我们可以先把最基础的做好，然后通过这些基础的要素来搭建整体视觉层次结构，这些基础要素影响排版的有如下4大点： 大小、字重、颜色、布局等，这四大点也是构成任何视觉层次结构的基石，因此我们只要熟悉掌握他们的运行方式规律，那么做设计就没那么难了。
为什么它如此重要
图片来自网络
上面两封简历，大家第一眼看，短时间内，谁吸引了你? 谁最引起的你注意? 很明显肯定是图1，为什么？因为一个公司的HR，每天会面对很多简历，那么他们一般只关注重要信息，如果你的简历上，在几秒钟之内看不到啥重点信息，你的简历很可能会石沉大海，大家可以看下右边的视觉层次明显没有左边强，其实他们内容是几乎一样，只是视觉层次结构发生了变化。
上面只是一个简单的例子，在我们日常设计中，特别是刚做设计不久的小伙伴，很容易犯这样的错误，设计毫无层次，好的视觉就像一首动听的曲子，他是有节奏感在里面的，正式因为有了节奏和韵律，歌曲才如此好听。设计也是同样的道理，我们也需要通过层次来构建节奏感和韵律感，从而达到一种愉悦视觉享受。
有哪些方法可以轻松构建层次
我们可以通过视觉语言的基本元素来构建视觉层次；大小、字重、颜色、布局,这也是最基础的，包括任何复杂的设计都基本包含这些要素，所以我们可以先掌握他们的运用技巧，然后灵活巧妙运用到整体设计中去，下面我会将和大家一起探讨下。
1. 大小
通过大小属性，我们可以对一些重要的操作内容进行放大显示，因为大的东西更吸引眼球，且这种趋势实际上足以超越自上而下的规则
左边facebook 把发布信息内容，做成卡片按钮，放在用户视角顺序的第一个位置（从左往右的阅读习惯），这个功能对用户来说十分重要，预示着是否可以随时能发布内容，也是facebook比较核心的一个功能，
第二张截图 Medium 它把卡片单独做大 放在首页顶部位置，目的也是为了强调重点推荐内容。同时它们之间层次关系就显示出来了
通过放大和加粗英文字母，来凸显层次，同时视觉上提升不少设计感
上面三个例子通过放大主体内容或者标题来突出视觉层次关系，突出主要内容
2. 字重
顾名思义，我们可以使用粗细来创建视觉层次结构，这样信息结构更加清晰
上面两张卡片，下面的比上面的层次更明显。有时候仅仅用颜色深浅来区分层级是不够的，我们需要运用字重来区分主次关系。
上面几个案例中有网页、杂志，包装等等，在设计时候都运用到了加粗加大字体形成强烈的视觉冲突关系
3. 颜色
当我们谈论颜色时候，就需要考虑的因素很多了，每种色彩对应的认知是不一样的，比如UI界面设计中，蓝色文字代表可点击，红色代表是出错等，在排版中黑色和红色比较吸引注意力，轻量色彩就没有那么强吸引力
如上，有没有发现有色彩的地方首先吸引你，且层次也出来了，用户有一个阅读页面的优先级，那么这个页面就是正确的设计
上面这几张图都运用了色彩，字重，大小来区分视觉层次。
4. 布局
布局其实就是对留白把控，通过留白来产生视觉层次关系，给予内容充足的呼吸空间，那么我们可以通过网格系统来制定有规则的留白空间，这样层次出来了，然后视觉上整齐度很高。
gird system
留白创造了层次，创造精彩的视觉感官体验，创造不同性格的产品，大家可以更多在设计中去运用这些基础技巧来提高设计品质感
结语
到这里就结束了，构建视觉层次的思路大家应该很清晰了，我们可以通过这四大基础元素的组合使用，达到我们所需要的设计要求。当然我们平时去欣赏优秀作品时候，也可以去仔细观察下，为什么会如此吸引你？它好在哪里？是色彩吸引你? 还是排版层次很舒服等等。通过这样不断去锻炼来提升自己在这方向上的认知
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
9. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
