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

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

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

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

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

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

　　首頁沒有廣告，讓用戶專注于內容;

　　抓住剛需內容，如“性”和“緋聞爆料”;

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

　　瀑布流，無刷新提示，引導用戶長時間停留;

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

　　內容

　　我將新聞內容分成三大類：

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

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

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

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

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

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

　　粉色主題的 femail 模塊

　　用戶閱讀心理

　　關于用戶心理，總是和網站設計和內容分不開的，這里只提出幾個有意思的點來說。

　　關于文章內容深度的把握

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

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

　　《紐約時報》的 Chrome 端應用，設計精良，內容品質高

　　關于用戶評論

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

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

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

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

　　標題一定要長

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

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

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

　　搜索引擎優(yōu)化

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

　　還是長標題。

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

　　還是清晰無碼大圖

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

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

　　網頁設計

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

　　網頁無主次設計

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

　　一個典型的“平行信息模塊”設計

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

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

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

　　利用主次內容排列，引導用戶形成網頁位置依賴和主次頁面間的內容高度交換瀏覽

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

　　《每日郵報》首頁的內容分布情況

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

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

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

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

　　一切為了便于點擊

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

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

　　背后的設計團隊

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

　　Brand42 的客戶

　　關于這家公司可以說的很多，我只說兩點：

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

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

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

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

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

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

　　小結

　　人們容易有一個思維慣性：給成功者建模。因此，在 Facebook 成功后，有大量的解析扎克伯格和 Facebook 設計的文章和書籍。對于已經逝去的喬幫主則更甚，正所謂腦補無止境。

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

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

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