2016-12-31 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
2016年末，各路APP也紛紛展開一輪輪的數(shù)據(jù)廝殺，從不同的視角闡述過去一年的精彩故事。而坐擁龐大用戶數(shù)據(jù)的QQ空間，在這個(gè)既難忘又不舍的2016年，用戶的故事將會(huì)被如何演繹，在寒冬帶給用戶怎樣的溫暖回憶呢？
讓根深蒂固的空間形象煥發(fā)新生，這勢(shì)必要跳出固有的思維。我們歷經(jīng)多輪腦暴，逐層拆解空間內(nèi)容，輸出“空間、遠(yuǎn)近、門、世界、禮物、源泉、永恒……”等接近百個(gè)關(guān)鍵詞，最終聚焦在“溫度”與“自我”兩個(gè)維度，希冀挖掘用戶自身的故事，展現(xiàn)空間產(chǎn)品的溫暖情懷。
圍繞著“溫度”與“自我”，繼續(xù)拓展出“書本、午后、回憶、穿越、斗轉(zhuǎn)、星移”等關(guān)鍵詞，最終取“時(shí)光”諧音，融合“采擷”之意，確立了“拾光2016”的概念。
此次希望打破插圖所營(yíng)造的“虛擬世界”，以實(shí)拍的視頻營(yíng)造更真實(shí)的氛圍。午間的陽(yáng)光、白色紗窗、實(shí)木桌面給內(nèi)容鋪墊了溫暖的基調(diào)；書本、日歷、拍立得等小物件，作為內(nèi)容的沉淀對(duì)象。生活中的光影瞬間，在溫暖的小角落予以展示，表達(dá)“你我TA的空間回憶”。
打造用戶的“參與式體驗(yàn)”
畫面內(nèi)容以用戶的“第一視角”來(lái)呈現(xiàn)，營(yíng)造用戶“自身”翻看回憶的氛圍。即：由“視覺引導(dǎo)”到“內(nèi)容展示”的過程。觀看體驗(yàn)是由“觀看+互動(dòng)”兩次獲知的過程組成，最后將這兩層信息重新編碼[1]。用戶在此體驗(yàn)過程中增強(qiáng)了參與感，可以“身臨其境”地參與到敘事場(chǎng)景之中，與內(nèi)容即時(shí)地“交流”，增強(qiáng)內(nèi)容的感知與認(rèn)同感[2]。
在拍攝過程中，需保持主畫面的絕對(duì)靜止，對(duì)局部?jī)?nèi)容進(jìn)行動(dòng)態(tài)表現(xiàn)（如：金魚在游動(dòng)、窗簾在擺動(dòng)），讓看似靜態(tài)的畫面“活起來(lái)”。采用Sony A7S II - 4K 30fps ，借助 F2.8大光圈，足以讓背景內(nèi)容完美虛化，讓畫面呈現(xiàn)豐富的層次感。強(qiáng)大的視頻寬容度，給后期的調(diào)色、內(nèi)容合成、重新構(gòu)圖都帶來(lái)諸多便利。
1、以“時(shí)鐘”的滴答轉(zhuǎn)動(dòng)掀開2016空間扉頁(yè)
2、用“書”喻人，沉淀過往，敘說(shuō)你的2016空間故事
3、精美的日歷與你的第一條說(shuō)說(shuō)結(jié)合，完美的詮釋了何謂“歷歷在目”
4、木質(zhì)音樂盒與旋轉(zhuǎn)移動(dòng)的木偶相得益彰的展現(xiàn)了每一份禮物的美好，代表著每一個(gè)傾注真心的私人訂制
5、拍立得拍出空間精彩瞬間，記錄“第一個(gè)空間訪客”，延續(xù)“瞬間感動(dòng)”，讓友誼觸手可及
6、集成“智能回憶優(yōu)質(zhì)相片”，鐫刻于木質(zhì)相框，給每個(gè)人的“拾光集”
主視覺由文字內(nèi)容來(lái)承載，字體結(jié)構(gòu)粗細(xì)有變、結(jié)構(gòu)豐富而飽滿，讓畫面更有敘事之感。拆分字體中的某些結(jié)構(gòu)做虛實(shí)的輪播切換，一方面營(yíng)造內(nèi)容在“呼吸”的氛圍，另外體現(xiàn)“記憶的虛實(shí)”之感。
視頻影調(diào)風(fēng)格希望營(yíng)造清新、通透的感覺，這里將主色調(diào)設(shè)為暖黃色，在背景及次要畫面部分，采用淺綠色予以點(diǎn)綴，保證畫面的冷暖平衡。
在loop視頻的后期設(shè)計(jì)中，為避免重復(fù)視頻所造成的畫面跳閃，翻書、翻日歷、拍立得的場(chǎng)景，背景微動(dòng)保持5s以內(nèi)的情況下，將視頻“正+反對(duì)接”形成一個(gè)完整的循環(huán)；禮物盒的場(chǎng)景，讓小猴子在視頻的入點(diǎn)和出點(diǎn)保持同一位置，從而實(shí)現(xiàn)內(nèi)容循環(huán)時(shí)無(wú)縫連接。（避免文件過大，此處gif已做加速處理）
在入場(chǎng)視頻結(jié)束后，標(biāo)題內(nèi)容、用戶信息以“輕動(dòng)畫”的形式，依次出現(xiàn)在承載物上，讓信息以更緩和、有層次的方式呈現(xiàn)。
為了帶給用戶更順暢的體驗(yàn)過程，視頻背景的設(shè)計(jì)、開發(fā)實(shí)現(xiàn)的過程，歷經(jīng)反復(fù)幾十次的修改與打磨。在視覺上呈現(xiàn)無(wú)縫對(duì)接，除了后臺(tái)預(yù)加載文件，還在文件輸出做了各種嘗試。
最初，使用一條完整視頻，在需要循環(huán)的位置，通過premiere中插入mark標(biāo)記，開發(fā)通過讀取mark的信息實(shí)現(xiàn)視頻循環(huán)。但此方式經(jīng)測(cè)試后發(fā)現(xiàn)，偶爾會(huì)無(wú)法拾取mark點(diǎn)，或拾取位置不準(zhǔn)等問題，第一次的嘗試就此失敗。
然后，嘗試分段輸出視頻，由于視頻view在相鄰場(chǎng)景切換時(shí)，畫面加載過程中會(huì)閃黑，也嘗試截取每段視頻的第一幀，作為靜態(tài)畫面來(lái)占位，然后加載入場(chǎng)動(dòng)畫、循環(huán)播放loop動(dòng)畫，但經(jīng)過多番測(cè)試，畫面依然會(huì)閃爍。
此處飆淚略過N種技術(shù)實(shí)現(xiàn)策略......
最后，經(jīng)過多方協(xié)商與測(cè)試，在ios側(cè)比較理想的方式是：“第一幀靜態(tài)圖占位+入場(chǎng)第一幀200ms buffer time +入場(chǎng)動(dòng)畫 +loop動(dòng)畫+N次循環(huán)loop動(dòng)畫 ”。以訪客場(chǎng)景為例，首先，播放入場(chǎng)的第一幀畫面，保證背景信息的展示，此時(shí)后臺(tái)開始讀取200ms的第一幀定格；然后，播放拍照的入場(chǎng)動(dòng)畫；緊接著播放loop動(dòng)畫；最后，loop動(dòng)畫會(huì)在背景不斷重復(fù)，以達(dá)到流暢的觀看體驗(yàn)。最終的音樂方案，選擇一條節(jié)拍精簡(jiǎn)的底樂在背景重復(fù)播放，為畫面增添輕松愉悅氛圍。
從創(chuàng)意到設(shè)計(jì)執(zhí)行再到技術(shù)實(shí)現(xiàn)，整個(gè)項(xiàng)目團(tuán)隊(duì)合力推動(dòng)，力求在有限的時(shí)間內(nèi)，打造最流暢而又飽有情感化的設(shè)計(jì)。2016年，不論你過得如何，通過飽有溫度的畫面，來(lái)承載用戶的信息給回憶增溫，這就是你我TA的“2016拾光影像”。
參考文獻(xiàn)
[1] Information Resources Management Association.Web-based Education:
Concepts, Methodologies,Tools and Applications(Vol.1)[M].New
York:Information Science Reference,2010:1754-1758
[2] 張新磊，基于分布式認(rèn)知理論的互動(dòng)影像設(shè)計(jì)探索[J].《裝飾》2014，5
藍(lán)藍(lán)設(shè)計(jì)( www.chinatradebeam.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.chinatradebeam.com