1.廣州網(wǎng)頁設計的目的是什么?我們?yōu)槭裁匆O計網(wǎng)頁?
在設計網(wǎng)頁之前,最重要的是弄清楚這個設計的目的是什么。網(wǎng)頁的設計不僅僅是為了好看。如果只是為了好看,可以直接上高清大圖。網(wǎng)頁的設計絕不僅僅是模仿,別人的設計不一定是對自己最好的。因此,只有明確設計網(wǎng)頁的目的,我們才能有一個明確的目標。
下面將總結設計網(wǎng)頁的幾個目的。我們明白了設計網(wǎng)站的目的之后,就可以進行部署、規(guī)劃、原型化,交給UI設計,然后進行網(wǎng)站的重構和部署,一步一步的完成我們需要的網(wǎng)站。
2.以網(wǎng)頁設計為目的的——網(wǎng)頁是產(chǎn)品的重要入口
這是最常見的。網(wǎng)站是我們的產(chǎn)品,或者訪問網(wǎng)站意味著用戶正在使用我們的產(chǎn)品。
比如:airbnb,淘寶,騰訊視頻,各大門戶。用戶訪問airbnb時,想查詢住宿情況;用戶訪問淘寶,想購物;用戶訪問騰訊視頻是想看視頻,用戶訪問門戶網(wǎng)站是想看新聞。
Airbnb:用戶直接進入業(yè)務流程
對于這種目的的頁面設計沒有一般的原則,也不需要按照任何方法進行設計。在這種情況下,我們需要做的是將網(wǎng)頁設計與業(yè)務邏輯完全結合起來,讓網(wǎng)頁設計服務于業(yè)務流程,為用戶提供最直接、最方便、最流暢的產(chǎn)品體驗。
3.網(wǎng)頁設計的目的是——推廣企業(yè)品牌
有時候,網(wǎng)頁不是我們展示產(chǎn)品的方式。尤其是大公司,產(chǎn)品種類繁多,各有網(wǎng)站。而貴公司的網(wǎng)站,這是不需要推廣產(chǎn)品或者開展推廣活動的。這個時候用官網(wǎng)做品牌推廣最合適。所以在頁面設計的過程中,要充分了解公司的定位和追求,把公司的思路和想法融入到網(wǎng)頁設計中。
以騰訊官網(wǎng)為例。在官網(wǎng)首頁的第一屏,我們可以看到一個非常醒目的表情:“連接”。我們知道,騰訊的基礎是連接,QQ和微信連接了整個社交網(wǎng)絡,每月活躍用戶8-9億,為騰訊建立了強大的連接網(wǎng)絡。騰訊所有的產(chǎn)品和服務只有兩個關鍵詞,即“連接”和“內(nèi)容”。
騰訊官網(wǎng)首頁和第一屏:“連接”
4.——以網(wǎng)頁設計為目的的促銷產(chǎn)品
對于我們自己的互聯(lián)網(wǎng)產(chǎn)品,產(chǎn)品解決了哪些痛點,與競爭產(chǎn)品相比有什么優(yōu)勢,我們的產(chǎn)品有什么特點?通過網(wǎng)頁告訴用戶才是最合適的。
那么為了這個目的,我們應該如何設計一個網(wǎng)頁呢?一般來說,這樣的網(wǎng)頁將采用模塊化的方法。這些模塊包括:產(chǎn)品特點、產(chǎn)品優(yōu)勢、產(chǎn)品定價、產(chǎn)品獲取方式、產(chǎn)品使用方式、產(chǎn)品用戶、產(chǎn)品合作經(jīng)典案例、合作客戶評價。從以上模塊中,產(chǎn)品經(jīng)理可以選擇他的產(chǎn)品最想突出的4 ~ 5個模塊,仔細設計每個模塊的內(nèi)容,將模塊組合在一起。
以最濕網(wǎng)站的一個產(chǎn)品頁面(遠程調(diào)試)為例。在第一個屏幕上,我們可以看到橫幅突出了產(chǎn)品名稱和產(chǎn)品描述,并在引導用戶時配備了一個大按鈕。接下來是產(chǎn)品功能描述,是產(chǎn)品介紹頁面必不可少的模塊。其他模塊的介紹和選擇,請參考后面“實踐經(jīng)驗6”中的圖片。
最濕:經(jīng)典產(chǎn)品介紹頁
5.——用于網(wǎng)頁設計的演示數(shù)據(jù)
這樣的頁面是專業(yè)頁面。
專業(yè)頁面經(jīng)常顯示與業(yè)務密切相關的各種數(shù)據(jù),如DAU、MAU、Crash rate、ANR報告等數(shù)據(jù)信息。這些信息需要由負責數(shù)據(jù)分析的專業(yè)技術人員或產(chǎn)品經(jīng)理查看。因此,在設計這樣的頁面時,應該以規(guī)范、整潔、易讀的形式呈現(xiàn)給用戶。
需要注意的是,這類頁面不僅需要提供顯示功能,還需要提供查詢功能。由于數(shù)據(jù)量大,往往直接顯示關鍵數(shù)據(jù)或樣本數(shù)據(jù),可能需要用戶自己搜索查看的內(nèi)容更多。
Bugly:經(jīng)典數(shù)據(jù)顯示頁面
Bugly是騰訊推出的崩潰捕捉和顯示產(chǎn)品。頁面設計是典型的數(shù)據(jù)顯示類型。從上圖數(shù)據(jù)顯示的頁面中,我們可以清楚地看到,頁面設計采用了扁平化、模塊化的布局,使得整個頁面的布局規(guī)則清晰。另外,在左側(cè)、上側(cè)和中上部,采用TAB切換顯示方式,使得數(shù)據(jù)顯示更有條理。
6.——,網(wǎng)頁設計的目的,引導用戶下載app
當我們的產(chǎn)品是移動產(chǎn)品時,apk類型的安卓或iOS移動應用。引導用戶下載我們的產(chǎn)品是大多數(shù)產(chǎn)品經(jīng)理的KPI。這時候自然要充分利用我們的網(wǎng)站來引導用戶下載我們的手機產(chǎn)品。
優(yōu)步:右下角醒目的“下載APP”
對于這類經(jīng)典案例,我們來看看優(yōu)步官網(wǎng)。優(yōu)步的產(chǎn)品形式是移動客戶端。所以優(yōu)步官網(wǎng)是用來引導用戶下載客戶端的,可以說是完美的。所以在官網(wǎng)首頁的第一屏,設計師在Banner上放了一個大提示,引導用戶下載客戶端。
7.以網(wǎng)頁設計為目的的——商業(yè)推廣急需賺錢
有時,當產(chǎn)品已經(jīng)建立時,收入流成為產(chǎn)品經(jīng)理的重要關鍵績效指標。官網(wǎng)作為用戶接觸我們產(chǎn)品最直接的方式,可以配合運營推廣活動,吸引用戶購買產(chǎn)品。此時,在網(wǎng)頁設計過程中,如何將營銷內(nèi)容展示在顯眼的位置,讓用戶更容易購買產(chǎn)品,是我們的設計重點。
騰訊云:首頁橫幅內(nèi)容,典型營銷推廣
以騰訊云為例:騰訊云作為國內(nèi)提供云產(chǎn)品的幾家實力雄厚的公司之一,在與阿里巴巴云、華為云等產(chǎn)品正常業(yè)務時,需要提升份額。所以官網(wǎng)作為用戶最容易進入的入口,直接展示了大量的營銷內(nèi)容,也體現(xiàn)了其助推收益的目的。