10条可以帮你提升用户体验的网页设计排版规则

所属分类: 平面设计 / 平面其它 阅读数: 1293
收藏 0 赞 0 分享
对于网页和APP而言,良好的排版不仅仅是摆上漂亮的字体就可以搞定的,高度的可读性和可识别性并不是简单的要求,视觉设计和内容风格也应当做好一致性。

虽然这些要求看起来和"高大上"的需求一样空泛,但是找准方向稍加训练,并不难做到。

所以,今天的文章我们将为你奉上10条可以帮你提升用户体验的排版规则,每条规则都附上实际案例助你理解和运用。

可读性原则

built-e1459411132331

网页必须使用非衬线体字体这种想法已经过时了,但是这种说法背后的核心思想并不过时:文本必须是易于阅读的。

想要挑选易于阅读的字体,手写字体、哥特字体和过于新颖的字体应当尽量避免使用。当然,如果是需要艺术性字体来做装饰的场景就另当别论了。

可读性优秀的字体在可识别性上也不错,并且他们通常不会特别的"显眼"。这些字体应该是"透明"的,这样可以让用户无障碍、下意识地接受,这就是他们的工作原理。

确保行间距足够宽

justactions-e1459411108854

行间距是影响用户阅读体验的关键因素之一,太过致密会令人阅读困难,有呼吸感的行间距则会令人着迷。尤其是如今大量用户在手机和平板上阅读,相对宽一点的行间距对于缓解阅读大量内容有相当的缓解作用。

而要控制好行间距需要牵涉到好几个变量:

·字体尺寸
·段落长度
·字体样式
·屏幕宽度

而非常遗憾的一点在于,并不存在一个固定的换算公式可以帮你搞定这一切,不过可以这么做:

·对于绝大多数网站而言,最佳行间距应该是字体高度的125%
·对于绝大多数移动端设备而言,最佳行间距是字体高度的150%
·宽松的行间距(比如直接空一行作为行间距)能让内容更易于被识别和扫描
·控制行间距的松紧,用双眼来浏览段落进行测试,基于感觉来进行调整

选择有字母含有大圆角的字体

对于西文字体,含有较大圆角和内空的字体更易于阅读。明显的圆角弧度让B和R这样的字体易于被识别,而内空则是O和Q这样字母的标志。

紧凑和致密的字体让眼睛难于辨识,而曾经在纸媒上流行过的较宽的标题字体,识别度就相当不错,因为当字体拉宽之后,不同字母的差异就越发明显。圆角弧度更大的字体看起来更接近于给孩子们设计的字体,而幼年时期对于字体所构建起的美学认知,是会伴随人的一生的。

让字体更大一点

theory11

毫无疑问,字体适当的放大会让人感觉更舒服。当然,字体的大小通常取决于你的实际需求,而在处理大段文字的时候,就需要注意了。

虽然不同的设计师在文字的处理上有着不同的想法,但是通常大家会认为每行的字符数量应当控制在45~60个之间(中文也有一个约定俗成的数量),而在移动端上,这个数量通常需要减半看起来才足够舒适。



找x高度较高的字体

grain

和中文字体不同,西文字体有上伸区和下降区,小写字母x的高度是这套字体的x高度。小写字母的整体比例会直接影响到阅读的体验。

x高度相对比例更大的字体更易于阅读,换句话来说,就是小写字母的高度更接近大写字母的高度。最理想的情况是,字体的x高度处于大写字母高度的三分之二到四分之三之间。

显示字体的字距调整

waza

细致到位的字距调整能创造好的排版。

正文的内容如此之多,仔细调整所有的字母间的字距当然是不现实的,而且也没有这个必要。但是对于标题字体和展示字体,字距的调整就相当有必要了。不同字母的笔画角度都不尽相同,每对字母之间的距离进行适当调整,让它们看起来像是天生一对那样。这样的细节能让你的设计在诸多网站设计中脱颖而出。

其实中文和日文的字体排版中也同样用到了字距调整的技巧,使用平假名和片假名尤其多的日本,在标题和展示字体的排版上经常会用到字距调整,来确保整体的视觉体验。

仔细思考比例

petra

当你在为一个项目挑选字体样式的时候,将不同部分的尺寸比例想清楚对于后续的设计相当有帮助。可能听起来好像有许多计算工作要做,但是并不一定麻烦,并且会对你的整个项目有极大的帮助。

我们之前所提到的行间距的设定,就是需要考虑的比例之一。除此之外,标题、副标题和正文的字体大小比例应当如何设定,怎么样设定尺寸大小才能营造出视觉的和谐感。刚刚开始把控比例的时候可能还不是太跟手,但是Tut Plus 有一个不错的教程,可以帮你理解这件事。

笔画统一的字体最理想

humbolt

再看字体笔画样式,笔画的宽度无疑是最重要的事情。超细的笔画由于缺乏对比度大多难于识别,而笔画太过于粗壮的字体可能存在同样的问题,阅读起来也相当的费眼睛。如果字体的粗细部分对比过于强烈、过于突然也可能带来一定的显示问题。

其实解决方案也不难,挑选字母笔画粗细适中,且笔画相对比较一致的字体就好了。这类字体可以兼容更多的背景,在可读性和适用性上相对更强。

克制地使用字体

moxhe-e1459411520902

只用两种字体。再强调一次,只能用两种字体。

控制字体类型的数量应该是每一个项目的目标。太多用户喜欢在一个界面当中疯狂地塞进各种不同类型的字体,这对于眼睛是灾难性的,阅读困难,甚至招致用户厌倦。

你可以挑选两个字体族作为常用字体——最多再挑选一款艺术字体用作展示之用——然后坚持使用这几种字体。想清楚每个字体在什么时候使用,在什么地方使用,这其中应当涉及到字体的颜色、大小和位置。另外,在不同的页面、不同设备上,字体的使用应该是一致的。

提升对比度

有许多时尚的网页设计会让背景和文字之间的对比度降低,营造出炫酷和融合的效果,但是内容的识别度就很低了,对于用户而言并不友好。

你的内容是网站的核心之一,所以重要性是毋庸置疑的。将内容和背景之间的对比度提升起来,让每个词都能在屏幕上清晰的识别出来,让用户轻松地获取信息。

网站所包含的文字内容越多,排版设计的重要性就越突出。排版结构舒适稳定、对比度明显和谐、安全用色都是你必须做到的事情。

更多精彩内容其他人还在看

UI设计师必看:详解最全面的组件化开发与设计指南

作为一个UI设计师,设计最重要的一点就是要符合产品功能逻辑,绝不是所谓的“好看”。而组件化的设计理念恰恰是最能帮助设计符合产品功能逻辑的,下面为大家带来详解最全面的组件化开发与设计指南,来看看吧
收藏 0 赞 0 分享

平面设计中相近性的应用技巧

相近性原则也取决于元素在背景上不同位置的放置,从而使人们获得各种不同的信息组合,而最清晰的效果就是利用白色背景来区分这些组合,今天为大家分享平面设计中相近性的应用技巧,来看看吧
收藏 0 赞 0 分享

相似的形状、颜色等其他特性在平面设计中的应用

在设计中相似的特性可以成为我们有力的工具,利用相似性,我们可以使两个相隔较远的元素在信息上联系起来,下面为大家详细介绍相似的形状、颜色等其他特性在平面设计中的应用,来看看吧
收藏 0 赞 0 分享

看看近30年奥斯卡最佳影片海报都长什么样子

今天为大家带来近30年奥斯卡最佳影片海报,看看都长什么样子,统计是从第59届奥斯卡开始的,因为之前的海报都太具有年代感了,对于设计朋友真的很值得过来学习,一起来学习吧
收藏 0 赞 0 分享

SVG格式的图片编辑修改方法

做分析的时候,经常会遇到一些SVG格式的图片,但SVG格式的图片并不能插入到Word文档中,并且需要按照期刊要求修改,怎么办
收藏 0 赞 0 分享

如何创造出好设计?教你利用坏图创造出好设计

虽然说一图胜千言,一张好图会说话。但在设计师的实际工作中,甲方不少,好图难得,碰到客户给的是烂图怎么办?还想不想要高端大气了?如果你的回答是肯定的,那就来看一下今天分享的这篇好文,实例分析,不纸上谈兵,文中涉及很多实用技巧,非常值得新手设计师阅读呢。
收藏 0 赞 0 分享

设计师必须知道的17个行业规则

设计这行摸爬滚打十几年,林林总总各行各业的客户接触不少,由于中国应试教育的不足,导致不少人对这一行业工作流程缺乏了解。本文就为设计师总结了17个行业规则,希望作为设计朋友认真阅读,这样在以后的工作中可以少走点弯路
收藏 0 赞 0 分享

如何才能做出有创意的作品 什么是好的创意

作为一名设计师,常常面对各种创意需求,但创意这种东西,在有限的时间之内,常常是没有创意的、没有灵感的,这让许多设计师苦恼抓狂。本文就向设计师朋友介绍如何快速打造有创意的作品的一些方法和发散思维的办法,希望能帮助到大家
收藏 0 赞 0 分享

图文搭配技巧:给照片配上文字的十个方法

图文搭配是是平面设计的基本功。给照片配上文字,与平面排版有相通之处,但因为偏重不一样,所以处理方式截然不同。本教程就为大家介绍十个图文搭配的技巧,教程比较实用,推荐过来与大家一起分享学习,希望大家喜欢
收藏 0 赞 0 分享

UI界面中首字母大写和小写有哪些优缺点呢?

UI界面中首字母大写和小写有哪些优缺点呢?对于很多朋友并不是很清楚,所以下面小编就为大家详细介绍一下,不会的朋友可以参考本文,一起来看看吧
收藏 0 赞 0 分享
查看更多