愛奇藝PC站的風(fēng)云榜，是一個提供各種頻道榜單的薈萃之地谨朝。其存在的主要功能卤妒，是讓用戶能夠了解熱門的劇目，從中選擇想看的影片叠必，也能夠了解最近都在流行些什么荚孵。然而，該模塊很久沒有更新纬朝，在內(nèi)容展示上有著比較大的問題收叶，導(dǎo)航上也存在使用不便的情況。因此共苛，產(chǎn)品提出優(yōu)化判没。在這次優(yōu)化的過程中，我使用了之前介紹過的“目標(biāo)導(dǎo)向設(shè)計法”來指導(dǎo)我的設(shè)計隅茎，效果顯著澄峰。下面跟大家具體介紹一下。
?首先辟犀，先來看一下原版的風(fēng)云榜長什么樣：
改版前俏竞，風(fēng)云榜首頁的結(jié)構(gòu)是：一行兩個榜單，其中一個是列表的樣式，另一個是類似Windows Phone的磁貼樣式魂毁；兩種樣式交叉使用玻佩。左邊是導(dǎo)航欄，將風(fēng)云榜中的所有頻道都列了出來席楚。
產(chǎn)品提出的需求咬崔，一是優(yōu)化首頁的排版，增加視頻的點擊率烦秩；二是優(yōu)化導(dǎo)航垮斯，使導(dǎo)航在瀏覽的過程中能夠方便用戶選擇任何他想選擇的頻道。
產(chǎn)品同學(xué)用原型圖簡單地表達(dá)了一下她的想法只祠，如下圖所示：
以上是該項目的基本信息兜蠕。
下面我們來使用目標(biāo)導(dǎo)向設(shè)計法進(jìn)行設(shè)計。首先抛寝，需要明確設(shè)計目標(biāo)牺氨，也就是產(chǎn)品目標(biāo)和用戶目標(biāo)。
分析一下墩剖，項目的產(chǎn)品目標(biāo)是什么呢？舊版頁面信息展現(xiàn)不合理夷狰，點擊率低岭皂；?改版希望通過優(yōu)化信息展現(xiàn)，提升點擊率沼头。舊版導(dǎo)航條在瀏覽過程中頻道的展示不全爷绘；改版希望改善導(dǎo)航條的交互，使用戶在上下滾動瀏覽的時候进倍，可以方便選擇任何頻道土至。因此產(chǎn)品目標(biāo)就是：提升視頻點擊率；優(yōu)化導(dǎo)航猾昆，使導(dǎo)航在瀏覽時能選擇任意頻道陶因。
那么用戶目標(biāo)呢？來到風(fēng)云榜查看各種榜單的用戶垂蜗，不外乎兩種目的：
1. 查看自己喜歡的類別的榜單楷扬；
2. 通過榜單了解熱播劇，并以此為依據(jù)選擇自己想看的熱播劇贴见。
這也就是我們的用戶目標(biāo)烘苹。帶著產(chǎn)品目標(biāo)和用戶目標(biāo)，我們開始一步步設(shè)計片部。
首先我們來具體分析一下舊版的信息展現(xiàn)到底有什么問題：
1. 頁面中的榜單有兩種呈現(xiàn)樣式镣衡，且區(qū)別很大。由于圖片天然地更能吸引人的注意力，因此每一行比較突出的榜單廊鸥，都是采用磁貼排版的那個望浩；而采用列表呈現(xiàn)的榜單，自然會被冷落得多黍图。這影響了信息到達(dá)用戶的效率曾雕。
2. ?榜單的兩種樣式，采用了交叉出現(xiàn)的形式助被，比較跳躍剖张，用戶在此種形式的引導(dǎo)下，實現(xiàn)是折線型的揩环，不夠順暢（最為順暢的一定是拐角最小的搔弄，越直線越好）。?
所以丰滑，舊版的排版顾犹，使用戶在瀏覽時只注意到磁鐵樣式（封面圖拼成）的那個榜單，容易忽略文字榜單褒墨；且視線曲折炫刷，容易疲勞。所以重新設(shè)計時要對榜單進(jìn)行重新排版郁妈，優(yōu)化用戶的瀏覽體驗浑玛，以期達(dá)到我們的設(shè)計目標(biāo)。
我們再來研究一下競品噩咪。騰訊視頻的PC站顾彰，似乎對榜單沒有太大的興趣，只有在VIP會員頻道有個“熱片榜”：
騰訊的熱片榜胃碾，雖然名為“榜”涨享，實際只是“最熱”tab下的影片篩選。
優(yōu)酷視頻的PC站仆百，在“排行”頻道里厕隧，有“指數(shù)排行榜”和“訂閱排行榜”：
這種排版更適合音樂類型的展示，對于影視類這種封面圖比較重要的類型俄周，展示效果比較一般栏账。
值得一提的是，愛奇藝視頻的首頁栈源，在這里也可以作為“競品”來參考挡爵。因為用戶最熟悉的，一定是默認(rèn)的首頁的樣式甚垦；而風(fēng)云榜的入口茶鹃，也是在首頁涣雕。因此首頁對于風(fēng)云榜的設(shè)計，也有不小的參考意義：
綜合以上的信息闭翩，我給出了以下的設(shè)計方案：
排版上參照了愛奇藝PC站首頁的樣式挣郭，在排版上統(tǒng)一采用一行5個封面圖，展示有規(guī)律疗韵，便于用戶迅速get到信息兑障；同時使用封面圖也符合影視信息展示的特點。
這樣的排版蕉汪，能夠方便用戶找到自己感興趣的類別流译，同時迅速瀏覽熱門的視頻，最符合上下滾動瀏覽網(wǎng)頁的姿勢者疤。
再來看導(dǎo)航：
對于導(dǎo)航福澡，將一些次常用的頻道收起，其余常用頻道常駐在屏幕左側(cè)驹马。為了保證在最小的分辨率下革砸，一屏也能展示完整常駐的頻道，因此規(guī)定最多展示14個頻道（包含“更多”）糯累。
順提一下算利，在設(shè)計鼠標(biāo)hover到“更多”時出現(xiàn)的面板時，嘗試了兩列和三列泳姐，以及頻道前是否加icon等多種方案笔时，最后采用兩列且不加icon，因為這種展現(xiàn)是最高效仗岸、最清晰的。
?新的版本上線后借笙，數(shù)據(jù)分析師給出了分析結(jié)果：
a.各頁面的點擊率&人均點擊次數(shù)大都有不同程度漲幅
b. 風(fēng)云榜首頁和四大頻道頁均為正向波動扒怖，其中電影頻道點擊率和人均點擊次數(shù)分別上漲20%和34%。
從分析結(jié)果來看业稼，改版的效果不錯盗痒。這得益于設(shè)計前對目標(biāo)的總結(jié)，以及設(shè)計時以目標(biāo)為導(dǎo)向進(jìn)行設(shè)計低散。
以上通過一個例子俯邓，介紹了目標(biāo)導(dǎo)向設(shè)計法在實際工作中的一次應(yīng)用。歡迎大家取經(jīng)熔号，也歡迎大家交流吐槽稽鞭。
歡迎關(guān)注我的微信公眾號：新設(shè)計青年，及時收取設(shè)計和個人成長方面的文章引镊。
