無論是PC端還是移動端都會有首頁，但是后臺往往是不不需要的首頁的。為什么？因?yàn)榍岸嗣鎸Φ氖遣涣私饽愕挠脩簦孕枰醉摪涯阕钕敫嬖V的用戶的東西給展示出來。而后臺不同，使用的人本身就是對你的平臺了解。即使是第三方服務(wù)的后臺，也是信任你才使用的平臺。所以前端偏重展示和簡潔為主，后臺偏重邏輯和使用度。當(dāng)你負(fù)責(zé)一個(gè)產(chǎn)品線的時(shí)候，做前端頁面更注重的是UI設(shè)計(jì)的排版和布局，前端工程師切圖和炫酷的效果；而后臺頁面更注重后臺工程師的邏輯、數(shù)據(jù)調(diào)用。

而web端頁面展示復(fù)雜，我們以用戶體驗(yàn)五要素（戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層）和簡約至上四策略（刪除、組織、影藏、轉(zhuǎn)移）作為產(chǎn)品設(shè)計(jì)指導(dǎo)思想。設(shè)計(jì)的web首頁的時(shí)候，我們要展示簡潔大方也要思考周密，但有時(shí)候真的會有遺漏怎么辦？那我們可以從以下十步去完成設(shè)計(jì)，不會有遺漏。

一、產(chǎn)品整體布局

整體布局顯示從我們的業(yè)務(wù)出發(fā)：

• 首先思考我們的用戶是誰？進(jìn)入首頁，首屏展示一定是要告訴用戶我們是干什么的？那些首頁分類的導(dǎo)航起到就是告訴用戶我們是干什么的。
• 然后從第二屏開始，告訴用戶為什么要選擇我們？然后告訴用戶我們是怎么解決這些問題的。

從用戶角度出發(fā)：

• 首次進(jìn)入首頁看見的所有產(chǎn)品和服務(wù)的大類目。這些是我需要的嗎？
• 然后開始瀏覽首頁下滑，找到買這個(gè)服務(wù)和商品信任的理由和價(jià)格是不是優(yōu)惠。

整體布局思考從WHO，WHAT，WHY，HOW的層面進(jìn)行分解，簡單說就是3W1H法則。

二、用戶需求確認(rèn)

特別電商和O2O產(chǎn)品在web端首頁的商品分類很重要；在web端首頁展示產(chǎn)品分類夠不夠直達(dá)用戶心理很重要；好的產(chǎn)品分類可以讓用戶導(dǎo)流。所以設(shè)計(jì)產(chǎn)品分類時(shí)，一定是按合理的用戶認(rèn)知進(jìn)行排列。這里分類就牽涉到用戶需求。

我們在確認(rèn)了用戶畫像后，建立了用戶用例。這個(gè)時(shí)候用戶需求已經(jīng)確認(rèn)；比如用戶用例把用戶整體購買流程和順序完全模擬出來。

怎么確認(rèn)這些需求？

1. 流量品的需求路徑。
2. 流量品的路徑周邊盈利品類目展示。
3. 盈利品的需求路徑。

確認(rèn)這些后，不僅業(yè)務(wù)也是從用戶需求出發(fā)了；相近的需求安排，可以不按常規(guī)安排也是了解用戶需求很重要的。

從點(diǎn)擊分類，進(jìn)入列表頁，再進(jìn)入商品詳情頁，再點(diǎn)擊購買。這一套需求路徑需要站在用戶角度，我們往往太局限于業(yè)務(wù)角度。

三、競品設(shè)計(jì)分析

競品分析有時(shí)候在我們看來可能是抄襲；但是借用喬布斯話說，這就是借鑒了。但是競品分析依舊重要，我們必須時(shí)刻關(guān)注對手的動向。

在頁面布局時(shí)，其實(shí)你會發(fā)現(xiàn)產(chǎn)品思考點(diǎn)越來越重合，因?yàn)闃I(yè)務(wù)重合性的關(guān)系。設(shè)計(jì)層面卻是不同的，是基于自身業(yè)務(wù)展示的。

這里需要思考的是，對手上的這個(gè)塊頁面需求點(diǎn)是哪塊？對手又上了哪些業(yè)務(wù)？他的下一階段產(chǎn)品目標(biāo)是什么？然后再思考我們是不是可以上這個(gè)頁面？

最后，在產(chǎn)品設(shè)計(jì)可以采取不一樣的展示風(fēng)格，不一樣的展示風(fēng)格基于用戶層面去思考。哪怕小小的設(shè)計(jì)展示不同，也是打動用戶的關(guān)鍵。

比如：

• web端你鼠標(biāo)下滑動時(shí)，你的頂部工具欄是吸頂式導(dǎo)航，就能很好吸引用戶注冊你網(wǎng)站。
• 如果在閱讀網(wǎng)頁時(shí)，你加入了小小返回首頁功能，用戶就更能進(jìn)入沉浸式閱讀。
• 在移動端設(shè)計(jì)時(shí)，哪怕你返回有一個(gè)向右滑動手勢比沒有好很多，技術(shù)上只是多了十幾行代碼。

四、功能模塊確認(rèn)

從3W1H和競品分析確認(rèn)后，我們功能模式其實(shí)大致都可以確認(rèn)：首屏的全部分類展示和banner圖展示；頂部的吸頂式工具欄；第二屏展示熱門服務(wù)，熱門服務(wù)的吸引點(diǎn)在于告訴我們產(chǎn)品的優(yōu)勢；展示運(yùn)營活動和信任的用戶展示。后面是SEO頁面和常用頁面底部。每個(gè)功能模塊確認(rèn)都是從產(chǎn)品設(shè)計(jì)和業(yè)務(wù)邏輯進(jìn)行支撐，最后通過QA的測試用例進(jìn)行模擬測試。

功能模塊確認(rèn)需求注意的是：

1. 展示的功能是否直觀。
2. 展示的功能是不是表達(dá)清楚，用戶了解。
3. 展示的功能是不是容易操作理解。
4. 展示的功能上下銜接是不是合理。

五、布局排版簡潔

web端布局排版越來越簡潔了，從90年代那種彈窗漫天飛，到00年代頁面布局小而雜亂。現(xiàn)在web端頁面展示也繼承了移動端一樣的特性，簡潔大方。

web端頁面設(shè)計(jì)也經(jīng)歷了3個(gè)時(shí)代變更。在排版合理基礎(chǔ)上，簡潔并不是意味著簡單。我們要避免簡潔并不僅是簡單的誤區(qū)，而是要用簡單的語句和圖片解釋清楚我們是干什么的。

頁面整體呈現(xiàn)出統(tǒng)一性。上下視覺保持一致性，不要使得頁面分散用戶的注意力；每個(gè)往下滑動的頁面都是需要層層吸引用戶的。

文字圖片整體簡潔和色調(diào)一致性容易讓用戶進(jìn)入沉浸式瀏覽和思維中。

六、交互設(shè)計(jì)考量

交互設(shè)計(jì)上考量一定是簡單交互為主，交互設(shè)計(jì)邏輯性是關(guān)鍵。如果有位很好的交互設(shè)計(jì)師，他一定幫助你從用戶心理進(jìn)行設(shè)計(jì)。當(dāng)然我們產(chǎn)品經(jīng)理也一定是這方面的高手。

《烏合之眾》和《引爆點(diǎn)》是二本不錯(cuò)從心理層面解析用戶的書籍，交互從展示頁面到點(diǎn)擊后展示頁面都是層層相扣的。在首頁設(shè)計(jì)上，一定是簡潔和吸引用戶點(diǎn)擊下去的想法，文字和圖片是吸引的關(guān)鍵點(diǎn)。

• 文字從用戶心理角度去思考，因?yàn)槲淖指哂邢胂罂臻g，所以適合用戶心理角度思考。
• 圖片從業(yè)務(wù)展示角度思考。圖片設(shè)計(jì)從業(yè)務(wù)角度思考，用戶喜歡更專業(yè)的，因?yàn)樗麄兿嘈艑I(yè)就是放心的商品和服務(wù)。

而在運(yùn)營模塊和banner，主題活動展示就不同了，需要一些炫酷的設(shè)計(jì)和復(fù)雜展示，這里一定是和web端首頁設(shè)計(jì)不同的，它們需要炫酷的設(shè)計(jì)吸引用戶，不需要迭代。

七、內(nèi)容容易理解

產(chǎn)品設(shè)計(jì)上，我們往往忽視文字展示重要性。其實(shí)哪怕在五年后的產(chǎn)品，文字依舊是很重要的單位。無論是圖片還是視頻都是基于文字的。

如何做到內(nèi)容的可理解性呢？

1. 用戶理解的語句。比如大量網(wǎng)絡(luò)流行語和二次元年輕化的語句。
2. 內(nèi)容閱讀無重合的獨(dú)特性。比如你這里有，我這里也有。但是我們內(nèi)容解釋更簡單短小精悍，更容易理解，那么用戶就來我們這里了。
3. 最重要的文字進(jìn)行重點(diǎn)突出。用戶在碎片化場景下閱讀內(nèi)容越來越多，把重點(diǎn)展示出來，用戶就可以快速了解，可以快速做后續(xù)用戶行為。

八、站外引流思考

web端與M端最大不同點(diǎn)就是SEO需要在web端進(jìn)行展示，因?yàn)槭醉摯蟛糠侄际亲鳛槁涞仨撨M(jìn)行展示。首頁是最能解釋清楚我們的產(chǎn)品是做什么的頁面，也是用戶體驗(yàn)和打開幾率最高的頁面。

SEO我們需要建立相關(guān)鏈接、相關(guān)服務(wù)、相關(guān)服務(wù)的問題解答、網(wǎng)站地圖、相關(guān)服務(wù)的分支：城市、服務(wù)商入口、網(wǎng)站自身的招聘、關(guān)于我們都是SEO建立關(guān)鍵點(diǎn)。

然后思考站外每一個(gè)流量入口落地頁在哪里。需要多少關(guān)鍵詞落地在首頁的。

每一個(gè)站外進(jìn)來的用戶，都是不一樣的；針對不一樣的用戶，我們盡量展示他們需要的內(nèi)容。在數(shù)據(jù)PV和UV統(tǒng)計(jì)下，根據(jù)二八原則，如果能留住那80%的用戶進(jìn)入沉浸式閱讀已經(jīng)不容易了。

九、整體邏輯架構(gòu)

web端首頁頁面前后邏輯是否可以讓用戶進(jìn)行沉浸式瀏覽時(shí)關(guān)鍵，哪怕是一個(gè)小小的功能和不是主打的商品和服務(wù)，只要能打動用戶就是成功的。做好更個(gè)數(shù)據(jù)埋點(diǎn)分析，更好支撐我們的產(chǎn)品迭代和更好的升級。

整體邏輯就是每一個(gè)點(diǎn)擊后的頁面都是符合用戶心理和正常邏輯的，后續(xù)的每一個(gè)列表頁和商品詳情頁都是可以進(jìn)行相互關(guān)聯(lián)的，在用戶不知不覺中就進(jìn)入沉浸式瀏覽的狀態(tài)了。

1. 做到頁面關(guān)聯(lián)性強(qiáng)。
2. 頁面展示結(jié)構(gòu)合理。
3. 整體框架和邏輯符合用戶瀏覽角度。

十、總結(jié)梳理定稿

最后把所有的業(yè)務(wù)邏輯和用戶行為進(jìn)行總結(jié)展開和思維維度回收。留下思考中合理的，和現(xiàn)階段先完成的需求的，建立需求管理池，安排優(yōu)先級。然后把總結(jié)核心的需求功能的梳理和思考，把所有步驟進(jìn)行思維回收總結(jié)。

接下去就去找技術(shù)吧，進(jìn)行需求評審，開發(fā)周期。然后進(jìn)行項(xiàng)目排期。

總結(jié)：

1. 產(chǎn)品整體布局：3W1H法則。
2. 用戶需求確認(rèn)：流量品和盈利品的思考。
3. 競品設(shè)計(jì)分析：不同點(diǎn)是不是適用于我們產(chǎn)品。
4. 功能模塊確認(rèn)：功能模塊的合理性。
5. 布局排版簡潔：簡潔并不是簡單。
6. 交互設(shè)計(jì)考量：文字從用戶角度，圖片從業(yè)務(wù)角度。
7. 內(nèi)容容易理解：重要內(nèi)容的突出。
8. 站外引流思考：完善的SEO落地頁。
9. 整體邏輯架構(gòu)：頁面的關(guān)聯(lián)性。
10. 總結(jié)梳理定稿：思維維度展開的再回收。

web端首頁設(shè)計(jì)已經(jīng)進(jìn)入了一個(gè)全新的時(shí)代，我們的思維要更為符合時(shí)代潮流才不能被淘汰。web端設(shè)計(jì)也讓在移動端產(chǎn)品設(shè)計(jì)上留下不少思考點(diǎn)。二者用戶承接性、業(yè)務(wù)區(qū)別性、展示不同的簡潔性…產(chǎn)品設(shè)計(jì)思考永遠(yuǎn)不會停止。

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