火星网校
学习UI设计的版式技巧，记得收藏
发布时间：2024-04-09 10:08:26 浏览量：153次
如果说色彩和图片是人的外在，那么版式编排就是人的骨骼，从基础上决定了一个人的内在。今天就带着大家一起从以下5个方面来探究下UI设计中的版式编排。
一
信息的排布
UI界面设计中，信息能被有效的传达，离不开良好的组织和布局，信息之间层级关系的表达非常重要。
恰当的视觉设计，能够通过对界面UI设计元素的展现来暗喻信息之间的层级关系，能够减少用户在使用过程中产生的困惑和理解上的障碍,我们可以通过以下两点进行尝试：
1. 明确信息的层级关系，重要的突出显示
2. 合适的间距和留白，给界面呼吸感
二
文字的排版
在设计工作中，大家喜欢把重点放在色彩，图像的处理上。但其实文字阅读的处理与前两者相同，甚至更重要。
1. 字号：在一篇文章里,为了区分出信息的重要级。会通过不同的字号来区分。正文作为文章的主题，我们可以先把他的字号确定下来，根据需要来调节大标题，小标题以及注释的字号。
2. 留白：把留白按照一定的规律来排列，也会增加易读性。遵循“字间距>行间距>段落间距”的排布方式。
3. 行高，行间距：行与行之间的间距如果太宽，会使视线移动过长，给用户造成负担。一般行高会给字体大小的1.6-2倍，因为不同字体的固有高度不同，所以这个数值需要自己调节。
三
图片的使用
图片是构成界面的重要元素之一，它可以帮助我们更好的丰富界面。那么如何选择符合我们产品调性的图片呢？如何在缺少图片的情况下让我们的界面更加有意思呢？我们可以从以下几点入手。
举个例子，如果需要做一款旅游类的App，我们通过一些竞品以及自身的经验旅游类App的配图一般都是明快的，色彩丰富的，景色优美才能引起人们去旅行的兴趣，所以找图的时候，我们就往明快，色彩丰富这个方向找图。
1. 结合产品自身的个性选图
2. 当没有图片的时候，创造图形来丰富界面
图标通常是有效且直接表现方式，简单明确的图形，可以让用户通过对图标的认识快速找到想要的功能和需求点，同时也让界面更加的具有趣味性。
3. 当图片有更多的选择时，可以考虑不同的构图形式
找到更合适的版图率让界面的布局显得更加的活跃，此外还要考虑的一个因素就是图片色调要统一。
四
亲密性原则
亲密性原则简单的来讲就是将相关联的元素组织在一起，关系近的，距离近，关系远的，距离就远。合理使用亲密性原则，能够帮助我们的界面更加有条理。
五
轻重缓急
生活工作中，事情都有轻重缓急要靠我们来安排，设计中同样也是，所以我们要把元素提取出来， 按照轻重缓急来排序，告诉用户哪些是重要的，哪些是次要的，这样才能让用户顺畅的接收到我们要传达给他的信息，减少用户的负担。
1. 图片的大小
2. 界面中的颜色
设计不仅需要视觉上华丽呈现，也需要设计思维和理论的支撑，用理性思维做感性的设计才会在实际的项目中起到推波助澜的作用，把更多好的设计推动到线上。
注意：以上内容整理来源于互联网，仅供学习参考，不做商用，如有侵权请联系删除！
热门课程推荐
热门资讯
-
怎样可以提升你的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设计培训班的学费价格以及学习内容。
最新文章
