网页侧边栏位于右侧的三个理由

2008-10-21

一直以来,用户的阅读习惯都是从上至下从左到右的,即使是有跳跃性的阅读,也是按这个空间顺序来进行跳跃的。所以,网页的左上角是整个网页中最重要的一个位置,这就是为什么大部分网站都把LOGO放在左上角的原因;而网页的第一屏永远比最后一屏的位置要重要,这也就是为什么大部分网站会把份量最重的栏目放在第一屏而份量相对较轻的栏目放于下面的原因;基于同样的道理,网页的底部是整个网页中最不受用户关注的地方,这也是为什么大部分网站把联系信息等栏目的链接放于底部的原因。

所以,对于用户而言,浏览左侧内容的比例要远高于浏览右侧的内容。而事实上,经研究发现,用户在浏览网页时的视线注意力呈“F”型,这就是设计网页时让侧边栏位于右侧的第一个理由。

正常情况下,网页在布局制作时,也跟阅读的空间顺序一样是从上到下从左到右的,而搜索引擎的机器人爬虫则不管网页视觉上的表现,机器人爬虫是按照HTML代码结构顺序来获取信息的,所以机器人爬虫对左侧内容的爬行是要优先于右侧的。当然,如果在制作网页布局时特意让右边内容的HTML代码靠前然后使用浮动的话,这点就不在讨论之列了。这是让网页侧边栏位于右侧的第二个理由。

阅读全文 »

给链接一个添加下划线的理由

2008-10-17

互联网上有着无以计数的海量信息,而这些信息依靠着链接维持着之间的关系,从而避免了一个个独立的信息孤岛,互相关联的才能形成互联网。链接在互联网的交互上有着不可替代的重要性。

之前提到过关于链接的几种提示及打开方式,其中有一个关于链接的提示是:文字带有颜色没有下划线。有时候为了页面的美观,很多设计师会特别的去掉链接文字的下划线,而仅仅只是改变链接文字的颜色。的确,这也算是链接的一种提示方式了,至少让链接文字表现出了与普通文字的不同之处。

可是,在这里设计师们忘记了一个人群——色弱或者色盲者,对于他们而言,仅仅是改变链接文字的颜色是远远不够的,很有可能他们无法辨别出文章中的链接文字与普通文字的颜色区别,所以他们就可能差过了文章中的链接,这样的话,文章作者添加链接时的本意也就无法被这部分读者获知。

设计师们不能以页面美观或者色弱色盲人群数量少为借口,真正基于WEB标准设计的网站应该是能满足几乎所有的访问者的,这些访问者应该包括失明、视弱、色盲等残障人士。设计师们完全没有理由抛弃这部分用户。

阅读全文 »

浅谈网站的一致性

2008-09-01

之前有看过一个文章,说的是APPLE公司的品牌一致性,其中有一个细节很引人注意,那就是关于APPLE网站与MAC OS系统之间的一致性,比如灰色金属拉丝效果、弹出窗口的关闭按钮在左上角等,无论是在视觉上还是在在交互方式方面,APPLE都在尽最大的努力,以达到其品牌的一致性。

但是我们可以看到,很多网站为了表达其追求的所谓“个性化”,不管是从导航还是版式来讲,都在追求多变的效果,一个栏目一个导航,一个栏目一个版式。诚然这样的设计能给用户带来新鲜感,但无疑这破坏了网页设计中的一致性原则。

除了极少数有知名度的网站外,很多用户访问网站的方式是通过搜索引擎或者是其他的链接进入到网站的某一个页面的,这种时候,网站就需要让用户在第一时间明白自己所处的位置,导航在这个时候就派上了用场,如果用户都不知道自己所处的位置,那么接下去的引导将毫无用处。

当用户通过网站中的某一个页面去访问其他栏目页时,一致性的导航设计可以让用户以最快的速度明白自己所处的位置以及自己还可以去的位置。如果用户从一个页面跳转到另一个页面时,却发现自己找不到导航在哪里,不知道自己所处的位置以及自己如何去另一个栏目页时,用户关闭当前网站的可能性远远大于用户继续寻找导航的可能性。

阅读全文 »

网页版式设计的思考

2008-01-15

很久没有上过天极网,今天偶然兴起跑上去看了一下,看到消息说天极网深圳站隆重上线,于是也顺便去溜了一把,打开页面的时候差点有种不知所措的感觉,因为那个页面给我的第一感觉就是乱,根本不可能轻易的就找到自己所想要的信息,最后我在他们的活动调查表单上填写的意见是“页面太乱”。

很长时间以来一直都对天极网的主站不满,除去它不顺应“潮流”的还停留在800*600分辨率下的宽度,另一个就是它在首页放的东西太多了,导致它的页面实在是太长了,截了它的网站首页,才发现它的页面长度达4429px!这要翻动多少屏才能看到它的底部。虽说为了页面的美观,对网页的宽度有所限制而长度没有什么限制,可是也不能长到这个程度啊。

天极网的深圳站已经顺应“潮流”的将页面的宽度改为1024*768的分辨率下正常显示的宽度了,可是对于它的页面版式实在是不感恭维,乱糟糟的,相反的还不如天极网的主站来得条理清晰。

看看两个网站的图片(图片太大,所以做了缩放,具体的请到网站看):

天极主站:

2_01.jpg 2_03.jpg

阅读全文 »