本站AI自動判斷提供您所需要的app下載：點我下載安裝，你懂的APP
本文首發于公眾號老司機UI CLUB，作者游族網絡UI設計總監陳心添，游戲葡萄已獲轉載授權。
《英雄聯盟》手游（以下簡稱LOL-M）在海外上線，在UI設計方面有非常多值得我們學習的地方。信息爆炸的時代，信息做減法、輕量化就變得尤為關鍵。我認為LOL-M在這方面做到了一個新的高度，做了一些我們想做卻不敢做的設計。結合這兩天的體驗，本文從6個維度和大家分享UI設計中值得我們學習的地方。
一些游戲將生活中已有的理念或者原本的設計進行放大，變形，重組，對比或者拉伸，將某種特定感覺進行夸張處理，即可獲得更為強烈的個性化效果。
游戲界面有時候物體比較多，就會出現一些很小的按鈕，點擊瞬間完全被手指遮擋，這個有必要時可以稍微延長動畫到點擊過后（手指離開按鈕）才結束，來提醒用戶『你點的是這里！』
模式選擇增加動畫后的效果
確認了原型的概念，我們來進入正題：如何制作UI原型？
書寫的流行一部分是來源于陰陽師『畫符抽卡』的現象級熱潮。此外，書寫作為花式動作有它顯著的優勢：首先，它有物理世界的直覺，當我們在游戲里創造的新世界也適用真實生活的動作，它就更容易產生沉浸感。此外它自由度高，用戶行為個體差異極大，也更方便用戶加入自己的獨有感情。
首先，有個靈魂問題：到底多長算一個長按？
第一，難做對。在硬表面上按出重而短的一下是不太容易的。我們剛才發現了長按的識別時間只有0.5秒，『按住-加力』的過程很容易長過這個閾值，于是系統收到了一個長按。更重要的是，大部分用戶對按屏幕的力并沒有直觀概念，普通觸摸可能輕點，卡機了沒能瞬間響應就加大力戳戳戳……誰都不會意識到自己是在做兩個不同的動作。
第二，用不著。重按出快捷選單是因為它和長按刪除沖突？不存在的。一張圖解決問題……
經歷過以上五個步驟后，一個完整界面將會誕生。本文主講核心設計，其含義為做某個界面之前應該最先考慮的事情：界面設計大方向（理想）與界面設計規范（現實）。
當然，有的應用程序會根據自身需要批量處理多個圖片成為一個圖集來減小消耗，但是此方法會增加處理器運算復雜度，因此要酌情考慮。
需識別的文字和圖像沒有清晰化處理（比如直接顯示在HUD上的文字沒有加描邊或底板）
選好原型目標后，我們便可以開始根據此前確定的布局規范，將做好的通用模塊填充進界面之中，下圖便是一開始根據規范完成的大致布局。
重要決策都需要二次確認幫助玩家給誤觸/決策考慮留出緩沖余地。表現形式也很多樣：
專欄地址：
而后者呢？
最終上線版本展示
【結構設計】：界面劃分區域來影響信息秩序的感知。
如果沒有多樣的圖標，僅是道具品質的變化，那么至少保證圖形長相一致的基礎上，一定要額外染色，作為新的道具圖標出現，不要圖省事，只是邊框變化。
當然有人可能會說，難道不能在保證產品自身優勢的情況下，兼顧界面操作的便捷性呢？
bing搜到最全面的交互動作圖（觸摸屏的）……此處有貍花震驚臉.jpg
手機上的常見做法
這不，就有一位心急的永劫無間玩家，竟然自己動手設計出了一套永劫無間的UI界面，用作給官方進行參考使用?？梢钥吹浇缑孢€是比較簡潔，各種操作技巧都有專屬的位置，平擊、振刀、縱擊等功能一一在列。
文字的設計
策劃完成案子的規劃從絕不意味著功能設計的終結。這個時期需要額外關注的有便捷性設計與玩家行為提示。下圖為常見的便捷設計，用于改善游戲體驗：
設計實踐
因此任何美術資源驗收時需要策劃稍微把關下，即使是符咒或者用其他文字裝飾的貼圖也需要美術一應提供其含義。
旋鈕是個很常見的東西，在機械產品上，凸起的把手和它下面的圓盤，是最明顯不過的旋轉暗示。物理旋鈕有尺寸，有方向、有角度，有連續或刻度的手感區別。這一切細節都在貍花爪捏住旋鈕的極短時間，就可以取得清晰的了解。
時間充裕的情況下推薦可以重做交互，一方面各個輸入端操作差異很難通過適配完全消弭，重新制作界面是帶來體驗最好的選擇。但重做也需要考慮到各平臺各輸入端的差異，非?？简灲换煹墓Φ?。
穆尼克拉的出場動畫
早年貍花看過一本有講人機交互設備的書，里面給鍵鼠、手柄、觸屏等常見載體做過一個排名——鍵盤鼠標在狀態的數量上遠高于其他設備。
其實倒也不必談“游戲”色變，父母們不妨換個思路看待“游戲”，孩子玩游戲，不要簡單粗暴地沒收手機，咱們可以規定作業寫完了玩多久，還可以跟孩子聊聊游戲規則，說說游戲里通用的“套路”，讓孩子有種“原來如此”之感。
（2）沒辦法選中交互區域之外
那么設計通用模塊，從個人的經驗出發，有兩個原則可供大家借鑒。
（2）滑動搖桿的時間越長，光標位置移動的頻率越快
以《一人之下手游》的UI設計過程為例，背包系統作為原型，里面含有多個通用模塊可以移植到其他系統之中，但這多個系統的設計中肯定有各自的獨立模塊，所以在底層優化過程中，我們首先要做的便是從已經制作的系統中總結出新的規則，將新設計的模塊提煉沉淀出來，順勢進行進一步的優化。
建立了『點擊按鈕=觸摸物體』的認知之后，我們可以看到這會帶給用戶什么樣的預期——
比如搖桿向左或向右滑動可從第1欄跳到第10欄，可以稍微減少一些操作步驟。
/*不按順序*/一個一個來，首先是點擊動作，接下來是滑動……
多指手勢
大廳的視覺刷新
除此之外，大廳還承載了另一個重要的展示功能——魔法套裝，而優化后的大廳設計在魔法套裝的展示效果方面會更加突出。