淘寶頭條內容化設計項目總結 by 阿里巴巴集團UED

分類:設計 時間:2016-09-24

背景介紹

淘寶頭條客戶端在幾個月內從無到有,今天這里可以跟大家分享一下APP產生的全過程。相信大家最關心的就是如何從零到一做出一個APP,以及過程里的方法和經驗。

在此之前,簡單說一些淘寶頭條的項目背景。淘寶頭條的定位是一個權威的生活消費資訊平臺。淘寶頭條這個產品在手機淘寶中孵化了很久,積累了大量的賬號和內容源,內容主要涉及到指導消費、生活娛樂、時尚穿搭等方面。有了一定的用戶基礎之后,淘寶頭條獨立app應運而生。

Part1 如何從零到一做出淘寶頭條的架構

淘寶頭條是一個資訊類應用,內容導向性非常強,因此整個APP的設計流程從內容的角度出發,這個過程主要是從內容梳理到內容呈現的過程。這部分的主要步驟是內容產生-內容再生產-內容組織-內容分發流轉。

ADVERTISEMENT

步驟一:從內容產生到內容再生產

對于內容類的應用,首先要明確我們“要”提供什么內容以及“能”夠提供什么內容。“要”提供的是說用戶需要、想看什么內容,“能”提供的是我們現有的資源和專長在哪里。對于限定好的內容池子,經過分析提煉發散去產出很多包裝和加工的方案。

從用戶想看什么類型的內容入手,明確我們要傳達的內容方向,淘寶頭條的內容鎖定在生活消費領域,要做一些獨家精品的東西作為抓手,內容保證新和熱,一部分內容能帶給讀者漲知識的感覺。根據這樣的大方向,項目組成員頭腦風暴發散了很多欄目和有趣的小模塊。設計師在明確產品目標和大家的想法之后,確立設計方向或者說設計的時候要遵循的原則,最后產出設計方案。

案例

在規劃產品的起初,淘寶頭條就在這樣的過程里產出了一批內容的包裝方案。例如首頁第二個Tab-五分鐘欄目。起初為了提高用戶對產品的粘性,項目組決定每天自產或者精編高質量內容,在這里用戶可以看到輕松有趣的漲知識的訊息,如果用戶在碎片化的時間里不知道看什么,能夠想起這個欄目并打開淘寶頭條,那么這個欄目就非常成功了。內容的方向定位為“新鮮”“少而精”“有趣”“漲知識”,產品上的目標是希望提升用戶的粘性和回訪。用戶對這個欄目的認知度和記憶非常重要。設計方案上突出這個欄目的特色,不管是信息流的排布方式,還是頭部和底部對時間的強調以及具體的排版,都是為了讓用戶對這個欄目產生印象和認識,傳達到這個欄目是短小精悍的,短時間內就可以完成幾篇有趣內容的閱讀。

ADVERTISEMENT

諸如五分鐘的產生,我們從用戶對內容的需求出發,勾畫了很多欄目和產品方案,當池子里有了很多欄目和產品形態,下一步的工作就是將它們合理地組織起來。

步驟二:從內容再生產到內容組織

當內容方案都大致規劃好之后,將這些方案分類組織起來,就形成了APP的架構。就好像買好了很多菜,現在要怎么搭配炒它們。

● 一級架構的劃分

首先,在一級架構的分類中,以用戶針對內容的行為和任務分出四個類別作為一級導航。事實上很多產品的一級導航都是以行為和任務來區分,因為一級導航的位置非常寶貴,要確保每個區塊都有絕對的存在的必要性,導航之間最好不要存在維度的重合。淘寶頭條的一級導航就是根據不同的內容任務來劃分的,分別是內容的直接輸送,內容的重組,內容管理,內容互動。

ADVERTISEMENT

內容輸送就是頭條的傳統信息流,依照個性化算法推送feeds,所以主頁面注重閱讀效率,盡量多的曝出feed條數和圖文信息,主頁面看起來比較緊湊,信息量大。內容重組的模塊叫做“聚焦”,是一個完整的抓手欄目,聚焦是通過技術抓取熱門關鍵詞,在內容庫里將與關鍵詞相匹配的文章都抓出來以時間軸的形式展現出來。讀者可以了解到熱點時事發展的來龍去脈。對于內容的重組模塊,頁面看上去以突出產品邏輯為主,用戶看到的是內容集合被打包的感覺。內容的管理就是APP中常見的“我的”,頁面上是一條一條的任務。互動模塊還在設計中,不贅述,主要包括一些話題類的欄目。當然,欄目的劃分不完全是如此嚴格,考慮到tab點擊的衰減和重點內容的滲透等原因,一些模塊也會做調整。

● 二級架構的劃分

接下來二級架構的劃分涉及到每個頁面的功能、信息,因情況而異。比如負責內容輸出的主list頁面按照信息的種類分類,比如賬號、圖文、視頻、活動,便于用戶尋找到自己想要的訊息。“聚焦”頁面則是按照用戶的使用場景來區分,因為在聚焦欄目里,用戶需要尋找關鍵詞、訂閱關鍵詞、瀏覽發現,有一系列明確的場景需求。“我的”頁面則是按照任務來分類。

ADVERTISEMENT

當一二級架構經過反復調整穩定下來之后,產品的信息框架已經很明確,將信息架構一一轉化成相應的頁面,APP的大致樣子也就產生了。

步驟三:從內容組織到內容分發流轉

產品框架搭建的過程里,產品的相關人員還要考慮內容的分發流轉,這兩步的過程是穿插進行的。這個過程里三件事很重要。第一,搞清楚產品核心是什么,例如社交產品的核心可能是圈子,購物產品可能是商品,淘寶頭條作為資訊類產品,核心是各種各樣的內容。明確核心之后,第二,考慮產品整個的路徑閉環是怎樣的,用戶如何觸達到產品核心,內容如何流轉起來。第三,作為一個新產品,它如何引流回流。

案例

其中第二點,用戶如何觸達到產品核心以及內容如何流轉起來與頁面的交互關系最大,這里舉例說說。這些宏觀的考慮可能會落實到頁面上的一些細節中。淘寶頭條作為一個典型的內容型產品,用戶盡快接觸到詳情頁(內容的核心頁面)很重要:

第一,架構層級很淺,到達詳情頁的入口很多,除了特殊欄目,保證用戶兩步到達詳情頁,避免路徑中的流失。

第二,對于一些特色欄目不得不存在中間頁的情況(延長了用戶的閱讀路徑),設計上將中間頁的信息流設計成大圖加部分文字的樣式,盡量多的曝光內容,這些中間頁本身也承載了很多信息,可以把它們看成另一種形式的詳情頁,我們希望這些內容提前被分發到用戶那里。中間頁面也能打造沉浸式的閱讀,不僅僅是一張list。

第三,整體提高瀏覽效率,更多地傳達信息。例如,像主list這種注重分發效率的瀏覽頁面,設計時去掉了頭部,每條feed的卡片變得更窄,以增加瀏覽的條數,使用戶看到更多。

第四,強化分享和相關推薦,增加用戶接觸內容的渠道和鏈路,盡量讓用戶逛起來,把內容分享出去。

從內容產生到內容再生產,再到內容組織,最后內容分發流,經歷了這些步驟之后,淘寶頭條從一些零散的內容元素被規劃設計成了一個相對完整的APP。在大的框架和頁面結構確定之后,我們進入第二部分,開始豐富、細化產品,產品從內容呈現階段進入一個表達和感知的層面。

Part2:如何從表達和呈現內容

從內容呈現到內容表達的角度出發,闡述內容視覺表現方法和過程。

主要通過三個步驟:從內容定位分析出內容的特點,再從內容的特點中提取出內容的風格,最后把這種風格運用在產品中。

步驟一:內容定位→內容特點

淘寶頭條的內容是“消費生活資訊媒體”。從“消費資訊、生活資訊、媒體”三個角度出發,歸納出淘寶頭條的內容特點:

消費資訊:新潮、導購、豐富、時尚、先鋒、穿搭、商品、消費信息、新鮮、穿搭……

生活資訊:豐富、娛樂、漲知識、休閑……

資訊媒體:可信賴、權威、客觀、平臺、主流、個性化 ……

步驟二:內容特點→內容風格

抽取了這么多關鍵詞,通過這些詞可以發現淘寶頭條包涵了購物類app和資訊類app的一些共同特征。可以看出每個app都可以給它一個特定的物化的物品或是場景。淘寶就像是一個大的集市,商品玲瑯滿目、種類繁多,需要我們在里面認真挑選,淘到我們想要的東西。天貓像是一家商場,所有的東西都陳列在柜臺里面,讓人有逛街的感覺。閑魚是一個二手市場,可以變賣自己不用的東西,也可以買自己想買的東西。知乎是一個知識經驗分享平臺。打開網易像是在讀社會新聞報,澎湃像時政報。以此類推,如果給淘寶頭條定義一種現實中的場景或是物化的物品,那應該是什么呢?

以上分析出的內容特點關鍵詞,其實很多都不是淘寶頭條特有的,我們有必要把淘寶頭條獨有的一些內容特質進一步抽取出來。所以通過淘寶頭條與購物類的app與資訊類的app對比,可以抽取出來一些淘寶頭條獨有的內容特點:

它區別于單純購物型的產品,它呈現的消費信息,生活資訊,用戶可以在看資訊的過程中買買買。它區別于其它傳統資訊類的產品,它呈現的內容是時尚,新潮,先鋒的。通過以上對淘寶頭條內容特點的分析,就可以找到淘寶頭條物化的物品或場景:我們給它定位為生活消費雜志。

在眾多的雜志視覺風格中,選定了日系的購物類雜志為淘寶頭條的內容風格:圖文結合,信息排布清晰的感覺,符合我們對淘寶頭條消費生活雜志的定位,到這里其實也就確立了淘寶頭條的視覺風格。

步驟三:內容風格→產品視覺

風格確立后,我們就要在產品中營造這種感覺,將風格還原在產品視覺中。既怎樣打造淘寶頭條這個生活消費內容類的雜志?通過以下三點:品牌、樣式、排版滲透整個風格。


● 品牌:

這個步驟是品牌的提煉過程。從產品的定位,可以提煉出來品牌的關鍵詞;由品牌關鍵詞可以抽練出品牌符號;最后將品牌符號運用在產品中。

淘寶頭條的品牌價值是:“時尚生活消費類的資訊平臺”從這個定位中我們可以提煉出:時尚,生活消費,資訊媒體這三個關鍵點,然后在視覺層面上從視覺、心境、物化三個維度對關鍵詞進行拆解,可以得出一些視覺特點或者物化的視覺形象。

從拆解出來的眾多的關鍵詞中,我們選取了兩個最體現淘寶頭條特征以及意義的詞語:引領、聚焦。“引領”的意義為引領時尚,引領最新最權威的資訊。“聚焦”的意義為專注生活消費領域的資訊。意在突出內容上的新潮、豐富、時尚。意在讓用戶有感知,當用戶想到生活消費類的資訊,就會來看淘寶頭條。

然后由品牌關鍵詞可以抽練出品牌符號:引領——物化的形象是旗幟,兩面旗幟重疊形成字母“T”。“淘寶頭條”的首字母“淘寶”“頭條”也是T,最終確立這個旗幟的形象作為logo。聚焦——物化的符號為相機的對角框,這個符號多處運用在產品界面中。選用了黃色搭配的色調,對比強烈,體現時尚感。以下為品牌元素在產品中的應用。

● 樣式、版面

在頭條的主list頁中,會根據不同的內容設計出不同的承載樣式,最終形成一個完整統一的內容流。現有樣式9種,后續還會根據業務需求不斷添加樣式,一條信息流里面承載這么多的樣式,要在設計上做一些統一化的處理。如左文右圖的圖片,與三圖的圖片大小保持一致,在信息流中就不回出現階梯的視覺錯落感。如話題、視頻、專題雖然是三種不同的內容,但在設計中為了整個list流的統一,將三種樣式的基本元素保持統一,再用一些細節或是內容專有的元素進行區分。

案例:

設計主list:為了打造上面提到的那種日系雜志的風格,在設計中突出了以下幾點:

1 黑白對比:信息流中的任何內容都盡量保持黑白,讓內容本身帶來更多的顏色,使內容更突出。

2 標題加粗:更大更粗的標題文字,在干凈的白背景上標題內容顯得更加突出。

3 營造一種緊湊的熱鬧感:緊湊、整齊。在feeds的間距,字號,圖片大小,相似信息等,運用格式塔方法論使其保持一致性,讓整個信息流看上起完整,順暢。讀者在閱讀的過程中既能區分不同的內容,但也不會有被打斷的不適感。

4 左文右圖,目的是為了突出標題。滑動時,大部分用戶右手操作,滑動過程中手擋住的是圖片,不會遮擋標題,不影響閱讀主要文字信息。

5 節奏:對樣式的穿插制定固定的規則,形成一種閱讀節奏感(三條一圖,穿插三條三圖)

每日一文:每日精選一圖加一句話,把最優質精選的的內容第一眼呈現給用戶,同時可以給帳號曝光的機會。根據內容的定位采用簡約設計:讓用戶在三秒中內快速瀏覽一圖一句話,運用品牌元素,打造雜志感閃屏封面。版面中,計白當黑,黑色的文字及品牌元素與圖片構成了頁面中的黑色元素,與留白行成了虛空間,一虛一實,形成了視覺美感。

五分鐘:用戶可以用碎片時間來閱讀小編每日推薦的五篇精選文章,在視覺上作了精細化處理:要做到有內容可看。

1. 為了打造進入欄目印象,設計了與導航欄相連的欄目頂圖,頂圖中突出時間,在每日翻動時可以讓用戶感知到是在看哪一天的五分鐘。每天五分鐘,會形成閱讀習慣,增加用戶對欄目的黏性

2. card采用大圖+標題+簡介的形式。讓用即便是不點進詳情頁也可以判斷文章的內容是否是自己喜歡的,同時在瀏覽整個五分鐘流的過程,也是一個沉浸式閱讀的過程。

3. 在圖片上融入了品牌元素中黑色線框的標簽設計,標注出文章的編碼和歸類,并在欄目底部做了已閱讀多少篇的提醒,用戶可以在這里清晰的判斷出哪些是已讀,哪些是未讀。

設計淘寶頭條,就是一個內容化設計的實例,如何整理內容、組織內容、呈現內容、表達內容在整個產品的設計過程中都會體現出來。目前淘寶頭條已經上線,產品和內容也會在繼續在迭代中不斷優化。我們的設計并不完善,后需要優化的地方也很多,但是希望這些思考能夠啟發到其他人。

淘寶頭條在各大平臺的應用商店都上線了,歡迎下載,歡迎吐槽~


Tags: 淘寶

文章來源:http://www.zcool.com.cn/article/ZNDMyMzE2.html



相關文章
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01