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

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

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

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

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

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

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

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

　　高清無碼大圖，讓你一次看個夠;

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

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

　　內(nèi)容

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

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

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

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

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

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

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

　　粉色主題的 femail 模塊

　　用戶閱讀心理

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

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

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

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

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

　　關(guān)于用戶評論

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

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

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

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

　　標題一定要長

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

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

　　標題 + 副標題 + 圖片，信息傳達已經(jīng)到位，想看更多比基尼大圖，請進入次級頁面

　　搜索引擎優(yōu)化

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

　　還是長標題。

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

　　還是清晰無碼大圖

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

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

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

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

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

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

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

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

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

　　采用視差滾動制作的 Spotify 主頁，為用戶帶來豐富的感官體驗

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

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

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

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

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

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

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

　　一切為了便于點擊

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

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

　　背后的設(shè)計團隊

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

　　Brand42 的客戶

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

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

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

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

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

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

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

　　小結(jié)

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

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

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

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