文檔篇3-如何拼UI（中）

來自專欄遊戲策劃入門常識

從周四開始一致奪命連環咳，喉嚨一直痛得不要不要的。基本不能說話的節奏了。

補上周末的文檔內容。這周末最後關於UI的文章，會有手把手事例去教你們去拼UI了。

2.3-信息內容

2.3.1-圖標

界面信息的組成大部分依靠的是圖標，它可以是一個載體的顯示（如頭像），也可以是功能按鈕，或者兩者結合。

特有的圖形、顏色的不同組合，給玩家傳遞不同信息。

市面上圖標的運用基本標準化了，各位只需要看一下了解為什麼。

形狀

常用的圖標框有正方形、圓形、六邊形。

正方形利用率最高，常用於道具圖標。廣泛出現的內容需要制定一個標準化的展示，正方形易於排版，展示內容豐富。

圓形更圓滑，看起來佔比小，感官比較好。可以想像一下，如果一個遊戲，它的所有圖標都是矩形，那這個界面得有多醜。可是在製作起來，一般是按照方形製作，顯示圓形範圍，所以這個最占空間。一般用於技能按鈕、頭像等，比較常用又稍微重要的按鈕。

六邊形一般用於科幻遊戲，它的排版會比正方形多一些排列形（六個方向），不會太單調。

或許有些圖標根本不需要指定圖標框，如主界面的功能圖標按鈕。而這些就需要策劃根據不同系統，不同功能去進行設計。

大小

在不同系統運用同一圖標時，會根據它的重要性不同，區分不同的大小。而這個大小策劃沒辦法自己定，而是通過和美術商量後設計出界面的概念圖而制定。

一般這些概念圖，都會出幾個大系統去參考。

為什麼要這樣呢？

因為需要統一，無論是程序還是美術都有一個統一的標準。圖標放大或者壓縮都會失真，為了表現好，一般會出2-3個不同尺寸的圖標。

這需要在表現和資源大小上做出一定的取捨。

數量

當你確認以上內容後，需要將信息內容進行整合，然後拼湊成你需要的系統界面。從而決定界面展示的內容和整體數量。

例子：MOBA商城

舉例子商城系統，是因為它包含了以上所有的內容，同時系統界面相對簡單且容易理解。

要求：

1. 商城為了更多容納內容，一般會做成全屏，所以系統的整體尺寸為全屏。
2. 商城分道具和時裝，時裝需要騰出空間展示模型的時裝效果，但為了簡單舉例，我只說道具商城。
3. 指定系統格式，根據不同分頁，指定對應分頁的內容。

分析：

• 1號區域是固定表頭，每個界面都需要顯示這些內容。所以這裡發揮不多。它在這裡加了一個排序的功能。
• 2號區域是分頁區域，這個區域肯定是經過溝通的，將需要分頁的系統都固定在左側。大小一般為固定，除非一些特殊系統顯示的文字信息特別多。
• 一般分頁區都會用文字顯示，因為方便理解。但是注意文字需要盡量簡潔，能讓玩家看一眼就知道是什麼。
• 3號區域則為商城顯示區域，每個分頁內，都可以設計獨立的界面顯示，這裡用了最簡單的一個分頁。
• 商城基礎內容就是購買，需要讓玩家知道購買內容，而MOBA中英雄最重要，同時數量不多，因此圖標用了較大的長方形。因為它不是道具，而是人物/時裝類的商品，需要更大範圍展示它的美觀的外形。
• 商品名稱，固定內容沒什麼好說的。
• 商品價格，這是玩家最關心的信息。
• 為了凸顯價格的優勢，它用了顯示了兩類價格：原價、打折價。原價用了更小更灰的顏色，因為它不重要，只是起了對比和提示作用。
• 打折價才是真正的價格，包含貨幣類型和數量。
• 購買按鈕，其實可以不需要的，但是弄了也可以方便小白理解。
• 3號區域中，寬是固定的，所以它能擺放一行的數量很容易得知。一般五個就是上限了，太多的話，玩家需要看的一行內容會過多。
• 第二行中，只顯示了一半的信息。現在很多都採用這種顯示一半的方式。首先暗示還有翻頁，其次界面看起來不會太死板。

有了詳細的例子，不知道大家是否對UI界面的規劃有了更深層的認識了呢？

3.3.2-背景

最後說的背景，是指在簡單，但是重要的系統中，你需要進行一些突出的表現。如強化鍛造升星之類的系統，系統簡單粗暴，但是又是收費點。

那麼策劃就需要思考一些包裝，配合這個包裝，你在界面上增加一些美觀的背景。如背後來個法陣什麼之類的，成功後法陣就發亮給你個特效。增強付費反饋體驗。

這個不屬於必要選項，但是精品遊戲都需要考慮系統界面的美觀性。

四、信息狀態

了解拼湊UI的基本尺寸和排版內容後，我們需要進一步標註各種信息狀態。列舉這些狀態，一是為了能讓美術出資源，二是為了讓程序更直觀知道系統不同信息狀態的表現。

4.1-信息容量

界面的信息不可能無休止的長，大部分的長度需要策划去制定，如貨幣上限、名稱上限。再次拿上面商城的例子，那麼它的UI模板是應該怎麼樣？

• 在顯示名字的位置，寫上顯示的內容。內容的多寡，就是中文顯示的上限。（譬如，MMORPG中玩家的名字我一般會寫：玩家名字七個字）
• 出售的貨幣，我預估它實際上是預估5-6位左右，直接根據位數的多寡按順序填寫即可。

4.2-信息位置

信息排列的規則，如居上下左右中等。這些不需要策劃列出來，只需要美術做示意圖，在最後驗收的時候留意一下就行。

4.3-狀態類型

• 可點擊：該按鈕可以點擊，屬於高亮狀態。
• 不可點擊：不滿足點擊條件時，按鈕可以變灰或者隱藏。
• 倒計時：顯示倒計時的時間
• 過期：過期的表現
• 裝備/使用中：道具或者其他內容在使用狀態中
• 不可選擇：不滿足選擇條件，如不能出售的道具，不能裝備的道具。
• 空狀態：系統沒有任何信息時的表現，如沒有好友，沒有聊天信息等。
• 有信息狀態：對應空狀態，但有信息狀態時的表現。

四、後面的嘮叨

很多新人會糾結用什麼工具，我只能說，我習慣用visio。並不是說它特別好用，而是習慣，和相對來說功能比較全。

你畫界面最重要的原因是給美術，程序的一個示意圖，那麼你出的圖就是和美術一樣，是一張張的，點擊後的變化，你可以用箭頭給列出來。

很多新人拼出來的界面會很醜，後面我會說說怎麼拼會好看一點。

如果覺得拼得丑，那麼多看看大廠的UI，他們的設計肯定經過多版的推敲，一般不會錯得太離譜，只需要根據自己項目稍微調整。

有人diss你的UI時，你起碼可以說：雖然我知道我能力不行，但是我這個UI是抄xx公司xx遊戲的。他們肯定是經過嚴密思考的。

哈哈，這樣的情況不少見，但是策劃還是需要反思一下，別人說你ui有問題，不一定是排版的問題，也有可能是信息給太多，或者不夠？

再舉個例子：手游的小地圖加了xy坐標的輸入去尋路，但是這個必要嗎？

我肯定認為不必要的，因為設計者沒有列出自己當前xy坐標的位置，去其他地方也是點擊對象按鈕。

好了吐槽完畢。