起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識產品設計10步走，設計Perfect的產品首頁
無論是PC端還是移動端都會有首頁，但是后臺往往是不不需要的首頁的。為什么？因為前端面對的是不了解你的用戶，所以需要首頁把你最想告訴的用戶的東西給展示出來。而后臺不同，使用的人本身就是對你的平臺了解。即使是第三方服務的后臺，也是信任你才使用的平臺。所以前端偏重展示和簡潔為主，后臺偏重邏輯和使用度。當你負責一個產品線的時候，做前端頁面更注重的是UI設計的排版和布局，前端工程師切圖和炫酷的效果；而后臺頁面更注重后臺工程師的邏輯、數據調用。
而web端頁面展示復雜，我們以用戶體驗五要素（戰略層、范圍層、結構層、框架層、表現層）和簡約至上四策略（刪除、組織、影藏、轉移）作為產品設計指導思想。設計的web首頁的時候，我們要展示簡潔大方也要思考周密，但有時候真的會有遺漏怎么辦？那我們可以從以下十步去完成設計，不會有遺漏。
一、產品整體布局
整體布局顯示從我們的業務出發：
- 首先思考我們的用戶是誰？進入首頁，首屏展示一定是要告訴用戶我們是干什么的？那些首頁分類的導航起到就是告訴用戶我們是干什么的。
- 然后從第二屏開始，告訴用戶為什么要選擇我們？然后告訴用戶我們是怎么解決這些問題的。
從用戶角度出發：
- 首次進入首頁看見的所有產品和服務的大類目。這些是我需要的嗎？
- 然后開始瀏覽首頁下滑，找到買這個服務和商品信任的理由和價格是不是優惠。
整體布局思考從WHO，WHAT，WHY，HOW的層面進行分解，簡單說就是3W1H法則。
二、用戶需求確認
特別電商和O2O產品在web端首頁的商品分類很重要；在web端首頁展示產品分類夠不夠直達用戶心理很重要；好的產品分類可以讓用戶導流。所以設計產品分類時，一定是按合理的用戶認知進行排列。這里分類就牽涉到用戶需求。
我們在確認了用戶畫像后，建立了用戶用例。這個時候用戶需求已經確認；比如用戶用例把用戶整體購買流程和順序完全模擬出來。
怎么確認這些需求？
- 流量品的需求路徑。
- 流量品的路徑周邊盈利品類目展示。
- 盈利品的需求路徑。
確認這些后，不僅業務也是從用戶需求出發了；相近的需求安排，可以不按常規安排也是了解用戶需求很重要的。
從點擊分類，進入列表頁，再進入商品詳情頁，再點擊購買。這一套需求路徑需要站在用戶角度，我們往往太局限于業務角度。
三、競品設計分析
競品分析有時候在我們看來可能是抄襲；但是借用喬布斯話說，這就是借鑒了。但是競品分析依舊重要，我們必須時刻關注對手的動向。
在頁面布局時，其實你會發現產品思考點越來越重合，因為業務重合性的關系。設計層面卻是不同的，是基于自身業務展示的。
這里需要思考的是，對手上的這個塊頁面需求點是哪塊？對手又上了哪些業務？他的下一階段產品目標是什么？然后再思考我們是不是可以上這個頁面？
最后，在產品設計可以采取不一樣的展示風格，不一樣的展示風格基于用戶層面去思考。哪怕小小的設計展示不同，也是打動用戶的關鍵。
比如：
- web端你鼠標下滑動時，你的頂部工具欄是吸頂式導航，就能很好吸引用戶注冊你網站。
- 如果在閱讀網頁時，你加入了小小返回首頁功能，用戶就更能進入沉浸式閱讀。
- 在移動端設計時，哪怕你返回有一個向右滑動手勢比沒有好很多，技術上只是多了十幾行代碼。
四、功能模塊確認
從3W1H和競品分析確認后，我們功能模式其實大致都可以確認：首屏的全部分類展示和banner圖展示；頂部的吸頂式工具欄；第二屏展示熱門服務，熱門服務的吸引點在于告訴我們產品的優勢；展示運營活動和信任的用戶展示。后面是SEO頁面和常用頁面底部。每個功能模塊確認都是從產品設計和業務邏輯進行支撐，最后通過QA的測試用例進行模擬測試。
功能模塊確認需求注意的是：
- 展示的功能是否直觀。
- 展示的功能是不是表達清楚，用戶了解。
- 展示的功能是不是容易操作理解。
- 展示的功能上下銜接是不是合理。
五、布局排版簡潔
web端布局排版越來越簡潔了，從90年代那種彈窗漫天飛，到00年代頁面布局小而雜亂。現在web端頁面展示也繼承了移動端一樣的特性，簡潔大方。
web端頁面設計也經歷了3個時代變更。在排版合理基礎上，簡潔并不是意味著簡單。我們要避免簡潔并不僅是簡單的誤區，而是要用簡單的語句和圖片解釋清楚我們是干什么的。
頁面整體呈現出統一性。上下視覺保持一致性，不要使得頁面分散用戶的注意力；每個往下滑動的頁面都是需要層層吸引用戶的。
文字圖片整體簡潔和色調一致性容易讓用戶進入沉浸式瀏覽和思維中。
六、交互設計考量
交互設計上考量一定是簡單交互為主，交互設計邏輯性是關鍵。如果有位很好的交互設計師，他一定幫助你從用戶心理進行設計。當然我們產品經理也一定是這方面的高手。
《烏合之眾》和《引爆點》是二本不錯從心理層面解析用戶的書籍，交互從展示頁面到點擊后展示頁面都是層層相扣的。在首頁設計上，一定是簡潔和吸引用戶點擊下去的想法，文字和圖片是吸引的關鍵點。
- 文字從用戶心理角度去思考，因為文字更具有想象空間，所以適合用戶心理角度思考。
- 圖片從業務展示角度思考。圖片設計從業務角度思考，用戶喜歡更專業的，因為他們相信專業就是放心的商品和服務。
而在運營模塊和banner，主題活動展示就不同了，需要一些炫酷的設計和復雜展示，這里一定是和web端首頁設計不同的，它們需要炫酷的設計吸引用戶，不需要迭代。
七、內容容易理解
產品設計上，我們往往忽視文字展示重要性。其實哪怕在五年后的產品，文字依舊是很重要的單位。無論是圖片還是視頻都是基于文字的。
如何做到內容的可理解性呢？
- 用戶理解的語句。比如大量網絡流行語和二次元年輕化的語句。
- 內容閱讀無重合的獨特性。比如你這里有，我這里也有。但是我們內容解釋更簡單短小精悍，更容易理解，那么用戶就來我們這里了。
- 最重要的文字進行重點突出。用戶在碎片化場景下閱讀內容越來越多，把重點展示出來，用戶就可以快速了解，可以快速做后續用戶行為。
八、站外引流思考
web端與M端最大不同點就是SEO需要在web端進行展示，因為首頁大部分都是作為落地頁進行展示。首頁是最能解釋清楚我們的產品是做什么的頁面，也是用戶體驗和打開幾率最高的頁面。
SEO我們需要建立相關鏈接、相關服務、相關服務的問題解答、網站地圖、相關服務的分支：城市、服務商入口、網站自身的招聘、關于我們都是SEO建立關鍵點。
然后思考站外每一個流量入口落地頁在哪里。需要多少關鍵詞落地在首頁的。
每一個站外進來的用戶，都是不一樣的；針對不一樣的用戶，我們盡量展示他們需要的內容。在數據PV和UV統計下，根據二八原則，如果能留住那80%的用戶進入沉浸式閱讀已經不容易了。
九、整體邏輯架構
web端首頁頁面前后邏輯是否可以讓用戶進行沉浸式瀏覽時關鍵，哪怕是一個小小的功能和不是主打的商品和服務，只要能打動用戶就是成功的。做好更個數據埋點分析，更好支撐我們的產品迭代和更好的升級。
整體邏輯就是每一個點擊后的頁面都是符合用戶心理和正常邏輯的，后續的每一個列表頁和商品詳情頁都是可以進行相互關聯的，在用戶不知不覺中就進入沉浸式瀏覽的狀態了。
- 做到頁面關聯性強。
- 頁面展示結構合理。
- 整體框架和邏輯符合用戶瀏覽角度。
十、總結梳理定稿
最后把所有的業務邏輯和用戶行為進行總結展開和思維維度回收。留下思考中合理的，和現階段先完成的需求的，建立需求管理池，安排優先級。然后把總結核心的需求功能的梳理和思考，把所有步驟進行思維回收總結。
接下去就去找技術吧，進行需求評審，開發周期。然后進行項目排期。
總結：
- 產品整體布局：3W1H法則。
- 用戶需求確認：流量品和盈利品的思考。
- 競品設計分析：不同點是不是適用于我們產品。
- 功能模塊確認：功能模塊的合理性。
- 布局排版簡潔：簡潔并不是簡單。
- 交互設計考量：文字從用戶角度，圖片從業務角度。
- 內容容易理解：重要內容的突出。
- 站外引流思考：完善的SEO落地頁。
- 整體邏輯架構：頁面的關聯性。
- 總結梳理定稿：思維維度展開的再回收。
web端首頁設計已經進入了一個全新的時代，我們的思維要更為符合時代潮流才不能被淘汰。web端設計也讓在移動端產品設計上留下不少思考點。二者用戶承接性、業務區別性、展示不同的簡潔性…產品設計思考永遠不會停止。
本文由 @owen1413?原創發布于人人都是產品經理?，未經許可，禁止轉載。
?? ?? ?? ??