QQ导航改版设计心得

   产品背景

  网址导航站点的原型是由李兴平在1999年创建的”网址导航”—www.hao123.com从创立最初至今已经成为中国上亿用户上网的第一 站, hao123的设计也成为了行业的标准之一。 创始初期李兴平作为网吧管理员,发现网吧用户的一个共性:”很多人都不知道如何上网,上网后又不知道去哪里找到所需要的内容。”这样一个简单的基本需求 “上网去哪儿?”支撑着hao123飞速成长,截止2012年6月,导航网站用户的周均覆盖人数占全部网民数的40%(2.2亿!)对于这样一个增长迅猛 的市场,腾讯自然也需要不断进化的产品来参与竞争。


  2011年4月-2012年4月各主要导航网站日均覆盖人数(万人)和市场领先的产品

  例一:首页排版

  在设计一款产品前,最重要的就是认清用户需求。”去哪儿上网?”这个需求在多年之后是否仍是我们目标用户的主要需求?用户本身的成长和互联网环境的 变化会不会引起需求的变更?通过对比市场的领头羊hao123和360导航我们发现它们在首页都采用了将网址列表(后面我们将这个模块分为”名站导航”与 “酷站推荐”)放在页面靠右的位置, 而左侧留给了新闻,影视,小游戏等内容模块。这体现出它们的主要用户需求在成长过程中从过去的”上网去哪儿?”向”上网有很多去处,但具体看什么?”变化 的趋势。反映在页面上就是从纯粹的网址收录与推荐转变为内容聚合的收集与推荐。

  以下是好123和360导航主页的布局,因为用户习惯和自身逐渐转变为内容导航与门户网站的原因,符合’F'法则的页面黄金位置并不是名站导航与酷站推荐:


  好123主页


  360导航主页

  过半好123的用户使用时间在2-3年及以上,和QQ导航的用户构成形成了鲜明的对比。360在设计上一直追随好123的步伐,通过安全卫士和浏览器的捆绑,用户构成接近好123也只是时间问题。不过使用时间2-3年及以上的用户也已经大大超过QQ导航。


  QQ导航用户结构


  360用户结构


  好123用户结构

  因此,在首页结构上,因为目标用户的主要需求不同,新版的结构和主要竞品形成了鲜明的对比。


  QQ导航 V1.0版本首页基本结构

  在前期的调研和访谈中,我们总结出用户对新版导航的诉求关键词为:清爽,快速,权威,智能与个性。并且在”我的导航”中放置10个以下网址的用户占 比超过一半,高达53%,使用10-20个网址的用户占比约为20%,30个以上的占比仅为6%。每天浏览10个以下网站的用户高达75%。还有的用户抱 怨”实际我们常用到的网址无非是那么一二十个,像百度,Google,雅虎,网易,支付宝…等酷站,它们的位置也是固定不变的,现在的导航网站内容实在太 多了,很多都是不用的。”这表示我们可以放心大胆的开始做减法并朝着”清爽”,”简约”的康庄大道前进了吗?—很多时候,用户说的不一定是他们想要的。如 果不仔细注意下一组数据,很有可能在设计上会陷入这种用户设下的’陷阱’。在对”您是否能在QQ导航找到自己经常访问的网站?”这个问题的回答上,仍然有 40%的用户仅仅能部分找到。考虑到我们的潜在目标用户忠诚度并不高,如果出现找不到的情况,很有可能就变成了流失的用户。


  因此新版QQ导航的名站部分没有大刀阔斧的删减网址数量, 每行的网址数在保持不变的情况下将网址推荐的数量减少一排。顶部的常用与个人信息在视觉上更加突出。在搜索栏下方新增了二级内容页面的全局导航栏。在后续 的1.1版本中, 还将进一步将每排的网址数量精简至5个,猜你喜欢的行数从4行精简至2行。并且让用户可以自行编辑名站导航区域的网址。


  旧版QQ导航首页布局


  新版QQ导航首页布局

  下一版的名站导航还将进一步精简,同时满足用户对清爽,快速,权威,智能与个性化的需求。

  通过对目标用户进行细分并针对其需求调整设计,QQ导航 V1.0的主页在上线后得到了用户的肯定与好评。The number speak for themselves(数据为证):


  例二:名站导航的编辑与添加

  没有特意想要做出差异化和与众不同效果的主页得到了用户的一致好评,不禁让我们在设计名站导航的编辑与自定义功能时暗下决心,一定要在这里做出与众不同的设计!但因为太想要与众不同,名站导航的编辑方式成为了项目至今从设计稿到最终实现争论最大的方案之一。


  好123添加,编辑网址时弹出的界面


  360导航添加,编辑网址时弹出的界面

  在改版最初,我们将用户添加网址和编辑网址的交互流程进行了细分。用户一般在添加网址时目的性较明确,交互流程预期耗时较短;而在编辑网址时目的性 较为分散,很多行为是在编辑的过程中产生的(比如,将某些网址按顺序或种类排序时发现新的分类或归类方式),交互流程预期耗时较长。和好123与360不 论是编辑还是添加网址时都弹出猜你喜欢的做法不同,在用户点击添加网址时,我们只弹出非末态的添加窗口。让这个本来预期耗时很短的流程更轻量化和精简,在 风格上也和竞品形成了鲜明的对比。


  但在最终实现前,这一方案因为可能导致 ‘猜你喜欢’的网址对用户曝光量下降而让产品无法下定决心进行尝试,我们又无法确定现在主流的交互方式到底会不会让用户反感(之所以将单独添加网址和编辑 网址的场景分开,也考虑到用户可能对每次添加、编辑网址时都弹出的猜你喜欢感到反感)。对我们的目标用户来说,甚至有可能会因为在不知道去哪儿上网时因为 没有这些弹出的推荐网址而觉得茫然的可能性。

  在没有资源进行测试和无法确定用户反应的情况下,最终的方案不得不做一些妥协,按照主流的交互方式进行实现:


  回顾最初的设计方案,设计时的确是按照用户可能的添加场景和流程并进行了细分,根据不同的预期给予不同的交互反馈。在与产品评审时也是信心十足,认为不但满足了不同场景用户的

  需要,还避免了多余的信息干扰。更重要的是,作为设计师本省来讲,这个方案和主要的竞争对手相比显得与众不同。不过因为想要做出差异化的心情太迫切,反而导致我们在设计时低估了运营,产品在这一功能上的需求和侧重点。

  虽然360导航和好123的方式每次都会强行推给用户推荐的网址甚至广告,但我们没有证据证明用户对这种方式感到不适;

  对于运营和产品来讲,添加网址的途径轻量化后可能导致推荐网址的曝光率大幅下降;

  对于有批量添加网址需求的用户来说轻量化的添加方式反而增加了他们的操作成本;

  只求更好,不求不同

  在决定主页排版时,我们并未强调要与众不同,综合分析用户市场和需求后,设计和产品各方很容易就在新版本上达成了一致。在设计名站导航交互时,虽然 设计也是从细分用户使用场景出发,但在一个与竞品有差异化的方案面前,忽略了衡量最终结果好坏的其它因素和纬度(运营需求,网址曝光率和产品考量)。最后 的方案虽然在形式上没有不同,不过在视觉上进行了大幅的优化,也能保证给用户较上一个版本更好的使用体验。

  这里再把”It’s very easy to be different, but very difficult to be better”拿出来点一下题。因为也在各种不同的场合听到过有人说这句话倒过来念也能成立,即为”It’s very easy to be better, but very difficult to be different”要做到更好很容易,但要做到与众不同就非常困难了。对于追求卓越的设计师来说,很多时候往往更好是不够的,但这也会将他们带入到一个 误区中,就是为了不同而不同。我们在做产品设计时应该只遵循”更好”的原则,特别是商业产品设计。


  日本设计大师原研哉曾经举办过一个通心粉设计大赛,但通过对比后发现在烹饪难易度,生产成本和外观等纬度的综合考量下,胜出的反而是传统的通心粉。

  现有的东西虽然没有’与众不同’的产品那样振奋人心,但它们往往都经过了用户与市场的考验才得以留存。我认为,好的设计师在听到”希望能有更简洁、 更好、更与众不同的设计”时会自动将这句话过滤为”希望能有更好的设计”。只是追求更好的设计,心无旁鸠的仔细分析产品,功能,市场等各种因素,自然会让 你设计出适合不同用户群体与需求的产品,而因为用户的多样性,在做出更好设计的同时,”与众不同”往往也已经水到渠成了。

时间: 2024-11-02 01:35:52

QQ导航改版设计心得的相关文章

《丝路英雄》官网改版设计总结与心得

网页游戏官网设计的环境比较险要,硬伤多多,则需要设计师有比较强的适应能力,且设计师不应因为自己所带的产品本身质量较差而感到泄气,放弃了设计高品质页面的理念,应想办法克服困难达到最终目标,并可提升自己的http://www.aliyun.com/zixun/aggregation/7197.html">设计能力,不以物喜,不以己悲. 大家好,我是阿枪,在这里与大家分享<丝路英雄>官网改版的一些总结与心得,希望能给大家的工作带来帮助. 之所以要进行这次改版是因为老官网品质感较差,延

分享手机QQ浏览器(android版)设计心得

文章描述:云览天下,一触即达--QQ 浏览器(android) 设计之路. 经过几个月的时间和大家的努力,手机QQ浏览器(android版)从 2.0 陆续更新到的 2.6.在经历了设计的千回百转和架构的不断尝试后,终于有了个新面貌,使用体验也比之前版本有了较大提升.不过,这也仅仅是万里长征第一步,这里先和大家分享下这第一步背后的设计心得. 国内局势 我们可以先来了解国内局势.目前,浏览器市场可谓战火不断,狼烟四起.姑且不说PC端各大浏览器大牛厂商角力数十年.单看手机端,特别是android平台

网页设计心得:网易频道的改版实例

网页频道页面进行了改版,布局仍然是传统三栏目模式,但是这次改版把中栏调整为主题内容栏,比较符合国内网络用户的中栏浏览.阅读习惯.三栏从上至下通栏整齐,方便阅读,在阅读中栏的同时可以兼顾左右边栏的内容. 频道首页改版背景 先说明一下,在此次改版之前的上半年,已经进行过一次对网易首页和频道首页的整体改版,这次改版为上次改版的优化设计.主要针对: 1.保留了传统三栏目模式,但是三栏布局上做了调整.     2.头部导航区域进行了重新设计. 3.新年后各首页将上线新的广告,对频道首页的广告尺寸做了优化统

行业网站设计心得

设计|心得  很多设计师认为做好了企业网站就一定能够做好行业网站的设计,其实对设计来说行业网站和企业网站的设计截然不同,对整个网站的创意.风格.整体框架布局.文字编排.图片的合理利用,空间的合理安排上面等-有着许多诸多的要求,需要考虑的面更广,面对的问题也会更多.对于一名优秀的网站设计师来说不能绝不能放过任何一点小细节,本篇文章简述的是设计师在做行业网站时所需考虑的一些问题. 一.网站风格/创意 风格(style)是抽象的.是指站点的整体形象给浏览者的综合感受.整体形象包括站点的版面布局,色彩,

大型门户网站腾讯QQ首页改版流程

对于大型门户网站的改版流程是怎么样的?参与的团队有多少?一般的步骤又是怎么样呢?相信很多网友都想了解,下面就以腾讯首页改版为例子,看看QQ新首页设计过程的酸甜苦辣.本次和大家分享了很多设计上的理念问题,相信看过后大家会对网页设计有不一样的体会. 酝酿了将近一个春夏秋冬的腾讯网首页终于亮剑!反响热烈!让我们来分享它成功背后的酸甜苦辣吧. 腾讯网首页改版终于开花结果.于2008年3月25日6:00准时上线.整整一年的时间,经历了无数次的挫折和挑战,无数次的等待和蜕变,终于破茧化蝶.本次改版完全颠覆性

Web标准应用之腾讯QQ首页改版

Web标准应用之腾讯QQ首页改版了 Web前端开发越来越受重视了 QQ的首页改版上线了,过去看了一眼,因为我一直很喜欢看这些网站的CSS是怎么设计的.问了一下米随随,他说不是他们设计的,是另一伙人.看下来,有几个地方设计的还不错.感觉前端的东西人们越来越重视了,也确实花人力去作了.  更改网站风格那里,还挺有意思的.  虽然有学YAHOO之嫌:

QQ 浏览器(android) 设计之路

经过几个月的时间和大家的努力,手机QQ浏览器(android版)从 2.0 陆续更新到的 2.6.在经历了设计的千回百转和架构的不断尝试后,终于有了个新面貌,使用体验也比之前版本有了较大提升.不过,这也仅仅是万里长征第一步,这里先和大家分享下这第一步背后的设计心得. 国内局势 我们可以先来了解国内局势.目前,浏览器市场可谓战火不断,狼烟四起.姑且不说PC端各大浏览器大牛厂商角力数十年.单看手机端,特别是 android平台,似乎早已成为兵家必争之地.Opera,起兵早,国际声誉高,想方设法吞噬国

自由行页面改版设计

  自编自译,英文原版请见本人博客:http://belle-m.tumblr.com 去年11月底,本人刚刚换了新工作,携程旅游事业部,仍然是视觉设计师. 在一系列的和公司视觉规范统一风格的小修小改中,我领悟到本人作为一名"死美工"继续跟着大部队这么走,貌似解决不了根本问题. 因此我打算自己编写一份用户测试,分析目前界面里出现的问题.同时也可以治治自己的懒癌,把设计博客赶紧写起来.那么现在开始: 自由行界面改版设计:搜索 & 浏览 & 订购 (上篇) 任务: 目的:通

做QQ表情网站运营心得分享和反思

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 一.QQ表情网站的由来 我本人是从事互联网设计.电子杂志.彩信方面的工作,做QQ表情站长两年几,现把一些运营网站的心得经验分享给大家. 在08年6月份的时候,由于兴趣和职业的原因,就有想法建立一个QQ表情网站.当时我分析和了解了一下QQ表情行业的网站,看到QQ表情网站基本都是个人站长建立的,没有一间网络公司或企业运营,于是就定位做一个QQ表情