愛奇藝PC站的風云榜，是一個提供各種頻道榜單的薈萃之地。其存在的主要功能，是讓用戶能夠了解熱門的劇目，從中選擇想看的影片，也能夠了解最近都在流行些什么。然而，該模塊很久沒有更新，在內容展示上有著比較大的問題，導航上也存在使用不便的情況。因此，產品提出優化。在這次優化的過程中，我使用了之前介紹過的“目標導向設計法”來指導我的設計，效果顯著。下面跟大家具體介紹一下。

什么是目標導向設計法：《一招教你讓交互方案更靠譜！超好用的目標導向設計法》

首先，先來看一下原版的風云榜長什么樣：

△ 改版前的風云榜頁面

改版前，風云榜首頁的結構是：一行兩個榜單，其中一個是列表的樣式，另一個是類似Windows Phone的磁貼樣式；兩種樣式交叉使用。左邊是導航欄，將風云榜中的所有頻道都列了出來。

產品提出的需求，一是優化首頁的排版，增加視頻的點擊率；二是優化導航，使導航在瀏覽的過程中能夠方便用戶選擇任何他想選擇的頻道。

產品同學用原型圖簡單地表達了一下她的想法，如下圖所示：

△ 產品提出的原型圖

以上是該項目的基本信息。

下面我們來使用目標導向設計法進行設計。首先，需要明確設計目標，也就是產品目標和用戶目標。

分析一下，項目的產品目標是什么呢？舊版頁面信息展現不合理，點擊率低；改版希望通過優化信息展現，提升點擊率。舊版導航條在瀏覽過程中頻道的展示不全；改版希望改善導航條的交互，使用戶在上下滾動瀏覽的時候，可以方便選擇任何頻道。因此產品目標就是：提升視頻點擊率；優化導航，使導航在瀏覽時能選擇任意頻道。

那么用戶目標呢？來到風云榜查看各種榜單的用戶，不外乎兩種目的：

1. 查看自己喜歡的類別的榜單；

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

這也就是我們的用戶目標。帶著產品目標和用戶目標，我們開始一步步設計。

首先我們來具體分析一下舊版的信息展現到底有什么問題：

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

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

所以，舊版的排版，使用戶在瀏覽時只注意到磁鐵樣式（封面圖拼成）的那個榜單，容易忽略文字榜單；且視線曲折，容易疲勞。所以重新設計時要對榜單進行重新排版，優化用戶的瀏覽體驗，以期達到我們的設計目標。

我們再來研究一下競品。騰訊視頻的PC站，似乎對榜單沒有太大的興趣，只有在VIP會員頻道有個“熱片榜”：

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

優酷視頻的PC站，在“排行”頻道里，有“指數排行榜”和“訂閱排行榜”：

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

值得一提的是，愛奇藝視頻的首頁，在這里也可以作為“競品”來參考。因為用戶最熟悉的，一定是默認的首頁的樣式；而風云榜的入口，也是在首頁。因此首頁對于風云榜的設計，也有不小的參考意義：

綜合以上的信息，我給出了以下的設計方案：

排版上參照了愛奇藝PC站首頁的樣式，在排版上統一采用一行5個封面圖，展示有規律，便于用戶迅速get到信息；同時使用封面圖也符合影視信息展示的特點。

這樣的排版，能夠方便用戶找到自己感興趣的類別，同時迅速瀏覽熱門的視頻，最符合上下滾動瀏覽網頁的姿勢。

再來看導航：

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

順提一下，在設計鼠標hover到“更多”時出現的面板時，嘗試了兩列和三列，以及頻道前是否加icon等多種方案，最后采用兩列且不加icon，因為這種展現是最高效、最清晰的。

新的版本上線后，數據分析師給出了分析結果：

a.各頁面的點擊率&人均點擊次數大都有不同程度漲幅

b. 風云榜首頁和四大頻道頁均為正向波動，其中電影頻道點擊率和人均點擊次數分別上漲20%和34%。

從分析結果來看，改版的效果不錯。這得益于設計前對目標的總結，以及設計時以目標為導向進行設計。

以上通過一個例子，介紹了目標導向設計法在實際工作中的一次應用。歡迎大家取經，也歡迎大家交流吐槽。

歡迎關注作者微信公眾號：新設計青年

「干貨超足的5個改版實戰經驗總結」

1. LOGO 改版：《揭秘LOGO設計流程！超詳細的騰訊云LOGO 改版記錄全過程》
2. 官網改版：《QQ官網全新蛻變！IM QQ 改版（第一期）設計總結》
3. Pinterest 改版：《改版實戰！聊聊PINTEREST官網再設計過程的經驗思考》
4. QQ 新版表情：《騰訊ISUX丨揭秘QQ 新版表情背后的設計故事》
5. 提升數據：《騰訊ISUX丨通過優化，我們將QQ會員付費用戶數提高了5倍！》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

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

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com