设为首页
收藏本站
搜索
热搜:
Java
Python
UI
人工智能
Web
影视特效
抖音
网络营销
运营
本版
文章
帖子
群组
用户
登陆
注册
首页
Portal
互联网资讯
视频教程
技术社区
BBS
IT培训
学历提升
快速发布
个人中心
今日签到
私信列表
消息中心
搜索全站
课程咨询
返回顶部
大内高手社区
›
技术社区
›
UI设计论坛
›
设计师要掌握的UI设计技巧:排版篇
玫瑰黑糖
关注Ta
发帖数
24
粉丝
1
此人很懒,什么也没有留下
[UI设计论坛]
APP导航栏设计分析(下):5种设计样式
[UI设计论坛]
APP导航栏设计分析(上):4种交互状态
[UI设计论坛]
这些实用的排版技巧,能让你的设计更细致
[UI设计论坛]
三步教你提升B端表单设计的用户体验(一)
[UI设计论坛]
好的单选框设计具备哪些特质?
阅读作者更多精彩帖子
热门问答
更多热门问答
1
淘宝客注册流程步骤
22668人围观,发布于2021-09-26
1
APP运营核心要点有哪些
21142人围观,发布于2022-07-08
0
了解运营
13216人围观,发布于2021-09-18
0
网站的 TDK基本格式
12407人围观,发布于2021-09-23
0
SEO优化中网站地图在的主要作用
13721人围观,发布于2022-01-13
0
快速提高网站SEO优化排名的方法
16686人围观,发布于2022-01-13
技术文章
更多技术文章
告别“限速”,个人网盘进入云时代
2022-12-28
长难任务设计指南,必须收藏!
2022-12-28
新消费,走进「韧性时代」
2022-12-28
营销技能:营销4P之外,还有这些经典理论
2022-12-28
实例分享 | 社区产品编辑器的设计开发要点
2022-12-28
产品经理方法论——流程与审批流的区别
2022-12-27
返回列表
设计师要掌握的UI设计技巧:排版篇
[复制链接]
玫瑰黑糖
Lv.2
显示全部楼层
发表于 2022-3-21 17:29:54
|
阅读模式
排版中很重要的两个因素是对齐和间距。对齐让页面内容有序且合理,间距有助于拉开页面中各个元素的空间和节奏,这两个因素协同工作,来实现更好的用户体验。
1) 避免长文本居中对齐
当页面中的文字内容超过两三行,尽量不要使用居中对齐的方式。
当大段的文字内容居中对齐时,给人的第一感觉就是文字左右两边不规整,这样的排版方式会导致读者在阅读时注意力下降。
2) 长文本使用左对齐
左对齐的排版方式具有更好的可读性,而且现在的书籍、文章很多都是采用左对齐的方式。文本左对齐避免了用户在浏览页面时视线来回跳跃,更快速地浏览内容。
3)标题和注释使用居中对齐
例如在网站首页设计中,经常会看到这种功能亮点水平排列的设计,在这样的场景下,标题和注释文字都可以使用居中对齐。如果其中一个注释太长需要折行,考虑精简文字信息,做到设计上的完全统一。
4) 右对齐数字和时间
在设计表格、卡片或仪表盘的时候,右对齐数字和时间。例如在设计涉及金额的表单时,将金额右对齐会让数目信息更加一目了然。
5) 主标题使用较大的间距
标题和文字内容之间留有一定间距有助于划分内容层级关系,让标题和文字之间形成更清晰的对比。
6) 副标题使用较小的间距
副标题的字体大小更接近文本内容,使用较小的间距有助于突出显示标题内容,并且不会破坏阅读流程。
7) 定义通用的段间距
居中对齐什么场景下可以用呢?当标题仅有一到两行时,就可以考虑使用居中对齐。当然如果标题超过两行,使用左对齐会更好。
为了让一大段内容看起来统一,设置一个通用的段间距至关重要。大多数字体的理想行距是行高的30%-50%,例如文字的行高是24pt,那么段落间的间距为8、10、或12pt。
8) 在文本和图像之间添加更多空间
图像在视觉上比文本重,添加额外的空间有助于在图像和上下文之间建立平衡,让内容更易于阅读。文本和图像之间留有一定的空间,可以防止文本受到视觉重量大的图像的影响。
【声明】本文转载自公众号Clip设计夹,作者;Clippp,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与联系我们,我们会予以更改或删除相关文章,以保证您的权益!
本帖子中包含更多资源
您需要
登录
才可以下载或查看,没有帐号?
立即注册
x
回复
使用道具
举报
发布主题
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖并转播
回帖后跳转到最后一页
返回顶部
返回列表