本篇是設計師Cherry通過積累數年的消除游戲設計經驗，對比市面上多款消除游戲進行研究，在交互及色彩搭配兩方面進行分析，相信文中滿滿的專業(yè)干貨能給大家?guī)砀嘈碌乃悸贰?/span>
?

■ 消除類產品交互區(qū)域對比
?

圖1《開心消消樂》? ?圖2 《海濱消消樂》? ?圖3《松松總動員》

king：圖4《賓果消消樂》 檸檬微趣： 圖5《飛屋消消消》??圖6《Dream BLast-h》

圖7《hay day pop》??圖8《toon blast》??圖9 《松松總動員》

騰訊圖10《瘋狂動物城》? ?playrix：圖11《妙趣動物園》? ?圖12《夢幻花園》??圖13《我的小家》

通過以上游戲截圖，可以看出大部分游戲中開始面板上的“ 開始按鈕”保持在開始面板下部 ，單手可操作的位置，方便玩家操作。
大部分“開始按鈕”保持在易于點擊的區(qū)域內，往往是因為他們能讓用戶快速開始游戲。
一個較大的觸摸區(qū)域，在常規(guī)操作下十分好用。
通過分析用戶的操作習慣可以劃分出“難易區(qū)域”。

下圖呈現的是左右手的操作區(qū)域難度劃分，綠色為最易，紅色為最難。可以看出更易操作的區(qū)域位于屏幕的中下方。
?

■ 按鈕顏色對比?（看小圖找大比例，看大圖找小細節(jié)）

《開心消消樂》
?

游戲內按鈕使用了綠色（70%）、藍色（25%）、橙色（5%）,關閉按鈕使用白色。

《海濱消消樂》
?

游戲內按鈕使用了綠色（70%）、藍色（25%）、橙色（5%），關閉按鈕根據面板顏色變換。

《糖果繽紛樂 》
?

游戲內按鈕使用了綠色（80%）、天藍色（8%）、深藍（5%）粉色（5%）紫色（2%），關閉按鈕粉色。

《Hay Day Pop 》
?

游戲內按鈕使用了綠色（80%）、橙色（18%），關閉按鈕紅色。

《松松總動員》
?

游戲內按鈕使用了綠色（70%）、藍色（20%），橙色紫色（10%），關閉按鈕藍色。

以上多種色調下游戲被使用的最多的是綠色的按鈕，并且綠色按鈕占到了70-80%的比例。開始按鈕的顏色統一用的都是綠色。

PS: 發(fā)現用戶多傾向于放松解壓和諧、安全的色彩。

黃色：從心理學上講，黃色是色譜中最令人愉悅的顏色；
綠色：令人放松身心，有助于緩解壓力、緊張和焦慮，提供一種新生、內斂、和諧的感覺；
藍色：靜心安神、涼意、促生直覺；
紫色：鼓舞人心、平靜心靈，舒緩神經‘提供靈性的感覺，激發(fā)創(chuàng)造力；
紅色：煥發(fā)熱情，激發(fā)活力，可以提高血壓、呼吸、心跳和脈搏，激發(fā)斗志和信心。通過恐懼和焦慮來提供一種警戒意識。

■ 整體顏色對比（看小圖，顏色冷暖黃金配比）
?

《瘋狂動物城》用的藍色為主色65%，淺棕色為補色20%，其余顏色做點綴15%
?

《夢幻家園》用的淺棕咖做主色調40%，用了臨近色做補色40%，其余顏色作為點綴20%
?

《hay day pop》用的藍色白相間為主色85%，其余顏色做點綴15%

《松松總動員》用藍白相間為主色85%，其余顏色做點綴15%，點綴顏色多為互補色強對比。
?

借鑒蒙德里安《油畫第一號》,運用色彩的黃金比例。

運用黃金分割和等比數列將畫面或圖形按照一定的比例進行分割、排列,創(chuàng)造富有節(jié)奏與韻律的秩序與美感。
打造QQ賬號轉讓UI體系的顏色黃金比例，找到視覺平衡。

■ 彈窗方式對比

彈窗一般分為模態(tài)彈窗和非模態(tài)彈窗（模態(tài)彈框和非模態(tài)彈框最大的區(qū)別就是是否強制用戶交互，模態(tài)彈框會打斷用戶的當前操作流程，用戶不在彈框上操作的話，其余功能都使用不了）

一）常見的模態(tài)彈窗：對話框、動作欄、浮層

優(yōu)點：可以很好的獲取用戶的視覺焦點
缺點：打斷了用戶的當前操作流程

對話框：
對話框一般用于用戶進行一項很重要或者有風險的操作，這時會彈出一個對話框給用戶提示信息，用戶根據提示來進行判斷。一般出現在屏幕的中間位置，會對界面的主要內容造成遮擋。

動作欄：
動作欄在我看來可以看成是對話框的一個加強版，因為無論是Alert還是Dialog一般都只有兩個按鈕。
而動作欄可以提供多個功能按鈕，而且展示的樣式比較多變。
?

浮層：

是用戶點擊控件或者界面某一區(qū)域浮出的半透明的臨時視圖。浮層的樣式跟動作欄很相似，都可以向用戶展示多個功能選項。但是浮層可以出現屏幕中的任何位置，能夠給用戶更具有指向性的提示。
?

二）非模態(tài)彈框

與模態(tài)彈框相比，非模態(tài)彈框最大的區(qū)別是不強制用戶交互，也不會彈出半透明背景層，非模態(tài)彈框停留一段時間后會自己消失。
所以相對于模態(tài)彈框來說，非模態(tài)彈框屬于輕量型反饋，不會對用戶造成太大的干擾。
?

這是幾種主要的彈框樣式和用法，

那如何建立一套ui的彈框體系？
或者如何對現有ui的彈框體系進行優(yōu)化？
其實彈框體系的建立和優(yōu)化的原則可以用一句話概括：
能在界面中展示就不用彈框，
能用非模態(tài)彈框的就不要用模態(tài)彈框。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的消除游戏美术设计的这些套路，你都知道吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。