2024-10-24 藍藍小助手 系統UI設計文章及欣賞
UI設計（或稱界面設計）是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。
放在游戲行業里，就是游戲的人機交互、操作邏輯、界面設計。
我們把這三點鋪開來講：
首先是人機交互
它可能是扭轉戰局的技能釋放：按下技能，釋放技能，獲得團戰勝利。
它可能是某個讓你腎上腺素飆升的抽獎畫面：哇哦，金色傳說！
通過你的操作，計算機給予你的響應，交互充滿在游戲的各個層面。
其次是操作邏輯
它是硬件、軟件的底層邏輯。
它是游戲的底層邏輯：你的游戲用什么引擎開發？它是什么游戲類型？
它是人類的基本操作邏輯：你是左撇子還是視覺障礙人士？
最后是界面美觀
為什么把它放在最后，因為我認為在UI制作流程里，界面美觀一定是放在開發的最末尾！
界面美觀的通常要求，不外乎幾點：層次清晰、風格適配、視覺吸睛。
以上是游戲UI的一些常識，你理解了上述邏輯后，下面我們開始具體的制作流程。
游戲不只是單個環節，而是一套整體的工業流程，因此UI只是游戲中的一環，這里我不列舉一些包含策劃工作，例如：系統功能策劃、世界觀策劃等；美術也會有美術概念設計的內容，整體內容我盡量限制于UI。
首先游戲立項后，作為UI設計師，要根據游戲類型設計原型初稿。
舉個例子，一款開放世界動作游戲，策劃給到功能文檔，美術給定游戲風格圖，那ui就可以開始第一步的關鍵界面框架設計。
關鍵界面是游戲主界面和重要一級跳轉頁（通常為屬性、裝備、背包、地圖、設置）。
首先是主界面：一款動作類型游戲，核心玩法為動作戰斗，需要玩家長時間停留在這個界面進行游玩，因此戰斗界面即為游戲的主界面。
例如游戲的操作系統為手機，因此我們設計符合手機規范的操作邏輯；
例如針對手機不同的尺寸定義不同的以1334x750或2560x1480的的尺寸規范；
例如按照調查顯示大拇指的最佳移動范圍去做框架設計圖，用的左移動、右攻擊的方案定位基礎操作位置，符合人體工程學。
我們按照策劃功能設定條條列出需要的內容快速擺放。
動作控件：移動、技能、攻擊。
人物屬性：頭像、名字、等級、血條、經驗條、buff。
怪物：血條、怒氣條、buff。
地圖：小地圖、人物位置、人物朝向、地圖朝向、地理圖。
任務目標：任務標題、文本、數量，指針。
這些內容需要去定義優先級，分布排開。
然后完成一級跳轉頁的功能模塊，即屬性、裝備、背包、地圖、設置的功能位置。
按照上述內容設計關鍵界面框架，完成游戲基本的功能邏輯。
關鍵界面UX一般是指關鍵界面框架的導向圖、控件的交互反饋圖。
我們的關鍵UX設計會依據五個準則：示能，意符，映射，反饋，概念模型。（交互/設計心理學基礎）
下面我用一張圖讓你快速get到5個準則是什么意思。
圖片來自網絡
示能：是指一個物理對象與人之間的關系。例如做成按鈕就是想讓人明白可以點擊。
意符：是表達提示。例如“go”文字提示你按鈕的功能，我理解他是需要跳轉。
映射：表示多組要素之間的關系。例如畫面中出現的正方形圖標回歸類為可獲得道具。
反饋：你執行了命令，就應該給你反饋。例如你點擊了“go按鈕“這個行為，會有一個按下狀態然后跳轉至活動界面這樣的結果。
概念模型：快速告知產品的模型。例如你已經理解了這個活動的模型：簽到獲取道具！
但在實際制作過程中界面的復雜程度遠比想象的要困難許多，還需要其他設計準則作為補充。
比如我們可以引入《尼爾森十大設計原則》、《交互設計的7大定律》，有興趣可以搜索。
理論知識作為重要的邏輯參考，也是最終從結果反推過程的驗證，越加復雜的系統會通過理論的取舍達到體驗最優解。
根據5個準則，制作出我們的關鍵UX界面圖：
有了清晰的關鍵界面框架和關鍵界面UX圖，下一步我們開始關鍵界面的包裝。
在這里我要做個小提醒。
一般在實際工作中，我們會需要各部門對效果圖。就是拿我們制作的圖和制作人、策劃、程序、美術共同考慮每個部分的優先級、實現功能的可行性、核心玩法的方向性、動效鏡頭配合邏輯、界面美術的包裝方向等等一系列未來會出問題去做預設，這就需要大量的經驗（犯的錯越多越好）。
策劃考慮玩法是否有意思，UI考慮這個玩法體驗的更舒服，拼接考慮資源如何處理、美術考慮怎么包裝更牛逼，程序考慮怎么實現玩法更合理，我們需要共同去解決優先級最高的問題。
說人話就是開會，開會，開會，開不完的會。但是這一步也是必不可少的，為后續工作避坑。
界面風格的尋找有很多種方法，比如從游戲體驗模型、產品定位、受眾群體等方面找靈感。
主要作用是為了去尋找到能夠支撐我們設計方向的理論依據，稍后我會著重講解游戲體驗模型（Game Experience Model）的設計方案。
舉個著重于游戲的主色調方案的例子，主色調方向并非完全根據原畫圖來作為參考，更重要的是考慮游戲模型、游戲定位、受眾群體等去定位游戲的主色調。
例如提到科幻游戲類型，大部分的科幻類的主色調會偏向藍色，這是因為宇宙星空對于視覺效果的映射，主基調會是藍色，而色相范圍會根據受眾群體的不同做出調整：硬核玩家的藍色，受眾是年輕人的藍色偏向感知上會明顯不同，這里會用到色彩心理的知識內容。
回到我們的主界面，我們開始用顏色填充我們的UI層。
假設我通過以上理論依據完成了我的設計方向，那我在原有的交互功能稿上快速出草稿方案，為進一步的細化做鋪墊。
這個過程我會建議大家使用色塊法來制作，用色塊法的原因是這個階段只是需要看整體效果，不會去關注過多的細節，做的越細對設計師來講只會越發限制你的發揮。用大色塊去覆蓋，我們看成套的小圖能更快速的發現界面上的問題。 然后處理好黑白灰的關系和文字的排版，以最快速度出效果為目的。
文字的排版我會用到四個原則：親密性、對齊、重復、對比；
黑白灰關系的原則：素描中主要運用黑白灰來表達物體的質感、量感、層次感；我們通過黑白灰關系確定層次。
以上，基本上完成了我們的關鍵界面假圖。接下來就是細化假圖，讓原來的色塊看起來更加工整舒適，滿足基本可以使用的程度即可。
涉及到如此多的知識內容還能堅持住嗎，接下來更是重量級的內容。
我們完成了一套基礎UI設計，但是莫得靈魂，沒有靈魂的UI即使套用在不同游戲上也不會奇怪。
那么UI的靈魂是什么？或者說游戲美術的靈魂是什么？
是屬于我們這個游戲獨有的世界觀和游戲機制。
這個階段我要把界面去貼合游戲世界觀，UI的風格走向、細節提煉、風格產出都來源于這一步。 這需要很多人共同去思考、腦暴、尋找、構建在這套世界觀下合理的美術表現。
例如《王者榮耀》最開始的UI是沒有調性和方向的，后來他們通過設計世界觀、游戲機制的探索找到了他們的方向，智械飛升新國風（我的定義）
新版和舊版對比
這個方法我需要運用到游戲體驗模型（Game Experience Model）的知識。
游戲體驗模型（Game Experience Model）
游戲體驗的六個要素以及它們之間的關系：
•機制 - 行為：機制包括游戲中可能發生的所有動作和所有游戲對象 - 由游戲規則定義的所有內容。動作是機制在每種情況下的運作方式。
•美學-感官刺激：美學包括旨在喚起玩家情緒的所有感官和認知設計。呈現給玩家的美感稱為感官刺激。
•故事世界-敘事：故事世界為游戲提供了實質性的內容。那些沒有的世界，是因為它們沒有被放入游戲中，只是由游戲設計者想象出來的，或者由于所包含的情況而在邏輯上變得必要或可能。 敘述是游戲過程中發生的故事世界中的故事片段。
故事世界通常是游戲設計師設想的一個無限的宇宙。 敘事是玩家在游戲中體驗的故事世界的片段，他們以情節、文字描述、動作場景、聲音、藝術等形式對這個宇宙的一部分進行了美學再現，并在游戲過程中作為故事世界中的敘述呈現給玩家。
如果能理解故事敘事，那就能推導美學的藝術形式；游戲的機制所表現的玩家行為，能夠起到限制/提高美學的效果；優秀的故事會回饋給設計者如何制作核心體驗設計；以此達到三者能夠互推的良性循環。
我們回過頭來看王者這張圖，游戲機制為moba（多人在線戰術競技游戲），世界觀是智械飛升新國風。
以游戲機制（MOBA）推導出美術形式，體現在游戲的美術設計上，如游戲logo，UI的對立設計，平衡設計。
通過獨屬于他的國風世界觀推導出的藝術表現形式，表達在最重要的皮膚表現，游戲的UI上如紋理、圓角處理和色彩走向、古風表現。
而獨屬于智械飛升的設計，從logo的機關小細節、匹配界面的紋理圖所表達。
不同的游戲對于游戲體驗模型的使用范圍不同，例如《超級馬里奧》，交互與游戲機制結合。
而《刺客信條》的UI與故事結合得更加緊密。
提到紋理細節表達，例如《刺客信條英靈殿》中的UI細節，會遵循故事背景，本作背景設定在維京時代，因此從時代背景推敲出來許多的紋理：包含符合時代的凱爾特紋、維京紋和海盜紋。
這個內容鋪開來講又是一個復雜的內容，有機會可以細聊。推薦去看一些關于紋理設計的書籍。
當然，把游戲體驗模型玩出花，這當然不是一件輕松的工作。
回到我們的頁面，把我們的關鍵界面按照這個方式去貼合游戲獨有的世界觀，做出這樣的方案。
或者是這樣的
我們完成關鍵界面設計以后，再一次通過開會、修改、分析、結果收集等進行合理判斷。在此基礎上確定最終的UI風格。
之后就是建立規范，再去延展設計，最后全方位落地。如何建立規范，完成一套規范，建立控件庫、建立組件庫、建立素材庫、設計手冊（不細說）。
管線思維導圖
在規范下，開始內容延展：不同UI不同分工，劃分不同功能管線，管理者需要把控每一條管線的執行和推進，以此完成我們長線開發的全界面真圖（即一個游戲的所有界面）。
完成UI后，交付給動效、特效、程序，然后恭喜你，完成了游戲設計的UI部分。
通過完成后的游戲成品，作為游戲UI仍要把控后續每一個界面傳達的實際效果，是否達到預期；每一個動效反饋、每一個抽獎動畫、打擊感的震動，排版的舒適性等細節，都需要反復打磨達到讓玩家最為舒服的水準。
畢竟，同一個動作不同的細節表達，最終的玩家的體驗會完全不同。
鏡頭語言也非常重要，電影游戲畫的視覺震撼和共鳴，能結合實際制作中，達到類似的效果。
例如《蜘蛛俠邁爾斯》各種QTE的鏡頭動作呈現，電影感拉滿。
藍藍設計(m.ssll180.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。
關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司、銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發