【遊戲互動】手遊適配設計

“ 手遊在設計的過程中，由於螢幕比例與尺寸的差異，再加上游戲需要一屏顯示的整體性與藝術性，因此和普通APP相比，有著更為複雜的規則 ”

本篇文章只針對橫屏遊戲，將從以下幾個模組講解：

• 設計比例與尺寸
• UI適配
• 背景圖片適配
• 劉海與圓角適配
• Home Indicator適配
  

以上模組在本質上是互相關聯的，但為了方便說明，因此拆分開說明。

01、設計比例與尺寸

1. 設計方案常規尺寸 16:9

一般來說，設計時需要採用16:9的尺寸，也就是iPhone 8的尺寸，常用的：【1280*720】【1334*750】【1920*1080】等。（下文所有UI按照1334*750 為基礎設計尺寸，按照不同專案，等比縮放即可）

常規手遊且畫質要求不高的遊戲使用720P完全足夠，例如復古風、畫素風；750-850P則更為常見，基本可以適配各種場景，不管是iPad還是模擬器均可以一個不錯的質量展示，包體大小也合適；1080p適合畫質要求較高的遊戲，或者需要PC端的遊戲；


在遊戲立項時，以上內容都需要美術與開發進行商量，並定下設計解析度，以後的設計過程將一直沿用此規則。

2. 現在都是全面屏19.5:9了，為啥還要按照老款的手機設計呢？

我總結了以下幾個原因：

1、裝置比例，雖然全面屏的手機比較多，但是仍有不少的16:9的手機，模擬器一般也採用了16:9的尺寸；

2、正逆適配問題，從16:9調整至19.5:9的視覺體驗要比19.5:9調整至16:9的好很多，例如在19.5:9的情況，橫向鋪滿時，縮至16:9會導致UI重疊，具體原因下文會詳細說明。


02、UI適配

1. UI在引擎中的原理

簡單講一下，所有ui都會有一個【錨點】，即圖中的【*】，類別PS中ctrl+t時的中心點，控制元件的座標位置即為【錨點】的位置。


錨定可以控制控制元件的相對位置，通過錨定一個控制元件，你可以控制它，無論螢幕大小如何，都將出現在相對於定位點的位置。


何為錨定？簡單示意：生命圖示為左上適配，錨定至螢幕左上角，無論螢幕為何種尺寸，均會固定至左上；同理綠寶石為右上適配，標題為中上適配（雖然塞爾達不需要適配）


2. 普通類UI適配

所有的UI均滿足上述規則，按照設計，大致把UI分為兩種，普通類與場景化介面類。

先說第一種，普通類，例如一個按鈕、一個生命條、一個彈窗等一切沒有特殊處理的控制元件；下面為不同場景中的適配方案

A）大於16:9（iPhone X）

若螢幕比例大於16:9，則短邊為適配基準；


B）小於16:9（iPad）

若螢幕比例大於16:9，則長邊為適配基準；


不論螢幕尺寸多少，UI比例不變，按照原尺寸與相對位置。為了方便理解，可以想象為一個iPhone 7，先上下或左右增加畫布大小，然後等比縮放至對應的裝置上，這種設計時並沒有什麼顧慮，按照16:9正常做即可。

3.場景化UI適配

此種在遊戲設計中是很常見的元素，例如需要以一本書、一個卷軸、一個櫃檯當作UI的底，以哈利波特舉例，在iPhone 7與iPhone X的差別如下，此彈窗的錨點設定在了螢幕中心，因此在橫向拉伸時，會展現更多的內容。


若仍舊採用16:9尺寸，在適配全面屏手機時，會出現穿幫的問題，例如下圖的桌子邊緣會被截斷，導致穿幫；


上下貫通的圖和左右貫通的圖分別會在兩種縮放方式下出現問題，因此在設計時，需要針對採取應對，方式有以下幾種：

A）給彈窗設計邊界

還是以哈利波特距離，右側書的邊緣繼續向外畫至邊緣即可，例如下圖左側的絲帶與右側的底。


B）無法設計邊界的圖片

在設計時需要根據不同的專案，首先搞清楚自己遊戲的目標使用者的主要機型，但就目前看來，16:9與19.5：9為最常見的機型比例；

例如：有個橫向延伸的卷軸，只需要考慮的iPhone使用者的體驗，再特殊的解析度不再考慮，因此場景化的介面設計尺寸為1624*750（左右圖），以防止UI畫了之後，95%的情況是看不到的，來節約成本。

因此，

若為左右延伸圖，則1624*750

若為上下延伸圖，則1334*1000

若為四向延伸圖，則1624*1000

（其他解析度的等比縮放即可）


底圖的補色：若彈窗與遊戲背景差異較大，可以再背後疊一層純色圖片，以防止穿幫，例如下圖，假如遊戲基調為紅色，在索尼Xperia 1 III（比例21:9）彈出了黑色的彈窗，兩邊出現了紅色的穿幫，因此，按照螢幕尺寸設計純色遮罩，即可做到一定的效果優化。


03、背景圖片適配

背景圖片相對於UI，規則上要簡單一些。

何為背景圖片？例如無場景紋理的圖片，在控制元件背後的虛空、當做背景的遠景；此型別背景一般是縮放、裁切不影響表現的圖片；以天諭舉例，此截圖背後的商店圖片即為背景。


背景圖片相較於UI圖片，可以沒有太複雜的細節，繪製也會更加簡單，可以根據專案風格與週期選擇不同的方案，在面對目標使用者機型複雜，需要pc端的不同尺寸縮放時，採用此種方案是一種省力且不會穿幫的好辦法。

背景圖片相對於UI適配規則會簡單一些，UI在適配時，會根據不同場景縮放、移動、裁切；背景圖片只用一個辦法，裁。

因此，背景以1334*750（16:9）尺寸製作。

適配時簡單分為以下兩種情況：

A）大於16:9（iPhone X）

長邊適應螢幕，裁掉背景圖片上下部分；


B）小於16:9（iPad）

短邊適應螢幕，裁掉背景圖片左右部分；


04 劉海與圓角適配

遊戲設計尺寸為16:9，市面上常規全面屏會有圓角、劉海等干擾因素，因此UI會在以上機型中偏移部分位置。遊戲UI的原點即為下圖的紅點位置。

引用ios官方設計文件的一段話：

“為了防止內容被裁剪。通常，內容應居中並對稱插入，以便在任何方向上看起來都很棒，不會被圓角蓋住，不會被劉海隱藏，並且不會被Home Indicator遮擋。為獲得最佳效果，請使用標準的、系統提供的介面元素和自動佈局來構建介面並遵守系統定義的佈局指南和安全區域。”


在做設計的過程中，貼邊的UI元素需要補全螢幕外側的元素，若採用一刀切的設計，在iPhone X上會穿幫，下圖以哈利波特的幾種實拍圖舉例：


因此在設計貼邊元素的時候，要麼補全邊緣元素，要麼繼續畫出延伸的部分至左右（例如以iPhone X為最大值的話，極限尺寸為1624*1000）

05、Home Indicator適配

iPhone X有一個在遊戲裡也無法隱藏的home條，而這個條又會擋住部分的UI，因此需要避開此控制元件的遮擋，根據ios官方設計文件：

“避免在螢幕的最底部和角落防止互動式控制元件。人們使用螢幕底部邊緣的滑動手勢來返回主螢幕和應用程式切換等功能，這些手勢可能會取消您在該區域實施的自定義手勢。螢幕的遠角可能是人們難以舒適到達的區域。


當裝置處於橫向時，對於某些應用程式（例如遊戲）來說，將可點選的控制元件放置在螢幕的下部（延伸到安全區域下方）可能是合適的，以便為內容留出更多空間。在螢幕的頂部和底部放置控制元件時使用匹配的插圖，並在 Home 指示器周圍留出足夠的空間，這樣人們在嘗試與控制元件互動時就不會意外地瞄準它。

在極少數情況下，像遊戲這樣的沉浸式應用程式可能需要自定義螢幕邊緣手勢，這些手勢優先於系統手勢。第一次輕掃呼叫應用程式特定的手勢，第二次輕掃則呼叫系統手勢。”

1.互動設計時應注意什麼

先分析一下Home Indicator的互動：

①從下至上滑動，返回主頁

②橫向滑動，快速切換應用

若使用了同樣的互動操作，手機會優先呼叫系統級別的反饋，因此在設計過程中，儘量避免在遊戲底部採用此種互動。


2.UI設計時應注意什麼

UI的主要注意點即為防止被遮住，以底部選單設計舉例，設計其他元素時，依然可以採取同理操作。底部選單樣式大致分為兩種，一種為非貼邊選單，一種為貼邊選單。

A）非貼邊選單

此場景在適配時底部UI按鈕會向上偏移部分，此處UI不需要特殊處理，引擎會有針對的設定。



B）貼邊選單

由於貼邊，若直接向上偏移，會出現UI的切割，為了防止穿幫，有以下幾個解決方案:

①在16:9設計時，留出Home Indicator的位置，不開啟UI偏移


②底部設計時，把下方的結束位置補全，如下圖，底部選單以紅色為底，19.5:9時，會以紅色為下邊緣結束；（設計時，選單的底長度不夠，導致無法蓋住右側紅色的底，導致穿幫，扣設計師雞腿）


③底部設計時，畫出更多的底，內容上移，16:9時畫面外的底展示出現，以防止穿幫


結語

目前裝置的更迭已經到了一個穩定的階段，使用者比例在逐漸的從16:9轉向19.5:9，可能在不久的未來，16:9的尺寸會被手遊拋棄，只需要製作一個尺寸；也或許移動裝置迎來了大變革，現在的適配完全無法使用，瞭解清楚適配的原理後，即使有了新的變化，也可以及時作出應對。



來源：L的設計日常
原文：https://mp.weixin.qq.com/s/EGnuobPE3uMm9oi9rPBryw