與眾不同易，精益求精難 — QQ導(dǎo)航改版設(shè)計心得

在切入設(shè)計正文前先來看一組08年的搞笑圖片，對比了日本的NHK,TBS,朝日等電視臺與東京電視臺同一時段播出節(jié)目的差別：

新瀉發(fā)生六級強(qiáng)震，只有他們還在播料理節(jié)目

九州大地震，他們的畫面上打出的字幕拼成日文為“太好了！”的意思。。。

比起小泉純一郎參拜靖國神社，金目鯛更為重要

發(fā)生歹徒挾持人質(zhì)事件，只有他們還在播動畫。而且正好是挾持人質(zhì)的劇情！

東京大停電時，只有東京電視臺有速報。不過報給誰看?。?/p>

雖說是08年的搞笑圖，也不排除是有人故意PS的結(jié)果。不過我相信肯定有人在捧腹之余，對東京電視臺產(chǎn)生了濃厚的興趣。如果剛好能收到甚至?xí)滩蛔∠肟匆豢船F(xiàn)在在播什么節(jié)目吧？如果這些圖片都是真實的，那么東京電視臺的確是獨樹一幟，與眾不同。這樣不按常理出牌的電視臺，如果要觀眾投票的話估計也會因為其‘奇葩’和滿足不同觀眾需求的特質(zhì)收獲滿滿一籮筐‘贊’吧。

回到本文的主題，設(shè)計師們在接到需求時往往會看到“希望能有更簡潔、更好、更與眾不同的設(shè)計”或類似的字眼，那么在現(xiàn)實工作中，‘更好’（better)和‘與眾不同’（different)這對魚與熊掌該如何取舍呢？

蘋果的首席工業(yè)設(shè)計師和副總裁喬納森·艾維（Jonathan Ive）說 “It’s very easy to be different, but very difficult to be better”，大意是要做到不同很容易，但要做到更好就非常困難了。東京電視臺的與眾不同對消費者來說是件好事，因為它為用戶在眾多可選擇的頻道中提供了多樣性，可以說是出奇制勝。但如果在產(chǎn)品設(shè)計，特別是互聯(lián)網(wǎng)產(chǎn)品的設(shè)計上，同一消費者對同一類型的產(chǎn)品往往只會采用一兩款的情況下，僅僅靠‘與眾不同’就行不通了。電視節(jié)目不像用戶的桌面和移動設(shè)備，不管漏掉多少重要新聞，只要看其他臺就好了。特別是對網(wǎng)站來說，如果用戶在頭幾分鐘的時間內(nèi)找不到他們感興趣的內(nèi)容或覺得網(wǎng)站不可靠，使用體驗不佳的話，這個用戶就會去別的網(wǎng)站，對產(chǎn)品來講這是不可接受的。在接到QQ導(dǎo)航網(wǎng)站改版的需求時，因為市場上已經(jīng)形成了‘好123’和‘360導(dǎo)航’兩家獨大的格局，因此主要任務(wù)是功能補(bǔ)齊和對舊版進(jìn)行優(yōu)化。但作為設(shè)計師本身來講，多少還是希望自己能做出一些‘不一樣’的東西。本文結(jié)合改版過程中的兩個例子，講述了我對設(shè)計中的‘更好’和‘與眾不同’的感悟。

產(chǎn)品背景

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

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

例一：首頁排版

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

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

　　　　　　好123主頁

　　　　　　　　360導(dǎo)航主頁

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

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

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

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

因此，在首頁結(jié)構(gòu)上，因為目標(biāo)用戶的主要需求不同，新版的結(jié)構(gòu)和主要競品形成了鮮明的對比。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

回顧最初的設(shè)計方案，設(shè)計時的確是按照用戶可能的添加場景和流程并進(jìn)行了細(xì)分，根據(jù)不同的預(yù)期給予不同的交互反饋。在與產(chǎn)品評審時也是信心十足，認(rèn)為不但滿足了不同場景用戶的
需要，還避免了多余的信息干擾。更重要的是，作為設(shè)計師本省來講，這個方案和主要的競爭對手相比顯得與眾不同。不過因為想要做出差異化的心情太迫切，反而導(dǎo)致我們在設(shè)計時低估了運營，產(chǎn)品在這一功能上的需求和側(cè)重點。

1. 雖然360導(dǎo)航和好123的方式每次都會強(qiáng)行推給用戶推薦的網(wǎng)址甚至廣告，但我們沒有證據(jù)證明用戶對這種方式感到不適；
2. 對于運營和產(chǎn)品來講，添加網(wǎng)址的途徑輕量化后可能導(dǎo)致推薦網(wǎng)址的曝光率大幅下降；
3. 對于有批量添加網(wǎng)址需求的用戶來說輕量化的添加方式反而增加了他們的操作成本；

只求更好，不求不同

在決定主頁排版時，我們并未強(qiáng)調(diào)要與眾不同，綜合分析用戶市場和需求后，設(shè)計和產(chǎn)品各方很容易就在新版本上達(dá)成了一致。在設(shè)計名站導(dǎo)航交互時，雖然設(shè)計也是從細(xì)分用戶使用場景出發(fā)，但在一個與競品有差異化的方案面前，忽略了衡量最終結(jié)果好壞的其它因素和緯度（運營需求，網(wǎng)址曝光率和產(chǎn)品考量）。最后的方案雖然在形式上沒有不同，不過在視覺上進(jìn)行了大幅的優(yōu)化，也能保證給用戶較上一個版本更好的使用體驗。這里再把“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”要做到更好很容易，但要做到與眾不同就非常困難了。對于追求卓越的設(shè)計師來說，很多時候往往更好是不夠的，但這也會將他們帶入到一個誤區(qū)中，就是為了不同而不同。我們在做產(chǎn)品設(shè)計時應(yīng)該只遵循“更好”的原則，特別是商業(yè)產(chǎn)品設(shè)計。

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

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