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


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

  【图标篇】

  ·首页_主导航


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

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

  ·图标次序设计原则

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

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

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

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

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

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


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

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

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

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


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

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

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

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

  2)产品的定制规律:

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

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

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

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

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

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

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

  ·粤生活

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

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

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


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


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


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


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


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


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


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

时间: 2024-10-30 12:49:43

从大粤网看区域门户设计之道:图标栏目篇的相关文章

大粤网亮相:粤味十足为你而来

广东终于有了自己的城市生活门户网站!由腾讯公司与南方报业传媒集团联手打造腾讯·大粤网(gd.qq.com)正式上线.大粤网的上线,代表了南方报业传媒集团在新媒体开拓方面又迈进了坚实的一步. 南方日报记者 叶丹 聚合战略强化多元传播格局 南方报业传媒集团近年来在深耕传统平面媒体的同时,致力于实施新媒体挺进战略,加快网络媒体和手机媒体的发展速度,致力于开拓可发展媒体优势的相关产业,实现跨媒体.跨地区.跨行业经营上有突破性的进展,使南方报业传媒集团呈现出更加丰富的品牌群体架构. 同时更好地贯彻落实省委

js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来_javascript技巧

背景 我所想要的完美图片新闻轮转效果: 1.有新闻图片,有新闻标题,有轮转索引 2.鼠标未移到索引上,图片自动切换 3.鼠标移到索引上,显示现有图片,轮询停止 4.鼠标移开索引, 轮询继续 5.简洁明了,轻量级 (不依赖第三方任何文件,最好是原生js) 过程 找过很多图片轮询效果,和我的要求总是有些出入,不能十全十美.不是功能不全,就是太多花哨.本想自己开发一个,鉴于琐事拖延,迟迟未能开始. 偶尔看到 腾讯大粤网 的图片新闻,感觉就是我所想要的效果.但仔细试验,发现其不符合要求3.即没有轮询停止

从安全文化网看专业门户论坛的运营思路

中介交易 SEO诊断 淘宝客 云主机 技术大厅 安全文化网是一家专业提供各类安全资讯及服务的大型门户网站,成立于2003年12月1日,在安全生产管理界已经牢牢占据着主流网站地位.首先声明,笔者本身是一名安全生产管理者,无意为该网站做广告,该站也无需做广告,他是hao123"酷站"一栏的常客,其影响力极大,估计日用户人数达数十万,非常活跃.笔者发表此文旨在探求该站的成功之处供准备做和正在做专业论坛的同行以借鉴.本人认为该专业论坛在以下三方面非常成功: 1.专业氛围 在安全界,很少有人不知

通过上海滩社区的成功看地方门户运营之道

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 地方门户当下已经成为团购之后的第二大互联网热门行业.全国各地每天都在催生一批批地方门户,究其原因不外乎几点: 一.地方门户技术门槛低,一个稍微有点技术的站长下载一个DZ或是一个PW,一个晚上就可以搞定一个地方门户; 二.成本低,一个域名几十元如果不要服务器只是一个空间也就是200元,整个地方门户做起来也要不了300元; 三.人员需求少,一个地

看高手如何设计使用ICON图标

网页制作Webjx文章简介:不难发现,现在大部份网站都融入了图标,图标逐渐成为网站里重要的一部份,无论是导航,栏目内容,甚至是广告banner及场景 很多时候图标都充当着重要角色.在我们设计网页或是一些界面时,是否曾遇到这个图标不好用,那个图标有版权,这个颜色或角度不是我们需要的,那 不难发现,现在大部份网站都融入了图标,图标逐渐成为网站里重要的一部份,无论是导航,栏目内容,甚至是广告banner及场景-- 很多时候图标都充当着重要角色.在我们设计网页或是一些界面时,是否曾遇到这个图标不好用,那

从热度网到大脉网,试读WEB3.0 <一>

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 <一> 先来看一下大脉网的介绍:大脉网是国内第一家web3.0体验网站,是秉承"发现.收藏.分享"互联网基本理念的最新形态的互联网企业.My160.com的最基本功能是互联网精华信息资源平台,在这里网友们能够发掘到最精彩的新闻.资源或有用的信息,也可以非常方便地将自己平时生活中发现的好东西推荐到这个平台上与其他

地方区域门户如何发展与推广?

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 地方区域门户如何发展?一.靠广告来盈利,这个方向绝对是正确的.二.发挥它'地方''区域'的优势,就'区域'的某个行业,以'门户'的优势,可以形成一条产业链.三.作足你的影响力,增加网站宣传暴光度,带来巨大流量的同时,寻找对口企业发布广告信息.四.寻找优势互补的合伙人,如果有合适的对象,对事业发展有利,就合作: 如果感到合作起来很别扭.麻烦,不

大屏iPhone带来了App设计的三种改变

大屏iPhone带来了App设计的三种改变 时间:2014-09-20 19:55 来源:雷锋网 作者:Twig理想试验田 很长一段时间内,智能手机产业区分都很明显.Apple坚守小屏幕不改变,与此同时Google的安卓手机却越来越大.但是随着4.7英寸的iPhone6和5.5英寸的iPhone6 Plus的发布,这种分别消失了.大时代全面降临. 对于那些之前做得很出色的开发者来说,接下来的工作并不是简单地把现有的小界面扩展到大屏幕上.在与行内优秀的UI设计师交谈中,很明确的一点是由于屏幕区域已

区域门户网站编辑应该具备的能力

区域门户网站的编辑应该做些什么 作为杭州下沙区域门户网下沙网的编辑,我结合自己的http://www.aliyun.com/zixun/aggregation/7314.html">工作经验,与站长们分享一下我的经验,我是怎么让我们的编辑做文章的. 我们一般都认为编辑每天做的事无非就是ctrl c+ctrl V,每天在办公室一台电脑,复制别的网站上的一些资讯粘贴到自己网站上.但每天发生的事情就那么几件,翻来覆去的,打开每个网站甚至是几个大门户,除了标题有些细微的区别外,内容基本上都是差不多