溫州春華教育

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【十二月人氣文章合集】

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

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

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

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

================關(guān)于聯(lián)展網(wǎng)================
“聯(lián)展網(wǎng)“是國內(nèi)人氣**高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：****全的設(shè)計(jì)師圖書導(dǎo)航：/book/。
設(shè)計(jì)微博：擁有粉絲量107萬的@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、**頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：

相關(guān)推薦：

溫州平面設(shè)計(jì)培訓(xùn)   溫州平面設(shè)計(jì)培訓(xùn)班   溫州平面設(shè)計(jì)培訓(xùn)機(jī)構(gòu)