大廠如何做改版設(shè)計?京東云官網(wǎng)視覺升級實戰(zhàn)復(fù)盤!
大廠的設(shè)計改版流程是怎樣的?本文從京東云的視覺改版案例出發(fā),手把手帶你認識完整系統(tǒng)的改版流程。
一、升級背景
- 京東云官網(wǎng)作為京東云對外唯一官方門戶,并承載整個云業(yè)務(wù)售前及售中的核心渠道,是用戶接觸京東云的首要渠道;
- 京東云作為京東科技集團統(tǒng)一的技術(shù)服務(wù)品牌,線上頁面風格元素在快速更迭互聯(lián)網(wǎng)背景下較落后,所以本次視覺設(shè)計重要使命之一是探索前沿的設(shè)計趨勢,對京東云品牌風格進行全新升級;
- 隨著京東云的不斷發(fā)展,用戶群體擴大及用戶需求的變更,原有官網(wǎng)內(nèi)容架構(gòu)單一無法打動用戶查看轉(zhuǎn)化,需針對現(xiàn)有用戶瀏覽和閱讀習慣對官網(wǎng)首頁內(nèi)容進行結(jié)構(gòu)上的調(diào)整和更新。
京東云官網(wǎng)平臺的產(chǎn)品是聯(lián)系用戶的載體,平臺提供產(chǎn)品、服務(wù)、輸出各種信息,用戶通過我們的官網(wǎng)獲取各種信息,咨詢對比服務(wù)等,從而最終購買我們的產(chǎn)品。
二、設(shè)計分析
1. 發(fā)現(xiàn)設(shè)計問題
舊版首頁與產(chǎn)品詳情頁面
首先是設(shè)計分析,因為只有發(fā)現(xiàn)了平臺現(xiàn)有問題,挖掘用戶痛點,才能有方向有思路去解決它;
首頁:最重要的首屏信息量很大,有主推的廣告位、特價產(chǎn)品展示、KA 品牌案例展示等,設(shè)計初期考慮充分利用首屏空間,展示更多使其抓住用戶感興趣內(nèi)容點,最終形成有效轉(zhuǎn)化。上線完成后通過數(shù)據(jù)對比首屏除 Banner 區(qū)域外,其它信息點擊率較低,我們提供了這么多信息在首屏是用戶想看的嗎?
產(chǎn)品詳情頁:內(nèi)容空洞沒有任何產(chǎn)品的優(yōu)勢價值體現(xiàn),一堆文本排列但提供給用戶有效信息少之又少。
問題走查
通過內(nèi)部走查及外部調(diào)研匯總的結(jié)果來看,問題主要集中在:體驗差、不好找、看不懂、缺少量化標準這 4 類,比如:行業(yè)屬性不突出、科技感不足、首頁過于促銷化、內(nèi)容單一等等問題。
2. 確定優(yōu)化目標
有了上述提出的一些問題,就要去解決它,從體驗設(shè)計出發(fā),確定優(yōu)化目標。
從現(xiàn)有問題中進行拆解,比如上圖左側(cè)為提出的問題,右邊是通過問題進行設(shè)定的目標。
如"網(wǎng)站缺少科技技術(shù)元素、貨架營銷感重",通過強化科技屬性增加動效、交互形式,突出科技元素;
如"內(nèi)容展示無重點不利于閱讀",通過走查競品看競品是如何展示的,我們?nèi)绾卧傧蚯耙徊秸故咀陨淼奶厣珡亩町惢故荆?/p>
3. 用戶分析
大部分 B 端平臺用戶基本分 3 類:
第 1 類:潛在大企業(yè)用戶,到訪目的是搜尋、調(diào)研可靠長期的服務(wù)/產(chǎn)品;
第 2 類:潛在中、小企業(yè)用戶,到訪目的可能是搜尋比較低成本的服務(wù)/產(chǎn)品;
第 3 類:潛在行業(yè)個人從業(yè)者,到訪目的是搜尋比較廉價/短期服務(wù)/產(chǎn)品或個人測試使用;
京東云用戶群體主要是面向:中小企業(yè)、個人開發(fā)者、以及一些高校學生使用。
中小企業(yè)很多是因為信任京東品牌而來的,是帶有一定的信任感,關(guān)注的產(chǎn)品是否穩(wěn)定安全、使用過程中有問題售后是否能夠快速得到響應(yīng)。
個人開發(fā)者及高校學習,除安全穩(wěn)定外,更多追求的是物美價廉。
因此,設(shè)計中我們需要考慮如何給用戶傳遞出:安全、技術(shù)、服務(wù)、信賴的感覺。
4. 設(shè)計關(guān)鍵詞
① 頭腦風暴
設(shè)計之前小組進行了幾輪腦暴,結(jié)合自身品牌、用戶分析、產(chǎn)品功能特點,由小組人員討論:"你認為的京東云"應(yīng)該有哪些關(guān)鍵詞組成?
關(guān)鍵詞查找
57 人投票結(jié)果
并進行二次篩選、線上線下各部門不同人員投票、總結(jié),最終得出:數(shù)智、生態(tài)、供應(yīng)鏈、安全等關(guān)鍵詞。
② 關(guān)鍵詞拆解
通過系列關(guān)鍵詞和行業(yè)特征,從我們面向的中小企、各類產(chǎn)業(yè)、城市的新視角為核心"數(shù)智化"作為第一個關(guān)鍵詞;
從決策鏈路和用戶分析我們總結(jié)了第二個關(guān)鍵詞"安全";基于新生態(tài)搭建的愿景和定位,我們總結(jié)了第 3 個關(guān)鍵詞"供應(yīng)鏈"。
其次是關(guān)鍵詞轉(zhuǎn)化,落地我們視覺上如何表達這幾個關(guān)鍵詞呢?
首先是數(shù)智化:顧名思義就是數(shù)字+智能,由此可以轉(zhuǎn)化為科技;
如何表達安全呢?讓用戶對我們的品牌形成信賴,在定義頁面顏色時增加自然暖色,盡量減少使用深色系,采用淺色作為背景,減少與用戶之間距離感;
供應(yīng)鏈:鏈接各個渠道搭建整個生態(tài)場景。
③ 收集情緒版
情緒版的目的是輔助展現(xiàn)最終視覺表達效果,幫助設(shè)計師找到合適的視覺演進方向。根據(jù)搜集的情緒版,對設(shè)計關(guān)鍵詞有大概的表達視覺意向。
數(shù)智化-科技:我們對于科技的理解是未來的、智能的,所以定位的視覺表現(xiàn)為:空間的通透以及一些超現(xiàn)實的表現(xiàn)技法;圖形元素用一些簡單的幾何圖形;然后適當增加動效來增強對科技感的詮釋。
安全-信賴:安全的最高境界是信賴,讓用戶感覺安全舒適,所有的元素要貼近自然,符合大眾對于安全的認知。減少使用較深的顏色,減少使用較尖銳的形狀,對于材質(zhì)的使用也偏向于柔和,盡量為用戶呈現(xiàn)出輕松放松的感覺。
供應(yīng)鏈-場景:作為鏈接整個供應(yīng)鏈和整個生態(tài)的橋梁紐帶,我們希望做到的是共贏,而我們也是希望在這過程中,能夠表達出友好的態(tài)度來面向所有人,給需求多樣化的企業(yè)提供開放共生打造更有活力的生態(tài)場景。
通過情緒版提取視覺應(yīng)用部分,最終視覺風格基調(diào)為:輕盈、微質(zhì)感的淺色科技風格;通過 3D 幾何、發(fā)光鏈接、透明空間進行"形"的組合。
5. 視覺探索
在進行視覺執(zhí)行過程中并非一蹴即至,而是不斷改進調(diào)整,視覺元素與畫面場景呈現(xiàn)比例、主次層級也需不斷探索和演進。
經(jīng)過初步視覺探索、討論,我們發(fā)現(xiàn)場景模型離理想差距較大,重點突出供應(yīng)鏈主題、但缺少行業(yè)特性及科技感、主次層級關(guān)系模糊、難以及形成規(guī)范化的設(shè)計語言,所以不能完全滿足設(shè)計目標;
既然有了改動方向與目標下個階段融入產(chǎn)品與科技結(jié)合的場景,將更多的供應(yīng)鏈元素融入到背景。突出主題產(chǎn)品,弱化輔助元素,使"形"更輕盈精細化的質(zhì)感與行業(yè)屬性。
根據(jù)初稿進行修改討論敲定設(shè)計方案:實現(xiàn)主元素與畫面場景呈現(xiàn)比例、主次層級優(yōu)化。
產(chǎn)品主圖形:用于單個產(chǎn)品時即簡化底座即可。
模型:要求干脆、嚴謹,將虛擬云形象進行具象表達。
畫面最終以輕盈、微質(zhì)感的淺色科技風,通過 3D 幾何、發(fā)光鏈接、透明空間進行"形"的組合。達到了我們的初期目標。
6. 動效設(shè)計
本次官網(wǎng) Banner 及產(chǎn)品矩陣樓層嘗試引入動效設(shè)計,在確保動效的必要性與合理性上,我們在動效設(shè)計上保持了克制,僅通過背景鏡頭劇場式轉(zhuǎn)角變化、數(shù)據(jù)光效流動傳輸、產(chǎn)品主題慢節(jié)奏微動效的恰當變化,對用戶進行弱打擾的視覺引導(dǎo),將虛擬云計算進行更進一步豐富的場景式具象表達。
產(chǎn)品 icon 設(shè)計中,強化識別及趣味性是本次優(yōu)化的重點,在表現(xiàn)手法上為了增加整體趣味性引入動效,并規(guī)范時長規(guī)范時長為 24 幀。
以恰到好處,不過度設(shè)計,做到不增加操作,不干擾用戶的動效設(shè)計理念。
產(chǎn)品圖標動效:等角透視,光線顏色材質(zhì)比例保持統(tǒng)一
落地到頁面上最終方案敲定:整體頁面為了呼應(yīng)主視覺風格質(zhì)感,功能圖標使用了毛玻璃風格、模塊背景及部分動效使用彌散光感做漸變模糊,目的是打造產(chǎn)品記憶點、優(yōu)化信息層級,這樣使之頁面保持整體感與統(tǒng)一感。
三、視覺延伸與規(guī)范
1. 布局規(guī)范化
為用戶在不同終端的提供更加舒適的界面和適配規(guī)則,官網(wǎng)采用響應(yīng)式布局 RESPONSIVE WEB DESIGN 簡稱為 RWD,可以讓網(wǎng)頁自動的適應(yīng)不同尺寸的顯示器。
為了提高線上各產(chǎn)品線的規(guī)范性一致性及開發(fā)維護成本最低化,采用基礎(chǔ)的 24 柵格簡單便捷的柵格化布局。
響應(yīng)式布局
1680px 以上:版心內(nèi)容區(qū)域 1576px,顯示 PC 頭尾;
1440px~1680px:版心內(nèi)容區(qū)域 1384px,顯示 PC 頭尾;
1280px~1440px:版心內(nèi)容區(qū)域 1192px,顯示 PC 頭尾;
768px~1280px:版心容區(qū)域 1192px,會出現(xiàn)滾動條,顯示 PC 頭尾
768px(包括 768px)以下:寬度為 100%,為 M 端效果,顯示 H5 頭尾
設(shè)計方法
同時為滿足官網(wǎng)不同的業(yè)務(wù)訴求,兼顧 首頁、店鋪、產(chǎn)品詳情 100+產(chǎn)品 Banner 日常運營上線需求對"響應(yīng)效率"的追求,和官網(wǎng)本身對"視覺品質(zhì)"的要求,對適用于產(chǎn)品頁面的 2.5D 圖標進行了全新升級,從顏色、透視、光影、質(zhì)感遵循 3D 場景同等原則。
PC、M 端柵格設(shè)置
PC 端以寬度 1440 舉例:PC 端頁面寬度為 1440px,內(nèi)容區(qū)寬度為 1200px,24 柵格 8px 間距,版心區(qū)域在:1192px,列寬 a=42px,列間距為 i=8px。
M 端以寬度 375 舉例:M 端頁面寬度為 375px,內(nèi)容區(qū)寬度為 343px,24 柵格 4px 間距,版心區(qū)域在:343px,列寬 a=10px,列間距為 i=4px。
2. 視覺統(tǒng)一組件化
為了保持與京東科技品牌對外的統(tǒng)一性,在質(zhì)感上采用統(tǒng)一 3D 設(shè)計規(guī)范,主視覺整體圖形結(jié)構(gòu)由主產(chǎn)品模型、基礎(chǔ)輔助模型、輔助背景組成,以此結(jié)構(gòu)形成統(tǒng)一的視覺構(gòu)成;為了提高執(zhí)行效率提取 3D 組件規(guī)范,后續(xù)目標對所有 banner 圖形統(tǒng)一拆分、重組,利用組件拼裝 Banner 達到快速上線目的。
同時為滿足官網(wǎng)不同的業(yè)務(wù)訴求,兼顧首頁、店鋪、產(chǎn)品詳情 100+產(chǎn)品 Banner 日常運營上線需求對"響應(yīng)效率"的追求,和官網(wǎng)本身對"視覺品質(zhì)"的要求,對適用于產(chǎn)品頁面的 2.5D 圖標進行了全新升級,從顏色、透視、光影、質(zhì)感遵循 3D 場景同等原則。
2.5D 同樣進行的產(chǎn)品組件設(shè)計,滿足日常頁面需求;
3. 視覺規(guī)范化
在視覺建立的過程中統(tǒng)一升級了我們積攢了長達 3 年的組件素材,在后續(xù)的設(shè)計協(xié)作以及設(shè)計復(fù)用時,提供有效指導(dǎo)。將虛擬云產(chǎn)品進行具象表達,不同形式圖標使用不同應(yīng)用場景。
虛擬云產(chǎn)品具象表達
京東云設(shè)計系統(tǒng)秉承開放、靈活、發(fā)展的設(shè)計原則為京東云主站及其他相關(guān)子業(yè)務(wù)提供有效參考。
四、總結(jié)
通過這次升級改版,除了更新我們官網(wǎng)組件設(shè)計同時,在更系統(tǒng)化的整理京東云設(shè)計體系,我們將能力和資源不斷沉淀,形成可快速支持業(yè)務(wù)的設(shè)計工具和資源庫,助力業(yè)務(wù)提效同時也可減輕設(shè)計師壓力。
本次官網(wǎng)視覺風格的改版只是初步探索的開始,我們將持續(xù)關(guān)注業(yè)務(wù)本身,將設(shè)計趨勢與業(yè)務(wù)結(jié)合呈現(xiàn),后期在探索中我們將融入更多的技術(shù)動效,使之更具有科技感,展現(xiàn)更多層面的品牌調(diào)性。
作者:JDTDA
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)