Web設(shè)計(jì)師能從游戲中學(xué)到些什么
游戲越來(lái)越Web化，而Web也越來(lái)越游戲化。如果你想證明這一點(diǎn)，只需要去看看雅虎問(wèn)答。有人問(wèn)，有人答，最終獲勝答案還能拿到獎(jiǎng)勵(lì)分(譯者注：沒玩過(guò)雅虎問(wèn)答的想想百度知道)。這是一個(gè)排名系統(tǒng)，可以積聚和解鎖系統(tǒng)中越來(lái)越多的功能。它的工作原理是因?yàn)樾睦淼某删秃陀螒驒C(jī)制，從而鼓勵(lì)互動(dòng)。問(wèn)題來(lái) 了，Web設(shè)計(jì)師們能從游戲中學(xué)到什么?或者更確切的說(shuō)，是從視頻游戲中?
一個(gè)好的游戲界面必須高度可用，并且直觀，能夠用盡可能少的動(dòng)作完成很多重復(fù)的動(dòng)作。它們需要具有吸引力，并且夠可愛。一個(gè)好的游戲界面會(huì)給用戶體驗(yàn)加分的。在游戲中，人們接受內(nèi)容的同時(shí)不希望幻想被打破，所以再偉大的游戲產(chǎn)品都可能敗于一個(gè)不給力的界面。
即使在像《波斯王子》這樣的老游戲里，只有有限的系統(tǒng)功能，也要求設(shè)計(jì)師們必須做出一些創(chuàng)新。在功能越發(fā)豐富的今天，我們不難從現(xiàn)代視頻游戲中發(fā)掘中更先進(jìn)的設(shè)計(jì)技術(shù)。
網(wǎng)站的用戶以同樣的方式，希望其內(nèi)容交付的方式，是很容易理解，直觀，引人入勝，而且不需要過(guò)多滾動(dòng)或點(diǎn)擊。事實(shí)上，Web設(shè)計(jì)師可以從視頻游戲界面中學(xué)到 很多。使用了通用游戲界面思想的網(wǎng)站，可以簡(jiǎn)化用戶操作，同時(shí)為站點(diǎn)注入更多個(gè)性化。這樣能帶來(lái)更高的流量和回訪率，甚至銷售額(說(shuō)白了，就是錢嘛!)
這并不奇怪，我們已經(jīng)看到，像carousels，lightboxes，accordions和日益復(fù)雜的導(dǎo)航，已經(jīng)通過(guò)CSS和JavaScript庫(kù)大量涌入了瀏覽器中。無(wú)論是好事還是壞事，那都是另一篇文章要討論的，本文將專注于技術(shù)，而不是那些錯(cuò)誤的應(yīng)用。
Web設(shè)計(jì)師可以從視頻游戲中學(xué)到的東西不僅限于用戶界面。雅虎問(wèn)答的工作原理在于內(nèi)置的心理學(xué)成就系統(tǒng)。所以，當(dāng)我們看一些基本的用戶界面思路和模式時(shí)，其他更高層次的概念也是有益的，同時(shí)也值得去探討。
從大局出發(fā)
考慮到游戲界面，Web設(shè)計(jì)師需要敏銳地意識(shí)到項(xiàng)目自身的背景和客戶的目標(biāo)。顯然，一個(gè)網(wǎng)站往往，但并不總是，有一個(gè)目標(biāo)，這是非常不同于視頻游戲的地方。 在大多網(wǎng)站中，對(duì)效率的要求要高于娛樂(lè)性。一個(gè)很酷的魚眼界面，如果放在提供稅務(wù)信息或電子商務(wù)的網(wǎng)站上，可不是個(gè)切合實(shí)際的想法。然而，一個(gè)互動(dòng)型的社 會(huì)媒體，可能會(huì)因一種領(lǐng)先的技術(shù)或某種類型的成就系統(tǒng)而從中受益。選擇合適的UI組件，事半功倍。
縱觀大局，還要考慮結(jié)構(gòu)和方法 – 不只是UI組件。比如，看看菜單是怎么個(gè)結(jié)構(gòu)，考慮下為什么要這么做(譯者注：作為設(shè)計(jì)師，每當(dāng)使用一個(gè)產(chǎn)品的時(shí)候，都應(yīng)該考慮一下背后的設(shè)計(jì)思想)。在 很多游戲里，一些功能設(shè)置都放在星狀拓?fù)浣Y(jié)構(gòu)的菜單里。如果你選擇“武器”，接下來(lái)打開的菜單將展示出所有武器。要選擇“地圖”得通過(guò)導(dǎo)航回到第一屏。這種結(jié)構(gòu)簡(jiǎn)化了設(shè)置選項(xiàng)，否則很快就會(huì)被其他選項(xiàng)分散掉注意力而忘記真正要做什么。
你能明白這種結(jié)構(gòu)形式的網(wǎng)站是如何向訪問(wèn)者展示提供大量信息的嗎?通過(guò)使訪問(wèn)者一次只專注于一個(gè)大型在線任務(wù)或一個(gè)信息塊，可能會(huì)增加用戶的轉(zhuǎn)換率。這種結(jié)構(gòu)也可以有效地被使用在網(wǎng)站上的銷售漏斗。下面的例子就展示了一個(gè)簡(jiǎn)單的游戲菜單結(jié)構(gòu)，通過(guò)它可以很容易地應(yīng)用到一個(gè)網(wǎng)站的信息體系結(jié)構(gòu)，建立起訪問(wèn)者路徑。(如下圖)
如果你正在搭建一個(gè)會(huì)計(jì)師事務(wù)所的網(wǎng)站，你可能會(huì)根據(jù)訪問(wèn)者類型的相關(guān)性來(lái) 劃分標(biāo)題下的菜單信息。一個(gè)有錢的個(gè)體與一個(gè)小企業(yè)的需求不盡相同，但都可能有意聘請(qǐng)同一公司。你可以自上而下的開展，用兩個(gè)切入點(diǎn)作為漏斗，一個(gè)為個(gè)體 和家庭，另一個(gè)為企業(yè)和組織，每個(gè)按鈕用來(lái)為他的用戶分流。這個(gè)分流頁(yè)面可以提供內(nèi)容和相關(guān)工具，并為不同的用戶提供相關(guān)服務(wù)，從而簡(jiǎn)化他們的操作，提升體驗(yàn)。(如下圖)
此外，視頻游戲中的提示是用看的而不是用說(shuō)，試著去了解一下它們是怎么工作的。成功的游戲里都有一個(gè)為“小白”提供訓(xùn)練和學(xué)習(xí)的地方。一個(gè)角色一上來(lái)都要通 過(guò)完成一些任務(wù)，達(dá)到一定等級(jí)，從而熟悉操作也了解游戲的故事情節(jié)。探險(xiǎn)家學(xué)會(huì)拿起劍擺動(dòng)，然后殺死一只老鼠，然后學(xué)會(huì)撿寶貝。用戶希望通過(guò)界面體驗(yàn)到身臨其境的感覺。
在《上古卷軸IV》中：Oblivion，你開始在監(jiān)獄里，必須通過(guò)一個(gè)地下洞穴逃脫，沿途會(huì)跟大老鼠和偶爾出現(xiàn)的小妖精戰(zhàn)斗，通過(guò)這種方式來(lái)學(xué)習(xí)游戲的基本控制。
它們?yōu)槭裁从嘘P(guān)聯(lián)?你可能不必為一個(gè)復(fù)雜的界面提供完整的交互教學(xué)，但可以通過(guò)智能圖形或圖表，讓用戶更迅速地了解內(nèi)容。你可以拋出一個(gè)大概念，然后拆分成小塊。用小提示和實(shí)例要比長(zhǎng)篇大論好的多。通過(guò)研究游戲中是怎么用看替代說(shuō)的，就可以在一些棘手的問(wèn)題上獲得突破了。
戰(zhàn)斗場(chǎng)面未必要華麗
游戲設(shè)計(jì)奇才Jesse Schell說(shuō)，“游戲，為滿足你的好奇心提供了成功的可能性和機(jī)會(huì)——一個(gè)解決問(wèn)題的機(jī)會(huì)，做正確的選擇，并讓人感到自由。” 即使是最平凡的網(wǎng)站也能問(wèn)出最吸引人的問(wèn)題——游戲的哪些要素能給人們帶去歡樂(lè)?
游戲通常在用戶輸入時(shí)給出清晰的反饋。這些元素可以融入界面，不僅僅是通過(guò)carousels或accordions的形式。問(wèn)個(gè)簡(jiǎn)單的問(wèn)題“你希望學(xué)到更多關(guān)于此話題的東西嗎?” 確定提交表單之后會(huì)發(fā)現(xiàn)，提升用戶交互體驗(yàn)還有很長(zhǎng)的路要走哇。
一些Web設(shè)計(jì)師們已經(jīng)實(shí)現(xiàn)了UI組件的簡(jiǎn)單化。如今，懸停菜單和提示層已經(jīng)不是什么新鮮玩意了。這些在游戲中已經(jīng)成型的套路，如何能為普通UI元素帶來(lái)更多的創(chuàng)意和樂(lè)趣，讓我們拭目以待吧。
#p#
來(lái)點(diǎn)實(shí)例
讓我們進(jìn)入正題，來(lái)看看如何在下個(gè)項(xiàng)目中使用這些UI元素。接下來(lái)會(huì)展示一些實(shí)例，還有一些資源便于之后的擴(kuò)展學(xué)習(xí)。
異步加載的信息
這是《輻射》里的加載截圖：上面的《輻射：新維加斯》和下面的《輻射3》都有幫助信息和提示，并隨主題背景圖一起在游戲中展開。相比老套生硬的加載圖像，它使用輪盤賭或綠屏變換到指定界面，從而讓這個(gè)無(wú)聊的等待過(guò)程成為游戲樂(lè)趣的一部分。
Web設(shè)計(jì)師能從中獲得什么：
個(gè)性化你的圖像，把用戶拉入你所創(chuàng)造的屏幕“世界”中。即使你在企業(yè)網(wǎng)站工作，你也可以設(shè)計(jì)信息位用以顯示提示和其他幫助信息。那搭建一個(gè)零售體育用品網(wǎng)站呢?也許你可以用一個(gè)旋轉(zhuǎn)的籃球作為加載動(dòng)畫。還沒想好怎么開始?點(diǎn)開本教程學(xué)習(xí)如何預(yù)載內(nèi)容。
加 載一整屏背景圖或許太慢了，但你可以給一個(gè)div設(shè)定彩色背景，然后利用JavaScript去載入提示和信息。為保證效果，加載文件大小最好控制在 30KB以下;當(dāng)然，越小越好。可以用一個(gè)簡(jiǎn)單的AJAX每幾秒就抓取一次內(nèi)容，或者當(dāng)然也可以為每次抓取提交一個(gè)請(qǐng)求。怎么做完全取決于加載內(nèi)容的多少 和你有多少時(shí)間。看一個(gè)這種方式的實(shí)例，Website Grader。提交一個(gè)鏈接后，你期待的結(jié)果就來(lái)了。
自定義光標(biāo)樣式
在《神鬼寓言3》里，當(dāng)?shù)貐^(qū)靠近玩家時(shí)，光標(biāo)就會(huì)替換成放大鏡。
在《上古卷軸IV》中：Oblivion，一個(gè)簡(jiǎn)單的手型光標(biāo)就代表玩家可以拾起。紅色的手型則表示該物件被偷，而且士兵可能會(huì)追來(lái)。
Web設(shè)計(jì)師能從中獲得什么：
或許最容易識(shí)別的自定義光標(biāo)就屬谷歌地圖的“抓抓手”了。但自定義光標(biāo)在Web應(yīng)用上已經(jīng)不是什么新鮮事兒了。大多數(shù)瀏覽器已經(jīng)內(nèi)置了這個(gè)功能。
使用以下光標(biāo)時(shí)需要謹(jǐn)慎行事：提供幫助時(shí)，讓內(nèi)容看上去可點(diǎn)，同時(shí)突出顯示。一個(gè)特定的信息是否絕對(duì)需要被訪問(wèn)者看到呢?試試這個(gè)自定義光標(biāo)(如下圖)的演示。看到了，真的需要這么強(qiáng)化顯示嗎?試想一下，一個(gè)合理的JavaScript運(yùn)用在兒童網(wǎng)站上，能夠吸引注意力!但很顯然，對(duì)于企業(yè)網(wǎng)站來(lái)說(shuō)就未必適合。
圖標(biāo)，圖標(biāo)，還是圖標(biāo)
視頻游戲和網(wǎng)站的最大不同在于，使用在復(fù)雜游戲菜單中的圖標(biāo)要比使用在網(wǎng)站導(dǎo)航中的多的多，沒錯(cuò)，就是這樣。用戶通常在游戲上花費(fèi)的時(shí)間都比瀏覽網(wǎng)站要多。但圖標(biāo)也一直被網(wǎng)站所用，而且網(wǎng)站跟Web應(yīng)用之間的界線也越來(lái)越模糊。
那么，如何有效地在游戲?qū)Ш街惺褂脠D標(biāo)呢?它們必須易讀，并且與環(huán)境相符。在上面《Halo Reach》的例子中，用戶依賴圖標(biāo)進(jìn)行導(dǎo)航和武器選擇，但菜單類似于一個(gè)“平視智能顯示”(HUD)，就像在現(xiàn)實(shí)世界里透過(guò)車窗看東西一樣。在《上古卷軸》中，圖標(biāo)裝飾了“滾動(dòng)條”。網(wǎng)站的圖標(biāo)同樣應(yīng)當(dāng)容易被理解。添加文字標(biāo)簽以獲得更好的可用性。
圖標(biāo)可以大大加快復(fù)雜的菜單的通過(guò)速度，前提是它們都經(jīng)過(guò)精心的選擇，對(duì)需要花費(fèi)長(zhǎng)時(shí)間瀏覽網(wǎng)站的用戶來(lái)說(shuō)尤為有效。使用固定顏色、高對(duì)比度的輪廓并且形狀簡(jiǎn)單的圖標(biāo)，更容易辨認(rèn)，也更容易理解。
游戲說(shuō)白了就是你在一堆復(fù)雜的圖片里穿梭，如《Halo Reach》和《使命召喚》，同時(shí)大圖也都具有形狀鮮明的輪廓，就像下面這張。即使你沒仔細(xì)看細(xì)節(jié)，也能認(rèn)出手、圓圈和臉的輪廓。用相似的顏色，減少視覺干擾，讓它們更容易被識(shí)別。越多的去使用圖標(biāo)，就越要注意它們的簡(jiǎn)單易識(shí)別。
你還可以利用圖標(biāo)作為線索，來(lái)吸引對(duì)主題的注意力。在內(nèi)容框和重復(fù)的主題中使用“頭”圖，而不是按鈕，以加強(qiáng)概念的快速認(rèn)知。讓復(fù)雜的圖更大些，并保持一致。使用圖標(biāo)把興趣添加到清單里，并分解成易消化的內(nèi)容，突出需要注意的重要部分，Treemo就是這樣做的。使用與導(dǎo)航和分組有聯(lián)系的圖標(biāo)。你也可以使用與標(biāo)題一致的形狀，或用引號(hào)表明哪些內(nèi)容具有相關(guān)性。利用圖標(biāo)使內(nèi)容易于掃描，突出興趣點(diǎn)，這樣用戶就能很快的找到想要的內(nèi)容了。
圖標(biāo)不必非得是靜態(tài)的。Pattern Tap 上雖然使用的是傳統(tǒng)的縮略圖，但它們的形狀看起來(lái)像是圖標(biāo)一樣，能突出興趣點(diǎn)不說(shuō)，還可以加強(qiáng)品牌效應(yīng)：
用你自己的產(chǎn)品做圖標(biāo)如何?就像DonQ那樣，菜單設(shè)計(jì)很聰明，就是用產(chǎn)品本身當(dāng)圖標(biāo)，對(duì)哪個(gè)感興趣就直接點(diǎn)哪個(gè)。更妙的方法是，菜單出現(xiàn)時(shí)其余內(nèi)容變暗，讓你的選擇脫穎而出。
Full-Page Carousels
像《龍騰世紀(jì)：起源》里的選項(xiàng)卡式的屏幕淡出效果，應(yīng)用已經(jīng)有段時(shí)間了：
在下面《Halo Reach》中的“屠殺報(bào)告”中，這種思路到達(dá)了一個(gè)新的水平。屏幕水平滾動(dòng)，每個(gè)頁(yè)面上都有多個(gè)選項(xiàng)卡。游戲中，玩家可以接受這樣的界面，但要是放在Web上，人們非瘋了不可。
你得為這種界面設(shè)計(jì)合理的交互。
Jax Vineyards 采用了一種相似結(jié)構(gòu)的布局，不用選項(xiàng)卡：
為每個(gè)輪換的屏幕加上選項(xiàng)卡，你的網(wǎng)站就又上了一個(gè)臺(tái)階。
Magento 在這個(gè)思路上提供了另一種簡(jiǎn)單的方式：
如今我們?cè)谑謾C(jī)和平板電腦中也能看到這種類型的界面，它們有很多的背景圖。在各式各樣的游戲中也不難找到。這種方式不是單純的選項(xiàng)卡和簡(jiǎn)單的橫滾：想想iPad中切換多個(gè)桌面時(shí)的情景。Think for a Living 在頁(yè)面右上角提供了一個(gè)地圖(非常游戲化的做法)，旨在把用戶傳送到一個(gè)不尋常的頁(yè)面。
Web設(shè)計(jì)師能從中獲得什么：
如果你有大量的內(nèi)容，那這個(gè)大膽的想法可以幫助提升友好性，增進(jìn)了解。還記得老式單頁(yè)面網(wǎng)站中的錨點(diǎn)嗎?這只不過(guò)是老酒裝新瓶。通過(guò)觸摸屏，很容易完成一個(gè)屏幕的移入，這是一個(gè)重要的因素。
由于屏幕尺寸不同，這種布局需要仔細(xì)規(guī)劃，可以到CSS3 media queries進(jìn)行查詢，以確保內(nèi)容可以適應(yīng)不同的屏幕尺寸。你需要讓你的布局易響應(yīng)。你可以用一個(gè)屏幕大小的div，將overflow設(shè)置成hidden，然后把各個(gè)屏幕放置在一個(gè)定寬的無(wú)序列表中(<ul>)
隨著用戶對(duì)平板電腦的使用，會(huì)越來(lái)越熟悉這種界面。采用簡(jiǎn)單的橫滾屏設(shè)計(jì)，會(huì)讓你的客戶端脫穎而出哦。
#p#
滑塊菜單
《寓言3》出了，其身臨其境的菜單系統(tǒng)與《寓言2》截然不同，如上圖。但《寓言2》中美麗的滑塊菜單，我們也把它列了出來(lái)。
滑動(dòng)滑塊，內(nèi)容在右側(cè)屏幕中隨之變化。按鈕下面還有相應(yīng)的下拉菜單。不可用的內(nèi)容會(huì)暗掉。上面那張圖是頂級(jí)分類“服裝”。接下來(lái)的內(nèi)容顯示為“大衣”，然后是特定的衣物。這是在給你的電子商務(wù)網(wǎng)站提供靈感嗎?
Web設(shè)計(jì)師能從中獲得什么：
你的網(wǎng)站上曾出現(xiàn)過(guò)一個(gè)菜單飛出來(lái)占滿整個(gè)屏幕的情況嗎?然后當(dāng)你在上面劃過(guò)時(shí)，還能在展出子菜單……還TM四級(jí)!看到這么驚悚的菜單，誰(shuí)不想馬上離開啊。把菜單設(shè)計(jì)的小一點(diǎn)，在容易看到的范圍內(nèi)，而且便于操作，這是讓用戶不會(huì)遠(yuǎn)離你的王道啊。
現(xiàn)在已經(jīng)有一些能在任何div容器里自定義滾動(dòng)條的滑塊腳本了。 為什么不把按鈕放到div里?因?yàn)榭赡苣承╊愋偷牟藛卧O(shè)置(如娛樂(lè)或時(shí)尚網(wǎng)站中的)，可用性和可擴(kuò)展性要比下拉或彈出菜單更強(qiáng)。為onClick事件加一 個(gè)AJAX loader，你會(huì)得到一個(gè)用戶更容易識(shí)別的界面。目標(biāo)就是當(dāng)菜單展開時(shí)，用戶能夠在一屏里對(duì)它們進(jìn)行操作。既然有必要往菜單里加?xùn)|西，就別讓它們看起來(lái)很笨拙。
屏幕透視
必須承認(rèn)，當(dāng)?shù)谝谎劭吹健禜alo Reach》屏幕時(shí)我心跳不已。當(dāng)你進(jìn)入主菜單時(shí)，會(huì)發(fā)現(xiàn)文字都是斜的。《Halo Reach》整個(gè)游戲使用的都是菜單屏幕右邊緣透視的角度。這是一種視覺暗示。當(dāng)你把控制器往右推會(huì)發(fā)生什么呢?屏幕跳動(dòng)、橫滾、模糊，然后切換到下一 屏，這時(shí)內(nèi)容和圖像看上去就是向左傾斜的了。在一個(gè)tab下就是你的角色了，在那動(dòng)來(lái)動(dòng)去的。棒極了，對(duì)嗎。我坐在那玩了一會(huì)兒。當(dāng)然，我的直覺告訴我， 我想這么做。
Web設(shè)計(jì)師能從中獲得什么：
其實(shí)在Photoshop里很容易就能模仿出這樣的菜單效果。準(zhǔn)備一張足夠大的、能涵蓋兩屏的全景背景圖片，利用傾斜的CSS3版式，再搞一個(gè)處理快速水平滾動(dòng)的JavaScript腳本的水平滾動(dòng)，你就可以擁有像游戲中一樣的效果了。
把它放在一個(gè)更小的屏幕里，使用在一個(gè)兩幀動(dòng)畫的banner或按鈕上，你會(huì)得到驚喜的(你的客戶也會(huì)哦)。我從沒見人在Web上使用它，但我做了一個(gè)小示例，希望能成為你實(shí)現(xiàn)它的起點(diǎn)。
此外，注意到了嗎，在《Halo Reach》里，它將很平凡的菜單屏幕與游戲世界中的景觀巧妙地結(jié)合在一起。帥呆了。它傳遞了一種感受方式，就像飛機(jī)降落前透過(guò)窗戶看城市一樣。刺激并誘 惑著你成為更深層次互動(dòng)和行動(dòng)的一部分。這種集成方式并不適合所有網(wǎng)站的體驗(yàn)，但它有存在的意義，在適當(dāng)?shù)臅r(shí)候，值得去嘗試。千萬(wàn)不要低估了喜悅的力量。
關(guān)聯(lián)菜單
視頻游戲中的關(guān)聯(lián)菜單跟網(wǎng)頁(yè)中的子菜單如出一轍。像《刺客信條：兄弟會(huì)》中的關(guān)聯(lián)菜單(上圖)，玩家所選擇的行動(dòng)的具體方案完全取決于他們的位置。如果你選 擇要施魔法，那菜單中就會(huì)出現(xiàn)火球或雷擊供你選擇。如果你選擇移動(dòng)，就會(huì)出現(xiàn)跑、攀爬、躲避，這些都呈現(xiàn)在一個(gè)星狀菜單中。帶有圖標(biāo)的星狀菜單非常受歡 迎，但這種關(guān)聯(lián)菜單只能應(yīng)用于簡(jiǎn)單，并且文本比較少的垂直短列表中。
Web設(shè)計(jì)師能從中獲得什么：
當(dāng)你邀請(qǐng)一位用戶執(zhí)行特殊操作時(shí)，關(guān)聯(lián)菜單可以提升體驗(yàn)。與單純的鏈接列表相比，它更有趣。現(xiàn)在我們已經(jīng)可以在一些Web應(yīng)用和小型社會(huì)化媒體分享工具中見到此類用法了。
當(dāng)你在設(shè)計(jì)關(guān)聯(lián)菜單時(shí)，至少要考慮它的路徑。星狀菜單可以為用戶提供3-8個(gè)選項(xiàng)，這樣的界面可以增添視覺興趣。要盡可能地保持它的簡(jiǎn)潔和清晰。因?yàn)樗鼈兛梢栽谟脩粢龀鲞x擇時(shí)提供相關(guān)參考，從而提高轉(zhuǎn)換率。同時(shí)別忘了它們要易于點(diǎn)擊，但別設(shè)計(jì)的太重。
想體驗(yàn)一下星狀菜單有多有趣嗎?來(lái)試試 TuneGlue’s musicmap
這個(gè)使用Flash實(shí)現(xiàn)的，當(dāng)然，你完全可以用JavaScript建立一個(gè)簡(jiǎn)單的星狀菜單。更復(fù)雜的也不是不行，在菜單中嵌套菜單，就像這個(gè)：
星狀菜單不局限于關(guān)聯(lián)菜單。對(duì)彈出式面板菜單同樣有效，而且開發(fā)和測(cè)試上也花不了太多時(shí)間。
現(xiàn)在，輪到你了
很多出色的設(shè)計(jì)想法都可以從視頻游戲中收集、借鑒而來(lái)。游戲可以為設(shè)計(jì)提供靈感，幫助你獎(jiǎng)勵(lì)和取悅用戶，讓界面既直觀又富有樂(lè)趣。
你正在建立一個(gè)非營(yíng)利性的募捐網(wǎng)站嗎?可以考慮使用捐款跟蹤排行榜。列出訪問(wèn)你博客排名前10位的讀者，給他們更大的動(dòng)力參與到評(píng)論中。
研究如何使用圖標(biāo)，思考實(shí)現(xiàn)方法，它會(huì)讓你的網(wǎng)站使用起來(lái)友好且有趣。讓提示變得有愛，或考慮添加些可供下載的內(nèi)容作為獎(jiǎng)勵(lì)或激勵(lì)(為玩家提供“DLC”。 譯者注：“DLC”一般指在游戲發(fā)售后，廠商又推出的下載包，對(duì)游戲內(nèi)容進(jìn)行擴(kuò)展，如增加新地圖，新游戲模式等)。通過(guò)觀察和有創(chuàng)造性地實(shí)踐，你的網(wǎng)站將 會(huì)更具吸引力，并且更易使用。不要忘了，勤做研究，其樂(lè)無(wú)窮哦!
我不是這篇文章的創(chuàng)造者，只是思想的搬運(yùn)工。我一直堅(jiān)持著這樣的設(shè)計(jì)理念，所以當(dāng)讀完這篇文章時(shí)，我堅(jiān)持要把它譯完，分享給更多設(shè)計(jì)師，希望能與更多人產(chǎn)生共鳴。
原文：http://blog.b3inside.com/design/what-web-designers-can-learn-from-video-games/
【編輯推薦】
