2016-11-11 藍(lán)藍(lán)設(shè)計的小編
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
今天，是一篇實戰(zhàn)文。
講的是設(shè)計師通過靈感，發(fā)現(xiàn)問題，思考問題，面臨挑戰(zhàn)，和用研緊密配合，解決問題，達(dá)到目的的一個故事。
是一個完整而嚴(yán)謹(jǐn)?shù)脑O(shè)計改版的故事。
Here we go
2012年負(fù)責(zé)騰訊開放平臺應(yīng)用中心產(chǎn)品，第一次認(rèn)真看這個產(chǎn)品，總覺得哪兒不對：
以上頁面，我看到了一個主要內(nèi)容頁，有banner區(qū)域，導(dǎo)航在左邊，中間是App內(nèi)容，右邊有排行榜。繼續(xù)往下看：
拉下頁面，看到上圖，開始有點迷糊。因為這個頁面往下的走勢，沒有能給我一個理解。信息和內(nèi)容的布局有點凌亂。導(dǎo)航與內(nèi)容區(qū)的對應(yīng)不齊，讓我閱讀效率偏低。
再往下拉頁面，就到了上圖。這個時候閱讀的無序開始增強(qiáng)，我看到了各種信息滿滿地堆積在頁面上。左邊導(dǎo)航結(jié)束后，開始堆積內(nèi)容，且出現(xiàn)在我完全沒有預(yù)期的位置。中間的App內(nèi)容模式一致，沒有重點。廣告又讓格局再亂了一點。到了這里，我已經(jīng)很難有效閱讀內(nèi)容了。
很多設(shè)計師都知道，用戶閱讀網(wǎng)頁，是不會逐字逐句地讀。他們會掃描，快速找到重點，然后再根據(jù)自己的興趣和選擇進(jìn)行閱讀。重點可以是一段加粗的文字，一個圖片，一個巧妙排版的文字段落等等。
這個頁面沒有給我一個掃描的邏輯和樂趣。所以我的閱讀沒有舒適感。
我對這個網(wǎng)頁的閱讀順序是這樣的：
如上圖，我開始是閱讀1處，個人信息；然后往下讀到2處，導(dǎo)航；到了3處，內(nèi)容區(qū)，因為App的展現(xiàn)形式非常一致，沒有重點，我就快速略過了3處；很快掃了下4處，不感興趣；直接跳到5處，看了排行榜一下，很快就閱讀完了。
這個網(wǎng)頁的目的，很簡單，是希望用戶去探索，點擊App，并安裝，然后玩。但是現(xiàn)在的布局并沒有讓我有這樣操作的沖動?？隙ㄓ袉栴}。當(dāng)然，我只是一個用戶，一個閱讀案例而已。后面的用研，我們邀請了用戶來做眼動儀測試，會看到更多的閱讀模式。
所以這里，設(shè)計師的靈感帶來一些重要問題：
以上只是部分問題，但是簡單明了，需要修改設(shè)計。解釋下我右上角的標(biāo)記，我認(rèn)為這個網(wǎng)頁在內(nèi)容的消耗上有問題（這里是一個方法論，主要闡述我的一個 想法，所有產(chǎn)品設(shè)計都是在內(nèi)容的創(chuàng)造、消耗、傳播上的設(shè)計）。右下角是我認(rèn)為這個網(wǎng)頁在設(shè)計上應(yīng)該得到修改的點：用戶場景，信息架構(gòu)，交互設(shè)計，視覺設(shè) 計，設(shè)計細(xì)節(jié)，用戶情感。
設(shè)計師的觀察，靈感，和結(jié)論都出來了，然后呢？
作為服務(wù)千萬級用戶的平臺產(chǎn)品，光是靈感是沒有說服力的。在以上應(yīng)用中心頁面中，所有布局，內(nèi)容排列，都有很嚴(yán)謹(jǐn)?shù)纳虡I(yè)策略和數(shù)據(jù)壓力。任何盲目的修改，都會有極大的風(fēng)險。
怎么證明自己的靈感？怎么證明自己的判斷？
用研。
這次產(chǎn)品改版，有兩次用研點很關(guān)鍵。
第一次是眼動儀測試與分析。我們請應(yīng)用中心的用戶來進(jìn)行眼動儀測試，希望了解用戶的閱讀模式，并印證我們之前的判斷。
如上圖，我們把整個應(yīng)用中心頁面分解為各個模塊，然后通過眼動儀來幫助我們觀察用戶的閱讀模式。
如上圖，可以看出每個用戶閱讀的順序不一樣。但是通過分析，我們發(fā)現(xiàn)雖然閱讀順序不一樣，但是結(jié)果是一致的。用戶都像我之前閱讀那樣，快速閱讀，找不到重點，忽略了App內(nèi)容這個重點區(qū)塊，對整個頁面布局沒有清晰認(rèn)知。
來看看結(jié)論：
部分結(jié)論如上圖：除了第一屏其他頁面曝光量少，說明用戶對首屏后面的內(nèi)容不感興趣；用戶的粗略瀏覽，隨機(jī)無序點擊，使應(yīng)用中心點擊量低，安裝轉(zhuǎn)化率低。
這里再補(bǔ)充一下應(yīng)用中心產(chǎn)品背景：
1，應(yīng)用中心這樣的產(chǎn)品需要的是高點擊量和高安裝轉(zhuǎn)化率配合。
2，高點擊量需要引起用戶的興趣，讓他們樂意去探索。
3，高安裝轉(zhuǎn)化率需要讓用戶準(zhǔn)確關(guān)注到他們感興趣的內(nèi)容，這樣才能保證用戶點擊App后會安裝。
有了用研結(jié)論，就有底氣了。各個合作方基于我們的判斷和用研結(jié)論，同意開始改版。
我們的交互很就出了一個交互改動稿：
交互改動稿很簡單，直接針對用研結(jié)論中的問題，并嘗試解決。頂部導(dǎo)航讓信息架構(gòu)更清晰。每個內(nèi)容模塊也開始更規(guī)整。在和產(chǎn)品同事交流的過程中，我們也把之前頁面中完全被淹沒的影視和讀書兩個區(qū)塊列入重點優(yōu)化計劃（后面視覺稿可以看到細(xì)節(jié)）。
這個時候，在細(xì)化設(shè)計前，我們又做了第二次用研來再次確認(rèn)設(shè)計師的靈感。方式是請用戶來測試我們的Demo，結(jié)論很快出來了：
如以上兩個圖所示，用戶的反饋很一致，對改版后頁面模塊的區(qū)分，信息架構(gòu)的認(rèn)知等我們關(guān)注的點，都有非常正面的反饋。
接下來，我們的視覺開始對這個新架構(gòu)進(jìn)行視覺設(shè)計，力求內(nèi)容第一，展示清晰，增強(qiáng)用戶對應(yīng)用中心的認(rèn)知。設(shè)計稿如下：
第一屏簡單明了地給出整個頁面的結(jié)構(gòu)。用戶看第一屏就能清晰知道，頂部導(dǎo)航是全局導(dǎo)航；往下是banner以及主推信息展示區(qū)；再往下，頁面開始分左右兩塊，左邊是主內(nèi)容區(qū)，主要展示App內(nèi)容，右邊是排行榜。
用戶看到這個架構(gòu)，就能有預(yù)期，這個頁面往下，其實是在重復(fù)App內(nèi)容區(qū)和排行榜的左右結(jié)構(gòu)。認(rèn)知非常簡單。
另外，對App內(nèi)容區(qū)，我們把主推的App放大，并加入社交元素和更多詳細(xì)的解釋。這樣的設(shè)計安排極大地提高了用戶對App的認(rèn)知和興趣。（目的是提高點擊率和安裝轉(zhuǎn)化率）
到了第二屏，先看右邊，用戶還是如預(yù)期地看到了各種排行榜；左邊內(nèi)容區(qū)，還是一個模塊一個模塊地展示內(nèi)容。特別是在中間模塊，我們還為了用戶閱讀不疲憊，用了豎版的排列方式，讓閱讀體驗更有趣。
第三屏的重點是給影視和讀書一個特別的展示。首頁這里，我們不能把影視和讀書做太重，因為這兩個特殊內(nèi)容區(qū)塊還是整個頁面的一部分，不能擁有喧賓奪主的華麗。但是我們給予了這兩個區(qū)塊略微不同的設(shè)計感，這樣讓用戶更簡單認(rèn)知到這兩個區(qū)塊的不同。
這樣改版的結(jié)果呢？
首先，感官緯度，你是不是認(rèn)為更清楚，更漂亮？
其次，看數(shù)據(jù)：
如上圖數(shù)據(jù)結(jié)果：
1，整體轉(zhuǎn)化率的增加，與更合理的整體架構(gòu)、更合理的局部排列相關(guān)。
2，影視和讀書的增長，一方面是因為全局架構(gòu)更清楚，用戶會往下瀏覽；一方面是因為略微調(diào)整的設(shè)計讓這兩個內(nèi)容區(qū)塊有了差異化，吸引了用戶的注意力。
3，橫導(dǎo)航的類目頁點擊增長，符合我之前的判斷：豎導(dǎo)航點擊率一般是從上往下逐步遞減的，而橫導(dǎo)航效果會好一些，如果配合適當(dāng)?shù)脑O(shè)計細(xì)節(jié)調(diào)整，用戶的注意力可以被我們引到橫導(dǎo)航任何地方。
數(shù)據(jù)自己說話，改版成功。
回首整個改版過程，其實下圖中紅色部分用研的參與和貢獻(xiàn)非常突出：
我對這個設(shè)計案例的總結(jié)是：
如上圖，重點是：
1，全局頁面的改動，改局部的時候，牽一發(fā)而動全身，需要設(shè)計的全局觀。
2，堅持設(shè)計師的原則和方法論，有信心，不懼壓力。
3，設(shè)計與用戶研究的緊密敏捷配合。
4，設(shè)計產(chǎn)出的正結(jié)果，可以提升所有人對設(shè)計師的信任。
謝謝讀到這里。好長啊~~~~~~
之后我會從正式改版，局部創(chuàng)新，小設(shè)計流程，設(shè)計思考等更多緯度來寫設(shè)計文章。：）
很多設(shè)計短分享會發(fā)布在我微博上：
藍(lán)藍(lán)設(shè)計( www.alimai.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.alimai.net
