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

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

目標(biāo)導(dǎo)向設(shè)計(jì)法

下面我們來(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ì)，也有不小的參考意義：

在和我們靠譜的產(chǎn)品經(jīng)理同學(xué)討論之后，又綜合了以上的信息，我給出了以下的設(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é)果：

• 各頁(yè)面的點(diǎn)擊率&人均點(diǎn)擊次數(shù)大都有不同程度漲幅
• 風(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)閱讀

目標(biāo)導(dǎo)向設(shè)計(jì)法01：如何才能讓交互方案更靠譜？

目標(biāo)導(dǎo)向設(shè)計(jì)法02：如何確定設(shè)計(jì)目標(biāo)？

目標(biāo)導(dǎo)向設(shè)計(jì)法03：確定設(shè)計(jì)目標(biāo)之后，交互方案該如何展開(kāi)？