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

作者： 點擊量： 2016-01-06 13:39:18

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

比如：

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

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

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

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

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

五、布局排版簡潔

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

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

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

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

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

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

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

文字從用戶心理角度去思考，因為文字更具有想象空間，所以適合用戶心理角度思考。
圖片從業(yè)務(wù)展示角度思考。圖片設(shè)計從業(yè)務(wù)角度思考，用戶喜歡更專業(yè)的，因為他們相信專業(yè)就是放心的商品和服務(wù)。
而在運營模塊和banner，主題活動展示就不同了，需要一些炫酷的設(shè)計和復(fù)雜展示，這里一定是和web端首頁設(shè)計不同的，它們需要炫酷的設(shè)計吸引用戶，不需要迭代。

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

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

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

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

八、站外引流思考

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

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

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

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

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

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

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

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

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

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

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

總結(jié)：

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

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

如需了解本公司的詳細(xì)業(yè)務(wù)情況，敬請訪問本公司官方網(wǎng)站：http://www.motion-stereo.com。

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

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

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

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

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