簡單分析一下，為什么韭韭的UI給人感覺如此精致
導(dǎo)入?
? ? ? 先說一下為什么是韭韭，因?yàn)樽罱孢^的游戲就韭韭，碧藍(lán)（你也玩碧藍(lán)？.jpg），忘卻前夜，而其中一款游戲的UI讓我十分困惑不解。索性挑了其中一個(gè)做了點(diǎn)分析，以玩家的角度，嘗試去說明為啥人家做得好，好在哪里。與其去說啥沒做好，誰又做得垃圾，不如看點(diǎn)好的，學(xué)點(diǎn)好的，提高大家的審美，豈不美哉。
? ? ? ? 疊個(gè)甲，非專業(yè)界面交互，僅作為玩家觀感，理性交流，分享和寫出來的目的最終是為了自我學(xué)習(xí)。
? ? ? ? 整個(gè)過程可能會幾期？比較碎碎念，盡量寫的清晰。周期可能會拉長，使用的素材是韭韭開服的時(shí)候花費(fèi)了接近一小時(shí)錄制好的視頻中的截取，非最新畫面。
最后，分析的同時(shí)也是自我學(xué)習(xí)和鞏固的一環(huán)。
通行證頁面分析
正文
我先放個(gè)截圖，為了不影響觀感，我把它們拼在一起；為了篇幅不至于過長，這次只分析圖1；
一眼下去，最直接的是什么？最直接的是我付費(fèi)能獲得什么；這四個(gè)頁面無一不在強(qiáng)調(diào)，玩家最終能獲得【皮膚-鏡中幕間】，角色夏利的皮膚；
為什么會有這種觀感？
首先是它的立繪在畫面中的占比較大；
立繪部分沒有被其他東西切割過，十分清晰；
完整的畫面，與旁邊細(xì)碎的獎勵形成對比，視覺會優(yōu)先看完整的立繪；
? ? ? ?（完整的，看黑白對比最強(qiáng)烈的地方，看圓心黑點(diǎn)，看外圈黑色的圓，看完整的圓心，看完整的圓環(huán)；↓）
? ? ? ??人眼看東西默認(rèn)會看對比很明顯的地方，畫面中，對比最明顯的地方，莫過于黑白關(guān)系對比強(qiáng)烈的獎勵領(lǐng)取框框，和立繪和整個(gè)頁面的大小對比；然后領(lǐng)取獎勵的地方因?yàn)榻?jīng)過多次切割，使其層級下降，那么占比偏大，且畫幅完整的立繪，就會直接成為畫面中心；
? ? ? ?而一張高質(zhì)量的角色原畫立繪，是非常吸引眼球的東西，整個(gè)頁面能不能站穩(wěn)，其實(shí)非常依賴原畫美術(shù)資源；我們可以嘗試把左邊的立繪去掉，看看效果，如下；
? ? ? ?哇，效果竟然比預(yù)期還高出一些，那么就不得不說，界面的排布,格子大小的對比，色彩的時(shí)候，還有精致小動效，真的有點(diǎn)超出我意料；那么這里我就拆成2個(gè)大部分去分析好了。
布局的大小疏密；
高完成度下的精細(xì)對比；
布局的大小疏密；
? ? ? ?分析：那么這里看來有必要再展開說說，關(guān)于為什么去了立繪，完成度還那么能打；
? ? ? ? 除了被紅框框住的部分，其余部分都統(tǒng)一在一個(gè)暗色調(diào)中，屬于一整個(gè)整體，而在整體中，又分割出了大小不一的小塊，豐富其內(nèi)容，屬于細(xì)節(jié)；再再大小不一的小塊中，分出用色明度/飽和度的區(qū)分，屬于層級的調(diào)整，一步一步下來，畫面的分布就會很舒服；另外可以注意到的是，在做布局的時(shí)候，其實(shí)還是有意的做了上下錯開，沒有所有東西的平行的布置，然畫面不至于過于呆板；
? ? ? ?結(jié)論：整體的高完成度，降低了失去立繪支撐后的未完成感，厲害了；
? ? ? ?在了解到這部分以后我們再去看，游戲內(nèi)真實(shí)的資源；
從層級上去說，排名越前優(yōu)先度越高；
立繪（最終會獲取的東西）
獎勵（過程中會獲取的東西）
可以交互的按鈕（點(diǎn)哪里會有反應(yīng)）
LOGO（通行證的包裝名稱，一般用于降低玩家付費(fèi)反感用）
紅點(diǎn)（還有可以獲取東西的提示）
獎勵進(jìn)度條（我還差多少完成進(jìn)度）
一些說明用的信息（填充內(nèi)容）
? ? ? ?整個(gè)交互層級就很清晰；作為玩家，在通行證界面，我需要獲取的信息大概有，我需要獲得什么；我有什么獎勵；多少錢；我需要點(diǎn)擊什么；說明的信息在哪里；
? ? ? ?除此以外，沒有別的了，特別是手機(jī)游戲，我如果不能在第一時(shí)間看懂，到底要傳達(dá)什么東西給我，那基本就不會去管，也不會去看；
高完成度下的精細(xì)對比
? ? ? ?
那么說到高完成度，又從哪些地方去體現(xiàn)呢，我分析了一下，如下：
角色立繪
完整的美術(shù)包裝，匹配點(diǎn)唱機(jī)的設(shè)計(jì)點(diǎn)
點(diǎn)線面的結(jié)合
顏色漸變的使用豐富色彩的關(guān)系
精致的暗紋和小圖標(biāo)
逐條來分析吧。
? ? ? ?角色立繪，天然的就是處于比較高完成度的東西，屬于要賣錢的，一定是完成度，對比度，精細(xì)度都恰到好處的東西，無論放在哪個(gè)頁面都非常有助于提高頁面的完成度；
? ? ? ?符合年代感的包裝設(shè)計(jì)，整個(gè)頁面一整套圍繞點(diǎn)唱機(jī)元素的設(shè)計(jì)；跳動的綠條，光碟，提示詞的分貝，讀碟，給人既符合年代感，又有高級感；字體也沒有直接使用付費(fèi)購買的字體擺爛，或者不經(jīng)設(shè)計(jì)的藝術(shù)字，整體美觀高級，畢竟經(jīng)過設(shè)計(jì)的東西總是好的；
? ? ? 3-4合在一起講?點(diǎn)線面的結(jié)合，是原本呆板的按鈕變成生動，配合精致的小動效，真的太絕了；學(xué)畫畫的同學(xué)大概會知道，點(diǎn)線面之間是可以互相轉(zhuǎn)換的，這個(gè)講起來比較費(fèi)事，不展開講；
? ? ? ? 顏色的使用也比較大膽，除了塊面的切割，也采用顏色的過度/漸變結(jié)合去豐富和切割畫面內(nèi)容，像是暗色間隔亮色間隔暗色，來突出要表現(xiàn)的內(nèi)容，也豐富和畫面的表現(xiàn)；
第五部分，直接上圖不分析了。思路跟前面差不多，都是用來豐富畫面，增加內(nèi)容和可讀性的；
? ? ? ?其實(shí)像上面提到的一些小細(xì)節(jié)小心機(jī)的東西太多太多了，真的十分值得拿出來學(xué)習(xí)，鑒于時(shí)間有限，今天的分享大致先到這里，未來有時(shí)間會考慮補(bǔ)完，畢竟是花自己業(yè)余時(shí)間來做的分析和學(xué)習(xí)，如有錯誤的地方，評論區(qū)留言即可，理性分析。不吵架，頂多就學(xué)術(shù)問題可以討論一下，吵架的不回復(fù)謝謝
? ? ? ?未來可能會反復(fù)編輯，編輯了會標(biāo)上時(shí)間。____20230727
? ? ? ?第一次寫文，可能比較啰嗦比較長，感謝看完！以后會嘗試更簡單明了/直接的，的去做分析。多多包涵 謝謝。
