愛(ài)奇藝PC站的風(fēng)云榜，是一個(gè)提供各種頻道榜單的薈萃之地。其存在的主要功能，是讓用戶(hù)能夠了解熱門(mén)的劇目，從中選擇想看的影片，也能夠了解最近都在流行些什么。然而，該模塊很久沒(méi)有更新，在內(nèi)容展示上有著比較大的問(wèn)題，導(dǎo)航上也存在使用不便的情況。因此，產(chǎn)品提出優(yōu)化。在這次優(yōu)化的過(guò)程中，我使用了之前介紹過(guò)的“目標(biāo)導(dǎo)向設(shè)計(jì)法”來(lái)指導(dǎo)我的設(shè)計(jì)，效果顯著。下面跟大家具體介紹一下。

什么是目標(biāo)導(dǎo)向設(shè)計(jì)法：《一招教你讓交互方案更靠譜！超好用的目標(biāo)導(dǎo)向設(shè)計(jì)法》

首先，先來(lái)看一下原版的風(fēng)云榜長(zhǎng)什么樣：

△ 改版前的風(fēng)云榜頁(yè)面

改版前，風(fēng)云榜首頁(yè)的結(jié)構(gòu)是：一行兩個(gè)榜單，其中一個(gè)是列表的樣式，另一個(gè)是類(lèi)似Windows Phone的磁貼樣式；兩種樣式交叉使用。左邊是導(dǎo)航欄，將風(fēng)云榜中的所有頻道都列了出來(lái)。

產(chǎn)品提出的需求，一是優(yōu)化首頁(yè)的排版，增加視頻的點(diǎn)擊率；二是優(yōu)化導(dǎo)航，使導(dǎo)航在瀏覽的過(guò)程中能夠方便用戶(hù)選擇任何他想選擇的頻道。

產(chǎn)品同學(xué)用原型圖簡(jiǎn)單地表達(dá)了一下她的想法，如下圖所示：

△ 產(chǎn)品提出的原型圖

以上是該項(xiàng)目的基本信息。

下面我們來(lái)使用目標(biāo)導(dǎo)向設(shè)計(jì)法進(jìn)行設(shè)計(jì)。首先，需要明確設(shè)計(jì)目標(biāo)，也就是產(chǎn)品目標(biāo)和用戶(hù)目標(biāo)。

分析一下，項(xiàng)目的產(chǎn)品目標(biāo)是什么呢？舊版頁(yè)面信息展現(xiàn)不合理，點(diǎn)擊率低；改版希望通過(guò)優(yōu)化信息展現(xiàn)，提升點(diǎn)擊率。舊版導(dǎo)航條在瀏覽過(guò)程中頻道的展示不全；改版希望改善導(dǎo)航條的交互，使用戶(hù)在上下滾動(dòng)瀏覽的時(shí)候，可以方便選擇任何頻道。因此產(chǎn)品目標(biāo)就是：提升視頻點(diǎn)擊率；優(yōu)化導(dǎo)航，使導(dǎo)航在瀏覽時(shí)能選擇任意頻道。

那么用戶(hù)目標(biāo)呢？來(lái)到風(fēng)云榜查看各種榜單的用戶(hù)，不外乎兩種目的：

1. 查看自己喜歡的類(lèi)別的榜單；

2. 通過(guò)榜單了解熱播劇，并以此為依據(jù)選擇自己想看的熱播劇。

這也就是我們的用戶(hù)目標(biāo)。帶著產(chǎn)品目標(biāo)和用戶(hù)目標(biāo)，我們開(kāi)始一步步設(shè)計(jì)。

首先我們來(lái)具體分析一下舊版的信息展現(xiàn)到底有什么問(wèn)題：

1. 頁(yè)面中的榜單有兩種呈現(xiàn)樣式，且區(qū)別很大。由于圖片天然地更能吸引人的注意力，因此每一行比較突出的榜單，都是采用磁貼排版的那個(gè)；而采用列表呈現(xiàn)的榜單，自然會(huì)被冷落得多。這影響了信息到達(dá)用戶(hù)的效率。

2. 榜單的兩種樣式，采用了交叉出現(xiàn)的形式，比較跳躍，用戶(hù)在此種形式的引導(dǎo)下，實(shí)現(xiàn)是折線(xiàn)型的，不夠順暢（最為順暢的一定是拐角最小的，越直線(xiàn)越好）。

所以，舊版的排版，使用戶(hù)在瀏覽時(shí)只注意到磁鐵樣式（封面圖拼成）的那個(gè)榜單，容易忽略文字榜單；且視線(xiàn)曲折，容易疲勞。所以重新設(shè)計(jì)時(shí)要對(duì)榜單進(jìn)行重新排版，優(yōu)化用戶(hù)的瀏覽體驗(yàn)，以期達(dá)到我們的設(shè)計(jì)目標(biāo)。

我們?cè)賮?lái)研究一下競(jìng)品。騰訊視頻的PC站，似乎對(duì)榜單沒(méi)有太大的興趣，只有在VIP會(huì)員頻道有個(gè)“熱片榜”：

騰訊的熱片榜，雖然名為“榜”，實(shí)際只是“最熱”tab下的影片篩選。

優(yōu)酷視頻的PC站，在“排行”頻道里，有“指數(shù)排行榜”和“訂閱排行榜”：

這種排版更適合音樂(lè)類(lèi)型的展示，對(duì)于影視類(lèi)這種封面圖比較重要的類(lèi)型，展示效果比較一般。

值得一提的是，愛(ài)奇藝視頻的首頁(yè)，在這里也可以作為“競(jìng)品”來(lái)參考。因?yàn)橛脩?hù)最熟悉的，一定是默認(rèn)的首頁(yè)的樣式；而風(fēng)云榜的入口，也是在首頁(yè)。因此首頁(yè)對(duì)于風(fēng)云榜的設(shè)計(jì)，也有不小的參考意義：

綜合以上的信息，我給出了以下的設(shè)計(jì)方案：

排版上參照了愛(ài)奇藝PC站首頁(yè)的樣式，在排版上統(tǒng)一采用一行5個(gè)封面圖，展示有規(guī)律，便于用戶(hù)迅速get到信息；同時(shí)使用封面圖也符合影視信息展示的特點(diǎn)。

這樣的排版，能夠方便用戶(hù)找到自己感興趣的類(lèi)別，同時(shí)迅速瀏覽熱門(mén)的視頻，最符合上下滾動(dòng)瀏覽網(wǎng)頁(yè)的姿勢(shì)。

再來(lái)看導(dǎo)航：

對(duì)于導(dǎo)航，將一些次常用的頻道收起，其余常用頻道常駐在屏幕左側(cè)。為了保證在最小的分辨率下，一屏也能展示完整常駐的頻道，因此規(guī)定最多展示14個(gè)頻道（包含“更多”）。

順提一下，在設(shè)計(jì)鼠標(biāo)hover到“更多”時(shí)出現(xiàn)的面板時(shí)，嘗試了兩列和三列，以及頻道前是否加icon等多種方案，最后采用兩列且不加icon，因?yàn)檫@種展現(xiàn)是最高效、最清晰的。

新的版本上線(xiàn)后，數(shù)據(jù)分析師給出了分析結(jié)果：

a.各頁(yè)面的點(diǎn)擊率&人均點(diǎn)擊次數(shù)大都有不同程度漲幅

b. 風(fēng)云榜首頁(yè)和四大頻道頁(yè)均為正向波動(dòng)，其中電影頻道點(diǎn)擊率和人均點(diǎn)擊次數(shù)分別上漲20%和34%。

從分析結(jié)果來(lái)看，改版的效果不錯(cuò)。這得益于設(shè)計(jì)前對(duì)目標(biāo)的總結(jié)，以及設(shè)計(jì)時(shí)以目標(biāo)為導(dǎo)向進(jìn)行設(shè)計(jì)。

以上通過(guò)一個(gè)例子，介紹了目標(biāo)導(dǎo)向設(shè)計(jì)法在實(shí)際工作中的一次應(yīng)用。歡迎大家取經(jīng)，也歡迎大家交流吐槽。

歡迎關(guān)注作者微信公眾號(hào)：新設(shè)計(jì)青年

「干貨超足的5個(gè)改版實(shí)戰(zhàn)經(jīng)驗(yàn)總結(jié)」

1. LOGO 改版：《揭秘LOGO設(shè)計(jì)流程！超詳細(xì)的騰訊云LOGO 改版記錄全過(guò)程》
2. 官網(wǎng)改版：《QQ官網(wǎng)全新蛻變！IM QQ 改版（第一期）設(shè)計(jì)總結(jié)》
3. Pinterest 改版：《改版實(shí)戰(zhàn)！聊聊PINTEREST官網(wǎng)再設(shè)計(jì)過(guò)程的經(jīng)驗(yàn)思考》
4. QQ 新版表情：《騰訊ISUX丨揭秘QQ 新版表情背后的設(shè)計(jì)故事》
5. 提升數(shù)據(jù)：《騰訊ISUX丨通過(guò)優(yōu)化，我們將QQ會(huì)員付費(fèi)用戶(hù)數(shù)提高了5倍！》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專(zhuān)欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專(zhuān)欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com