Hi，我是彩云。對于UI設(shè)計(jì)師來說，大家都知道平時應(yīng)該要多體驗(yàn)產(chǎn)品，收集設(shè)計(jì)靈感，提升設(shè)計(jì)能力。但現(xiàn)實(shí)情況是，體驗(yàn)了一堆產(chǎn)品，收集了一堆截圖，卻不懂得怎么去吸收，自己做設(shè)計(jì)的時候依然沒有靈感。

面對優(yōu)秀作品，到底要從哪些角度學(xué)習(xí)和吸收呢？今天就以我最近在玩的一款游戲來拋磚引玉，分享我是如何去思考其中的設(shè)計(jì)細(xì)節(jié)的。

沒玩過這個游戲的，可以先看看我的一段錄屏，然后我會從UI、動效2個方面來分析其中的設(shè)計(jì)細(xì)節(jié)以及可以學(xué)習(xí)的點(diǎn)。

UI部分

首先它的風(fēng)格是統(tǒng)一的輕擬物，我個人很喜歡這種視覺表現(xiàn)，因?yàn)檫@種風(fēng)格會有非常多的設(shè)計(jì)細(xì)節(jié)，很值得去學(xué)習(xí)。

從我的觀察來看，這里面的細(xì)節(jié)包括：

統(tǒng)一的光源角度。所有的元素高光部分都在右上45°，投影角度都在右下45°。

學(xué)習(xí)點(diǎn)：想要讓界面一眼看過去很和諧，光源的方向要一致，就算是非寫實(shí)的圖標(biāo)或場景，也需要考慮這個點(diǎn)。比如做一套圖標(biāo)時，高光和陰影的角度不一致，那整體的細(xì)節(jié)就會減分很多。

案例1：中間的那個紫色圖標(biāo)背板，漸變的方向不一樣，也就是相當(dāng)于光源方向反向了，所以會顯得跟另外2個不統(tǒng)一。

案例2：中間的那個啞鈴圖標(biāo)，高光的方向就跟另外2個圖標(biāo)不一樣，也是光源方向不一致的一種，所以會顯得跟另外2個不統(tǒng)一。

按鈕的高光上會加一個小白點(diǎn)，讓按鈕顯得更加通透。

學(xué)習(xí)點(diǎn)：要做到一個帶高光的UI元素，可以加一個很小的白點(diǎn)或者一道很細(xì)的高光，會讓細(xì)節(jié)加分不少。這個細(xì)節(jié)我曾經(jīng)在牛MO王和木鼠的作品中都有見到，印象深刻，我也會經(jīng)常用到自己的作品中。

案例，注意看每個圖標(biāo)上的幾像素高光點(diǎn)，這個就是加分的小細(xì)節(jié)（可以點(diǎn)開看大圖）

所有的元素，包括界面中的重要文案，都帶有統(tǒng)一顏色的描邊，邊界更加清晰易讀。

學(xué)習(xí)點(diǎn)：統(tǒng)一的描邊，不僅可以增加畫面的清晰度，還能使得風(fēng)格看起來更加一致，細(xì)節(jié)也更多。

背景上會加入簡單的紋理設(shè)計(jì)，并且紋理也是帶有小細(xì)節(jié)的。

學(xué)習(xí)點(diǎn)：背景圖案也需要精心設(shè)計(jì)，背景圖案在游戲中可以增加氛圍，在普通的UI界面中，也可以運(yùn)用品牌延展圖案作為背景底紋，對品牌進(jìn)行露出，不僅能使得畫面更有細(xì)節(jié)，也能使得產(chǎn)品品牌感更強(qiáng)。

案例：注意看這幾個案例的頭部背景紋理，都是用了品牌元素延展出來的

投影會帶上環(huán)境色，顯得更加合理真實(shí)。

學(xué)習(xí)點(diǎn)：在設(shè)計(jì)一些元素投影時，要根據(jù)實(shí)際的元素特點(diǎn)，比如該元素是發(fā)光的，那么它投影的地方，也會比較亮。

案例：開關(guān)會受到光照的影響，而反射出與光照相同的色相，細(xì)節(jié)更加分

游戲中的金幣和鉆石角度會有一定的傾斜，顯得體積感更強(qiáng)

學(xué)習(xí)點(diǎn)：在對一些重要元素進(jìn)行設(shè)計(jì)的時候，考慮變換一些角度，比如像案例中的圖標(biāo)一樣，側(cè)一點(diǎn)，會顯得更加有特點(diǎn)。

案例：側(cè)一點(diǎn)角度的圖標(biāo)，來源dribbble,Sunnee

banner圖聚焦到眼睛部分，很吸引我的注意力。

學(xué)習(xí)點(diǎn)：在對設(shè)計(jì)稿進(jìn)行配圖時，如果會出現(xiàn)人物，可以盡量將圖片裁切比例控制在人眼水平位置，更容易聚焦。

寶箱的價(jià)值感，通過不同的造型和比例很直觀的凸顯出來

學(xué)習(xí)點(diǎn)：在設(shè)計(jì)不同價(jià)值感，比如等級體系時，就可以從圖標(biāo)的顏色，大小，光感，細(xì)節(jié)度上做區(qū)分

動效部分

令牌上的走光效果，是先走半圈，再走半圈，順時針方向，從上到下的走光雖然不完整，但卻是正好銜接上的。然后在下圈結(jié)束的時候，還會有一個星光放大的效果，點(diǎn)睛之筆，非常加分。

學(xué)習(xí)點(diǎn)：在做一些走光效果時，比如卡片上的光效，禮物閃光之類的動效，就可以學(xué)下這里的速度和最后那一個小光點(diǎn)放大的細(xì)節(jié)設(shè)計(jì)。

中間場景冒出的光點(diǎn)動效，模擬了夜晚螢火蟲的感覺。

學(xué)習(xí)點(diǎn)：整個動態(tài)的亮點(diǎn)在于速度曲線，中間的那個最亮點(diǎn)閃白效果還有整個動態(tài)都帶有呼吸效果，顯得非常有靈氣，值得學(xué)習(xí)。想做這種光點(diǎn)效果，對時間速度沒有把握的話，還可以直接把這個效果放到AE里對照著K幀也可以的。

按鈕上的發(fā)光效果也會有消逝的光點(diǎn)效果。

學(xué)習(xí)點(diǎn)：對于想要引起用戶注意的地方，又不想直接對按鈕進(jìn)行縮放，就可以利用發(fā)光效果，這個發(fā)光也可以是光圈擴(kuò)散的效果，擴(kuò)散的同時也可以加入這種小光點(diǎn)的設(shè)計(jì)，會更有細(xì)節(jié)。

底部寶箱的動畫，不僅有環(huán)繞的走光效果，還有上下的走光效果，顯得更加突出。

學(xué)習(xí)點(diǎn)：光效可以是多維度的細(xì)節(jié)。比如要做強(qiáng)引導(dǎo)的按鈕動效，提高用戶的點(diǎn)擊欲望，就可以將這里的不同走光效果結(jié)合起來運(yùn)用。

收集金幣時，金幣數(shù)值條會抖動，就像真的金幣裝入袋子一樣，很細(xì)節(jié)。

學(xué)習(xí)點(diǎn)：在做一些數(shù)值變化相關(guān)的動效時，就可以把這個細(xì)節(jié)加進(jìn)入，不光時數(shù)字的變化，還可以加入抖動，效果會更好。

時間小圖標(biāo)的指針動效，彈性值做的很棒

學(xué)習(xí)點(diǎn)：在做一些偏可愛的風(fēng)格動效時，就可以參考這種彈性的擺動動畫

加載動效每次給我的感覺是非常快，我?guī)缀鯖]有見過打開界面是50%以內(nèi)的。

學(xué)習(xí)的點(diǎn)：我猜想這里一方面是由于游戲優(yōu)化做的好，一方面可能就是故意這么設(shè)計(jì)的，讓他的初始加載值就是50%，瞬間就達(dá)到?；蛘呦駝倖訒r那樣，加載2個不同動畫，讓用戶在等待的過程中有東西可以看，然后當(dāng)?shù)诙€進(jìn)度動畫出現(xiàn)時，已經(jīng)是加載50%了，這樣做的目的是會讓用戶的心理上覺得快。那么我們在自己的應(yīng)用上設(shè)計(jì)loading動畫時，也可以嘗試采用這個策略。

總結(jié)

以上就是我日常體驗(yàn)中的一點(diǎn)點(diǎn)思考，玩的同時還把設(shè)計(jì)學(xué)了。我始終覺得做每一件事時，都應(yīng)該要盡量找到它的多維度價(jià)值，這樣時間的利用率會更高。

平時多體驗(yàn)一些高質(zhì)量的應(yīng)用，不是說做UI就一定去UI里找參考，高質(zhì)量的游戲中，設(shè)計(jì)細(xì)節(jié)也是非常多的。這里面有一個原則就是：只要當(dāng)你在一個界面中看到一個讓你有觸動的、有驚喜的、覺得好的，就應(yīng)該是值得學(xué)習(xí)的，都要隨時記錄下來。

再有一點(diǎn)建議就是，平時做體驗(yàn)的時候，有了想法一定要及時記錄，有時間的話還可以把靈感進(jìn)行落地，寫文章也好，臨摹也好，都是一種輸出。像這篇文章，就是我的日常體驗(yàn)記錄中的一篇而已，在轉(zhuǎn)化成文章的過程中，會讓我有更多發(fā)散的思考和靈感，個人覺得對設(shè)計(jì)思路是非常有幫助的。

有思考，有輸出，才能進(jìn)步！

更多借鑒學(xué)習(xí)思路：

歡迎關(guān)注譯者的微信公眾號：「彩云譯設(shè)計(jì)」