對(duì)于網(wǎng)站，主頁(yè)是外觀，它直接決定用戶(hù)是否可以準(zhǔn)確地接收網(wǎng)站的主題，以及它是否可以產(chǎn)生對(duì)網(wǎng)站的興趣。

我們先來(lái)看一下基于Web的主頁(yè)的布局：

1.總體布局分析

除浮動(dòng)導(dǎo)航外，網(wǎng)頁(yè)采用左右布局，分為兩列和多行。左欄是內(nèi)容區(qū)，占據(jù)布局的3/4，根據(jù)導(dǎo)航分類(lèi)推薦內(nèi)容;右欄有更多的尺寸，包括好書(shū)推薦，熱門(mén)文章，熱門(mén)帖子等，但只要你小心，你會(huì)發(fā)現(xiàn)，除了熱門(mén)文章。其他類(lèi)別是軟促銷(xiāo)或硬促銷(xiāo)。

恰到好處的促銷(xiāo)不僅會(huì)消除用戶(hù)，還會(huì)增加用戶(hù)體驗(yàn)，給用戶(hù)留下“有用”的印象。

接近用戶(hù)的當(dāng)前需求。

不要阻止用戶(hù)的當(dāng)前行為。

不要干擾用戶(hù)的視線。

當(dāng)然，如何平衡廣告效果和用戶(hù)體驗(yàn)是一個(gè)永恒的問(wèn)題，具體取決于具體情況。

此時(shí)，Web主頁(yè)可以抽象為以下內(nèi)容：

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

用戶(hù)將首先瀏覽到左側(cè)的推薦內(nèi)容。當(dāng)視線移動(dòng)到右側(cè)時(shí)，將看到促銷(xiāo)內(nèi)容，然后向下移動(dòng)，并且將從推薦內(nèi)容中看到促銷(xiāo)內(nèi)容;當(dāng)用戶(hù)養(yǎng)成習(xí)慣時(shí)，用戶(hù)將厭倦正確的促銷(xiāo)內(nèi)容。當(dāng)視線到達(dá)內(nèi)容區(qū)域的邊界時(shí)，用戶(hù)可以縮回視線，并繼續(xù)向下瀏覽;并且認(rèn)為促銷(xiāo)內(nèi)容有用的用戶(hù)可以直接確定右側(cè)的位置并向下瀏覽。

因此，這樣的布局將確保促銷(xiāo)有效，并且不會(huì)干擾用戶(hù)的行為并影響用戶(hù)體驗(yàn)。

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

該網(wǎng)站使用導(dǎo)航欄，允許訪問(wèn)者找到所需的資源區(qū)域，并更清楚，清晰地查找資源。

主頁(yè)總共有2個(gè)導(dǎo)航欄，一個(gè)是網(wǎng)站的總導(dǎo)航欄（浮動(dòng)），另一個(gè)是主頁(yè)的內(nèi)容導(dǎo)航欄。我認(rèn)為內(nèi)容導(dǎo)航欄中有兩個(gè)不合理的東西：

首先，分類(lèi)的基礎(chǔ)不統(tǒng)一，沒(méi)有邏輯。

“最新文章”，&ndquo;      &ndquo;是基于“文章的特點(diǎn)”，最新的，流行的，我訂閱的，基本上是文章?？梢院喜⒊伞拔恼隆?rd ;; “文章”，“熱門(mén)答案”，“知識(shí)體系”，“PM日?qǐng)?bào)”根據(jù)“內(nèi)容類(lèi)型”進(jìn)行分類(lèi)，類(lèi)型包括文章，問(wèn)答，專(zhuān)題，日?qǐng)?bào);單靠網(wǎng)站導(dǎo)航，無(wú)法概括。

它被歸類(lèi)為：熱帶水果，紫色水果，小吃，蔬菜。當(dāng)用戶(hù)看到“熱帶水果”和“紫色水果”時(shí)，很容易根據(jù)現(xiàn)實(shí)生活的邏輯確定該導(dǎo)航是水果分類(lèi)導(dǎo)航。當(dāng)你看到“零食”，“草編蔬菜”時(shí)，你會(huì)發(fā)現(xiàn)與自己的邏輯不一致，找不到新的邏輯歸納，只能用作零碎的單詞記憶;當(dāng)用戶(hù)想在下次找到“零食”時(shí)，內(nèi)存無(wú)法及時(shí)與導(dǎo)航欄聯(lián)系，會(huì)增加學(xué)習(xí)成本和用戶(hù)熟悉度。

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

使用與大多數(shù)產(chǎn)品一致的符號(hào)和手勢(shì)（例如：喜歡，喜歡的符號(hào)，幻燈片刷新，左右手勢(shì)），

充分利用現(xiàn)實(shí)世界用戶(hù)熟悉的邏輯（例如：微信“銀行卡”;“我的錢(qián)包”中的入口;），

為用戶(hù)提供新手指導(dǎo)

其次，導(dǎo)航欄內(nèi)容在主頁(yè)入口處不止一個(gè)

在網(wǎng)站的主導(dǎo)航欄上，還有問(wèn)題和答案，每日PM，以及我訂閱的入口。使用兩個(gè)條目分析用戶(hù)的操作路徑，如圖所示。

總導(dǎo)航欄和內(nèi)容導(dǎo)航欄之間的區(qū)別在于，總導(dǎo)航欄暫停在整個(gè)網(wǎng)站的頂部，并且在任何頁(yè)面上都很突出，也可以直接操作;并且內(nèi)容導(dǎo)航欄僅位于主頁(yè)的較低位置?；诖思?jí)別，用戶(hù)更愿意使用總導(dǎo)航欄。

從用戶(hù)的實(shí)際操作來(lái)看，Q&A，PM daily和我的訂閱是不同的。

問(wèn)答：大多數(shù)用戶(hù)（偏向于看到答案）希望看到問(wèn)題和答案是對(duì)流行的問(wèn)題和答案，學(xué)習(xí)知識(shí)和發(fā)展思維的良好答案。少數(shù)用戶(hù)（有偏見(jiàn)回答問(wèn)題）希望看到引起他們回答問(wèn)題的最新問(wèn)題。因此，大多數(shù)用戶(hù)更方便地使用內(nèi)容導(dǎo)航欄（但是在內(nèi)容導(dǎo)航欄下只有問(wèn)題和答案等，這與用戶(hù)期望看到答案不一致，這將在后面討論）。

PM Daily：兩個(gè)入口的端點(diǎn)是一樣的，路徑差別不大，但總導(dǎo)航欄中的PM日?qǐng)?bào)隱藏在寶箱里，所以用戶(hù)一般都使用日?qǐng)?bào)的內(nèi)容輸入導(dǎo)航欄。

我的訂閱：大多數(shù)用戶(hù)訂閱作者，以便查看作者喜歡的文章，而不是查看我喜歡的作者列表，然后查看他們發(fā)表的文章的單一視圖;所以總導(dǎo)航欄（或個(gè)人中心）“我的訂閱”是雞肋，很少被用戶(hù)使用。但是，我的訂閱位置“rdquo;置于“個(gè)人中心”更符合用戶(hù)邏輯。

一般來(lái)說(shuō)，整個(gè)導(dǎo)航欄的入口位置更好，內(nèi)容導(dǎo)航欄的入口更符合用戶(hù)的需求;對(duì)于新用戶(hù)來(lái)說(shuō)，這兩個(gè)入口容易混淆并降低效率，尤其是“我的訂閱”。名稱(chēng)，進(jìn)入后結(jié)果不同，用戶(hù)需要適應(yīng);對(duì)于老用戶(hù)來(lái)說(shuō)，兩個(gè)入口都不盡如人意，位置邏輯上是入口，操作路徑麻煩，操作符合入口要求，位置不合理。

請(qǐng)參閱第四點(diǎn)，了解如何優(yōu)化導(dǎo)航欄。

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

左側(cè)內(nèi)容區(qū)域有一個(gè)奇怪的地方，如下所示。在默認(rèn)類(lèi)別（最新文章）的推薦內(nèi)容部分中，遍歷一段“學(xué)習(xí)主題”。

“學(xué)習(xí)主題”相當(dāng)于內(nèi)容分類(lèi)導(dǎo)航中的“知識(shí)系統(tǒng)”。這是一個(gè)文章集。共有46個(gè)系列，每個(gè)系列包括5-30篇文章，其中大部分集中在13篇文章中。關(guān)于。

但是，這種設(shè)計(jì)對(duì)新用戶(hù)來(lái)說(shuō)非常困惑。原因如下：

含義模糊：無(wú)論是“學(xué)習(xí)主題”還是“知識(shí)”，這兩個(gè)名稱(chēng)都不足以讓用戶(hù)快速聯(lián)系“文章集”。當(dāng)用戶(hù)不確定要看什么時(shí)，用戶(hù)將選擇忽略跳過(guò)而不是主動(dòng)嘗試。

分散視覺(jué)的一致性：文章之間的布局是一致的，但它與插入的學(xué)習(xí)主題布局不一致，這將使用戶(hù)感到尷尬和混亂，并在視覺(jué)上破壞用戶(hù)的瀏覽順暢。

弱化部分內(nèi)容后：當(dāng)用戶(hù)瀏覽推薦文章時(shí)突然中斷，用戶(hù)對(duì)文章的興趣和關(guān)注度將被破壞，以下文章的興趣減少，因此以下文章推薦非常差，非常無(wú)味;同時(shí)用戶(hù)可能被“學(xué)習(xí)主題”帶走并完全放棄了以下文章。

那我們?yōu)槭裁匆@樣設(shè)計(jì)呢？為了弄清楚設(shè)計(jì)師的想法，這樣的設(shè)計(jì)確實(shí)有意義。

首先，由于以下原因，“知識(shí)體系”的存在非常薄弱。 （對(duì)于新用戶(hù)）

弱勢(shì)位置：內(nèi)容分類(lèi)導(dǎo)航欄，按“l(fā)dquo;最新文章”，“七天熱“rdquo;“ “熱門(mén)問(wèn)答”，“知識(shí)系統(tǒng)”，“PM每日”，“我的訂閱”知識(shí)系統(tǒng)的順序排名第四，而且已經(jīng)是普通用戶(hù)不太可能的地方探索。

弱吸引力：其他類(lèi)別是用戶(hù)熟悉的術(shù)語(yǔ)，用戶(hù)自然會(huì)不假思索地嘗試;而“知識(shí)系統(tǒng)”使用戶(hù)感到困惑并降低了他們的嘗試欲望。

弱功能：“知識(shí)系統(tǒng)”是文章的集合，“最新文章”，“7天熱”，有交叉，“最新文章”，““為期七天的熱門(mén)“兩者都處于一個(gè)更顯眼的位置。這兩個(gè)類(lèi)別加上搜索功能將削弱“知識(shí)系統(tǒng)”。

然而，設(shè)計(jì)師非常重視“知識(shí)系統(tǒng)”，并希望新用戶(hù)能夠通過(guò)該主題快速理解“知識(shí)系統(tǒng)”并更有效，更系統(tǒng)地學(xué)習(xí)。為了提高“知識(shí)系統(tǒng)”的存在感，在用戶(hù)最有可能的瀏覽過(guò)程中插入“學(xué)習(xí)主題”來(lái)介紹用戶(hù)。

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

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

總體：

整合優(yōu)化“l(fā)dquo;最新文章”，“七天熱“rdquo;“學(xué)習(xí)系統(tǒng)”“我的訂閱”為'ldquo;文章”

帶來(lái)“最新”&“熱”"對(duì)于排序（如圈2），流行的排序算法結(jié)合發(fā)布日期;

將“學(xué)習(xí)系統(tǒng)”納入文章主題（如第3圈），總是建議至少一篇專(zhuān)題文章向用戶(hù)介紹該主題;

要將“我的訂閱”放在用戶(hù)標(biāo)記（例如圈4）上，請(qǐng)始終推薦“我訂閱的用戶(hù)”一文。

Q&A：

對(duì)該部分內(nèi)容的合理添加和刪除。

刪除答案用戶(hù)列表（… 19人參與討論）;重復(fù)了答案的數(shù)量，用戶(hù)頭像列表意義不大。

添加熱門(mén)答案，包括：答案作者，收藏夾數(shù)量，收藏夾數(shù)量，答案開(kāi)頭，這對(duì)用戶(hù)更具吸引力。 （如圈1）

推送作者已回答的問(wèn)題，并將訂閱作者的答案放在第一位。 （如圈2）

在本節(jié)結(jié)尾處，添加“rdquo;每天都要問(wèn)“頁(yè)面輸入，雖然總導(dǎo)航欄上的入口更方便，但用戶(hù)在瀏覽推薦的問(wèn)題和答案時(shí)很可能找不到感興趣的內(nèi)容，期望看到更多;然后需要在該部分的末尾進(jìn)入頁(yè)面。 （例如圈3）

知識(shí)體系

對(duì)主題進(jìn)行排序。

共有46個(gè)知識(shí)系統(tǒng)，根據(jù)實(shí)際順序列出前10個(gè)主題，如圖所示。功能頁(yè)面沒(méi)有特殊的搜索功能。也就是說(shuō)，當(dāng)用戶(hù)想要找到滿(mǎn)足46個(gè)主題中沒(méi)有邏輯順序的要求的主題時(shí)，有必要從頭開(kāi)始瀏覽或跳轉(zhuǎn)整個(gè)頁(yè)面。

因此，我認(rèn)為我們應(yīng)該根據(jù)新手的學(xué)習(xí)順序進(jìn)行粗略的排序。通過(guò)這種方式，新手可以通過(guò)排序（基本到高級(jí)）來(lái)學(xué)習(xí)，非新手也可以根據(jù)排序邏輯確定他們正在尋找的主題的大致位置。

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

輪播推薦區(qū)域也有一個(gè)奇怪的（與大多數(shù)網(wǎng)站不同），如下所示。它不是將五個(gè)推薦的物品放入一個(gè)旋轉(zhuǎn)木馬，而是旋轉(zhuǎn)三個(gè)物品并分別顯示兩個(gè)物品。

這種設(shè)計(jì)有優(yōu)點(diǎn)和缺點(diǎn)：

缺點(diǎn)

切割板太碎，在視覺(jué)上不夠大氣，并且具有視覺(jué)上的不一致性。

利

允許用戶(hù)一目了然地看到三篇推薦文章，大大提高了推薦效果。如果您制作旋轉(zhuǎn)木馬5地圖，用戶(hù)可能會(huì)看到第三個(gè)地圖并放棄。

總結(jié)

通常，優(yōu)點(diǎn)大于缺點(diǎn)。我原本想進(jìn)行類(lèi)似下圖的重新設(shè)計(jì)。我合并了右側(cè)的兩個(gè)圖像空間，并將其替換為文本版本中的熱門(mén)文章。設(shè)計(jì)發(fā)現(xiàn)空間太小，文章標(biāo)題容易斷線。而“Carousel””與“活動(dòng)推薦”之間的兩張大圖片，也會(huì)造成視覺(jué)上的差異和不適。最后放棄重新設(shè)計(jì)。

總結(jié)

主頁(yè)的整體布局合理，主要體現(xiàn)在內(nèi)容的比例和分布以及推廣上。

內(nèi)容導(dǎo)航欄不合理，導(dǎo)航分類(lèi)沒(méi)有邏輯，可以組合和優(yōu)化。

內(nèi)容區(qū)域插入“知識(shí)主題”布局不合理，可以刪除，并以文章源的形式反映在文章列表中。

問(wèn)答清單是不合理的。刪除不太有意義的答案用戶(hù)顯示，增加常用答案，并反映“我的訂閱”。

學(xué)習(xí)主題排序可以根據(jù)新手學(xué)習(xí)的一般順序進(jìn)行優(yōu)化，以提高主題的專(zhuān)業(yè)性;提供邏輯，方便用戶(hù)查找定位。

旋轉(zhuǎn)木馬的推薦區(qū)域的布局具有優(yōu)點(diǎn)和缺點(diǎn)?？傮w優(yōu)勢(shì)超過(guò)了缺點(diǎn)，預(yù)計(jì)沒(méi)有更好的計(jì)劃。

如果有問(wèn)題，請(qǐng)糾正我。

本文最初由@蔻三發(fā)表。未經(jīng)許可，禁止復(fù)制。

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

« 錨定文本有什么幫助優(yōu)化網(wǎng)站的SEO？ | 如何利用抖動(dòng)聲短片視頻賣(mài)茶葉網(wǎng)的銷(xiāo)售方法 »