創意Game可用性微交互設計—視覺空間微交互設計

繼上篇《創意Game交互可用性設計》我們從區間操作出發。述寫Game UI與交互息息相關的故事。以此方向不斷深入研究結果讓我欣喜若狂?，F在我們再述那些觸動內心的可用性設計。這里簡稱：微交互設計。

微交互表現對我們的設計有什么改觀?在早些日子，我們去了一次日本，在旅行團里，我聽到導游一句話并隨手記錄下來：

不要造成使用者的困擾。

完美釋解了這個問題。它的改變是流暢沉浸式體驗過程，不讓使用者有困擾。

良性的引導(半山腰的山楂果)

在理解微交互定義后，我已經迫不及待想和您分享我的研究和見解。我從事游戲UI工作，之后所描述也將以游戲UI結合實際工作來詳細總結，在游戲上怎樣進行微交互設計?

對于良好高效的執行，來源于我下班后走在路上、站在地鐵上、坐在公交上的生活里。在現在信息化時代里，在下班后看到最多的是和您同行的路人都會拿起手機、平板等設備在操作，在這樣的群體里對我來說欣喜若狂。

在上期有提到有些游戲公司會專門去找一些玩家進行實用性測試。相對應自然條件觀察，受邀的玩家在固定的空間中進行測試還是有些緊張和手足無措。有時候這樣的測試反而是無用功，或者收獲的信息和實際信息也會有所區別。

在自然條件觀察下，您可以看到玩家不同的操作及肢體表現。并且將此記錄下來，進行自己項目的可用性微交互測試。

當然在自然條件觀察下，您需要做到如下幾點總結：

(1)玩家慣性操作方式(游戲操作，界面可根據上期《可用性設計—區間操作》基礎上測試)

(2)玩家操作頻率(點擊按鈕等信息是否存在困惑)

(3)玩家停留時間(視覺移動信息瀏覽)

綜合以上三點，多次對周身玩家進行觀察，并進行長時間的數據整理分析。

隨時間的推移，這些數據分析庫會不斷增長您在UI設計微交互潛在實用性信息。為什么需要要保持這樣一個好習慣?

它可以讓我們：

(1)提升設計思維和設計思考能力，事半功倍;

(2)解決與策劃、程序溝通成本，讓合作同伴得以信服和認同;

(3)提供工作效率，一切越期的任務將變的不再遙遠。

建立在這樣的數據信息下，在前不久有幸與一位王者榮耀皮膚控玩家，深入交談讓我對游戲設計各方面有了很大的啟發。

玩家：我在思考要不要買個至尊寶，和露娜的紫霞仙子是一對的。

HHang：喜歡就買唄

玩家：這兩個人我都想掐死自己，都不會玩...

HHang：那你還買，不是浪費錢嗎?

玩家：嗯......

HHang：那你就買吧!反正也不貴。

玩家：都是限定不買可惜，買了**

......

偶爾的交流會讓收獲頗豐。交流前這是一個競技游戲，過去也注意到角色皮膚僅限好看想要，還不到癡迷瘋狂收集的地步。交流后，竟然會有玩家為了收集皮膚來玩這個游戲。

玩家：這期出的特效牛叉

HHang：[/攤手]

玩家：一放招王者滿場玫瑰花，[/思考]這是看到現在特效做的最大的一場

HHang：[/大笑]

......

換個角度再看一次對話，玩家對角色原畫的認可。對皮膚的收集癡迷度，對視覺震撼的特效，消費潛在的引導。這些設計都與微交互設計息息相關。(更多次的實踐交流后，采取最精彩的部分給大家做資料)

從數據收集到實踐交流，最后分析總結，過程漫長。卻讓我們了解到更多信息。這種良性微交互引導信息數據會在您接下來設計中起到不可想象的巨大財富。

沉浸視覺設計(田野里的太陽花)

說起視覺空間，總會感覺在感性和理性之間。

感性在自己喜歡這樣的設計，但有時候會降低體驗過程。理性是讓這樣的設計更合理，如何發揮實用性沉浸視覺體驗?研究者們也一直在努力優化這感官。從早期黑白電視、彩色電視、高清電視、3D、曲屏顯示器、VR等每一次的突破感官體驗。

隨著游戲歷史不斷發展，UI的精致細節也會被很多人或急于求成者忽略。通常出現這樣的情況在緊急項目上線和臨時變更需求，設計師沒更多的時間去做設計。我們必須去爭取所需的時間，對制作的UI設計負責，因為細節與視覺并存。如下是早些日子與現在的按鈕視覺對比：

如今生活中我經常遇到相同問題。與程序對接無法完全按照您的設計圖出效果，而這樣的產品出來一般會有60%的內容無法達到您所希望的預期效果。大致總結為三類：視覺差+操作差+交互差=體驗差。

視覺差：色彩與效果不匹配、物件擺放與效果有偏移、空間展示局限

操作差：點擊障礙、信息理解誤差

交互差：效果不融合

作為科技前沿的我們，策劃主推進相關功能與戰略，程序主推進實施與檢測，而美術主推進視覺、交互及細節。從您決定做這份工作起就必須擔負起嚴格把控美術沉浸視覺設計，有時候因為項目的整體原因我們不得不做一些調整，并且在今后的日子不斷去引導他們正確的做法。

瘋狂實驗室(翩翩起舞的小蝴蝶)

即將邁入的2018年以后的日子，這是一個統籌時代。早些日子我與一位日本留學生交談：‘在日本一個以動漫之國著稱的國家里，他們對動畫的要求達到了什么地步?’。他是這樣回答的‘日本人的特點就是以細節取勝，知道怎么挑撥觀眾心中的那根弦!’

在我們的Game UI設計中，我亦覺得這句話一度是我今年隱約走向的一個目標，在之后的不斷設計中，我嚴格要求這細節的表現形式。捫心自問：已經做到最好了嗎?如果您的回答是：沒有。

那么請準備好來看看這些細節的研究。

光之味

隨著時間的變遷，如今我們有更好的方式去表現最貼近自然光的味道。這一改變細節優點無論從視覺到游戲品質都會有一個不小的飛躍。讓我們在特效、表現形式不再局限。

省略設計

如圖，在過去的設計中我們一直保持每個顯示框的最高要求設計，很大的增加設計中視覺空間成本。反向思考，假如這些多余的空間節省出來會怎么樣?是否能對體驗上有所微優化?

顯然，經實戰經驗后這樣做法是可行的。從此告別了多空間的占用。采用省略設計，優點如下：

1.增加了玩家體驗的視覺空間

2.設計擴展人性化

當然省略設計并非完美，它有硬性條件：

1.除去圖標，默認保留4位數寬度;(4位數寬度是最優雅的寬度)

2.必須設置最大限制。

但顯然優點和缺點對比，省略設計方式顯然利大于弊。為此我們再次遇到一個新的問題誕生，如圖，假如我后面還有信息跟隨我應該怎么去展示?

我是這樣去做的，我們只需要告訴程序伙伴：

1.底框跟隨數字長度變化，最低保留4位數寬度，設置最高上線;

2.下一個信息模塊間隔固定20PX寬度依次。

隱藏的切刀殺手

對于大多設計小伙伴來說可能都會遇到一個問題。‘圖片正常，程序代碼運行正常。但是數字或者某圖就是被切了1像素。’

遇到這種神秘的切刀殺手一般會出現三個原因：

1.切圖正常，但圖片的尺寸是單像素導出(這也是為什么我一再注重一定要注意單雙像素的問題之一)

2.切圖正常，是雙像素。原因在于美術字的不固定形式，所以你需要對多切像素的前一個數字單獨手動人為去壓扁1PX，如圖是‘5’的前面多切1PX，您需要把數字‘4’壓縮1PX。

3.除去前兩種情況外，就是適配導致圖片被切，您需要做的是處理數字圖片，把每個的寬度周圍多留1PX，在適配后就可以徹底解決隱藏的切刀殺手。

‘殺雞跺腳’設計習慣(樹蔭下的螞蟻窩)

【一勞永逸】我自己日常生活中遇到的最大的難題莫過于文件到底是否需要規范?并且讓更多的人意識到這樣去做的好處。如圖是我以前與現在的改變：

這樣習慣改正我大概是前一年中旬吧才開始，并且一直保持到至今。為什么要去改變這些習慣?

整理前信息是非常容易丟失的，為此我整理了文件。做為長期閱覽信息，即使逐漸的忘記文件內容，在打開文件后以極低的記憶和時間成本熟悉整體信息。同樣把文件傳送給同事閱覽文件熟悉成本也是極低的。

前些日子，曾經接手一份文件，我需要把相關內容切圖導出，實際我卻花費60分鐘熟悉文件的內容。然后用了20分鐘完成最初的工作。

同時，我把另一份已經整理好的文件內容導出，僅用10分鐘熟悉內容，然后用了20分鐘去完成最初的工作。

可以看到前期工作為后期工作打下基礎。那么多出的30分鐘可以做很多事情，證明了這樣習慣改是正確的。

希望這對您有所幫助。

嚴謹的視覺藝術(不知疲憊的蟬兒)

踏入復雜設計后，想簡單是非常困難的。UI設計是藝術，堅持研究會發現，UI真的不簡單!!!

很榮幸，今年能被很多網友說是：‘毒嘴HHang。’這是大家的認可，我將不甚感激。

而說起來，我也入行才不久，和大家一樣，我們都是站在巨人腳下穿著開襠褲亂跑的小孩。我做UI的心得從今年開始也多數源于去想，想做好。我把每個上線的內容抱以全身心的情愛和關懷。只有這樣我們才能做出好的設計，做出合理的設計，做出更方便更貼人性的設計。

凝練精華(那是幸運的記憶)

總的來說，一個界面不止需要考慮到

1.良性的引導，讓其設計合理

2.沉浸視覺體驗，增強帶入感

3.有味道的光，猶如沐浴在自然中

4.空間合理的省略設計，不局限

5.揭露隱形的弊端問題

6.良好的習慣成就效率的提高

最后用一句在之前看到的話來概括文章‘一切設計都是為用戶方便設計而設計’非常好的一句話。

正如文章開頭所說，交互接觸面真是太廣，包含：版面、顏色、文理、素材、文字、動畫、操作等。而今天分享給大家只是冰山一角。今后也陸續整理顏色、文理等經驗總結給大家，他們將歸屬于《創意Game交互可用性設計》。