火星网校
设计师要掌握的UI设计技巧:排版篇分享
发布时间：2024-08-21 11:20:37 浏览量：200次
大家好，我是Clippp，今天为大家分享的是「UI基础系列2-排版篇」。在第一篇中，我们拆解了标题的字号、样式、行高、粗细应该如何设计。最近有读者催更还想看「UI基础系列」，接下来我们开始分享第二部分：页面排版。
排版中很重要的两个因素是对齐和间距。对齐让页面内容有序且合理，间距有助于拉开页面中各个元素的空间和节奏，这两个因素协同工作，来实现更好的用户体验。
1) 避免长文本居中对齐
当页面中的文字内容超过两三行，尽量不要使用居中对齐的方式。当大段的文字内容居中对齐时，给人的第一感觉就是文字左右两边不规整，这样的排版方式会导致读者在阅读时注意力下降。
2) 长文本使用左对齐
左对齐的排版方式具有更好的可读性，而且现在的书籍、文章很多都是采用左对齐的方式。文本左对齐避免了用户在浏览页面时视线来回跳跃，更快速地浏览内容。
3) 标题和注释使用居中对齐
居中对齐什么场景下可以用呢？当标题仅有一到两行时，就可以考虑使用居中对齐。当然如果标题超过两行，使用左对齐会更好。
例如在网站首页设计中，经常会看到这种功能亮点水平排列的设计，在这样的场景下，标题和注释文字都可以使用居中对齐。如果其中一个注释太长需要折行，考虑精简文字信息，做到设计上的完全统一。
4) 右对齐数字和时间
在设计表格、卡片或仪表盘的时候，右对齐数字和时间。例如在设计涉及金额的表单时，将金额右对齐会让数目信息更加一目了然。
5) 主标题使用较大的间距
标题和文字内容之间留有一定间距有助于划分内容层级关系，让标题和文字之间形成更清晰的对比。
6) 副标题使用较小的间距
副标题的字体大小更接近文本内容，使用较小的间距有助于突出显示标题内容，并且不会破坏阅读流程。
7) 定义通用的段间距
为了让一大段内容看起来统一，设置一个通用的段间距至关重要。大多数字体的理想行距是行高的30%-50%，例如文字的行高是24pt，那么段落间的间距为8、10、或12pt。
8) 在文本和图像之间添加更多空间
图像在视觉上比文本重，添加额外的空间有助于在图像和上下文之间建立平衡，让内容更易于阅读。文本和图像之间留有一定的空间，可以防止文本受到视觉重量大的图像的影响。
页面排版是「UI基础系列」的第二部分内容，后续设计夹会分享更多页面层级、布局、网格等一系列的设计技巧。
对「UI基础系列」感兴趣的小伙伴记得点赞关注一下接下来的文章。慢慢来比较快，希望对你有帮助！
热门课程推荐
热门资讯
-
想要了解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. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
