一個(gè)公司的官網(wǎng)可以說是一家公司的門面。在用戶對(duì)公司以及產(chǎn)品沒有任何了解時(shí)，官網(wǎng)是向用戶傳達(dá)信息的重要途徑。在某種程度上來說，官網(wǎng)影響著用戶對(duì)這家公司及其產(chǎn)品的認(rèn)知和信任。

官網(wǎng)

如果一個(gè)公司的官網(wǎng)結(jié)構(gòu)不清晰、圖面陳舊、布局雜亂、配色俗氣，那么用戶很容易就會(huì)懷疑這家公司的正規(guī)性、專業(yè)性和實(shí)力。

下面是一條微博吐槽，質(zhì)疑某奢侈品品牌官網(wǎng)與其自身品牌形象不符。

品牌尚且知名度高，用戶只是調(diào)侃一下，官網(wǎng)不影響用戶對(duì)該品牌產(chǎn)品的購買和消費(fèi)。如果是一個(gè)用戶完全不了解的品牌，官網(wǎng)讓用戶覺得很“粗制濫造”，那么用戶一定會(huì)下意識(shí)地認(rèn)為這個(gè)公司和品牌是某種“雜牌子”或“三無產(chǎn)品”。

下面那個(gè)網(wǎng)站被戲稱為“世界上最差的網(wǎng)站”。如果真有這樣的網(wǎng)站，那么用戶一定會(huì)崩潰的，點(diǎn)進(jìn)去的那一秒會(huì)以為自己進(jìn)入了某個(gè)病毒網(wǎng)站。

https://www.theworldsworstwebsiteever.com/

相反，官網(wǎng)如果結(jié)構(gòu)清晰、內(nèi)容精簡準(zhǔn)確、配色合適、布局合理，這個(gè)公司首先給用戶的第一印象就是“公司的官網(wǎng)還不錯(cuò)”、“設(shè)計(jì)水平還行”。

第一印象是好印象，用戶對(duì)公司和產(chǎn)品才有進(jìn)一步了解的興趣。尤其是以“美”為生意的品牌，例如彩妝、服裝、飾品、家居等，如果這些公司的官網(wǎng)沒有向用戶展現(xiàn)“美”，沒有俘獲用戶的芳心，那么用戶基本上也不會(huì)有購買欲望。

下面是一個(gè)飾品的官網(wǎng)首頁。首頁整體清新淡雅，背景圖以白色為主，重點(diǎn)是要突出展示的飾品。飾品的展示也很簡單，有純粹的飾品展示，也有各種佩戴的場景。

整體來看，頁面內(nèi)容和元素不多，但是清晰明了地展示了產(chǎn)品。美中不足的是，中間幾張佩戴飾品的圖略顯粗糙，不夠精美。

某飾品網(wǎng)站

長租公寓官網(wǎng)設(shè)計(jì)

“優(yōu)秀的官網(wǎng)各有各的優(yōu)秀，差勁的官網(wǎng)都差得一致”。官網(wǎng)的表層設(shè)計(jì)其實(shí)都差不多，不同的是官網(wǎng)展示的內(nèi)容。接下來以長租公寓為例，從產(chǎn)品經(jīng)理的角度來分析如何設(shè)計(jì)出一個(gè)優(yōu)秀的官網(wǎng)。

1. 網(wǎng)站定位

官網(wǎng)的定位，當(dāng)然是讓介紹公司信息、展示公司產(chǎn)品，讓用戶了解公司和產(chǎn)品，對(duì)公司和產(chǎn)品產(chǎn)生興趣，進(jìn)而產(chǎn)生購買消費(fèi)行為。所以長租公寓官網(wǎng)的定位，當(dāng)然要展示公司的品牌、房源、服務(wù)等用戶關(guān)心的信息，讓用戶信賴品牌、在官網(wǎng)上找到合適的房源，進(jìn)而成為自己的租戶。

從目標(biāo)用戶的角度來分析，長租公寓的目標(biāo)用戶主要是即將踏入社會(huì)的畢業(yè)生和工作收入尚可的年輕職員。這類用戶對(duì)生活品質(zhì)有要求，理所應(yīng)當(dāng)?shù)?，也有一定的審美品位?/p>

所以不管是官網(wǎng)的設(shè)計(jì)風(fēng)格還是展示內(nèi)容，都要以目標(biāo)用戶為中心進(jìn)行規(guī)劃。最終目的，是要讓用戶信任這家公司，成為意向用戶或者立即轉(zhuǎn)化為租戶。最好的效果是讓用戶在瀏覽官網(wǎng)時(shí)就能體會(huì)到“賓至如歸”的感覺。

2. 設(shè)計(jì)風(fēng)格

由于長租公寓的目標(biāo)用戶都是年輕人，且愿意選擇長租公寓的人都是對(duì)生活質(zhì)量有要求的人。

而且長租公寓是給人提供住的地方，需要讓用戶感到溫馨、安靜。所以在進(jìn)行網(wǎng)站設(shè)計(jì)時(shí)，除了常規(guī)的設(shè)計(jì)，還需要加入“情感化”元素，簡而言之就是是活潑不嚴(yán)肅、簡潔不雜亂、溫暖不冰冷，要讓用戶在獲取信息的同時(shí)，還能感受到所傳遞的情感關(guān)懷。

例如自如的官網(wǎng)恰好是橙色，再配上簡潔干凈的家居圖，很容易傳遞“溫暖的家”的感覺。

自如官網(wǎng)

此外，由于長租公寓分為分散式公寓和集中式公寓，對(duì)應(yīng)的用戶也略有區(qū)別。

集中式公寓的用戶收入更高，追求更高的生活質(zhì)量和要求更好的服務(wù)。所以如果是集中式公寓的網(wǎng)站，更需要展示商務(wù)、簡潔、高端的一面。以朗詩寓的官網(wǎng)為例，主圖色調(diào)以黑、灰為主，從感覺上更偏嚴(yán)肅一些。

朗詩寓官網(wǎng)

3. 內(nèi)容

關(guān)于長租公寓網(wǎng)站需要展示的內(nèi)容，這需要梳理用戶在網(wǎng)站中的想法和軌跡。毫無疑問，用戶來網(wǎng)站是來找房源的。

找到中意房源后，還要看一下公司提供的服務(wù)，例如保潔、管家服務(wù)，考量一下這些是否能真正提高自己的生活質(zhì)量；接下來就可以看看公司對(duì)用戶的運(yùn)營活動(dòng)，看看這家公司對(duì)于租戶是否用心；最后再看看公司的品牌介紹，簡單地看一下公司的發(fā)展和歷程，估計(jì)一下公司的實(shí)力。

（1）首頁

如果說官網(wǎng)是公司的“門面”，那么首頁就是官網(wǎng)的“門面”。用戶一打開官網(wǎng)，首先映入眼簾的就是官網(wǎng)的首頁。首頁就像一道門檻，如果用戶認(rèn)可首頁，則還會(huì)看看其他模塊；相反如果首頁“出師不利”，那么用戶整個(gè)官網(wǎng)瀏覽之旅就會(huì)止步于首頁。

首頁應(yīng)該重點(diǎn)展示公司的愿景、產(chǎn)品的定位和實(shí)力，同時(shí)整體介紹公司的業(yè)務(wù)，讓用戶對(duì)公司有頂層的了解和感受。首頁應(yīng)該是整個(gè)官網(wǎng)各個(gè)菜單功能的概述，并能夠進(jìn)行便捷跳轉(zhuǎn)，進(jìn)入對(duì)應(yīng)的詳細(xì)信息介紹頁面。

長租公寓的首頁，首要展示的是公司的slogan和房源的快捷搜索。接下來就是展示重點(diǎn)房源和主要租房服務(wù)。最后會(huì)展示一些租房生活及公司介紹。

自如的官網(wǎng)首頁：http://sh.ziroom.com/。

（2）房源

官網(wǎng)中，需要展示房源模塊，用戶可以搜索和瀏覽房源，對(duì)房源進(jìn)行預(yù)約看房等操作。房源的展示有列表展示和九宮格式展示。

蛋殼公寓列表式展示

自如九宮格式展示

房源圖片盡量展示構(gòu)圖良好、畫質(zhì)清晰的房源照片，房源信息盡量詳細(xì)、全面，讓用戶相信這套房源是安全舒適的真房源。

當(dāng)然也可以根據(jù)現(xiàn)實(shí)情況展示更多信息，例如經(jīng)過“甲醛事件”后，自如的房源后就展示該房源空置天數(shù)和空氣質(zhì)量檢測結(jié)果。這些信息可能并不會(huì)讓用戶徹底安心，但至少向用戶展現(xiàn)出自己的誠意。

（3）服務(wù)

隨著業(yè)務(wù)的不斷拓寬，長租公寓的配套服務(wù)也越來越成熟，這也成了吸引用戶的一個(gè)重要因素。所以官網(wǎng)上需要展示所提供的配套服務(wù)。常規(guī)的服務(wù)一般是管家服務(wù)、搬家、保潔等，但是有些集中式公寓會(huì)提供寵物照顧、私人教練等服務(wù)。

租房服務(wù)的展示要傳遞出熱情、專業(yè)的形象。畢竟有些服務(wù)是要讓用戶掏錢的，應(yīng)該讓用戶感覺“這個(gè)不錯(cuò)，感覺服務(wù)態(tài)度挺好的，挺接地氣的”。

如果只是冷冰冰的文字描述，用戶對(duì)于服務(wù)沒有感知，甚至覺得“高冷”，那么很難有消費(fèi)的欲望。就算是集中式公寓的服務(wù)，也盡量要傳達(dá)出“專業(yè)”、“優(yōu)質(zhì)”的特點(diǎn)，而不要讓用戶覺得“高冷”。

常規(guī)服務(wù)

（4）運(yùn)營活動(dòng)展示

運(yùn)營活動(dòng)主要有兩類：公司運(yùn)營活動(dòng)、租客生活。如果恰逢運(yùn)營活動(dòng)，那么官網(wǎng)需要展示活動(dòng)頁。例如自如的“海燕計(jì)劃”，蛋殼公寓的“椋鳥計(jì)劃”等活動(dòng)，在畢業(yè)季的時(shí)候，是要優(yōu)先進(jìn)行展示的。

第二種就是租客活動(dòng)的展示。隨著長租公寓運(yùn)營商開始注重“社區(qū)運(yùn)營”，開展各類活動(dòng)豐富年輕租戶的業(yè)余生活。在展示時(shí)，以美圖為主，輔以簡單的說明文字即可。主要是向用戶展示美好生活，增強(qiáng)對(duì)用戶的吸引力。

自如生活

朗詩寓“詩友社區(qū)”

（4）周邊 / 配套

由于集中式公寓多為一棟棟的物業(yè)，所以多數(shù)集中式公寓會(huì)有更多的配置。例如健身房、私人影院、共享工作區(qū)、娛樂室等。這些信息也需要在官網(wǎng)展示出來。

對(duì)于集中式公寓來說，周邊配套和地理位置也可以是一個(gè)重要的宣傳點(diǎn)。所以周邊配套和交通樞紐的展示也有必要。

當(dāng)然大部分集中式公寓都不是只有一棟物業(yè)，所以很多官網(wǎng)選擇在每套房源的詳情頁展示周邊配套和交通樞紐。下圖是朗詩寓在某個(gè)集中式公寓的配套、房型、交通的展示。

（5）關(guān)于公司

最后是公司的介紹。一般來說，會(huì)介紹一下公司的發(fā)展歷程、融資進(jìn)程、合作伙伴、發(fā)展大事記、市場版圖等等。如果公司的合伙人有實(shí)力或者有名氣，也會(huì)展示公司的管理團(tuán)隊(duì)。

下圖是朗詩寓的公司介紹，介紹了朗詩寓的基本情況，還介紹了母公司朗詩集團(tuán)的信息。此外，還用時(shí)間軸展示朗詩寓的大事記，用地圖展示了市場版圖。最后展示公司最近的重大新聞，讓用戶對(duì)公司有更多的了解和認(rèn)識(shí)。

總結(jié)

官網(wǎng)的設(shè)計(jì)并不是設(shè)計(jì)師一個(gè)人完成的。大部分時(shí)候也需要產(chǎn)品經(jīng)理出原型，定好布局、內(nèi)容、文案、交互等，再由設(shè)計(jì)師設(shè)計(jì)頁面。

官網(wǎng)的設(shè)計(jì)，不僅考驗(yàn)兩者的審美水平，也考驗(yàn)著產(chǎn)品經(jīng)理對(duì)目標(biāo)用戶、公司品牌、業(yè)務(wù)的熟悉程度。只有真正了解公司品牌和業(yè)務(wù)，了解公司的目標(biāo)用戶，才能準(zhǔn)確地將公司“推銷”出去。

#專欄作家#

異彩，微信公眾號(hào)：一只蝸牛慢慢跑，人人都是產(chǎn)品經(jīng)理專欄作家。從事房產(chǎn)管理系統(tǒng)的產(chǎn)品工作，關(guān)注To C產(chǎn)品的交互設(shè)計(jì)、運(yùn)營、結(jié)構(gòu)設(shè)計(jì)和商業(yè)模式。在成為一名優(yōu)秀的產(chǎn)品人的路上努力前行。

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

題圖來自Unsplash，基于 CC0 協(xié)議。