設(shè)計(jì)沉思錄|臨感VR官網(wǎng)升級(視覺篇)

0 評論 10281 瀏覽 14 收藏 6 分鐘

導(dǎo)語:臨感官網(wǎng)設(shè)計(jì)升級,作者將會從【流程篇】、【視覺篇】兩個(gè)角度進(jìn)行的復(fù)盤。本次分享主要從視覺方向進(jìn)行闡述,下一期由交互伙伴分享流程篇,歡迎大家持續(xù)關(guān)注和探討。

01 產(chǎn)品背景

臨感是58同城旗下獨(dú)立品牌,隨著B端合作用戶的激增、業(yè)務(wù)的完善及拓展,最初的臨感官網(wǎng)在設(shè)計(jì)風(fēng)格和框架上,已經(jīng)無法承載更多業(yè)務(wù)拖展,同時(shí)也無法詮釋「VR聚合平臺」這個(gè)概念的訴求。因此,我們在此契機(jī)之下,由設(shè)計(jì)發(fā)起這次臨感官網(wǎng)改版項(xiàng)目。舊版存在的問題:

設(shè)計(jì)沉思錄|臨感VR官網(wǎng)升級(視覺篇)

對比其他VR競品網(wǎng)站,舊版整體框架過于傳統(tǒng),設(shè)計(jì)語言陳舊,無法體現(xiàn)VR的概念。作為VR服務(wù)平臺,我們需要展現(xiàn)給用戶的專業(yè)化的一面。

02?設(shè)計(jì)目標(biāo)

設(shè)計(jì)沉思錄|臨感VR官網(wǎng)升級(視覺篇)

在項(xiàng)目進(jìn)行前,我們與產(chǎn)品和交互同學(xué)通過大量的競品分析,結(jié)合自身產(chǎn)品的目標(biāo)導(dǎo)向,確立設(shè)計(jì)目標(biāo):給用戶酷炫的feel(對整體復(fù)盤流程有興趣的伙伴,可以去看之后交互同學(xué)即將發(fā)布的”流程篇“)。

03?設(shè)計(jì)拆解

1. 視覺升級強(qiáng)化品牌認(rèn)知

設(shè)計(jì)沉思錄|臨感VR官網(wǎng)升級(視覺篇)

本次官網(wǎng)的配色方案,延用了最新的定義的《臨感品牌升級規(guī)范》中的品牌色體系。

設(shè)計(jì)沉思錄|臨感VR官網(wǎng)升級(視覺篇)

首頁的視覺主體“百變魔方”的靈感,源自新定義的《臨感品牌升級規(guī)范》中的臨感CUBE?;谂R感CUBE的形態(tài),進(jìn)行了3D化再塑造,賦予了臨感CUBE百變的新形態(tài)。

2. 定義視覺基調(diào)

設(shè)計(jì)沉思錄|臨感VR官網(wǎng)升級(視覺篇)

3. 靈感收集

設(shè)計(jì)沉思錄|臨感VR官網(wǎng)升級(視覺篇)

同時(shí)我們與交互同學(xué)們一起找了大量的國內(nèi)國外的優(yōu)秀案例進(jìn)行分析參考,在視覺表現(xiàn)上得到了很大靈感啟發(fā)。(后續(xù)的動畫呈現(xiàn)與風(fēng)格方面,主要參考了2020年的微軟vivo宣傳片中,抽象與現(xiàn)實(shí)結(jié)合的手法。)

4. 設(shè)計(jì)風(fēng)格

設(shè)計(jì)沉思錄|臨感VR官網(wǎng)升級(視覺篇)

初期概念稿中的設(shè)計(jì)元素以抽象的幾何體展現(xiàn),但呈現(xiàn)效果缺失了生活氣息與溫度。

設(shè)計(jì)沉思錄|臨感VR官網(wǎng)升級(視覺篇)

經(jīng)過不斷的討論與設(shè)計(jì)打磨,最終我們采用了科技與溫度并存,抽象與寫實(shí)互補(bǔ)的展現(xiàn)形式。

5. UI

設(shè)計(jì)沉思錄|臨感VR官網(wǎng)升級(視覺篇)

整體UI采用輕量化設(shè)計(jì),按鈕模仿毛玻璃擬態(tài)效果,使UI與整體動畫更加融洽,在交互與視覺上體驗(yàn)更好。

6. 動畫

為讓動畫銜接更加自然流暢,動畫間無縫銜接,盡量做到用戶無感知的切換體驗(yàn),我們需要帶著思考去制作。

  • 首屏臨感CUBE不同形態(tài)轉(zhuǎn)時(shí),用戶產(chǎn)生交互,動畫如何過度?
  • 針對用戶在瀏覽時(shí)隨時(shí)的翻頁的行為,不同模塊動畫如何銜接?
  • 用戶停留在一個(gè)功能,無交互行為,動畫如何進(jìn)行?

帶著以上諸多思考,我們的3D設(shè)計(jì)師陳明經(jīng)過不斷調(diào)試,最終動畫呈現(xiàn)超出預(yù)期。

7. 技術(shù)對接

技術(shù)對接時(shí),我們遇到了整個(gè)項(xiàng)目進(jìn)程中最大的難點(diǎn),同時(shí)也是最大的阻礙。

為讓動畫效果更加飽滿,在燈光材質(zhì)等方面采用了OC渲染,而技術(shù)伙伴做動畫還原時(shí),無法讀取到OC數(shù)據(jù)相關(guān)的所有數(shù)據(jù),于是我們的3D設(shè)計(jì)師與對接技術(shù)伙伴一起,嘗試了很多不同的導(dǎo)出格式,并不斷轉(zhuǎn)換3D設(shè)計(jì)軟件,還是無法用技術(shù)還原視覺動畫。

最終我們選擇了折中的方式,采用視頻適配的播放形態(tài)上線。

為做到偽技術(shù)實(shí)現(xiàn)的效果,我們在每個(gè)模塊與下一模塊銜接前做了幾秒的循環(huán)動畫,這樣用戶停留某一模塊無操作時(shí),可以銜接播放循環(huán)動畫,讓整個(gè)頁面的動畫感知更順暢。

 

作者:楊忠,視覺設(shè)計(jì)師

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗(yàn)設(shè)計(jì)中心

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!