網(wǎng)站的首頁(yè)是一個(gè)讓人頭疼的東西。有時(shí)它看起來(lái)很簡(jiǎn)單：首頁(yè)就是網(wǎng)站內(nèi)容的整合，一個(gè)產(chǎn)品經(jīng)理隨便從網(wǎng)站里拿點(diǎn)東西出來(lái)，就能堆出一個(gè)看上去靠譜的首頁(yè)。也正因此，它往往非常麻煩：很多人都可以發(fā)表自己的見解，而這時(shí)交互設(shè)計(jì)師的一些手段（比如流程圖、概念圖等），在面對(duì)首頁(yè)設(shè)計(jì)時(shí)也難派上用場(chǎng)，以致最終陷入到無(wú)盡的爭(zhēng)執(zhí)中。所以，本文希望尋找一些實(shí)用的方法一定程度上幫助設(shè)計(jì)師來(lái)決策，也讓大家在爭(zhēng)執(zhí)過(guò)程也有些共同的依據(jù)。

首頁(yè)之所以難設(shè)計(jì)，我認(rèn)為因?yàn)樗粌H要解決用戶“能做”的問(wèn)題，更多時(shí)候要解決用戶“想做”的問(wèn)題。“能做”對(duì)應(yīng)的是可用性，相對(duì)容易解決，專家評(píng)估、可用性測(cè)試可以很有效地幫助設(shè)計(jì)師；而“想做”對(duì)應(yīng)的是PET(Persuation,Emotion,Trust，說(shuō)服、情感、信任)，可能涉及到心理學(xué)，人種學(xué)，營(yíng)銷學(xué)等陌生的知識(shí)，交互設(shè)計(jì)師在這方面就不再是專家了，但一些經(jīng)驗(yàn)和方法仍可以有效，下文中會(huì)講到。

將可用性和PET分開考慮

瀏覽首頁(yè)的用戶基本分為兩種：有目標(biāo)的用戶和無(wú)目標(biāo)的用戶。Alan Cooper的“目標(biāo)導(dǎo)向”理念告訴我們，用戶的目標(biāo)驅(qū)動(dòng)任務(wù)，有目標(biāo)的用戶直接開始“任務(wù)”，我們只要為他們解決可用性的問(wèn)題。而那些無(wú)目標(biāo)的用戶，他們只是隨便逛逛，需要首頁(yè)的PET足夠好，將此類用戶“轉(zhuǎn)化”成有目標(biāo)的用戶，盡量避免他們“流失”。

所以我將瀏覽首頁(yè)的用戶分為這兩類，針對(duì)兩類用戶不同的特點(diǎn)來(lái)進(jìn)行設(shè)計(jì)，會(huì)讓我們的思路變得清晰。

一些現(xiàn)實(shí)例子

谷歌首頁(yè)

對(duì)于搜索型產(chǎn)品，所有用戶都是有明確目標(biāo)的，即便首頁(yè)是多么“死板”，因?yàn)闆](méi)有任何干擾，用戶都可以迅速進(jìn)入自己的任務(wù)。所以谷歌首頁(yè)沒(méi)有任何PET的內(nèi)容

趕集網(wǎng)(或58同城)

這類網(wǎng)站的設(shè)計(jì)也完全服務(wù)于“有目標(biāo)的用戶”，把“無(wú)目標(biāo)用戶”無(wú)情地拋棄，本人覺(jué)得這種設(shè)計(jì)并不是最高效的方式，因?yàn)楫吘估速M(fèi)掉了大量用戶。

京東商城

對(duì)于電子商務(wù)網(wǎng)站，存在兩種典型的用戶情景：

1. 理性消費(fèi)者，想要找的東西很明確，或者挑選的范圍很小，這就要求首頁(yè)有很好的可用性，幫助他找到商品，如下圖中的藍(lán)色部分就是服務(wù)這類用戶。
2. 沖動(dòng)型消費(fèi)者，并不知道自己需要什么，只是隨便看看有沒(méi)有合適的或促銷的東西可以買，這就要求首頁(yè)有很好的PET，吸引用戶點(diǎn)擊，如下圖中的紅色部分就是服務(wù)于這類用戶。

倘若京東商城不考慮無(wú)目標(biāo)的用戶，也許首頁(yè)就會(huì)長(zhǎng)成下面這樣：

對(duì)于想找商品的用戶，也許更方便直觀了，而對(duì)于沒(méi)有目標(biāo)的用戶，就只能離開了。

人人網(wǎng)

對(duì)SNS類網(wǎng)站來(lái)說(shuō)，用戶大多數(shù)時(shí)間是在“隨便看看大家都在干什么”，當(dāng)然也有時(shí)，用戶來(lái)到首頁(yè)進(jìn)行發(fā)表日志，上傳照片等目標(biāo)明確的操作。

討論：“隨便看看”是不是一種用戶目標(biāo)？

我覺(jué)得不是，“隨便看看”不能直接驅(qū)動(dòng)任務(wù)，故不能用來(lái)測(cè)試產(chǎn)品可用性；在可用性測(cè)試中的任務(wù)設(shè)計(jì)時(shí)，隨便看看不能作為任務(wù)。“隨便看看”的過(guò)程中，用戶決定要做某件事了，這才是用戶目標(biāo)。

澄清一些可能存在的誤解

服務(wù)無(wú)目標(biāo)的用戶的模塊（如上面例子中的紅色區(qū)域），并不是說(shuō)不需要可用性，只是在設(shè)計(jì)的難度上，要把PET做好更難更需要思考，而可用性要求較容易滿足。反之亦然。

比如京東商城中的促銷模塊設(shè)計(jì)，是很典型的服務(wù)于無(wú)目標(biāo)用戶的模塊，PET要求能表現(xiàn)產(chǎn)品質(zhì)量好，價(jià)格便宜，買的人多，存貨不多等等難以表現(xiàn)的信息；而可用性只要求商品易瀏覽，可點(diǎn)擊等，任何設(shè)計(jì)者都不會(huì)出錯(cuò)。

首頁(yè)設(shè)計(jì)中如何協(xié)調(diào)可用性和PET

1. 在設(shè)計(jì)之前，調(diào)查分析網(wǎng)站用戶，是“有目標(biāo)”的多，還是“無(wú)目標(biāo)”的多，以確定頁(yè)面上兩類模塊的比例。
2. 一般網(wǎng)站同時(shí)兼顧兩種用戶。但“可用性“和“PET”這兩點(diǎn)，存在天然矛盾，前者要求頁(yè)面清晰，而從后者的角度來(lái)說(shuō)，清晰意味著死板，后者要求頁(yè)面豐富，而從前者的角度來(lái)說(shuō)，豐富意味著雜亂。故在設(shè)計(jì)時(shí)要注意權(quán)衡。
3. 為解決上述矛盾，那就要求“可用性模塊”和“PET模塊”要明確區(qū)分，可以識(shí)別，不能相互摻雜。讓兩類用戶能第一時(shí)間關(guān)注到需要看的部分。
4. 可用性是基礎(chǔ)，一定要先做好，PET是更高要求，屬于上層建筑，切不可為上層建筑放棄基礎(chǔ)。

設(shè)計(jì)首頁(yè)的可用性

1. 應(yīng)該尊重習(xí)慣用法的時(shí)候，不要擅自創(chuàng)新，如采用用戶習(xí)慣的網(wǎng)站頭，包括主導(dǎo)航，全局導(dǎo)航，搜索，LOGO。如下圖。
2. 若有更多導(dǎo)航–如電子商務(wù)網(wǎng)站的商品分類–須在第一屏內(nèi)出現(xiàn)，突出且易識(shí)別。導(dǎo)航中的信息架構(gòu)，在需要時(shí)可用卡片分類法對(duì)導(dǎo)航內(nèi)容進(jìn)行分類。易迅網(wǎng)的商品分類導(dǎo)航，在左邊第一屏最顯眼處。
3. 首頁(yè)整體布局規(guī)矩，使用網(wǎng)頁(yè)柵格系統(tǒng)設(shè)計(jì)頁(yè)面，允許頁(yè)面有合理留白。、
4. 盡量保持頁(yè)面架構(gòu)簡(jiǎn)單，最好不出現(xiàn)兩列和三列混排的設(shè)計(jì)。
5. 首頁(yè)的模塊中使用盡可能簡(jiǎn)單的列表，簡(jiǎn)單列表更容易被理解和讀懂，且設(shè)計(jì)運(yùn)營(yíng)開發(fā)成本低。當(dāng)然，“非對(duì)稱列表”也有優(yōu)勢(shì)，見下圖，設(shè)計(jì)師應(yīng)該根據(jù)用戶類型和設(shè)計(jì)目標(biāo)來(lái)靈活運(yùn)用。

設(shè)計(jì)首頁(yè)的PET

1. 清晰表現(xiàn)品牌和產(chǎn)品服務(wù)類型。這首先實(shí)現(xiàn)PET中的Trust，只有用戶第一時(shí)間了解網(wǎng)站品牌和服務(wù)(特別是一些大品牌)，才能 夠立即建立用戶的信任。但這個(gè)實(shí)踐起來(lái)卻相當(dāng)有難度，特別是一些全新的服務(wù)，篇幅小了說(shuō)不清，篇幅大了用戶直接略過(guò)。這里只能介紹一種方法來(lái)驗(yàn)證此目的有沒(méi)有達(dá)到：

5秒測(cè)試：

給一個(gè)新用戶（目標(biāo)用戶）看首頁(yè)設(shè)計(jì)5秒，讓它說(shuō)出：

這是什么網(wǎng)站？

這個(gè)網(wǎng)站提供什么服務(wù)？

首先吸引你的是什么內(nèi)容？

這個(gè)網(wǎng)站和類似競(jìng)爭(zhēng)對(duì)手有什么不一樣嗎？

你對(duì)這個(gè)網(wǎng)站和它的服務(wù)有沒(méi)有興趣？

然后讓用戶仔細(xì)瀏覽該首頁(yè)，再糾正上面的答案。

2. 使用吸引人的圖片和標(biāo)題。說(shuō)白了就是標(biāo)題黨，雖然這招定被廣大設(shè)計(jì)師唾棄，但它的效果絕對(duì)不容小覷。

3. 使用非對(duì)稱的設(shè)計(jì)，有主有次，展現(xiàn)豐富性。但注意，非對(duì)稱設(shè)計(jì)會(huì)增加認(rèn)知負(fù)擔(dān)，降低可用性。見上文。

4. 利用好數(shù)字來(lái)說(shuō)服用戶，因?yàn)閿?shù)字“不會(huì)說(shuō)慌”。

4.1 電子商務(wù)網(wǎng)站中，限量限時(shí)促銷。如下圖中的易迅網(wǎng)首頁(yè)的截圖。

4.2  電子商務(wù)網(wǎng)站中，突出價(jià)格和價(jià)格對(duì)比。如下圖中團(tuán)購(gòu)網(wǎng)站的首頁(yè)。

4.3  用數(shù)字來(lái)突顯“豐富的概念”。如下圖是網(wǎng)易愛拍首頁(yè)的設(shè)計(jì)。

5.  在首頁(yè)顯示其他用戶的活動(dòng)來(lái)說(shuō)服用戶(其他用戶購(gòu)買記錄，評(píng)價(jià)，曬單等)。調(diào)查顯示，讓用戶信任一個(gè)站點(diǎn)的最有效途徑，就是在線其他消費(fèi)者的意見。

6.  另外，視覺(jué)設(shè)計(jì)上要符合產(chǎn)品和服務(wù)的定位，在情感上與用戶拉近距離。

7.  頁(yè)面更新頻率，用戶需要適時(shí)的刺激。太頻繁的更新，不僅浪費(fèi)資源和成本，用戶也要不斷適應(yīng)，增加學(xué)習(xí)成本；而長(zhǎng)時(shí)間不更新，也會(huì)讓用戶慢慢失去粘性，轉(zhuǎn)化率降低。