2025-8-18 杰睿
前幾天在 Behance 上刷到一個(gè)《DUNE｜Personal Work》的 UI 概念項(xiàng)目，整體完成度很高。作為設(shè)計(jì)師，我覺得這類作品不僅是視覺享受，也能總結(jié)出一些值得借鑒的經(jīng)驗(yàn)點(diǎn)。這里就結(jié)合其中的陣營(yíng)選擇界面和整體展示，整理一些觀察和思考。
這類「陣營(yíng)選擇」場(chǎng)景，本質(zhì)上是一個(gè)決策界面。作者采用了很經(jīng)典的結(jié)構(gòu)：
中央突出：當(dāng)前選中的陣營(yíng)（走私者）放在正中間，卡片更大、更亮，帶有金色光暈。
對(duì)稱排布：左右陣營(yíng)呈對(duì)稱分布，層級(jí)自然清晰，符合玩家的瀏覽動(dòng)線。
信息分區(qū)：上半部分是角色立繪和陣營(yíng)徽記，下半部分是機(jī)制說(shuō)明和操作提示。模塊分明，不容易迷失。
經(jīng)驗(yàn)點(diǎn)：在決策型界面中，居中放大+光效高亮，是非常直接有效的焦點(diǎn)策略。
《沙丘》的世界觀強(qiáng)調(diào)沙漠、貴族與荒涼感，UI 也延續(xù)了這一氛圍：
材質(zhì)：背景有金屬與沙塵質(zhì)感，帶來(lái)厚重感。
色彩：每個(gè)陣營(yíng)配有主色（綠色、棕色、藍(lán)色、金色、紅色），既強(qiáng)化辨識(shí)，又有“品牌”味道。
徽記：幾何化的陣營(yíng)符號(hào)，簡(jiǎn)潔且容易記憶。
經(jīng)驗(yàn)點(diǎn)：大型世界觀游戲的 UI，最好在顏色、圖形符號(hào)和氛圍感上形成自洽體系。
在陣營(yíng)說(shuō)明區(qū)，信息拆解得很合理：
優(yōu)缺點(diǎn)：紅色 V 表示劣勢(shì)，綠色 ▲ 表示優(yōu)勢(shì)。非常直觀，不需要額外解釋。
敘事與機(jī)制結(jié)合：不僅給數(shù)值效果，還加了劇情描述（例如與弗瑞曼的沖突），讓選擇更有代入感。
經(jīng)驗(yàn)點(diǎn)：把理性信息（數(shù)值）和感性信息（劇情）結(jié)合，能讓玩家在選擇時(shí)既動(dòng)腦又動(dòng)情。
底部的操作提示很細(xì)致：
A 選擇 / B 詳情 / X 故事，分別對(duì)應(yīng)不同層級(jí)的操作需求。
玩家既可以直接做決定，也可以深入劇情，滿足不同類型的用戶。
經(jīng)驗(yàn)點(diǎn)：關(guān)鍵節(jié)點(diǎn)上提供“淺 → 深”不同層級(jí)的操作選項(xiàng)，能兼顧快進(jìn)型玩家和沉浸型玩家。
Behance 項(xiàng)目整體除了界面，還展示了：
不同場(chǎng)景的 UI（例如主菜單、HUD、資源界面）。
色彩與符號(hào)系統(tǒng)，確保整體一致性。
工具說(shuō)明（Photoshop / Midjourney / 后期合成），透明展示流程。
經(jīng)驗(yàn)點(diǎn)：在作品集展示中，不僅要秀界面，還要展示系統(tǒng)性思考和設(shè)計(jì)過(guò)程。
這份《DUNE》個(gè)人 UI 概念作品給我的幾點(diǎn)啟發(fā)：
決策型界面要突出焦點(diǎn)，用對(duì)稱和光效增強(qiáng)層級(jí)。
色彩與符號(hào)體系是陣營(yíng)/角色類 UI 的關(guān)鍵資產(chǎn)。
信息既要數(shù)值化，又要敘事化，提升代入感。
操作引導(dǎo)要考慮不同層級(jí)的玩家。
作品集展示不僅是炫圖，還要有系統(tǒng)設(shè)計(jì)思路。
如果你正在做游戲 UI 或作品集，這些經(jīng)驗(yàn)都值得借鑒。
蘭亭妙微(www.dzxscac.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.dzxscac.cn