對(duì)于網(wǎng)站來(lái)說(shuō)，首頁(yè)就是門(mén)面，直接決定用戶能不能準(zhǔn)確接收網(wǎng)站的主題，能不能對(duì)網(wǎng)站產(chǎn)生興趣。

我們先來(lái)看看web端首頁(yè)的布局：

1.整體布局分析

除去懸浮導(dǎo)航，網(wǎng)頁(yè)采取左右型布局，分為兩列多行。左列為內(nèi)容區(qū)，占據(jù)版面的3/4，根據(jù)導(dǎo)航分類(lèi)推薦內(nèi)容；右列維度較多，包括好書(shū)推薦、熱門(mén)文章、熱招職位等等區(qū)域，但只要細(xì)心就會(huì)發(fā)現(xiàn)，除了熱門(mén)文章，其他分類(lèi)都是或軟或硬的推廣。

恰到好處的推廣不僅不會(huì)讓用戶反感，還會(huì)增加用戶體驗(yàn)，留給用戶“有用”的印象。

1. 要貼近用戶的當(dāng)前需求。
2. 不要阻斷用戶的當(dāng)前行為。
3. 不要干擾用戶的視線。

當(dāng)然，如何平衡廣告效果和用戶體驗(yàn)是永恒的難題，要視具體情況而定。

此時(shí)web首頁(yè)可以抽象成以下：

根據(jù)人類(lèi)的閱讀習(xí)慣：從左到右，從上到下。

用戶首先會(huì)瀏覽到左側(cè)的推薦內(nèi)容，待視線移到右側(cè)時(shí)，會(huì)看到推廣內(nèi)容，再往下移，又從推薦內(nèi)容看到推廣內(nèi)容；當(dāng)用戶形成習(xí)慣后，厭煩右側(cè)推廣內(nèi)容的用戶可在視線到達(dá)內(nèi)容區(qū)邊界時(shí)，收回視線，繼續(xù)向下瀏覽；而認(rèn)為推廣內(nèi)容有用的用戶可以直接判定右側(cè)的位置，向下瀏覽。

所以，這樣的布局在確保推廣有效的同時(shí)，不會(huì)干擾用戶的行為，影響用戶體驗(yàn)。

2.導(dǎo)航欄合理性分析

網(wǎng)站使用導(dǎo)航欄是為了讓訪問(wèn)者更清晰明朗的找到所需要的資源區(qū)域，尋找資源。

首頁(yè)一共有2個(gè)導(dǎo)航欄，一個(gè)是網(wǎng)站的總導(dǎo)航欄（懸浮），一個(gè)是首頁(yè)的內(nèi)容導(dǎo)航欄。內(nèi)容導(dǎo)航欄我認(rèn)為有兩點(diǎn)不合理之處：

一是分類(lèi)的依據(jù)不統(tǒng)一，沒(méi)有邏輯。

“最新文章”、“七日熱門(mén)”、“我的訂閱”的分類(lèi)依據(jù)是“文章的特點(diǎn)”，最新的、熱門(mén)的、我訂閱的，本質(zhì)上都是文章，可以合并成“文章”；“文章”、“熱門(mén)回答”、“知識(shí)體系”、“PM日?qǐng)?bào)”的分類(lèi)依據(jù)是“內(nèi)容的類(lèi)型”，類(lèi)型包括文章、問(wèn)答、專題、日?qǐng)?bào)；網(wǎng)址導(dǎo)航單獨(dú)一類(lèi)，不能歸納。

這就像分類(lèi)為：熱帶水果、紫色水果、零食、蔬菜。當(dāng)用戶看到“熱帶水果”和“紫色水果”很容易根據(jù)現(xiàn)實(shí)生活的邏輯，認(rèn)定這個(gè)導(dǎo)航是水果分類(lèi)導(dǎo)航，當(dāng)看到“零食”、“蔬菜”時(shí)，發(fā)現(xiàn)與自己的邏輯不一致，又找不出新的邏輯歸納，只能當(dāng)作零碎的單詞記憶；當(dāng)用戶下一次想要找到“零食”時(shí)，記憶不能及時(shí)與導(dǎo)航欄產(chǎn)生聯(lián)系，就會(huì)增加用戶學(xué)習(xí)和熟悉的成本。

降低用戶的學(xué)習(xí)成本的方法

1. 使用與大部分產(chǎn)品統(tǒng)一的符號(hào)和操作手勢(shì)（舉例：點(diǎn)贊、收藏符號(hào)，下滑刷新、左右翻頁(yè)手勢(shì)操作），
2. 利用現(xiàn)實(shí)世界用戶熟悉的邏輯（舉例：微信“銀行卡”入口放在“我的錢(qián)包”中），
3. 為用戶提供新手引導(dǎo)

二是導(dǎo)航欄內(nèi)容在首頁(yè)的入口不止一個(gè)

在網(wǎng)站的總導(dǎo)航條上，同樣有問(wèn)答、PM日?qǐng)?bào)、我的訂閱的入口。分析用戶分別使用兩個(gè)入口的操作路徑，如圖。

總導(dǎo)航欄和內(nèi)容導(dǎo)航欄的不同在于：總導(dǎo)航欄懸浮于整個(gè)網(wǎng)站的頂部，在任何頁(yè)面都很醒目，也可以直接操作；而內(nèi)容導(dǎo)航欄只在首頁(yè)偏下位置。基于這個(gè)層面，用戶更愿意使用總導(dǎo)航欄。

從用戶的實(shí)際操作來(lái)說(shuō)，問(wèn)答、PM日?qǐng)?bào)、我的訂閱情況有所不同。

問(wèn)答：大部分用戶（偏向看答案）想要看到的問(wèn)答是熱門(mén)問(wèn)答的精品回答，從中學(xué)習(xí)知識(shí)，開(kāi)拓思維。少部分用戶（偏向回答問(wèn)題）想要看到的是最新的挑起他們回答興趣的問(wèn)題。所以大部分用戶使用內(nèi)容導(dǎo)航欄更方便（但內(nèi)容導(dǎo)航欄下只有問(wèn)題和回答人數(shù)等信息，和用戶看答案的期望有所不符，這一點(diǎn)后面討論）。

PM日?qǐng)?bào)：兩個(gè)入口的終點(diǎn)相同，路徑差別不大，只是總導(dǎo)航欄中的PM日?qǐng)?bào)隱藏在百寶箱中，所以用戶一般會(huì)使用內(nèi)容導(dǎo)航欄的日?qǐng)?bào)入口。

我的訂閱：大部分用戶訂閱作者的目的是為了查看“我喜歡的作者們”發(fā)布的文章，而不是查看我喜歡的作者列表，再去單個(gè)查看他們發(fā)布的文章；所以總導(dǎo)航欄（或者說(shuō)個(gè)人中心）的“我的訂閱”入口是雞肋的，是用戶很少會(huì)使用的。但”我的訂閱”的位置，放在“個(gè)人中心”是更符合用戶邏輯的。

總的來(lái)說(shuō)，總導(dǎo)航欄的入口位置更好，內(nèi)容導(dǎo)航欄的入口更符合用戶需求；對(duì)于新用戶，兩個(gè)入口容易造成混亂，降低效率，特別是“我的訂閱”同樣的入口名，進(jìn)入后結(jié)果不同，需要用戶適應(yīng)；對(duì)于老用戶，兩個(gè)入口都不盡人意，位置符合邏輯的入口，操作路徑麻煩，操作符合需求的入口，位置不符合邏輯。

如何優(yōu)化導(dǎo)航欄見(jiàn)第四點(diǎn)。

3.內(nèi)容區(qū)布局分析

在左側(cè)內(nèi)容區(qū)有個(gè)很奇怪的地方，如下圖。在默認(rèn)分類(lèi)（最新文章）的推薦內(nèi)容板塊中，橫穿出一塊“學(xué)習(xí)專題”。

“學(xué)習(xí)專題”等同于內(nèi)容分類(lèi)導(dǎo)航中的“知識(shí)體系”，是對(duì)文章做的整理合集，現(xiàn)共有46個(gè)合集，每個(gè)合集包括5-30篇文章，大部分集中在13篇左右。

然而這樣設(shè)計(jì)給新用戶極大的混淆。原因如下：

1. 含義模糊：無(wú)論是“學(xué)習(xí)專題”，還是“知識(shí)體系”，這兩個(gè)名字都不足以令用戶迅速聯(lián)系到“文章分類(lèi)整理合集”。當(dāng)用戶不清楚將要看到什么內(nèi)容，用戶會(huì)選擇忽略跳過(guò)，而不是主動(dòng)嘗試。
2. 打亂視覺(jué)一致：文章之間的布局是一致的，但和插入的學(xué)習(xí)專題布局是不一致的，會(huì)讓用戶感到突?；靵y，在視覺(jué)上破壞用戶的瀏覽順暢。
3. 弱化后部分內(nèi)容：當(dāng)用戶瀏覽推薦文章的行為突然被打斷，用戶對(duì)文章的興致和注意力會(huì)被破壞，對(duì)下面的文章興趣降低，使下面的文章推薦效果很差很雞肋；同時(shí)用戶可能被“學(xué)習(xí)專題”引走，完全放棄下面的文章。

那為什么還要這樣設(shè)計(jì)呢？去揣摩設(shè)計(jì)者的想法，這樣的設(shè)計(jì)的確有意義的。

首先“知識(shí)體系”的存在感非常弱，原因如下。（對(duì)于新用戶而言）

1. 位置弱：內(nèi)容分類(lèi)導(dǎo)航欄，按“最新文章”、“七日熱門(mén)”、“熱門(mén)問(wèn)答”、“知識(shí)體系”、“PM日?qǐng)?bào)”、“我的訂閱”的順序排列，“知識(shí)體系”排在第四，已經(jīng)是普通用戶不大會(huì)去探索的位置。
2. 吸引力弱：其他分類(lèi)都是用戶清楚含義感到熟悉的名詞，用戶會(huì)自然地不假思索地去嘗試；而“知識(shí)體系”讓用戶一頭霧水，降低嘗試欲望。
3. 功能弱：“知識(shí)體系”就是文章分類(lèi)合集，和“最新文章”、“七日熱門(mén)”有交叉重復(fù)之處，且“最新文章”、“七日熱門(mén)”都在更顯眼的位置。這兩個(gè)分類(lèi)加上搜索功能會(huì)弱化“知識(shí)體系”。

然而，設(shè)計(jì)者非常重視“知識(shí)體系”，希望新用戶快速認(rèn)識(shí)“知識(shí)體系”，通過(guò)專題進(jìn)行更高效系統(tǒng)的學(xué)習(xí)。為了提高“知識(shí)體系”的存在感，在用戶最可能的瀏覽流程中插入“學(xué)習(xí)專題”，將用戶引入。

4.內(nèi)容區(qū)重設(shè)計(jì)

結(jié)合2、3點(diǎn)的分析，我做了如下重設(shè)計(jì)：

整體：

整合優(yōu)化“最新文章”、“七日熱門(mén)”、“學(xué)習(xí)體系”、“我的訂閱”為“文章”。

1. 把“最新”和“熱門(mén)”體現(xiàn)到排序上（如圈2），熱門(mén)的排序算法結(jié)合發(fā)布日期；
2. 把“學(xué)習(xí)體系”體現(xiàn)到文章的所屬專題（如圈3），總是推薦至少一篇專題文章，將用戶引入專題；
3. 把“我的訂閱”體現(xiàn)在用戶標(biāo)記上（如圈4），總是首先推薦“我訂閱的用戶”的文章。

問(wèn)答：

對(duì)板塊內(nèi)容進(jìn)行合理增刪。

1. 刪除回答用戶列舉（…已有19人參與了討論）；與回答數(shù)重復(fù)，且列舉用戶頭像意義不大。
2. 增加一個(gè)熱門(mén)答案，包括：答案的作者、贊數(shù)、收藏?cái)?shù)、答案開(kāi)頭，這樣更吸引用戶點(diǎn)開(kāi)問(wèn)題。（如圈1）
3. 推送訂閱作者回答過(guò)的問(wèn)題，把訂閱作者的答案放在首位。（如圈2）
4. 在板塊末尾增加”天天問(wèn)“頁(yè)面入口，雖然總導(dǎo)航欄上的入口更方便，但用戶很可能在瀏覽完推薦問(wèn)答時(shí)，沒(méi)有找到感興趣的內(nèi)容，期待看到更多；這時(shí)就產(chǎn)生了在板塊末尾進(jìn)入”天天問(wèn)“頁(yè)面的需求。（如圈3）

知識(shí)體系

給專題排序。

知識(shí)體系一共有46個(gè)，根據(jù)實(shí)際順序列舉前10個(gè)專題，如圖。專題頁(yè)是沒(méi)有專門(mén)設(shè)置搜索功能的，也就是說(shuō)，當(dāng)用戶要在這46個(gè)沒(méi)有邏輯順序的專題中尋找符合需求的專題，是需要從頭開(kāi)始逐個(gè)瀏覽或者在整個(gè)頁(yè)面跳來(lái)跳去。

所以，我認(rèn)為應(yīng)該按照新手的學(xué)習(xí)順序做一個(gè)大概排序。這樣，新手可以根據(jù)排序?qū)W習(xí)（基礎(chǔ)到進(jìn)階），而非新手也可以根據(jù)排序邏輯確定自己要找的專題的大概位置。

5.輪播推薦區(qū)分析

輪播推薦區(qū)同樣有一個(gè)奇怪（和大多數(shù)網(wǎng)站不一樣）的地方，如下圖。它沒(méi)有把5個(gè)推薦文章和為一塊輪播圖，而是輪播三個(gè)文章，單獨(dú)展示兩個(gè)文章。

這樣的設(shè)計(jì)有利有弊：

弊

把板塊切割得太碎，視覺(jué)上不夠大氣，且有視覺(jué)不一致的問(wèn)題。

利

讓用戶可以一眼看到三篇推薦文章，大大提高推薦效果。如果做成輪播5個(gè)圖，用戶大概看到第三個(gè)就放棄后面了。

總結(jié)

總的來(lái)說(shuō)，利大于弊，本來(lái)想做類(lèi)似下圖的重設(shè)計(jì)，把右側(cè)兩個(gè)圖片空間合并，替換為文字版的熱門(mén)文章，設(shè)計(jì)時(shí)發(fā)現(xiàn)空間太小，文章標(biāo)題容易出現(xiàn)換行情況，且“輪播圖”和“活動(dòng)推薦”兩塊大圖之間夾著文字，同樣會(huì)造成視覺(jué)不一致的不適感。最后放棄重設(shè)計(jì)。

總結(jié)

1. 首頁(yè)整體布局合理，主要體現(xiàn)在內(nèi)容和推廣的比例與分布。
2. 內(nèi)容導(dǎo)航欄不合理，導(dǎo)航分類(lèi)沒(méi)有邏輯，可以合并優(yōu)化。
3. 內(nèi)容區(qū)插入“知識(shí)專題”的布局不合理，可以刪掉，以文章來(lái)源的形式體現(xiàn)在文章列表中。
4. 問(wèn)答列表不合理，刪掉意義不大的回答用戶展示，增加熱門(mén)回答，體現(xiàn)“我的訂閱”。
5. 學(xué)習(xí)專題排序可優(yōu)化，按照新手學(xué)習(xí)的大致順序，提高專題的專業(yè)性；提供邏輯，方便用戶尋找定位。
6. 輪播推薦區(qū)布局有利有弊，總體利大于弊，未想到更好方案。

如有差錯(cuò)，請(qǐng)指正。

本文由 @?蔻三 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自u(píng)nsplash，基于CC0協(xié)議