從產(chǎn)品化的思維,聊聊如何設(shè)計(jì)企業(yè)官網(wǎng)

14 評(píng)論 34208 瀏覽 249 收藏 10 分鐘

本文作者將結(jié)合自己的工作經(jīng)驗(yàn)總結(jié)了一下官網(wǎng)設(shè)計(jì)的tips。

官網(wǎng),可以理解成企業(yè)的IP,或者企業(yè)的另一張“臉”,記載企業(yè)的概況和發(fā)展歷程。好的官網(wǎng),能夠充分展現(xiàn)其內(nèi)涵,給人以美的感受;而糟糕的官網(wǎng),不僅不能有效表達(dá)企業(yè)的愿景,更有可能將合作和發(fā)展機(jī)會(huì)拒之門外;至于沒(méi)有官網(wǎng),那就真的是“我XX還能說(shuō)什么?你是有多懶??!”。

筆者很有幸參與到公司此次官網(wǎng)的改版,故總結(jié)一下官網(wǎng)設(shè)計(jì)的tips。將官網(wǎng)當(dāng)做一個(gè)產(chǎn)品,圍繞“目的、定位、人群和功能”要素進(jìn)行設(shè)計(jì),并用迭代的思路不斷改進(jìn)。講真,官網(wǎng)是最具性價(jià)比的長(zhǎng)期廣告。

產(chǎn)品規(guī)劃

1、需求分析

官網(wǎng),是企業(yè)面向大眾的窗口,能夠傳達(dá)給閱讀者企業(yè)的形象,展現(xiàn)自身實(shí)力,以及解決用戶疑問(wèn)。
不過(guò),在規(guī)劃官網(wǎng)的時(shí)候,需要了解企業(yè)所處階段和官網(wǎng)改版的目的:

  • 對(duì)于初創(chuàng)公司新上線的官網(wǎng),需要以最小最優(yōu)產(chǎn)品(MVP)方式呈現(xiàn)公司的核心業(yè)務(wù),和其他公司差異化;
  • 對(duì)于成長(zhǎng)中的公司,需要添加新業(yè)務(wù)或者做適當(dāng)轉(zhuǎn)型,頁(yè)面內(nèi)容和當(dāng)前業(yè)務(wù)進(jìn)度對(duì)齊;
  • 對(duì)于較為成熟的公司,需要細(xì)化單個(gè)產(chǎn)品線的內(nèi)容,將各個(gè)垂直產(chǎn)品線做到精致,例如針對(duì)一個(gè)產(chǎn)品就可以擁有一個(gè)官網(wǎng)。

2、目標(biāo)人群

  • 最終使用產(chǎn)品的用戶(包括企業(yè)客戶和大眾用戶),這一類人群重視產(chǎn)品的使用感受;
  • 投資方和業(yè)務(wù)相關(guān)人群,可能有進(jìn)一步進(jìn)行企業(yè)合作洽談的機(jī)會(huì);
  • 面試人群,會(huì)瀏覽官網(wǎng)形成產(chǎn)品印象,也就是說(shuō)官網(wǎng)是吸納人才的第一道門。

3、總體定位

雖然各家企業(yè)的發(fā)展業(yè)務(wù)不同,但官網(wǎng)總離不開(kāi)以下信息:slogan口號(hào),核心業(yè)務(wù),優(yōu)勢(shì),產(chǎn)品簡(jiǎn)介,公司簡(jiǎn)介等基礎(chǔ)信息。
筆者所在公司是一家大數(shù)據(jù)營(yíng)銷公司,此次官網(wǎng)項(xiàng)目主要內(nèi)容可以總結(jié)為幾點(diǎn):優(yōu)化視覺(jué)表現(xiàn);突出營(yíng)銷業(yè)務(wù);豐滿產(chǎn)品線。

產(chǎn)品設(shè)計(jì)

1、產(chǎn)品風(fēng)格確定

首先,需要根據(jù)產(chǎn)品或品牌的調(diào)性確定產(chǎn)品風(fēng)格,強(qiáng)化產(chǎn)品優(yōu)勢(shì)。例如Adobe作為一家全球性的設(shè)計(jì)公司,官網(wǎng)采用黑色封底和圖片拼接方式,低調(diào)而有逼格,吸引眼球。蘋果官網(wǎng)則秉承著“l(fā)ess is more”的簡(jiǎn)約風(fēng),旗下系列產(chǎn)品就像精致的工藝品,黑白灰的色調(diào)搭配寬屏高清主圖,傳遞優(yōu)雅、極致、禪式的理念,營(yíng)造極佳的用戶體驗(yàn)。而某家傳統(tǒng)的食品公司,官網(wǎng)則重在宣傳獲獎(jiǎng)活動(dòng),比較傳統(tǒng)保守,紅配綠的蜜汁審美,顯得有點(diǎn)特別(吃藕)了。

Adobe官網(wǎng)

蘋果官網(wǎng)

某官網(wǎng)

在我司官網(wǎng)的風(fēng)格設(shè)計(jì)中,則考慮了產(chǎn)品的定位:數(shù)據(jù)驅(qū)動(dòng)營(yíng)銷。既要體現(xiàn)出數(shù)據(jù)挖掘的技術(shù)優(yōu)勢(shì),又要貼近營(yíng)銷。因此,除表現(xiàn)科技感之外,可以采用較為清新簡(jiǎn)約的配色,最好能跟企業(yè)的主題色對(duì)應(yīng)。

我司官網(wǎng)

2、產(chǎn)品框架

產(chǎn)品框架建立的流程分為:

拆解功能 → 確定功能優(yōu)先級(jí) → 聚合重組

將官網(wǎng)所有的功能平鋪成以下關(guān)鍵詞:index(首頁(yè))marketing(營(yíng)銷)DSP(廣告管理平臺(tái))DMP(數(shù)據(jù)管理平臺(tái))SSP(供應(yīng)方平臺(tái)) ADX(廣告交易平臺(tái)) Software(軟件產(chǎn)品) solution(解決方案)Labs(實(shí)驗(yàn)室)intro(公司介紹)case(優(yōu)秀案例)News(公司新聞)。boss大大說(shuō)盡量把功能都展示在菜單上,菜單多不怕,一行放的下,做出來(lái)了就要讓世界看見(jiàn)! Orz 向大佬低頭。

功能關(guān)鍵詞

在產(chǎn)品設(shè)計(jì)中,每個(gè)功能都突出,其實(shí)就等于沒(méi)重點(diǎn) 。在MUJI無(wú)印良品的設(shè)計(jì)中,學(xué)會(huì)“克制”,不過(guò)分邀功,而是用體驗(yàn)和細(xì)節(jié)去打動(dòng)用戶。也就是說(shuō),不能一昧橫向擴(kuò)充,還需要縱向加深,增強(qiáng)層次感。

回歸到我們的官網(wǎng)本身,需要對(duì)功能進(jìn)行優(yōu)先級(jí)劃分。綜合此次改版目標(biāo):突出營(yíng)銷和豐滿產(chǎn)品線,因此把營(yíng)銷單獨(dú)作為一個(gè)菜單板塊,放置在首頁(yè)之后,把公司介紹放在最后。其次,根據(jù)關(guān)鍵詞的屬性聚合出分類,把DSP,DMP,ADX,SSP聚合成數(shù)字營(yíng)銷產(chǎn)品;把Labs歸入到軟件產(chǎn)品同樣有技術(shù)研究屬性的功能下;把案例歸入到營(yíng)銷推廣服務(wù)下。最后提煉出來(lái)的產(chǎn)品框架如下:

3、核心頁(yè)面設(shè)計(jì)

首頁(yè)設(shè)計(jì):

  • 重點(diǎn)展現(xiàn)企業(yè)的愿景、產(chǎn)品的定位、實(shí)力
  • 公司的業(yè)務(wù)介紹,使用戶有頂層的感受
  • 把首頁(yè)當(dāng)成整個(gè)官網(wǎng)各個(gè)菜單功能的概述,并提供便捷入口,即目錄式的指引

首頁(yè)布局草稿:

營(yíng)銷推廣服務(wù):

  • 作為核心業(yè)務(wù)模塊,通過(guò)概述頁(yè)展示營(yíng)銷推廣服務(wù)涵蓋的范圍和優(yōu)勢(shì)
  • 將廣告營(yíng)銷涉及的對(duì)象分頁(yè)面進(jìn)行闡述,分為媒體、人群、運(yùn)營(yíng)、案例頁(yè)面,以便能深入闡述每個(gè)對(duì)象的優(yōu)勢(shì)
  • 確保頁(yè)面統(tǒng)一性,各個(gè)功能模塊盡量采取標(biāo)題及簡(jiǎn)單文案解釋、附帶圖片的方式

產(chǎn)品驗(yàn)證

每次上線前驗(yàn)證時(shí),都是一臉懵逼,內(nèi)心OS:無(wú)話說(shuō),這真的是我當(dāng)時(shí)設(shè)計(jì)的嗎?。?!不過(guò)還是乖乖去測(cè)試bug和提意見(jiàn),死磕功能和體驗(yàn),Orz 向研發(fā)大大低頭。整個(gè)驗(yàn)證過(guò)程就是不斷提問(wèn)題的過(guò)程:

  • 功能路徑:功能是否有欠缺?跳轉(zhuǎn)路徑是否正確?
  • 文案:語(yǔ)句是否通順,不存在歧義?
  • 風(fēng)格UI:頁(yè)面主圖和配圖的風(fēng)格是否和模塊定位相對(duì)應(yīng)?布局和設(shè)計(jì)稿是否有出入?
  • 兼容性:考慮移動(dòng)端的適配問(wèn)題,頁(yè)面是否會(huì)錯(cuò)亂?
  • 性能:頁(yè)面跳轉(zhuǎn)時(shí)間、圖片加載時(shí)間是否太長(zhǎng)?

寫在最后

這篇文章對(duì)官網(wǎng)改版做了一個(gè)簡(jiǎn)單的復(fù)盤,工作一年來(lái),視角漸漸從【功能倒推界面】轉(zhuǎn)化為【從產(chǎn)品定位自頂向下設(shè)計(jì)產(chǎn)品】,工作精力也從【體驗(yàn)參考無(wú)數(shù)競(jìng)品】轉(zhuǎn)移到【用戶行為和心理分析】。

《如何閱讀一本書》有這樣一句話:

付錢擁有一本書,不過(guò)是真正擁有這本書的前奏而已。

同樣,每一項(xiàng)技能能力只有在一個(gè)個(gè)“然后”(不斷思考、總結(jié))才能創(chuàng)造價(jià)值。但行好事,莫問(wèn)前程。

 

作者:christy_ma,簡(jiǎn)書:Christy_Ma

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 寫的真好,我們最近就是設(shè)計(jì)官網(wǎng),看完之后有思路了

    來(lái)自江蘇 回復(fù)
  2. 寫的真好!!

    來(lái)自浙江 回復(fù)
  3. 寫得很好!我們就是那個(gè)奇葩,至今暫無(wú)官網(wǎng)。計(jì)劃中。。。

    來(lái)自上海 回復(fù)
  4. 贏時(shí)通啊,蠻巧的,我之前在對(duì)面辦公 :mrgreen:

    來(lái)自廣東 回復(fù)
  5. 謝謝 可以聊聊嗎?微信hengshuivick

    回復(fù)
  6. “我XX還能說(shuō)什么?你是有多懶??!”跟你照片氣質(zhì)不符啊

    來(lái)自廣東 回復(fù)
    1. ?? 百變的氣質(zhì)

      來(lái)自廣東 回復(fù)
  7. UI部分也做了?

    來(lái)自江蘇 回復(fù)
  8. 學(xué)習(xí)了

    來(lái)自北京 回復(fù)
  9. :mrgreen: 學(xué)習(xí)了

    來(lái)自廣東 回復(fù)
    1. ?? 握手~

      來(lái)自新加坡 回復(fù)
  10. 寫的不錯(cuò)

    來(lái)自江蘇 回復(fù)
    1. 蟹蟹支持~

      來(lái)自新加坡 回復(fù)