火星网校
UI设计应该如何有效且充分的利用好空间和布局
发布时间：2024-02-28 14:16:18 浏览量：180次
良好的视觉层次结构并不只是迎合酷炫的视觉效果，它是以用户的使用性可用，可访问和逻辑的方式组织信息。UI设计中的空间和布局应该需要注意那些细节？
空间与UI彼此关系
空间与UI布局和组合相关，也是设计的视觉语言的基本方面，以及颜色，结构和图像。空间有助于设计师创造视觉呼吸空间，使用户希望留在页面上。并可以创建重要内容的重点。
谈论UI设计中的空间时，我们通常指的是两个概念：邻近和负空间，或者留白。
UI布局中的邻近度
邻近度是UI / UX设计中的格式塔理论的设计原则。接近原理基于这样的想法：在屏幕上彼此接近的对象彼此相关（特别是与那些彼此远离的对象相比）。
通常，设计将实现邻近区分元素组并为UI元素和图标组创建子层次结构。
UI布局中的留白
留白是屏幕上UI元素之间的空间。充分利用留白有助于消除界面信息承载的拥挤，以便用户可以更轻松地关注重要元素和阅读内容（实际上，留白有助于提高可读性20％）。
留白不是关于界面中UI元素的数量，而是关于质量。过多的元素和信息会导致界面可读性。
在UI布局设计中有效利用空间
如何将空间纳入UI布局设计因屏幕而异。例如，您可以在主页上使用大量空白来强调按钮，但在列出多个项目的网站上使用较少，例如电子商务产品页面。
UI布局对齐
设计师构建界面时，在画布上的空间元素对齐，界面会更加整齐。把控元素之间和周围的空间，创建重点并为用户界面定义视觉路径。
组织内容和视觉层次结构
视觉层次结构是设计中一个有趣的概念。这是用户处理屏幕上信息的顺序。
设计时需要注意视觉层次结构，以确保用户可以轻松地查找和理解信息。
以下是应考虑的视觉特性，以使其屏幕尽可能可读和可用：
- 1）邻近 – 放置相关元素有助于信息划分；
- 2）空白 – 适量的空白可以帮助突出重要内容；
- 3）大小 – 大小对比有利于用户对界面信息的接受；
- 4）颜色 – 明亮的颜色更容易捕捉视觉（具体根据产品设计语言定义）；
- 5）对比 – 用户容易被突出的信息吸引到；
- 6）对齐 – 界面创建更清晰，增强可读性；
- 7）重复 – 重复一致性并有助于将元素联系在一起。
黄金比例黄金比例是各方之间的比为1：1.618。
1）画一个正方形;
2）从正方形的中间（A）画一个对角线到对角（B）。
3）得到的对角线是弧的半径。画圆圈得到一个矩形。由此产生的正方形和矩形的形状是“黄金矩形”。
4）如果我们在大小矩形中对角绘制，那么在交点处我们得到一个“焦点”。最重要的界面对象放在这一点附近，以吸引用户的注意力。
5) 如果在半径等于正方形边的圆弧的每个正方形中，我们得到“黄金螺旋”。
6) 可以旋转矩形并将其调整到所需的画布和界面的大小。
案例一：以下电商的卡片产品。如果采用“黄金矩形”，那么如何放置元素就变得很明显了。该结构使得可以在第一屏幕上显示最合适的用户数据。
可以看到，在“焦点”中，我们有“保存到收藏夹”操作，这是应用程序中的关键操作之一。
元素很大，位于彼此之间和屏幕边缘之间的舒适距离内，也可以方便操作，即保障界面信息承载量，有解决了，美观和易操作性。
案例二：社交类产品界面。顶部大图和诸多文字以及icon界面信息基于黄金比例处理方式。
右下角的“喜欢”和“评论”元素的位置对界面整体协调性。
在这里我相信有很多想要学习UI设计的小伙伴，我自己是一名从事了多年UI设计工作的设计师，辞职目前在做自己的私人定制课程，今年年初我花了一个月时间整理了一份最适合2019年学习的学习干货，从最基础到实战都有整理，送给每一位想学习的小伙伴，想要获取的可以关注然后私信我“学习”两个字，即可免费获取资料，伸手党勿扰~
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
