当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 设计理论:门户网站在文字视觉呈现分析

心得技巧
50个充满活力的色彩在网页设计中运用实例
WEBJX收集的适合设计师参考的100个设计类网站
网页设计中常遇到的10个小问题
用户体验:购物网站的购物流程简化设计
用户体验设计实例:豆瓣UI设计改进
24个对表单对象进行个性化定制的技术
视觉设计:创意布局需要非常注意易用性问题
用户体验设计研究:中文网页文本框设计
设计经验分享:设计美好的瞬间
网页设计理论:漂亮而不空洞的极简网站设计
用户体验:网站注册中的密码保护设计细节
有感GOOGLE的登陆设计让人感到崩溃
设计师需要的IDEO以人为中心的设计工具包
用户体验研究:携程酒店订房中的日期选择
网上零售平台的站内搜索的自动提示功能
B2C网站搜索结果是列表视图还是栅格视图?
网站可用性设计:让页面等待不再漫长
设计参考:巴西设计师的图标设计作品
B2C网站设计体验:购物车中的胡萝卜
电子商务网站注册表单的可用性贴士

心得技巧 中的 设计理论:门户网站在文字视觉呈现分析


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-01   浏览: 96 ::
收藏到网摘: n/a

屎文陈述了门户网站在文字视觉呈现上的一个现象:
同一行文字中,可能包含两条新闻链接,而这两条链接之间的语义关系可能很多样,但并未通过视觉呈现来直观表现这些关系。
 
图1:网易首页“新闻”豆腐块中的链接

如图1所示,在短短的几行新闻中,虽然视觉上统一用空格做分割,但至少有四种语义上的差异。

综合屎文和屎大师的原话,这种“不做任何事情”的视觉表现,会导致以下问题

1. 对用户:降低阅读速度&增加理解成本。
不同语义关系都用同一种视觉表现,无法预期何时出现哪种关系,只能扫视整行,且增加思考负担。若做图2的视觉处理(字体缩小、颜色差异),用户知道后半句是对前面的解释,那么如果看了前半句不感兴趣,TA大可不必费神看后半句。

 

图2:网易新闻中心的链接形式

2. 对网站:降低更多链接条目的可发现性。
同行塞入多条链接是为了有效利用版面,增加点击率,但没有视觉差异,会使某些内容或功能被忽略,浪费资源位。如图3中,“专题”、“图集”很可能被忽略。

 

图3:网易新闻中心的链接形式

屎大师进而根据网易的设计,提出了三种视觉处理方案:用字号、用颜色(图2)、用符号(图4)。

 

图4:用符号分隔

同意屎大师所指出的这个问题,但我认为屎大师没有在该问题最典型的情景中展开他的陈述,从而削弱了观点的说服力。他所提出的这个问题,在他所举案例(门户资讯首页)的严重程度,远不及该问题在功能型页面中的严重性。下面分别从他认为会造成的两处问题做出反驳。

1. 对用户
首先,屎大师所认为的阅读效率问题,是基于他认为我们都是一整行地扫视的。但在实际阅读中,我们更多是跳着、挑关键字阅读。其次,对于行宽这么窄的一个版块,空格前后的两段文字可能同时就进入视域了,视觉焦点的移动也可能是在1秒以下级别的。屎大师举的正例来自网易新闻中心,但为何网易首页的新闻排版没有用同一种模式,而是任其混乱?比较一下两个页面会发现,首页一行的行宽,等于新闻中心一行的一半。也就是说,即使不做任何视觉处理,对用户在这么窄的板块里阅读并不会有多少影响。

理解成本问题,对于普通网民来说,面对一大堆文字链,我不认为TA会花时间或需要理解,空格分隔开的文字间是什么关系。这是比较高级的思维活动,多数人可能看到吸引的关键字就点开来看看了。

做视觉处理,有时候还可能导致理解成本的上升。这是因为:
1)无法保证各大网站在符号系统上的一致性,而符号有时是需要理解成本的,在不同的网站难道还都去理解并记住它们?
2)使版面整体很混乱。由于新闻的及时更新性,意味着会有各种语义关系的新闻链接堆放在一起。如果分别搭配一种视觉形式,独立来看关系是清晰了,但综合起来会不会一片混乱?

也许,真正会影响到用户阅读体验的,还是在于整体版面的视觉语言。这也是网易之所以出色的地方。

2. 对商业
首页的作用是即时将最新的新闻呈现出来,这意味着编辑应只需要顾及基本的文章标题编辑原则。如果强加给TA一些规定(如为了看起来整齐而统一每句字数),反而大大影响效率。从另一个角度来说,有时候故意混淆链接之间的关系,反而会对点击率有所帮助。