拒絕千篇一律!企業(yè)官網(wǎng)設(shè)計(jì)升級的超全實(shí)施手冊
官網(wǎng)作為連接產(chǎn)品/企業(yè)與用戶的第一道門,給到用戶的第一印象至關(guān)重要。官網(wǎng)就像一個會自述的虛擬人物,我們通過視覺設(shè)計(jì)賦予它形象,它用符合人設(shè)性格的話術(shù),向用戶介紹產(chǎn)品/企業(yè)。怎樣的形象、表述能獲取用戶好感及信賴,從而建立長期合作關(guān)系呢?
我們先看下不同公司的云產(chǎn)品官網(wǎng)設(shè)計(jì):
這 4 個"形象",除了顏色和 logo 不同,風(fēng)格都是一樣的,語氣措辭也大同小異。如果我們拿掉 logo、去掉顏色是怎樣的效果?
大家是否能在第一時間辨別是哪家公司的官網(wǎng)?
話說回來,這幾個網(wǎng)站的設(shè)計(jì)質(zhì)量都是行業(yè)內(nèi)的較高水準(zhǔn),但同質(zhì)化嚴(yán)重。是我們被固化思維了嗎?是只有這樣的 3D 科技風(fēng)(或是 2.5D 擬 3D)才能體現(xiàn)云平臺的產(chǎn)品特點(diǎn)嗎?阿里站在行業(yè)的前端領(lǐng)跑,憑借其強(qiáng)大的技術(shù)實(shí)力和設(shè)計(jì)實(shí)力在前幾年就開始將其產(chǎn)品官網(wǎng)、APP 的視覺風(fēng)格逐步 3D 化,并有了阿里動物園大家族,其核心的產(chǎn)品都擁有了形象化 3D IP 形象。在他們領(lǐng)跑的同時,其他大廠不甘落后,紛紛改版意圖趕超,久而久之同質(zhì)化的問題就越來越明顯。子曰:"三人行,必有我?guī)熝?;擇其善者而從之,其不善者而改之?quot;借鑒學(xué)習(xí)是很正常的事情,但是在借鑒的同時更應(yīng)該體現(xiàn)自己的特點(diǎn),否則就變成了"copy 不走樣"了。
比如說現(xiàn)在被大量運(yùn)用的輕擬物 3D 圖標(biāo),圖標(biāo)風(fēng)格酷炫科技有質(zhì)感,但卻大大削弱了識別性。由于單個圖標(biāo)本身復(fù)雜度就很高,在看的時候大腦就需要去解讀識別其含義,當(dāng)多個圖標(biāo)同時出現(xiàn)的時候,更是造成了識別超負(fù)荷。
我們單對比下面兩組圖標(biāo),第一組識別度會更高,大多立體圖形的輪廓形態(tài)不一,彩色占比高,增加了豐富度和對比度;再看第二組圖標(biāo),大多圖標(biāo)立體形態(tài)都是正方體、長方體、圓柱體,相對規(guī)整,且彩色占比較少,圖標(biāo)的層次感和豐富度就不足,這樣識別度就降低了。
《設(shè)計(jì)師要懂心理學(xué)》這本書中提及:
- 要讓某個物體易于識別,就用簡單的幾何圖形來畫它。這會讓構(gòu)成物體的幾何離子更明顯,從而使人更快、更輕松地識別該物體。
- 多用二維元素,少用三維元素。大腦以二維形式接收人眼觀察到的信息,因此屏幕上的三維圖形可能會減慢識別和理解的速度。
輕擬物立體圖標(biāo)可以用,但需適量,切忌過猶不及。
云產(chǎn)品的官網(wǎng)設(shè)計(jì)趨同化是一個比較明顯可見的例子,此類官網(wǎng)都屬于軟件服務(wù)類產(chǎn)品官網(wǎng),其他常見官網(wǎng)類型還有企業(yè)官網(wǎng)、電商官網(wǎng)(B2C\B2B\C2C\D2C\O2O)、門戶網(wǎng)站、綜合服務(wù)型網(wǎng)站等等。
一、萬能的 "3W1H"法則
在任何事情開始之前,我們都要找到方法和思路,幫助我們順利的推進(jìn)項(xiàng)目,這里我又要拿出萬能法則了,這是一個基本思路,"3W1H"=What、When、Why、How。
What
- 設(shè)計(jì)官網(wǎng)的目的是什么?你要做的是什么類型的官網(wǎng)?
- 目標(biāo)用戶是誰?他們想要在網(wǎng)站上獲取什么信息?
When
- 目標(biāo)用戶何時會想要訪問網(wǎng)站,存在幾種可能觸發(fā)的場景?
Why
- 目標(biāo)用戶為什么會訪問網(wǎng)站?
- 為什么沒有促成轉(zhuǎn)化?
How
- 用戶如何搜索到該網(wǎng)站?
- 如何在網(wǎng)站上快速找到有價值的信息?
- 如何操作使用?
好的設(shè)計(jì)是能捕捉到用戶心智的設(shè)計(jì)。設(shè)計(jì)不僅需要有強(qiáng)邏輯性,還需要明白用戶為何使用、如何使用。我們需要了解用戶每次每個行為背后的動機(jī)和認(rèn)知是如何的。想他所想,才可以幫助產(chǎn)品/企業(yè)最大程度的觸達(dá)用戶。
二、官網(wǎng)設(shè)計(jì) SOP
我們根據(jù)以往經(jīng)驗(yàn)的總結(jié),沉淀了一套官網(wǎng)設(shè)計(jì)的標(biāo)準(zhǔn)流程,同時針對產(chǎn)品類官網(wǎng)我們定義了一套標(biāo)準(zhǔn)化官網(wǎng)模版,面對矩陣式的家族產(chǎn)品,都可以套用該模版以保證其統(tǒng)一性和搭建效率。
那我們以公司企業(yè)官網(wǎng)的改版案例帶入來看看如何去做官網(wǎng)的視覺升級以及官網(wǎng)設(shè)計(jì)的標(biāo)準(zhǔn)流程。
1. 洞察 & 創(chuàng)意
① 項(xiàng)目背景
GTech 佳應(yīng)科技是數(shù)字化零售與電商技術(shù)服務(wù)商,業(yè)務(wù)遍布中國、新加坡、馬來西亞及印尼等多個國家。公司旗下的 SpeedShop 系列產(chǎn)品,其中 speedshop commerce 是企業(yè)級電商業(yè)務(wù)平臺,為全球品牌量身打造,助力品牌業(yè)務(wù) DTC 全球化拓展;還有 B2B 數(shù)字化平臺,助力企業(yè)實(shí)現(xiàn)端到端、全鏈路營銷閉環(huán)和業(yè)務(wù)運(yùn)營在線化。
隨著公司產(chǎn)品線的戰(zhàn)略調(diào)整以及公司業(yè)務(wù)的不斷發(fā)展,原有官網(wǎng)設(shè)計(jì)及內(nèi)容架構(gòu)已經(jīng)無法承載及精確傳遞新的企業(yè)發(fā)展藍(lán)圖,我們需要通過全新的品牌傳達(dá),來迭代用戶對我們的品牌認(rèn)知。
② 競品分析
公司分為產(chǎn)品部門和項(xiàng)目實(shí)施部門,從產(chǎn)品定位來看,競品公司是 shopline、shopify、bigcommerce 等 SaaS 建站公司,從項(xiàng)目來看,競品公司是商派、百盛、伯俊等 IT 項(xiàng)目公司。我們分別對其進(jìn)行了視覺及網(wǎng)站結(jié)構(gòu)、內(nèi)容的分析,從而得出以下結(jié)論:
第一,是清晰有條理的內(nèi)容及網(wǎng)站結(jié)構(gòu),明確的傳達(dá)出公司產(chǎn)品能力及項(xiàng)目實(shí)施能力,抓住差異化的點(diǎn)去突出描述,讓用戶能夠明確認(rèn)識到我們與他們的不同之處,從而幫助及推動用戶做選擇;
第二,是商業(yè)化產(chǎn)品是公司核心價值的體現(xiàn),我們所有的產(chǎn)品都支持多語言,官網(wǎng)的視覺語言也需要與國際接軌。
③ 用戶畫像
從訪問意圖上來看,可簡單分為兩類:尋求合作、瀏覽了解。
不同用戶在網(wǎng)站上瀏覽的重點(diǎn)是不同的,對于面試者,他們關(guān)注公司介紹及業(yè)務(wù)范圍,在面試時更加有的放矢,同時也考察是否符合自己的求職目標(biāo)。對于公司員工,需要關(guān)注公司的產(chǎn)品動向,最新戰(zhàn)略。對于核心用戶-中小企業(yè)及大企業(yè)客戶,需要通過官網(wǎng)上的業(yè)務(wù)范圍和產(chǎn)品功能介紹,去和自己公司的需求進(jìn)行匹配,同時會查看客戶案例及背書,當(dāng)基本符合訴求的時候就會發(fā)起咨詢,所以官網(wǎng)上的意圖傳遞需要精準(zhǔn)明確。
④ 企業(yè)/產(chǎn)品理念
我們訪談了公司了領(lǐng)導(dǎo)層及產(chǎn)品負(fù)責(zé)人,對齊了大家對公司及產(chǎn)品的定位及發(fā)展愿景,提煉出了 3 個關(guān)鍵詞"國際化、商業(yè)化、數(shù)智化",同時會作為企業(yè)官網(wǎng)的底層內(nèi)核。
⑤ 設(shè)計(jì)趨勢
我們可以輕易的從網(wǎng)上獲取到近些年的網(wǎng)站設(shè)計(jì)趨勢,比如新極簡主義、超大文本排版、交互式網(wǎng)站、以 3D 場景或者動畫展示為主題、抽象插畫(以圖形、符號為主)、流體漸變、彌散柔光、玻璃風(fēng)格等等,在了解了這些形式之后,我們結(jié)合實(shí)際需要展示的內(nèi)容以及后續(xù)維護(hù)的靈活性、拓展性,去進(jìn)行方案設(shè)計(jì)。
⑥ 頭腦風(fēng)暴
企業(yè)官網(wǎng)與市場部、產(chǎn)品部、銷售部息息相關(guān),我們邀請了相關(guān)同事一起進(jìn)行"頭腦風(fēng)暴",另外我們還組織了一場外援腦暴,邀請了合作公司的幾位同事在線參與,目的是想了解,用戶究竟想要在我們的官網(wǎng)上看到哪些內(nèi)容,優(yōu)先級是怎樣的?
內(nèi)部訴求
「你希望在官網(wǎng)展示哪些內(nèi)容,并進(jìn)行優(yōu)先級排序」
「選出能體現(xiàn)企業(yè)文化的圖片」
「你心中好的企業(yè)官網(wǎng)是怎樣的?哪些官網(wǎng)你覺得設(shè)計(jì)的很棒?」
外部訴求
「你希望在官網(wǎng)看到哪些內(nèi)容,并進(jìn)行優(yōu)先級排序」
「哪些內(nèi)容或是數(shù)據(jù)讓你產(chǎn)生興趣,并想與我們進(jìn)一步聯(lián)系」
「你覺得官網(wǎng)上還缺少什么內(nèi)容嗎?」
所有的 idea 收集完成后,我們需要聚合、提取出有價值有共性的點(diǎn)進(jìn)行后續(xù)的方案設(shè)計(jì)的。
⑦ 產(chǎn)出概念
經(jīng)過各種維度的調(diào)研之后,需要將提煉出的關(guān)鍵字、代表色融入到設(shè)計(jì)中,更直觀的進(jìn)行比對。我們用 2 周的時間產(chǎn)出了 3 稿方案進(jìn)行全公司范圍的投票,加之領(lǐng)導(dǎo)層的投票,最終一錘定音。
定稿設(shè)計(jì)解析
「顏色」
舊版的視覺語言以天藍(lán)色、彩色插畫進(jìn)行構(gòu)建,對于專業(yè)度、國際化、數(shù)智化的感知力不足,新版的配色使用深藍(lán)、黑、白、淺灰,深藍(lán)色所傳達(dá)的是"冷靜、睿智、專業(yè)"的;黑色更增加了"神秘而炫酷"的科技感,白色、淺灰用以調(diào)和深藍(lán)和黑色的壓抑感,讓整體視覺平衡且具有呼吸感。
「框架」
我們定義了一套標(biāo)準(zhǔn)化官網(wǎng)模版,保證矩陣式的家族產(chǎn)品官網(wǎng)的統(tǒng)一性和搭建效率。模版不會限制風(fēng)格,每個產(chǎn)品在框架結(jié)構(gòu)層根據(jù)規(guī)范,使用統(tǒng)一的文字層級、柵格系統(tǒng)、組件布局、交互規(guī)則,視覺層都可以根據(jù)產(chǎn)品定位發(fā)散設(shè)計(jì),確保讓每個產(chǎn)品都能有個性化的差異設(shè)計(jì),從而提升辨識度。
2. 設(shè)計(jì) & 定義
① 制定框架
市場部的同事會根據(jù)討論提供最終的網(wǎng)站結(jié)構(gòu)圖。
② 內(nèi)容文案
網(wǎng)站結(jié)構(gòu)確定后,需要填充每個頁面的內(nèi)容,并且對于文案進(jìn)行反復(fù)斟酌,我們需要根據(jù)預(yù)設(shè)的人物性格,進(jìn)行情感化表達(dá)。清晰明確的語言表達(dá)能夠讓用戶更容易理解;情感化的措辭更加親切,能拉近與用戶的距離;全站統(tǒng)一的文案,能讓用戶感受到一致的體驗(yàn)和專業(yè)性。好的文案和內(nèi)容,就像是在官網(wǎng)的框架(骨架)之上賦予血肉之軀。
另外,我們提供中、英文雙語,要考慮語境去翻譯文字,使得不同國家的用戶都能準(zhǔn)確理解官網(wǎng)所傳遞的信息。
*下圖為產(chǎn)品市場部的同事在 wiki 上維護(hù)的官網(wǎng)內(nèi)容。
③ 設(shè)計(jì)排期
與此同時,設(shè)計(jì)會在 wiki 上建立設(shè)計(jì)排期表,市場部的同事將頁面內(nèi)容準(zhǔn)備好的時候,Content 列會標(biāo)記為"DONE",此時設(shè)計(jì)師可以進(jìn)行排期,將頁面設(shè)計(jì)狀態(tài)更新為"DONE"時,前端工程師就可以開始了。這樣,項(xiàng)目相關(guān)者可以看到每個頁面的設(shè)計(jì)和開發(fā)負(fù)責(zé)人、設(shè)計(jì)起始時間,開發(fā)起始時間,使得官網(wǎng)項(xiàng)目的管理更加有序直觀。
④ 定義規(guī)則
明確頁面適配規(guī)則
主流的 PC 屏幕寬度是 1280px~1920px,我們以 1200px 作為頁面版心進(jìn)行設(shè)計(jì),自適應(yīng)布局到移動端,移動端的設(shè)計(jì)需要注意盡量不要過長,突出核心內(nèi)容,次要信息可以折疊或者通過橫向滑動查看。
明確每個頁面的交互動效
網(wǎng)站的設(shè)計(jì),從點(diǎn)到面再到點(diǎn),從視覺到交互事無巨細(xì)。比如頁面滾動時文字和圖片如何展示、按鈕的交互、輪播 banner 的切換效果及速度等等。設(shè)計(jì)師首先需要了解你所想要的動效能否被實(shí)現(xiàn),并將你想要的效果傳達(dá)給開發(fā),達(dá)成一致。
簡單說下基礎(chǔ)動效,這個最常用最實(shí)用。在 css 里 animation-name 定義要使用哪種動畫關(guān)鍵幀,animation-delay 是設(shè)置動畫開始之前的延遲時間,animation-direction 定義了播放動畫的方向,animation-duration 定義了動畫的持續(xù)時間,animation-iteration-count 定義動畫的播放次數(shù),animation-timing-function 定義的是動畫的變速效果。
我們前端目前是引用了 animate.css,js 文件會控制標(biāo)記了 animation 的元素進(jìn)入到 viewport(視口)時,元素自下而上漸顯展示。在設(shè)計(jì)師具備基礎(chǔ)知識的情況下,再去跟前端溝通想要的效果,會事半功倍。
3. 上線 & 驗(yàn)證
① 設(shè)計(jì)走查
設(shè)計(jì)稿一般會分批次交付,開發(fā)也是在第一批設(shè)計(jì)交付的時候開始正式加入,第二批設(shè)計(jì)稿完成前第一批交付的就開發(fā)完成上到開發(fā)環(huán)境,設(shè)計(jì)師在此時就可以開始走查,一些全局性的問題在此時提出,后續(xù)再開發(fā)的時候就可以避免重復(fù)修改,也能提前和開發(fā)磨合想法,這樣后期的效率會提升很多。
走查過程中我們會在 wiki 建立走查表,如下:
② 網(wǎng)站埋點(diǎn)
需要注意的是,中國 PIPL《個人信息保護(hù)法》出臺之后,如果繼續(xù)按照以往的認(rèn)知使用 GA 分析工具,那你就可能會涉及數(shù)據(jù)出境的問題了。因?yàn)? GA 的數(shù)據(jù)中心在中國沒有布點(diǎn),那我們通過 GA 獲取的用戶行為數(shù)據(jù),最終就是存儲到境外的數(shù)據(jù)中心,這也就造成了前面說的問題。所以為了不要給公司帶來不必要的麻煩,我們可以使用國內(nèi)的第三方埋點(diǎn)服務(wù)商。
③ 發(fā)布上線
發(fā)布之前,我們需要檢查走查表上記錄的問題是否都被解決,并且協(xié)同市場同事再進(jìn)行最后一次的文案復(fù)查,一切就緒之后就可以提交上線申請。網(wǎng)站正式上線之后也需要第一時間再全部 review 一遍,避免發(fā)布過程中產(chǎn)生了 bug 或數(shù)據(jù)遺漏。
④ 數(shù)據(jù)復(fù)盤
網(wǎng)站上線后,我們需要對比改版前后的數(shù)據(jù)變化,利用數(shù)據(jù)分析發(fā)現(xiàn)問題并著眼于用戶訪問過中的流失點(diǎn),進(jìn)行持續(xù)的運(yùn)營調(diào)整和設(shè)計(jì)調(diào)整。
網(wǎng)站改版總結(jié)
期望這次的網(wǎng)站升級更為精準(zhǔn)的將公司戰(zhàn)略傳達(dá)至用戶,并建立"國際化、商業(yè)化、數(shù)智化"的企業(yè)形象,讓用戶形成認(rèn)知,并產(chǎn)生價值認(rèn)同,從而提升企業(yè)的行業(yè)影響力。
以上就是我們做官網(wǎng)升級全流程,靜態(tài)網(wǎng)站的設(shè)計(jì)相對動態(tài)網(wǎng)站的流程簡單很多,動態(tài)網(wǎng)站比如內(nèi)容型的知乎這種內(nèi)容平臺,用戶需要注冊登錄、發(fā)布問答、評論等功能型的網(wǎng)站,或是品牌電商官網(wǎng)有標(biāo)準(zhǔn)的購物、售后流程。除了網(wǎng)站的視覺效果設(shè)計(jì),交互體驗(yàn)的設(shè)計(jì)會花費(fèi)更多的時間與精力。
寫在最后
設(shè)計(jì)師并不只是在"設(shè)計(jì)",不要只流于表面,要對內(nèi)在進(jìn)行深層的探索與思考,才能讓設(shè)計(jì)更有價值。官網(wǎng)的設(shè)計(jì)及升級也不僅僅是設(shè)計(jì)師的事情,需要跨部門協(xié)同開發(fā)、運(yùn)營一起,分工明確,各自的工作計(jì)劃、進(jìn)度都公開透明,可供任何相關(guān)者查閱。
最后,在做任何設(shè)計(jì)之時,請問問自己以下幾點(diǎn)我們做到了嗎?
- 做足功課,才能高瞻遠(yuǎn)矚
- 不盲目跟隨趨勢,尋求差異化,出奇制勝
- 不要為了設(shè)計(jì)而設(shè)計(jì),符合企業(yè)/產(chǎn)品內(nèi)核最重要
- 讓你的設(shè)計(jì)不言而喻
美好的設(shè)計(jì)源于我們的熱愛,以及足夠的了解。讓我們做出更有靈魂的設(shè)計(jì)吧!
作者:Gtech UED
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請?jiān)L問:網(wǎng)站技術(shù)