作為一個(gè)產(chǎn)品經(jīng)理咐刨，為自己的產(chǎn)品策劃網(wǎng)頁(yè)是必不可少的一項(xiàng)工作扬霜。那么，到底怎樣才能策劃好網(wǎng)頁(yè)設(shè)計(jì)呢而涉？

文章開頭：本文是贊德個(gè)人號(hào)發(fā)布于產(chǎn)品壹佰的文章（http://www.chanpin100.com/article/104359）轉(zhuǎn)載文章僅供大家學(xué)習(xí)著瓶，不作任何商業(yè)用途。

在設(shè)計(jì)網(wǎng)頁(yè)之前啼县，最重要的是——搞清楚這次設(shè)計(jì)的目的是什么材原。網(wǎng)頁(yè)的設(shè)計(jì)，絕不只是為了好看季眷。如果只是為了好看余蟹，可以直接上高清大圖。網(wǎng)頁(yè)的設(shè)計(jì)子刮，也絕不只是一味的模仿威酒，別人的設(shè)計(jì)并不一定最適合自己。所以挺峡，把自己設(shè)計(jì)網(wǎng)頁(yè)的目的搞清楚了葵孤，才能夠有的放矢。

網(wǎng)頁(yè)設(shè)計(jì)的目的有哪些橱赠？我們?yōu)槭裁丛O(shè)計(jì)網(wǎng)頁(yè)尤仍？

下文將會(huì)總結(jié)設(shè)計(jì)網(wǎng)頁(yè)的幾個(gè)目的。我們理清楚自己設(shè)計(jì)網(wǎng)站的目的之后狭姨，就可以有針對(duì)性地進(jìn)行部署宰啦、策劃、畫原型饼拍、交給UI設(shè)計(jì)赡模、然后重構(gòu)、網(wǎng)站部署惕耕，一步步完成我們需要的網(wǎng)站纺裁。

design

1、網(wǎng)頁(yè)設(shè)計(jì)目的之——網(wǎng)頁(yè)是產(chǎn)品的重要入口

這是最常見的。網(wǎng)站就是我們的產(chǎn)品欺缘，或者說訪問網(wǎng)站就等于用戶在使用我們的產(chǎn)品栋豫。

比如：airbnb，淘寶谚殊，騰訊視頻丧鸯，各大門戶網(wǎng)站。用戶訪問airbnb嫩絮，就是要查詢住宿的丛肢；用戶訪問淘寶，就是要購(gòu)物 的剿干；用戶訪問騰訊視頻蜂怎，就是要看視頻的；用戶訪問門戶網(wǎng)站置尔，就是要看新聞的杠步。

Airbnb：用戶直達(dá)業(yè)務(wù)流程

這種目的的頁(yè)面設(shè)計(jì)，沒有通用原理榜轿，不需要按照哪種方法來設(shè)計(jì)幽歼。這種情況下，我們要做的谬盐，就是讓網(wǎng)頁(yè)設(shè)計(jì)和業(yè)務(wù)邏輯完全結(jié)合甸私，讓網(wǎng)頁(yè)設(shè)計(jì)為業(yè)務(wù)流程服務(wù)，為用戶提供最直接飞傀、最便捷皇型、最流暢的產(chǎn)品體驗(yàn)。

2助析、網(wǎng)頁(yè)設(shè)計(jì)目的之——做企業(yè)品牌宣傳

有的時(shí)候犀被，網(wǎng)頁(yè)并不是我們的產(chǎn)品展示方式。尤其對(duì)于大公司而言外冀，產(chǎn)品種類各式各樣寡键，都有各自的網(wǎng)站。而自己公司的網(wǎng)站雪隧，并不需要用來宣傳產(chǎn)品或者展開促銷活動(dòng)西轩。這時(shí)候，把官網(wǎng)用來做品牌宣傳是最合適的脑沿。所以藕畔，在頁(yè)面設(shè)計(jì)過程中，要完全理解公司的定位與追求庄拇，將公司理念與思想融入到網(wǎng)頁(yè)設(shè)計(jì)之中注服。

以騰訊官網(wǎng)為例韭邓，在官網(wǎng)首頁(yè)的首屏中，我們可以看到非常醒目的表達(dá)：“連接”溶弟。而我們知道女淑，騰訊的根基就是連接，QQ和微信連接了整個(gè)社交網(wǎng)絡(luò)辜御，月活躍8～9億的用戶量為騰訊建立了強(qiáng)大的連接網(wǎng)絡(luò)鸭你。而騰訊的所有產(chǎn)品與服務(wù)，只有兩個(gè)關(guān)鍵詞擒权，便是：“連接”與“內(nèi)容”袱巨。

騰訊官網(wǎng)的首頁(yè)、首屏：“連接”

3碳抄、網(wǎng)頁(yè)設(shè)計(jì)目的之——宣傳產(chǎn)品

對(duì)于自己的互聯(lián)網(wǎng)產(chǎn)品而言愉老，產(chǎn)品解決了哪些痛點(diǎn)，與競(jìng)品相比有哪些優(yōu)勢(shì)剖效，我們的產(chǎn)品有什么特色俺夕？通過網(wǎng)頁(yè)來告訴用戶，是最合適不過的事情了贱鄙。

那么基于這種目的，應(yīng)該怎么設(shè)計(jì)網(wǎng)頁(yè)呢姨谷，通常而言逗宁，這樣的網(wǎng)頁(yè)會(huì)采用模塊化方式。這些模塊包括：產(chǎn)品特色梦湘、產(chǎn)品優(yōu)勢(shì)瞎颗、產(chǎn)品定價(jià)、產(chǎn)品接入方式捌议、產(chǎn)品使用方式哼拔、產(chǎn)品用戶量多大、產(chǎn)品合作經(jīng)典案例瓣颅、合作客戶的評(píng)價(jià)···倦逐。

產(chǎn)品經(jīng)理可以在上面模塊中，選擇自己的產(chǎn)品最想突出表達(dá)的4～5個(gè)模塊宫补，用心設(shè)計(jì)各個(gè)模塊的內(nèi)容檬姥，將各個(gè)模塊組合在一起即可。

以wetest網(wǎng)站的一個(gè)產(chǎn)品頁(yè)面（遠(yuǎn)程調(diào)試）為例粉怕，在首屏健民，我們可以看到Banner中鮮明地突出了產(chǎn)品名稱和產(chǎn)品描述，并配了一個(gè)引導(dǎo)用戶時(shí)候的大Button贫贝。在往下秉犹，便是產(chǎn)品特點(diǎn)描述蛉谜，這是產(chǎn)品介紹頁(yè)必不可少的模塊。

wetest：經(jīng)典的產(chǎn)品介紹頁(yè)面

4崇堵、網(wǎng)頁(yè)設(shè)計(jì)目的之——展現(xiàn)數(shù)據(jù)

這樣的頁(yè)面屬于專業(yè)型的頁(yè)面型诚。

專業(yè)型的頁(yè)面往往展現(xiàn)的是和業(yè)務(wù)密切相關(guān)的各類數(shù)據(jù)，如DAU筑辨、MAU俺驶、Crash率、ANR上報(bào)等各類數(shù)據(jù)類信息棍辕。這些信息需要專業(yè)技術(shù)人員或者負(fù)責(zé)數(shù)據(jù)分析的產(chǎn)品經(jīng)理來查看暮现。所以，在設(shè)計(jì)這樣的頁(yè)面時(shí)楚昭，以條例的栖袋、整潔的、易讀的形式展現(xiàn)給用戶即可抚太。

需要注意的是塘幅，這種頁(yè)面不只需要提供展示功能，還需要提供查詢功能尿贫。因?yàn)閿?shù)據(jù)量較大电媳，直接展示的往往是關(guān)鍵數(shù)據(jù)或者示例數(shù)據(jù)，更多內(nèi)容可能需要用戶自行搜索查看庆亡。

Bugly：經(jīng)典的數(shù)據(jù)顯示頁(yè)面

Bugly是騰訊推出的一款Crash崩潰捕獲與展示產(chǎn)品匾乓。頁(yè)面設(shè)計(jì)屬于典型的數(shù)據(jù)展示類型。在上圖的數(shù)據(jù)中展示頁(yè)面中又谋，我們可以清楚地看到拼缝，頁(yè)面設(shè)計(jì)采用了扁平化、模塊化的布局方式彰亥，使整個(gè)頁(yè)面布局條例清晰咧七。此外，在左側(cè)任斋、上側(cè)继阻、中上部，都采用了TAB切換的展現(xiàn)方式废酷，讓數(shù)據(jù)展示更加條理穴翩。

5、網(wǎng)頁(yè)設(shè)計(jì)目的之——引導(dǎo)用戶下載app

當(dāng)我們的產(chǎn)品是移動(dòng)產(chǎn)品形態(tài)锦积，android的apk類型或者iOS移動(dòng)應(yīng)用時(shí)芒帕，引導(dǎo)用戶下載我們的產(chǎn)品是大多數(shù)產(chǎn)品經(jīng)理的KPI。這時(shí)候丰介，充分利用我們的網(wǎng)站引導(dǎo)用戶下載我們的移動(dòng)端產(chǎn)品背蟆，就是自然而然的事情了鉴分。

UBER：右下角醒目的“下載APP”

這種類型的經(jīng)典案例，我們來看Uber官網(wǎng)带膀。UBER的產(chǎn)品形態(tài)是移動(dòng)客戶端志珍，所以，UBER官網(wǎng)用來引導(dǎo)用戶下載客戶端可以說再合適不過垛叨。所以伦糯，在官網(wǎng)的首頁(yè)的首屏，設(shè)計(jì)人員便在Banner上放了一個(gè)大大的引導(dǎo)用戶下載客戶端的提示嗽元。

6敛纲、 網(wǎng)頁(yè)設(shè)計(jì)目的之——商業(yè)推廣，急需賺錢

有時(shí)候剂癌，產(chǎn)品都已經(jīng)搭建好了淤翔，收入流水就成了產(chǎn)品經(jīng)理的重要KPI。官網(wǎng)作為用戶接觸我們產(chǎn)品的最直接方式佩谷，就可以用來配合運(yùn)營(yíng)推廣活動(dòng)吸引用戶購(gòu)買產(chǎn)品旁壮。

這時(shí)候，在網(wǎng)頁(yè)設(shè)計(jì)過程中谐檀，如何在醒目的位置展現(xiàn)營(yíng)銷內(nèi)容抡谐，讓用戶更容易地購(gòu)買產(chǎn)品，就是我們的設(shè)計(jì)關(guān)注點(diǎn)桐猬。

騰訊云：首頁(yè)Banner內(nèi)容童叠，典型的營(yíng)銷推廣

以騰訊云為例，作為國(guó)內(nèi)幾家提供云產(chǎn)品的實(shí)力型公司之一课幕，騰訊云在與阿里云、華為云等產(chǎn)品競(jìng)爭(zhēng)五垮，需要拉動(dòng)份額乍惊，因此，官網(wǎng)作為最容易接近用戶的入口放仗，直接展示了大量的營(yíng)銷型內(nèi)容润绎，也體現(xiàn)了其拉升收入的目的。

總結(jié)

當(dāng)然诞挨，網(wǎng)站設(shè)計(jì)的目的不只限于以上6種莉撇，但上面列舉的都是最常見的、做常用的設(shè)計(jì)形式惶傻。

我們可以在生活中棍郎，多積累，多學(xué)習(xí)银室，分類理清楚每種網(wǎng)站類型的設(shè)計(jì)思路涂佃，就可以在以后的網(wǎng)站策劃過程中励翼，得心應(yīng)手，水到渠成辜荠。

文章結(jié)尾：再次申明所有轉(zhuǎn)載文章僅供學(xué)習(xí)汽抚，感謝贊德老師的無私分享。如果喜歡我的文章點(diǎn)關(guān)注??吧伯病！比心呦造烁！