設(shè)計(jì)的靈感 ＋ 用研的力量

前言：年初沉浸于工作中的重點(diǎn)項(xiàng)目，都快忘記寫(xiě)文章了，慚愧。分享既是學(xué)習(xí)，沒(méi)有分享就沒(méi)有學(xué)習(xí)的機(jī)會(huì)，2013年應(yīng)該繼續(xù)多寫(xiě)。同時(shí)也總結(jié)了2012年的寫(xiě)作，發(fā)現(xiàn)我很多時(shí)候是對(duì)自己感興趣的各種文章、現(xiàn)象，在寫(xiě)設(shè)計(jì)筆記與思考。有時(shí)思維種種，并沒(méi)有總結(jié)到很踏實(shí)。以后會(huì)改進(jìn)，多采取靈感文＋實(shí)戰(zhàn)文的寫(xiě)作節(jié)奏。

今天，是一篇實(shí)戰(zhàn)文。

講的是設(shè)計(jì)師通過(guò)靈感，發(fā)現(xiàn)問(wèn)題，思考問(wèn)題，面臨挑戰(zhàn)，和用研緊密配合，解決問(wèn)題，達(dá)到目的的一個(gè)故事。

是一個(gè)完整而嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)改版的故事。

Here we go.

2012年負(fù)責(zé)騰訊開(kāi)放平臺(tái)應(yīng)用中心產(chǎn)品，第一次認(rèn)真看這個(gè)產(chǎn)品，總覺(jué)得哪兒不對(duì)：

以上頁(yè)面，我看到了一個(gè)主要內(nèi)容頁(yè)，有banner區(qū)域，導(dǎo)航在左邊，中間是App內(nèi)容，右邊有排行榜。繼續(xù)往下看：

拉下頁(yè)面，看到上圖，開(kāi)始有點(diǎn)迷糊。因?yàn)檫@個(gè)頁(yè)面往下的走勢(shì)，沒(méi)有能給我一個(gè)理解。信息和內(nèi)容的布局有點(diǎn)凌亂。導(dǎo)航與內(nèi)容區(qū)的對(duì)應(yīng)不齊，讓我閱讀效率偏低。

再往下拉頁(yè)面，就到了上圖。這個(gè)時(shí)候閱讀的無(wú)序開(kāi)始增強(qiáng)，我看到了各種信息滿(mǎn)滿(mǎn)地堆積在頁(yè)面上。左邊導(dǎo)航結(jié)束后，開(kāi)始堆積內(nèi)容，且出現(xiàn)在我完全沒(méi)有預(yù)期的位置。中間的App內(nèi)容模式一致，沒(méi)有重點(diǎn)。廣告又讓格局再亂了一點(diǎn)。到了這里，我已經(jīng)很難有效閱讀內(nèi)容了。

很多設(shè)計(jì)師都知道，用戶(hù)閱讀網(wǎng)頁(yè)，是不會(huì)逐字逐句地讀。他們會(huì)掃描，快速找到重點(diǎn)，然后再根據(jù)自己的興趣和選擇進(jìn)行閱讀。重點(diǎn)可以是一段加粗的文字，一個(gè)圖片，一個(gè)巧妙排版的文字段落等等。

這個(gè)頁(yè)面沒(méi)有給我一個(gè)掃描的邏輯和樂(lè)趣。所以我的閱讀沒(méi)有舒適感。

我對(duì)這個(gè)網(wǎng)頁(yè)的閱讀順序是這樣的：

如上圖，我開(kāi)始是閱讀1處，個(gè)人信息；然后往下讀到2處，導(dǎo)航；到了3處，內(nèi)容區(qū)，因?yàn)锳pp的展現(xiàn)形式非常一致，沒(méi)有重點(diǎn)，我就快速略過(guò)了3處；很快掃了下4處，不感興趣；直接跳到5處，看了排行榜一下，很快就閱讀完了。

這個(gè)網(wǎng)頁(yè)的目的，很簡(jiǎn)單，是希望用戶(hù)去探索，點(diǎn)擊App，并安裝，然后玩。但是現(xiàn)在的布局并沒(méi)有讓我有這樣操作的沖動(dòng)?？隙ㄓ袉?wèn)題。當(dāng)然，我只是一個(gè)用戶(hù)，一個(gè)閱讀案例而已。后面的用研，我們邀請(qǐng)了用戶(hù)來(lái)做眼動(dòng)儀測(cè)試，會(huì)看到更多的閱讀模式。

所以這里，設(shè)計(jì)師的靈感帶來(lái)一些重要問(wèn)題：

以上只是部分問(wèn)題，但是簡(jiǎn)單明了，需要修改設(shè)計(jì)。解釋下我右上角的標(biāo)記，我認(rèn)為這個(gè)網(wǎng)頁(yè)在內(nèi)容的消耗上有問(wèn)題（這里是一個(gè)方法論，主要闡述我的一個(gè)想法，所有產(chǎn)品設(shè)計(jì)都是在內(nèi)容的創(chuàng)造、消耗、傳播上的設(shè)計(jì)）。右下角是我認(rèn)為這個(gè)網(wǎng)頁(yè)在設(shè)計(jì)上應(yīng)該得到修改的點(diǎn)：用戶(hù)場(chǎng)景，信息架構(gòu)，交互設(shè)計(jì)，視覺(jué)設(shè)計(jì)，設(shè)計(jì)細(xì)節(jié)，用戶(hù)情感。

設(shè)計(jì)師的觀察，靈感，和結(jié)論都出來(lái)了，然后呢？

作為服務(wù)千萬(wàn)級(jí)用戶(hù)的平臺(tái)產(chǎn)品，光是靈感是沒(méi)有說(shuō)服力的。在以上應(yīng)用中心頁(yè)面中，所有布局，內(nèi)容排列，都有很?chē)?yán)謹(jǐn)?shù)纳虡I(yè)策略和數(shù)據(jù)壓力。任何盲目的修改，都會(huì)有極大的風(fēng)險(xiǎn)。

怎么證明自己的靈感？怎么證明自己的判斷？

用研。

這次產(chǎn)品改版，有兩次用研點(diǎn)很關(guān)鍵。

第一次是眼動(dòng)儀測(cè)試與分析。我們請(qǐng)應(yīng)用中心的用戶(hù)來(lái)進(jìn)行眼動(dòng)儀測(cè)試，希望了解用戶(hù)的閱讀模式，并印證我們之前的判斷。

如上圖，我們把整個(gè)應(yīng)用中心頁(yè)面分解為各個(gè)模塊，然后通過(guò)眼動(dòng)儀來(lái)幫助我們觀察用戶(hù)的閱讀模式。

如上圖，可以看出每個(gè)用戶(hù)閱讀的順序不一樣。但是通過(guò)分析，我們發(fā)現(xiàn)雖然閱讀順序不一樣，但是結(jié)果是一致的。用戶(hù)都像我之前閱讀那樣，快速閱讀，找不到重點(diǎn)，忽略了App內(nèi)容這個(gè)重點(diǎn)區(qū)塊，對(duì)整個(gè)頁(yè)面布局沒(méi)有清晰認(rèn)知。

來(lái)看看結(jié)論：

部分結(jié)論如上圖：除了第一屏其他頁(yè)面曝光量少，說(shuō)明用戶(hù)對(duì)首屏后面的內(nèi)容不感興趣；用戶(hù)的粗略瀏覽，隨機(jī)無(wú)序點(diǎn)擊，使應(yīng)用中心點(diǎn)擊量低，安裝轉(zhuǎn)化率低。

這里再補(bǔ)充一下應(yīng)用中心產(chǎn)品背景：

1，應(yīng)用中心這樣的產(chǎn)品需要的是高點(diǎn)擊量和高安裝轉(zhuǎn)化率配合。

2，高點(diǎn)擊量需要引起用戶(hù)的興趣，讓他們樂(lè)意去探索。

3，高安裝轉(zhuǎn)化率需要讓用戶(hù)準(zhǔn)確關(guān)注到他們感興趣的內(nèi)容，這樣才能保證用戶(hù)點(diǎn)擊App后會(huì)安裝。

有了用研結(jié)論，就有底氣了。各個(gè)合作方基于我們的判斷和用研結(jié)論，同意開(kāi)始改版。

我們的交互很就出了一個(gè)交互改動(dòng)稿：

交互改動(dòng)稿很簡(jiǎn)單，直接針對(duì)用研結(jié)論中的問(wèn)題，并嘗試解決。頂部導(dǎo)航讓信息架構(gòu)更清晰。每個(gè)內(nèi)容模塊也開(kāi)始更規(guī)整。在和產(chǎn)品同事交流的過(guò)程中，我們也把之前頁(yè)面中完全被淹沒(méi)的影視和讀書(shū)兩個(gè)區(qū)塊列入重點(diǎn)優(yōu)化計(jì)劃（后面視覺(jué)稿可以看到細(xì)節(jié)）。

這個(gè)時(shí)候，在細(xì)化設(shè)計(jì)前，我們又做了第二次用研來(lái)再次確認(rèn)設(shè)計(jì)師的靈感。方式是請(qǐng)用戶(hù)來(lái)測(cè)試我們的Demo，結(jié)論很快出來(lái)了：

如以上兩個(gè)圖所示，用戶(hù)的反饋很一致，對(duì)改版后頁(yè)面模塊的區(qū)分，信息架構(gòu)的認(rèn)知等我們關(guān)注的點(diǎn)，都有非常正面的反饋。

接下來(lái)，我們的視覺(jué)開(kāi)始對(duì)這個(gè)新架構(gòu)進(jìn)行視覺(jué)設(shè)計(jì)，力求內(nèi)容第一，展示清晰，增強(qiáng)用戶(hù)對(duì)應(yīng)用中心的認(rèn)知。設(shè)計(jì)稿如下：

第一屏簡(jiǎn)單明了地給出整個(gè)頁(yè)面的結(jié)構(gòu)。用戶(hù)看第一屏就能清晰知道，頂部導(dǎo)航是全局導(dǎo)航；往下是banner以及主推信息展示區(qū)；再往下，頁(yè)面開(kāi)始分左右兩塊，左邊是主內(nèi)容區(qū)，主要展示App內(nèi)容，右邊是排行榜。

用戶(hù)看到這個(gè)架構(gòu)，就能有預(yù)期，這個(gè)頁(yè)面往下，其實(shí)是在重復(fù)App內(nèi)容區(qū)和排行榜的左右結(jié)構(gòu)。認(rèn)知非常簡(jiǎn)單。

另外，對(duì)App內(nèi)容區(qū)，我們把主推的App放大，并加入社交元素和更多詳細(xì)的解釋。這樣的設(shè)計(jì)安排極大地提高了用戶(hù)對(duì)App的認(rèn)知和興趣。（目的是提高點(diǎn)擊率和安裝轉(zhuǎn)化率）

到了第二屏，先看右邊，用戶(hù)還是如預(yù)期地看到了各種排行榜；左邊內(nèi)容區(qū)，還是一個(gè)模塊一個(gè)模塊地展示內(nèi)容。特別是在中間模塊，我們還為了用戶(hù)閱讀不疲憊，用了豎版的排列方式，讓閱讀體驗(yàn)更有趣。

第三屏的重點(diǎn)是給影視和讀書(shū)一個(gè)特別的展示。首頁(yè)這里，我們不能把影視和讀書(shū)做太重，因?yàn)檫@兩個(gè)特殊內(nèi)容區(qū)塊還是整個(gè)頁(yè)面的一部分，不能擁有喧賓奪主的華麗。但是我們給予了這兩個(gè)區(qū)塊略微不同的設(shè)計(jì)感，這樣讓用戶(hù)更簡(jiǎn)單認(rèn)知到這兩個(gè)區(qū)塊的不同。

這樣改版的結(jié)果呢？

首先，感官緯度，你是不是認(rèn)為更清楚，更漂亮？

其次，看數(shù)據(jù)：

如上圖數(shù)據(jù)結(jié)果：

1，整體轉(zhuǎn)化率的增加，與更合理的整體架構(gòu)、更合理的局部排列相關(guān)。

2，影視和讀書(shū)的增長(zhǎng)，一方面是因?yàn)槿旨軜?gòu)更清楚，用戶(hù)會(huì)往下瀏覽；一方面是因?yàn)槁晕⒄{(diào)整的設(shè)計(jì)讓這兩個(gè)內(nèi)容區(qū)塊有了差異化，吸引了用戶(hù)的注意力。

3，橫導(dǎo)航的類(lèi)目頁(yè)點(diǎn)擊增長(zhǎng)，符合我之前的判斷：豎導(dǎo)航點(diǎn)擊率一般是從上往下逐步遞減的，而橫導(dǎo)航效果會(huì)好一些，如果配合適當(dāng)?shù)脑O(shè)計(jì)細(xì)節(jié)調(diào)整，用戶(hù)的注意力可以被我們引到橫導(dǎo)航任何地方。

數(shù)據(jù)自己說(shuō)話，改版成功。

回首整個(gè)改版過(guò)程，其實(shí)下圖中紅色部分用研的參與和貢獻(xiàn)非常突出：

我對(duì)這個(gè)設(shè)計(jì)案例的總結(jié)是：

如上圖，重點(diǎn)是：

1，全局頁(yè)面的改動(dòng)，改局部的時(shí)候，牽一發(fā)而動(dòng)全身，需要設(shè)計(jì)的全局觀。

2，堅(jiān)持設(shè)計(jì)師的原則和方法論，有信心，不懼壓力。

3，設(shè)計(jì)與用戶(hù)研究的緊密敏捷配合。

4，設(shè)計(jì)產(chǎn)出的正結(jié)果，可以提升所有人對(duì)設(shè)計(jì)師的信任。

謝謝讀到這里。

之后我會(huì)從正式改版，局部創(chuàng)新，小設(shè)計(jì)流程，設(shè)計(jì)思考等更多緯度來(lái)寫(xiě)設(shè)計(jì)文章。：）

Stay tuned.