UI界面中要注意的文字处理细节

  • A+
所属分类:经验思维

本文来源: 酸梅干超人(公众号: 超人的电话亭), 共 665 字

本篇文章是在收集同学们的作业后,发现有个很普遍的问题,就是会忽略文字处理的各种细节。整理了下常见问题,以及如何处理的方式,下面开始讲解。

案例1:字体缺少对比

UI界面中要注意的文字处理细节

问题:文字的对比可以体现在颜色、字重、大小上,将这三者在一个模块中全部运用出来,才能满足对比最基本的要求。改动:在颜色、大小、字重上加强字体之间的对比,并在图标中也适当加入色彩,体现出设计感。

案例2:大段被阅读的文字使用过多

UI界面中要注意的文字处理细节

问题:一个页面如果不是以阅读为目的的话,出现太多文字会使用户产生焦虑,最佳的文字行数应控制在 2-3 行,剩余的可以使用一个展开按钮来代替。

改动:减少大段文字出现的数量。

案例3:文字的行高

UI界面中要注意的文字处理细节

问题:在一个主要目的是阅读的页面中,大段文字确实无法避免,但是如果不为大段文字添加行高,不仅用户阅读起来非常困难,而且整个页面也会看起来非常挤。

改动:加入行高,并适当调整不同标题与正文之间的间距

案例4:用回车代替段间距

UI界面中要注意的文字处理细节

问题:做大段文本的时候,换行不能直接打一个回车,而应该在文字属性面板中输入段间距的数值来控制段落的间距。

改动:使用段间距参数来控制段落的间距。

案例5:两端对齐

UI界面中要注意的文字处理细节

问题:以设计师作品的角度出发,设计中的文字是可以自己替换的,在设计中应该仔细观察文字是否有中英混排、英文断行等问题,并自行替换文案,而不是强制使用两端对齐。

改动:修改了文案内容。

案例6:文字使用彩色

UI界面中要注意的文字处理细节

问题:在 UI 设计中,文字颜色尽量不要使用彩色,有色彩的文字一般运用在特殊的元素上。

改动:将彩色文字改成深灰色。

案例7:乱给字间距

UI界面中要注意的文字处理细节

问题:在中文的设计中,字间距不要作任何调整。

改动:删除了字间距



发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: