從用戶體驗(yàn)出發(fā)的反傳統(tǒng)網(wǎng)頁設(shè)計(jì)

關(guān)注本土設(shè)計(jì)、移動(dòng)互聯(lián)網(wǎng)、用戶體驗(yàn)、設(shè)計(jì)創(chuàng)新，研究如何用設(shè)計(jì)方法鏈接"技術(shù)-商業(yè)-媒體"。在雷鋒網(wǎng)、英聞網(wǎng)等處都有設(shè)計(jì)專欄，TEDx講者，幾本設(shè)計(jì)和非設(shè)計(jì)類書作者。新浪微博：李一舟DESIGN

　　[核心提示] 從設(shè)計(jì)和用戶體驗(yàn)的角度說說為什么《The Daily Mail》(每日郵報(bào))會(huì)迅速超越紐約時(shí)報(bào)，成為世界上點(diǎn)擊量最高的報(bào)紙網(wǎng)媒。

　　前幾天收到《環(huán)球企業(yè)家》一位記者朋友的電話，說能否從設(shè)計(jì)和用戶體驗(yàn)的角度說說為什么《The Daily Mail》(每日郵報(bào))會(huì)迅速超越《紐約時(shí)報(bào)》，成為世界上點(diǎn)擊量最高的報(bào)紙網(wǎng)媒。從其官網(wǎng)我們能看到，現(xiàn)在它們有每月 4000 萬獨(dú)立 IP 訪問，更有意思的是，其中三分之二的流量并不來自報(bào)紙的發(fā)行地的英國。在這個(gè)凡事都需要被歸納成模式，似乎成功人士都修練了某種心經(jīng)，而爆棚的網(wǎng)站一定是遵循了某些市場(chǎng)和設(shè)計(jì)原則的時(shí)代，The Daily Mail 的網(wǎng)站設(shè)計(jì)可以用非常“簡陋”來形容。

　　2013 年 3 月 19 日晚上 8：20 分左右的首頁截屏

　　在問答網(wǎng)站知乎和 Quora 上，已經(jīng)有不少人在討論為什么《每日郵報(bào)》會(huì)這么成功?由于本人非常不喜歡看長篇大論的 1，2，3，4，差不多就是鼠標(biāo)滾到底，粗略看了幾條最短的評(píng)價(jià)，比較有說服力的包括：

　　首頁沒有廣告，讓用戶專注于內(nèi)容;

　　抓住剛需內(nèi)容，如“性”和“緋聞爆料”;

　　高清無碼大圖，讓你一次看個(gè)夠;

　　瀑布流，無刷新提示，引導(dǎo)用戶長時(shí)間停留;

　　為了深刻感受《每日郵報(bào)》的強(qiáng)大吸引力，我高頻率的使用了 3 天，從內(nèi)容、用戶心理、搜索引擎優(yōu)化、網(wǎng)頁設(shè)計(jì)、背后的設(shè)計(jì)團(tuán)隊(duì)幾個(gè)方面說說我的理解。(之所以只用 3 天就倉促發(fā)言，緣于我給自己看產(chǎn)品的“直覺原則” - 真正吸引人的產(chǎn)品不需要過度“腦補(bǔ)”，直觀感受即是核心價(jià)值)

　　內(nèi)容

　　我將新聞內(nèi)容分成三大類：

　　精華(值得深度反復(fù)品位的評(píng)論員文章);

　　專業(yè)(與用戶工作與興趣相關(guān)的知識(shí)和信息類內(nèi)容);

　　無聊(填滿用戶的碎片時(shí)間的八卦、萌系、敏感、搞笑、驚悚、雷人等內(nèi)容)。

　　對(duì)于一般用戶，無關(guān)閱讀優(yōu)先級(jí)，對(duì)三種內(nèi)容都有需求，而前兩類屬于壓力閱讀，因?yàn)闈撘庾R(shí)中必須從內(nèi)容中抽取“關(guān)鍵詞條”混合用戶的“認(rèn)知模型”進(jìn)行信息構(gòu)架。簡言之，這是一個(gè)用腦過程。對(duì)于無聊類內(nèi)容，通常用戶用來刺激和替換腦中的非必要信息，簡言之，這是空腦過程。《每日郵報(bào)》的主體內(nèi)容由科技版塊的輕內(nèi)容——“輕用腦過程”，和各種重口、高清和刺激的“重空腦過程”構(gòu)成，這就為用戶構(gòu)建了一個(gè)愉悅的體驗(yàn)，適度壓力加上放松，這種極致體驗(yàn)咱們可以類比“洗腳按摩”——痛并快樂著。

　　一級(jí)界面無廣告，而次級(jí)界面開始加入大量廣告。這是一個(gè)簡單的策略。對(duì)于大多數(shù)信息淺層索取用戶，看到主頁的長標(biāo)題和大圖，以及巨量豐富的相關(guān)信息(界面被設(shè)計(jì)得在單位面積內(nèi)擠入了超負(fù)荷的快速更新信息)，已經(jīng)滿足了其用腦和放腦過程。如果用戶被圖片內(nèi)容吸引，可以進(jìn)入次級(jí)頁面瀏覽大量高清圖片(通常 5-10 張)，由于圖片的視覺吸引，用戶不太在乎旁邊的廣告干擾。

　　特色的“femail”女性內(nèi)容模塊，“據(jù)說”在內(nèi)容貢獻(xiàn)和吸引用戶方面居功至偉。我并沒有看到《每日郵報(bào)》的直接數(shù)據(jù)，因而無法判定這個(gè)內(nèi)容模塊的流量。但是從邏輯上分析，《每日郵報(bào)》的整體內(nèi)容呈現(xiàn)至少到目前為止是全面導(dǎo)向“女性”、“剛需”的，因此每一個(gè)內(nèi)容模塊用戶一定程度上都可以當(dāng)八卦和猛料來瀏覽。femail 模塊反而是里面口味最清淡的，主要以女性用戶的直接需求，如美妝、購物、飲食和母嬰為主。我不認(rèn)為這是網(wǎng)站點(diǎn)擊的主要來源，但這個(gè)模塊可以為其合作商家直接倒流量，從宣傳上大力推介是可以理解的。

　　粉色主題的 femail 模塊

　　用戶閱讀心理

　　關(guān)于用戶心理，總是和網(wǎng)站設(shè)計(jì)和內(nèi)容分不開的，這里只提出幾個(gè)有意思的點(diǎn)來說。

　　關(guān)于文章內(nèi)容深度的把握

　　以《紐約時(shí)報(bào)》為例，媒體領(lǐng)域一直對(duì)其馬首是瞻，其內(nèi)容的專業(yè)深度和社會(huì)道德等考量絕對(duì)屬于業(yè)界的頂級(jí)水準(zhǔn)，其網(wǎng)站和移動(dòng)端的設(shè)計(jì)，也是將品質(zhì)貫徹到底，連字體和內(nèi)容排列間隙都是極為考究，其“氣質(zhì)”和“品質(zhì)”無需贅述。國內(nèi)媒體諸如《中國企業(yè)家》，在業(yè)界同樣有口皆碑，內(nèi)容深度甚至好于《第一財(cái)經(jīng)周刊》，但銷量卻無法與其相比。更極端一點(diǎn)的例子：你能說《男人裝》的內(nèi)容很有深度嗎?同樣，《紐約時(shí)報(bào)》流量也被《每日郵報(bào)》無情超越。

　　也就是說，讀者面對(duì)高質(zhì)量內(nèi)容是有閱讀壓力的。專業(yè)讀者只占總體數(shù)量的一小部分，大量讀者需要的是能快速獲取新鮮信息的服務(wù)，“新鮮愉悅”和“客觀呈現(xiàn)”是重點(diǎn)詞。作為英國發(fā)行量第二大的報(bào)紙，《每日郵報(bào)》正在全球幾個(gè)城市籌建新的網(wǎng)絡(luò)版內(nèi)容團(tuán)隊(duì)，以使其能迅速向用戶提供第一手消息。仔細(xì)品位《每日郵報(bào)》的文章，雖然有大量的爆料和擦邊球內(nèi)容，但是用圖片說話和保持基本的客觀立場(chǎng)(編輯們不會(huì)明顯偏左偏右)一直是一個(gè)內(nèi)容底線。編輯們也不會(huì)故作深沉，以降低內(nèi)容的閱讀壓力。

　　《紐約時(shí)報(bào)》的 Chrome 端應(yīng)用，設(shè)計(jì)精良，內(nèi)容品質(zhì)高

　　關(guān)于用戶評(píng)論

　　《紐約時(shí)報(bào)》網(wǎng)絡(luò)端不開放評(píng)論，只能做社交分享，言下之意：我的觀點(diǎn)不需要你們來評(píng)價(jià)?！睹咳锗]報(bào)》文章下面有豐富的評(píng)論區(qū)，允許用戶進(jìn)行“頂”和“踢”操作，言下之意：歡迎你們吐槽，說不定內(nèi)容比我們的正文更有意思哦。分享功能不多贅述，這是網(wǎng)媒的標(biāo)配，不過登入《每日郵報(bào)》的官方 Facebook 賬戶，其活躍度還是會(huì)嚇人一跳——原來“吐槽”才是人民群眾真正喜聞樂見和親身參與的健腦活動(dòng)。

　　《每日郵報(bào)》的評(píng)論區(qū)，經(jīng)?？吹梦腋叱钡?/p>

　　類似的例子，我們可以參考“豆瓣”。經(jīng)常玩豆瓣的朋友都有這樣的經(jīng)驗(yàn)，一個(gè)好玩的帖子，主貼絕對(duì)只是一個(gè)導(dǎo)火索和被吐槽對(duì)象，真正好玩有才的一定隱藏在后面的評(píng)論中。UGC 不止是對(duì)于焦點(diǎn)問題的貢獻(xiàn)，也同樣來源于零散的回復(fù)信息之中，而且這會(huì)是一個(gè)趨勢(shì)，自生長內(nèi)容通過有效的算法和適度運(yùn)營，可能為網(wǎng)站帶來意想不到的用戶群。

　　豆瓣小組熱貼回復(fù)數(shù)接近 2 萬，還在不斷刷新中

　　標(biāo)題一定要長

　　讓我們回想諸如新浪、搜狐等門戶，由于條塊化的分區(qū)，很多內(nèi)容要求必須精簡到 8-10 字符內(nèi)，以至于我們經(jīng)常無法將標(biāo)題和內(nèi)容對(duì)應(yīng)起來，又怎么會(huì)點(diǎn)進(jìn)去繼續(xù)瀏覽?《每日郵報(bào)》對(duì)于標(biāo)題的要求只有 1 個(gè)：長，一定要長，長到用戶不瀏覽具體內(nèi)容也能抓住關(guān)鍵信息。這樣的信息傳達(dá)才是有效的。

　　這其實(shí)也源于中英文不同的語法構(gòu)成和閱讀習(xí)慣。中文是高度概括和隱喻的，我們習(xí)慣繞圈來說事兒。英文是簡單粗暴的，你必須直擊爆點(diǎn)，標(biāo)題中對(duì)于同一個(gè)事物往往可以用好幾個(gè)形容詞。我們回憶一下喬幫主的演講 – 無可比擬的，極好的，難以置信的，前所未有的，都是被反復(fù)使用的詞匯。

　　標(biāo)題 + 副標(biāo)題 + 圖片，信息傳達(dá)已經(jīng)到位，想看更多比基尼大圖，請(qǐng)進(jìn)入次級(jí)頁面

　　搜索引擎優(yōu)化

　　這個(gè)因素一般是被非技術(shù)人員忽略的，作為設(shè)計(jì)師，我也不是這方面的專業(yè)人士，只能蜻蜓點(diǎn)水的說一下。但實(shí)際上從網(wǎng)站運(yùn)營和數(shù)據(jù)來說，SEO 絕對(duì)是一個(gè)值得關(guān)注的核心點(diǎn)。雖然谷歌不斷調(diào)整算法，造成以往的很多 SEO 方式不再適用，但總體來說一些關(guān)鍵方式依然重要。

　　還是長標(biāo)題。

　　長標(biāo)題包含最多的信息和關(guān)鍵詞，至于這樣為什么利于 SEO 我就不解釋了。我們只需要知道，這樣的長標(biāo)題在滿足設(shè)計(jì)原則基礎(chǔ)下，從內(nèi)容到 SEO 都是很占便宜的。

　　還是清晰無碼大圖

　　如果我們需要找觀點(diǎn)，可以去《紐約時(shí)報(bào)》，想和奧巴馬侃大山，可以去 Google+，我們的選擇很多，對(duì)于入口我們幾乎沒有粘性。就像我們并不在乎去哪個(gè)地方給手機(jī)充話費(fèi)，而是看哪邊的折扣更加吸引人，在這點(diǎn)上，門戶并沒有任何優(yōu)勢(shì)。

　　但是如果我們想看八卦消息的高清大圖，《每日郵報(bào)》幾乎是我們唯一、最佳選擇。這就是“剛需”，從它們自己披露的數(shù)據(jù)來看，其 60% 的流量甚至不來自 Google 和 Facebook 這樣的平臺(tái)門戶，而是用戶直接訪問。這是相當(dāng)厲害的，也就是說《每日郵報(bào)》和 Facebook 一樣，由于主要是獨(dú)立訪問，幾乎可以不賣 Google 的面子，用戶的黏度非常高。同樣，當(dāng)我們?cè)?Google 用關(guān)鍵熱詞搜圖，大量的結(jié)果也導(dǎo)向《每日郵報(bào)》，這也給網(wǎng)站帶來豐富的流量。

　　網(wǎng)頁設(shè)計(jì)

　　終于可以說設(shè)計(jì)，其實(shí)我看來，《每日郵報(bào)》不僅沒有違背設(shè)計(jì)原則，而且它還符合很多新近的設(shè)計(jì)趨勢(shì)。

　　網(wǎng)頁無主次設(shè)計(jì)

　　在傳統(tǒng)的網(wǎng)頁設(shè)計(jì)中，我們經(jīng)常提到“F”區(qū)的概念，即標(biāo)題欄和左側(cè)導(dǎo)航欄以及第一屏的顯要位置需要特別設(shè)計(jì)，甚至精確到像素。對(duì)于《每日郵報(bào)》來說，這樣的網(wǎng)頁內(nèi)容主次是模糊的，因?yàn)槿撁娑际菬o刷新的超長信息流。用戶可以一直下滾到 30 屏左右。這樣的“瀑布流”式的新布局，其實(shí)就是在引導(dǎo)用戶將閱讀習(xí)慣從“標(biāo)題 - 內(nèi)容頁”模式轉(zhuǎn)向“平行信息區(qū)塊”模式。每一個(gè)信息模塊都是獨(dú)立存在，用戶不是必須進(jìn)入次級(jí)頁面才能瀏覽詳情。

　　一個(gè)典型的“平行信息模塊”設(shè)計(jì)

　　這種信息設(shè)計(jì)風(fēng)格，最典型的是微軟的 Metro UI 設(shè)計(jì)。雖然在操作系統(tǒng)層面還不成熟，但是在內(nèi)容呈現(xiàn)上的優(yōu)勢(shì)已經(jīng)很明顯了。只不過在系統(tǒng)層面可以加上一個(gè)實(shí)時(shí)更新功能，在網(wǎng)站端應(yīng)用的還不廣泛。

　　另一個(gè)值得注意的趨勢(shì)，我們稱為 parallax scrolling (視差滾動(dòng))，這是利用 html5 技術(shù)的一種新的信息呈現(xiàn)方式，相信也會(huì)在越來越多的強(qiáng)內(nèi)容網(wǎng)媒上頻繁使用。

　　采用視差滾動(dòng)制作的 Spotify 主頁，為用戶帶來豐富的感官體驗(yàn)

　　利用主次內(nèi)容排列，引導(dǎo)用戶形成網(wǎng)頁位置依賴和主次頁面間的內(nèi)容高度交換瀏覽

　　這個(gè)比較拗口，需要著重說明一下。我們仔細(xì)觀察《每日郵報(bào)》主界面的設(shè)計(jì)，每個(gè)主體內(nèi)容都有 A(主體內(nèi)容)、B(輔助內(nèi)容)和 C(相關(guān)內(nèi)容)構(gòu)成，在首頁的比例大約是 1：2-4：5-7。

　　《每日郵報(bào)》首頁的內(nèi)容分布情況

　　這個(gè)比例在次級(jí)頁面就比較夸張了，一個(gè)分頁中除了大量的輔助高清圖片，還有超過 200 個(gè) C 類相關(guān)內(nèi)容的圖文鏈接，保證用戶在任何時(shí)候，只要分心就能通過右側(cè)的鏈接回到某一個(gè)內(nèi)容的一級(jí)頁面，從而形成一個(gè)用戶在“一級(jí)頁面 - 二級(jí)頁面 - 一級(jí)頁面”的循環(huán)閱讀情境。我認(rèn)為這是《每日郵報(bào)》一個(gè)非常核心的內(nèi)容引導(dǎo)模式和設(shè)計(jì)創(chuàng)新。雖然從網(wǎng)頁美感角度，特別是次級(jí)界面會(huì)很凌亂，但是卻非常有效。網(wǎng)頁設(shè)計(jì)師需要考慮的絕不僅僅是美感，還有頁面的可用性。

　　在這點(diǎn)上，不得不提一下 360 導(dǎo)航。在我看來，360 的產(chǎn)品迭代和用戶需求的轉(zhuǎn)化率是同行里面極高的。特別是在 360 導(dǎo)航這個(gè)產(chǎn)品上，短短時(shí)間做到了市場(chǎng)老二，且逐漸將更多的文字靜態(tài)鏈接替換成了“基于用戶個(gè)性定制的圖文側(cè)邊欄”。

　　當(dāng)然，這里還會(huì)遇到一個(gè)算法問題，比如用戶經(jīng)常瀏覽一些比較刺激的視頻，如果導(dǎo)航將此類的標(biāo)題和大圖置于用戶首頁，可能會(huì)讓用戶尷尬和憤怒，如何適度的做內(nèi)容露出也是需要仔細(xì)考慮的。

　　雖然還是免不了刺激的文字和圖片信息，但是 360 導(dǎo)航的個(gè)性化引導(dǎo)已經(jīng)做得很好

　　一切為了便于點(diǎn)擊

　　只拿幾個(gè)數(shù)據(jù)來說明：《每日郵報(bào)》的圖片平均大小超過 636pix，標(biāo)題長度大于 20 個(gè)字符，一個(gè)主體內(nèi)容旁邊的“小故事”超過 260 則，所有的圖片內(nèi)容均免費(fèi)。

　　這一切都保證讀者來到網(wǎng)站，便會(huì)不停地點(diǎn)來點(diǎn)去，并且發(fā)現(xiàn)不管怎樣總是會(huì)回到首頁，并且因此發(fā)現(xiàn)更多有意思的內(nèi)容。網(wǎng)站的用戶平均停留時(shí)間超過 10 分鐘。

　　背后的設(shè)計(jì)團(tuán)隊(duì)

　　《每日郵報(bào)》的設(shè)計(jì)團(tuán)隊(duì)是來自倫敦的 Brand42，他們的客戶主要是全球大品牌以及一些亟待轉(zhuǎn)型的傳統(tǒng)媒體?！睹咳锗]報(bào)》的網(wǎng)頁整體設(shè)計(jì)獲得了 2012 年的最佳設(shè)計(jì)大獎(jiǎng)。

　　Brand42 的客戶

　　關(guān)于這家公司可以說的很多，我只說兩點(diǎn)：

　　1. 他們同樣遵循一般的設(shè)計(jì)公司的規(guī)范設(shè)計(jì)流程。他們?yōu)闀r(shí)下的網(wǎng)站、移動(dòng)端和品牌做設(shè)計(jì)與咨詢，這與國內(nèi)的由平面設(shè)計(jì)轉(zhuǎn)型的品牌設(shè)計(jì)公司類似。

　　視覺設(shè)計(jì)和不同內(nèi)容區(qū)塊的整體色調(diào)設(shè)計(jì)也是他們?yōu)椤睹咳锗]報(bào)》設(shè)計(jì)的一個(gè)特征

　　只是他們的名字——42 的來由有點(diǎn)意思。在道格拉斯•亞當(dāng)斯的《銀河系漫游指南》中，超級(jí)計(jì)算機(jī)關(guān)于生命、宇宙、萬物的終極問題的答案正是數(shù)字“42”。有了這樣的愿景和追求，也難怪他們可以做出這么別具一格的設(shè)計(jì)。

　　非常俏皮的公司介紹，整個(gè)環(huán)境是復(fù)古 + 輕松 + 無厘頭

　　2. 關(guān)于定量研究在設(shè)計(jì)中的重要地位。作為設(shè)計(jì)研究員，我會(huì)經(jīng)常頭痛于向客戶和其它專業(yè)的同仁解釋設(shè)計(jì)價(jià)值。因?yàn)樵O(shè)計(jì)的很多方面大量依賴直覺和感性以及長期工作的經(jīng)驗(yàn)，這是不可能用數(shù)學(xué)模型來定量分析的。但是網(wǎng)頁設(shè)計(jì)稍有不同，由于可以從用戶那里獲得大量的信息，我們可以通過諸如眼球追蹤和網(wǎng)頁熱區(qū)捕捉等技術(shù)來從數(shù)據(jù)角度分析用戶行為。所幸我在倫敦游學(xué)期間和不少的設(shè)計(jì)工作室進(jìn)行了交流，雖然沒有直接與 Brand42 的設(shè)計(jì)師聊到定量分析的話題，卻也學(xué)習(xí)了一些技術(shù)和交互的融合方式。不難想象，Brand42 在《每日郵報(bào)》的設(shè)計(jì)過程中，做了大量的眼動(dòng)實(shí)驗(yàn)和 AB test。最終的呈現(xiàn)形式雖然是“雜亂”的，但排版同樣是精確到像素的。

　　國內(nèi)同行可能對(duì)我的說法嗤之以鼻，“哪家互聯(lián)網(wǎng)公司不注重?cái)?shù)據(jù)?”。的確如此，但是《每日郵報(bào)》的邏輯是“設(shè)計(jì)驅(qū)動(dòng)數(shù)據(jù)”，即首先確定了用戶邏輯，怎樣的內(nèi)容和設(shè)計(jì)是引人入勝的，然后用代碼和數(shù)據(jù)做迭代和改進(jìn)，在這里設(shè)計(jì)創(chuàng)新和內(nèi)容和合理呈現(xiàn)始終是核心。我們國內(nèi)大量的網(wǎng)站則是先扔一個(gè)原型上來，買流量跑用戶數(shù)據(jù)，然后依賴數(shù)據(jù)進(jìn)行網(wǎng)頁調(diào)整，按照運(yùn)營來安放廣告位。最終的結(jié)果就是：網(wǎng)站沒有設(shè)計(jì)，毫無美感且大量趨同(你買的數(shù)據(jù)能和別家的有多大區(qū)別?)

　　小結(jié)

　　人們?nèi)菀子幸粋€(gè)思維慣性：給成功者建模。因此，在 Facebook 成功后，有大量的解析扎克伯格和 Facebook 設(shè)計(jì)的文章和書籍。對(duì)于已經(jīng)逝去的喬幫主則更甚，正所謂腦補(bǔ)無止境。

　　實(shí)際上，互聯(lián)網(wǎng)產(chǎn)品的成功大量依賴特定時(shí)空下的特定機(jī)遇，就像今天的《每日郵報(bào)》，我并不覺得這值得網(wǎng)頁設(shè)計(jì)師和互聯(lián)網(wǎng)分析師去大書特書，我在這里寫寫，你們轉(zhuǎn)載或者批一批也就行了。在 AOL、Google、Twitter、Tumblr 和 Facebook 等的狙擊下，我并不覺得它的流量還會(huì)這樣無節(jié)操攀升下去，其內(nèi)容本身的限制以及盈利方式的單一等都對(duì)其接下來的發(fā)展不利。反觀 Facebook 等社交平臺(tái)，運(yùn)營內(nèi)容只是其非常小的一個(gè)模塊，社交關(guān)系和 UGC 以及第三方應(yīng)用的空間都極大，這是暫時(shí)還無法擺脫“媒體屬性”的《每日郵報(bào)》所無可比擬的。

　　我更加期待的是 Google Reader 關(guān)閉之后，佩奇對(duì)于 Google 產(chǎn)品線的進(jìn)一步精簡和整合;Facebook 不斷調(diào)整其交互細(xì)節(jié)和用戶時(shí)間線的嘗試下的社交屬性的變異;Twitter 作為時(shí)代脈搏，更好的內(nèi)容算法和大數(shù)據(jù)運(yùn)營的新盈利模式出現(xiàn)。

原文地址：http://www.geekpark.net/read/view/175379