《网页设计技巧》系列之浅谈文本排版

2016-01-29 11:44 15 1 收藏

《网页设计技巧》系列之浅谈文本排版,本例为《网页设计技巧》系列文章之一的浅谈文本排版,作者通过对几个图例的分析,向大家简单介绍了在排版中会出现的一些问题,并给朋友们了一个相对比较好的参数供大家参考。当然设计本来就不要太过拘泥,所提供的都是一般性的提议,不同网站不同对待,不要过于拘泥作者给大家的一些参数。。。。。

【 tulaoshi.com - Html 】

太长时间没写文章了,主要是工作太忙。今晚上没睡着起来把这篇文章写了希望对初学者提供点帮助,同时也在此再次感谢曾经帮助过我的人与我所看书籍的作者们。

我们在做网页的时候自己画的图也不错,自己做的布局也很精致,做的图标也很漂亮,第一眼看起来也觉得很漂亮,但是看看就觉得不舒服。也不清楚为什么,这里我告诉你,也许就是你的排版出现问题了。由于排版的不合理,所产生的视觉效果会对读者的眼睛产生一定的疲劳影响,基本的毛病在于字间距太挤或太宽、行距太小或太大、段距太少或太多、每行字数太多或太少等这几个常见因素。下面的内容可以从图示中看出效果来,同时我会给大家一个相对比较好的参数供大家参考。当然设计本来就不要太过拘泥,我所提供的都是一般性的提议,不同网站不同对待,不要过于拘泥我所给大家的一些参数。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/html/)

大家看到上图,前三个是行距的问题:

第一个太挤了,都粘在一起了,这样眼睛在看这个文本的时候会需要花点时间去分辨,这样的排版会让读者看得很累。很不舒服。大家看一下自己手头上所做文本的是不是太挤了,如果是那就改一下吧!第二个是比较适中的,由于每行分得很清楚,这样看起来有很强的识别性。第三个是比较宽的,松了一点,这样看起来也很清楚,但是当你的文章不是一两行而是十几行与几十行的时候你就会觉得文章的连贯性产生了很严重的脱节,一般排版不会越过两个字体高度(2em)

下面两个就是字数的问题了,第四个每行文字太长,这样看起来头要摇来摇去,这样读者更容易显得很累。因为要不断的转动头,或是让眼球不断的左右摆动。最舒服的方式就是读者一眼看上去就能把一行看完,不然从行末到下一行行首也会形成断裂感。而下面的又太扁了,这样看起来也不是很舒服。由于在不断的换行阅读,眼球也会觉得不舒服。而推荐的最好的字数是:不大于45个字母,不大于30个汉字。

上面的图是关于段距的,第一个是比较合适的,这样的把段落分开了,让读者觉得文章并不是很多很难读,而如果不把段落当一回事,任其自然那么就会如下面一样,两段成为一段,这里是两段还好,如果是几十段,那么这个文章就很少有人能读下去了!

在经典论坛中的行距已经重新设定过了,现在发布长篇的文章就不会觉得糊在一起了,并且在链接上加了下划钱,对于色盲或色弱的朋友也容易识别,更为人性化了!

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/html/)

原文链接:http://andymao.com/andy/post/20.html

来源:http://www.tulaoshi.com/n/20160129/1483144.html

延伸阅读
图文混排是设计中极为重要的一项技术,同时它也极难达到完美的境界。要在网页首屏中呈现出完美的混排效果,你需要一张完美的照片,和足够出彩的文字排版。如果你准备接受挑战,那么请看接下来额10条技巧吧。 1、强化对比 Packdog Wearetelegraph 首先Banner中的文字必须具备可读性才行,所以你需要确认文字与背景之间的色彩搭配能让...
交互设计的本质是对用户行为的一种设计,直达内心的设计能够影响用户自身的情感,从而引导用户的行为、提升趣味性和愉悦度等,这些都是针对用户情感化设计的领域。针对用户情感进行设计时,需要考虑产品的用户群,有趣的交互设计将会为产品塑造个性,需要明确产品个性是否与目标用户相符。富有灵感和创意的设计与一般设计的区别在于,它不那么...
作为网页设计师,想要保证设计水准的前提下完成客户的年底上线心愿,你能想到的唯一办法就是昏天黑地的加班!这对设计师来说是一种很煎熬的折磨,今天我们在年末特别呈现网页设计的应急小方法,希望能把设计师从水生火热中解救出来。 虽然客户主观缩短了设计时间,但他们对网页的要求却不会因此降低一分一毫,要在短时间内设计出能让客户接受的...
说实话,第一次听到响应式图标我也觉得怪怪的,正如不久之前,人们为了让图标字体更适合不同设备,而更改它们的大小一样,但是这一想法却让响应式设计以及图标设计有了长足的进步。那么今天,我们就来八一八,这到底什么个什么玩意儿。 他是什么? 响应式图标并不是说图标大小会随屏幕尺寸的变动而改变,而是意味着图标会根据自己所处何种设备...
标签: Web开发
网页的版式设计---网页的排版与布局 很多朋友都想向我学习如何做网页,我知道他们的意思就是说要想向我学习如何用做网页的软件,如dreamweaver、flash、firework、photoshop等等,这些纯技术的东西我不想多谈,因为如今技术的发展一日千里,就是这种应用软件也是发展升级得非常的快。 今天的很多认为是较难实现的功能也许经过软...

经验教程

266

收藏

61
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部