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