[经验分享] B2B行业网站“文字样式设计”一般标准（2）

914 主题	1 听众	2万积分

资深设计师

Rank: 7 Rank: 7 Rank: 7

纳金币: 23732
精华: 0

电梯直达

楼主

发表于 2011-12-16 10:23:39 |只看该作者 |倒序浏览

6 B2B行业网站辅助内容字号、粗细、行距、颜色一般标准
辅助内容包括很多地方，比如首页的信息发布时间，信息参数，博客评论次数等，以及产品列表页产品参数、地区等，内容页信息发布时间、来源、编辑等，这些都是属于辅助信息。在设计的时候，需要对辅助内容进行弱化，才能突出访问者最先想了解的内容，使页面更有层次感。
一般标准为：
A 字号：大部分都是12PX，还可以使用11PX。
B 粗细：绝对不能加粗。
C 行距：150%，如果有多行，就要减少行距，120%左右，减少行距，也是弱化的一种方法。
D 颜色：颜色用灰色，一般采用#666666—#999999，灰色是辅助内容最大的标志，如果一个网页设计师设计出来的网页，对辅助内容不使用灰色，那是完全不合格的。

图（95）华人螺丝网产品列表页
上面网站产品列表页，辅助内容就是中间的型号等内容，包括公司名字都采用了弱化，字号为11PX，比我认为的12PX更小，未加粗，行距150%，中间的我认为行距更低一些更好。
7 导航页、内容页“引导内容”字号、粗细、行距、颜色一般标准
所谓引导内容，与上节讲的辅助内容有一定的相似，就是引导访问者对内容有一个简单的了解，引导访问者进一步阅读更多内容，一般常用在推荐文章、信息介绍、文摘摘要等地方。
一般标准为：
A 字号：大部分都是12PX，甚至更小的11PX。
B 粗细：绝对不加粗。
C 行距：120%，减少行距，也是弱化的一种方法，减少了行距，它占得位置就更少，就更不容易引起重视，达到弱化的效果。
D 颜色：颜色用灰色，一般采用#666666—#999999。

图（96）全球纺织网资讯频道推荐资讯
上面网站频道推荐资讯，标题用了蓝色，估计为16PX，加粗，很突出，标题下面的引导内容颜色为灰色（估计是#666666）字号为12PX，我认为行距可以更小一些，才能起到弱化的效果。
8 内容页信息“标题”字号、粗细、行距、颜色一般标准
无论是产品介绍，还是公司介绍，以及资讯文章，社区博文，论坛帖子，都可以统一称为信息，都会有一个标题，不同信息的标题有一些差别。
一般标准为：
A 字号：大部分都超过14PX，资讯的标题更大一些，达到18PX-22PX，产品信息小一些，16PX左右。
B 粗细：绝对加粗。
C 行距：150%。
D 颜色：主要是黑色、蓝色等颜色。

图（97）食品商务网资讯标题
上面网站标题，字号为24PX左右，加粗，颜色为灰色，没那么刺眼。

图（98）阿里巴巴产品信息标题
图（98）为阿里巴巴产品信息标题，字号为14PX左右，加粗，颜色为黑色，产品信息标题更小一些，其实我认为再大一些也是可以的，比如16PX左右。
9 内容页信息“正文”字号、粗细、行距、颜色、背景一般标准
只要是信息的正文，不论是产品，企业介绍，资讯文章，博文，帖子，内容都可能超过500字，甚至几千字，从用户体验来说，如果长时间看大量内容，字就要更大一些，这个不仅是用户习惯，从阅读行为来讲，也是绝对有道理的。
一般标准为：
A 字号：必须为14PX，我看到过一些网站，资讯内容居然是12PX，我一看到这样的网站，对他们整个网站产品就印象很差，觉得怎么能这样的设计呢？最基本的标准都不符合。
B 粗细：不加粗，编辑在修改文章的小标题时要加粗，由编辑完成，与页面设计无关。
C 行距：150%，这个基本是绝对的标准，绝大部分都是这样的。
D 颜色：黑色或灰色，有的为了使阅读起来不刺眼，使用了灰色，一般灰度不低于#555555。
D 背景：为了使阅读起来，眼睛不太累，可以不使用纯白色的背景，可以使用浅蓝色、灰色作为背景。和出版的书一样，正规印刷品的纸张都不是纯白色的，而是有一点泛黄。

图（99）新浪网资讯最终页内容
图（99）为新浪网资讯最终页内容，字号为14PX左右，未加粗，颜色为#333333左右，行距150%，背景为灰色。我们也可以使用纯白色为背景，很多网站也是白色背景的，不过本研究报告认为，加点淡淡的蓝色或灰色背景色更好，读者看起来眼睛不累。
本文原创作者：李学江，欢迎交流指导咨询。

本文来自：http://www.chinaz.com/manage/2011/1215/226632_2.shtml

网站文字样式设计标准