產(chǎn)品首頁(yè)設(shè)計(jì)10步走

作者： 點(diǎn)擊量： 2016-01-06 13:39:18

無(wú)論是PC端還是移動(dòng)端都會(huì)有首頁(yè)，但是后臺(tái)往往是不不需要的首頁(yè)的。為什么？因?yàn)榍岸嗣鎸?duì)的是不了解你的用戶，所以需要首頁(yè)把你最想告訴的用戶的東西給展示出來(lái)。而后臺(tái)不同，使用的人本身就是對(duì)你的平臺(tái)了解。即使是第三方服務(wù)的后臺(tái)，也是信任你才使用的平臺(tái)。所以前端偏重展示和簡(jiǎn)潔為主，后臺(tái)偏重邏輯和使用度。當(dāng)你負(fù)責(zé)一個(gè)產(chǎn)品線的時(shí)候，做前端頁(yè)面更注重的是UI設(shè)計(jì)的排版和布局，前端工程師切圖和炫酷的效果；而后臺(tái)頁(yè)面更注重后臺(tái)工程師的邏輯、數(shù)據(jù)調(diào)用。

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

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

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

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

首次進(jìn)入首頁(yè)看見(jiàn)的所有產(chǎn)品和服務(wù)的大類目。這些是我需要的嗎？
然后開(kāi)始瀏覽首頁(yè)下滑，找到買這個(gè)服務(wù)和商品信任的理由和價(jià)格是不是優(yōu)惠。
整體布局思考從WHO，WHAT，WHY，HOW的層面進(jìn)行分解，簡(jiǎn)單說(shuō)就是3W1H法則。

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

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

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

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

流量品的需求路徑。
流量品的路徑周邊盈利品類目展示。
盈利品的需求路徑。
確認(rèn)這些后，不僅業(yè)務(wù)也是從用戶需求出發(fā)了；相近的需求安排，可以不按常規(guī)安排也是了解用戶需求很重要的。

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

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

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

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

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

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

比如：

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

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

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

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

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

五、布局排版簡(jiǎn)潔

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

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

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

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

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

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

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

文字從用戶心理角度去思考，因?yàn)槲淖指哂邢胂罂臻g，所以適合用戶心理角度思考。
圖片從業(yè)務(wù)展示角度思考。圖片設(shè)計(jì)從業(yè)務(wù)角度思考，用戶喜歡更專業(yè)的，因?yàn)樗麄兿嘈艑I(yè)就是放心的商品和服務(wù)。
而在運(yùn)營(yíng)模塊和banner，主題活動(dòng)展示就不同了，需要一些炫酷的設(shè)計(jì)和復(fù)雜展示，這里一定是和web端首頁(yè)設(shè)計(jì)不同的，它們需要炫酷的設(shè)計(jì)吸引用戶，不需要迭代。

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

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

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

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

八、站外引流思考

web端與M端最大不同點(diǎn)就是SEO需要在web端進(jìn)行展示，因?yàn)槭醉?yè)大部分都是作為落地頁(yè)進(jìn)行展示。首頁(yè)是最能解釋清楚我們的產(chǎn)品是做什么的頁(yè)面，也是用戶體驗(yàn)和打開(kāi)幾率最高的頁(yè)面。

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

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

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

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

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

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

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

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

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

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

總結(jié)：

產(chǎn)品整體布局：3W1H法則。
用戶需求確認(rèn)：流量品和盈利品的思考。
競(jìng)品設(shè)計(jì)分析：不同點(diǎn)是不是適用于我們產(chǎn)品。
功能模塊確認(rèn)：功能模塊的合理性。
布局排版簡(jiǎn)潔：簡(jiǎn)潔并不是簡(jiǎn)單。
交互設(shè)計(jì)考量：文字從用戶角度，圖片從業(yè)務(wù)角度。
內(nèi)容容易理解：重要內(nèi)容的突出。
站外引流思考：完善的SEO落地頁(yè)。
整體邏輯架構(gòu)：頁(yè)面的關(guān)聯(lián)性。
總結(jié)梳理定稿：思維維度展開(kāi)的再回收。
web端首頁(yè)設(shè)計(jì)已經(jīng)進(jìn)入了一個(gè)全新的時(shí)代，我們的思維要更為符合時(shí)代潮流才不能被淘汰。web端設(shè)計(jì)也讓在移動(dòng)端產(chǎn)品設(shè)計(jì)上留下不少思考點(diǎn)。二者用戶承接性、業(yè)務(wù)區(qū)別性、展示不同的簡(jiǎn)潔性…產(chǎn)品設(shè)計(jì)思考永遠(yuǎn)不會(huì)停止。

選購(gòu)指南:
本公司主要為山東地區(qū)的商業(yè)、企業(yè)單位及個(gè)人提供各類定制開(kāi)發(fā)服務(wù)，如：軟件定制開(kāi)發(fā)、APP定制開(kāi)發(fā)、微信定制開(kāi)發(fā)以及P5業(yè)務(wù)支撐平臺(tái)等整體的信息化解決方案，能夠滿足各種大中小型商業(yè)、企業(yè)及個(gè)人的需要。

如需了解本公司的詳細(xì)業(yè)務(wù)情況，敬請(qǐng)?jiān)L問(wèn)本公司官方網(wǎng)站：http://www.lynnobermoeller.com。

公司名稱：山東森普信息技術(shù)有限公司

公司地址：濟(jì)南市高新區(qū)齊魯軟件園C座3樓

公司網(wǎng)址：http://www.lynnobermoeller.com

業(yè)務(wù)ＱＱ：176099777

聯(lián)系電話：400-677-0389