比花瓣還專業(yè)！200多款頂級(jí)游戲的UI和交互設(shè)計(jì)都在這里！

很多時(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ì)參考來(lái)源：游戲。

不同的游戲，交互差別很大。簡(jiǎn)單的交互比如「Flappy Bird」只需要點(diǎn)擊屏幕，甚至不需要考慮點(diǎn)擊的位置就可以完成操作，但是大型即時(shí)戰(zhàn)略類游戲比如 Dota2，涉及到的交互就會(huì)復(fù)雜很多。

游戲集合了很多幾經(jīng)考驗(yàn)的交互方式，承載著巨大的信息量，有著成熟的設(shè)計(jì)，可以說(shuō)是非常有價(jià)值的學(xué)習(xí)對(duì)象了。

其實(shí)，如果真要有針對(duì)性的去找游戲交互和UI 參考并不難，但是通常會(huì)遭遇到幾種情況：

• 找到游戲后，和游戲界面設(shè)計(jì)無(wú)關(guān)的搜索結(jié)果太多
• 官方的APP商店，或者游戲官網(wǎng)，營(yíng)銷宣傳內(nèi)容過多
• 自己安裝一個(gè)游戲、測(cè)試、截圖、分析成本太高
• 同類、同風(fēng)格的游戲信息太分散，整合成本太高

這個(gè)時(shí)候，Interface in Game 這個(gè)網(wǎng)站的價(jià)值的就體現(xiàn)出來(lái)了:

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 和交互方面的資料。

在首頁(yè)上，這些游戲會(huì)按照「題材」、「元素」、「風(fēng)格主題」以及時(shí)間（也就是「最近添加」）來(lái)進(jìn)行劃分，以滿足你尋找資料的不同需求。

你可以直接挑選你感興趣的游戲進(jìn)行瀏覽：

不同的界面都根據(jù)它的「元素」和功能進(jìn)行了劃分，可以使用側(cè)邊欄進(jìn)行快速的篩選，比如游戲中的操作和交互，其中不僅有截圖，還有短視頻進(jìn)行動(dòng)態(tài)演示：

比如游戲中所涉及到的菜單，也是被非常全面地被截取出來(lái)：

在具體的界面截圖當(dāng)中，你可以看到相關(guān)的標(biāo)簽，其實(shí)這些標(biāo)簽對(duì)應(yīng)的就是游戲界面中的不同的「元素」，點(diǎn)擊它們就能跳轉(zhuǎn)到同類的「元素」的合集界面。另外，通過右下角的功能按鈕來(lái)點(diǎn)贊、下載或者返回對(duì)應(yīng)的游戲主頁(yè)：

你可以在單個(gè)游戲的頁(yè)面中，挑選相應(yīng) UI，也可以通過頂部的 Screenshots 選項(xiàng)，無(wú)差別地在所有的游戲截圖和視頻當(dāng)中，挑選你所需要的類別/元素：

比如加載頁(yè)面的設(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ì)寶庫(kù)，比如封面的字體，配色，布局和整體的視覺風(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ì)，他們基于自身的需求來(lái)搭建這個(gè)網(wǎng)站。

總體上來(lái)說(shuō)，Interface in Game 將游戲界面設(shè)計(jì)的靈感參考服務(wù)，做到了相當(dāng)不錯(cuò)的程度，幫設(shè)計(jì)師節(jié)省了相當(dāng)多的分類和搜集的工作。

目前這個(gè)網(wǎng)站唯一的問題可能就是訪問速讀略慢了一點(diǎn)，有梯子的同學(xué)用梯子會(huì)快很多。

這些酷站也值得收藏：