中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

譯者序：一直以來我都想寫一篇關(guān)于游戲與交互設(shè)計之間關(guān)系的文章，因為我堅信好的設(shè)計和游戲一樣有魔力，都能為用戶帶來樂趣。這可能跟我之前在游戲公司任職過有關(guān)，潛移默化地受到感染和熏陶。當(dāng)看到這篇文章時，共鳴了，這就是我想要說的，于是我決定譯過來，跟更多設(shè)計師產(chǎn)生共鳴，推動 “樂趣設(shè)計”，同時也為自己這方面的想法寫下第一筆。

好的設(shè)計應(yīng)該是融會貫通的，有相似的細(xì)節(jié)和處理方法，當(dāng)然，還要有一個能夠吸引人的理由或法寶，如果你有過這方面的零碎念頭，而沒有能匯總在一起，往下看，這就是了！

游戲越來越Web化，而Web也越來越游戲化。如果你想證明這一點，只需要去看看雅虎問答。有人問，有人答，最終獲勝答案還能拿到獎勵分（譯者注：沒玩過雅虎問答的想想百度知道）。這是一個排名系統(tǒng)，可以積聚和解鎖系統(tǒng)中越來越多的功能。它的工作原理是因為心理的成就和游戲機制，從而鼓勵互動。問題來 了，Web設(shè)計師們能從游戲中學(xué)到什么？或者更確切的說，是從視頻游戲中？

一個好的游戲界面必須高度可用，并且直觀，能夠用盡可能少的動作完成很多重復(fù)的動作。它們需要具有吸引力，并且夠可愛。一個好的游戲界面會給用戶體驗加分的。在游戲中，人們接受內(nèi)容的同時不希望幻想被打破，所以再偉大的游戲產(chǎn)品都可能敗于一個不給力的界面。

即使在像《波斯王子》這樣的老游戲里，只有有限的系統(tǒng)功能，也要求設(shè)計師們必須做出一些創(chuàng)新。在功能越發(fā)豐富的今天，我們不難從現(xiàn)代視頻游戲中發(fā)掘中更先進(jìn)的設(shè)計技術(shù)。

網(wǎng) 站的用戶以同樣的方式，希望其內(nèi)容交付的方式，是很容易理解，直觀，引人入勝，而且不需要過多滾動或點擊。事實上，Web設(shè)計師可以從視頻游戲界面中學(xué)到 很多。使用了通用游戲界面思想的網(wǎng)站，可以簡化用戶操作，同時為站點注入更多個性化。這樣能帶來更高的流量和回訪率，甚至銷售額（說白了，就是錢嘛?。?/p>

這并不奇怪，我們已經(jīng)看到，像carousels，lightboxes，accordions和日益復(fù)雜的導(dǎo)航，已經(jīng)通過CSS和JavaScript庫大量涌入了瀏覽器中。無論是好事還是壞事，那都是另一篇文章要討論的，本文將專注于技術(shù)，而不是那些錯誤的應(yīng)用。

Web設(shè)計師可以從視頻游戲中學(xué)到的東西不僅限于用戶界面。雅虎問答的工作原理在于內(nèi)置的心理學(xué)成就系統(tǒng)。所以，當(dāng)我們看一些基本的用戶界面思路和模式時，其他更高層次的概念也是有益的，同時也值得去探討。

從大局出發(fā)

考慮到游戲界面，Web設(shè)計師需要敏銳地意識到項目自身的背景和客戶的目標(biāo)。顯然，一個網(wǎng)站往往，但并不總是，有一個目標(biāo)，這是非常不同于視頻游戲的地方。 在大多網(wǎng)站中，對效率的要求要高于娛樂性。一個很酷的魚眼界面，如果放在提供稅務(wù)信息或電子商務(wù)的網(wǎng)站上，可不是個切合實際的想法。然而，一個互動型的社 會媒體，可能會因一種領(lǐng)先的技術(shù)或某種類型的成就系統(tǒng)而從中受益。選擇合適的UI組件，事半功倍。

縱觀大局，還要考慮結(jié)構(gòu)和方法 – 不只是UI組件。比如，看看菜單是怎么個結(jié)構(gòu)，考慮下為什么要這么做（譯者注：作為設(shè)計師，每當(dāng)使用一個產(chǎn)品的時候，都應(yīng)該考慮一下背后的設(shè)計思想）。在 很多游戲里，一些功能設(shè)置都放在星狀拓?fù)浣Y(jié)構(gòu)的菜單里。如果你選擇“武器”，接下來打開的菜單將展示出所有武器。要選擇“地圖”得通過導(dǎo)航回到第一屏。這種結(jié)構(gòu)簡化了設(shè)置選項，否則很快就會被其他選項分散掉注意力而忘記真正要做什么。

你能明白這種結(jié)構(gòu)形式的網(wǎng)站是如何向訪問者展示提供大量信息的嗎？通過使訪問者一次只專注于一個大型在線任務(wù)或一個信息塊，可能會增加用戶的轉(zhuǎn)換率。這種結(jié)構(gòu)也可以有效地被使用在網(wǎng)站上的銷售漏斗。下面的例子就展示了一個簡單的游戲菜單結(jié)構(gòu)，通過它可以很容易地應(yīng)用到一個網(wǎng)站的信息體系結(jié)構(gòu)，建立起訪問者路徑。（如下圖）

如果你正在搭建一個會計師事務(wù)所的網(wǎng)站，你可能會根據(jù)訪問者類型的相關(guān)性來 劃分標(biāo)題下的菜單信息。一個有錢的個體與一個小企業(yè)的需求不盡相同，但都可能有意聘請同一公司。你可以自上而下的開展，用兩個切入點作為漏斗，一個為個體 和家庭，另一個為企業(yè)和組織，每個按鈕用來為他的用戶分流。這個分流頁面可以提供內(nèi)容和相關(guān)工具，并為不同的用戶提供相關(guān)服務(wù)，從而簡化他們的操作，提升體驗。（如下圖）

此外，視頻游戲中的提示是用看的而不是用說，試著去了解一下它們是怎么工作的。成功的游戲里都有一個為“小白”提供訓(xùn)練和學(xué)習(xí)的地方。一個角色一上來都要通 過完成一些任務(wù)，達(dá)到一定等級，從而熟悉操作也了解游戲的故事情節(jié)。探險家學(xué)會拿起劍擺動，然后殺死一只老鼠，然后學(xué)會撿寶貝。用戶希望通過界面體驗到身臨其境的感覺。

在《上古卷軸IV》中：Oblivion，你開始在監(jiān)獄里，必須通過一個地下洞穴逃脫，沿途會跟大老鼠和偶爾出現(xiàn)的小妖精戰(zhàn)斗，通過這種方式來學(xué)習(xí)游戲的基本控制。

它們?yōu)槭裁从嘘P(guān)聯(lián)？你可能不必為一個復(fù)雜的界面提供完整的交互教學(xué)，但可以通過智能圖形或圖表，讓用戶更迅速地了解內(nèi)容。你可以拋出一個大概念，然后拆分成小塊。用小提示和實例要比長篇大論好的多。通過研究游戲中是怎么用看替代說的，就可以在一些棘手的問題上獲得突破了。

戰(zhàn)斗場面未必要華麗

游戲設(shè)計奇才Jesse Schell說，“游戲，為滿足你的好奇心提供了成功的可能性和機會——一個解決問題的機會，做正確的選擇，并讓人感到自由?！?即使是最平凡的網(wǎng)站也能問出最吸引人的問題——游戲的哪些要素能給人們帶去歡樂？

游戲通常在用戶輸入時給出清晰的反饋。這些元素可以融入界面，不僅僅是通過carousels或accordions的形式。問個簡單的問題“你希望學(xué)到更多關(guān)于此話題的東西嗎？” 確定提交表單之后會發(fā)現(xiàn)，提升用戶交互體驗還有很長的路要走哇。

一些Web設(shè)計師們已經(jīng)實現(xiàn)了UI組件的簡單化。如今，懸停菜單和提示層已經(jīng)不是什么新鮮玩意了。這些在游戲中已經(jīng)成型的套路，如何能為普通UI元素帶來更多的創(chuàng)意和樂趣，讓我們拭目以待吧。

來點實例

讓我們進(jìn)入正題，來看看如何在下個項目中使用這些UI元素。接下來會展示一些實例，還有一些資源便于之后的擴展學(xué)習(xí)。

異步加載的信息

這是《輻射》里的加載截圖：上面的《輻射：新維加斯》和下面的《輻射3》都有幫助信息和提示，并隨主題背景圖一起在游戲中展開。相比老套生硬的加載圖像，它使用輪盤賭或綠屏變換到指定界面，從而讓這個無聊的等待過程成為游戲樂趣的一部分。

Web設(shè)計師能從中獲得什么：

個性化你的圖像，把用戶拉入你所創(chuàng)造的屏幕“世界”中。即使你在企業(yè)網(wǎng)站工作，你也可以設(shè)計信息位用以顯示提示和其他幫助信息。那搭建一個零售體育用品網(wǎng)站呢？也許你可以用一個旋轉(zhuǎn)的籃球作為加載動畫。還沒想好怎么開始？點開本教程學(xué)習(xí)如何預(yù)載內(nèi)容。

加 載一整屏背景圖或許太慢了，但你可以給一個div設(shè)定彩色背景，然后利用JavaScript去載入提示和信息。為保證效果，加載文件大小最好控制在 30KB以下；當(dāng)然，越小越好。可以用一個簡單的AJAX每幾秒就抓取一次內(nèi)容，或者當(dāng)然也可以為每次抓取提交一個請求。怎么做完全取決于加載內(nèi)容的多少 和你有多少時間?？匆粋€這種方式的實例，Website Grader。提交一個鏈接后，你期待的結(jié)果就來了。

自定義光標(biāo)樣式

在《神鬼寓言3》里，當(dāng)?shù)貐^(qū)靠近玩家時，光標(biāo)就會替換成放大鏡。

在《上古卷軸IV》中：Oblivion，一個簡單的手型光標(biāo)就代表玩家可以拾起。紅色的手型則表示該物件被偷，而且士兵可能會追來。

Web設(shè)計師能從中獲得什么：

或許最容易識別的自定義光標(biāo)就屬谷歌地圖的“抓抓手”了。但自定義光標(biāo)在Web應(yīng)用上已經(jīng)不是什么新鮮事兒了。大多數(shù)瀏覽器已經(jīng)內(nèi)置了這個功能。

使用以下光標(biāo)時需要謹(jǐn)慎行事：提供幫助時，讓內(nèi)容看上去可點，同時突出顯示。一個特定的信息是否絕對需要被訪問者看到呢？試試這個自定義光標(biāo)（如下圖）的演示?？吹搅?，真的需要這么強化顯示嗎？試想一下，一個合理的JavaScript運用在兒童網(wǎng)站上，能夠吸引注意力！但很顯然，對于企業(yè)網(wǎng)站來說就未必適合。

圖標(biāo)，圖標(biāo)，還是圖標(biāo)

視頻游戲和網(wǎng)站的最大不同在于，使用在復(fù)雜游戲菜單中的圖標(biāo)要比使用在網(wǎng)站導(dǎo)航中的多的多，沒錯，就是這樣。用戶通常在游戲上花費的時間都比瀏覽網(wǎng)站要多。但圖標(biāo)也一直被網(wǎng)站所用，而且網(wǎng)站跟Web應(yīng)用之間的界線也越來越模糊。

那么，如何有效地在游戲?qū)Ш街惺褂脠D標(biāo)呢？它們必須易讀，并且與環(huán)境相符。在上面《Halo Reach》的例子中，用戶依賴圖標(biāo)進(jìn)行導(dǎo)航和武器選擇，但菜單類似于一個“平視智能顯示”（HUD），就像在現(xiàn)實世界里透過車窗看東西一樣。在《上古卷軸》中，圖標(biāo)裝飾了“滾動條”。網(wǎng)站的圖標(biāo)同樣應(yīng)當(dāng)容易被理解。添加文字標(biāo)簽以獲得更好的可用性。

圖標(biāo)可以大大加快復(fù)雜的菜單的通過速度，前提是它們都經(jīng)過精心的選擇，對需要花費長時間瀏覽網(wǎng)站的用戶來說尤為有效。使用固定顏色、高對比度的輪廓并且形狀簡單的圖標(biāo)，更容易辨認(rèn)，也更容易理解。

游戲說白了就是你在一堆復(fù)雜的圖片里穿梭，如《Halo Reach》和《使命召喚》，同時大圖也都具有形狀鮮明的輪廓，就像下面這張。即使你沒仔細(xì)看細(xì)節(jié)，也能認(rèn)出手、圓圈和臉的輪廓。用相似的顏色，減少視覺干擾，讓它們更容易被識別。越多的去使用圖標(biāo)，就越要注意它們的簡單易識別。

你還可以利用圖標(biāo)作為線索，來吸引對主題的注意力。在內(nèi)容框和重復(fù)的主題中使用“頭”圖，而不是按鈕，以加強概念的快速認(rèn)知。讓復(fù)雜的圖更大些，并保持一致。使用圖標(biāo)把興趣添加到清單里，并分解成易消化的內(nèi)容，突出需要注意的重要部分，Treemo就是這樣做的。使用與導(dǎo)航和分組有聯(lián)系的圖標(biāo)。你也可以使用與標(biāo)題一致的形狀，或用引號表明哪些內(nèi)容具有相關(guān)性。利用圖標(biāo)使內(nèi)容易于掃描，突出興趣點，這樣用戶就能很快的找到想要的內(nèi)容了。

圖標(biāo)不必非得是靜態(tài)的。Pattern Tap 上雖然使用的是傳統(tǒng)的縮略圖，但它們的形狀看起來像是圖標(biāo)一樣，能突出興趣點不說，還可以加強品牌效應(yīng)：

用你自己的產(chǎn)品做圖標(biāo)如何？就像DonQ那樣，菜單設(shè)計很聰明，就是用產(chǎn)品本身當(dāng)圖標(biāo)，對哪個感興趣就直接點哪個。更妙的方法是，菜單出現(xiàn)時其余內(nèi)容變暗，讓你的選擇脫穎而出。

Full-Page Carousels

像《龍騰世紀(jì)：起源》里的選項卡式的屏幕淡出效果，應(yīng)用已經(jīng)有段時間了：

在下面《Halo Reach》中的“屠殺報告”中，這種思路到達(dá)了一個新的水平。屏幕水平滾動，每個頁面上都有多個選項卡。游戲中，玩家可以接受這樣的界面，但要是放在Web上，人們非瘋了不可。

你得為這種界面設(shè)計合理的交互。

Jax Vineyards 采用了一種相似結(jié)構(gòu)的布局，不用選項卡：

為每個輪換的屏幕加上選項卡，你的網(wǎng)站就又上了一個臺階。

Magento 在這個思路上提供了另一種簡單的方式：

如今我們在手機和平板電腦中也能看到這種類型的界面，它們有很多的背景圖。在各式各樣的游戲中也不難找到。這種方式不是單純的選項卡和簡單的橫滾：想想iPad中切換多個桌面時的情景。Think for a Living 在頁面右上角提供了一個地圖（非常游戲化的做法），旨在把用戶傳送到一個不尋常的頁面。

Web設(shè)計師能從中獲得什么：

如果你有大量的內(nèi)容，那這個大膽的想法可以幫助提升友好性，增進(jìn)了解。還記得老式單頁面網(wǎng)站中的錨點嗎？這只不過是老酒裝新瓶。通過觸摸屏，很容易完成一個屏幕的移入，這是一個重要的因素。

由于屏幕尺寸不同，這種布局需要仔細(xì)規(guī)劃，可以到CSS3 media queries進(jìn)行查詢，以確保內(nèi)容可以適應(yīng)不同的屏幕尺寸。你需要讓你的布局易響應(yīng)。你可以用一個屏幕大小的div，將overflow設(shè)置成hidden，然后把各個屏幕放置在一個定寬的無序列表中（

• • Introduction to Design Patterns
    學(xué)習(xí)如何設(shè)計模型（適合初學(xué)者）
  • Art of Game Design
    這本書講授游戲設(shè)計的基本原則。其中示例章節(jié)可供下載
  • Interaction Design Pattern Library
    一個集思廣益，滿足用戶需求的好工具。附有模型和詳細(xì)的說明清單
  • Yahoo Design Pattern Library
    設(shè)計模型庫的鼻祖
  • Vertical Custom Scrollbars/Sliders
    垂直滑塊菜單學(xué)習(xí)的起點
  • Patternry
    一個很棒的UI資源，有示例和教學(xué)
  • Gamification.org
    這個wiki致力于探索如何把游戲機制應(yīng)用于非游戲環(huán)境，以增強用戶參與度

） 

隨著用戶對平板電腦的使用，會越來越熟悉這種界面。采用簡單的橫滾屏設(shè)計，會讓你的客戶端脫穎而出哦。

滑塊菜單





《寓言3》出了，其身臨其境的菜單系統(tǒng)與《寓言2》截然不同，如上圖。但《寓言2》中美麗的滑塊菜單，我們也把它列了出來。

滑動滑塊，內(nèi)容在右側(cè)屏幕中隨之變化。按鈕下面還有相應(yīng)的下拉菜單。不可用的內(nèi)容會暗掉。上面那張圖是頂級分類“服裝”。接下來的內(nèi)容顯示為“大衣”，然后是特定的衣物。這是在給你的電子商務(wù)網(wǎng)站提供靈感嗎？

Web設(shè)計師能從中獲得什么：

你的網(wǎng)站上曾出現(xiàn)過一個菜單飛出來占滿整個屏幕的情況嗎？然后當(dāng)你在上面劃過時，還能在展出子菜單……還TM四級！看到這么驚悚的菜單，誰不想馬上離開啊。把菜單設(shè)計的小一點，在容易看到的范圍內(nèi)，而且便于操作，這是讓用戶不會遠(yuǎn)離你的王道啊。

現(xiàn)在已經(jīng)有一些能在任何div容器里自定義滾動條的滑塊腳本了。 為什么不把按鈕放到div里？因為可能某些類型的菜單設(shè)置（如娛樂或時尚網(wǎng)站中的），可用性和可擴展性要比下拉或彈出菜單更強。為onClick事件加一 個AJAX loader，你會得到一個用戶更容易識別的界面。目標(biāo)就是當(dāng)菜單展開時，用戶能夠在一屏里對它們進(jìn)行操作。既然有必要往菜單里加?xùn)|西，就別讓它們看起來很笨拙。

屏幕透視

先來看段視頻

必須承認(rèn)，當(dāng)?shù)谝谎劭吹健禜alo Reach》屏幕時我心跳不已。當(dāng)你進(jìn)入主菜單時，會發(fā)現(xiàn)文字都是斜的?！禜alo Reach》整個游戲使用的都是菜單屏幕右邊緣透視的角度。這是一種視覺暗示。當(dāng)你把控制器往右推會發(fā)生什么呢？屏幕跳動、橫滾、模糊，然后切換到下一 屏，這時內(nèi)容和圖像看上去就是向左傾斜的了。在一個tab下就是你的角色了，在那動來動去的。棒極了，對嗎。我坐在那玩了一會兒。當(dāng)然，我的直覺告訴我， 我想這么做。

Web設(shè)計師能從中獲得什么：

其實在Photoshop里很容易就能模仿出這樣的菜單效果。準(zhǔn)備一張足夠大的、能涵蓋兩屏的全景背景圖片，利用傾斜的CSS3版式，再搞一個處理快速水平滾動的JavaScript腳本的水平滾動，你就可以擁有像游戲中一樣的效果了。

把它放在一個更小的屏幕里，使用在一個兩幀動畫的banner或按鈕上，你會得到驚喜的（你的客戶也會哦）。我從沒見人在Web上使用它，但我做了一個小示例，希望能成為你實現(xiàn)它的起點。



此外，注意到了嗎，在《Halo Reach》里，它將很平凡的菜單屏幕與游戲世界中的景觀巧妙地結(jié)合在一起。帥呆了。它傳遞了一種感受方式，就像飛機降落前透過窗戶看城市一樣。刺激并誘 惑著你成為更深層次互動和行動的一部分。這種集成方式并不適合所有網(wǎng)站的體驗，但它有存在的意義，在適當(dāng)?shù)臅r候，值得去嘗試。千萬不要低估了喜悅的力量。

關(guān)聯(lián)菜單



視頻游戲中的關(guān)聯(lián)菜單跟網(wǎng)頁中的子菜單如出一轍。像《刺客信條：兄弟會》中的關(guān)聯(lián)菜單（上圖），玩家所選擇的行動的具體方案完全取決于他們的位置。如果你選 擇要施魔法，那菜單中就會出現(xiàn)火球或雷擊供你選擇。如果你選擇移動，就會出現(xiàn)跑、攀爬、躲避，這些都呈現(xiàn)在一個星狀菜單中。帶有圖標(biāo)的星狀菜單非常受歡 迎，但這種關(guān)聯(lián)菜單只能應(yīng)用于簡單，并且文本比較少的垂直短列表中。

Web設(shè)計師能從中獲得什么：

當(dāng)你邀請一位用戶執(zhí)行特殊操作時，關(guān)聯(lián)菜單可以提升體驗。與單純的鏈接列表相比，它更有趣?，F(xiàn)在我們已經(jīng)可以在一些Web應(yīng)用和小型社會化媒體分享工具中見到此類用法了。

當(dāng)你在設(shè)計關(guān)聯(lián)菜單時，至少要考慮它的路徑。星狀菜單可以為用戶提供3-8個選項，這樣的界面可以增添視覺興趣。要盡可能地保持它的簡潔和清晰。因為它們可以在用戶要做出選擇時提供相關(guān)參考，從而提高轉(zhuǎn)換率。同時別忘了它們要易于點擊，但別設(shè)計的太重。

想體驗一下星狀菜單有多有趣嗎？來試試?TuneGlue’s musicmap



這個使用Flash實現(xiàn)的，當(dāng)然，你完全可以用JavaScript建立一個簡單的星狀菜單。更復(fù)雜的也不是不行，在菜單中嵌套菜單，就像這個：



星狀菜單不局限于關(guān)聯(lián)菜單。對彈出式面板菜單同樣有效，而且開發(fā)和測試上也花不了太多時間。



現(xiàn)在，輪到你了

很多出色的設(shè)計想法都可以從視頻游戲中收集、借鑒而來。游戲可以為設(shè)計提供靈感，幫助你獎勵和取悅用戶，讓界面既直觀又富有樂趣。

你正在建立一個非營利性的募捐網(wǎng)站嗎？可以考慮使用捐款跟蹤排行榜。列出訪問你博客排名前10位的讀者，給他們更大的動力參與到評論中。

研究如何使用圖標(biāo)，思考實現(xiàn)方法，它會讓你的網(wǎng)站使用起來友好且有趣。讓提示變得有愛，或考慮添加些可供下載的內(nèi)容作為獎勵或激勵（為玩家提供“DLC”。 譯者注：“DLC”一般指在游戲發(fā)售后，廠商又推出的下載包，對游戲內(nèi)容進(jìn)行擴展，如增加新地圖，新游戲模式等）。通過觀察和有創(chuàng)造性地實踐，你的網(wǎng)站將 會更具吸引力，并且更易使用。不要忘了，勤做研究，其樂無窮哦！

更多資源

我不是這篇文章的創(chuàng)造者，只是思想的搬運工。我一直堅持著這樣的設(shè)計理念，所以當(dāng)讀完這篇文章時，我堅持要把它譯完，分享給更多設(shè)計師，希望能與更多人產(chǎn)生共鳴。