UI設(shè)計(jì)15個(gè)黃金法則

1、開始游戲所需按鈕點(diǎn)擊不超過(guò)3次。

id可以在網(wǎng)絡(luò)游戲中實(shí)現(xiàn)這點(diǎn),所以你也可以做到。玩家不希望游戲不斷地向他們呈現(xiàn)需要他們?nèi)ダ斫馍踔習(xí)绊懙接螒虻臄?shù)據(jù)。玩游戲是他們的首要想法。你不可在15分鐘的首 次游戲體驗(yàn)前添加長(zhǎng)達(dá)20分鐘的內(nèi)容介紹，這會(huì)讓玩家抓狂。

2、隱藏復(fù)雜性。

“高級(jí)”標(biāo)簽的作用就在于此。在將玩家引入游戲玩法體驗(yàn)時(shí)，所有當(dāng)前不相關(guān)的內(nèi)容都需要被隱藏到其他對(duì)話框中。這種想法不是說(shuō)要移除游戲的復(fù)雜性(這也算是種恰當(dāng)?shù)淖龇ǎ?，而是不需要立即呈現(xiàn)這些復(fù)雜內(nèi)容。當(dāng)然，你可以允許玩家改變參數(shù)，但是不必要求甚至強(qiáng)迫他們查看能夠改變哪些參數(shù)。那些想要做這件事情的人自然會(huì)找到可以幫助他們實(shí)現(xiàn)目標(biāo)的選項(xiàng),但是要記住的是，試圖改變參數(shù)的玩家比例不足50%。對(duì)于50%以上的玩家，你只要呈現(xiàn)無(wú)需他們更改的選項(xiàng)和功能，因?yàn)檫^(guò)多的選擇只會(huì)讓他們備感困惑。

3、在同一個(gè)地方向玩家呈現(xiàn)所有信息。

保持信息呈現(xiàn)位置的一致性。你需要引導(dǎo)玩家查看某個(gè)地方而且只需查看這個(gè)地方就能夠獲得所有游戲信息。當(dāng)然,信息呈現(xiàn)方面有個(gè)技巧,就是對(duì)信息內(nèi)容進(jìn)行過(guò)濾,這樣玩家就無(wú)需去注意過(guò)多來(lái)自游戲或其他玩家的信息，信息量過(guò)大可能會(huì)導(dǎo)致玩家丟失關(guān)鍵信息。但這是信息的過(guò)濾層面，留待以后作深入探討。必須注意,如果你只是高亮顯示錯(cuò)誤或遺漏的輸入內(nèi)容,也算未遵守這個(gè)規(guī)則。當(dāng)你在網(wǎng)頁(yè)頁(yè)面中填寫表格時(shí),它們經(jīng)常采用的就是這種方法,這當(dāng)然是允許的。但是，如果你要這么做,不要只使用文字顏色來(lái)暗示錯(cuò)誤，這會(huì)給色盲用戶帶來(lái)不便。你需要做的是反向高亮文字內(nèi)容，所以不要只將不當(dāng)文字顯示成紅色,還要將背景顯示為紅色。這樣,即便是色盲用戶，也能夠領(lǐng)會(huì)到輸入錯(cuò)誤。

4、過(guò)濾信息，呈現(xiàn)含義。

能夠呈現(xiàn)信息固然很好，但是你分享的信息越多就越好嗎﹖從某種程度上來(lái)說(shuō)，情況確實(shí)如此。但是,如果信息大量涌向用戶，他們就會(huì)感到反感?！澳愦_定要這么做?”等重復(fù)性信息會(huì)成為垃圾信息，會(huì)被用戶忽視或直接點(diǎn)擊，而垃圾信息過(guò)多會(huì)使用戶忽略重要信息。設(shè)定重復(fù)性對(duì)話框的呈現(xiàn)冷卻時(shí)間是種不錯(cuò)的做法，比如3次呈現(xiàn)某個(gè)對(duì)話框后，在預(yù)設(shè)的時(shí)間內(nèi)不再呈現(xiàn)該對(duì)話框,可以將預(yù)設(shè)時(shí)間設(shè)定為上次對(duì)話框呈現(xiàn)的5分鐘時(shí)間內(nèi)。通過(guò)這種方法，用戶就無(wú)需不斷點(diǎn)擊相同的對(duì)話框,也就不會(huì)受這些信息煩擾。

允許用戶過(guò)濾某些信息類型也是個(gè)不錯(cuò)的做法。比如，允許用戶忽略來(lái)自腳本系統(tǒng)的警告或信息。這需要對(duì)信息進(jìn)行恰當(dāng)分類，這樣系統(tǒng)才能識(shí)別其屬于哪個(gè)類別。雖然麻煩，但卻是可以采納的做法。

而且，在某個(gè)地方保存所獲得信息的列表,同時(shí)確保用戶知道這個(gè)地方。這樣，如果他們需要這些信息，可以隨時(shí)查看。

對(duì)于信息的呈現(xiàn)，還有點(diǎn)值得一提:將他們所做出改變的含義告知用戶很重要,尤其是工具。如果用戶在虛幻編輯器中點(diǎn)擊“所有內(nèi)容使用動(dòng)態(tài)光照”按鈕,那么需要告知他們此等做法會(huì)對(duì)幀率產(chǎn)生的影響。使用在屏幕上通過(guò)顯示文本來(lái)解釋每個(gè)按鍵作用的傳統(tǒng)方法往往是不夠的,因?yàn)閮?nèi)容或其他設(shè)置的不同經(jīng)常導(dǎo)致某種控制產(chǎn)生的影響發(fā)生變化。如果只是2000 poly場(chǎng)景中的單個(gè)對(duì)象，那么設(shè)置“所有內(nèi)容使用動(dòng)態(tài)光照”不會(huì)產(chǎn)生負(fù)面影響，只有當(dāng)在10000 poly世界中渲染400個(gè)對(duì)象時(shí),負(fù)面效果才會(huì)明顯。所以從根本上來(lái)說(shuō)，我的觀點(diǎn)是要對(duì)控制改變可能引發(fā)的其他改變進(jìn)行內(nèi)部分析，將其與可能對(duì)用戶產(chǎn)生極大改變的其他影響方法相比較。再次強(qiáng)調(diào),注意對(duì)話框和信息的呈現(xiàn)次數(shù)也是必要之舉,因?yàn)榭偸菚?huì)出現(xiàn)某些特殊事例,使得應(yīng)用認(rèn)為用戶提出的是非意愿行為要求,因此而不斷發(fā)出警告。

5、保持所有UI呈現(xiàn)內(nèi)容一致性是關(guān)鍵。

有些做法是顯而易見的，比如應(yīng)用中可以使用單選按鈕或復(fù)選框,但是不可融合使用這兩者，在所有對(duì)話框中,保持所使用文字類型、字體和大小的一致。但是，還有些更為精致的東西。比如，如果你需要在工具中提供路徑,保持使用瀏覽器按鈕,不要期望用戶會(huì)直接輸入路徑。XCode便是個(gè)絕 佳的反例。還有個(gè)不錯(cuò)的做法，使用滾動(dòng)欄而不是要求用戶輸入數(shù)值,但可以仍支持用戶使用數(shù)值輸入方法。
數(shù)據(jù)輸入最重要的部分之一是從一開始就避免用戶輸入不良或沖突性數(shù)據(jù)。應(yīng)用程序中有許多代碼可以處理不良數(shù)據(jù)，但是從一開始就杜絕不良數(shù)據(jù)的輸入是個(gè)更好的方法。這正是使用預(yù)設(shè)下拉菜單的原因所在，因?yàn)槟憔涂梢源_保程序不會(huì)獲得拼寫錯(cuò)誤的單詞以及不良的數(shù)據(jù)。

6、如果能夠?qū)崿F(xiàn)無(wú)需用戶輸入內(nèi)容的話，就采用這種方法,這是第5點(diǎn)的擴(kuò)展。

預(yù)設(shè)下拉菜單標(biāo)簽或者在需要用戶輸入的地方提供默認(rèn)文本，這樣如果用戶不愿意的話，就無(wú)需自己動(dòng)手輸入任何文本。所有東西都應(yīng)當(dāng)有默認(rèn)選項(xiàng)。

7、可以設(shè)置通過(guò)多渠道查看相同對(duì)話框

WindowsXP在這一點(diǎn)上做得很好,允許用戶通過(guò)多種途徑打開相同的控制對(duì)話框。這樣做是可以接受的。應(yīng)當(dāng)注意，在使用這種方法時(shí)，應(yīng)當(dāng)**對(duì)話框本身的一致性。無(wú)論你通過(guò)何種渠道打開對(duì)話框，它們都是完全相同的，包括外觀、表現(xiàn)和功能。

8、控制設(shè)置于相同且唯 一的地方

這是第6點(diǎn)的擴(kuò)展。同種控制只應(yīng)當(dāng)存在于單個(gè)對(duì)話框中,而且不可設(shè)置外觀看似相同但功能不同的控制，這會(huì)讓用戶在理解上遭遇困境。同樣，XCode在這個(gè)方面做得很不好。

9、對(duì)話框深度不可超過(guò)3層。

如果你制作的是RPC游戲的話，或許可以設(shè)置4層。對(duì)話框深度設(shè)置的底線是,不可讓用戶對(duì)他們所處的位置、正在做的事情以及原因感到困惑。你還需要在對(duì)話框樹中呈現(xiàn)他們所處的位置,添加后退鍵固然不錯(cuò)，但是一個(gè)小的對(duì)話框樹指示器會(huì)顯得更好，可以參照Win-dows系統(tǒng)資源管理器的做法。

10、對(duì)話框切換。

對(duì)話框切換時(shí)間最 好在150毫秒內(nèi)完成，最多只能是200毫秒。如何切換以及切換的精美程度都無(wú)關(guān)緊要，用戶想要的是短暫的響應(yīng)時(shí)間，尤其當(dāng)他們通過(guò)UI對(duì)話框樹導(dǎo)航的時(shí)候。華麗但漫長(zhǎng)的切換就像是在跟用戶開玩笑。用戶剛開始或許會(huì)覺得設(shè)計(jì)很酷,但是一段時(shí)間后就會(huì)感到厭煩,你要做的只是讓整個(gè)過(guò)程更快就可以了。

11、任何能夠在視覺上影響其他內(nèi)容的事物都應(yīng)當(dāng)即時(shí)變更。

如果你不知道光照或服飾改變對(duì)角色以及其他內(nèi)容的影響，那么就應(yīng)當(dāng)即時(shí)呈現(xiàn)這些內(nèi)容，這樣用戶就能夠看到他們改變?cè)O(shè)置后的效果。有時(shí)候,這一點(diǎn)可能無(wú)法實(shí)現(xiàn)，因?yàn)閱雾?xiàng)設(shè)置的改變會(huì)影響到其他內(nèi)容(游戲邦注:比如在腳本值的修改中，只有修改另一個(gè)后才能使之生效）。但在可以實(shí)現(xiàn)這種即時(shí)呈現(xiàn)的內(nèi)容上，你最 好這么做。

12、讓所有內(nèi)容均可配置和保存。

允許用戶修改每個(gè)窗口的大小以及位置,并將其保存。設(shè)置默認(rèn)選項(xiàng)是很簡(jiǎn)單的事情,但是確保應(yīng)用程序能夠保存所有用戶做出的改變。記住,對(duì)話框布局能夠給用戶節(jié)省大量時(shí)間。

13、區(qū)別呈現(xiàn)信息和可變更數(shù)據(jù)。

用戶無(wú)法改變的信息應(yīng)當(dāng)以特定的方法呈現(xiàn),讓用戶明白這些是靜態(tài)信息?？勺兏畔?yīng)當(dāng)以略微不同的字體、顏色或大小呈現(xiàn),或者以某種用戶可以顯而易見感受到這些是可變更內(nèi)容的方法呈現(xiàn)。這個(gè)方面跟第2點(diǎn)息息相關(guān)，如果用戶意識(shí)到某些數(shù)據(jù)是可變更的，他們就會(huì)尋找更改的方法，開始探索你的對(duì)話框UI結(jié)構(gòu)。

14、對(duì)PC開發(fā)者而言，你需要查看打開對(duì)話框時(shí)內(nèi)容是否真正呈現(xiàn)在屏幕上。

許多情況下，用戶會(huì)改變他們的顯示器設(shè)置，隨后忽然發(fā)現(xiàn)他們已保存的對(duì)話框從屏幕上消失。你需要查看是否出現(xiàn)這種情況。我不止一次碰到這種問(wèn)題。

15、最 后這點(diǎn)可能也是最 具爭(zhēng)議性的規(guī)則:你設(shè)計(jì)的目標(biāo)是為了滿足數(shù)據(jù)變更流動(dòng),還是為了滿足數(shù)據(jù)聚集?

簡(jiǎn)單介紹下背景知識(shí)，針對(duì)數(shù)據(jù)變更流動(dòng)的設(shè)計(jì)意味著你會(huì)將許多不相似的數(shù)據(jù)聚集在單個(gè)屏幕、對(duì)話框和UI版塊上，按照用戶需要展開的流程來(lái)排序,這樣用戶可以從中選擇他們需要前往的步驟，比如輸入名稱、選擇文字類型、選擇游戲類型、選擇服務(wù)器和進(jìn)入游戲等。這些元素都是不同“類型”的數(shù)據(jù)。多數(shù)游戲會(huì)將它們分離成多個(gè)屏幕，添加許多額外的按鍵和信息，供用戶用來(lái)修改體驗(yàn),但實(shí)際上多數(shù)用戶不會(huì)去使用。另一種是“相似數(shù)據(jù)”分組方法，每個(gè)屏幕都圍繞特定功能設(shè)計(jì),用戶可以從中做出選擇。數(shù)據(jù)流動(dòng)屏幕會(huì)將用戶必須選擇或改變的所有具體功能放在一個(gè)屏幕中，讓他們可以同時(shí)看到要求,做出選擇然后繼續(xù)前進(jìn)。一種重在呈現(xiàn)選項(xiàng),另一種重在簡(jiǎn)化過(guò)程使用戶能夠快速抵達(dá)想到的地方。

對(duì)于這個(gè)問(wèn)題，我的個(gè)人看法是兩種方法都是合理的。我偏向于呈現(xiàn)數(shù)據(jù)流動(dòng)方法作為默認(rèn)方式,因?yàn)槎鄶?shù)人都會(huì)使用這種方法，尤其是首 次使用應(yīng)用程序的用戶。等用戶熟悉應(yīng)用程序后，可以讓他們使用另一種方法，因?yàn)樗麄冃枰斓卣业阶约合胍膬?nèi)容。這一點(diǎn)與第2點(diǎn)緊密聯(lián)系，復(fù)雜性可以存在，但不是必要因素。