新手策劃文件教程：遊戲UI如何拼？

這份比較長，分上中下三部分（主要是存稿有限，每次更新2000-2500字左右）。會詳細說說拼介面需要考慮的點，最後並示範一次。

一、給你個理由

如果你覺得策劃的工作就是寫好文件就可以了，那麼你面對的就是一堆山寨的介面，介面操作用起來完全不趁手。順便推一波鍋，“某某遊戲也是這樣的！”

如果舉的遊戲是賺錢的，就可以理直氣壯的說，這個系統這個玩法這個介面是經過驗證的！我參考（抄）的是流水xx千萬的產品。

如果例子不賺錢了？呵呵，不賺錢不叫好的產品會成為你的例子嗎？

身為有職業道德的遊戲策劃，那麼low的理由能用嗎？

當然可以！

只是你會被鄙視而已。Who care？只要遊戲賺錢就好了！！！

可惜，我從業多年都沒有碰到賺錢的遊戲，所以我只能增強策劃能力，保住飯碗。

主流的系統策劃，除了寫文件，還需要懂得如何出UI需求，因為你是最瞭解系統的人！作為剛入行的人或許會有一下的疑問。

我們只是策劃，為什麼還要拼UI？

UI、UE不是美術要做的事情？關策劃什麼事？

拼UI就算了，為什麼還要拼得好看？

第一條：

對玩家來說，自己與系統（玩法）之間的互動，主要是通過介面作為媒介的。而策劃，需要對系統內容進行梳理，選擇，排列輕重，展示在介面上。

另外，你不把UI拼出來，難道還要美術把你文件一個個字看完，然後和你BB幾個小時自己進行設計嗎？你能保證他畫的就是你要的？呵呵，只要字一多，美術妹子就會頭暈。

第二條：

理由上面也說了，你出了的是一個版面的結構，你需要知道這個介面能不能擺下你要的東西，這些東西重要的怎麼突出，資訊什麼狀態等，都需要策劃列舉出來。能用圖片表現的，千萬不要用文字！

即使我們做的大部分系統都是根據原型去參考（抄）的，再結合自己的想法去進行修改或者優化。把能控制的東西都掌握在自己的手裡，為遊戲的成功增添小小的概率。

第三條：

最後記得，你就是底線。網際網路行業中，年輕人佔大多數（像我這樣的老餅，真是越來越少了），保不齊你遇到個菜鳥做你的系統，照著你UI拼完後還懟你一句：你需求就是這樣啊，百分百還原。

所以，你拼的介面就是最醜的底線。不要讓底線一低再低。

（醜的UI我就不放介面了，免得有人發現這需求是自己畫的，畢竟圈子那麼小）

二、規劃好比例

2.1-整體佔比

每個專案初始，都會定遊戲基礎解析度是多少。如果沒有，那麼也要和美術訂一個UI的比例。

得到最大螢幕大小後，可以制定每個系統的介面大小（全屏介面可以跳過此步驟）。

但是流程不一定是現有介面，後有內容。因為你會發現有些介面的內容很多，如果你都要擺上去的話，預先設計系統的大小就不適合，因為你的內容最重要。

圖片中，同樣一個遊戲，系統都是才有右半屏介面，但是兩個佔比不同。上圖是主要系統用的比例，由此可以看出它的比例是經過制定的，所以才會有大量系統去統一。

下圖的揹包介面中，道具一行已經五個了（基本到了上限，再多就太密集了），這個就是由內容決定系統佔比大小。


同樣的系統中，因為需求不同，開啟方式和整體佔比也會不同。例如下圖這款遊戲，它幾乎統一了所有功能系統的介面佔比。在設計時，你就需要儘量在這範圍內塞內容。


看到這裡，同樣遊戲不同系統，不同遊戲同樣系統，都有了一定了例子，不知道大家對整體佔比瞭解沒有？

沒有了解也沒關係，可以隨便拍腦袋定一個，定完後你繼續往下設計，覺得內容塞不下又可以改整體佔比的，就回頭把這個給改了。

2.2-個體佔比

個體佔比是什麼？先舉一個簡單的例子。

簡單舉幾個簡單的例子，讓大家先有個概念。

2.2.1-文字


第一張圖的文字大小基本一致，一行容納十個中文字元。

第二張圖示題比描述文字稍大，標題約一行十二個字，描述一行約十三個字。

第三章標題一行九個字，描述一行約十二個字。

為什麼我會用任務引導做例子？因為他們的個體元素最簡單，基本是文字。在差不多整體佔比中，它個體元素佔比尤為突出。

策劃需要對於這些文字數量進行一定的規劃，雖然一開始規劃不一定準確，但需要給美術一個方向，最後再對此進行調整。

容納文字的多寡直接代表遊戲需要表達的資訊量，當你是一個擁有一個複雜的遊戲背景時，需要更多文字去描述，避免頻繁的換行只能選擇小字號。

除了文字，個體元素還有什麼？

2.2.2-角色模型

角色模型顧名思義展示角色，一般全身，有些可以進行旋轉或者互動。

這個最容易定，定一個大概的範圍作為角色展示的大小。常見用於隊伍、角色介面、或者moba選英雄，這些都需要突出角色的形象。角色作用佔比越大，那麼佔據介面的比例越大。


同樣是三個不同遊戲對比，MOBA比較注重角色模型的表現，除了模型佔比大之外，此範圍內模型的尺寸也較大。

最左的RPG類遊戲中，模型佔比就稍弱了點。因為遊戲型別決定RPG更關注的劇情和內容，而MOBA則是英雄本身。前者是通用，後者是特色。

2.2.3-按鈕

什麼是按鈕，最基礎肯定是點選出現各種反饋。根據反饋型別不同分為：分頁/功能/確認取消/關閉等。

怎麼指定按鈕的尺寸，讓整體介面錯落有致，功能凸顯？

使用頻率

常用代表技能系統。

市面上基本遊戲都有技能系統，而玩家在使用技能時，它們所有的按鈕都是一樣大小的？

又到了舉例子時間，最明顯的就是MOBA類技能。


根據技能的背景，我們可以分為兩類：英雄技能、召喚師技能。而英雄技能分為：普攻和技能。

這三種技能，有三種大小。為什麼要分大小？而不是一樣的？

如果這三個是同一級別，或者策劃沒有需求，美術或許都會化成一樣。但是仔細一想，技能間最大的差別就是使用頻率。

英雄技能因為常用，是主要戰鬥方式，可以先制定它的大小作為標準。

普攻使用最頻繁，沒CD，而且又是唯一，所以可以更大一點（但是又因為不重要，顏色會偏淡）。

召喚師技能一般CD長，使用頻率低，需要比標準大小更小一點。

重要性

系統的內容肯定會區分主次，因為有些內容你肯定需要突出，有些不重要。那麼你就需要根據主次去安排佈局。

讓玩家開啟這個介面時，就清楚知道我需要關注的是什麼，是哪個位置。

位置選擇

主要針對按鈕的位置，因為按鈕的位置大概都是固定的，所以預留了他們的位置，剩餘才是你可以隨意擺的位置。

縱觀所有介面（手遊），一般按鈕都是在介面的底部，左右側等等。

因為這些位置，玩家橫著拿手機的時候，是最容易點選的位置。

當然也有原因是第一批做手遊的人這樣設計了，大家也都習慣了認同了，形成了預設的規則。如果你另外創新說更容易點選，或許更多人也不會習慣。

2.3-資訊內容

2.3.1-圖示

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

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

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

形狀

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

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

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

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

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

大小

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

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

為什麼要這樣呢？

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

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

數量

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

例子：MOBA商城

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

要求：

商城為了更多容納內容，一般會做成全屏，所以系統的整體尺寸為全屏。

商城分道具和時裝，時裝需要騰出空間展示模型的時裝效果，但為了簡單舉例，我只說道具商城。

指定系統格式，根據不同分頁，指定對應分頁的內容。


分析：

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座標的位置，去其他地方也是點選物件按鈕。

好了吐槽完畢。

大家出UI需求是怎麼樣的呢？

方法一：

用其他遊戲的截圖，然後只是將你要改的地方塞進去。弄到很醜去給美術，其他全憑美術發揮。

方法二：

自己畫。但自己畫往往畫得很醜。

方法一很好，很多小廠為了節省時間都這樣做的，只要你們UI可以接受，是沒所謂的。問題是，如果你這個系統要改，可以又沒有參考的話，你怎麼辦？

上篇文章有寫了拼UI的一些要點，如果按照著去拼，還是醜的話，那這篇就等於實踐篇，給一些引數你，告訴你怎麼去拼。

但是為了方便，我用了網易《楚留香》的一個列表式的介面去做例項。

首先，注意顏色和比例。如果介面風格沒有確定，可以用黑白灰這些顏色，看著比較高階，如果確定了，那麼顏色可以參考介面顏色去調整。


以上圖片，我使用蘋果6s進行截圖出來的比例。

如果我們100%抄的話，先畫出一個框。

家裡沒有visio，用了excel畫，忽然發現它有吸取顏色，很方便就進行了調色。

畫出必要框架


第一步：畫底圖

就是底層黑色，它幾乎全黑，為了凸顯介面內容，也代表整個的螢幕的比例。如果介面非全屏的畫，一定要畫，否則UI會不知道你裡面的介面需要佔多大。

第二步：介面底圖

決定介面的大小，顏色用了漸變。漸變是用了excel中吸取顏色的功能。資料如何下。


隨後加了個輪廓描邊，因為背景和介面都是深色，在同樣深色的介面上拉不開差別。

不過一般介面不用做到那麼細，可以簡單一點。

第三步：右側分頁按鈕

從圖中，UI可以得知，該介面可以容納五個分頁，分頁需要有有選中和非選中狀態，必須要畫出來哦。

千萬不要覺得，這些都是常規的，做遊戲的UI肯定要懂之類。

字型用了微軟雅黑，文字會粗一點，看起來清晰。

第四步：標題欄

和畫底圖步驟一樣的，不細說

關閉按鈕，你看得出我畫得很隨便，就是一個橢圓+描邊

深化具體內容


第一步：畫出內容框架

這步驟是讓你估算一下各個內容的佔比。


分頁的話，我沒有寫詳細內容，因為我們一般是配置裡面文字。楚留香應該是固定，或者配置圖片之類，所以才有圖示+文字的組合。

如果你需要，這些可以另外出單張內容的。

左側部分是商品選項，會有選中和未選中頁面。楚留香用了滿格的顯示，但是你也可以改成下方露出半個頭。前者會看起來整潔，後者會讓玩家覺得後面還有東西可以拉。

右側是選中後詳細資訊。

它和左側的寬度都可以隨意調整的。但是一般來說，都是選項部分框多一點，讓玩家方便查詢商品。右側基本後期的資訊可以忽略，作用不大。

第二步：列表內容

這裡你也可以先畫，得出單個元件大小，再去拼總的佔比。

顯示道具的只需要符合比例的正方形，一般遊戲，道具圖示都會帶有圖示+稀有度資訊，所以畫圖示是需要注意將稀有度相關的顯示也畫上。

同時還有必備的道具名字和貨幣

第三步：選中效果

將第二步的內容塞進第四步的框架中，我就沒有一個個擺了，因為內容都是一致的。下圖只是擺了一個例子。

右側選中的內容，如圖顯示即可。

譬如道具描述的位置，它是可以劃拉的，所以超出顯示範圍的話，需要露出一半的文字，因為這樣子，一般人看到一半的文字就知道可以上下滑動啦

“今日購買”的顯示是根據商品性質決定的，顯示的內容應該是程式顯示的。

另外的是，購買按鈕有兩個狀態，錢夠和錢不夠，應該額外還要做個錢不夠的情況。



成果展示

最後看看對比圖。

如果大家都畫成這樣，基本就出師了。無論美術，程式，一看就知道要的是什麼。

而且抄的話，拼起來很快的。因為不熟悉excel，大概不到兩個小時吧UI和文字一起寫好了。

各位加油哦，好好學習怎麼畫UI。


逆向思維

上面說的是，如果你有參考物件是怎麼做的，現在就說說如果沒有，你應該怎麼思考去畫介面。

整理介面重要資訊

商城系統重要的肯定是商品，商品價格，商品資訊。其次是購買的選擇，還有分類。

商城只是一個統稱，也有叫商店，其實我覺得分別不大。但是都需要根據功能不同，玩法不同進行分類。

選擇表現

要購買商品就需要有商品的列表，列表組成一般是道具圖示、價格。

排除上面的方法，我們可以有大概幾種排列。

小圖示+貨幣：這類圖示占比比較低，所以排列需要較大的間距，否則會很密集。同時圖示具有強烈辨識度，否則看圖示不知道賣啥。


大圖示+貨幣：參考QQ飛車。道具類似卡片，用大圖示展示，適合道具比較少使用。


購買方式

當確定主要的表現後，你就要思考購買方式。

一般有兩種，上面說的是一種，直接在當前介面顯示，另一種就是彈窗。其實都可以，但是大廠一般用前一種，可以直接抄就好了。

好了，教你如何畫UI到這裡暫時結束了，下週正式開始說寫文件啦！


作者：果子leelee
專欄地址：https://zhuanlan.zhihu.com/c_184640594