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

心得技巧
设计理论:设计师要有自学能力
54个新鲜的友好的在线商城网站设计实例
顶级设计师的第一准则:限制你的字体
顶级设计师的第二准则:限制你的色彩
顶级设计师的第三准则:对比,对比,对比
ALIBABA(中文站)用户体验设计指南
2009年电视剧网站和电影网站设计趋势
设计理论:实例展示设计海报全攻略(2)
设计参考:B2C网站的价格菜单页面设计
设计参考:设计有季节性特点的网站设计实例
网页中Read More(查看全文)的设计趋势
从10个方面来提高网站可用性设计
简单实用的用户界面设计10个原则
优秀的交互设计师《瞬间之美》简要总结
设计理论:视觉等级中的色彩认知
taobao cdn性能优化
网页设计参考:出色的30个网页按钮设计实例
设计思想:看好你的作品集
Webjx收集35个歌剧魅影酒吧网站设计实例
化妆品网站Skinstore.com首页改版评价

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


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

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

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

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

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

 

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

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

 

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

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

 

图4:用符号分隔

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

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

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

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

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

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