從產品化的思維,聊聊如何設計企業官網

14 評論 34334 瀏覽 249 收藏 10 分鐘

本文作者將結合自己的工作經驗總結了一下官網設計的tips。

官網,可以理解成企業的IP,或者企業的另一張“臉”,記載企業的概況和發展歷程。好的官網,能夠充分展現其內涵,給人以美的感受;而糟糕的官網,不僅不能有效表達企業的愿景,更有可能將合作和發展機會拒之門外;至于沒有官網,那就真的是“我XX還能說什么?你是有多懶??!”。

筆者很有幸參與到公司此次官網的改版,故總結一下官網設計的tips。將官網當做一個產品,圍繞“目的、定位、人群和功能”要素進行設計,并用迭代的思路不斷改進。講真,官網是最具性價比的長期廣告。

產品規劃

1、需求分析

官網,是企業面向大眾的窗口,能夠傳達給閱讀者企業的形象,展現自身實力,以及解決用戶疑問。
不過,在規劃官網的時候,需要了解企業所處階段和官網改版的目的:

  • 對于初創公司新上線的官網,需要以最小最優產品(MVP)方式呈現公司的核心業務,和其他公司差異化;
  • 對于成長中的公司,需要添加新業務或者做適當轉型,頁面內容和當前業務進度對齊;
  • 對于較為成熟的公司,需要細化單個產品線的內容,將各個垂直產品線做到精致,例如針對一個產品就可以擁有一個官網。

2、目標人群

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

3、總體定位

雖然各家企業的發展業務不同,但官網總離不開以下信息:slogan口號,核心業務,優勢,產品簡介,公司簡介等基礎信息。
筆者所在公司是一家大數據營銷公司,此次官網項目主要內容可以總結為幾點:優化視覺表現;突出營銷業務;豐滿產品線。

產品設計

1、產品風格確定

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

Adobe官網

蘋果官網

某官網

在我司官網的風格設計中,則考慮了產品的定位:數據驅動營銷。既要體現出數據挖掘的技術優勢,又要貼近營銷。因此,除表現科技感之外,可以采用較為清新簡約的配色,最好能跟企業的主題色對應。

我司官網

2、產品框架

產品框架建立的流程分為:

拆解功能 → 確定功能優先級 → 聚合重組

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

功能關鍵詞

在產品設計中,每個功能都突出,其實就等于沒重點 。在MUJI無印良品的設計中,學會“克制”,不過分邀功,而是用體驗和細節去打動用戶。也就是說,不能一昧橫向擴充,還需要縱向加深,增強層次感。

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

3、核心頁面設計

首頁設計:

  • 重點展現企業的愿景、產品的定位、實力
  • 公司的業務介紹,使用戶有頂層的感受
  • 把首頁當成整個官網各個菜單功能的概述,并提供便捷入口,即目錄式的指引

首頁布局草稿:

營銷推廣服務:

  • 作為核心業務模塊,通過概述頁展示營銷推廣服務涵蓋的范圍和優勢
  • 將廣告營銷涉及的對象分頁面進行闡述,分為媒體、人群、運營、案例頁面,以便能深入闡述每個對象的優勢
  • 確保頁面統一性,各個功能模塊盡量采取標題及簡單文案解釋、附帶圖片的方式

產品驗證

每次上線前驗證時,都是一臉懵逼,內心OS:無話說,這真的是我當時設計的嗎?。。〔贿^還是乖乖去測試bug和提意見,死磕功能和體驗,Orz 向研發大大低頭。整個驗證過程就是不斷提問題的過程:

  • 功能路徑:功能是否有欠缺?跳轉路徑是否正確?
  • 文案:語句是否通順,不存在歧義?
  • 風格UI:頁面主圖和配圖的風格是否和模塊定位相對應?布局和設計稿是否有出入?
  • 兼容性:考慮移動端的適配問題,頁面是否會錯亂?
  • 性能:頁面跳轉時間、圖片加載時間是否太長?

寫在最后

這篇文章對官網改版做了一個簡單的復盤,工作一年來,視角漸漸從【功能倒推界面】轉化為【從產品定位自頂向下設計產品】,工作精力也從【體驗參考無數競品】轉移到【用戶行為和心理分析】。

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

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

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

 

作者:christy_ma,簡書:Christy_Ma

本文由 @christy_ma 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 寫的真好,我們最近就是設計官網,看完之后有思路了

    來自江蘇 回復
  2. 寫的真好??!

    來自浙江 回復
  3. 寫得很好!我們就是那個奇葩,至今暫無官網。計劃中。。。

    來自上海 回復
  4. 贏時通啊,蠻巧的,我之前在對面辦公 :mrgreen:

    來自廣東 回復
  5. 謝謝 可以聊聊嗎?微信hengshuivick

    回復
  6. “我XX還能說什么?你是有多懶??!”跟你照片氣質不符啊

    來自廣東 回復
    1. ?? 百變的氣質

      來自廣東 回復
  7. UI部分也做了?

    來自江蘇 回復
  8. 學習了

    來自北京 回復
  9. :mrgreen: 學習了

    來自廣東 回復
    1. ?? 握手~

      來自新加坡 回復
  10. 寫的不錯

    來自江蘇 回復
    1. 蟹蟹支持~

      來自新加坡 回復