HTML5：Web遊戲中的GUI設計和互動

　　GUI（Graphical User Interface，圖形使用者介面）和HCI（Human-Computer Interaction，人機互動）是應用開發中極其重要的一部分，但往往被開發人員所忽略。Apple、Google 以及Facebook 等公司和應用之所以能夠成功，很大一部分原因就是它們遵循了卓越的可用性設計指南。一致、簡潔、快速以及最小化設計體現在它們的每一款產品中。當然，視訊遊戲（也包括我們的）設計也不例外，不過這裡邊有一個很大的問題需要注意：與其他產品不同，我們的GUI 必須同時適應桌面及移動裝置的螢幕。

　　明確了這一點之後，我們可以有針對性地列舉出一組建議。

• 不能依賴滑鼠懸停給出反饋或顯示提示條。觸控式螢幕只有兩個狀態：觸控與未• 觸控。
• 沒有提示條，就只能通過圖示和按鈕來清晰地傳達通過它們能做什麼的資訊。
• 也不能依賴於右鍵單擊，因為移動裝置沒有那個功能。
• 在某些等軸遊戲中，橫向遊戲模式比縱向遊戲模式能更有效地利用螢幕區域。
• 賬戶餘額等重要資訊最好顯示在頂部，而導航元素最好顯示在左下角。（別忘了全世界有90% 的人是右利手，在使用右手來點選遊戲介面的同時，他們通常都用左手拿著裝置，如圖3-1 所示。）

• 由於手機螢幕很小，應該儘量保持介面的• 簡潔。
• 應該假設用電腦滑鼠上下滾動與使用兩根手指放大縮小（目前的標準做法）執行相同的操作。
• 還應該避免顯示浮動視窗，而代之以滾動皮膚。這些皮膚會在螢幕的右側顯示。

大體上，我們遊戲的GUI 類似圖3-2 所示。

每個導航按鈕都可以調出一種工具，或者執行一種特定的操作。我們的遊戲將會新增下列工具。

• 選擇工具，用於選擇不同的建築物。
• 移動工具，用於切換滾動位置修改器，可以通過滑鼠使用；在移動裝置或平板電腦中可以通過手指在螢幕上拖動使用。

• 放大及縮小按鈕，用於放大網格及其中的物體，操作方法是點選螢幕。

• 旋轉按鈕，用於逆時針旋轉矩陣• 的值。

• 拆除按鈕，用於拆掉特定的建築物。

此外，我們還要支援以下功能。

• 不通過縮放按鈕，直接使用滑鼠的滾輪放大或縮小。
• 使用鍵盤上的鍵來滾動網格或者放大、縮小以及旋轉網格。

本文摘自《深入HTML5應用開發》