關於跨平台手機遊戲介面設計


(以下純粹為我發給同事的信件紀錄)

剛才已經聊過的內容,我整理寄給大家:


有關手機介面設計,我想建議把標籤類(Tag,也就是歷史賽事、季後賽冠軍賽、總冠軍)的按鈕移動到上排。
內置圖片 2內置圖片 3
上面的圖片分別是Android、iOS、Windows Phone的電話App撥號介面,可以看到iOS是把標籤按鈕做在下排;
而Android和Windows Phone都是把標籤做在上排(Windows phone的那個很大的文字就是標籤),而且很重要一點是他們兩個系統都支援左右滑動來切換標籤!為什麼呢?

我先說明一下iOS把標籤做在下面的理由:
1. 人的姆指在下排按比較輕鬆
2. 手指按下排標籤的時候不會擋住內容(想像一下用拇指去按上排按鈕,是不是會擋住螢幕?)
3. 人的眼睛要看的是內容,而不是標籤,所以內容在上標籤在下。

看起來都是好處!那為什麼Android和Windows Phone要把標籤按鈕做在上面呢?因為他們有以下的理由:
1. 人的眼睛習慣從上面看起,而使用者進到一個App裡面不一定是要做第一個標籤的事(打電話),所以標籤要在上面,方便使用者切換。
2. 電腦和現實中的標籤都是在上面,如此比較符合使用者經驗。
3. 微軟和Google表示:對不起大家!因為我們的主要控制鈕(Home主畫面、Back返回、Search搜尋、Menu選單、Multi-Task多工)是虛擬按鍵!所以你們會很常不小心摸到就離開畫面!蘋果的是實體Home所以不會誤觸!
4. 為了補償大家,所以Google和微軟都決定使用手勢(左滑右滑)就能切換標籤!(其實超好用的……只用過iOS的人可以體驗一下)


所以,最大的原因還是那個Android和Windows Phone用家很常用來揶揄iOS的那顆常常壞掉的實體Home(就是這顆內置圖片 4),
結果自己的熱感應按鈕卻很常被使用者誤觸,而飛出正在進行的畫面……然後,有的App會設計成要按兩次Home/Back才能退出(只按一下會提示:再按一次以退出,這本末倒置了吧?)

所以現在先不管硬體限制,來聊聊我們的專案:一個跨平台的遊戲,橫跨iOS、Android、Windows Phone以及平板電腦、桌機。
然後我要分享一下我聽過的事情,關於跨iOS和Android的遊戲開發經驗。

一開始是把標籤做在下面,然後希望先推出Android版,因為更新不需要審核,方便追踪玩家反應;
並且上架時有向Google申請精選應用如此一來就能夠出現在Market首頁(Google Play),衝高下載量。

結果Google就因為標籤在下面的理由退回了精選應用的申請……

不過,後來把標籤移到上面,不但通過了Google的審核,連Apple都審核通過了,這又是為什麼呢?
因為Apple對於"戲軟體的UI"比較不會那麼刁鑽!


所以,建議標籤按鈕做在上面比較安全,也比較能免除跨平台時不必另外製作的麻煩。

另外我也建議不要把介面全部切成按鈕,觸控介面設計準則中有提到按鈕最好不要小於44 x 44px
(The comfortable minimum size of tappable UI elements is 44 x 44 points.)
這邊指的是實際大小而不是Retina螢幕下的大小,如果是Retina的話要設計成88 x 88 px
因為人的手指很粗,並不像滑鼠是可以做出點擊一個px那麼精細的動作。

而且文字量太大,很擠,給玩家的眼睛一點呼吸的空間吧!
盡量用切換到下一層的方式去藏資訊,三層都還是可接受的範圍,我們目前只有兩層而已:)



如果大家對手持裝置的人機介面設計有更多興趣,可以再跟我討論,以上提到內容的詳細資訊可以參考以下資料:

謝謝大家!