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