火星網(wǎng)校
比花瓣還專業(yè)!200多款頂級(jí)游戲的UI和交互設(shè)計(jì)都在這里
發(fā)布時(shí)間：2024-01-18 15:57:01 瀏覽量：165次
很多時(shí)候，做設(shè)計(jì)需要找參考。如果是普通的 UI 界面或者 Banner 之類的，在Dribbble、Pinterest、 花瓣、Behance 這樣的網(wǎng)站上翻看一下，至少能夠梳理出一些思路。如果你需要的是更加規(guī)范的指引，這個(gè)時(shí)候在各種設(shè)計(jì)規(guī)范、官方指南以及各種設(shè)計(jì)系統(tǒng)的 PSD、Sketch、 Figma 文件里面，能夠?qū)ふ业骄唧w的某一類控件的具體設(shè)計(jì)。
可是問題在于，如果你要設(shè)計(jì)的是一個(gè)專業(yè)領(lǐng)域的產(chǎn)品，滿足一些更復(fù)雜的交互，需要應(yīng)對(duì)一系列更麻煩的需求，你能找到的參考又有多少？
其實(shí)，還有一個(gè)很重要的設(shè)計(jì)參考來源：游戲。
不同的游戲，交互差別很大。簡單的交互比如「Flappy Bird」只需要點(diǎn)擊屏幕，甚至不需要考慮點(diǎn)擊的位置就可以完成操作，但是大型即時(shí)戰(zhàn)略類游戲比如 Dota2，涉及到的交互就會(huì)復(fù)雜很多。
游戲集合了很多幾經(jīng)考驗(yàn)的交互方式，承載著巨大的信息量，有著成熟的設(shè)計(jì)，可以說是非常有價(jià)值的學(xué)習(xí)對(duì)象了。
其實(shí)，如果真要有針對(duì)性的去找游戲交互和UI 參考并不難，但是通常會(huì)遭遇到幾種情況：
- 找到游戲后，和游戲界面設(shè)計(jì)無關(guān)的搜索結(jié)果太多
- 官方的APP商店，或者游戲官網(wǎng)，營銷宣傳內(nèi)容過多
- 自己安裝一個(gè)游戲、測試、截圖、分析成本太高
- 同類、同風(fēng)格的游戲信息太分散，整合成本太高
這個(gè)時(shí)候，Interface in Game 這個(gè)網(wǎng)站的價(jià)值的就體現(xiàn)出來了:
Interface in Game
網(wǎng)站鏈接：
https://interfaceingame.com/
游戲產(chǎn)業(yè)龐大，但是這也使得它在設(shè)計(jì)層面上，信息非常的分散。概念設(shè)計(jì)師匯集在 ArtStation，界面設(shè)計(jì)師在 Behance 和 Dribbble 整合作品，而玩家和開發(fā)者則匯聚在各自的社區(qū)。這大概也是促成 Interface in Game 這個(gè)網(wǎng)站誕生的理由之一吧。
這個(gè)網(wǎng)站搜羅了200 多款最頂級(jí)的優(yōu)秀游戲的相關(guān)的 UI 和交互方面的資料。
在首頁上，這些游戲會(huì)按照「題材」、「元素」、「風(fēng)格主題」以及時(shí)間（也就是「最近添加」）來進(jìn)行劃分，以滿足你尋找資料的不同需求。
你可以直接挑選你感興趣的游戲進(jìn)行瀏覽：
不同的界面都根據(jù)它的「元素」和功能進(jìn)行了劃分，可以使用側(cè)邊欄進(jìn)行快速的篩選，比如游戲中的操作和交互，其中不僅有截圖，還有短視頻進(jìn)行動(dòng)態(tài)演示：
比如游戲中所涉及到的菜單，也是被非常全面地被截取出來：
在具體的界面截圖當(dāng)中，你可以看到相關(guān)的標(biāo)簽，其實(shí)這些標(biāo)簽對(duì)應(yīng)的就是游戲界面中的不同的「元素」，點(diǎn)擊它們就能跳轉(zhuǎn)到同類的「元素」的合集界面。另外，通過右下角的功能按鈕來點(diǎn)贊、下載或者返回對(duì)應(yīng)的游戲主頁：
你可以在單個(gè)游戲的頁面中，挑選相應(yīng) UI，也可以通過頂部的 Screenshots 選項(xiàng)，無差別地在所有的游戲截圖和視頻當(dāng)中，挑選你所需要的類別/元素：
比如加載頁面的設(shè)計(jì)：
雖然網(wǎng)站整體上是服務(wù)于游戲行業(yè)的設(shè)計(jì)師，并且它創(chuàng)建的初衷也是面向游戲行業(yè)的，但是它所提供的功能和服務(wù)對(duì)于很多其他領(lǐng)域的設(shè)計(jì)師同樣有著非常高的參考價(jià)值。這些優(yōu)秀的游戲，橫跨多個(gè)不同的題材和風(fēng)格，而所有的這些大作，每一個(gè)都是一個(gè)設(shè)計(jì)寶庫，比如封面的字體，配色，布局和整體的視覺風(fēng)格設(shè)計(jì)就有很多值得學(xué)習(xí)的地方：
Interface in Game 這個(gè)游戲界面設(shè)計(jì)網(wǎng)站，填補(bǔ)了 UI 界面設(shè)計(jì)靈感搜集領(lǐng)域的一個(gè)空白，為網(wǎng)站提供游戲界面截圖的，主要是一幫游戲愛好者和需要游戲設(shè)計(jì)團(tuán)隊(duì)，他們基于自身的需求來搭建這個(gè)網(wǎng)站。
總體上來說，Interface in Game 將游戲界面設(shè)計(jì)的靈感參考服務(wù)，做到了相當(dāng)不錯(cuò)的程度，幫設(shè)計(jì)師節(jié)省了相當(dāng)多的分類和搜集的工作。
目前這個(gè)網(wǎng)站唯一的問題可能就是訪問速度略慢了一點(diǎn)，有梯子的同學(xué)用梯子會(huì)快很多。
熱門課程推薦
熱門資訊
-
探討游戲引擎的文章，介紹了10款游戲引擎及其代表作品，涵蓋了RAGE Engine、Naughty Dog Game Engine、The Dead Engine、Cry Engine、Avalanche Engine、Anvil Engine、IW Engine、Frostbite Engine、Creation引擎、Unreal Engine等引擎。借此分析引出了游戲設(shè)計(jì)領(lǐng)域和數(shù)字藝術(shù)教育的重要性，歡迎點(diǎn)擊咨詢報(bào)名。
-
2. 手機(jī)游戲如何開發(fā)(如何制作傳奇手游，都需要準(zhǔn)備些什么？)
?如何制作傳奇手游，都需要準(zhǔn)備些什么？提到傳奇手游相信大家都不陌生，他是許多80、90后的回憶；從起初的端游到現(xiàn)在的手游，說明時(shí)代在進(jìn)步游戲在更新，更趨于方便化移動(dòng)化。而如果我們想要制作一款傳奇手游的
-
3. B站視頻剪輯軟件「必剪」：免費(fèi)、炫酷特效，小白必備工具
B站視頻剪輯軟件「必剪」，完全免費(fèi)、一鍵制作炫酷特效，適合新手小白?？靵碓囋?！
-
4. Steam值得入手的武俠游戲盤點(diǎn)，各具特色的快意江湖
游戲中玩家將面臨武俠人生的掙扎抉擇,戰(zhàn)或降?殺或放?每個(gè)抉定都將觸發(fā)更多愛恨糾葛的精彩奇遇?！短烀嬗肪哂卸嗑€劇情多結(jié)局,不限主線發(fā)展,高自由...
-
5. Bigtime加密游戲經(jīng)濟(jì)體系揭秘，不同玩家角色的經(jīng)濟(jì)活動(dòng)
Bigtime加密游戲經(jīng)濟(jì)模型分析，探討游戲經(jīng)濟(jì)特點(diǎn)，幫助玩家更全面了解這款GameFi產(chǎn)品。
-
6. 3D動(dòng)漫建模全過程，不是一般人能學(xué)的會(huì)的，會(huì)的多不是人?
步驟01:面部,頸部,身體在一起這次我不準(zhǔn)備設(shè)計(jì)圖片,我從雕刻進(jìn)入。這一次,它將是一種純粹關(guān)注建模而非整體繪畫的形式。像往常一樣,我從Sphere創(chuàng)建它...
-
7. 3D動(dòng)畫軟件你知道幾個(gè)?3ds Max、Blender、Maya、Houdini大比拼
當(dāng)提到3D動(dòng)畫軟件或動(dòng)畫工具時(shí),指的是數(shù)字內(nèi)容創(chuàng)建工具。它是用于造型、建模以及繪制3D美術(shù)動(dòng)畫的軟件程序。但是,在3D動(dòng)畫軟件中還包含了其他類型的...
-
8. 3D打印技巧揭秘！Cura設(shè)置讓你的模型更堅(jiān)固
想讓你的3D打印模型更堅(jiān)固？不妨嘗試一下Cura參數(shù)設(shè)置和設(shè)計(jì)技巧，讓你輕松掌握！
-
?三昧動(dòng)漫對(duì)于著名ARPG游戲《巫師》系列，最近CD Projekt 的高層回應(yīng)并不會(huì)推出《巫師4》。因?yàn)椤段讕煛废盗性诓邉澋臅r(shí)候一直定位在“三部曲”的故事框架，所以在游戲的出品上不可能出現(xiàn)《巫師4》
-
10. 如何自己開發(fā)一款游戲(游戲開發(fā)入門必看：五大獨(dú)立游戲開發(fā)技巧)
?游戲開發(fā)入門必看：五大獨(dú)立游戲開發(fā)技巧無論您是剛剛起步開發(fā)自己的第一款游戲，還是已經(jīng)制作了幾款游戲，本篇文章中的5大獨(dú)立游戲開發(fā)技巧都可以幫助您更好地設(shè)計(jì)下一款游戲。無論你對(duì)游戲有著什么樣的概念，都
最新文章
