2017-3-9 資深UI設(shè)計者
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
編者按：什么是內(nèi)容化設(shè)計？設(shè)計師為什么要關(guān)注內(nèi)容？如何通過設(shè)計的手段提高內(nèi)容體驗？阿里設(shè)計師用一個手淘的實戰(zhàn)案例，幫你掌握內(nèi)容化設(shè)計的精髓！
如果說好的產(chǎn)品是運營出來的，那么內(nèi)容作為用戶體驗中的重要部分不容忽視。然而我們在設(shè)計中經(jīng)常缺乏內(nèi)容體驗的意識。借著第十三屆用戶體驗大會User Friendly 2016的分享，手淘的設(shè)計師和業(yè)內(nèi)的同學們一起做workshop，探索如何進行行之有效的內(nèi)容策略腦爆，以及思考內(nèi)容產(chǎn)生、組織到流轉(zhuǎn)分發(fā)的設(shè)計策略和用戶行為數(shù)據(jù)驗證。希望能讓大家對無線端導(dǎo)購的內(nèi)容化設(shè)計有所啟發(fā)。以下是對大會相關(guān)內(nèi)容的整理。
在探討內(nèi)容化設(shè)計是什么之前，或許有人奇怪：設(shè)計為什么要關(guān)注內(nèi)容呢？
內(nèi)容一直是設(shè)計缺少關(guān)懷的“冷門”，一直以來內(nèi)容似乎是運營的事兒，設(shè)計更多是參與到產(chǎn)品、技術(shù)的流程中。那么，大家覺得作為設(shè)計師的我們是否要管內(nèi)容的事兒呢？
要關(guān)注！為什么？因為交互設(shè)計是一門關(guān)注人(people)、產(chǎn)品(product)、情境(context)的科學。我們平時在工作中最多關(guān)注的是用戶，也就是人和產(chǎn)品之間的交互。但情境也是重要一環(huán)，除了具體場景化情境，設(shè)計師也要關(guān)注當前的時代環(huán)境。
以淘寶導(dǎo)購的歷程為例，一起來看下當下我們處在一個什么樣的時代情境之中。阿里CEO張勇曾這么描述過：在PC時代，在淘寶上非常重要的兩條消費者的動線，第一是搜索，第二是分類導(dǎo)航。這個在PC時代大家都知道，大家做很多事情最后都希望在搜索里面排位更靠前。PC時代淘寶以搜索、分類導(dǎo)航為方式的中心化流量分配的方式。運營做的最多便是招商、盤貨排樓。所謂流量運營的模式。
而不久之后便遭遇到無線時代的挑戰(zhàn)：無線時代有一個弱點就是屏幕那么小，但更聚焦，可以更針對消費者個體和他的偏好。同時消費者通過手機回訪的頻次和停留時間比PC時代大大增強。只要能夠提供好的內(nèi)容，用戶就可以非常順利地提起他的興趣，這是在無線時代淘寶經(jīng)營非常重要的一點。
對比起PC時代的貨架運營，無線時代的關(guān)鍵便是要爭奪用戶的時間，從傳統(tǒng)上的行業(yè)運營或者類目運營，走向個性化，走向內(nèi)容運營。而在這個內(nèi)容為王的時代下，這幾年也“火”了好幾個名詞。直播，網(wǎng)紅，IP迅速崛起，都是通過內(nèi)容本身爭奪用戶在無線端的時間。
我們不可否認，內(nèi)容屬于用戶體驗重要一環(huán)：優(yōu)質(zhì)的內(nèi)容不僅能解決用戶的需求，內(nèi)容呈現(xiàn)也是用戶消費的一環(huán)。在設(shè)計經(jīng)典書《用戶體驗的要素》中，早已將內(nèi)容需要納入用戶體驗的五大要素之一。
經(jīng)過以上的分析，我們是不是已經(jīng)確認內(nèi)容是設(shè)計要關(guān)注的重要部分了呢？但是【內(nèi)容設(shè)計】是在做什么？是要我們替代運營策劃、產(chǎn)生、審核內(nèi)容？還是我們要學會寫好文案？亦或是做好banner？其實都不是，接下來我們將會用具體案例來講述在手淘做導(dǎo)購我們是怎么做內(nèi)容設(shè)計的。那么讓我們開始吧！
要做內(nèi)容設(shè)計我們是否要先搞清楚：究竟什么是內(nèi)容？
在手淘我們是這樣定義內(nèi)容的：加工和再組織而形成的泛商品信息。內(nèi)容包含四部分信息：文字、商品、圖片、多媒體。而我們也發(fā)現(xiàn)內(nèi)容本身是傳播流動的：從內(nèi)容的生產(chǎn)，到各個平臺的再組織，再到內(nèi)容的呈現(xiàn)，最后內(nèi)容被用戶消費、流轉(zhuǎn)。
講到這里或許過于抽象，我們從手淘一個導(dǎo)購產(chǎn)品“必買清單”入手來看如何把握內(nèi)容流動的各個環(huán)節(jié)，解決用戶需求，做出符合用戶場景的內(nèi)容化設(shè)計的。必買清單處在手淘首頁淘搶購區(qū)域重要位置。作為一個剛剛起步的導(dǎo)購產(chǎn)品，當時的必買清單業(yè)務(wù)存在很多問題：
1. 產(chǎn)品形態(tài)停留在商品聚合，更像一個搜索頁商品集合。用戶價值不明顯。
2. 運營方向不清晰，整個欄目架構(gòu)沒有做出相應(yīng)的用戶心智。例如：當時導(dǎo)航只有精選和TOP榜，而兩者無論形式還是內(nèi)容之間并沒有本質(zhì)區(qū)別，TOP榜沒有做出榜單的心智。
3. 用戶對內(nèi)容的消費力、忠誠度低于同一區(qū)塊的其他導(dǎo)購產(chǎn)品。在用戶行為數(shù)據(jù)上表現(xiàn)不佳，直接引導(dǎo)成交、周二次回訪和停留時長上低于同區(qū)塊的其他導(dǎo)購產(chǎn)品。
歸根結(jié)底的顯性問題就是必買清單的內(nèi)容做得不好，無法吸引到用戶。
問題決定設(shè)計在改版上的目標即是：深入內(nèi)容，重新組織、梳理內(nèi)容展示顆粒度，提升用戶忠誠度！
那么如何深入內(nèi)容本身呢？我們主動組織了項目核心成員腦爆。腦爆的問題就定位在：用戶需要什么樣的清單？
我們避免了常規(guī)腦爆中意見領(lǐng)袖造成一邊倒的情況，讓每位成員把自己當作產(chǎn)品的用戶寫出需要的清單類型。
例如：
我好想知道范冰冰用什么護膚品保養(yǎng)。
我想專家推薦我3歲孩子的讀物或是玩具。
我要裝修地中海風格，我想要相關(guān)風格的所有單品供我選擇。
我想知道大家用過哪些洗發(fā)水比較好，也想避免踩到哪些雷區(qū)。
………
我們驚訝的發(fā)現(xiàn)大家的清單內(nèi)容具有很高的相似度，同時可以被劃分到獨特的內(nèi)容分類下。
而且這些內(nèi)容都具有某種核心的特質(zhì)：商品有對比性、針對特定場景、有經(jīng)驗者的輸出、內(nèi)容是整理過的。由此我們還在產(chǎn)品上腦爆出必買指數(shù)這一概念。并將指數(shù)分解為：
a.小編指數(shù)：更靈活，例如：全球最辣的泡面，辣的星級。
b.機器指數(shù)：利用客觀的大數(shù)據(jù)為用戶排列：熱銷、口碑、回購等指數(shù)。
c.用戶口碑：讓用戶對商品打分評論，更有參與感。
確定了內(nèi)容方向、內(nèi)容場景分類和內(nèi)容源，接下來我們要根據(jù)這些內(nèi)容策略來制定相對應(yīng)的頁面級信息結(jié)構(gòu)。
現(xiàn)將14種分類根據(jù)可以用同一頁面承載分為五種類型。這五種類型根據(jù)圖、文、商品等信息的數(shù)量和重要性分別適合用不同結(jié)構(gòu)展示。
最終我們將物種類型的詳情頁根據(jù)各自特點梳理相對應(yīng)的信息架構(gòu)展示方式，最終呈現(xiàn)出如下頁面：
所有頁面又符合同一種主題-簡介-主體的結(jié)構(gòu)不會顯得突兀。
最終上線后我們跟蹤了下數(shù)據(jù)變化，兩版對比下來核心數(shù)據(jù)有不同程度的提升。我們將用戶忠誠度進行分層，將每周訪問天數(shù)和深度的用戶進行三種程度的定義。把訪問頻次和深度較高的用戶定義為核心用戶；把中等程度的用戶定義為高潛用戶；把剩余用戶定義為潛在用戶。我們發(fā)現(xiàn)新版本數(shù)據(jù)穩(wěn)定下來后，在算法內(nèi)容不變的前提下，潛在用戶更多地在向高潛、核心用戶遷移。說明通過內(nèi)容化設(shè)計改版有利于用戶的沉淀和忠誠度的提升。
以上案例完整的展現(xiàn)設(shè)計影響推動業(yè)務(wù)，將內(nèi)容從一團亂碼梳理聚合到可執(zhí)行顆粒度，最終呈現(xiàn)給用戶一個符合場景思維的內(nèi)容信息架構(gòu)。
接下來，我們繼續(xù)來通過其他案例來看如何通過設(shè)計的手段來優(yōu)化內(nèi)容流轉(zhuǎn)呢？
在整個內(nèi)容化設(shè)計背后的宗旨，是讓優(yōu)質(zhì)的內(nèi)容觸達用戶，用戶回流，進而轉(zhuǎn)化成有效購物行為。內(nèi)容流轉(zhuǎn)是內(nèi)容觸達用戶及回流的關(guān)鍵一環(huán)，也是淘寶內(nèi)容化設(shè)計的最后一環(huán)。
互聯(lián)網(wǎng)內(nèi)容多得可怕，用戶發(fā)現(xiàn)好內(nèi)容的成本正在提高，而回想我們目前的生活，越來越多的信息獲取于別人或第三方應(yīng)用。這種基于用戶的能動性與關(guān)系，利用一套機制完成的結(jié)構(gòu)化內(nèi)容傳播即是內(nèi)容流轉(zhuǎn)。
深藏在應(yīng)用中的內(nèi)容若不動起來，就似“養(yǎng)在深閨人未識”。我們希望內(nèi)容觸達到更多用戶，除了運營手段以外，賦予每一個用戶傳播內(nèi)容的能力，讓用戶成為“自媒體”，內(nèi)容經(jīng)過用戶的挑選及加工，有針對性地擴散給更多人。
所以，在內(nèi)容化設(shè)計項目中，一個暢通的內(nèi)容流轉(zhuǎn)機制必不可少。
在手機淘寶中，我們通過分享組件來完成內(nèi)容的流轉(zhuǎn)。組件分為兩大部分，一是渠道，二是形式。
1. 覆蓋淘內(nèi)淘外
大家所熟知的社會化分享，一般是一排可以橫向滑動的應(yīng)用圖標。基于這種習慣性的認知，我們在手機淘寶的分享組件中只是擴充了自有渠道（淘友），布局淘內(nèi)淘外，盡量覆蓋用戶的所有關(guān)系。
2. 提供多種形式
內(nèi)容通過分享組件流轉(zhuǎn)時，應(yīng)具有更便于輸出和傳播的新形態(tài)，它們是被分享者觸達到原始內(nèi)容的“引子”。
在詳細講述這部分前，了解淘寶內(nèi)容流轉(zhuǎn)的現(xiàn)實背景非常有必要。由于某些不可言說但大家心知肚明的原因，淘寶的鏈接在一些應(yīng)用中是無法被打開的?；谶@種情形，我們希望創(chuàng)造新的形式，沖破阻礙。
流轉(zhuǎn)出去的內(nèi)容形態(tài)需要具備以下特點：
具象化：突出原始內(nèi)容的關(guān)鍵信息。內(nèi)容分享出去的目的是讓被分享者了解該內(nèi)容，所以新形態(tài)中首先要告訴被分享者這是一個什么樣的東西。
輕量化：所謂“輕裝”才能“遠行”，用于流轉(zhuǎn)的內(nèi)容不宜復(fù)雜。降級是一種有效方式，如，一篇圖文降級為一段文字，一個視頻降級為一張圖片。這樣輕量化的處理更適于傳播。
目前，淘寶的內(nèi)容流轉(zhuǎn)載體有四種形式：鏈接（淘口令）、淘長圖、當面掃碼、淘內(nèi)鏈接。
3. 完整的流轉(zhuǎn)過程
在流轉(zhuǎn)拉動流量的模式中，一直存在讓產(chǎn)品和設(shè)計師隱隱作痛的一個問題：流轉(zhuǎn)及回流的邏輯鏈條上每一步具體的跳轉(zhuǎn)都是一個漏斗，都會產(chǎn)生一定的用戶流失。因此，我們需要確保每一種流轉(zhuǎn)形式的過程盡量簡短、順暢。
內(nèi)容流轉(zhuǎn)，包括兩個部分，一是內(nèi)容流出，二是用戶回流。
內(nèi)容流出
當用戶產(chǎn)生內(nèi)容分享的需求時，助力用戶快速喚起分享組件，用心儀的形式和渠道分享出去。在手機淘寶中，我們努力將分享組件的入口統(tǒng)一化設(shè)計，建立用戶固定認知；另外，分析用戶產(chǎn)生分享意愿的場景，尋找規(guī)律，在用戶需要的地方及時出現(xiàn)。
用戶回流
與助力外向流動的成熟狀況不同，引導(dǎo)用戶回流到原始應(yīng)用的內(nèi)容頁面相對比較混亂。特別是有些應(yīng)用試圖打造封閉系統(tǒng)，更是為用戶快速回流到其它應(yīng)用制造了重重阻礙。在創(chuàng)造流轉(zhuǎn)形式的時候，對應(yīng)地需要設(shè)計與每一種形式配對的回流方案。我們不僅要沖破封閉，還要盡量縮減步驟，減少用戶等待的時間。
比如，淘口令是一種淘寶獨創(chuàng)的流轉(zhuǎn)形式，為了減少用戶回流的成本，在用戶復(fù)制淘口令之后，打開手機淘寶，后臺會自動識別手機剪切板中的淘口令，第一時間呈現(xiàn)目標頁面。
最后，我們從流轉(zhuǎn)機制的底層視角總結(jié)內(nèi)容流轉(zhuǎn)涉及的關(guān)鍵環(huán)節(jié)和設(shè)計思考的要領(lǐng)：
源——在優(yōu)質(zhì)的內(nèi)容頁面上合理布局流出的入口；
形式——輕巧易于流轉(zhuǎn)的內(nèi)容載體，從用戶的實際訴求出發(fā)，謹慎創(chuàng)新，如果一種可以滿足所有需求是最好的；
渠道——用戶關(guān)系所在產(chǎn)品和應(yīng)用，力求覆蓋用戶的關(guān)系網(wǎng)，可結(jié)合其使用習慣做個性化設(shè)計；
回流——其他用戶通過內(nèi)容載體回到原始內(nèi)容的方式，過程應(yīng)盡量精簡；
沉淀——流轉(zhuǎn)數(shù)據(jù)可作為用戶行為歷史，便其查找，也可以基于這些大數(shù)據(jù)，設(shè)計新的內(nèi)容。
內(nèi)容流轉(zhuǎn)的機制建立起來后，基于用戶的主動流轉(zhuǎn)行為，內(nèi)容得以網(wǎng)絡(luò)化的傳播。設(shè)計師在整個過程中，除了設(shè)計基本的頁面UI之外，還需要站在更高的層次上，合力產(chǎn)品與技術(shù)，以用戶為中心設(shè)計更加方便快捷的流轉(zhuǎn)方式。這是一塊非常實際、非常純粹、自由空間可大亦可小的獨特領(lǐng)域。
寫在最后
內(nèi)容化設(shè)計我們只是開始邁出一小步，期待大家的思考和交流。
藍藍設(shè)計( www.teruid.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.teruid.com