可读性在网页设计中的重要性
如果您想订阅本博客内容,每天自动发到您的邮箱中,
当我们打开一个网站,我们会看网站界面是否美观,交互是否符合人性化,布局是否合理等等,这些因素对网站起到一定的影响作用,但最根本影响一个网站的是整个网站的可读性。
良好的设计应该都是可读的设计,如果信息都无法正常而清晰的传达,那么设计就失去了意义。设计的可读性和排版设计息息相关,与此同时,对比度的控制也是其中的核心。想要提升内容的可读性,让内容以更加顺畅、更符合逻辑的形式呈现在用户面前,可以通过以下几种方式来提高网页的可读性。
1。文字的可读性
要让文字提高可读性,可以通过调整字体样式、外边距、内边距、颜色和对比度等参数来提高文字的可读性。
-
字体样式:字体的样式会影响可读性。
-
行长度:每行的字符个数对于整体的可读性起着主要作用。如果文字段落非常宽,阅读性差。同理,每行文字太短也不行,会给读者的眼睛带来压力,造成混乱。
-
外边距和内边距:和行距一样,元素周边和之间的空隙也影响着用户阅读文字本身。
-
颜色与对比度:文字颜色与相应背景也至关重要。如果在绿色背景上写绿色文字,就难以阅读了。设计师选择浅色字深色背景,或是深色字浅色背景,都是有原因的。对比使得字符容易阅读。
目前文章内容流行的字体是14PX(像素),这样不容易造成视觉疲劳。可以统一去设置全局的字体大小,包括行距。
除此,文字链接最好用颜色或是其他样式跟正文区分开来,这样读者可以清楚的知道哪里可以点击。例如:可以给a标签写个下划线代码text-decoration: underline;。
2。段落的可读性
段落的可读性一样可以用过文字和图片来提高。文字方面跟上面提到的,可以通过字体样式、外边距、内边距、颜色和对比度等参数来调整之外,还可以通过段落行距来调整字段间距。
-
行距:每行文字间的间距也同样重要。看看这篇文章,如果每行文字都与上下两行粘在一起,你就无法理解这些句子。
可以从上图看出,文字段落之间不留白可读性不高。右边的标题和段落之间、行与行之间和段落与段落之间都留了一定的距离,所以整体会显得更为整洁和可读性高,这些在网站当中用Margin、Padding和Line-height可以来调整留白的大小。切记,行距大小不是越大越好,一定要适当。
在通篇文字的文章当中也可以考虑适当的穿插一两张图片进去,配图可以提高文章的可读性。
3.区块的可读性
区块间也要有一定的间距才能提高区块的可读性。
区块留白这个有点类似上面的文字段落留白,在网页当中,每个区块与区块之间也要适当的留白,而这个留白主要还是体现在Margin和Padding上。如果取消两个区块的Margin和Padding,那两个区块的内容会聚集在一起,这样不利于观者去区分区块之间的关系,也不利于阅读。所以一般我们在给网站做界面的时候,都会设置一定的间距,就像蝉知系统中默认的间距是7px,当然,这个间距的大小都是可以调整的,看你怎么去设计这个页面和页面的整体风格是否和谐而定。
可以看到上图左侧区块之间的间距为0,整体区块和区块之间看不出间隙,给人拥堵的感觉。但是右侧留有一定的间隙,所以看起来比较舒畅,可读性也相对高很多。
4.图片的可读性
为什么说图片也具有可读性,要知道一张好的幻灯片设计可以起到一定的作用,大部分的网站第一眼看的就是幻灯片,所以图片的设计也不能忽视。
图片的设计可以通过对比来设计,比如色彩对比、字体对比等。切记勿用复杂的背景来当幻灯片,这样标题在画面上就不够突出。
上面的例子,显而易见,当图片背景比较复杂的时候,文字的阅读性就差一点。第一张图的背景比较简洁大方,加上不用设计的字体,自然而然的主题就凸显出来了。
5.导航的可读性
说到导航,这个其实是整个网站架构当中最重要的,所以我也把这点放到最后来讲。网站一定要有清晰的导航,方便读者浏览和了解整个网站的架构。所以在设计导航的时候一定要考虑到浏览者的习惯。
-
导航要简单明了,避免奇怪的布局。
上面这个导航不是说做得不好看,而是找交互的设计用起来让用户会有点不舒服,导航下拉时,除头部内容整个页面整体下移,这也可能就是设计师特意做的效果,但是很明显,效果不是特别出彩。
-
导航点击状态下的样式和普通样式需要有明显区别。
上面的这个导航,点击状态下和正常显示的样式效果区别不大,所以识别性不够高。
-
导航的层级关系设计简单点,最好不要超过三级。
现在很多导航设计都将二级导航和三级导航放在一起,这样受众在浏览的时候也可以更清晰网站的架构。
优秀的网站,通常在用户体验上非常用心,而网站良好的客户体验除了优秀的界面设计、合理简洁的框架布局,还有一点至关重要——网页的可读性。
蓝设计( jdw123.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
最新碎语
- 未来的个人只有具备以下六种技能后,才能从容应对未来的各种挑战,排名第一的技能就是设计能力。其它的五项技能分别是:讲故事的能力、整合事物的能力、共情的能力、会玩儿的能力,以及在任何事情中找寻意义的能力。
2018-09-29 18:02
- 当你没有任何产品可以拿去卖或者搞促销的时候,你就会在最大程度上提升价值这就是正式推出产品前的几个月(或者几年)是最好时机的原因。你的产品会变得100%真实可信。产品的发展道路将不会出错,人们会乐意加入进来。如果你给他们足够的收益,那么他们就会感激你,未来你也就可以依靠他们了。
2018-08-26 08:23
- 在你的领域成为专家,不断为他们提供高质量的产品,最重要的是关注你的用户,并为他们带去真正的价值。
2018-08-26 08:22
- 我知道我们都希望自己可以快速成长,是的,建立真正的关系式是难以衡量的。但是,如果你关注你的用户,能为他们带去真正的价值,那么你就已经打下了成功的基底了。这关键的一步可能会让你在未来对其他资源有预先衡量的优势。
2018-08-26 08:18
- 何为第一?所有的人都需要你的时候,你能够给他们带来所需要的,你就是第一。任何事情都有它的顺序,讲因缘,时节,果报,要一步一步来,时间未到,你想也没有,时间一到,你不想它也有。德和得分别代表了内在和外在,它也代表了同一种东西的两个状态:能量和质量。
2018-06-28 09:07
链接
blogger
蓝蓝 http://jdw123.com
存档
- 2019年2月(7)
- 2019年1月(45)
- 2018年12月(41)
- 2018年11月(40)
- 2018年10月(29)
- 2018年9月(40)
- 2018年8月(87)
- 2018年7月(107)
- 2018年6月(86)
- 2018年5月(110)
- 2018年4月(40)
- 2018年3月(35)
- 2017年8月(35)
- 2017年7月(45)
- 2017年6月(7)
- 2017年5月(27)
- 2017年4月(51)
- 2017年3月(70)
- 2017年2月(65)
- 2017年1月(69)
- 2016年12月(55)
- 2016年11月(111)
- 2016年10月(92)
- 2016年9月(53)
- 2016年8月(9)
- 2016年7月(4)
- 2016年6月(9)
- 2016年3月(19)
- 2016年2月(26)
- 2016年1月(30)
- 2015年12月(33)
- 2015年11月(35)
- 2015年10月(46)
- 2015年9月(43)
- 2015年8月(40)
- 2015年7月(33)
- 2015年6月(46)
- 2015年5月(58)
- 2015年4月(70)
- 2015年3月(55)
- 2015年2月(17)
- 2015年1月(33)
- 2014年12月(21)
- 2014年11月(84)
- 2014年10月(94)
- 2014年9月(6)
- 2014年8月(1)
- 2014年7月(13)
- 2014年6月(66)
- 2014年5月(99)
- 2014年4月(88)
- 2014年3月(102)
- 2014年2月(68)
- 2014年1月(83)
- 2013年12月(106)
- 2013年11月(112)
- 2013年10月(61)
- 2013年9月(20)
- 2013年7月(13)
- 2013年6月(27)
- 2013年5月(48)
- 2013年4月(39)
- 2013年3月(8)
- 2013年2月(20)
- 2013年1月(31)
- 2012年12月(33)
- 2012年11月(31)
- 2012年10月(23)
- 2012年9月(8)
- 2012年7月(14)
- 2012年6月(15)
- 2012年5月(31)
- 2012年4月(24)
- 2012年2月(4)
- 2012年1月(8)
- 2011年12月(35)
- 2011年11月(32)
- 2011年10月(13)
- 2011年8月(1)
- 2011年6月(1)