首页 > 网页教程 > 设计分享 > UI排版设计:如何科学提高文本易读性?

UI排版设计:如何科学提高文本易读性?

时间:2017-09-20    来源:金蝶云之家体验中心

排版设计是ui设计师的基本功。但或许是因为它太基本了,很多时候很多设计师都会直接忽略它的存在,导致最后的实现效果不够理想。或许就是这些细节导致手中的产品看起来总是差那么一点点。尤其是对于一些注重阅读体验的页面来说,每一个细节都可能成为致命伤。

艺术是无依据可循的,但是文字排版却是有依据可循的。下面就排版中的字体样式、留白大小、对齐方式、色彩对比度四个要素来简单谈一谈如何科学提高移动端文本的易读性,提升设计质感。(找到设计依据之后,面对产品经理的质疑也更有怼回去的底气了哈哈哈)

大前提:明确设计目标

所有的设计都必须在这个前提之下进行。以下提到的数值只是一个参考,更重要的是你想通过页面传递给用户的信息,明确设计目标,以此对你的设计进行调整。否则,设计的意义便不存在了。

字体大小

通过字体大小去凸显内容、区分层级是一种设计趋势,同时也是ios11 的设计思路之一。那么,如何去选择字体的大小能达到比较好的效果呢?

material design对方块字主标题和内容文字的大小分别定为24sp和15sp,24/15=1.6,接近黄金比例;airbnb的主标题和内容文字的比例同样接近黄金比例。

实际上黄金比例的字号对比在移动端是一个适合突出主题的比例,是一个“美”的比例,但并不一定是一种适合阅读的比例。一个以阅读为主的页面在字号选择上可能需要较小的比例,若是你在字号的选择上缺乏信心,也可以用一些工具进行辅助选择,比如Modular Scale(Adobe的排版负责人Tim Brown创建的工具),其中囊括了历史上最令人满意的几种比例关系,通过这个比例进行匹配至少可以保证不出错。

文字留白

“留白”即在版面中留出空余的空间,处理好留白能使文本视觉流平顺,提升阅读舒适性。对于一篇文章而言,留白从小到大分别有文字中的空白、文字与文字之间的空白、行与行之间的空白、段与段之间的空白,留白面积的大小也要遵循这个顺序。

行间距的设定:行间距的设定直接影响了视线从前一行末尾移动到下一行开头的难易。行间距过高导致视线分散,容易游离;行间距过小则容易影响视线的移动,让人找不到正在阅读哪一行。普遍认可的做法是将行高设置为1.5em-2.0em。在这个基础之上,字体样式、大小、行宽还会对行间距的设定有一定的影响。

相关推荐
中文网页设计排版之破格的好例子
对齐是排版的基础技能 也是设计师的基本功
设计基础功!彻底掌握设计中的对比原则
设计教程:写给网页设计新手的10条实用法则
四大设计趋势教你如何你玩转2015年网页设计
网站策划:帮你掌握图文排版的5个小技巧
腾讯设计实战!响应式Web布局的概念和实践方法
7个技巧帮你设计出用户体验极佳的网页表单
UI布局设计:文章列表与内容详情页设计案例赏析
Web页面中的表格设计如何才能做得更好?
高用户体验的表单设计该怎么做?
网页首屏设计:让用户一见钟情的设计模式是什么?
UI设计教程:从零开始做APP之界面设计篇
跨屏幕的响应式设计如何做好用户体验?
移动端详情页设计:排版 构图 色彩 氛围点缀 字体怎么做?
电商设计教程:电商APP首页设计总结
优秀排版设计的8条建议
版式设计:深入浅出学会网格系统的应用
如何学会版式设计中的主要元素提取?
文字排版设计:如何设计出吸引视线的标题?
20个精致漂亮的视频播放器界面设计欣赏及点评
视觉设计:页面构建的审图与细节
15个超棒的无线移动终端UI设计案例赏析
响应式网页设计正成为移动互联网大势所趋
浅谈界面设计中的结构设计
分享:5招助你打造更加简洁的用户界面
浅谈界面UI设计中的包容性设计
国外精彩网页界面设计案例赏析
Photoshop教程:提高IOS设计效率的30个要诀分享
网站专题页面的视觉设计及结构布局要点分享
另眼观看用户界面扁平化设计的不足之外
产品视觉设计与用户心理的有趣现象
10个漂亮实用并附带源码的Web设计教程分享
优秀移动APP应用图标设计指南
在视觉设计中对像素的深度解析
什么是扁平设计?如何创建扁平化设计风格?

精彩推荐

热门教程