您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 設(shè)計理論 >> 瀏覽設(shè)計教程

從用戶體驗出發(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,差不多就是鼠標(biāo)滾到底,粗略看了幾條最短的評價,比較有說服力的包括:

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

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

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

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

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

  內(nèi)容

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

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

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

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

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

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

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

  

 

  粉色主題的 femail 模塊

  用戶閱讀心理

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

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

  以《紐約時報》為例,媒體領(lǐng)域一直對其馬首是瞻,其內(nèi)容的專業(yè)深度和社會道德等考量絕對屬于業(yè)界的頂級水準(zhǔn),其網(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)容團(tuán)隊,以使其能迅速向用戶提供第一手消息。仔細(xì)品位《每日郵報》的文章,雖然有大量的爆料和擦邊球內(nèi)容,但是用圖片說話和保持基本的客觀立場(編輯們不會明顯偏左偏右)一直是一個內(nèi)容底線。編輯們也不會故作深沉,以降低內(nèi)容的閱讀壓力。

  

 

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

  關(guān)于用戶評論

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

  

 

  《每日郵報》的評論區(qū),經(jīng)常看得我高潮迭起

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

  

 

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

  標(biāo)題一定要長

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

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

  

 

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

  搜索引擎優(yōu)化

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

  還是長標(biāo)題。

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

  還是清晰無碼大圖

  如果我們需要找觀點,可以去《紐約時報》,想和奧巴馬侃大山,可以去 Google+,我們的選擇很多,對于入口我們幾乎沒有粘性。就像我們并不在乎去哪個地方給手機(jī)充話費,而是看哪邊的折扣更加吸引人,在這點上,門戶并沒有任何優(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ū)的概念,即標(biāo)題欄和左側(cè)導(dǎo)航欄以及第一屏的顯要位置需要特別設(shè)計,甚至精確到像素。對于《每日郵報》來說,這樣的網(wǎng)頁內(nèi)容主次是模糊的,因為全頁面都是無刷新的超長信息流。用戶可以一直下滾到 30 屏左右。這樣的“瀑布流”式的新布局,其實就是在引導(dǎo)用戶將閱讀習(xí)慣從“標(biāo)題 - 內(nèi)容頁”模式轉(zhuǎn)向“平行信息區(qū)塊”模式。每一個信息模塊都是獨立存在,用戶不是必須進(jìn)入次級頁面才能瀏覽詳情。

  

 

  一個典型的“平行信息模塊”設(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)方式,相信也會在越來越多的強(qiáng)內(nèi)容網(wǎng)媒上頻繁使用。

  

 

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

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

  這個比較拗口,需要著重說明一下。我們仔細(xì)觀察《每日郵報》主界面的設(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)閱讀情境。我認(rè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)航將此類的標(biāo)題和大圖置于用戶首頁,可能會讓用戶尷尬和憤怒,如何適度的做內(nèi)容露出也是需要仔細(xì)考慮的。

  

 

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

  一切為了便于點擊

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

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

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

  《每日郵報》的設(shè)計團(tuán)隊是來自倫敦的 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)斯的《銀河系漫游指南》中,超級計算機(jī)關(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è)計工作室進(jìn)行了交流,雖然沒有直接與 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ù)做迭代和改進(jìn),在這里設(shè)計創(chuàng)新和內(nèi)容和合理呈現(xiàn)始終是核心。我們國內(nèi)大量的網(wǎng)站則是先扔一個原型上來,買流量跑用戶數(shù)據(jù),然后依賴數(shù)據(jù)進(jìn)行網(wǎng)頁調(diào)整,按照運(yùn)營來安放廣告位。最終的結(jié)果就是:網(wǎng)站沒有設(shè)計,毫無美感且大量趨同(你買的數(shù)據(jù)能和別家的有多大區(qū)別?)

  小結(jié)

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

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

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

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

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di1456.html
從細(xì)節(jié)提高用戶體驗,用戶體驗的76個要素
淺談色彩學(xué):人性化的 HSB 色彩空間
圖趣網(wǎng)微信
建議反饋
×