從《沙丘》UI概念設(shè)計(jì)看游戲界面經(jīng)驗(yàn)

前幾天在 Behance 上刷到一個(gè)《DUNE｜Personal Work》的 UI 概念項(xiàng)目，整體完成度很高。作為設(shè)計(jì)師，我覺得這類作品不僅是視覺享受，也能總結(jié)出一些值得借鑒的經(jīng)驗(yàn)點(diǎn)。這里就結(jié)合其中的陣營選擇界面和整體展示，整理一些觀察和思考。

1. 版式與結(jié)構(gòu)：焦點(diǎn)與對(duì)稱

這類「陣營選擇」場(chǎng)景，本質(zhì)上是一個(gè)決策界面。作者采用了很經(jīng)典的結(jié)構(gòu)：

• 中央突出：當(dāng)前選中的陣營（走私者）放在正中間，卡片更大、更亮，帶有金色光暈。

• 對(duì)稱排布：左右陣營呈對(duì)稱分布，層級(jí)自然清晰，符合玩家的瀏覽動(dòng)線。

• 信息分區(qū)：上半部分是角色立繪和陣營徽記，下半部分是機(jī)制說明和操作提示。模塊分明，不容易迷失。

經(jīng)驗(yàn)點(diǎn)：在決策型界面中，居中放大+光效高亮，是非常直接有效的焦點(diǎn)策略。

2. 視覺語言：氛圍與辨識(shí)

《沙丘》的世界觀強(qiáng)調(diào)沙漠、貴族與荒涼感，UI 也延續(xù)了這一氛圍：

• 材質(zhì)：背景有金屬與沙塵質(zhì)感，帶來厚重感。

• 色彩：每個(gè)陣營配有主色（綠色、棕色、藍(lán)色、金色、紅色），既強(qiáng)化辨識(shí)，又有“品牌”味道。

• 徽記：幾何化的陣營符號(hào)，簡潔且容易記憶。

經(jīng)驗(yàn)點(diǎn)：大型世界觀游戲的 UI，最好在顏色、圖形符號(hào)和氛圍感上形成自洽體系。

3. 信息呈現(xiàn)：符號(hào)化與層次感

在陣營說明區(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)情。

4. 交互與引導(dǎo)：清晰的操作提示

底部的操作提示很細(xì)致：

• A 選擇 / B 詳情 / X 故事，分別對(duì)應(yīng)不同層級(jí)的操作需求。

• 玩家既可以直接做決定，也可以深入劇情，滿足不同類型的用戶。

經(jīng)驗(yàn)點(diǎn)：關(guān)鍵節(jié)點(diǎn)上提供“淺 → 深”不同層級(jí)的操作選項(xiàng)，能兼顧快進(jìn)型玩家和沉浸型玩家。

5. 作品展示方式：完整體驗(yàn)

Behance 項(xiàng)目整體除了界面，還展示了：

• 不同場(chǎng)景的 UI（例如主菜單、HUD、資源界面）。

• 色彩與符號(hào)系統(tǒng)，確保整體一致性。

• 工具說明（Photoshop / Midjourney / 后期合成），透明展示流程。

經(jīng)驗(yàn)點(diǎn)：在作品集展示中，不僅要秀界面，還要展示系統(tǒng)性思考和設(shè)計(jì)過程。

總結(jié)

這份《DUNE》個(gè)人 UI 概念作品給我的幾點(diǎn)啟發(fā)：

1. 決策型界面要突出焦點(diǎn)，用對(duì)稱和光效增強(qiáng)層級(jí)。

2. 色彩與符號(hào)體系是陣營/角色類 UI 的關(guān)鍵資產(chǎn)。

3. 信息既要數(shù)值化，又要敘事化，提升代入感。

4. 操作引導(dǎo)要考慮不同層級(jí)的玩家。

5. 作品集展示不僅是炫圖，還要有系統(tǒng)設(shè)計(jì)思路。

如果你正在做游戲 UI 或作品集，這些經(jīng)驗(yàn)都值得借鑒。

蘭亭妙微(m.lzhte.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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è)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

Renforce
*品牌身份
*創(chuàng)意方向
*數(shù)字設(shè)計(jì)
Renforce 是一個(gè)面向復(fù)雜技術(shù)生態(tài)系統(tǒng)組織的運(yùn)營技術(shù)平臺(tái)，旨在簡化對(duì)定性與定量信息的端到端管理。借助先進(jìn)的人機(jī)協(xié)同技術(shù)，Renforce 為日常運(yùn)營提供穩(wěn)健、高效且簡潔的解決方案。

為了體現(xiàn) Renforce 在效率與準(zhǔn)確性上的價(jià)值主張，設(shè)計(jì)概念取材于“正方形”這一形狀。
正方形是人類最常用的幾何形狀之一，令人著迷的是，如此簡單的形態(tài)卻能支撐從復(fù)雜技術(shù)到大型建筑的各種應(yīng)用。它象征著精準(zhǔn)、高效與簡潔。以正方形為核心元素，品牌標(biāo)識(shí)與設(shè)計(jì)系統(tǒng)由此構(gòu)建。

蘭亭妙微(m.lzhte.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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è)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

該網(wǎng)頁聚焦 UI 設(shè)計(jì)中的膠囊和彈窗設(shè)計(jì)，展示了大量各類商業(yè)活動(dòng)的 banner 設(shè)計(jì)案例，涵蓋電商促銷、節(jié)日營銷、會(huì)員福利、課程招生等多個(gè)場(chǎng)景，體現(xiàn)了膠囊按鈕與彈窗在商業(yè)設(shè)計(jì)中的廣泛應(yīng)用，為相關(guān)設(shè)計(jì)提供了豐富的實(shí)踐參考。

該網(wǎng)頁聚焦 UI 設(shè)計(jì)中的膠囊和彈窗設(shè)計(jì)，展示了大量各類商業(yè)活動(dòng)的 banner 設(shè)計(jì)案例，涵蓋電商促銷、節(jié)日營銷、會(huì)員福利、課程招生等多個(gè)場(chǎng)景，體現(xiàn)了膠囊按鈕與彈窗在商業(yè)設(shè)計(jì)中的廣泛應(yīng)用，為相關(guān)設(shè)計(jì)提供了豐富的實(shí)踐參考。

本文主要介紹了字體設(shè)計(jì)中把控 “形與勢(shì)” 的方法及創(chuàng)意形態(tài)的挖掘

在 Logo 設(shè)計(jì)中，將直觀的象征、隱喻與戰(zhàn)略性思考相結(jié)合，能讓 Logo 脫穎而出并引發(fā)共鳴，而直覺作為設(shè)計(jì)的關(guān)鍵過程，可引導(dǎo)設(shè)計(jì)師找到最易懂的方案。象征符號(hào)能跨越語言快速被理解，其視覺簡約性帶來靈活性和永恒性，隱喻則能在不同概念間建立關(guān)聯(lián)，增添設(shè)計(jì)樂趣與記憶點(diǎn)。設(shè)計(jì)時(shí)需在核心采用象征或隱喻、存檔設(shè)計(jì)稿、用黑白色設(shè)計(jì)、確保無限縮放、平衡 Logo 并精確檢查，這些原則不僅適用于 Logo 設(shè)計(jì)，也可延伸到解決個(gè)人問題。

新一輪驚天動(dòng)地的數(shù)字革命已經(jīng)打響， AI 技術(shù)帶來的改變令人矚目，引發(fā)了持續(xù)不斷的驚嘆，同時(shí)，也帶來了一些系列的蝴蝶效益，許多人在思考 AI 是否會(huì)取代我們現(xiàn)有的工作，恐慌開始蔓延。

我曾也有過這樣的擔(dān)憂。如果明天我的老板解雇我，用 AI 取代我怎么辦？直到我深入研究機(jī)器學(xué)習(xí)和 AI 算法相關(guān)領(lǐng)域知識(shí)，洞見了一些可能性。

現(xiàn)在，我能夠理解為什么大多數(shù)人（也包括我在內(nèi)）會(huì)認(rèn)為人類會(huì)被 AI 取代，或許，只是對(duì)未知領(lǐng)域充滿恐懼或好奇罷了，這正是人類的天性，會(huì)這就是我的看法。既然如此，何不去探索一番…

在平面設(shè)計(jì)、用戶體驗(yàn)/用戶界面、前端開發(fā)和項(xiàng)目管理領(lǐng)域，我發(fā)現(xiàn)現(xiàn)階段的 AI 能力還無法復(fù)制人類的創(chuàng)造力和直覺（或許在一個(gè)秘密的實(shí)驗(yàn)室，AI 機(jī)器人已經(jīng)覺醒）。然而，使用 AI 工具確實(shí)能夠助力我們更加高效和有效的交付工作！

在本文中，我將重點(diǎn)介紹可用于平面設(shè)計(jì)和用戶體驗(yàn)/用戶界面設(shè)計(jì)的 AI 工具/插件，以及能夠提升我們的信心和創(chuàng)造力的優(yōu)勢(shì)功能特性。在這之前，深呼吸一下，和我一起探索…

AI 在平面設(shè)計(jì)中的應(yīng)用

最近，我們可能看到許多人在社交媒體上發(fā)布關(guān)于 AI 生成的照片、藝術(shù)作品、3D 模型等內(nèi)容。令人驚嘆的是，他們可以通過文本提示生成圖像、轉(zhuǎn)換圖像，甚至讓 AI 創(chuàng)建特定圖像。

在我看來，AI 生成的照片、藝術(shù)作品和 3D 模型已經(jīng)基本可以更快速、更輕松且更有創(chuàng)意地表達(dá)我們的想象力。

問題是，我們是否可以將 TA 們用于商業(yè)嗎？

如果我們想將這些生成的圖片用于公司或任何行業(yè)，我們必須對(duì)其進(jìn)行修改。原因不難猜測(cè)，由于每一家企業(yè)都有自己的風(fēng)格偏好、營銷背景和品牌形象，現(xiàn)階段 AI 工具還無法準(zhǔn)確生成這些元素（需要我們定向訓(xùn)練 TA ，也需要我們提供設(shè)計(jì)方向）。為了增加企業(yè)那一份獨(dú)特性和個(gè)性化，我們現(xiàn)階段只能依賴 AI 完成 50% 的設(shè)計(jì)工作，而將另外 50% 需要我們的創(chuàng)意輸入和修改。

設(shè)計(jì)任務(wù)的 50% 已經(jīng)可以依靠 AI 生成，剩余 50% 仍然需要設(shè)計(jì)師進(jìn)行傳統(tǒng)化修改。不得不承認(rèn)，AI 已經(jīng)可以分擔(dān)設(shè)計(jì)師們一大半的任務(wù)。因此，那些非設(shè)計(jì)專業(yè)的外行（也包括一部份設(shè)計(jì)師）會(huì)認(rèn)為 50% 的設(shè)計(jì)師應(yīng)該會(huì)被取代，然而，這個(gè)觀點(diǎn)非常膚淺，甚至略顯無知。

請(qǐng)看下面的食品海報(bào)示例：

使用 AI 工具的好處：

• 為設(shè)計(jì)特定元素提供有價(jià)值的見解
• 為情緒板提供創(chuàng)意設(shè)計(jì)靈感
• 通過高效的輸出節(jié)省時(shí)間
• 鼓勵(lì)在設(shè)計(jì)過程中跳出框架思考
• 基于文本提示生成現(xiàn)代、清晰且細(xì)致的設(shè)計(jì)
• 還有更多

值得探索的 AI 工具和插件：

• Adobe Firefly – 可以將文本轉(zhuǎn)換為圖像并生成驚艷的文字效果。
• MidJourney – 可以創(chuàng)建幾乎任何我們能想到的圖像。
• ChatGPT – 可以回答用戶任何想問的問題。（我們可以讓 TA 編寫特定的提示詞來輸入給 Adobe Firefly 或 MidJourney 生成圖像）

AI 在 UX/UI 設(shè)計(jì)中的應(yīng)用

在用戶體驗(yàn)（UX）和用戶界面（UI）設(shè)計(jì)中， TA 與前面提到的平面設(shè)計(jì)有些相似，UX/UI 設(shè)計(jì)師可以使用 AI 工具來設(shè)計(jì)網(wǎng)站和移動(dòng)應(yīng)用的界面。

只需提供一個(gè)文本提示，Uizard 就會(huì)生成用戶界面，之后我們可以根據(jù)需要進(jìn)行修改。

使用 AI 工具的好處：

• 在設(shè)計(jì)網(wǎng)站或移動(dòng)應(yīng)用之前，通過頭腦風(fēng)暴幫助我們生成創(chuàng)意
• 當(dāng)客戶發(fā)送大量反饋文檔時(shí)，可以幫助我們閱讀并為總結(jié)內(nèi)容
• 協(xié)助整理必要的信息，以創(chuàng)建網(wǎng)站或移動(dòng)應(yīng)用的信息架構(gòu)
• 協(xié)助進(jìn)行用戶體驗(yàn)文案創(chuàng)作
• 幫助創(chuàng)建網(wǎng)站或移動(dòng)應(yīng)用的元素，例如圖標(biāo)、按鈕或可用的藝術(shù)設(shè)計(jì)
• 協(xié)助將草圖轉(zhuǎn)換為數(shù)字線框圖
• 還有更多

值得探索的 AI 工具和插件：

• Uizard – 可以在一分鐘內(nèi)將創(chuàng)意轉(zhuǎn)化為設(shè)計(jì)。
• Adobe Illustrator – 將文本轉(zhuǎn)換為矢量圖形。我們需要尋找一些精美的創(chuàng)意矢量圖標(biāo)， TA 也是一個(gè)非常不錯(cuò)的選擇。
• ChatGPT – 可以幫助我們列出優(yōu)秀的創(chuàng)意、整理重要信息、創(chuàng)建站點(diǎn)地圖、設(shè)計(jì)信息架構(gòu)、開發(fā)用戶畫像和用戶故事，甚至為我們的網(wǎng)站或移動(dòng)應(yīng)用撰寫用戶體驗(yàn)故事。
• Gemini – 可以識(shí)別圖像、語音，生成文本，也可以創(chuàng)建圖像。

給 Gemini 一個(gè)清晰的提示，我們可以獲得設(shè)計(jì)所需的圖像和文案。

值得下載的 Figma 的 AI 插件：

在了解所有優(yōu)勢(shì)特性之后，現(xiàn)在是時(shí)候介紹一些 Figma 的插件了，這些插件可以在 2025 年為用戶體驗(yàn)設(shè)計(jì)師帶來諸多好處（包括：節(jié)省大量設(shè)計(jì)時(shí)間）。

1、Random Name Generator ：一個(gè)可以隨意生成名稱的插件。目前大約有 5 萬 9 千名用戶在使用該插件。

2、Rendition AI： 我們可以創(chuàng)建應(yīng)用設(shè)計(jì)并獲取該設(shè)計(jì)的 Tailwind 代碼。目前大約有 3 萬名用戶在使用該插件。

3、MagiCopy – AI 文本生成器-可以幫助我們獲得特定風(fēng)格的標(biāo)簽、圖標(biāo)等內(nèi)容。目前大約有 1 萬 8 千名用戶在使用該插件。

4、Ando-設(shè)計(jì)師 AI 助手-可以幫助我們從提示、形狀和圖像中生成數(shù)百萬個(gè)設(shè)計(jì)創(chuàng)意。目前大約有 7萬1千名用戶在使用該插件。

5、VisualEyes-可以基于歷史數(shù)據(jù)模擬用戶測(cè)試行為，并找出潛在的可用性問題。目前大約有 3 萬用戶在使用該插件。

6、Astrid Text Generator – 可以幫助我們優(yōu)化文案。我們只需點(diǎn)擊幾下即可獲得個(gè)性化的寫作反饋建議。目前大約有 2 萬 6 千名用戶在使用該插件。

7、Magician – 可以將繁瑣且耗時(shí)的任務(wù)自動(dòng)化，讓用戶能夠?qū)⒕性诠ぷ髦懈邉?chuàng)造性的方面。目前大約有 16 萬 3 千名用戶在使用該插件。

結(jié)論

雖然人工智能（AI）是一種強(qiáng)大的工具，但是，根據(jù)我一段時(shí)間的觀察和使用，目前的人工智能還并不能取代設(shè)計(jì)師的創(chuàng)造力。而是，作為一位強(qiáng)有力的戰(zhàn)友，增強(qiáng)了設(shè)計(jì)師的多項(xiàng)能力，并促進(jìn)了設(shè)計(jì)交付的穩(wěn)定性。

不得不承認(rèn)，在設(shè)計(jì)領(lǐng)域，AI 技術(shù)提升設(shè)計(jì)能力尤為突出，能夠輔助設(shè)計(jì)師高效地創(chuàng)造積極的成果。

除設(shè)計(jì)之外，如果我們能夠善加運(yùn)用人工智能，其潛力無可限量，能夠打破職業(yè)的邊界，助力設(shè)計(jì)師擴(kuò)展到多個(gè)行業(yè)領(lǐng)域。我相信，以這種方式利用人工智能，必定將在各種應(yīng)用中帶來顯著的優(yōu)勢(shì)。

加油，設(shè)計(jì)師們！帶著好奇去探索這個(gè)人工智能時(shí)代吧！

蘭亭妙微(m.lzhte.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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è)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan