adminadmin

图标栏目篇-从大粤网看区域门户设计之道

分类:所谓设计|浏览:2878|录入:admin|时间:2011-08-12 11:10 Friday|评论:0

图标栏目篇-从大粤网看区域门户设计之道_fa83

导语:腾讯大粤网上线了。从设计的角度看,值得学习的地方还是蛮多。相较于大门户的设计模式,区域门户的设计规范还是有很多不同。尤其自己最近也在负责这方面的事情,感触比较深。从本文起,我尝试从图标设计,框架布局, 栏目导航,交互设计的角度,对这个区域门户产品做肤浅的分析。

【图标篇】

·首页_主导航

图标栏目篇-从大粤网看区域门户设计之道_1d2a

大粤的核心产品都集中在“粤生活”这个区域,其余栏目都属于已有腾讯产品体系。

从色彩上,大粤使用的是橙色系的亮色调体系。这与南都的南都网十分相似。相较于资讯型的网站,腾讯主打是地方区域产品路线。从导航里产品的布局就可以略见一二。

·图标次序设计原则

这一版的大粤在设计上有个特点,我总结起来应该叫:“宽松布局、折线和圆角”。

【核心栏目】使用的是圆角+底色。

在宽松的布局体系里,小面积的色块十分突出。当浏览时,大粤网保持每屏出现2个大色块外加3-4个小色块,以便控制阅读时浏览的适度跳跃性。其余次级的内容采用列表。

根据这个原则,产品图标出现的位置我感觉还是略有不妥。

1)产品区混合图片区,视觉焦点分散。产品不容易被用户发现,如果是主推这块内容的话,应该考虑产品区留有更为广阔的呼吸区域。现在的排列方式略显拥挤。

2)团购区(右上角)的处理方式挺值得学习。如果做成全底色的图片形式,这块区域就拥挤不堪了,设计师巧妙的利用语言和空白减弱此区域的视觉层级,同时通过语言去适当提升此区域的趣味性,增加用户的点击率。(不过这种效果如果是签稿的话,最恐惧的情况是编辑根据自己喜好,替换了字体或颜色。那么,呈现的效果就。)

图标栏目篇-从大粤网看区域门户设计之道_74be

【次级栏目】使用的是折线+透底+渐变

 和巨型门户相比,大粤走的是小资生活路线。这一点从起次级栏目的设计思路可以很明显感觉到。混合时尚杂志的设计思路,栏目处理显得较为精致。

1)以数字和英文的辅助命名方式,会使设计显得更为洋气。这里还要充分考虑色彩的因素,栏目的变化过于丰富乍看感觉不错,但是对于网络媒介来说,可能有所不妥。由于页面的特殊性,栏目间短时间变化的可能性不大。每个栏目虽然漂亮却长期不做更新,有可能增加用户的阅读疲劳度,而忽略了栏目下内容更新。

当然,这只是拙见,不过我认为,栏目设计更多应该是服务于内容,而不是喧宾夺主。同时,在中国,英文真的那么重要么?英文在中文网页里更多应该是充当点缀的装饰物吧?有必要放大到这个程度么?不解。

图标栏目篇-从大粤网看区域门户设计之道_e926

图标栏目篇-从大粤网看区域门户设计之道_e9e9

【频道核心栏目】使用的是图案+图片+大面积色块+超大按钮

 大粤网对频道产品拳头产品的定义十分到位。互联网有这个定律,只要把某项功能做到满足90%需求,自然能招募到用户使用。而往往面面俱到的产品,最终都是失败告终。专注确实是网络世界里一项优秀的品质。

每个频道保持一款拳头产品,并把它放在最醒目的位置。

1)核心产品放在第一屏,为其定制特别的样式。当然根据每个频道定位的不同,这个并不是绝对的。不过我建议为了保持网站的整体性,固定每个频道的核心产品位置还是有必要。起码,新用户能通过这个一致性,迅速掌握到网站的使用规律,方便其参与到网站的活动。

2)产品的定制规律:

· 一级信息:产品图标+参与人数+功能性大按钮

产品的目的是让用户方便参与,尤其是地方性网站。更容易召集用户参与线下活动。将产品核心功能区进行视觉强调是有绝对的必要

·二级信息:栏目名+辅助图形

再次提醒用户您正在参与什么活动,增强栏目的识别性,降低参与的出错率。

·三级信息:其余辅助信息

包含其余活动情况,活动参与度,编辑推荐等。不过大粤在这一块做的不是特别理想,不同频道将信息处理手法有很多的不同。会导致部分用户迷糊,而且每个区域的大小,样式都有极大的区别,需要用户花费相当的时间去筛选有用的信息。

【总结】大粤网的栏目分布以及图标处理

·粤生活

身边事(新闻) 买房子(房产) 去旅游(旅游) 爱美丽 (时尚)

娱乐眼(娱乐) 找靓车(汽车) 食天下(美食) 理财铺 (金融)

·首页_主打产品 http://gd.qq.com/

图标栏目篇-从大粤网看区域门户设计之道_1b96

 ·频道_主打产品展示方式 (房产) http://gd.qq.com/auto/ 

图标栏目篇-从大粤网看区域门户设计之道_d440

·频道_主打产品展示方式 (旅游) http://gd.qq.com/travel/

图标栏目篇-从大粤网看区域门户设计之道_26c2

·频道_主打产品展示方式 (时尚) http://gd.qq.com/lady/

图标栏目篇-从大粤网看区域门户设计之道_a349

·频道_主打产品展示方式 (汽车) http://gd.qq.com/auto/

图标栏目篇-从大粤网看区域门户设计之道_d0aa

·频道_主打产品展示方式 (美食) http://gd.qq.com/food/

图标栏目篇-从大粤网看区域门户设计之道_4e08

·频道_主打产品展示方式 (数码) http://gd.qq.com/digi/

图标栏目篇-从大粤网看区域门户设计之道_3231

 

文章来源:米田的天空 转载请注明出处链接。

上一篇:交互设计的理性Vs.多样的感性用户 下一篇:HTML5&Flash之粗知浅见

标签:产品设计图标设计腾讯互联网设计创意新鲜创意来袭网页设计

引用通告: 查看所有引用 | 我要引用此文章

引用地址: http://www.94cy.com/article-337.html