消除遊戲美術設計的這些套路，你都知道嗎？

本篇是設計師Cherry通過積累數年的消除遊戲設計經驗，對比市面上多款消除遊戲進行研究，在互動及色彩搭配兩方面進行分析，相信文中滿滿的專業乾貨能給大家帶來更多新的思路。



■ 消除類產品互動區域對比


通過以上游戲截圖，可以看出大部分遊戲中開始皮膚上的“ 開始按鈕”保持在開始皮膚下部 ，單手可操作的位置，方便玩家操作。
大部分“開始按鈕”保持在易於點選的區域內，往往是因為他們能讓使用者快速開始遊戲。
一個較大的觸控區域，在常規操作下十分好用。
通過分析使用者的操作習慣可以劃分出“難易區域”。

下圖呈現的是左右手的操作區域難度劃分，綠色為最易，紅色為最難。可以看出更易操作的區域位於螢幕的中下方。


■ 按鈕顏色對比 （看小圖找大比例，看大圖找小細節）

《開心消消樂》



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

《海濱消消樂》



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

《糖果繽紛樂 》



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

《Hay Day Pop 》



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

《鬆鬆總動員》



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

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

PS: 發現使用者多傾向於放鬆解壓和諧、安全的色彩。

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

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


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


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


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


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


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

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

■ 彈窗方式對比

彈窗一般分為模態彈窗和非模態彈窗（模態彈框和非模態彈框最大的區別就是是否強制使用者互動，模態彈框會打斷使用者的當前操作流程，使用者不在彈框上操作的話，其餘功能都使用不了）

一）常見的模態彈窗：對話方塊、動作欄、浮層

優點：可以很好的獲取使用者的視覺焦點
缺點：打斷了使用者的當前操作流程

對話方塊：
對話方塊一般用於使用者進行一項很重要或者有風險的操作，這時會彈出一個對話方塊給使用者提示資訊，使用者根據提示來進行判斷。一般出現在螢幕的中間位置，會對介面的主要內容造成遮擋。


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


浮層：

是使用者點選控制元件或者介面某一區域浮出的半透明的臨時檢視。浮層的樣式跟動作欄很相似，都可以向使用者展示多個功能選項。但是浮層可以出現螢幕中的任何位置，能夠給使用者更具有指向性的提示。


二）非模態彈框

與模態彈框相比，非模態彈框最大的區別是不強制使用者互動，也不會彈出半透明背景層，非模態彈框停留一段時間後會自己消失。
所以相對於模態彈框來說，非模態彈框屬於輕量型反饋，不會對使用者造成太大的干擾。


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



作者：Cherry  
來源：ZEN ART 遊戲美術賞析
地址：https://mp.weixin.qq.com/s/tAuCqqzbAQG7mw419PlQFQ