2018-11-22
12年的时光里，QQ空间记录了你我TA之间真实、有温度的瞬间。还记得当年的火星文和非主流照片、初中高中到大学的空间相册吗?它不仅承载着数亿用户的美好过往，还是每一代年轻人心中的乌托邦。“总有故事，不负时光”，此次活动主题正是来源于此。我们重新定义空间的品牌形象，通过更青春、活力、趣味化的设计语言，结合空间产品功能玩法，完成一系列的运营设计内容，刷新用户对空间的固有印象，给用户带来不一样的趣味体验。
一. 12周年品牌设定
?
整体品牌创意
字体的设计以“造字工房版黑”为骨骼，原始字体较粗，如果直接用于12周年项目中会略显笨重。一般来说，字体设计有三种常用方法："半圆装饰法、切角装饰法、笔画(细节)添加法"。我们在重新设计字体时，通过造字手法中的“细节添加”，在“横竖撇捺”的笔画端点处添加修饰，与空间品牌设定有更多的融入感。在前期，我们围绕如下3个方向来完成字体设计。
终在方案三的基础上继续细化，此步骤需要遵守五大原则，即：横细竖粗，副细主粗，内细外粗，密细疏粗和交叉减细，其余的文字也按照此规范逐个完成设计。
二. 整合设计运营
在项目执行过程中，我们围绕设定的品牌元素及规范，结合具体的项目需求进行设计应用。在各个子项目中保持品牌风格的延续感与一致性。
创意视频H5
照片也许是回忆青春直接的方式了，杨洋化身空间大使，带领用户来品鉴自己的故事。作为此次活动的重头戏，创意H5的所牵扯的人员及工作量十分庞大，所以在前期针对各个环节都要考虑周到，包括：拍摄脚本的细化、如何跟开发更好地配合输出、接下来交付的内容及时间节点等等。项目后期的各个环节：CP执行、后期制作、开发逻辑、开发预跑数据等内容都是环环相扣，容不得半点疏忽。
2. H5体验流程优化
初的技术方案希望通过在线实时渲染，让用户稍作等待即可观看自己的视频，但实际后台合成时间大概要3-5分钟，这里终方案是通过后台预先渲染视频。
1. 如果有好友分享或生成过视频，会优先展示他们的入口，用户可以先观看好友的故事。
3. 后期制作
终的视频是由开发侧来合成渲染，并不是由设计单独输出一条视频，每个用户都有属于自己独一无二的内容，在项目中也随时克服困难与挑战，保证用户的内容都以好的状态呈现。
01. 视觉风格的设定
为确保项目如期上线，以及终的视觉展示效果，我们与外部CP随时保持沟通。内部设计师对视频的每个场景，逐个确定分镜草图并给出修改意见，确定每个场景的模型、材质、贴图、光影的设计风格，以保证整个影片前后场景的流畅衔接。
视频涉及到多个场景，为确保终效果保持一致，内部设计师会制定灯光、材质规范给执行公司。整体空间以简洁的垂直墙面搭建组合，细节之处用三角元素作点缀，简单的几何形也方便制作微动态效果，让整个场景更加灵动活泼，更好地与12周年的品牌设定相融合。
色彩搭配也继承了空间品牌色，背景的空间设计以黑、白、黄为主基调，配合柔和的白色灯光与磨砂质感的墙面，让空间显得简洁而大气，贴图上灵活运用品牌图形元素，凸显出场景的梦幻基调与时尚感。
02. 让终合成画面更有真实感
由于用户图片与背景视频是分离的，这些内容要后台叠加渲染，终展示的效果难免会有些许不专业，我们也在如下几个维度尽力做到更好。
分层输出设计稿
Picture Mask Layer 用来提供遮罩范围，开发侧通过拾取颜色来做图片遮罩;Final Render Layer交付开发终渲染合成;Tracking Data 用来定位每一帧用户图片的坐标。
用户内容匹配背景画面运动
这里需要计算出图片展示区域内，每一帧的坐标数据，从而让用户图片与背景视频保持一致的运动节奏。通过Mocha反求出这些区域内的坐标，终将坐标文档交付给开发者。
缓慢的镜头运动
