几大网站设计中网页文字链字号与行距对比

2018-07-23  百度文库  人阅读

通过对比各网站文字列表的呈现效果,挖掘主要影响因素,能对这些因素进行深度关注。

淘宝

淘宝在文字行距的处理上相比各大门户网站并不考究,尤其一些细节的列表部分的处理不好,导致页面看起来并不规整。

从比较新的淘宝商城页面来看,在文字处理上有了比较大的改善,主要的特征表现为文字链行距较大,而说明性文字行距较小,有比较明显的区分,而下划线几乎没有出现在页面中。

网易

比较而言,网易全站的文字链间距相对比较规范,14号黑色文字链间距为23,12号蓝色(或黑色)文字链间距为20,不设下划线;

两栏的分栏方式,大标题带小标题的推送形式,便于用户快速了解资迅内容。

存在的主要问题是字体颜色使用混乱,如大标题后面的小标题其实是内容提要,大部分情况不可点,但蓝色的字体却造成可点击的假象,同时会困扰其他可点击的12号蓝色文字链。

和讯

和讯全站的文字链间距也比较规范,除了首页外,其他重要二级都采用14号黑色间距为24、12号蓝色(或灰色)间距22的文字链规范,整体感觉比较清晰、整齐。

相比二级页,首页12号小字、间距为20的文字链推送形式显得过于拥挤,虽然5-8条文字链之间有虚线加以分割,仍让眼睛感觉不负重荷。

搜狐

搜狐各页面行距并不统一,在下划线的使用上没有统一化,除首页链接统一使用下划线外,其他有下划线的页面中通常采用大字采用下滑线,而小字并不采用的形式,这种方法的使用能比较好的体现重点突出的特征,值得借鉴。

在文字颜色的使用上,采用明度并不高的蓝色,对比新浪首页的蓝色,视觉感比较柔和。

以搜狐新闻首页为例,整体感觉中间蓝色带下划线的列表视觉比较突出,两侧灰色无下划线文字比较弱化,较好的实现了中部突出,两侧弱化的特征。

搜狐奥运站虽然整体采用黑色文字,但在下划线的使用上仍然是大字列表使用而小字列表不使用。

与其他二级页面不同,搜狐首页包括小字列表在内,都大量采用蓝色文字及下划线,实现所有内容的视觉强化。

腾讯

通过数据对比,腾讯的行距普遍要高于其他几个门户网站,字号为14px的文字列表常用26px的行距,如:新闻频道;字号为12px的文字列表常用22px~24px行距,最高用过25px行距。

腾讯除了新闻频道的文字列表有下划线,通常其他频道都采用无下划线的文字列表。

由于页面上的留白较多,行距较大,页面普遍显得比较清晰(可通过各门户新闻频道进行对比)。但是,页面呈现的内容显得较少。

正是由于行距较大,尤其是短标题板块,会显得过于凌乱、松散,以读书频道为例。

那么问题来了

灰色字是否应该加下划线,是否让人感觉不可点击?

几条由短文字链拼接的文字列表,是否应该加下划线,或分割线,无下划线是否会让人犹豫点击哪个?是否应该提示用户短文字链的存在?

统计来看,14号文字链的间距一般在23-28之间,12号文字链一般在19-22之间,呈现的效果有较大区别。哪种间距最利于阅读?是否受其它因素的影响?

统计来看,字体的颜色主要有黑色、灰色(不同程度的灰色)、蓝色(不同程度的蓝色)这几种,他们之间如何搭配?哪种灰色和蓝色比较利于用户阅读?