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

QQ導(dǎo)航改版設(shè)計(jì)心得

   產(chǎn)品背景

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

QQ導(dǎo)航改版設(shè)計(jì)心得 三聯(lián)
7

  2011年4月-2012年4月各主要導(dǎo)航網(wǎng)站日均覆蓋人數(shù)(萬(wàn)人)和市場(chǎng)領(lǐng)先的產(chǎn)品

  例一:首頁(yè)排版

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

  以下是好123和360導(dǎo)航主頁(yè)的布局,因?yàn)橛脩袅?xí)慣和自身逐漸轉(zhuǎn)變?yōu)閮?nèi)容導(dǎo)航與門戶網(wǎng)站的原因,符合’F'法則的頁(yè)面黃金位置并不是名站導(dǎo)航與酷站推薦:

8

  好123主頁(yè)

9

  360導(dǎo)航主頁(yè)

  過半好123的用戶使用時(shí)間在2-3年及以上,和QQ導(dǎo)航的用戶構(gòu)成形成了鮮明的對(duì)比。360在設(shè)計(jì)上一直追隨好123的步伐,通過安全衛(wèi)士和瀏覽器的捆綁,用戶構(gòu)成接近好123也只是時(shí)間問題。不過使用時(shí)間2-3年及以上的用戶也已經(jīng)大大超過QQ導(dǎo)航。

10

  QQ導(dǎo)航用戶結(jié)構(gòu)

11

  360用戶結(jié)構(gòu)

12

  好123用戶結(jié)構(gòu)

  因此,在首頁(yè)結(jié)構(gòu)上,因?yàn)槟繕?biāo)用戶的主要需求不同,新版的結(jié)構(gòu)和主要競(jìng)品形成了鮮明的對(duì)比。

13

  QQ導(dǎo)航 V1.0版本首頁(yè)基本結(jié)構(gòu)

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

14

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

15

  舊版QQ導(dǎo)航首頁(yè)布局

16

  新版QQ導(dǎo)航首頁(yè)布局

  下一版的名站導(dǎo)航還將進(jìn)一步精簡(jiǎn),同時(shí)滿足用戶對(duì)清爽,快速,權(quán)威,智能與個(gè)性化的需求。

  通過對(duì)目標(biāo)用戶進(jìn)行細(xì)分并針對(duì)其需求調(diào)整設(shè)計(jì),QQ導(dǎo)航 V1.0的主頁(yè)在上線后得到了用戶的肯定與好評(píng)。The number speak for themselves(數(shù)據(jù)為證):

17

  例二:名站導(dǎo)航的編輯與添加

  沒有特意想要做出差異化和與眾不同效果的主頁(yè)得到了用戶的一致好評(píng),不禁讓我們?cè)谠O(shè)計(jì)名站導(dǎo)航的編輯與自定義功能時(shí)暗下決心,一定要在這里做出與眾不同的設(shè)計(jì)!但因?yàn)樘胍c眾不同,名站導(dǎo)航的編輯方式成為了項(xiàng)目至今從設(shè)計(jì)稿到最終實(shí)現(xiàn)爭(zhēng)論最大的方案之一。

19

  好123添加,編輯網(wǎng)址時(shí)彈出的界面

20

  360導(dǎo)航添加,編輯網(wǎng)址時(shí)彈出的界面

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

21
22
24

  但在最終實(shí)現(xiàn)前,這一方案因?yàn)榭赡軐?dǎo)致 ‘猜你喜歡’的網(wǎng)址對(duì)用戶曝光量下降而讓產(chǎn)品無(wú)法下定決心進(jìn)行嘗試,我們又無(wú)法確定現(xiàn)在主流的交互方式到底會(huì)不會(huì)讓用戶反感(之所以將單獨(dú)添加網(wǎng)址和編輯 網(wǎng)址的場(chǎng)景分開,也考慮到用戶可能對(duì)每次添加、編輯網(wǎng)址時(shí)都彈出的猜你喜歡感到反感)。對(duì)我們的目標(biāo)用戶來說,甚至有可能會(huì)因?yàn)樵诓恢廊ツ膬荷暇W(wǎng)時(shí)因?yàn)? 沒有這些彈出的推薦網(wǎng)址而覺得茫然的可能性。

  在沒有資源進(jìn)行測(cè)試和無(wú)法確定用戶反應(yīng)的情況下,最終的方案不得不做一些妥協(xié),按照主流的交互方式進(jìn)行實(shí)現(xiàn):

25

  回顧最初的設(shè)計(jì)方案,設(shè)計(jì)時(shí)的確是按照用戶可能的添加場(chǎng)景和流程并進(jìn)行了細(xì)分,根據(jù)不同的預(yù)期給予不同的交互反饋。在與產(chǎn)品評(píng)審時(shí)也是信心十足,認(rèn)為不但滿足了不同場(chǎng)景用戶的

  需要,還避免了多余的信息干擾。更重要的是,作為設(shè)計(jì)師本省來講,這個(gè)方案和主要的競(jìng)爭(zhēng)對(duì)手相比顯得與眾不同。不過因?yàn)橄胍龀霾町惢男那樘惹校炊鴮?dǎo)致我們?cè)谠O(shè)計(jì)時(shí)低估了運(yùn)營(yíng),產(chǎn)品在這一功能上的需求和側(cè)重點(diǎn)。

  雖然360導(dǎo)航和好123的方式每次都會(huì)強(qiáng)行推給用戶推薦的網(wǎng)址甚至廣告,但我們沒有證據(jù)證明用戶對(duì)這種方式感到不適;

  對(duì)于運(yùn)營(yíng)和產(chǎn)品來講,添加網(wǎng)址的途徑輕量化后可能導(dǎo)致推薦網(wǎng)址的曝光率大幅下降;

  對(duì)于有批量添加網(wǎng)址需求的用戶來說輕量化的添加方式反而增加了他們的操作成本;

  只求更好,不求不同

  在決定主頁(yè)排版時(shí),我們并未強(qiáng)調(diào)要與眾不同,綜合分析用戶市場(chǎng)和需求后,設(shè)計(jì)和產(chǎn)品各方很容易就在新版本上達(dá)成了一致。在設(shè)計(jì)名站導(dǎo)航交互時(shí),雖然 設(shè)計(jì)也是從細(xì)分用戶使用場(chǎng)景出發(fā),但在一個(gè)與競(jìng)品有差異化的方案面前,忽略了衡量最終結(jié)果好壞的其它因素和緯度(運(yùn)營(yíng)需求,網(wǎng)址曝光率和產(chǎn)品考量)。最后 的方案雖然在形式上沒有不同,不過在視覺上進(jìn)行了大幅的優(yōu)化,也能保證給用戶較上一個(gè)版本更好的使用體驗(yàn)。

  這里再把”It’s very easy to be different, but very difficult to be better”拿出來點(diǎn)一下題。因?yàn)橐苍诟鞣N不同的場(chǎng)合聽到過有人說這句話倒過來念也能成立,即為”It’s very easy to be better, but very difficult to be different”要做到更好很容易,但要做到與眾不同就非常困難了。對(duì)于追求卓越的設(shè)計(jì)師來說,很多時(shí)候往往更好是不夠的,但這也會(huì)將他們帶入到一個(gè) 誤區(qū)中,就是為了不同而不同。我們?cè)谧霎a(chǎn)品設(shè)計(jì)時(shí)應(yīng)該只遵循”更好”的原則,特別是商業(yè)產(chǎn)品設(shè)計(jì)。

26

  日本設(shè)計(jì)大師原研哉曾經(jīng)舉辦過一個(gè)通心粉設(shè)計(jì)大賽,但通過對(duì)比后發(fā)現(xiàn)在烹飪難易度,生產(chǎn)成本和外觀等緯度的綜合考量下,勝出的反而是傳統(tǒng)的通心粉。

  現(xiàn)有的東西雖然沒有’與眾不同’的產(chǎn)品那樣振奮人心,但它們往往都經(jīng)過了用戶與市場(chǎng)的考驗(yàn)才得以留存。我認(rèn)為,好的設(shè)計(jì)師在聽到”希望能有更簡(jiǎn)潔、 更好、更與眾不同的設(shè)計(jì)”時(shí)會(huì)自動(dòng)將這句話過濾為”希望能有更好的設(shè)計(jì)”。只是追求更好的設(shè)計(jì),心無(wú)旁鳩的仔細(xì)分析產(chǎn)品,功能,市場(chǎng)等各種因素,自然會(huì)讓 你設(shè)計(jì)出適合不同用戶群體與需求的產(chǎn)品,而因?yàn)橛脩舻亩鄻有裕谧龀龈迷O(shè)計(jì)的同時(shí),”與眾不同”往往也已經(jīng)水到渠成了。

【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測(cè)試外,其他素材未做測(cè)試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請(qǐng)勿用于商業(yè)用途。如損害你的權(quán)益請(qǐng)聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。

相關(guān)文檔推薦

這篇文章給大家詳細(xì)介紹了HTML頁(yè)面跳轉(zhuǎn)及參數(shù)傳遞問題,需要的朋友參考下吧
這篇文章主要介紹了純css實(shí)現(xiàn)照片墻3D效果的示例代碼,可以實(shí)現(xiàn)鼠標(biāo)經(jīng)過圖片實(shí)現(xiàn)改變,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本篇文章主要介紹了純 Css 繪制扇形的方法示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
本篇文章主要介紹了一份純CSS loading效果代碼示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
這篇文章主要介紹了css 實(shí)現(xiàn)文字過長(zhǎng)自動(dòng)隱藏功能,需要的朋友可以參考下
本篇文章主要介紹了詳解CSS3 rem(設(shè)置字體大小) 教程,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 济南侦探调查-济南调查取证-山东私家侦探-山东白豹调查咨询公司 密集架|电动密集架|移动密集架|黑龙江档案密集架-大量现货厂家销售 | 灌木树苗-绿化苗木-常绿乔木-价格/批发/基地 - 四川成都途美园林 | 注浆压力变送器-高温熔体传感器-矿用压力传感器|ZHYQ朝辉 | 全自动不干胶贴标机_套标机-上海今昂贴标机生产厂家 | 全自动实验室洗瓶机,移液管|培养皿|进样瓶清洗机,清洗剂-广州摩特伟希尔机械设备有限责任公司 | 骨龄仪_骨龄检测仪_儿童骨龄测试仪_品牌生产厂家【品源医疗】 | 【星耀裂变】_企微SCRM_任务宝_视频号分销裂变_企业微信裂变增长_私域流量_裂变营销 | 披萨石_披萨盘_电器家电隔热绵加工定制_佛山市南海区西樵南方综合保温材料厂 | 不锈钢散热器,冷却翅片管散热器厂家-无锡市烨晟化工装备科技有限公司 | 室内室外厚型|超薄型|非膨胀型钢结构防火涂料_隧道专用防火涂料厂家|电话|价格|批发|施工 | 升降机-高空作业车租赁-蜘蛛车-曲臂式伸缩臂剪叉式液压升降平台-脚手架-【普雷斯特公司厂家】 | 四川职高信息网-初高中、大专、职业技术学校招生信息网 | 直流大电流电源,燃料电池检漏设备-上海政飞 | 联系我们老街华纳娱乐公司官网19989979996(客服) | 欧美日韩国产一区二区三区不_久久久久国产精品无码不卡_亚洲欧洲美洲无码精品AV_精品一区美女视频_日韩黄色性爱一级视频_日本五十路人妻斩_国产99视频免费精品是看4_亚洲中文字幕无码一二三四区_国产小萍萍挤奶喷奶水_亚洲另类精品无码在线一区 | 定时排水阀/排气阀-仪表三通旋塞阀-直角式脉冲电磁阀-永嘉良科阀门有限公司 | 飞行者联盟-飞机模拟机_无人机_低空经济_航空技术交流平台 | 上海公司注册-代理记账-招投标审计-上海昆仑扇财税咨询有限公司 上海冠顶工业设备有限公司-隧道炉,烘箱,UV固化机,涂装设备,高温炉,工业机器人生产厂家 | 纯水设备_苏州皙全超纯水设备水处理设备生产厂家| 塑木弯曲试验机_铜带拉伸强度试验机_拉压力测试台-倾技百科 | 水性绝缘漆_凡立水_绝缘漆树脂_环保绝缘漆-深圳维特利环保材料有限公司 | 江苏农村商业银行招聘网_2024江苏农商行考试指南_江苏农商行校园招聘 | 模具硅橡胶,人体硅胶,移印硅胶浆厂家-宏图硅胶科技 | 压片机_高速_单冲_双层_花篮式_多功能旋转压片机-上海天九压片机厂家 | PAS糖原染色-CBA流式多因子-明胶酶谱MMP-上海研谨生物科技有限公司 | 钢托盘,钢制托盘,立库钢托盘,金属托盘制造商_南京飞天金属制品实业有限公司 | 门禁卡_智能IC卡_滴胶卡制作_硅胶腕带-卡立方rfid定制厂家 | Magnescale探规,Magnescale磁栅尺,Magnescale传感器,Magnescale测厚仪,Mitutoyo光栅尺,笔式位移传感器-苏州连达精密量仪有限公司 | 郑州水质检测中心_井水检测_河南废气检测_河南中环嘉创检测 | 高铝矾土熟料_细粉_骨料_消失模_铸造用铝矾土_铝酸钙粉—嵩峰厂家 | 烟台条码打印机_烟台条码扫描器_烟台碳带_烟台数据采集终端_烟台斑马打印机-金鹏电子-金鹏电子 | 贝朗斯动力商城(BRCPOWER.COM) - 买叉车蓄电池上贝朗斯商城,价格更超值,品质有保障! | 注塑模具_塑料模具_塑胶模具_范仕达【官网】_东莞模具设计与制造加工厂家 | 湖北省煤炭供应链综合服务平台| 手板_手板模型制作_cnc手板加工厂-东莞天泓 | 北京自然绿环境科技发展有限公司专业生产【洗车机_加油站洗车机-全自动洗车机】 | 登车桥动力单元-非标液压泵站-非标液压系统-深圳市三好科技有限公司 | 东莞螺杆空压机_永磁变频空压机_节能空压机_空压机工厂批发_深圳螺杆空压机_广州螺杆空压机_东莞空压机_空压机批发_东莞空压机工厂批发_东莞市文颖设备科技有限公司 | 武汉高温老化房,恒温恒湿试验箱,冷热冲击试验箱-武汉安德信检测设备有限公司 | 广州食堂承包_广州团餐配送_广州堂食餐饮服务公司 - 旺记餐饮 | 今日娱乐圈——影视剧集_八卦娱乐_明星八卦_最新娱乐八卦新闻 |