网站中文字的视觉设计
作者:tony 来源:懒得设计 发布时间:2008-04-16 13:35:00
可能很多人都要问,网站的文字还需要设计吗?
对于很多的网站来说,字在整个网站的内容中占了80%以上甚至更多,或者换个角度上说,网站可以没有颜色,没有图片,但唯独不能没有文字。
一个产品团队,有一个角色叫做Content Design,ucdchina有过一期话题叫做 注意界面上的文字 ,非常精彩,我在写本文之前,再次通读一遍,一方面是学习,另一方面,是避免写重复的内容。如果你按照里面的观点对照你的网站,相信一定会有所帮助的。
那期话题只有 潇潇重点说的是文字的视觉方面 ,那篇文章非常精彩,也是该期话题的“浏览冠军”,本文是延续性的一些想法。
先看看网站以外的中文字体设计,英文的正文字体有很多可以选择,但中文的正文字,总的来说就两种:宋体和黑体。在传统的版式设计中,设计师们都喜欢做英文的排版,为什么?从视觉上来看,英文的组合很容易形成线和面的关系,而且字母有节奏感,比如aby这三个字母放一起有高矮区别。中文字相对来说,单调、孤立、不流畅。
回到网站中文字的设计,设计师基本上不用考虑在字体上做选择,只有宋体。前文说:单个字成点,一行字成线,一段字成面。这是版式设计最基本的原理,我们需要做的就是强化这样的感觉。拿微软雅黑和宋体来举例子,本人非常喜欢微软雅黑的设计。
将12号的宋体和雅黑放大,注意以下细节:
雅黑要比宋体宽一像素
雅黑让每个笔画往四周撑,比如“是”上面的“日”,雅黑显得就要饱满
这么做的目的只有一个,让中文字体更容易形成线,从而读起来更流畅。我们可以看到,尽管雅黑不是真正的正方形,但它看起来要比宋体方一些。
看完上面这个例子,我的观点也就出来了:别把你的文字看成字,而是看成点,文字的视觉设计其实就是处理点线面的关系。
下面是具体设计方面的点:
字体的单位用em而不用px,尽管12px和0.8em大小差不多。
updete:感谢网友 Dreamcolor 推荐文章 95%的中国网站需要重写CSS ,该文很详细的解释了px和em的差别和原理。这点写之前是我想当然了,没有深入理解em单位。只看到很多用em的视觉效果不好看,现在明白了,是因为没有把em单位和px对上号。结论是应该用em而不是px,但需要把em的值设置好。在css文件body中的font-family里面保证”宋体”前面有Arial或者verdana,个人推荐这么写:font-family:Helvetica,Georgia,Arial,sans-serif,宋体。这样能保证你界面中的字母、数字、符号看上去美观一些,更重要的是更加易读。
子条 说:12号宋体时,我们一般使用18-20像素的行距。14号宋体通常使用22-24像素的行距。
很赞同,这个行距大小随着单行字数的多少而上下浮动。我认为12px字如果单行字数少的话,17也是可以接受的。正文一行字数最好不超过50,首页的标题文字以8-20字为佳。
12和14px字相对来说最精致,13px在需要的时候可以做正文字,word里面默认的字的大小相当于网页的13px字。
对于一段文字,尤其是正文部分,保证左右至少有15px的留白,便于用户换行时不受到干扰。
文字和背景对比要足够明显,保证最弱文字的可读性。
PS1:给 Denis 的 可爱的女儿晨晨设计的wordpress主题 今天出炉了,细节方面还需要再调。那丫头着实地可爱!
PS2:有一些朋友给我来邮件让我给贵站提建议,我在写完这系列视觉设计的文章之后,统一给予回复。我觉得可以从文章观点中,是否能得到一些帮助呢?尤其是可以看看ucdchina的话题。
猜你喜欢
- 我们可用下面的代码将服务器端变量转换为客户端的JavaScrit变量:<%@ Language=VBScript
- 请先看看以下演示中的图案文字。这可不是图片效果,而是用CSS滤镜中的Chroma() 语句做成的文本文
- ACCESS有个BUG,那就是在使用 like 搜索时如果遇到日文就会出现“内存溢出”的问题,提示“80040e14/内
- 简介如果你经常网上冲浪,这样参差不齐的多栏布局,是不是很眼熟啊?类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如 Pinteres
- Q. How can I restrict access to my SQL Server so that it only allows c
- 如今,互联网越来越走近我们的生活,网上冲浪也渐渐成为我们生活不可缺少的一部分。网络世界五彩缤纷,涌现出大量优秀精美的网页。大量网络信息的呈现
- 你家中的CD、VCD一定很多吧?是不是常遇到为找一张CD把一抽屉的碟子翻得乱七八糟的情况,你一定没少受埋怨——你不想整理它们一下?如:影片是
- 对于使用虚拟主机的站长朋友,我们可能不知道该服务器是否安装了某种我们需要的组件。这时我们可以使用下面的代码来判断。该函数功能:检查是否存在系
- 很常见的一个图片轮播Flash,使用之后发现在IE下按F5刷新之后Flash区域就变成一大块背景色,内容轮播出不来了。有趣的是右键点击Fla
- 没什么说的,就是生成随机数而已!!相关文章推荐:8个asp生成随机字符的函数<% Function gen_key(digi
- 创建与打开站点启动FrontPage XP,选择菜单“文件/新建”,再单击“网页或站点”命令选项。在“新建网页或站点”任务窗格
- 我还我还是有必要改一个标题,(原题为 让你想不通的"bug"),以免有同学误会。先看代码。看完之后我有个问题提问一下,看
- 在 asp 应用中,经常用到 Session 对象来保存用户临时私有数据,而 asp 的 Session 对象是依赖于浏览器的 Cookie
- 内容摘要合理使用渐变留白网格布局提高字体应用明确而有效的导航设计漂亮、有用的页脚介绍优秀设计和卓越设计之间的区别是比较小的。一般人可能无法解
- mysql优化了所以先说说这个,其实这个,很复杂,对于不同的网站,其在线,访问量,帖子数量,网络情况,以及机器配置都有关系,优化不是一次可以
- 1> 如何在浏览器地址栏前添加自定义的小图标?你是不是记得有时在浏览网易网站的首页时,在地址WWW.PUTAOJIAYUAN.COM前
- asp之家注:本文介绍了使用asp来获取access数据库中的一条随机记录的方法,简单实用,相信对初学者有所帮助,根据这个方法其实我们可以实
- SQL Server服务器的配置选项属于那种人们了解较少且经常误用的选项。当一个技术支持人员要求你按照某种方式调整一个选项、而另一个技术支持
- 错误代码错误消息说 明ASP0100Out of memory内存不足(不能分配要求的内存)ASP0101Unexpected
- 当一个页面上有一百个表单项,你是怎么获取上面的值勤的?这是一段简单的代码,你试试这段代码,试过后,欢迎留言说一下你的想法?index.asp