業(yè)務(wù)人員在推進(jìn)首頁設(shè)計的過程中，需要考慮到實際業(yè)務(wù)場景、目標(biāo)用戶定位等多個方面，那么作為設(shè)計人員，你要怎么權(quán)衡各方面的需求并作出篩選和提煉，以完成首頁設(shè)計的目標(biāo)？本篇文章里，作者便做了復(fù)盤，一起來看一下他的經(jīng)驗總結(jié)。

首頁的內(nèi)容來自于各個業(yè)務(wù)模塊，底層的數(shù)據(jù)或者內(nèi)容已經(jīng)在具體功能頁面實現(xiàn)了，但是首頁不可能呈現(xiàn)所有內(nèi)容，產(chǎn)品經(jīng)理需要根據(jù)產(chǎn)品價值和業(yè)務(wù)場景做出篩選及二次加工提煉。

另外首頁需要根據(jù)不同的客戶群和用戶角色做出針對性的設(shè)計，或者提供定制化功能，由用戶進(jìn)行配置，從而帶來產(chǎn)品價值，提高用戶的效率。

最近剛好完成了一款門戶產(chǎn)品設(shè)計，今天就總結(jié)下首頁的設(shè)計過程。

一、用戶需求與產(chǎn)品定位

這是一款面向多角色用戶的產(chǎn)品，包括需求方、開發(fā)方、運營方。產(chǎn)品主要服務(wù)于需求方和開發(fā)方，實現(xiàn)從數(shù)據(jù)需求到數(shù)據(jù)產(chǎn)品的撮合交易。

需求并不復(fù)雜，需求方負(fù)責(zé)提出數(shù)據(jù)需求，開發(fā)方利用平臺數(shù)據(jù)完成模型開發(fā)，向需求方交付數(shù)據(jù)產(chǎn)品。運營方負(fù)責(zé)需求發(fā)布到產(chǎn)品交付的全過程管理，因此偏向于后臺管理員的角色。除此之外，每種角色還會用一些后臺管理功能，處理與其他角色的協(xié)作任務(wù)。

簡單概括下各類角色的需求：

• 需求方：查看及申請數(shù)據(jù)產(chǎn)品，如果沒有滿足需求的數(shù)據(jù)產(chǎn)品，可以發(fā)布定制化需求。
• 開發(fā)方：查看及承接需求，搜索查看平臺中的數(shù)據(jù)，利用這些數(shù)據(jù)資源完成數(shù)據(jù)產(chǎn)品開發(fā)，最終交付需求方。

明確了用戶需求之后，產(chǎn)品定位就是滿足用戶的數(shù)據(jù)需求，“實現(xiàn)數(shù)據(jù)需求到數(shù)據(jù)產(chǎn)品交付的一站式平臺”。如此以來，產(chǎn)品的內(nèi)容基本也就確認(rèn)了。整個門戶包括首頁、數(shù)據(jù)需求、數(shù)據(jù)資源、數(shù)據(jù)產(chǎn)品4大內(nèi)容頻道。

雖然梳理了不同角色的需求，因為開發(fā)周期比較緊張，首頁內(nèi)容并沒有實現(xiàn)動態(tài)化的設(shè)計。最終在需求方和開發(fā)商之間，我們將需求方作為核心用戶，首要目標(biāo)是實現(xiàn)數(shù)據(jù)需求發(fā)布和數(shù)據(jù)產(chǎn)品的交付。

二、產(chǎn)品設(shè)計方向

對于首頁的產(chǎn)品形態(tài)，我們經(jīng)歷了一個逐漸清晰化的過程。

1）思維發(fā)散

最開始內(nèi)部有各種想法。

有的同事認(rèn)為應(yīng)該參考互聯(lián)網(wǎng)產(chǎn)品首頁，側(cè)重于產(chǎn)品宣傳，包括產(chǎn)品的價值介紹、功能亮點等。

有的同事傾向于業(yè)務(wù)內(nèi)容展示，根據(jù)用戶角色附加功能性操作，幫助用戶完成任務(wù)。

有的同事則認(rèn)為可以依附后臺管理功能，打造成中后臺產(chǎn)品的管理首頁。

每個方向似乎都有一定的道理。通過與業(yè)務(wù)方的不斷溝通，最終確定了設(shè)計方向。

2）收斂確認(rèn)

平臺雖然聚集了不同的用戶角色，但仍然是屬于組織型的內(nèi)部產(chǎn)品，最終目標(biāo)是實現(xiàn)組織間的數(shù)據(jù)共享交換。第一階段的產(chǎn)品目標(biāo)主要是面向一線執(zhí)行人員提供各類服務(wù)。目的是幫助他們更好地完成工作任務(wù)，產(chǎn)品的功能性要求更高，過多的宣傳介紹信息并沒有太大的價值。

互聯(lián)網(wǎng)品宣類官網(wǎng)的設(shè)計形式并不適合當(dāng)前產(chǎn)品的定位。中后臺的管理首頁的形態(tài)，功能性太強，不太適合大量數(shù)據(jù)的信息化展示。最終我們借鑒了互聯(lián)網(wǎng)電商產(chǎn)品的形態(tài)，便于內(nèi)容展示，同時保證產(chǎn)品符合用戶的基本認(rèn)知和使用習(xí)慣。

三、首頁產(chǎn)品設(shè)計

首頁的任務(wù)是面向所有用戶角色，作為信息匯聚展示，實現(xiàn)用戶與內(nèi)容的快速連接。經(jīng)過分析討論和競品分析后，我們將設(shè)計重心放在以下2個維度：

1. 平臺內(nèi)容全方位展示

1）整體框架與布局

整體框架與多數(shù)網(wǎng)站一樣，自上而下分為頭部區(qū)、內(nèi)容區(qū)、底部區(qū)。內(nèi)容區(qū)又劃分為了首屏區(qū)和樓層區(qū)兩大模塊，以用戶需求的優(yōu)先級進(jìn)行內(nèi)容布局。

2）首屏空間設(shè)計

考慮到產(chǎn)品定位以數(shù)據(jù)產(chǎn)品的交易撮合為目標(biāo)，數(shù)據(jù)產(chǎn)品作為平臺核心信息，需要強化曝光。為了更高效地利用屏幕空間，首屏信息采用了緊湊型的設(shè)計方案。劃分為三個功能區(qū)，包含了左側(cè)數(shù)據(jù)產(chǎn)品列表，中間運營搜索區(qū)以及右側(cè)輔助模塊等內(nèi)容。

通過產(chǎn)品列表可以讓用戶了解平臺豐富的數(shù)據(jù)產(chǎn)品品類，同時可以彌補用戶搜索過程中可能出現(xiàn)的不足，便于用戶逐級查找商品。

我們的平臺介于完全開放的互聯(lián)網(wǎng)產(chǎn)品和完全封閉的企業(yè)內(nèi)網(wǎng)產(chǎn)品，未來將在一定范圍或者地域開放，納入不同行業(yè)的合作伙伴。因此預(yù)留了運營區(qū)域，便于后期產(chǎn)品功能的拓展。另外在此區(qū)域中還增加了搜索功能，一方面可以在沒有運營活動時，作為打底信息，同時可以提升搜索功能在頁面中的比重。

此外首屏空間中，我們還增加了「新手入門」、「客戶案例」、「功能教學(xué)」、「幫助中心」等入口，引導(dǎo)新手用戶了解平臺功能。

總體而言，緊湊型的首屏空間相對于貫穿式的Banner 廣告位，內(nèi)容更加豐富，更加適合功能性的產(chǎn)品。

3）樓層化的展現(xiàn)方式

樓層是常見的展示方式，有利于內(nèi)容聚焦、增強信息層次和秩序，并且相互獨立的樓層空間方便內(nèi)容的擴(kuò)展。

另外首頁匯集了全平臺的信息，頁面會比較長。多屏空間下，客戶的瀏覽量會逐步降低。結(jié)合樓層錨點，用戶可以快速了解整個頁面內(nèi)容、定位目標(biāo)樓層，增強底部樓層曝光幾率。

2. 構(gòu)建用戶與內(nèi)容的連接通道

用戶行為目標(biāo)是具體的數(shù)據(jù)需求、數(shù)據(jù)資源和數(shù)據(jù)產(chǎn)品，因此需要通過各種設(shè)計策略構(gòu)建用戶與內(nèi)容的連接通道。

1）強化搜索

未來，平臺會聚集成千上萬的開發(fā)商和產(chǎn)品，搜索就成為連接用戶和各類數(shù)據(jù)產(chǎn)品非常重要的方式。受限于框架形式，搜索功能僅以icon形式展示，視覺效果并不突出。于是我們進(jìn)行了適當(dāng)?shù)膬?yōu)化，在首頁Banner區(qū)增加了搜索功能。

另外在產(chǎn)品列表頁面，除了固有的產(chǎn)品分類，我們還增加了分類下的搜索關(guān)鍵詞，便于用戶直接發(fā)起產(chǎn)品搜索。

2）內(nèi)容場景化

B端產(chǎn)品是為了解決用戶問題而存在的，用戶必然是在一定的場景下，才會使用B端產(chǎn)品。由于門檻所限，用戶可能會出現(xiàn)不知道該搜索具體產(chǎn)品的場景，只能不斷的試錯，但是用戶對自己的應(yīng)用場景是明確的。

為了解決該場景下用戶的需求，我們增加了產(chǎn)品專題樓層，通過用戶熟悉的“應(yīng)用場景”作為連接紐帶，拓展用戶與產(chǎn)品的連接渠道。同時產(chǎn)品專題聚合了一類數(shù)據(jù)產(chǎn)品，方便用戶集中快速查看，用戶效率更高。

3）細(xì)化內(nèi)容顆粒度

無論是產(chǎn)品列表還是內(nèi)容樓層，首頁的內(nèi)容顆粒度都盡可能地細(xì)化，方便用戶直接查看具體的需求、資源或者產(chǎn)品，實現(xiàn)用戶與內(nèi)容的直接連接。

4）強化前后臺聯(lián)動

由于不同的用戶角色，都有一定的后臺功能，為了實現(xiàn)前后臺的快速聯(lián)動，在用戶卡片區(qū)，增加了部分高頻后臺管理功能直達(dá)功能頁面，從而提高用戶效率。

四、總結(jié)

以上就是整個首頁的設(shè)計總結(jié)，其實設(shè)計方案還有很多待解決和優(yōu)化的內(nèi)容，后續(xù)會根據(jù)用戶的實際使用反饋逐步調(diào)整。說幾點感受：

1. 首頁有各種產(chǎn)品形態(tài)，歸根結(jié)底產(chǎn)品形態(tài)要符合用戶需求和產(chǎn)品定位，不能盲目套用各種模板；
2. B端產(chǎn)品的首頁設(shè)計很關(guān)鍵，是用戶了解和使用產(chǎn)品的第一觸點，設(shè)計的好壞直接影響到用戶對產(chǎn)品的認(rèn)知和流量的分發(fā)；
3. 首頁沒有具體的用戶需求，需要產(chǎn)品設(shè)計師根據(jù)自己的經(jīng)驗、對用戶業(yè)務(wù)場景的理解以及競品分析挖掘，歸納出產(chǎn)品需求；
4. 產(chǎn)品設(shè)計師需要能夠?qū)κ醉摰男枨蠛蛢?nèi)容做出取舍，否則可能就會變成雜貨鋪，堆積了各種信息，雜亂無章；