頁游項目設(shè)計指南分享

時間：2023-10-01 05:48:02 | 來源：網(wǎng)站運營

時間：2023-10-01 05:48:02 來源：網(wǎng)站運營

頁游項目設(shè)計指南分享：

該指南來自之前一款頁游項目，代號WG006，現(xiàn)已正式運營近2年。
本文寫于該項目的立項之初，所用圖片來自于該項目的示意圖或更早已上線項目的示意圖、截圖。
當時由于看了iOS和Material Design的Guideline，心血來潮，便嘗試了終結(jié)整理了一番，
發(fā)布之前刪減了一些涉及「內(nèi)部秘密」的圖片，并調(diào)整了一些格式。
如果您恰巧看到本文，歡迎指出其中的不足之處。

1 概述

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

2 示意圖輸出

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

3 界面入口

• 目前游戲中的界面入口主要有以下幾種：
  • 通過主UI功能圖標
  • 通過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ū)域
     當這個系統(tǒng)涉及到貨幣、資源消耗時，需要顯示
  2. 中上方的界面標題
     若非特殊情況，都需要顯示標題
  3. 右上角的關(guān)閉按鈕
     貼合操作習慣，全屏界面的右上角都需要有關(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ī)則、默認值、篩選過濾等

4.2.1 信息分組

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

4.2.2 排序規(guī)則

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

4.2.3 默認值

• 在顯示各種信息時，需要考慮默認值。
  • 默認的選擇

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

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

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

4.2.4 篩選過濾

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

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

4.3 狀態(tài)差異

• 一個界面通常有各種不同的狀態(tài)，需要列出各種狀態(tài)的示意圖
  • 如果狀態(tài)變化比較少、比較簡單，可以通過簡單的文字敘述。
• 主要的狀態(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ù)的效果圖通常習慣按最終狀態(tài)（或滿狀態(tài)）來設(shè)計，可能會導致第一眼狀態(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)卡、未學習的技能等
  • 一個流程各個階段的狀態(tài)，例如
    • 裝備打造：未選裝備、選中裝備、打造中、打造完成后。
  • 一個系統(tǒng)內(nèi)不同時間階段的不同狀態(tài)
    • 華山論劍：比賽開始前、準備時間、戰(zhàn)斗中、一輪結(jié)束下一輪開始前、整屆比賽打完等。

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

5 操作/事件

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

5.1 主動操作

5.1.1 鼠標操作

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

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列出寶石屬性， 盡量避免全靠策劃手工填寫在說明字段里，低效且易出錯

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ù)器標識
      不讓跳過戰(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 復選框&單選框&下拉菜單

• 可以同時選擇多個選項時，毫無疑問是使用多選框
• 當選項只有兩項，且是兩個相反的值時，也使用一個復選框

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

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

8.2 按鈕&超鏈接

超鏈接和按鈕能的功能幾乎是相等的——點擊執(zhí)行操作。區(qū)別只是在于表現(xiàn)形式上。

• 示意圖中應(yīng)考慮何時使用按鈕、何時使用超鏈接。而不能都用按鈕、完全讓美術(shù)去決定。
• 通常情況下，按鈕代表是更核心的主要功能；而超鏈接則相對次要一些。

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

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

9 界面文案與字體

9.1 文案

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

9.2 字體

9.2.1 Size&Family

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

9.2.2 Color

• 示意圖中的文字一般不用彩色。但在表達以下含義時，需使用對應(yīng)的顏色
  • 說明文字：綠色
    
  • 錯誤提示文字：紅色
    
  • 超鏈接文字：藍色
    
  • 隨品質(zhì)變化的文字：紫色
    

10 其他通用設(shè)計標準

10.1 搜索框

• 搜索框中需要有默認文字，默認文字使用不同的顏色（灰色）
• 默認文字根據(jù)不同的搜索框有所不同
• 當搜索框獲取鼠標焦點后，清除默認文字，等待用戶輸入文字。
  • 若用戶沒有輸入任何文字時失去焦點，則文本框中恢復默認文字
  • 若用戶輸入文字后再失去焦點，則文本框中依然顯示用戶輸入的文字

10.2 可排序表格

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

    1. 默認： 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 日期&時間

• 默認的日期顯示格式，統(tǒng)一為YYYY-MM-DD
• 用四位數(shù)表示年、兩位數(shù)表示月和兩位數(shù)表示日的。日期部分以連字符 (-) 分隔。
• 默認的時間顯示格式，統(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ù)剩余時間顯示不同的精度

時間段顯示格式1顯示格式2小于1分鐘剩余N秒剩余0分M秒小于1小時剩余N分鐘剩余N分M秒小于1天剩余N小時剩余N小時M分大于1天剩余N天剩余N天M小時

10.5 消耗顯示

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

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

11.1 動畫需求

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

11.2 圖標

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

11.3 其他美術(shù)需求

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

12 最后

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