Archive for May, 2008
Protected: 关于整改dede内容管理系统的建议
There is no excerpt because this is a protected post.
Web页面设计时的文字布局设计
ps: 这篇文章是有感而发的,前一阵子在和公司美工讨论页面布局的细节时发生了争执,之后美工愤然离去.久经思考后,决定写此文章,杜绝今后发生这样的事情.
网页的文字&布局一定要设计
网页中,文字占整个页面非常大的部分,如果在页面设计时仅仅重视视觉的冲击而使用大面积的图像(以此改变图片与文字的比例).这样会降低页面的可读性,并且也会使这个页面的内容(文字叙述的内容)失去强调.
请再翻开你大学时的课本
以下段落引自 ucdChina
先看看网站以外的中文字体设计，英文的正文字体有很多可以选择，但中文的正文字，总的来说就两种：宋体和黑体。在传统的版式设计中，设计师们都喜欢做英文的排版，为什么？从视觉上来看，英文的组合很容易形成线和面的关系，而且字母有节奏感，比如It’s Tom’s body.这个字母放一起有高矮区别。中文字相对来说，单调、孤立、不流畅。
我们说:构成的基础就是点线面,那么对于相对单调的中文来讲,更加是这样,翻开你的课本,再次阅读一下那些关于 [点] 构成的章节.
回到网站中文字的设计，设计师基本上不用考虑在字体上做选择，只有宋体。前文说：单个字成点，一行字成线，一段字成面。这是版式设计最基本的原理，我们需要做的就是强化这样的感觉。拿微软雅黑和宋体来举例子，本人非常喜欢微软雅黑的设计。
将12号的宋体和雅黑放大，注意以下细节：
1. 雅黑要比宋体宽一像素
2. 雅黑让每个笔画往四周撑，比如“是”上面的“日”，雅黑显得就要饱满
这么做的目的只有一个，让中文字体更容易形成线，从而读起来更流畅。我们可以看到，尽管雅黑不是真正的正方形，但它看起来要比宋体方一些。
看完上面这个例子，我的观点也就出来了：别把你的文字看成字，而是看成点，文字的视觉设计其实就是处理点线面的关系。
文字布局设计时具体注意的点:
1. 字体的单位用em而不用px，尽管12px和0.8em大小差不多。
2. 在css文件body中的font-family里面保证”宋体”前面有Arial或者 verdana，个人推荐这么写：font-family:Helvetica,Georgia,Arial,sans-serif，宋体。这样能保证你界面中的字母、数字、符号看上去美观一些，更重要的是更加易读。
3. 12 px 宋体时，我们一般使用18-20 px 的行距。14 px 宋体通常使用22-24 px 的行距。这个行距大小随着单行字数的多少而上下浮动。12 px 字如果单行字数少的话，17 px 也是可以接受的。
4. 正文一行字数最好不超过50，首页的标题文字以8-20字为佳。
5. 12和14px字相对来说最精致，13px在需要的时候可以做正文字，word里面默认的字的大小相当于网页的13px字。
6. 对于一段文字，尤其是正文部分，保证左右至少有15px的留白，便于用户换行时不受到干扰。
7. […]
