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

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

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

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

  第一个太挤了,都粘在一起了,这样眼睛在看这个文本的时候会需要花点时间去分辨,这样的排版会让读者看得很累。很不舒服。大家看一下自己手头上所做文本的是不是太挤了,如果是那就改一下吧!

  第二个是比较适中的,由于每行分得很清楚,这样看起来有很强的识别性。

  第三个是比较宽的,松了一点,这样看起来也很清楚,但是当你的文章不是一两行而是十几行与几十行的时候你就会觉得文章的连贯性产生了很严重的脱节,一般排版不会越过两个字体高度(2em)

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

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

  在经典论坛中,发表文章不好设定行距与段距,所以有的朋友在看一些好文章都看不下去,这就是因为文章没有很好的排版。当然有的朋友用的是1024*768的分辨率,看起来就有点吃力,因为一行很多。而800*600的用户就会觉得好得多了!所以我很多文章都在打完之后分行,不然真的没办法让大家看清楚这里讲了什么东西。当然这样的做法也难为了网站的编辑,他每次都要把这些分行去掉才行!呵呵,在此深表歉意!

  补充:

  关于“单词间距”“字母间距”“垂直对齐”“水平对齐”“文字缩进”“空格”“显示”在这里面设置,如下图:

时间: 2024-08-01 07:39:06

《网页设计技巧》系列之一 浅谈文本排版的相关文章

网页设计技巧系列之文本排版

技巧|设计|网页|网页设计 太长时间没写文章了,主要是工作太忙.今晚上没睡着起来把这篇文章写了希望对初学者提供点帮助,同时也在此再次感谢曾经帮助过我的人与我所看书籍的作者们. 我们在做网页的时候会发现:自己画的图也不错,自己做的布局也很精致,做的图标也很漂亮,第一眼看起来都觉得很漂亮,但是看看就觉得不舒服,也不清楚为什么-- 这里我告诉你,也许就是你的排版出现问题了.页面排版不合理产生的视觉效果会让读者的眼睛产生的疲劳感,基本的毛病在于"字间距太挤或太宽"."行距太小或太大&

网页设计之入门经验浅谈

  对于网页设计,我还是有一定的发言权的,多年的互联网工作经验,公司的自己的作品也有一些了,我认为对于网页设计这个方面来说,设计是一个不断学习的过程,对于网页设计,我的感想有以下两点. 第一,懂得网页设计 不管你去做什么东西,你都需要先去了解它,这是我们认知的一个基础的前提,那么对于网页设计,有的站长认为网页嘛,不需要那么刻意的去设计,只要自己的网站文章原创,搜索引擎收录,权重高,那么网页就无所谓了.其实这个想法是片面的,这样做出来的网站,完全忽略了用户的感受,就算你的网站在搜索引擎上被用户找到

CSS网页设计技巧:input按钮在IE浏览器的兼容问题

文章简介:CSS网页设计技巧:input按钮在IE浏览器的兼容问题. 这段时间在处理网页默认的input 按钮时,IE下常显现不一致的宽度问题,让人感到很纠结.所以今天请教了几位高手把这个问题解决了,现在贴出来和大家共享一下,当然这个方法在网上曾有人写过,大家可以一起来相互探讨一下. Html Code: <input type="submit"; class="form-submit" value="subscribe" name=&qu

网页设计技巧:特殊人群的设计关怀

文章描述:网页设计技巧:特殊人群的设计关怀.   2010年12月,Thomas应邀参加中国交互设计体验日大会,展开了一次主题为<特殊人群的设计关怀>的演讲.演讲主要介绍了在做产品设计时,公司对于特殊群体的一些考虑.以下是对这次演讲的现场记录: "盲人对QQ的依赖度非常高." 在正式演讲之前,想请大家看一段视频.大家可以看出这是个怎样的用户吗?是的,这是一位盲人.可能很多人会吃惊,盲人怎么可以使用QQ?其实盲人不光使用QQ,他们正在利用互联网的很多服务充实自己的生活.我们关

登陆网页设计技巧深入分析

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 在前面"案例分析:高转换率的着陆网页设计技巧"内容,我和大家分享了高转换率着陆网页设计技巧,在本篇文章中,继续和大家一起分享登陆页面设计实践. 商业性较强的的主登陆页面,简单设置 诱惑性极强,给页面创意四射的激情,多步骤形式,细分网站观众,当场得到与游客视频对接六个设计技巧是高转换率着陆网页设计必须要达到的,这里补充四点.

网页设计技巧:创建网页背景材质的方法

文章描述:网页设计技巧:创建网页背景材质的方法. 在网页设计中创建背景材质通常是根据设计方向展开设计的第一步,也是确定设计基调的重要环节.虽然大多数情况下,网页背景材质是非常细微和低调的,但是由于整个背景的范围较大,所以会给人强烈的心理感受.所以这篇文章中,我会就网页背景材质创建过程中常用到的方法做一总结,希望对于大家在设计中的开头步骤能够给与帮助的参考. 一.使用现成的图案来创建网页背景材质. 1.下载现成的图案样式,或者自己动手创建图案,关于如何自己创建图案,之前我写的一篇文章<在Photo

浅谈网页设计技巧

  首先我们需要了解一下网站的页面组成,网站一般包括以下几部分: 首页:网站的门面,如同公司的形象,特别注重设计和规划. 框架页:网站的主要结构页面,又称次首页.内页,大型网站往往框架页即首页,如一些门户网站.框架页主要是网站内部主要栏目的首页,讲究风格的一致性,并于主页呼应. 普通页:网站主要的承载信息的页面,设计要求不高,但要求链接准确.文字无误.图文并茂,并沿袭网页的风格. 弹出页:一般用于广告.新闻.消息.到其他网站的链接等等,一般用的很少. 通过上面的分析,我们可以看出: 从功能上来看

网页设计技巧谈:走出路径的困惑

技巧|设计|网页|网页设计 如果您刚刚开始接触网页设计,是不是经常发生这样的问题呢?做好的网页在自己机器上可以正常浏览,而把页面传到服务器上就总是出现看不到 图片 , css 样式表失效等错误.这种情况下多半是由于你使用了错误的路径,在应该使用相对路径的地方使用了 绝对路径 ,导致浏览器无法在指定的位置打开指定的文件. 下面我们就来谈一下最让初学者头疼的相对路径与绝对路径的区别问题. 什么是 绝对路径: 大家都知道,在我们平时使用计算机时要找到需要的文件就必须知道文件的位置,而表示文件的位置的方

网页设计技巧:设计精美网页图标技巧

文章描述:满足四大要素!让网页设计中图标更有吸引力. 图标在网页设计中用途广泛,几乎每个网站中都存在着图标.通过这些小小的图标,可以方便的实现视觉引导和功能划分.如果选用恰当,图标能和页面中的图片有机融合,保持视觉上的一致性,同时也能够和整个网站的风格相契合.图标并不是华而不实的小玩意儿,小图标有大用处.在网页设计中,如果设计师并不擅长图标设计,那么就需要在图标选择上下功夫了. 一般来说,根据使用手法.使用场合的不同,一张图像可以有多种解读,图标亦如此.图标不但能够吸引用户的注意力,还能分割页面