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

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

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

UI部分

首先它的風格是統(tǒng)一的輕擬物，我個人很喜歡這種視覺表現，因為這種風格會有非常多的設計細節(jié)，很值得去學習。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

學習點：在設計一些元素投影時，要根據實際的元素特點，比如該元素是發(fā)光的，那么它投影的地方，也會比較亮。

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

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

學習點：在對一些重要元素進行設計的時候，考慮變換一些角度，比如像案例中的圖標一樣，側一點，會顯得更加有特點。

案例：側一點角度的圖標，來源dribbble,Sunnee

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

學習點：在對設計稿進行配圖時，如果會出現人物，可以盡量將圖片裁切比例控制在人眼水平位置，更容易聚焦。

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

學習點：在設計不同價值感，比如等級體系時，就可以從圖標的顏色，大小，光感，細節(jié)度上做區(qū)分

動效部分

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

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

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

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

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

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

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

學習點：光效可以是多維度的細節(jié)。比如要做強引導的按鈕動效，提高用戶的點擊欲望，就可以將這里的不同走光效果結合起來運用。

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

學習點：在做一些數值變化相關的動效時，就可以把這個細節(jié)加進入，不光時數字的變化，還可以加入抖動，效果會更好。

時間小圖標的指針動效，彈性值做的很棒

學習點：在做一些偏可愛的風格動效時，就可以參考這種彈性的擺動動畫

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

學習的點：我猜想這里一方面是由于游戲優(yōu)化做的好，一方面可能就是故意這么設計的，讓他的初始加載值就是50%，瞬間就達到。或者像剛啟動時那樣，加載2個不同動畫，讓用戶在等待的過程中有東西可以看，然后當第二個進度動畫出現時，已經是加載50%了，這樣做的目的是會讓用戶的心理上覺得快。那么我們在自己的應用上設計loading動畫時，也可以嘗試采用這個策略。

總結

以上就是我日常體驗中的一點點思考，玩的同時還把設計學了。我始終覺得做每一件事時，都應該要盡量找到它的多維度價值，這樣時間的利用率會更高。

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

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

有思考，有輸出，才能進步！

更多借鑒學習思路：

歡迎關注譯者的微信公眾號：「彩云譯設計」