设计理论:门户网站在文字视觉呈现分析
屎文陈述了门户网站在文字视觉呈现上的一个现象:
同一行文字中,可能包含两条新闻链接,而这两条链接之间的语义关系可能很多样,但并未通过视觉呈现来直观表现这些关系。
图1:网易首页“新闻”豆腐块中的链接
如图1所示,在短短的几行新闻中,虽然视觉上统一用空格做分割,但至少有四种语义上的差异。
综合屎文和屎大师的原话,这种“不做任何事情”的视觉表现,会导致以下问题:
1. 对用户:降低阅读速度&增加理解成本。
不同语义关系都用同一种视觉表现,无法预期何时出现哪种关系,只能扫视整行,且增加思考负担。若做图2的视觉处理(字体缩小、颜色差异),用户知道后半句是对前面的解释,那么如果看了前半句不感兴趣,TA大可不必费神看后半句。
图2:网易新闻中心的链接形式
2. 对网站:降低更多链接条目的可发现性。
同行塞入多条链接是为了有效利用版面,增加点击率,但没有视觉差异,会使某些内容或功能被忽略,浪费资源位。如图3中,“专题”、“图集”很可能被忽略。
图3:网易新闻中心的链接形式
屎大师进而根据网易的设计,提出了三种视觉处理方案:用字号、用颜色(图2)、用符号(图4)。
图4:用符号分隔
我同意屎大师所指出的这个问题,但我认为屎大师没有在该问题最典型的情景中展开他的陈述,从而削弱了观点的说服力。他所提出的这个问题,在他所举案例(门户资讯首页)的严重程度,远不及该问题在功能型页面中的严重性。下面分别从他认为会造成的两处问题做出反驳。
1. 对用户:
首先,屎大师所认为的阅读效率问题,是基于他认为我们都是一整行地扫视的。但在实际阅读中,我们更多是跳着、挑关键字阅读。其次,对于行宽这么窄的一个版块,空格前后的两段文字可能同时就进入视域了,视觉焦点的移动也可能是在1秒以下级别的。屎大师举的正例来自网易新闻中心,但为何网易首页的新闻排版没有用同一种模式,而是任其混乱?比较一下两个页面会发现,首页一行的行宽,等于新闻中心一行的一半。也就是说,即使不做任何视觉处理,对用户在这么窄的板块里阅读并不会有多少影响。
而理解成本问题,对于普通网民来说,面对一大堆文字链,我不认为TA会花时间或需要理解,空格分隔开的文字间是什么关系。这是比较高级的思维活动,多数人可能看到吸引的关键字就点开来看看了。
做视觉处理,有时候还可能导致理解成本的上升。这是因为:
1)无法保证各大网站在符号系统上的一致性,而符号有时是需要理解成本的,在不同的网站难道还都去理解并记住它们?
2)使版面整体很混乱。由于新闻的及时更新性,意味着会有各种语义关系的新闻链接堆放在一起。如果分别搭配一种视觉形式,独立来看关系是清晰了,但综合起来会不会一片混乱?
也许,真正会影响到用户阅读体验的,还是在于整体版面的视觉语言。这也是网易之所以出色的地方。
2. 对商业
首页的作用是即时将最新的新闻呈现出来,这意味着编辑应只需要顾及基本的文章标题编辑原则。如果强加给TA一些规定(如为了看起来整齐而统一每句字数),反而大大影响效率。从另一个角度来说,有时候故意混淆链接之间的关系,反而会对点击率有所帮助。