原文鏈接：http://bbs.gameres.com/thread_799637_1_1.html
基本原則UI設(shè)計(jì)服務(wù)于玩法設(shè)計(jì)
我把這個(gè)原則放在制作UI的第一條，是要時(shí)刻提醒項(xiàng)目的每一個(gè)人——玩法設(shè)計(jì)服務(wù)于用戶，而UI設(shè)計(jì)服務(wù)于玩法設(shè)計(jì)。這條原則可能在嘴上說說的時(shí)候非常振奮，但實(shí)際制作過程中，我們通常會(huì)忘記它。之所以說是“服務(wù)于”，首先必須有服務(wù)精神——即不改變“上游”的需求，同時(shí)更好的表達(dá)作為“下游”的特色，讓“上游”舒服。
但很可惜，我們絕大多數(shù)游戲的UI制作中，都會(huì)違反這條原則，最常見的例子就是：原本玩法設(shè)計(jì)每個(gè)角色4個(gè)被動(dòng)技能，最后發(fā)現(xiàn)UI“塞”不下了，3條剛好，于是要求玩法做出改變，變成3個(gè)被動(dòng)技能。這樣的思想是不允許的，UI服務(wù)于玩法，因此在這里玩法即是法律，不可改變。當(dāng)遇到問題的時(shí)候，我們應(yīng)該去做的是整理思路，重新研究重新設(shè)計(jì)，來解決問題，而不是自以為簡單或者最快的去改變問題本身。
克魯格的可用性定律
這是開始設(shè)計(jì)后應(yīng)被當(dāng)做信條的3個(gè)定律，克魯格的可用性3定律是：
- 別讓我想（Don'tmake me think）：這是任何一個(gè)軟件中，好的UI設(shè)計(jì)的基準(zhǔn)。一個(gè)界面應(yīng)該是讓用戶非常容易理解的，者往往建立于一些約定俗成之上。“除非有更好的選擇，否則就遵從標(biāo)準(zhǔn)。”——交互設(shè)計(jì)之父AlanCooper。
作為一個(gè)手機(jī)游戲的UI，我們可以偶爾使用市面上流行的UI設(shè)計(jì)方式（但他不應(yīng)該僅僅是某一款成功游戲的，而應(yīng)該出現(xiàn)在絕大多數(shù)游戲，形成一個(gè)規(guī)范），但是，手機(jī)標(biāo)準(zhǔn)的一些UI控件和交互方式才是我們真正的基準(zhǔn)，不要因?yàn)槭且粋€(gè)游戲，所以就覺得它和手機(jī)其他應(yīng)用之間完全不同，在用戶層，控件的習(xí)慣是由手機(jī)養(yǎng)成的，而不是手機(jī)游戲養(yǎng)成的——沒有人真的因?yàn)橐嬗螒蚨徺I手機(jī)。
除了一些“從未見過”的設(shè)計(jì)可以makeme think以外，還有：
l Confused：讓人困惑的，通常是因?yàn)樗O(shè)計(jì)的內(nèi)容帶有欺騙性、二義性或者含糊不清的，讓用戶感覺不知道該不該做出這個(gè)交互，但是這種“不知所措”卻不是因?yàn)樵谒伎疾呗曰蛘咦鰶Q定而形成的。
“我”選中了誰？confused！
l Surprised：選擇的結(jié)果讓人驚訝，通常是因?yàn)橛脩舻膽T性思維做了一個(gè)選擇，結(jié)果卻發(fā)現(xiàn)與想象的根本不一樣（違反了“約定俗成”）所致。這種“違反”包括且不限于：一個(gè)令人驚訝的UI控件，一個(gè)按下后反饋與提示（icon或者文字）所暗示的完全不符的按鈕……
如果藍(lán)色的是一個(gè)上下拖動(dòng)的列表，往上拖你甚至可以看到第4條、第5條內(nèi)容，這真是一個(gè)surprise！
- 點(diǎn)擊次數(shù)多不要緊，但必須每次都有意義：很多時(shí)候，我們會(huì)強(qiáng)調(diào)“方便”這個(gè)概念，而所謂的“方便”，直白的說就是“在更少的點(diǎn)擊次數(shù)里完成更多的事情”。但事實(shí)上這并不是真正的方便，所謂的方便，并不在乎你要點(diǎn)擊多少次按鈕，只需要每一次點(diǎn)擊都有它的意義。
- 去掉一半的文字，把剩下來的再砍掉一半：界面上不應(yīng)該有太多的文字，除非這個(gè)界面就是為了用來表現(xiàn)文字的，比如閱讀書籍的界面。一個(gè)好的界面中文字（含數(shù)字）占據(jù)整個(gè)界面的面積不會(huì)超過25%，最好是10%左右。我們?cè)O(shè)計(jì)一個(gè)UI，尤其是游戲的UI，應(yīng)當(dāng)更多地考慮使用游戲化的元素去做到這個(gè)事情：比如屬性標(biāo)題相比文字Caption，icon會(huì)更合適；比如比起一張報(bào)表，雷達(dá)圖或柱狀圖會(huì)更合適；再比如比起“33%”或“355/1200”這樣的百分比數(shù)字，一根進(jìn)度條會(huì)更游戲化。
席克定律（Hick's Law）
一個(gè)人面臨的選擇越多，則做出決定的時(shí)間越長。比起2個(gè)選項(xiàng)，人做5個(gè)選項(xiàng)會(huì)花更久的時(shí)間，這對(duì)于游戲整體節(jié)奏的把握來說非常重要——相比從一個(gè)有60個(gè)任務(wù)的列表里選出任務(wù)，先從8個(gè)章節(jié)中選出一個(gè)，然后再從這個(gè)章節(jié)下的7到8個(gè)任務(wù)中選出一個(gè)會(huì)更合適，在這點(diǎn)上國游的推圖做得很好。
同時(shí)看到過多的選擇不僅讓人不適，還會(huì)讓人放棄選擇。哥倫比亞大學(xué)商學(xué)院教授希娜·艾揚(yáng)格(Sheena Iyengar)在《當(dāng)選擇讓人失去動(dòng)力》(When Choice is Demotivating)的論文中指出，選擇較少時(shí)消費(fèi)者更容易購買果醬。當(dāng)面對(duì)24種不同果醬時(shí)，60%的消費(fèi)者會(huì)停下來試吃果醬，彈只有3%的人會(huì)買。而面對(duì)6種不同果醬時(shí)，40%的人會(huì)停下來試吃，卻有30%人最終購買。當(dāng)選擇看起來太困難了，人會(huì)選擇不做選擇。
所以，不要給你的用戶過多的選擇，當(dāng)選擇太多了，可以考慮把它“包一層”。
接近法則（The Law of Proximity）
格式塔（Gestalt）心理學(xué)：當(dāng)東西距離很近的時(shí)候，意識(shí)會(huì)認(rèn)為它們是相關(guān)的。
用戶下意識(shí)的就會(huì)認(rèn)為上圖中的區(qū)域被分為3塊，每一塊都有上下2個(gè)部分。因此如果當(dāng)左下角的“按鈕”（下半部分）與中間的“面板”（上半部分）相關(guān)聯(lián)的時(shí)候，無論它是否關(guān)聯(lián)左邊的“面板”，都會(huì)讓人覺得不適應(yīng)。
奧卡姆剃刀（Occam's Razor）
即簡單有效原理，代表性的話語就是“如無必要，勿增實(shí)體”。我們通常在“設(shè)計(jì)”過程中總喜歡做加法，并且不斷地用“更方便”“更全面”來說服自己，但是對(duì)于一個(gè)設(shè)計(jì)師來說，做減法是最考驗(yàn)功底的。
當(dāng)你為你的設(shè)計(jì)尤其是界面做了過多的加法之后，他非但不會(huì)如你所想的更加方便，反而還會(huì)變得無法使用——你更難發(fā)現(xiàn)界面想“說”些什么；同時(shí)還將徹底打擊你產(chǎn)品的調(diào)性，每一個(gè)功能的流程，它所經(jīng)歷的界面以及每一步驟界面的內(nèi)容，都是有“語氣”的。
奧卡姆剃刀原則是一個(gè)普通用戶與設(shè)計(jì)師的分水嶺，掌握好它之后才有資格稱作一個(gè)設(shè)計(jì)師。因此作為一個(gè)設(shè)計(jì)師，在任何設(shè)計(jì)中，不要忘記“做減法”。
設(shè)計(jì)過程真正地去理解一個(gè)玩法（和它的流程）理解玩法中的調(diào)性
在真正開始設(shè)計(jì)一個(gè)玩法的UI之前，最重要的事情是去了解“上游”，即這個(gè)玩法的核心調(diào)性，包括且不限于：
l 這個(gè)玩法是玩什么的？是一個(gè)玩家努力的回饋或者驗(yàn)證玩法（如戰(zhàn)場、競技場還有各種“收菜”）還是一個(gè)玩家安排策略的玩法（如天賦、技能加點(diǎn)）？
l 它應(yīng)該給出玩家什么樣的感覺？輕松的還是嚴(yán)肅的？
l 它與眾不同之處在哪兒？首先相信設(shè)計(jì)的這個(gè)玩法應(yīng)該是獨(dú)特的，即使是同一個(gè)玩法放在不同節(jié)奏的游戲中，它也可以是獨(dú)特的。
l 它為游戲的整體帶來了什么樣的節(jié)奏變化，以及它自己的節(jié)奏應(yīng)該是如何的？通常缺乏設(shè)計(jì)能力的設(shè)計(jì)中，設(shè)計(jì)師會(huì)把正在設(shè)計(jì)的模塊都當(dāng)做游戲最重要、最核心的模塊，并費(fèi)盡心思把它設(shè)計(jì)得像游戲的核心玩法一樣。但事實(shí)上每一個(gè)模塊都有自己的節(jié)奏，努力設(shè)計(jì)好它的態(tài)度是對(duì)的，但是不能偏激地去設(shè)計(jì)，還是要注意這個(gè)玩法的度。
在這一步的時(shí)候，最好和所有參與的人員，尤其是參與設(shè)計(jì)的人進(jìn)行更多的交流，達(dá)成盡可能的共識(shí)，百分百的共識(shí)是不可能的，每個(gè)人都有自己的想法和經(jīng)歷，所以每個(gè)人看同一件事情的角度總是會(huì)有差異的。但是“理解”絕對(duì)不應(yīng)該是“這不就是xxxx么？”這樣的。
設(shè)想應(yīng)用情景
在設(shè)計(jì)完或者大致理解了玩法設(shè)計(jì)之后，就要來設(shè)想一下用戶的應(yīng)用情景。這里最忌諱的是把自己代表用戶——“我玩的時(shí)候會(huì)這樣，然后那樣”或者“玩家只要這樣玩，就能那樣”，這樣的想法很玩家，并不適合設(shè)計(jì)師。作為設(shè)計(jì)師要想的是一個(gè)普通的用戶，在我們給他這些界面之后，他會(huì)怎么使用，比如餓了么：
- 用戶打開餓了么，是因?yàn)橄朦c(diǎn)外賣吃。
- 用戶進(jìn)來之后既然是想點(diǎn)吃的，那最重要的就是什么類型的吃的，正餐？下午茶？水果？不同的個(gè)體在不同的情況下會(huì)有不同的想法，所以“我會(huì)如何”這個(gè)概念就不合適。所以設(shè)計(jì)師應(yīng)該給出用戶選擇這些的入口。
- 當(dāng)用戶選好分類之后，會(huì)有2種可能：用戶會(huì)優(yōu)先選擇店鋪（比如老吃一家店了，或者根據(jù)對(duì)應(yīng)想吃的東西找名牌），或者用戶非常渴望吃某個(gè)東西，比如特別想來杯絲襪奶茶。所以應(yīng)該有品類和店鋪可供用戶選擇。
就這樣一個(gè)引導(dǎo)用戶到菜單的“玩法”的應(yīng)用情景就產(chǎn)生出來了，之后就該進(jìn)入詳細(xì)的選擇內(nèi)容和返回再選擇過程了，選擇完之后下單、追蹤進(jìn)度、貨到后反饋一個(gè)閉環(huán)一氣呵成。
思考用戶的應(yīng)用情景，最重要的是思考：用戶在什么時(shí)候?yàn)槭裁磿?huì)進(jìn)入這個(gè)界面，他到底想怎么干什么。這當(dāng)中的每一步都是有自己意義的，步驟的先后通常也應(yīng)該是一個(gè)不可逆關(guān)系，如果你依然覺得先哪一步都可以，說明還沒有定清除這個(gè)“玩法”的調(diào)性——設(shè)想一個(gè)Fifa或者實(shí)況足球類型的游戲：如果步驟是先選球隊(duì)，再選球衣，再布陣。則說明選球隊(duì)是慎重的事情，你應(yīng)該先考慮清楚，當(dāng)然這不代表選球衣也如此慎重，只是最后一步布陣也是慎重的事情，所以把選球衣獨(dú)立出來。但如果選球隊(duì)和選球衣同步，或者選球衣和布陣同步，他給出的感覺就是這一步的隨意性會(huì)更高，甚至?xí)礤e(cuò)誤的體驗(yàn)，想一想用戶選球隊(duì)的時(shí)候關(guān)注的應(yīng)該是什么？應(yīng)該是這個(gè)球隊(duì)的屬性（如進(jìn)攻力等）。球衣顏色是否讓用戶喜歡，并不是一個(gè)強(qiáng)到能和屬性平級(jí)的東西，而是在接受了屬性之后的一個(gè)調(diào)劑。所以需要分2次選擇，當(dāng)你把這兩步放在一起做的時(shí)候，就會(huì)給出一個(gè)錯(cuò)誤的暗示：球隊(duì)屬性+球衣顏色（樣式等）是選擇球隊(duì)的依據(jù)。當(dāng)然在這里你還要用“克魯特的可用性第二定律”來“說服自己”——并不是說多出幾步操作就不方便了，因?yàn)檫@里的每一步都是必要的——這個(gè)過程明確了玩法的調(diào)性。
列出整個(gè)交互過程的流程圖
當(dāng)應(yīng)用情景思考完之后，基本上整個(gè)流程就出現(xiàn)了，不妨把他記下來，因?yàn)檫@只是一個(gè)理想的流程。在確定這個(gè)理想的流程之后，就要開始細(xì)分每一步的操作流程，即每一個(gè)流程中的“事”，當(dāng)然流程中大多的“塊”都應(yīng)該本就是一件事。
<ignore_js_op style="word-wrap: break-word;">[圖片上傳失敗...(image-1dcbbb-1533697112418)]</ignore_js_op>
一個(gè)moba游戲中，我們會(huì)先選擇模式，然后選擇英雄，最后開始游戲。而選擇英雄的過程還能進(jìn)一步細(xì)分（假如沒有排位模式）為選擇具體那個(gè)英雄、選擇設(shè)定的Build（如天賦、符文之類），然后選擇英雄的皮膚，這里我們就要看哪些應(yīng)該是一體的，哪些應(yīng)該是分步驟的，選擇用誰和build組成了“選英雄策略”，所以他們其實(shí)是一體的（同一件“事”），而選擇皮膚，則是對(duì)選定的英雄進(jìn)行一個(gè)錦上添花，所以分開到下一步。
羅列出需要顯示的信息和與用戶的交互內(nèi)容****這個(gè)界面解決什么事情？
當(dāng)確定完流程之后，我們要開始確定多少個(gè)UI了。每一個(gè)UI應(yīng)該只解決一件“事情”（即一個(gè)UI一個(gè)主題），而不應(yīng)該有過多的事情要去做，以避免一個(gè)UI有過多主題。所以我們要從流程中找出，到底有些什么事情，然后針對(duì)每一件事情做一個(gè)UI。
比如游戲的裝備系統(tǒng)玩法中，玩家可以裝備（使用）獲得的裝備（道具），可以強(qiáng)化裝備（道具），可以賣出裝備（道具），但這就是三件事，互不相干，所以你應(yīng)該有3個(gè)對(duì)應(yīng)的界面，并且確保他們的可辨識(shí)度，畢竟這3件事情雖然有著相似的操作，但有著截然不同的操作結(jié)果。
該不該在“選擇裝備”這個(gè)界面里設(shè)置賣出和強(qiáng)化功能以方便用戶操作？首先賣出是肯定不能要的：“我”是來選擇一個(gè)裝備穿上的，至少“我”希望它和對(duì)應(yīng)的裝備（道具）都還是“我”的。“你”（設(shè)計(jì)師）卻給我一個(gè)按鈕讓裝備（道具）可能變得不是“我”的，這就是徒增心智負(fù)擔(dān)，所以賣出是一定不能要的！那么再來看看強(qiáng)化是否需要？這取決于強(qiáng)化玩法的調(diào)性，假如強(qiáng)化本身是一個(gè)區(qū)別于裝備的策略玩法，“我”要強(qiáng)化一個(gè)裝備（道具）需要合理的分配我的資源（比如強(qiáng)化石等道具，還有金幣等等），是一個(gè)慎重選擇的過程，那么它就不該出現(xiàn)在這里，因?yàn)檫@里解決的是“選擇裝備的策略”，但如果強(qiáng)化只是花點(diǎn)錢升級(jí)（前提是錢是最常見的貨幣，因此形不成策略，只是一個(gè)積累的貨幣的轉(zhuǎn)化過程）那么它可以出現(xiàn)在這里，成為“選擇裝備”的一個(gè)“輔助策略”——不同的強(qiáng)化玩法調(diào)性，帶來不同的設(shè)計(jì)方向，正是取決于強(qiáng)化和裝備能不能算是“同一件事”。
哪些信息幫助解決這個(gè)事情
可以簡單的羅列出游戲中所有對(duì)于這件“事”有幫助的信息，所謂有幫助的信息，可以簡單地分析為：
l 這個(gè)信息和這件事情的元素是有關(guān)的：道具的icon、名字、類型、品質(zhì)等級(jí)代表了一個(gè)裝備（道具）“是什么裝備”，所以對(duì)于任何道具有關(guān)的界面，它們都可能是有用的信息。
l 這個(gè)信息能幫助“我”決策這件“事”：對(duì)于選擇裝備的界面來說，每一件裝備（道具）的屬性（比如攻擊力、防御力什么的）都是這樣的信息；但是裝備（道具）的價(jià)格肯定不是——因?yàn)閷?duì)于通常的RPG游戲來說價(jià)格不會(huì)影響我是否選擇穿上它，除非這也是游戲的一個(gè)特殊規(guī)則。
l “我”很想知道這個(gè)信息：一些信息它可能并不是直接對(duì)于解決“事”有用的，但是這些信息在這個(gè)應(yīng)用情境下會(huì)給“我”一定的幫助，或者從心理上給我一些暗示等。例如：商城打折物品的原價(jià)、餓了么中“店長推薦”。
要注意的是，在這里我們只需要思考需要列出的信息，而不要考慮如何表現(xiàn)它。相對(duì)的也不應(yīng)該去思考一些“美化用”的UI元素。
干掉不需要的信息
在整理出需要的信息之后，我們要拿出“奧卡姆剃刀”，把對(duì)于這件事情不重要的信息干掉了，往往在這些信息中不那么重要的信息有以下特性：
l 對(duì)這件“事”的這個(gè)過程不相干的信息：有很多信息看似對(duì)于這件“事”很重要，但是放在這個(gè)過程的這一環(huán)節(jié)，它就不是必要的信息了。我們?cè)O(shè)想一個(gè)裝備（道具）玩法，每一件裝備（道具）都有被動(dòng)技能（類似MHW），配置被動(dòng)技能甚至產(chǎn)生Build是這個(gè)裝備的核心玩法之一，因此了解配完裝備會(huì)有什么被動(dòng)技能、這些被動(dòng)技能因?yàn)楫?dāng)前配裝所生效的效果都可能是必要的信息，但是在“選擇裝備”這件事情上，這個(gè)被動(dòng)技能到底是什么效果、它當(dāng)前生效的程度其實(shí)都不重要，因?yàn)橛脩舾谝獾氖恰拔摇迸淞硕嗌賯€(gè)技能，到多少級(jí)（或者百分之多少的程度），具體這個(gè)技能什么效果和這個(gè)級(jí)別的具體生效程度是進(jìn)一步（另一個(gè)界面）的事情，所以當(dāng)然可以在這個(gè)UI中被干掉。
l 界面中不必要的“誘惑”：一些信息對(duì)應(yīng)的元素添加之后，反而會(huì)引起用戶的好奇心，讓用戶期望進(jìn)行“偏題”的操作，進(jìn)而引發(fā)出一些與整個(gè)流程看似相關(guān)實(shí)則格格不入的流程和界面。比如在選擇英雄的列表中列出這個(gè)英雄技能的icon，原本用戶可能早已熟悉了這個(gè)英雄了，但是當(dāng)你列出了這些技能icon（且僅有icon）后，用戶會(huì)想看看這個(gè)icon（不熟悉這個(gè)界面），或者icon對(duì)應(yīng)的技能（熟悉界面后）的信息，這就是錯(cuò)誤地“誘惑”了用戶，讓他產(chǎn)生了不不該有的、“偏題”的想法。
l 讓人想更多（策略）的信息：很多玩法本身是有策略的，所以提供出信息，但是有些信息也會(huì)間接地產(chǎn)生更多的策略，但是這些策略實(shí)際上與這件事情本身并不符合，那么它就不應(yīng)該出現(xiàn)在這個(gè)界面，而應(yīng)該是另一個(gè)界面。設(shè)想一下D3中技能界面，如果出現(xiàn)在技能名下方的不是當(dāng)前所選的符文，而是列出了所有符文高亮了選中的那個(gè)會(huì)發(fā)生什么？這也類似“界面中不必要的誘惑”，因?yàn)椤拔摇痹诩寄芙缑嬷袘?yīng)該看到的是“我”當(dāng)前的技能方案，這里的策略是：“我應(yīng)該換掉哪個(gè)”而不是“我要把哪個(gè)換成哪個(gè)”。
l 帶來心智負(fù)擔(dān)的信息：當(dāng)“我”正在商城里瀏覽各種時(shí)裝皮膚，配置到我的角色身上，看著“我”選的小姐姐角色變得更漂亮，并陶醉其中的時(shí)候，“你”（設(shè)計(jì)師）卻列給我看當(dāng)前的時(shí)裝總共要多少錢，甚至“我”還差多少錢可以買下來。這就是典型的“不必要的心智負(fù)擔(dān)”，畢竟“我”正在欣賞的是美感，是美好的東西，最后這些美好也許會(huì)打動(dòng)我去買下，請(qǐng)“你”（設(shè)計(jì)師）在“我”真的決定要買的時(shí)候，再告訴“我”還差什么，而不是隨時(shí)隨地都告訴“我”。
排布界面
當(dāng)確定完一個(gè)界面需要的信息之后，我們差不多也就可以確定這個(gè)界面的交互了（即用戶可以進(jìn)行的操作），畢竟一個(gè)界面解決一件“事”。
根據(jù)重要級(jí)排序信息
首先我們應(yīng)該為篩選出來的所有信息元素和交互排個(gè)序，列出它們對(duì)這件“事”的重要級(jí)，這里一定存在先后關(guān)系——即沒有兩個(gè)信息（或交互）是等價(jià)的，不然說明信息或者交互還存在一定的問題（即使是“是”或“否”的選擇，也應(yīng)該有一個(gè)更重要的，即設(shè)計(jì)師期望用戶去點(diǎn)的）。排序的依據(jù)可以是：
l 更接近這件“事”主題的：比如足球游戲中選擇一個(gè)球隊(duì)的界面中，球隊(duì)是第一的，因?yàn)樗峭婕易钪匾倪x擇依據(jù)和交互，一切都圍繞著“選擇球隊(duì)”展開；其次才是球隊(duì)的實(shí)力，相比之下球隊(duì)實(shí)力信息本身也是一個(gè)非常重要的“選擇球隊(duì)”的依據(jù)信息，是玩家做出決定的根本因素，但它并不是交互的第一焦點(diǎn)。
l 更需要成為用戶視覺焦點(diǎn)的：比如一個(gè)“更換裝備”界面中，有每一件可選的裝備（道具），也有當(dāng)前的角色屬性。這兩個(gè)信息都是用戶做出決策的關(guān)鍵信息，在“更接近這件事”上兩者的地位相當(dāng)，但是作為設(shè)計(jì)師，更希望讓用戶看到的應(yīng)該是每一件裝備的屬性（及其帶來的變化），因?yàn)檫@個(gè)玩法的策略點(diǎn)是——在比較之后決定選哪個(gè)裝備（道具）。其次才是裝備后的變化結(jié)果，即角色屬性。
除此之外，排序還有一個(gè)重要的工作就是“分塊”，即把哪些信息分成一塊（解決這件“事”的一個(gè)“點(diǎn)”或者說“問題”），當(dāng)然，塊越少說明設(shè)計(jì)的越好。
根據(jù)排序安排元素
選擇界面元素即選擇UI使用的元件（控件、component）。這個(gè)過程不僅考驗(yàn)設(shè)計(jì)師對(duì)美的感官，同時(shí)還會(huì)有幾個(gè)要點(diǎn)：
l 能用圖形的不用文字（含數(shù)字）：這一條也正是克魯格的第三定律，既然是一個(gè)游戲UI，那么能采用圖形元素?cái)⑹碌木鸵欢ú挥梦淖郑词贡仨氂梦淖郑矐?yīng)當(dāng)考慮配合圖形。最常見的就是進(jìn)度條、雷達(dá)圖配合屬性數(shù)值。純文字的UI對(duì)于游戲是不合適的，當(dāng)然對(duì)于讀書軟件還是不可避免的。當(dāng)然最常見的例子還有一個(gè)就是用顏色來表達(dá)裝備品質(zhì)，而不是傻傻地寫出“優(yōu)秀”“精良”之類的文字。這一條即使不是做游戲，也要盡可能地靠攏。
l 不用windows控件：既然是一個(gè)手機(jī)上的軟件（只不過分類是游戲而已），那么就不該采用windows的控件。不論是從產(chǎn)品調(diào)性或者約定俗成的角度來看，Combobox、RadioGroup都是特別不允許的。而實(shí)際設(shè)計(jì)中，包括一些彈出hint框什么的，嚴(yán)格來說都是windows控件，除非是完全不可避免，不然不應(yīng)該設(shè)計(jì)，尤其是錯(cuò)誤地認(rèn)為這可以“更方便”的情況下。Windows控件并不能帶來更方便或者更好的表現(xiàn)，能帶來的只是更不舒服的操作，除非你的產(chǎn)品是一個(gè)“端轉(zhuǎn)手”或者“山寨端游”的產(chǎn)品，并且一些細(xì)節(jié)必須使用這些控件，才能體現(xiàn)出那種“原汁原味”，比如王者榮耀的很多UI設(shè)計(jì)其實(shí)是為了表現(xiàn)出這是手機(jī)版LoL，所以才用了一些windows的設(shè)計(jì)。
l 風(fēng)格統(tǒng)一化：每一個(gè)界面的風(fēng)格都應(yīng)該是一體的，這個(gè)推薦參考一些類似Material Design的設(shè)計(jì)模板。當(dāng)然光參考模板效果也不好，因?yàn)楹芏喑跫?jí)設(shè)計(jì)師會(huì)為了“草草了事”之類的原因，隨手放一個(gè)與整體感格格不入的控件（組）在界面上。
根據(jù)元素設(shè)計(jì)布局
當(dāng)選擇完元素之后，我們就可以開始為這些元件選擇他們應(yīng)該出現(xiàn)的區(qū)域了，這步的思路非常簡單直白——越重要的塊，它的中心點(diǎn)越“接近”整個(gè)屏幕的中心，當(dāng)然這里的“接近”指的是兩點(diǎn)（屏幕中心和元件中心）間距/元件對(duì)角線長度來算的；同時(shí)越重要的塊，面積也應(yīng)該更大。當(dāng)然這也會(huì)依賴于采用的控件，所以這步只是一個(gè)概念，而不是絕對(duì)的。
另外，這里尤其要注意的是，相近功能的東西，應(yīng)該盡可能湊在一起——接近法則。
根據(jù)布局調(diào)整內(nèi)容
之后就是對(duì)整個(gè)界面的布局，這里會(huì)開始微調(diào)一些控件的尺寸，并且微調(diào)它們的位置（注意都是“微調(diào)”）。手機(jī)UI推薦使用扁平風(fēng)格的，這樣也可以順便讓界面看起來不是windows的。所以有這樣幾個(gè)要點(diǎn)：
l 做對(duì)齊線，讓元素之間、尤其是相關(guān)的元素之間對(duì)齊，對(duì)齊是一種美感，也是一種關(guān)聯(lián)性的很好體現(xiàn)。
l 假如你要用列表，那么列表應(yīng)該貫穿整個(gè)屏幕（橫或者豎），好的列表其拖動(dòng)方向順應(yīng)屏幕長邊（比如橫屏就是橫著拖）；其元素寬高比相反于列表（橫拖的列表每一個(gè)元素應(yīng)當(dāng)是豎長的）；單行/列元素個(gè)數(shù)不應(yīng)該超過2，推薦為1。
l 不要擔(dān)心按鈕太大，而應(yīng)該擔(dān)心按鈕讓人誤解它的作用，太小的按鈕不僅看起來像是windows的，它的關(guān)聯(lián)對(duì)象也會(huì)不同——接近法則。
l 注意平衡，不要讓一側(cè)UI顯得很重（元素太多、太密）而讓整個(gè)屏幕仿佛會(huì)朝著一邊倒下去。
l 黃金分割很好，不過也不要被套死。只能說盡可能讓元素，尤其是看起來像卡牌的那些元素接近（而不是完全符合）黃金分割比例。
根據(jù)內(nèi)容驗(yàn)算節(jié)奏
我們的UI設(shè)計(jì)差不多就完成了，但是“行百里者半于九十”，這里開始，我們就要驗(yàn)證UI設(shè)計(jì)的好不好，首先就是自己得驗(yàn)證一下：
l 通過“試試看”來對(duì)比：其實(shí)當(dāng)我們?cè)O(shè)計(jì)的過程中，我們就會(huì)遇到一些糾結(jié)，比如某個(gè)元素是否換一個(gè)表現(xiàn)方式會(huì)更好？再比如換一個(gè)圖標(biāo)會(huì)不會(huì)效果就不同？不要空想這些問題，試一試，對(duì)比一下，然后再選擇。
l 設(shè)計(jì)每一種可能出現(xiàn)的情況而不要空想：很多UI中的元素在使用重復(fù)的、相同的元素的時(shí)候會(huì)很好，比如列表中的道具，都是用同一個(gè)icon、同一個(gè)名字、同一個(gè)品質(zhì)顏色的時(shí)候很棒，但是如果換成實(shí)際的會(huì)不會(huì)還這樣？甚至可能會(huì)看起來很花？還有就是當(dāng)列表元素很多的時(shí)候看起來很好，但是只有1個(gè)元素會(huì)不會(huì)失衡？這些與其猜測，不如直接多扣點(diǎn)圖來看看“最后的效果”再做定論。
l 記得看看交互的節(jié)奏：UI設(shè)計(jì)的同時(shí)還要考慮UI的動(dòng)畫表現(xiàn)，也要考慮用戶操作的UE，這個(gè)操作依然不是“方便”與否，而是看整個(gè)過程占用的時(shí)間，是否符合這個(gè)界面應(yīng)有的節(jié)奏，如果太拖沓或者太快，也是會(huì)摧毀掉一個(gè)好的UI設(shè)計(jì)的。但是節(jié)奏這個(gè)設(shè)計(jì)本身沒有規(guī)律可循，只有結(jié)合設(shè)計(jì)師的靈性和對(duì)游戲整體調(diào)性把握才能得出這個(gè)結(jié)論。
看“用戶”的“反饋”
當(dāng)做完一個(gè)UI設(shè)計(jì)之后，我們應(yīng)該拿給別人看，把他們當(dāng)做用戶。對(duì)我的Team而言，我就是他們的“用戶”，在他們完成設(shè)計(jì)后就會(huì)首先拿給我看。作為他們的“用戶”，我會(huì)發(fā)表我的感受與我的指導(dǎo)，但是絕大多數(shù)用戶并不具備專業(yè)性，所以要學(xué)會(huì)自己去提煉用戶真正的反饋。
拿給你的“用戶”看，而不是說給你的“用戶”聽
你需要做的是把你的UI拿給你的用戶看，然后不做出任何的解釋，假如是一份策劃案，最好不要帶任何說明文字。讓你的“用戶”自己去理解，假如有什么不理解的，那只能說明設(shè)計(jì)有問題。這也是很多優(yōu)秀團(tuán)隊(duì)采用one page設(shè)計(jì)模式的一個(gè)核心原因——一切問題盡在不言中。
聽、分析、反思，而不是解釋
把UI拿給你的用戶，看他的反應(yīng)。他的表情、舉止、和下意識(shí)提出的問題就是對(duì)你UI的反饋（當(dāng)然也有人帶著找茬的心態(tài)看UI，學(xué)會(huì)自己過濾就好了）。在這一步，你應(yīng)該去發(fā)現(xiàn)哪些原因讓用戶感到困惑，哪些表現(xiàn)讓用戶不能理解。千萬不能對(duì)UI進(jìn)行解答，尤其是當(dāng)你的“用戶”問你的時(shí)候，你也要假裝自己是另外一個(gè)不知情的群眾，不要把設(shè)計(jì)時(shí)候的心思告訴他，因?yàn)檫@樣他的困惑會(huì)被你誤導(dǎo)而消失，但是并不是所有用戶都有機(jī)會(huì)聽你說的。
“對(duì)癥下藥”
解決設(shè)計(jì)問題要對(duì)癥下藥，而不是哪兒不對(duì)改哪兒。甚至在必要的時(shí)候徹底刪除已經(jīng)設(shè)計(jì)好的界面，從0開始重新整理重新設(shè)計(jì)也是必要的。比如有時(shí)候你的用戶發(fā)出這樣的驚訝——“這個(gè)按鈕竟然不是控制這個(gè)變化的？”這個(gè)問題真的僅僅只是按鈕的位置、尺寸不對(duì)嗎？具體問題還是需要具體分析之后才做出解決方案。最重要一點(diǎn)：不要怕辛苦！設(shè)計(jì)UI耗費(fèi)大量時(shí)間和精力是必須的，因?yàn)樵O(shè)計(jì)UI，就是你在教你的游戲如何跟玩家暢快地交流，甚至對(duì)他們講述游戲的故事。
