一直以來，星座都深受年輕人喜愛。星座是什么？除了是一個標簽，一個圈子，有時候，更是一種借口，一種寄托。了解了星座，也就讀懂了自己，也讀懂了別人。
12月，UC瀏覽器結合12星座和全新的品牌理念【給的再多，不如懂我】推出了UC星座專版，并推出了一款集格調、技術和傳播于一體的《用星占卜》H5。根據后臺數據統計，在這個H5中，約1/2的用戶選擇了再玩一次，約1/3的用戶進行了分享，一時間，形成病毒性傳播。
今天，UC瀏覽器營銷策劃組聯合設計師、幕后研發，講述我們是如何做出一款讓1/3人點擊分享的H5的。
關于創意——尋找用戶興趣點
由于星座主題本身并不是一個普適大眾的興奮點，而我們希望即使對星座不是那么感興趣的用戶也能夠參與進來，因此我們首先想到的是，如何在結果頁中，讓更多的用戶參與進來。于是，我們開始從時間、環境、星座上，開始分析。
方案1：結果頁給出每個星座的特點。優點：喜歡星座的人會特別喜歡，如同道大叔有眾多的追隨者。缺點：不喜歡星座的人會比較無感。且星座的特點，存在如果準確，即比較難出新意，如果調侃，又會給人不準確的額感覺。:
方案2：結果頁給出每個星座與星座間的匹配值。優缺點與方案1相似。
方案3：結合12月末，給出每個星座每個用戶的得與失。缺點：與新年簽太像。
方案4：創新。現在的8090后，最幸福的不是大富大貴，而是一個火鍋，一頓麻辣燙，一次賴床，一個暖洋洋的被窩等這些可以握在手中的小確幸。于是，我們的方案便出來了。
除了得出一個很接地氣的小確幸，我們我還增加了朋友間的打賞與互損功能。增加朋友間的互動與分享欲望。刺激用戶分享。
關于設計——用寫實和3D模擬浩瀚星空
整體的規劃中，這個H5的結構大概由下面幾個部分組成，第一部分是一個比較宏大的視角展示浩瀚宇宙，樊星閃爍。第二部分特寫聚焦用戶自己的星座，并進行可操作的3D展示。第三部分則是占卜出來的運勢結果，可以與朋友分享和互動。
為了模擬宇宙廣闊的空間感，設計風格上我采用了相對比較寫實的做法。首先將空間分層處理，深邃的藍紫色背景加上斑斕的星云，附上不規則的星光，形成最底層最遠端的宇宙背景。前景和中間層則需要一些漂浮的星球產生近大遠小的效果，他們的作用是造成看起來夸張遙遠的距離感，這些星球則需要用到WebGL技術制造的粒子效果去模擬實現。12星座分布在這些粒子群的內部。
為了從一而終的整體氛圍感，設計師決定在頁面的首屏界面直接使用這個場景作為背景，這是第一次在歡迎界面的首屏嘗試使用了3D的動態背景，也就是上面描述的這個場景，攝像機以較遠的視角在空間中漫游。這個做法使得接下來的操作流程更為整體和一氣呵成，避免了跳轉帶來的斷層感。
關于技術——讓用戶以上帝的視角看星座
國際天文協會（IAU）以傳統天文學為藍本將我們頭頂上的恒星們劃分出了88個星座，而大家熟悉的12星座是這88個星座里面，位置正好處于我們看到的太陽運行軌道（黃道）上的那十二個，環繞地球圍成一圈，因此在H5頁面中我們也將這些星座按實際順序排布在一個圓環上，攝像機（觀測視角）在空間中沿著這個圓環軌道移動。
但問題是，我們似乎都只在地球上見過星座，以3D環繞的上帝視角看起來，一個星座的組成應該是什么樣子的呢？星座里每顆星之間的距離、位置關系應該是怎樣的？事實上，組成星座的每顆恒星間的距離都是極其遙遠而懸殊的。
在查閱了一些資料文獻、天文應用之后，設計師大致得到了各星座內天體間的相對位置，當然這個位置信息是非常模糊的，將其比例微縮到我們可觀測的大小后，通過Blender這個3D軟件將每個星座的結構排列模擬出來，將星座里每顆恒星的具體位置定位到空間里面去。Blender所生成的文件能夠被前端和研發方面直接方便地提取到文件里的內容信息（X,Y,Z軸坐標）方便代碼重構。到這個階段，12個星座的三維化完成了。
將每個星座的坐標確定好之后，接下來開始實現的第二部分——用戶選擇星座并進行下一步操作，我們采用了一個 “理所應當” 的交互形式：鏡頭由遠處拉近，聚焦在所選星座的面前。這里要提到的一點是，在我們重新排列星座中恒星的位置使其三維化之后，它們由一個平面變成了一團毫無章法的亂糟糟的星星，辨識度似乎更低了…為了解決這個問題，在進入所選擇的單獨一個星座展示界面時，我們會默認將這團亂糟糟的星系旋轉到以一個特定的角度朝向你，你會發現熟悉的星座又回來了！是的，那就是他們朝向地球的角度。
以我們平時的視角看起來，星座本身并沒有什么體積感——它們只是天空中一些二維的亮點。這導致了在我們的頁面里面選擇進入某個星座之后，并沒有一個明確的因選擇所帶來轉折的儀式感。于是我們在進入每個星座時都加上了一幅該星座的星圖圖騰。它的作用除了暗示你推進到了更深的一個層級以外，同時也使這個單薄的沒有體積感的星系顯得更為豐富飽滿。
當然，這一切的顧慮都是在你手指滑動屏幕開始3D世界的探索之前。
在“把玩”夠了你的星座之后，可以選擇其中一顆恒星進行占卜，占卜結果多種多樣千奇百怪并可以與朋友進行互動玩耍。
關于結果——有收獲也有遺憾
H5一經推出，就呈現出了刷屏的態勢，在口碑和分享上，都獲得了一致的好評。從數據上看，用戶開始點擊測試后，流失率非常低。且有1/2的用戶選擇重玩，有1/3的用戶點擊了分享按鈕。雖然在推出后不久，遭到了微信的靜默，但在UC客戶端強大的帶量能力下，總PV也超過了1000W。
給的再多，不如懂我。UC瀏覽器正是因為有了一群腦洞大開，追求極致，死磕細節的營銷、設計、前端和后端同學，通過一個個兼具趣味、逼格好玩的H5，踐行著讀懂每一個用戶，每一個你的品牌理念。
（新聞稿 2016-01-07）