pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

QQ導航改版設計心得

   產品背景

  網址導航站點的原型是由李興平在1999年創建的”網址導航”—www.hao123.com從創立最初至今已經成為中國上億用戶上網的第一 站, hao123的設計也成為了行業的標準之一。 創始初期李興平作為網吧管理員,發現網吧用戶的一個共性:”很多人都不知道如何上網,上網后又不知道去哪里找到所需要的內容。”這樣一個簡單的基本需求 “上網去哪兒?”支撐著hao123飛速成長,截止2012年6月,導航網站用戶的周均覆蓋人數占全部網民數的40%(2.2億!)對于這樣一個增長迅猛 的市場,騰訊自然也需要不斷進化的產品來參與競爭。

QQ導航改版設計心得 三聯
7

  2011年4月-2012年4月各主要導航網站日均覆蓋人數(萬人)和市場領先的產品

  例一:首頁排版

  在設計一款產品前,最重要的就是認清用戶需求。”去哪兒上網?”這個需求在多年之后是否仍是我們目標用戶的主要需求?用戶本身的成長和互聯網環境的 變化會不會引起需求的變更?通過對比市場的領頭羊hao123和360導航我們發現它們在首頁都采用了將網址列表(后面我們將這個模塊分為”名站導航”與 “酷站推薦”)放在頁面靠右的位置, 而左側留給了新聞,影視,小游戲等內容模塊。這體現出它們的主要用戶需求在成長過程中從過去的”上網去哪兒?”向”上網有很多去處,但具體看什么?”變化 的趨勢。反映在頁面上就是從純粹的網址收錄與推薦轉變為內容聚合的收集與推薦。

  以下是好123和360導航主頁的布局,因為用戶習慣和自身逐漸轉變為內容導航與門戶網站的原因,符合’F'法則的頁面黃金位置并不是名站導航與酷站推薦:

8

  好123主頁

9

  360導航主頁

  過半好123的用戶使用時間在2-3年及以上,和QQ導航的用戶構成形成了鮮明的對比。360在設計上一直追隨好123的步伐,通過安全衛士和瀏覽器的捆綁,用戶構成接近好123也只是時間問題。不過使用時間2-3年及以上的用戶也已經大大超過QQ導航。

10

  QQ導航用戶結構

11

  360用戶結構

12

  好123用戶結構

  因此,在首頁結構上,因為目標用戶的主要需求不同,新版的結構和主要競品形成了鮮明的對比。

13

  QQ導航 V1.0版本首頁基本結構

  在前期的調研和訪談中,我們總結出用戶對新版導航的訴求關鍵詞為:清爽,快速,權威,智能與個性。并且在”我的導航”中放置10個以下網址的用戶占 比超過一半,高達53%,使用10-20個網址的用戶占比約為20%,30個以上的占比僅為6%。每天瀏覽10個以下網站的用戶高達75%。還有的用戶抱 怨”實際我們常用到的網址無非是那么一二十個,像百度,Google,雅虎,網易,支付寶…等酷站,它們的位置也是固定不變的,現在的導航網站內容實在太 多了,很多都是不用的。”這表示我們可以放心大膽的開始做減法并朝著”清爽”,”簡約”的康莊大道前進了嗎?—很多時候,用戶說的不一定是他們想要的。如 果不仔細注意下一組數據,很有可能在設計上會陷入這種用戶設下的’陷阱’。在對”您是否能在QQ導航找到自己經常訪問的網站?”這個問題的回答上,仍然有 40%的用戶僅僅能部分找到??紤]到我們的潛在目標用戶忠誠度并不高,如果出現找不到的情況,很有可能就變成了流失的用戶。

14

  因此新版QQ導航的名站部分沒有大刀闊斧的刪減網址數量, 每行的網址數在保持不變的情況下將網址推薦的數量減少一排。頂部的常用與個人信息在視覺上更加突出。在搜索欄下方新增了二級內容頁面的全局導航欄。在后續 的1.1版本中, 還將進一步將每排的網址數量精簡至5個,猜你喜歡的行數從4行精簡至2行。并且讓用戶可以自行編輯名站導航區域的網址。

15

  舊版QQ導航首頁布局

16

  新版QQ導航首頁布局

  下一版的名站導航還將進一步精簡,同時滿足用戶對清爽,快速,權威,智能與個性化的需求。

  通過對目標用戶進行細分并針對其需求調整設計,QQ導航 V1.0的主頁在上線后得到了用戶的肯定與好評。The number speak for themselves(數據為證):

17

  例二:名站導航的編輯與添加

  沒有特意想要做出差異化和與眾不同效果的主頁得到了用戶的一致好評,不禁讓我們在設計名站導航的編輯與自定義功能時暗下決心,一定要在這里做出與眾不同的設計!但因為太想要與眾不同,名站導航的編輯方式成為了項目至今從設計稿到最終實現爭論最大的方案之一。

19

  好123添加,編輯網址時彈出的界面

20

  360導航添加,編輯網址時彈出的界面

  在改版最初,我們將用戶添加網址和編輯網址的交互流程進行了細分。用戶一般在添加網址時目的性較明確,交互流程預期耗時較短;而在編輯網址時目的性 較為分散,很多行為是在編輯的過程中產生的(比如,將某些網址按順序或種類排序時發現新的分類或歸類方式),交互流程預期耗時較長。和好123與360不 論是編輯還是添加網址時都彈出猜你喜歡的做法不同,在用戶點擊添加網址時,我們只彈出非末態的添加窗口。讓這個本來預期耗時很短的流程更輕量化和精簡,在 風格上也和競品形成了鮮明的對比。

21
22
24

  但在最終實現前,這一方案因為可能導致 ‘猜你喜歡’的網址對用戶曝光量下降而讓產品無法下定決心進行嘗試,我們又無法確定現在主流的交互方式到底會不會讓用戶反感(之所以將單獨添加網址和編輯 網址的場景分開,也考慮到用戶可能對每次添加、編輯網址時都彈出的猜你喜歡感到反感)。對我們的目標用戶來說,甚至有可能會因為在不知道去哪兒上網時因為 沒有這些彈出的推薦網址而覺得茫然的可能性。

  在沒有資源進行測試和無法確定用戶反應的情況下,最終的方案不得不做一些妥協,按照主流的交互方式進行實現:

25

  回顧最初的設計方案,設計時的確是按照用戶可能的添加場景和流程并進行了細分,根據不同的預期給予不同的交互反饋。在與產品評審時也是信心十足,認為不但滿足了不同場景用戶的

  需要,還避免了多余的信息干擾。更重要的是,作為設計師本省來講,這個方案和主要的競爭對手相比顯得與眾不同。不過因為想要做出差異化的心情太迫切,反而導致我們在設計時低估了運營,產品在這一功能上的需求和側重點。

  雖然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”要做到更好很容易,但要做到與眾不同就非常困難了。對于追求卓越的設計師來說,很多時候往往更好是不夠的,但這也會將他們帶入到一個 誤區中,就是為了不同而不同。我們在做產品設計時應該只遵循”更好”的原則,特別是商業產品設計。

26

  日本設計大師原研哉曾經舉辦過一個通心粉設計大賽,但通過對比后發現在烹飪難易度,生產成本和外觀等緯度的綜合考量下,勝出的反而是傳統的通心粉。

  現有的東西雖然沒有’與眾不同’的產品那樣振奮人心,但它們往往都經過了用戶與市場的考驗才得以留存。我認為,好的設計師在聽到”希望能有更簡潔、 更好、更與眾不同的設計”時會自動將這句話過濾為”希望能有更好的設計”。只是追求更好的設計,心無旁鳩的仔細分析產品,功能,市場等各種因素,自然會讓 你設計出適合不同用戶群體與需求的產品,而因為用戶的多樣性,在做出更好設計的同時,”與眾不同”往往也已經水到渠成了。

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

這篇文章給大家詳細介紹了HTML頁面跳轉及參數傳遞問題,需要的朋友參考下吧
這篇文章主要介紹了純css實現照片墻3D效果的示例代碼,可以實現鼠標經過圖片實現改變,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本篇文章主要介紹了純 Css 繪制扇形的方法示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了一份純CSS loading效果代碼示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css 實現文字過長自動隱藏功能,需要的朋友可以參考下
本篇文章主要介紹了詳解CSS3 rem(設置字體大小) 教程,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 旋片真空泵_真空泵_水环真空泵_真空机组-深圳恒才机电设备有限公司 | 不锈钢闸阀_球阀_蝶阀_止回阀_调节阀_截止阀-可拉伐阀门(上海)有限公司 | 盘扣式脚手架-附着式升降脚手架-移动脚手架,专ye承包服务商 - 苏州安踏脚手架工程有限公司 | 苏州注册公司_苏州代理记账_苏州工商注册_苏州代办公司-恒佳财税 | 广州网站建设_小程序开发_番禺网站建设_佛山网站建设_粤联网络 | 碳化硅,氮化硅,冰晶石,绢云母,氟化铝,白刚玉,棕刚玉,石墨,铝粉,铁粉,金属硅粉,金属铝粉,氧化铝粉,硅微粉,蓝晶石,红柱石,莫来石,粉煤灰,三聚磷酸钠,六偏磷酸钠,硫酸镁-皓泉新材料 | 万濠投影仪_瑞士TRIMOS高度仪_尼康投影仪V12BDC|量子仪器 | 世纪豪门官网 世纪豪门集成吊顶加盟电话 世纪豪门售后电话 | 企业微信营销_企业微信服务商_私域流量运营_艾客SCRM官网 | 小区健身器材_户外健身器材_室外健身器材_公园健身路径-沧州浩然体育器材有限公司 | 噪声治理公司-噪音治理专业隔音降噪公司| 深圳律师咨询_深圳律师事务所_华荣【免费在线法律咨询】网 | 蓝米云-专注于高性价比香港/美国VPS云服务器及海外公益型免费虚拟主机 | 强效碱性清洗剂-实验室中性清洗剂-食品级高纯氮气发生器-上海润榕科学器材有限公司 | 西安耀程造价培训机构_工程预算实训_广联达实作实操培训 | 电梯乘运质量测试仪_电梯安全评估测试仪-武汉懿之刻 | 磁力反应釜,高压釜,实验室反应釜,高温高压反应釜-威海自控反应釜有限公司 | 幂简集成 - 品种超全的API接口平台, 一站搜索、试用、集成国内外API接口 | Copeland/谷轮压缩机,谷轮半封闭压缩机,谷轮涡旋压缩机,型号规格,技术参数,尺寸图片,价格经销商 CTP磁天平|小电容测量仪|阴阳极极化_双液系沸点测定仪|dsj电渗实验装置-南京桑力电子设备厂 | 上海单片机培训|重庆曙海培训分支机构—CortexM3+uC/OS培训班,北京linux培训,Windows驱动开发培训|上海IC版图设计,西安linux培训,北京汽车电子EMC培训,ARM培训,MTK培训,Android培训 | 蓝米云-专注于高性价比香港/美国VPS云服务器及海外公益型免费虚拟主机 | 活性氧化铝球|氧化铝干燥剂|分子筛干燥剂|氢氧化铝粉-淄博同心材料有限公司 | 兰州牛肉面加盟,兰州牛肉拉面加盟-京穆兰牛肉面 | 蔬菜清洗机_环速洗菜机_异物去除清洗机_蔬菜清洗机_商用洗菜机 - 环速科技有限公司 | 赛默飞Thermo veritiproPCR仪|ProFlex3 x 32PCR系统|Countess3细胞计数仪|371|3111二氧化碳培养箱|Mirco17R|Mirco21R离心机|仟诺生物 | 磁力去毛刺机_去毛刺磁力抛光机_磁力光饰机_磁力滚抛机_精密金属零件去毛刺机厂家-冠古科技 | C形臂_动态平板DR_动态平板胃肠机生产厂家制造商-普爱医疗 | PVC地板|PVC塑胶地板|PVC地板厂家|地板胶|防静电地板-无锡腾方装饰材料有限公司-咨询热线:4008-798-128 | MOOG伺服阀维修,ATOS比例流量阀维修,伺服阀维修-上海纽顿液压设备有限公司 | 桌上式超净工作台-水平送风超净工作台-上海康路仪器设备有限公司 | ph计,实验室ph计,台式ph计,实验室酸度计,台式酸度计 | 选宝石船-陆地水上开采「精选」色选机械设备-青州冠诚重工机械有限公司 | 上海噪音治理公司-专业隔音降噪公司-中广通环保 | 小程序开发公司-小程序制作-微信小程序开发-小程序定制-咏熠软件 | 臻知网大型互动问答社区-你的问题将在这里得到解答!-无锡据风网络科技有限公司 | 细沙回收机-尾矿干排脱水筛设备-泥石分离机-建筑垃圾分拣机厂家-青州冠诚重工机械有限公司 | 东莞市海宝机械有限公司-不锈钢分选机-硅胶橡胶-生活垃圾-涡电流-静电-金属-矿石分选机 | 安全光栅|射频导纳物位开关|音叉料位计|雷达液位计|两级跑偏开关|双向拉绳开关-山东卓信机械有限公司 | 组织研磨机-高通量组织研磨仪-实验室多样品组织研磨机-东方天净 传递窗_超净|洁净工作台_高效过滤器-传递窗厂家广州梓净公司 | 无锡装修装潢公司,口碑好的装饰装修公司-无锡索美装饰设计工程有限公司 | 北京办公室装修,办公室设计,写字楼装修-北京金视觉装饰工程公司 北京成考网-北京成人高考网 |