指南來自之前一款頁游項目疾渣，代號WG006拗馒，現(xiàn)已正式運營近2年汛骂。
本文寫于該項目的立項之初罕模，所用圖片來自于該項目的示意圖或更早已上線項目的示意圖、截圖帘瞭。
當(dāng)時由于看了iOS和Material Design的Guideline淑掌，心血來潮，便嘗試了終結(jié)整理了一番蝶念，
發(fā)布之前刪減了一些涉及「內(nèi)部秘密」的圖片抛腕，并調(diào)整格式以適應(yīng)markdown。
如果您恰巧看到本文媒殉，歡迎指出其中的不足之處担敌。

1 概述

• 示意圖的閱讀者為美術(shù)人員，因而需要著重表達的是信息顯示
• 顯示什么信息廷蓉？
• 如何組織排列全封？
• 每條信息以何種方式呈現(xiàn)？
• 再配合一些適當(dāng)?shù)囊?guī)則講解桃犬，方便美術(shù)人員更準(zhǔn)確理解示意圖所要傳達的信息

2 示意圖輸出

• 一個系統(tǒng)所涉及的所有界面都需要提供示意圖
• 即使一個系統(tǒng)的幾個界面很相似售貌，也要盡量單獨列出示意圖，只做文字說明容易遺漏細節(jié)
• 同一個界面的多種狀態(tài)疫萤，導(dǎo)出在同一張示意圖中以方便對比
• 若界面尺寸過大颂跨、放在同一張示意圖中不便于瀏覽時，可以分多張圖導(dǎo)出
• 彈窗Alert類小窗口扯饶，與打開該彈窗的界面存在同一張示意圖中
• 對于流程較復(fù)雜或界面較多的系統(tǒng)恒削，需要給出界面流池颈，表面各個界面之間的相互關(guān)系，以爬塔系統(tǒng)為例：

爬塔系統(tǒng)界面流

3 界面入口

• 目前游戲中的界面入口主要有以下幾種：
• 通過主UI功能圖標(biāo)
• 通過NPC/傳送門等場景元素
• 通過某個界面內(nèi)的按鈕钓丰、鏈接
• 使用物品等
• 不同的入口躯砰，有時也會對界面樣式有一定的影響。反過來携丁，一個界面的樣式有時也會對其入口有一定的限制琢歇。例如：
• 通過NPC打開的界面適合采用NPC對話框的形式
• 全屏界面中的按鈕不適合再打開另一個全屏界面（除非按鈕表達的是場景切換）
• 界面入口無法在示意圖中體現(xiàn)，但它在設(shè)計界面時應(yīng)該明確梦鉴，并在文檔中寫明
• 除了主入口之外李茫，還需列出是否可以通過關(guān)聯(lián)系統(tǒng)打開、是否需要在其他界面額外增加入口等

比如稱號肥橙、時裝系統(tǒng)魄宏，除了主UI的入口按鈕之外，還有人物界面上的入口按鈕

4 界面尺寸與布局

4.1 尺寸

4.1.1 全屏界面

• 固定為1440*750
• 還需考慮到小屏幕用戶的尺寸（最小支持到1024*768）以及其他UI元素（如主UI）占用的空間
• 因此畫面的主要部分存筏，應(yīng)在大約1000*650的范圍之內(nèi)
• 全屏界面還有一些基本的通用元素宠互，這些通用元素會對界面的顯示區(qū)域有一定的布局影響，在示意圖中需要把這部分添加進去椭坚。這些通用元素有：

全屏界面的通用元素

1. 左上角的貨幣顯示區(qū)域
   當(dāng)這個系統(tǒng)涉及到貨幣予跌、資源消耗時，需要顯示
2. 中上方的界面標(biāo)題
   若非特殊情況善茎，都需要顯示標(biāo)題
3. 右上角的關(guān)閉按鈕
   貼合操作習(xí)慣匕得，全屏界面的右上角都需要有關(guān)閉按鈕
4. 左下角的聊天框
   只要這個界面不是非常短暫的過度性、一次性界面巾表，就應(yīng)該顯示
5. 右下角的的功能按鈕
   此處顯示的按鈕數(shù)量根據(jù)該界面主要會用到的系統(tǒng)而定。通常有【人物】略吨、【背包】集币、【技能】，以及固定需要顯示的【返回】

4.1.2 二級界面

• 一般的二級界面尺寸翠忠，需要控制在900*550的范圍之內(nèi)
• 如果這個節(jié)目需要經(jīng)常與其它二級界面一同打開鞠苟，需要考慮兩個界面的總寬度

例如背包界面與人物界面、郵件列表與郵件內(nèi)容

4.2 布局－信息列表

• 收件箱里的郵件秽之、背包界面的物品当娱、人物界面的俠客切頁，等等考榨，所有的信息組合跨细，都可以看做是一個信息列表。
• 這種列表都需要考慮分組方式河质、排序規(guī)則冀惭、默認(rèn)值震叙、篩選過濾等

4.2.1 信息分組

• 哪些信息可歸為一類，歸類的依據(jù)是什么散休，相關(guān)聯(lián)的的部分在位置上盡量靠近媒楼。
• 組與組之間的主次關(guān)系如何，更重要的信息組應(yīng)該更醒目

4.2.2 排序規(guī)則

• 優(yōu)先按什么排序戚丸、再按什么排序划址，一般至少列2-3個排序條件，最后再用唯一的主鍵ID來排限府，不能讓程序按照收到消息的先后順序來隨意排序夺颤。

4.2.3 默認(rèn)值

• 在顯示各種信息時，需要考慮默認(rèn)值谣殊。
• 默認(rèn)的選擇

比如關(guān)卡界面：最初顯示第一個切頁拂共，之后顯示上次關(guān)閉時所在的切頁，開啟新區(qū)域時將默認(rèn)切頁設(shè)為新切頁姻几，再次打開界面后宜狐，再記錄關(guān)閉界面所在的切頁。

• 每個元素的默認(rèn)狀態(tài)

特別是頭像蛇捌、模型等數(shù)據(jù)資源抚恒，在未加載到數(shù)據(jù)時，如何顯示络拌。例如在物品圖標(biāo)未加載時俭驮，在圖標(biāo)框內(nèi)顯示一個固定的菊花轉(zhuǎn)loading動畫

4.2.4 篩選過濾

• 當(dāng)信息列表中有較多項目時，需要考慮是否需要篩選或者過濾春贸，篩選過濾規(guī)則是什么

比如背包里按物品類型混萝、俠客譜按照俠客品質(zhì)

4.3 狀態(tài)差異

• 一個界面通常有各種不同的狀態(tài)，需要列出各種狀態(tài)的示意圖
• 如果狀態(tài)變化比較少萍恕、比較簡單逸嘀，可以通過簡單的文字?jǐn)⑹觥?/li>
• 主要的狀態(tài)差異有：不同的操作狀態(tài)、不同階段的狀態(tài)允粤、不同玩家時期的狀態(tài)崭倘、不同玩家視角的狀態(tài)

4.3.1 不同操作狀態(tài)

• 主要是在拖拽中狀態(tài)下，需要仔細考慮關(guān)聯(lián)元素的狀態(tài)

4.3.2 不同玩家時期的狀態(tài)

• 主要是指隨著玩家等級类垫、VIP等級之類的成長狀態(tài)的變化司光，界面有哪些不同的狀態(tài)
• 在考慮玩家時期的狀態(tài)時，第一眼狀態(tài)的界面表現(xiàn)更重要悉患，而美術(shù)的效果圖通常習(xí)慣按最終狀態(tài)（或滿狀態(tài)）來設(shè)計残家，可能會導(dǎo)致第一眼狀態(tài)很不美觀，在審核美術(shù)效果圖時售躁，需要額外注意這點

4.3.3 不同玩家視角的狀態(tài)

• 玩家視角跪削，與玩家時期不同谴仙，視角是可以轉(zhuǎn)換的，而時期是不可逆的碾盐，例如
• 公會會長與普通會員
• 跨服競技的參賽選手與觀眾
• 幫派戰(zhàn)時的己方信息和敵方信息

4.3.4 不同階段的狀態(tài)

• 由系統(tǒng)自身規(guī)則所呈現(xiàn)的不同階段晃跺，也是最重要但卻容易忽略的狀態(tài)示意
• 各種滿級狀態(tài)
• 有各種限制條件時的狀態(tài)
  • 未解鎖的關(guān)卡、未學(xué)習(xí)的技能等
• 一個流程各個階段的狀態(tài)毫玖，例如
  • 裝備打造：未選裝備掀虎、選中裝備、打造中付枫、打造完成后烹玉。
• 一個系統(tǒng)內(nèi)不同時間階段的不同狀態(tài)
  • 華山論劍：比賽開始前、準(zhǔn)備時間阐滩、戰(zhàn)斗中二打、一輪結(jié)束下一輪開始前、整屆比賽打完等掂榔。

華山論劍系統(tǒng)的狀態(tài)继效，結(jié)合了不同的視角.png

5 操作/事件

• 考慮每一個界面元素、控件装获，是否有主動操作或觸發(fā)事件瑞信。
• 玩家主動通過鼠標(biāo)與鍵盤發(fā)起是主動操作，
• 程序上滿足特定條件時自動觸發(fā)的是觸發(fā)事件穴豫。

5.1 主動操作

5.1.1 鼠標(biāo)操作

• 懸停
• 懸停時凡简，可點擊元素都需要有hover態(tài)
• 需要更詳細說明的元素（頭像等圖標(biāo)、不完整的文字等）精肃，顯示出hint提示
• 單擊
• 注意時鼠標(biāo)松開時才觸發(fā)秤涩，對新手客戶端程序員，文檔里可以額外提醒一下：“release時觸發(fā)司抱、而非down”
• 雙擊
• 有雙擊操作時筐眷，要特別注意對該元件單擊事件的屏蔽，通常是給單擊事件加延時（0.1s）觸發(fā)状植。
• 拖拽
• 注意設(shè)定拖拽觸發(fā)的最小距離（約8px），以免在單擊時不小心觸發(fā)
• 注意考慮落點判斷規(guī)則怨喘，是以為鼠標(biāo)指針進入目標(biāo)區(qū)域津畸、還是拖拽元素整個或部分進入目標(biāo)區(qū)域
• 長按
• 購買商品調(diào)整數(shù)量時，通過長按操作使數(shù)字快速變化
• 除了上述這種在游戲毕籽、軟件中已經(jīng)習(xí)以為常的操作方式灌侣，盡量避免使用長按
• 滾輪
• 一般不用特別說明罐监，可以滾動的地方程序還是知道的

5.1.2 鍵盤操作

• 主要為ESC（關(guān)閉界面、取消操作）暖途、Enter
• ↓←↑→方向鍵移動
• 其他一些快捷鍵

5.2 觸發(fā)事件

• 觸發(fā)事件的結(jié)果反饋卑惜，在設(shè)計時往往容易忽略，需要特別注意
• 被動/自動觸發(fā)的一些事件
• 在倒計時結(jié)束時
• Calendar（控制各種系統(tǒng)開啟驻售、關(guān)閉露久、持續(xù)時間的一個總控系統(tǒng)）觸發(fā)時
• 其他一些自動行為完成時

6 Hint

• 列出界面中所有需要Hint的地方，包括一個Hint的不同狀態(tài)
• 如果與現(xiàn)有的Hint格式差異比較大欺栗，需要讓美術(shù)也提供新的效果圖
• 特別注意在新加物品類型時毫痕，要考慮對應(yīng)的物品Hint是否要重新設(shè)計。
• 例如圖紙類物品Hint需列出圖紙的材料迟几，寶石類物品Hint列出寶石屬性消请， 盡量避免全靠策劃手工填寫在說明字段里，低效且易出錯

寶石類物品Hint

7 關(guān)聯(lián)界面改動

• 需要考慮一個系統(tǒng)是否會影響到其他系統(tǒng)的界面类腮，常見的有：
• 戰(zhàn)斗相關(guān)界面
  • 設(shè)計戰(zhàn)斗的系統(tǒng)臊泰，都需要考慮戰(zhàn)斗界面是否需要改動，例如

世界BOSS系統(tǒng)需要增加額外的BOSS血條模式
多批次戰(zhàn)斗需要增加批次顯示

• 尤其是一些在戰(zhàn)斗規(guī)則本身可能沒有特殊變化的系統(tǒng)蚜枢，但涉及戰(zhàn)斗的系統(tǒng)缸逃，也要考慮一下整個戰(zhàn)斗的過程，例如

切磋系統(tǒng)的戰(zhàn)斗結(jié)算框需要考慮平局的情況
華山論劍系統(tǒng)需要考慮觀戰(zhàn)界面以及觀戰(zhàn)時結(jié)算框
擂臺系統(tǒng)的連勝buff祟偷，需要在戰(zhàn)斗界面里顯示
跨服系統(tǒng)需要在玩家名后加上服務(wù)器標(biāo)識
不讓跳過戰(zhàn)斗的系統(tǒng)察滑，跳過按鈕要灰顯或是隱藏

• 角色界面
  • 新增的主將/俠客養(yǎng)成系統(tǒng)，需要考慮是不是要在角色界面增加入口
  • 如果增加了入口按鈕修肠，還要考慮自己角色界面和查看他人界面的規(guī)則差異
• 其他養(yǎng)成界面
  • 在新增渠道系統(tǒng)時贺辰，需考慮下是否需要在該渠道關(guān)聯(lián)的養(yǎng)成系統(tǒng)中增加關(guān)聯(lián)的渠道入口
  • 備戰(zhàn)/實力比較
    • 新增養(yǎng)成系統(tǒng)時，都要對應(yīng)的增加
• CDbar
  • 一般為每日有多次嵌施、且有CD限制的渠道類系統(tǒng)饲化，都需要考慮一下
• 飛入提示
  • 每個系統(tǒng)多考慮一下，有沒有什么重要的提示吗伤。

8 控件使用

8.1 復(fù)選框&單選框&下拉菜單

復(fù)選框&單選框&下拉菜單

• 可以同時選擇多個選項時吃靠，毫無疑問是使用多選框
• 當(dāng)選項只有兩項，且是兩個相反的值時足淆，也使用一個復(fù)選框

例如 使用/不使用巢块、開啟/關(guān)閉，這種兩個相反的選項時巧号，使用一個復(fù)選框

• 使用銀兩/使用元寶族奢，這種并非相反的值時，則應(yīng)使用2個單選框選項
• 同時只能選一個選項時丹鸿，使用單選框
• 下拉菜單通常作為單選框的一種變種
  • 如果選項數(shù)目不固定越走、選項數(shù)目比較多，或者界面空間有限時，用下拉菜單代替單選框

8.2 按鈕&超鏈接

按鈕&超鏈接

• 超鏈接和按鈕能的功能幾乎是相等的——點擊執(zhí)行操作廊敌。區(qū)別只是在于表現(xiàn)形式上铜跑。
• 示意圖中應(yīng)考慮何時使用按鈕、何時使用超鏈接骡澈。而不能都用按鈕锅纺、完全讓美術(shù)去決定。
• 通常情況下秧廉，按鈕代表是更核心的主要功能伞广；而超鏈接則相對次要一些。

8.3 可編輯的文本框&普通文本

可編輯的文本&框普通文本

• 大多數(shù)情況下疼电，用到的都是普通文本
• 只有在那些需要輸入嚼锄、可編輯地方，才會使用到可編輯的文本框
• 在示意圖中蔽豺，不能為了表現(xiàn)文字有背景区丑、或是其他目的，隨意地使用可編輯的文本框控件來代替普通的文本修陡。

9 界面文案與字體

9.1 文案

• 精簡：盡可能簡短沧侥，去掉多余的、修飾性的文字
• 準(zhǔn)確：描述清楚魄鸦，避免錯別字
• 情感：用玩家的語言宴杀、不要用程序員的語言
• 統(tǒng)一：除了名詞統(tǒng)一，還要各種符號拾因、大小寫旺罢、半角全角等
• 設(shè)計：利用好文字，它也是界面設(shè)計的一部分
• 如果界面很空绢记，可以考慮用一些說明性文字作為填充
• 某些情況下字?jǐn)?shù)統(tǒng)一可以使得界面更整齊（中文漢字更能發(fā)揮這點）

僅修改文案字?jǐn)?shù)的改變

9.2 字體

9.2.1 Size&Family

• 程序支持的無鋸齒字體為：宋體12扁达、宋體14、宋體16蠢熄、黑體18
• 不便于用藝術(shù)字的地方跪解，都應(yīng)采用上述幾種字體

9.2.2 Color

• 示意圖中的文字一般不用彩色。但在表達以下含義時签孔，需使用對應(yīng)的顏色
• 說明文字：綠色

• 錯誤提示文字：紅色

• 超鏈接文字：藍色

• 隨品質(zhì)變化的文字：紫色

10 其他通用設(shè)計標(biāo)準(zhǔn)

10.1 搜索框

• 搜索框中需要有默認(rèn)文字叉讥，默認(rèn)文字使用不同的顏色（灰色）
• 默認(rèn)文字根據(jù)不同的搜索框有所不同
• 當(dāng)搜索框獲取鼠標(biāo)焦點后，清除默認(rèn)文字饥追，等待用戶輸入文字图仓。
• 若用戶沒有輸入任何文字時失去焦點，則文本框中恢復(fù)默認(rèn)文字

• 若用戶輸入文字后再失去焦點判耕，則文本框中依然顯示用戶輸入的文字

10.2 可排序表格

• 對于可以排序的表格列透绩，
• 列標(biāo)題需可點擊翘骂，且有3態(tài)效果壁熄。
• 根據(jù)當(dāng)前排序狀態(tài)顯示正序或逆序的圖標(biāo)
• 若有多列可排序帚豪，則排序時需考慮所有列的排序規(guī)則，最后點擊的列在排序中擁有更高的優(yōu)先級草丧。例如

市場界面商品列表.png

1. 默認(rèn)： order by 總價 ASC,...sortid
2. 此時先點品質(zhì)：order by 品質(zhì) DESC, 總價 ASC,...sortid
3. 再點 單價：order by 單價 ASC, 品質(zhì) DESC, 總價 ASC,...sortid
4. 再點 總價：order by 總價 DESC, 單價 ASC, 品質(zhì) DESC,...sortid

10.3 日期&時間

• 默認(rèn)的日期顯示格式狸臣，統(tǒng)一為YYYY-MM-DD
• 用四位數(shù)表示年、兩位數(shù)表示月和兩位數(shù)表示日的昌执。日期部分以連字符 (-) 分隔烛亦。
• 默認(rèn)的時間顯示格式，統(tǒng)一為HH:MI:SS
• 用兩位數(shù)表示小時懂拾、兩位數(shù)表示分鐘和兩位數(shù)表示秒煤禽。時間部分以冒號 (:) 分隔。

√應(yīng)該用 2013-08-01 12:45:01
×而不是 2013-8-1 12:45:1

10.4 倒計時

10.4.1 完整顯示

• 完整顯示“時”岖赋、“分”檬果、“秒”的倒計時格，統(tǒng)一為H:MI:SS
• 可根據(jù)實際的設(shè)定情況唐断，確定倒計時中是否需要“時”选脊、“分”

10.4.2 分階段顯示

• 若倒計時受到界面限制，可根據(jù)剩余時間顯示不同的精度

10.5 消耗顯示

消耗顯示

• 盡可能將操作消耗直接列在按鈕旁脸甘，已列出消耗數(shù)目的操作恳啥，一律不要消費確認(rèn)提示。
• 消耗貨幣時丹诀，顯示格式為：貨幣名稱×貨幣數(shù)量
• 滿足是用白色钝的，不滿足用紅色
• 點擊貨幣鏈接，打開貨幣來源界面
• 消耗物品時忿墅，顯示格式為：物品名稱×消耗物品數(shù)量（剩余物品數(shù)量）
• 物品名稱為品質(zhì)色
• 括號內(nèi)的剩余數(shù)量扁藕，滿足用白色，不滿足用紅色
• 點擊物品名稱鏈接疚脐，打開物品來源界面

11 相關(guān)美術(shù)需求

11.1 動畫需求

• 主要指操作反饋動畫亿柑、界面之間的切換過渡動畫。
• 如果在設(shè)計示意圖的同時棍弄，就已經(jīng)想清楚了相關(guān)動畫望薄，需要提前跟UI先說明、并且在UI制作過程中注意檢驗呼畸。以免由于UI布局的變動導(dǎo)致原先的動畫模式不適用痕支，
• 如果一個界面的動畫非常依賴實際的UI表現(xiàn)，可在UI設(shè)計之前先大致列出哪些地方需要有動畫來強調(diào)或是過渡蛮原，讓UI設(shè)計時可以一同考慮卧须。

11.2 圖標(biāo)

• 界面中涉及的圖標(biāo)，如果在交付程序開發(fā)時，UI來不及完成全部圖標(biāo)花嘶，需要督促UI先提供一個臨時的版本以供程序制作
• 臨時版本的主要目的是確定圖標(biāo)的尺寸笋籽、以及制作方式
• 比如是否需要程序疊加顏色、裁切等

11.3 其他美術(shù)需求

• 原畫椭员、場景车海、3D模型等
• 由于這類美術(shù)資源制作周期較長，務(wù)必盡早提出

12 最后

指南更多只是一種參考思路隘击，只要有你的理由就可以打破常規(guī)

更多我在「游戲/交互設(shè)計」副本中的撿到的戰(zhàn)利品

• 頁游項目設(shè)計指南分享
• 游戲策劃的軟件與工具
• 實例分析——界面設(shè)計的思考過程
• 界面中的動效與特效
• 不同類型的系統(tǒng)侍芝，不同的界面設(shè)計側(cè)重點
• 如何在與撕嗶之戰(zhàn)中戰(zhàn)勝程序、美術(shù)及老板埋同。