设计师要掌握的UI设计技巧(二):排版篇

当前位置:首页>设计文章>UI>设计师要掌握的UI设计技巧(二):排版篇

关注▲Clip设计夹后台回复“进群加入设计成长群

设计夹的第98篇文章分享

大家好我是Clippp今天为大家分享的是「UI基础系列2-排版篇」。在第一篇中,我们拆解了标题的字号、样式、行高、粗细应该如何设计,没看过的小伙伴可以点这里快速回看➡️➡️设计师要掌握的UI设计技巧(一):标题篇

最近有读者催更还想看「UI基础系列」,接下来我们开始分享第二部分:页面排版。

排版中很重要的两个因素是对齐和间距。对齐让页面内容有序且合理,间距有助于拉开页面中各个元素的空间和节奏,这两个因素协同工作,来实现更好的用户体验。

1) 避免长文本居中对齐

设计师要掌握的UI设计技巧(二):排版篇

当页面中的文字内容超过两三行,尽量不要使用居中对齐的方式。

当大段的文字内容居中对齐时,给人的第一感觉就是文字左右两边不规整这样的排版方式会导致读者在阅读时注意力下降。

2) 长文本使用左对齐

设计师要掌握的UI设计技巧(二):排版篇
左对齐的排版方式具有更好的可读性,而且现在的书籍、文章很多都是采用左对齐的方式。文本左对齐避免了用户在浏览页面时视线来回跳跃,更快速地浏览内容

3)标题和注释使用居中对齐

居中对齐什么场景下可以用呢?当标题仅有一到两行时,就可以考虑使用居中对齐。当然如果标题超过两行,使用左对齐会更好。

设计师要掌握的UI设计技巧(二):排版篇

例如在网站首页设计中,经常会看到这种功能亮点水平排列的设计,在这样的场景下,标题和注释文字都可以使用居中对齐。如果其中一个注释太长需要折行,考虑精简文字信息,做到设计上的完全统一

设计师要掌握的UI设计技巧(二):排版篇

4) 右对齐数字和时间

设计师要掌握的UI设计技巧(二):排版篇
在设计表格、卡片或仪表盘的时候,右对齐数字和时间。例如在设计涉及金额的表单时,将金额右对齐会让数目信息更加一目了然。

5) 主标题使用较大的间距

设计师要掌握的UI设计技巧(二):排版篇
标题和文字内容之间留有一定间距有助于划分内容层级关系,让标题和文字之间形成更清晰的对比。

6) 副标题使用较小的间距

设计师要掌握的UI设计技巧(二):排版篇
副标题的字体大小更接近文本内容,使用较小的间距有助于突出显示标题内容,并且不会破坏阅读流程。

7) 定义通用的段间距

设计师要掌握的UI设计技巧(二):排版篇
为了让一大段内容看起来统一,设置一个通用的段间距至关重要。大多数字体的理想行距是行高的30%-50%,例如文字的行高是24pt,那么段落间的间距为8、10、或12pt。

8) 在文本和图像之间添加更多空间

设计师要掌握的UI设计技巧(二):排版篇

图像在视觉上比文本重,添加额外的空间有助于在图像和上下文之间建立平衡,让内容更易于阅读。

文本和图像之间留有一定的空间,可以防止文本受到视觉重量大的图像的影响。

最后

页面排版是「UI基础系列」的第二部分内容,后续设计夹会分享更多页面层级、布局、网格等一系列的设计技巧。

「UI基础系列」感兴趣的小伙伴记得点赞关注一下接下来的文章

慢慢来比较快,如觉得有帮助,

请点个在看&分享,谢谢!

设计师要掌握的UI设计技巧(二):排版篇

添加微信,邀你进设计成长群

Tips:这里会持续更新设计干货,包括但不限于交互日记、设计法则、答疑解惑、读书笔记…感兴趣的同学可以扫码加入,一起成长!⬇️⬇️⬇️
设计师要掌握的UI设计技巧(二):排版篇

文章合集

设计师要掌握的UI设计技巧(二):排版篇

设计师要掌握的UI设计技巧(二):排版篇

除非注明,否则均为UIED用户体验学习平台-Clip设计夹的原创文章,转载必须以链接形式标明本文链接

本文链接:https://www.uied.cn/23725.html

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
UI

好的单选框设计具备哪些特质?把握住这些知识点!

2023-7-13 22:06:30

UI交互产品

设计价值观和设计原则有什么区别?

2023-7-18 9:09:36

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索