臨感官網(wǎng)設(shè)計(jì)升級(jí)，我們將會(huì)從【流程篇】、【視覺(jué)篇】?jī)蓚€(gè)角度進(jìn)行的復(fù)盤(pán)，本次分享主要從視覺(jué)方向進(jìn)行闡述，下一期由交互伙伴分享流程篇，本次分享主要從視覺(jué)方向進(jìn)行闡述，歡迎大家持續(xù)關(guān)注和探討。
前言
臨感官網(wǎng)設(shè)計(jì)升級(jí)，我們將會(huì)從【流程篇】、【視覺(jué)篇】?jī)蓚€(gè)角度進(jìn)行的復(fù)盤(pán)，本次分享主要從視覺(jué)方向進(jìn)行闡述，下一期由交互伙伴分享流程篇，本次分享主要從視覺(jué)方向進(jìn)行闡述，歡迎大家持續(xù)關(guān)注和探討。
a
01.產(chǎn)品背景
臨感是58同城旗下獨(dú)立品牌，專(zhuān)注于3D空間數(shù)字化服務(wù)，自2017年起臨感作為58同城、安居客的技術(shù)提供方為兩個(gè)平臺(tái)提供了空間自動(dòng)化建模、VR拍攝、VR看房、VR帶看、VR裝修等服務(wù)，累計(jì)服務(wù)用戶(hù)數(shù)過(guò)億，臨感通過(guò)不斷的技術(shù)積累以及對(duì)行業(yè)的理解，正在成長(zhǎng)為3D空間數(shù)字化領(lǐng)域的一流平臺(tái)。隨著B(niǎo)端合作用戶(hù)的激增、業(yè)務(wù)的完善及拓展，最初的臨感官網(wǎng)在設(shè)計(jì)風(fēng)格和框架上，已經(jīng)無(wú)法承載更多業(yè)務(wù)拖展，同時(shí)也無(wú)法詮釋「VR聚合平臺(tái)」這個(gè)概念的訴求。因此，我們?cè)诖似鯔C(jī)之下，由設(shè)計(jì)發(fā)起這次臨感官網(wǎng)改版項(xiàng)目。
舊版存在的問(wèn)題
對(duì)比其他VR競(jìng)品網(wǎng)站，舊版整體框架過(guò)于傳統(tǒng)，設(shè)計(jì)語(yǔ)言陳舊，無(wú)法體現(xiàn)VR的概念。作為VR服務(wù)平臺(tái)，我們需要展現(xiàn)給用戶(hù)的專(zhuān)業(yè)化的一面。
a
02.設(shè)計(jì)目標(biāo)
在項(xiàng)目進(jìn)行前，我們與產(chǎn)品和交互同學(xué)通過(guò)大量的競(jìng)品分析，結(jié)合自身產(chǎn)品的目標(biāo)導(dǎo)向，確立設(shè)計(jì)目標(biāo)：給用戶(hù)酷炫的feel（對(duì)整體復(fù)盤(pán)流程有興趣的伙伴，可以去看之后交互同學(xué)即將發(fā)布的”流程篇“）
1
03.設(shè)計(jì)拆解
視覺(jué)升級(jí)強(qiáng)化品牌認(rèn)知
本次官網(wǎng)的配色方案，延用了最新的定義的《臨感品牌升級(jí)規(guī)范》中的品牌色體系。
首頁(yè)的視覺(jué)主體“百變魔方”的靈感，源自新定義的《臨感品牌升級(jí)規(guī)范》中的臨感CUBE。基于臨感CUBE的形態(tài)，進(jìn)行了3D化再塑造，賦予了臨感CUBE百變的新形態(tài)。
1
定義視覺(jué)基調(diào)
同時(shí)我們與交互同學(xué)們一起找了大量的國(guó)內(nèi)國(guó)外的優(yōu)秀案例進(jìn)行分析參考，在視覺(jué)表現(xiàn)上得到了很大靈感啟發(fā)。（后續(xù)的動(dòng)畫(huà)呈現(xiàn)與風(fēng)格方面，主要參考了2020年的微軟vivo宣傳片中，抽象與現(xiàn)實(shí)結(jié)合的手法。）
2
初期概念稿中的設(shè)計(jì)元素以抽象的幾何體展現(xiàn)，但呈現(xiàn)效果缺失了生活氣息與溫度。
經(jīng)過(guò)不斷的討論與設(shè)計(jì)打磨，最終我們采用了科技與溫度并存，抽象與寫(xiě)實(shí)互補(bǔ)的展現(xiàn)形式。
r
UI
整體UI采用輕量化設(shè)計(jì)，按鈕模仿毛玻璃擬態(tài)效果，使UI與整體動(dòng)畫(huà)更加融洽，在交互與視覺(jué)上體驗(yàn)更好。
s
動(dòng)畫(huà)
為讓動(dòng)畫(huà)銜接更加自然流暢，動(dòng)畫(huà)間無(wú)縫銜接，盡量做到用戶(hù)無(wú)感知的切換體驗(yàn)，我們需要帶著思考去制作。首屏臨感CUBE不同形態(tài)轉(zhuǎn)時(shí)，用戶(hù)產(chǎn)生交互，動(dòng)畫(huà)如何過(guò)度？針對(duì)用戶(hù)在瀏覽時(shí)隨時(shí)的翻頁(yè)的行為，不同模塊動(dòng)畫(huà)如何銜接？用戶(hù)停留在一個(gè)功能，無(wú)交互行為，動(dòng)畫(huà)如何進(jìn)行？帶著以上諸多思考，我們的3D設(shè)計(jì)師陳明經(jīng)過(guò)不斷調(diào)試，最終動(dòng)畫(huà)呈現(xiàn)超出預(yù)期。
a
技術(shù)對(duì)接
技術(shù)對(duì)接時(shí)，我們遇到了整個(gè)項(xiàng)目進(jìn)程中最大的難點(diǎn)，同時(shí)也是最大的阻礙。為讓動(dòng)畫(huà)效果更加飽滿(mǎn)，在燈光材質(zhì)等方面采用了OC渲染，而技術(shù)伙伴做動(dòng)畫(huà)還原時(shí)，無(wú)法讀取到OC數(shù)據(jù)相關(guān)的所有數(shù)據(jù)，于是我們的3D設(shè)計(jì)師與對(duì)接技術(shù)伙伴一起，嘗試了很多不同的導(dǎo)出格式，并不斷轉(zhuǎn)換3D設(shè)計(jì)軟件，還是無(wú)法用技術(shù)還原視覺(jué)動(dòng)畫(huà)。最終我們選擇了折中的方式，采用視頻適配的播放形態(tài)上線(xiàn)。
為做到偽技術(shù)實(shí)現(xiàn)的效果，我們?cè)诿總€(gè)模塊與下一模塊銜接前做了幾秒的循環(huán)動(dòng)畫(huà)，這樣用戶(hù)停留某一模塊無(wú)操作時(shí)，可以銜接播放循環(huán)動(dòng)畫(huà)，讓整個(gè)頁(yè)面的動(dòng)畫(huà)感知更順暢。
d
04.結(jié)語(yǔ)
臨感官網(wǎng)是58UXD首個(gè)用動(dòng)畫(huà)制作的網(wǎng)站，在設(shè)計(jì)上也是新的探索與嘗試。未來(lái)臨感還需要不斷的探索完善，希望用更精彩的視覺(jué)呈現(xiàn)和更友好的產(chǎn)品設(shè)計(jì)，讓用戶(hù)感受科技的溫度。感謝在設(shè)計(jì)的過(guò)程中辛苦付出的3D設(shè)計(jì)師與交互伙伴。
原文地址： 58UDX（公眾號(hào)）
作者：環(huán)鐵藝術(shù)家
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》設(shè)計(jì)沉思錄｜臨感VR官網(wǎng)升級(jí)（視覺(jué)篇）
