一個策劃眼中的手游UI規範設計
沒有配圖，全是乾貨。貌似寫於2016年，有非常小部分的規則有變化，但無大礙。
一、設計概述
在講述設計規範時，首先要明確界面的分類，在我看來，界面只有主界面、一級界面、二級界面三種。
其中主界面僅包含三種：登陸界面、主城主界面、戰鬥主界面。
一級界面即指從主界面入口點擊一次後第一個呈現在玩家眼前的界面，也包含由系統呼出的結算界面等。
二級界面很好理解，即在一級界面打開的新界面，二級界面再展開的界面，我們仍稱作二級界面。
同時還要明確的時，17xuee主要講述的是基於手游移動端操作的設計規範，而非PC或者頁游等媒體。其操作主體在於觸摸、停留、划動三種最基本的操作方式。
二、邏輯關係和顯示管理
1.返回和關閉
所有的一級界面，應不具有關閉這一概念，呈現在玩家眼前的應只有返回這一概念，即玩家可以認為自己所有操作的出發點和終點，都是回到主界面。而非終止目前自身的操作。
同時具有關閉含義的界面，應盡量用半透明等處理，同時以一行類似「觸摸任意地方關閉界面」之類的隱含提示，讓玩家遺忘掉X按鈕所帶來的重度PC體驗。
2.屏幕遮擋
所有的同一級界面之間，應盡量大小一致，以方便層級疊加時能夠相互遮擋，抑或左右上下平行，不對另一方進行半遮擋。切忌兩個界面交織在一起，可以越過上層界面點擊下層界面信息，達成誤操作或層級反轉，如果非要這樣做，你可以在點擊下層界面時，自動將其上層的界面關閉。
3.層級和堆疊上限
無論何種界面，應遵循「後出現的界面在上層」的層級規範（除開系統的滾屏信息），並且上層界面不關閉，下層界面無法先行關閉。
要注意玩家所打開界面，特別是二級界面的堆疊數量限制，不要同時存在兩種不同功能的界面，比如裝備類和寵物類的界面都同時存在於界面中。同時要注意堆疊的數量上限小於5，相信沒有人願意點了4下才回到主界面。
當然，上述堆疊過多的問題也有一個簡單粗暴的解決方式，那就是點擊一級界面的返回按鈕時，同時移出所有非主界面的界面，但粗暴的東西大多並不美妙。
4.界面簡潔化與二級菜單
在主界面以及一級界面上，盡量不要堆疊超過13個可以響應點擊的入口，如果你非要這樣做，至少也要劃分明確的操作區域，並確保至少劃分的區域中兩個區域是看起來空空的，否則將會產生讓人厭煩的，看起來滿屏幕的操作按鈕，而使玩家體驗不到場景美術的精美設計。
為了解決更多功能入口的問題，可以採用切換、彈出新菜單的操作方式，及同類功能匯聚到一個一級界面後再次作為二級界面彈出。或者你也可以把超過13個不同的地方分組，比如假設20個入口，那麼14+6這麼分，其中6個功能可以通過與另外6個功能用切換按鈕來實現。
頁簽有時候並不是一個很好的二級菜單設計，排列在一起的功能圖標看起來更讓人賞心悅目。
5.提示信息前置
如果界面是在進行一個跟消耗相關的功能，那麼一定要保證玩家在界面上一眼就可以先得到能否完成操作的提示，而非點擊功能按鈕後再獲得提示，比如貨幣是否充足，消耗品是否達到要求，主體目標是否依然存在等等。
三、裝飾與易用性設計
1.可用華麗裝飾的部分
不是所有的界面，特別是遊戲的操作界面並不以界面華麗逼格高作為追求目的，更多的時候我們會發現，只要能夠讓玩家理解功能意圖，即使看起來界面粗糙的遊戲，玩家認可度反而更高。
那麼哪些界面可以用華麗裝飾進行修飾呢，我認為主要包含以下幾種：
登陸界面是必須進行華麗設計的界面之一，是玩家第一眼接觸的表象；
運營和收費相關的界面，因為其主要宗旨類似於市場營銷，因此適用於更廣泛的廣告設計手段，所以華麗的裝飾是必須展示的。
劇情或者文化展示界面，比如能夠更具時代或者遊戲背景特色的關卡界面等等。
2.重要信息的集中展示
界面初學者常犯的錯誤是儘可能的展示全的信息，或者要展示的信息都給人以同樣重要的感覺，其實不然，每個一級和二級界面，都有其重要的部分，比如裝備強化界面，對於玩家最重要的是屬性的變化，強化材料是否足夠，這個時候描述、各種複雜的框，其它裝備的同步展示就不能作為主要設計元素。
主要部分內容，盡量以單獨的裝飾底襯托，即使界面過大，顯得過於空曠，也要用花紋裝飾底來襯托，而非壓縮主要展示內容的空間。
如果發現目標的展示信息是在太多，那麼你就要想辦法分頁或者通過滑動來規避滿屏的信息文字了，不要認為玩家沒看到信息很累，實際上你也不可能所有的信息都是重要信息。否則就不是一個合格的信息展示者。
3.操作壁壘
對於輕休閑的遊戲來說，划動是最好的操作體驗，而對於動作重度遊戲，特別是搖桿遊戲，玩家同一時間可以觸摸到的點擊部分，就是它的操作壁壘。
在設計時，要特別注意降低玩家的操作壁壘，比如搖桿類遊戲，那麼如果是雙持操作，那麼主要的操作，特別是複雜的戰鬥操作，要放在左下和右下兩部分，並且玩家需要關注的操作分類不要過多，比如搖桿附近不要有其它可以點擊的按鈕，而右側手柄部分，所有操作的按鈕都要圍繞在一個四分之一圓左右的部分，不要出現過長的拇指觸摸不到的按鈕。
一些我們不希望玩家去經常操作的部分，比如離開當前副本、放大地圖等操作，放到上方的角落裡是沒有任何問題的。
4.關注目標存在感
在設計界面時，要特別注意玩家當前關注的主體目標有哪些，這些主體目標的存在感要特彆強烈，可以讓玩家預感到它的存在。
比如如果玩家戰鬥中有寵物，而不設置寵物的頭像和血量顯示，那麼我想這不是一個很好的設計，另外比如裝備強化界面，除去頁簽，選擇的裝備也沒有單獨呈現圖標出來，這也是一個糟糕的設計，實際玩家在選擇完頁簽之後，根本不會去關注選中狀態標註的是哪個裝備。
四、界面元素規範
1.無界框體
如果場景做的足夠優美（通常為了有競爭力，這也是必備的），那麼就要考慮界面是否應該具有明顯的邊界框體，PC時代，滑鼠操作喜歡明顯的方框+右上關閉來管理界面，然後到了手機上面，我們要理解玩家其實認可的邊界界面是設備屏幕的邊界，任何過多的額外邊界，特別是一級界面最外層的框，由於屏幕自適應以及離顯示屏邊界過近的問題，特別容易給玩家造成壓迫感，並且這也確實會給人一種浪費空間的感覺。
2.藝術字
一成不變的字體難以給予人更多認同，在手機遊戲中，更多的時候，要注意關鍵點藝術字顯示的應用，比如戰鬥力、排名、傷害跳字等等，往往應用藝術字的表現更為吸引眼球。界面的主體展示部分通常也可以用藝術字來達到重心集中的作用。
3.圖標的大小和規範
在我看來，一個小於50X50的圖標，實際是很難描述清它所代表的信息的，同時也難以引起玩家的關注，合理的圖標應該至少是64X64、72X72、84X84中的一種。
同時圖標應該具有明確的品質邊框，以方便玩家更加清楚的明確物品價值，按物品品質進行白綠藍紫橙紅的順序進行表示。
圖標應該具有明確的分類底，讓人很容易區分清哪些是裝備，哪些是頭像，哪些是材料等等，而非當很多的圖標放置在一起時，讓人難以捉摸。
如果沒有多樣的圖標，僅是道具品質的變化，那麼至少保證圖形長相一致的基礎上，一定要額外染色，作為新的道具圖標出現，不要圖省事，只是邊框變化。
對於有遞進關係的圖標，要注意展示時讓玩家輕易就能理解遞進關係，並且這種遞進關係不要多餘5，比如寶石圖標，那麼1——10級寶石至少應該是像暗黑寶石圖標一樣讓人能夠感同身受的進化。
4.字體顏色和字型大小大小
衣服著裝上具有三色原則，在我看來，除開道具名的色彩顯示，界面上的其它文字顏色也不應該脫離三色原則，否則特別混亂的顏色字體，會使玩家完全分不清主次。另外字體最好具有顏色描邊，以便任何情況下，玩家都可以清楚的看清字的內容。
字型大小的大小因人而異，個人認為，最小的字型大小不應該低於20，合理的字型大小是在20、22、24、28、30、32中的一個，再大的字體如果是裝飾性描述則考慮用藝術字。
5.頁簽
觸摸操作為主的遊戲，更適合橫頁簽的使用，而像搖桿操作的遊戲，更適合豎頁簽的使用。同時頁簽也要符合閱讀主流從左到右的規則，即頁簽最好出現在上部或者左部，右側和下側實在不是一個好的選擇，那裡通常是主要功能按鈕和返回按鈕該呆的地方。
大部分時候，藝術頁簽要比通用的寫字頁簽更有說服力，因為對於主要的功能，比如對實力影響至關重要的裝備和寵物模塊，則應該使用藝術頁簽，而活動界面就更不用說了，每個活動都要有單 獨的主體圖標來展示。
6.其它控制項
複選框是個針對選擇的良好設計，在我看來要比下拉列表框看起來更加清楚，同時也不會讓玩家覺得實在進行二次操作，點一點換一換總是很輕鬆的感覺。
滾動條實際上也是一個PC遺留產物，在界面設計的時候，只要注意末尾露半個的原則，滾動條是完全不必要的存在。
進度條要比數字更加吸引人，但是特別長和深顏色的進度條，有時會過分搶鏡，讓人忽略了真正的主體信息，因為應用時要酌情考慮。
7.統一性
交互界面設計的另一個重要方面在於統一性，主要是指同一類型控制項的大小，出現的位置，字體顏色的同一度等等。大小不一的控制項，比如按鈕，往往會影響實際的細節體驗，讓玩家莫衷一是，所以哪怕稍微違背常理的設計，如果長期的讓玩家理解，它總是出現在那裡，也是一種培養用戶習慣的好方法。
五、資源管理和控制項復用
1.復用的重要性
複雜多樣的遊戲界面固然讓人印象深刻，然後從用戶體驗的操作講，習慣界面統一的風格和少數的規矩，要比看起來好看更加重要，因為UI設計的最終目的在於用戶體驗和操作習慣的養成，而非看起來好看。
2.圖片和圖集
大於256X256的部分，就不太適合進入圖集，因為圖集要保證在1024X1024大小下運行才不會使得自身更大難以載入。因為256的圖片已經超過了十六分之一，顯然不適合佔有圖集，就該另行作為圖片進行載入。
能夠切九宮的東西盡量切下，進行九宮縮放，因為圖集可以更多的節省界面的消耗。
當然，有的應用程序會根據自身需要批量處理多個圖片成為一個圖集來減小消耗，但是此方法會增加處理器運算複雜度，因此要酌情考慮。
3.圖片的大小控制
圖片大小盡量使用2的倍數，最好是2的冪次方大小的尺寸，這一尺寸會使得利用空間更加充分，且載入時更容易對齊排列。
4.控制項名命名
所有界面用到的元素控制項名最好唯一，以方便日常管理和維護清理，重複過多的控制項名，會使清理時很難定位使用了控制項的界面。
六、補充說明
UI界面在手機上的設計，更多的需要設計師的積累，而最好的發展對象其實是平面美術，或者說更高階段的平面美術應該進階為UI交互設計師。產品經理、主美、測試最好也具有相應的素質，來幫助UI設計者規範和改善界面。
承輝學院網址：UI培訓|承輝學院官網,UI設計培訓,遊戲UI培訓,UI設計師基地
遊戲一群473294097
應用一群364978584
應用二群152818221
應用三群423348560
應用四群452678775
推薦閱讀：