手游應該怎麼做 UI 設計？

01-15

有什麼好的方法和原則？

之前一直做互動設計，在UI上有一些積累。

轉戰手游後發現，有著標準、互動方式、用戶行為等等與常規大屏UI設計的不同，但是在設計流程，思考方式上是一樣的。

以目前項目中一個界面為例（未完成版本）來說一下我們的方法和思路，像點擊範圍，紋路優先順序，字型大小等大家都知道的就不說了。

步驟1．了解功能需求

位置：屏幕下方不超過160像素高度

數量：4個單位

功能：每個單位包括頭像顯示，能量需求數量和種類

（1-3個，兩種），必殺按鈕。

狀態：頭像選中狀態，未選中狀態；必殺可用狀態，不可用狀態。

以上聽起來是不是非常的複雜？用一個圖示來概括就是這樣的

步驟2. 接下來我們會畫一些草圖，做些圖形延展

這一個步驟主要是對圖形，筐體做的一些草圖討論，草圖大概畫了20多張，這個階段會比較隨意，基本想到什麼都會畫下來，目的是記錄和想法發散。

步驟3. 由於我們的遊戲是中式美術風格，首先選用的是一個棱型結構，出了一版效果草圖如下。

問題出來了，棱型結構在能量球的擺放上很彆扭，棱型在空間上有很多浪費，並且沒有可點擊的感覺。

步驟4.於是我們嘗試了圓形結構，圓形相比之下有吸引點擊的小優勢。

接下來面臨1個單位有2個可點擊範圍的問題，我們思考了一下是切割一個圓形單位，還是把兩個單位組合成在一起。

於是我們對圖形做了一系列的拆解組合草圖，重點嘗試了一下太極的組合方法。

步驟5．在這一步發現圓形比較能解決我們的問題，區域也節約了很多，但是在用戶操作上還是很繁瑣，選擇人物和發動必殺會很麻煩，點擊位置也小，不會很舒服。

於是我們嘗試加入點擊以外的操作方式－拖動。當滿足必殺條件時，把頭像拖到戰場上就可以發動。這樣在視覺上就簡單多了，只有一個頭像和能量球來體現。

以上的畫面就簡潔多了，但是如何讓用戶去拖動按鈕來發動必殺，這個僅在用戶指引上教肯定是不夠的。如果在可發動必殺的頭像上加一個箭頭，又會破壞畫面上的協調，顯得很鬧騰。

所以，我們再給加入一個條件，當滿足必殺條件時，按住頭像就出現箭頭提示，如下圖

這就是我們在遊戲戰鬥畫面里下方頭像部分UI設計的過程

－－－－－－－－－－上圖仍是草稿階段－－－－－－－－－－

在功能布局都沒問題了以後，還會再有一次美化和風格統一的步驟，最終UI在遊戲測試後再更新吧。

上面說了一大堆，結論很簡單，在滿足功能需求後作減法，手機遊戲就那麼點地兒，寸土寸金，減法作的好，就解決了一大半，可以給色彩和視覺平衡更大的發揮空間。

我就隨便說說，所知有限，歡迎提出批評和更正。

手游通用的一些設計理念：

簡化遊戲：包括各種系統，數值，界面。凝練主要信息和次要，保證一個界面上顯示的信息，數字，按鈕不能太多。次要信息增加一個呼出按鈕即可。（因為玩家畢竟不能像在電腦或者平板上進行更多的信息查詢和調整）
字體：字體要足夠大，能看清楚。做的時候，把設計好的界面放在手機上查看最終效果。
按鈕：按鈕要足夠大，也要比較亮。這樣才能夠突出，保證眼能看清，手能按下，不會出現太多操作誤差。按鈕之間有一定間隔。
色彩：界面色彩統一。這個根據每個遊戲特徵，自行探究。反正色彩不要用太過黑暗，太過髒的顏色就好，也不要太亮。因為玩家大部分時間都是在和界面打交道的。
圖標設計：每個圖標都是一個入口，因為盡量設計的有辨識度。根據圖標不同功能進行歸類排布。
界面：界面複雜度要小，一般不要超過三級操作（跳轉）吧。要不然操作會很麻煩。界面之間的功能契合度要好。根據系統功能，進行有機整合。保證每個玩家行為都能夠用最小的步驟來完成。邏輯清楚合理。（界面的互斥性，以及顯示層級關係。）
信息：信息的展示等級，動的特效&>圖片&>按鈕&>文字（明暗度，大小，頻率，色彩）根據需求，對有時效性的東西進行有效設計。對於重要的東西進行標位。包括指示。
友好度：為了新手玩家，為了引導。保證每個功能都有按鈕或者文字進行引導。使玩家可以按照文字或者按鈕提示順利進行「下一步」或者「上一步」。不會出現卡殼現象。
精緻：現在手機屏幕解析度越來越高。做的精緻一些，是可以適當的使文字按鈕變小，信息顯示變多，但是，真心不推薦。除非你是戰略類遊戲。需要大量的信息資源同時進行觀察參考。但遊戲做的精緻總是沒錯的。
標題頁：標題頁是各種功能的入口，一定要分類規劃好。不要學知乎，它就是個不太成功的例子。
特性：要充分利用手機類遊戲的特性。上下左右劃屏。隱藏|呼出界面。多參照各種手機軟體，操作系統的設計。

而手游可以簡單的分為橫屏和豎屏。

橫屏標杆：

《武俠Q傳》（一陽指）

點評：以標籤切換和屏幕左右划動為主。充分利用了觸摸屏的滑動空間感。幾乎所有的操作都非常方便，簡潔。一個手指就能夠完成。

《刀塔傳奇》

點評：（左右互博術）

以左右呼應式來實現界面的操作。加上上下划動來進行擴展。省去了很多的彈出界面。使大部分操作在一個界面上就能夠進行。而且是通過兩隻手（大拇指）來相互完成。省去了手指的移動過程。

豎屏：

常用按鈕，互動型按鈕的提煉。系統的歸類，操作的簡便性，展示效果。

下文純為個人總結。無法肯定我是對的，但可以肯定的是，我是看到其他答案實在太水才來打字的。

原則：

焦點集中

什麼是焦點（自己去搜）

誤區：視覺焦點和操作焦點的混淆（懶得展開）

可復用性

為什麼？

利於認知
利於開發

如何做到？

控制項化

「控制項」的概念
控制項設計核心原則：單一職責

為什麼？

面向對象

在單一產品中使用最少種類的控制項

為什麼？

高復用
降低學習成本

盡量復用目標用戶已有的心智模型

什麼是心智模型（谷歌知道）
如何復用？

參照同類標杆產品明確目標用戶心智模型
改進

缺點？
自家產品有新的需求？

執行過程

劃分界面

依據？

內容量
關聯性

界面入口設計

閾值：4
場景化？

優點
缺點

UI化？

優點
缺點

劃分功能區

依據？

關聯性
操作便捷性

和系統負責人溝通

最好能直接結對
系統負責人是自己的話人格分裂一會兒自我討論下

自我分裂討論工具

思維導圖
意識流筆記

和畫師溝通

明確界限

交互體驗方面是我的，美觀度方面是你的，都TM別撈過界。界限之外可以提意見，但沒決策權
逐場景明確功能與焦點

迭代過程

迭代1：交互性優化

畫師出草樣
用Flash或者VBA或者InterfaceBuilder或者其他隨便什麼你會玩的玩意兒做出來感覺感覺
重複以上

迭代2：美觀度優化

畫師出正式稿
做Demo正式跑，明確不爽的點以及原因，說服畫師修改（這界面焦點散了，這界面操作焦點在這但是這這這又太吸引眼球，這個界面用場景做背景更好，商店界面你怎麼敢用冷色調呢你丫有常識嗎？其他界面入口的圖標別用齒輪，齒輪是設置的意思誒你連這都不懂？）
重複以上

有補充請提！有不同意見請噴！有不爽請罵！技術性理論性知識本來就是在噴與回噴中完善的雖然知乎是掛著問答狗頭的社交網站不過這裡的同行好歹還比遊戲魂的那幫小孩強點。你牛逼你回復啊，你不說話怎麼能顯得你牛逼呢？

很簡單，做完一個之後拿給你四五十歲的老娘老爹看，他們能看得懂是怎麼玩的，這個UI就成功了。

——這是我認為的原則。

學會PS，學會AI，拿塊板子，哄好程序去解決編輯器里的BUG（如果你不是獨立開發者可能可以略過這一步），然後，拚命地去改拚命地去畫吧。嘗試把自己想成一個玩家，嘗試看看外邊的天空。

——這是我認為的方法。

++++我是華麗麗的分割線++++

具體的東西，你去搜索那些UI設計的專業書籍就好了嘛~

做減法就對了

手游UI要想做得好，首先是借鑒，隨後才是創新。

借鑒找誰？豬廠和鵝廠。

為什麼要借鑒？

一是借鑒基本結構，這東西是基礎，吸取大廠經驗，減少學習的時間成本，對於我們而言，是後發優勢。

二是借鑒藝術審美，審美看天賦又看時間更看重生活經歷，那麼捷徑就是借鑒。這沒什麼好羞恥或者不恥的，借鑒不是抄襲。

基本的架構有了，那才是創新，站得住的創新，才叫創新。

相信這個問題應該有很多非業內人來看吧，其實對於業內的人來說，但凡學習能力強，基本都沿襲著該有的方法論去進行學習。

比較艱難的是，經常有行業外的人指點江山器宇軒昂，事實上那些人根本啥都不懂。

但更艱難的是，如果豬廠鵝廠的水準是90分，行業內的平均水準其實才60分。

大膽猜測一下，以題主投資人的身份，想了解的是如何評價檢驗設計，不至於是想親自動手吧？

我以為，大部分的設計原則和網頁遊戲還是相通的，稍有區別

首先要注意下移動狀態的使用場景

簡單的說就是按鈕一定要大（或者說可點擊區域要大），方便點擊。iOS設計指南中有明確的尺寸標準建議，這雖然是iOS的指南，但對於Andirod、WP系統也適用。

其次是屏幕尺寸問題

電腦屏幕大，一個屏幕可以同時開多個界面、每個界面上有都還有很多功能。但手機遊戲的屏幕更適合一屏一個界面，一個界面上也不適合太多功能。

現在太多手游界面都是頁游的界面布局風格（不只是那種頁游翻成手游的），可能是由於很多從業人員都是從頁游轉型的。

和普通UI設計的主要原則差不多，統一、簡潔、便捷、明確、符合遊戲用戶習慣。

方法論的話我覺的只要不妨礙用戶體驗遊戲就可以，畢竟遊戲玩法才是產品最核心的，如果UI設計能讓玩家察覺不到這是個UI這就是個按鈕，感覺就最好了！

個人覺得手游的ui設計這個說法太籠統，可以從不同角度來思考，也涉及不同職位的工作，

比如策劃需要考慮ui流程簡潔易懂，符合用戶群體操作習慣，功能覆蓋

美術需要考慮ui畫風統一，貼合遊戲主題，美觀

程序需要考慮ui響應及時，後台數據統一，處理各種異常等等

圖形化，簡易化，應用化。現在的國產網遊還是頁游的路子，但是不乏有部分做得好的單機作品。

好的遊戲UI不僅是讓遊戲軟體應用變得有個性有品味，還要讓軟體的操作變得舒適、簡單、自由、充分體現軟體的定位和特點。萊茵課程理解起來很容易。

答案大多都是從通用UI設計的角度考慮遊戲UI，我補充一點遊戲設計很重要的。

結合遊戲的圖形辨識度，這個是遊戲UI設計中最困難的。

在遊戲里你畫一個圖標，要讓人能理解兩點：1、這個圖標表示什麼意思；2、這個圖標暗藏的能力高低。

先說第一點，假如只是畫一把劍和一把刀，那區別還好做，甚至畫兩把劍，也都可以區分。但是技能圖標、物品圖標，就很難表達。比如下面幾個是wow里的技能圖標

第一行第一個還能看出來應該是個震地的技能，第二個能看出是個酒杯，但技能是什麼大概是不知道，第三個，你告訴我是什麼鬼？

由於遊戲里的道具、技能種類繁多，所以準確表達圖標本身就是一件非常困難的事情。

第二，圖標暗藏的能力高低。這個是遊戲圖標特有的一個隱性含義。我們最常見的RPG遊戲中，大多數都是有能力高低區分的，而一個優秀的圖標，是應該讓玩家看到後就知道這個東西是垃圾還是牛逼，如果想區分得很清楚又很漂亮，那就得下一大番功夫了。

最常見的辦法是添加顏色，同一種道具為了區分品質，通常是加上灰、綠、藍、紫、橙等顏色，品質能力依次遞增。但不得不說，這是種節約成本和偷懶的表現。另外，統一品質不同物品間，區分起來也困難。比如兩把武器，一把是倚天劍，一把碧血劍，都是紫色，但其實能力有差異，你怎麼從圖表就讓玩家知道哪個更好？

這裡面有很大的功夫。

所見即所得，千萬不要太高估玩家們的智商，特別是妹紙們，她們真的會截一個圖，畫一個框框問我，這個可以點嗎！