2016年末，各路app也紛紛展開一輪輪的資料厮殺，從不同的視角闡述過去一年的精彩故事。而坐擁龐大使用者資料的qq空間，在這個既難忘又不舍的2016年，使用者的故事将會被如何演繹，在寒冬帶給使用者怎樣的溫暖回憶呢？
讓根深蒂固的空間形象煥發新生，這勢必要跳出固有的思維。我們曆經多輪腦暴，逐層拆解空間内容，輸出“空間、遠近、門、世界、禮物、源泉、永恒……”等接近百個關鍵詞，最終聚焦在“溫度”與“自我”兩個次元，希冀挖掘使用者自身的故事，展現空間産品的溫暖情懷。
圍繞着“溫度”與“自我”，繼續拓展出“書本、午後、回憶、穿越、鬥轉、星移”等關鍵詞，最終取“時光”諧音，融合“采撷”之意，确立了“拾光2016”的概念。
此次希望打破插圖所營造的“虛拟世界”，以實拍的視訊營造更真實的氛圍。午間的陽光、白色紗窗、實木桌面給内容鋪墊了溫暖的基調；書本、月曆、拍立得等小物件，作為内容的沉澱對象。生活中的光影瞬間，在溫暖的小角落予以展示，表達“你我ta的空間回憶”。
打造使用者的“參與式體驗”
畫面内容以使用者的“第一視角”來呈現，營造使用者“自身”翻看回憶的氛圍。即：由“視覺引導”到“内容展示”的過程。觀看體驗是由“觀看 互動”兩次獲知的過程組成，最後将這兩層資訊重新編碼[1]。使用者在此體驗過程中增強了參與感，可以“身臨其境”地參與到叙事場景之中，與内容即時地“交流”，增強内容的感覺與認同感[2]。
在拍攝過程中，需保持主畫面的絕對靜止，對局部内容進行動态表現（如：金魚在遊動、窗簾在擺動），讓看似靜态的畫面“活起來”。采用sony a7s ii – 4k 30fps ，借助 f2.8大光圈，足以讓背景内容完美虛化，讓畫面呈現豐富的層次感。強大的視訊寬容度，給後期的調色、内容合成、重新構圖都帶來諸多便利。
1、以“時鐘”的滴答轉動掀開2016空間扉頁
2、用“書”喻人，沉澱過往，叙說你的2016空間故事
3、精美的月曆與你的第一條說說結合，完美的诠釋了何謂“曆曆在目”
4、木質音樂盒與旋轉移動的木偶相得益彰的展現了每一份禮物的美好，代表着每一個傾注真心的私人訂制
5、拍立得拍出空間精彩瞬間，記錄“第一個空間訪客”，延續“瞬間感動”，讓友誼觸手可及
6、內建“智能回憶優質相片”，镌刻于木質相框，給每個人獨一無二的“拾光集”
主視覺由文字内容來承載，字型結構粗細有變、結構豐富而飽滿，讓畫面更有叙事之感。拆分字型中的某些結構做虛實的輪播切換，一方面營造内容在“呼吸”的氛圍，另外展現“記憶的虛實”之感。
視訊影調風格希望營造清新、通透的感覺，這裡将主色調設為暖黃色，在背景及次要畫面部分，采用淺綠色予以點綴，保證畫面的冷暖平衡。
在loop視訊的後期設計中，為避免重複視訊所造成的畫面跳閃，翻書、翻月曆、拍立得的場景，背景微動保持5s以内的情況下，将視訊“正 反對接”形成一個完整的循環；禮物盒的場景，讓小猴子在視訊的入點和出點保持同一位置，進而實作内容循環時無縫連接配接。（避免檔案過大，此處gif已做加速處理）
在入場視訊結束後，标題内容、使用者資訊以“輕動畫”的形式，依次出現在承載物上，讓資訊以更緩和、有層次的方式呈現。
為了帶給使用者更順暢的體驗過程，視訊背景的設計、開發實作的過程，曆經反複幾十次的修改與打磨。在視覺上呈現無縫對接，除了背景預加載檔案，還在檔案輸出做了各種嘗試。
最初，使用一條完整視訊，在需要循環的位置，通過premiere中插入mark标記，開發通過讀取mark的資訊實作視訊循環。但此方式經測試後發現，偶爾會無法拾取mark點，或拾取位置不準等問題，第一次的嘗試就此失敗。
然後，嘗試分段輸出視訊，由于視訊view在相鄰場景切換時，畫面加載過程中會閃黑，也嘗試截取每段視訊的第一幀，作為靜态畫面來占位，然後加載入場動畫、循環播放loop動畫，但經過多番測試，畫面依然會閃爍。
此處飙淚略過n種技術實作政策……
最後，經過多方協商與測試，在ios側比較理想的方式是：“第一幀靜态圖占位 入場第一幀200ms buffer time 入場動畫 loop動畫 n次循環loop動畫 ”。以訪客場景為例，首先，播放入場的第一幀畫面，保證背景資訊的展示，此時背景開始讀取200ms的第一幀定格；然後，播放拍照的入場動畫；緊接着播放loop動畫；最後，loop動畫會在背景不斷重複，以達到流暢的觀看體驗。最終的音樂方案，選擇一條節拍精簡的底樂在背景重複播放，為畫面增添輕松愉悅氛圍。
從創意到設計執行再到技術實作，整個項目團隊合力推動，力求在有限的時間内，打造最流暢而又飽有情感化的設計。2016年，不論你過得如何，通過飽有溫度的畫面，來承載使用者的資訊給回憶增溫，這就是你我ta的“2016拾光影像”。
參考文獻
[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] 張新磊，基于分布式認知理論的互動影像設計探索[j].《裝飾》2014，5
via:https://isux.tencent.com/qzone-h5-happy-ending.html