偏執(zhí)細節(jié)控！超贊的UC星座占卜H5是如何設(shè)計出來的？

編者按：用軟件快速生成的H5和設(shè)計師精心打磨過的有什么區(qū)別？看今天這篇就知道了。僅僅是一個星座專題，背后的設(shè)計思考非常多，從視覺、代碼實現(xiàn)、交互到知識背景，無一不體現(xiàn)設(shè)計師對細節(jié)的「偏執(zhí)」，來給作者Caiqiang點個贊。

星座的“座”本來是人類意淫出來的產(chǎn)物，古代巴比倫人幾千年前就開始自作主張地把相距無比遙遠且毫無干系的恒星們連接起來，以人們熟悉的動物命名并繪制出精美的星圖。古老的人們從那時就開始相信，那些放射著閃閃光芒的恒星群，似乎真的與我們和我們的生活有著某種神秘的聯(lián)系。

這里要為大家分享的，就是一個有關(guān)UC星座占卜的移動端互動H5專題頁面。從傳播角度來看，由于星座主題本身并不是一個普適大眾的興奮點，因此這個項目的目標群體似乎被限制在數(shù)量有限的特定的用戶群內(nèi)，而我們希望即使對星座不是那么感興趣的用戶也能夠參與進來，因此從實現(xiàn)上我們決定以視覺效果為驅(qū)動力，引導功能性。

初期的規(guī)劃中，這個H5的結(jié)構(gòu)大概由下面幾個部分組成，第一部分是一個比較宏大的視角展示浩瀚宇宙，樊星閃爍。第二部分特寫聚焦用戶自己的星座，并進行可操作的3D展示。第三部分則是占卜出來的運勢結(jié)果，可以與朋友分享和互動。

為了模擬宇宙廣闊的空間感，設(shè)計風格上我采用了相對比較寫實的做法。首先將空間分層處理，深邃的藍紫色背景加上斑斕的星云，附上不規(guī)則的星光，形成最底層最遠端的宇宙背景。前景和中間層則需要一些漂浮的星球產(chǎn)生近大遠小的效果，他們的作用是造成看起來夸張遙遠的距離感，這些星球則需要用到WebGL技術(shù)制造的粒子效果去模擬實現(xiàn)。12星座分布在這些粒子群的內(nèi)部。

為了從一而終的整體氛圍感，我決定在頁面的首屏界面直接使用這個場景作為背景，這是第一次在歡迎界面的首屏嘗試使用了3D的動態(tài)背景，也就是上面描述的這個場景，攝像機以較遠的視角在空間中漫游。這個做法使得接下來的操作流程更為整體和一氣呵成，避免了跳轉(zhuǎn)帶來的斷層感。

國際天文協(xié)會（IAU）以傳統(tǒng)天文學為藍本將我們頭頂上的恒星們劃分出了88個星座，而大家熟悉的12星座是這88個星座里面，位置正好處于我們看到的太陽運行軌道（黃道）上的那十二個，環(huán)繞地球圍成一圈，因此在H5頁面中我們也將這些星座按實際順序排布在一個圓環(huán)上，攝像機（觀測視角）在空間中沿著這個圓環(huán)軌道移動。

但問題是，我們似乎都只在地球上見過星座，以3D環(huán)繞的上帝視角看起來，一個星座的組成應該是什么樣子的呢？星座里每顆星之間的距離、位置關(guān)系應該是怎樣的？事實上，組成星座的每顆恒星間的距離都是極其遙遠而懸殊的。在查閱了一些資料文獻、天文應用之后，我大致得到了各星座內(nèi)天體間的相對位置，當然這個位置信息是非常模糊的，將其比例微縮到我們可觀測的大小后，我通過Blender這個3D軟件將每個星座的結(jié)構(gòu)排列模擬出來，將星座里每顆恒星的具體位置定位到空間里面去。Blender所生成的文件能夠被前端和研發(fā)方面直接方便地提取到文件里的內(nèi)容信息（X,Y,Z軸坐標）方便代碼重構(gòu)。到這個階段，12個星座的三維化完成了。

將每個星座的坐標確定好之后，接下來開始實現(xiàn)的第二部分——用戶選擇星座并進行下一步操作，我們采用了一個 “理所應當” 的交互形式：鏡頭由遠處拉近，聚焦在所選星座的面前。這里要提到的一點是，在我們重新排列星座中恒星的位置使其三維化之后，它們由一個平面變成了一團毫無章法的亂糟糟的星星，辨識度似乎更低了…為了解決這個問題，在進入所選擇的單獨一個星座展示界面時，我們會默認將這團亂糟糟的星系旋轉(zhuǎn)到以一個特定的角度朝向你，你會發(fā)現(xiàn)熟悉的星座又回來了！是的，那就是他們朝向地球的角度。

以我們平時的視角看起來，星座本身并沒有什么體積感——它們只是天空中一些二維的亮點。這導致了在我們的頁面里面選擇進入某個星座之后，并沒有一個明確的因選擇所帶來轉(zhuǎn)折的儀式感。于是我們在進入每個星座時都加上了一幅該星座的星圖圖騰。它的作用除了暗示你推進到了更深的一個層級以外，同時也使這個單薄的沒有體積感的星系顯得更為豐富飽滿。

當然，這一切的顧慮都是在你手指滑動屏幕開始3D世界的探索之前。

在“把玩”夠了你的星座之后，可以選擇其中一顆恒星進行占卜，占卜結(jié)果多種多樣千奇百怪并可以與朋友進行互動玩耍。

遺憾的是該活動在傳播過程中觸及到微信的敏感神經(jīng)，使其屏蔽了該頁面在朋友圈的分享。但該情況發(fā)生后我們營銷、運營、設(shè)計、前端、研發(fā)團隊快速響應，1天時間出了新設(shè)計稿，1.5天前端+研發(fā)實現(xiàn)新方案頁面就位。于是僅兩天半之后一個流程更簡潔、結(jié)果更權(quán)威、內(nèi)容更“和諧”的版本誕生了

在這個版本中我們將細節(jié)做的更加精致，流程步驟調(diào)整地更為精簡。大家有興趣的話可以去體驗和比較一下。相信聰明的你在比較之后會在 “H5反屏蔽” 的路上躲過一些血坑。

也許你已經(jīng)注意到這樣一個看似簡單的頁面背后是許多細節(jié)的堆砌和打磨，在種種原因的限制下，這個項目并沒有做到盡善盡美，但至少可以說已經(jīng)做到了在現(xiàn)實的桎梏之下盡力去完善我們能顧及到的角落，暫時將KPI和商業(yè)目的扔到一邊，很多時候我也會 “偏執(zhí)于甚至不會被發(fā)現(xiàn)是有用還是無用的細節(jié)” ，但也許正是那些你看不到的“無用的”的細節(jié)，它們累積成了所有你能看見的有用的基石。

【優(yōu)設(shè)十二月人氣文章合集】

Top 1
《漲姿勢！創(chuàng)造好設(shè)計的25條史詩級平面設(shè)計技巧》

Top 2
《逼死設(shè)計師！2015年全球最丑的網(wǎng)站排行榜新鮮出爐》

Top 3
《親歷者說！日本的平面設(shè)計水平為什么這么高？》

原文地址：red.uc
作者：Caiqiang

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學習平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量107萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導航：http://hao.uisdc.com