遊戲中的卡片模態皮膚設計【1】—運用案例分析

什麼是卡片模態皮膚

1）什麼是模態皮膚

模態皮膚是從屬於應用程式主視窗的圖形控制元素。它建立了一個模式——禁用主視窗但保持主視窗可見（主視窗作為背景，選單、彈窗、二次確認等覆蓋在上一層），通常可見的是必要資訊內容，使用者與視窗進行互動才能返回主視窗。所以，是否強制使用者對模態皮膚進行互動操作，是區分模態皮膚與非模態皮膚直接且有效方法之一。

常用的模態皮膚大概分為以下幾類：

• 全屏模態皮膚
• 半屏模態皮膚（專注螢幕下半部分的分層內容，多應用於豎屏網際網路產品中）
• 彈出皮膚
• 二次確認、警告提醒皮膚
• 浮層皮膚
• 對話方塊皮膚
• ...
  

2）什麼是卡片模態皮膚

模態皮膚拉起時，原有的介面會配合微動效有空間縱深效果，變為背景，顯示dis態防止使用者與原有介面發生互動行為。此時上層模態皮膚可以通過滑動操作開關，更加適用於單手操作。原有和現有的介面可理解為兩個“卡片”，也就是兩個卡片層級的相互關係，即為“卡片模態皮膚”。

iOS13採用了大量的卡片模態皮膚設計，尤其廣泛應用於系統郵件、日曆、通訊錄、Apple Music、資訊Animoji等自帶應用中，優化iOS13使用者體驗。



卡片模態皮膚特點

卡片模態皮膚特點——

“阻止玩家做其他事情同時減輕玩家阻斷感知”

1）介面層級上：

在主視窗操作後出現視窗覆蓋到主視窗上層，主視窗不可操作，玩家集中操作在模態皮膚。

模態皮膚要素：卡片模態皮膚和所有彈窗在操作要素上一致，都需要包含關閉彈窗方式、承載體、Button、Title幾個要素，有從主視窗展開卡片模態皮膚的方式，也必然需要有關閉模態皮膚的方式。

模態皮膚出現和關閉：出現分為按鈕操作和卡片展開兩種情況。無論按鈕操作還是卡片展開出現時，模態皮膚從下自上滑動出現同時主視窗配合微動效有空間縱深效果後退到下一層級，關閉時手勢向下滑動，自上而下滑動消失。在卡片展開時，模態皮膚配合卡片位置、大小有展開放大動效主視窗有空間縱深效果後退到下一層級，關閉時手勢向下縮小回到主視窗卡片，更符合“從哪來到哪去”的認知。


這裡讓我想到看過的一篇文章《打造直覺設計》，主要一個觀點是“使用者過去的經驗分為物理環境經驗和文化環境經驗，所有直覺都與這兩種經驗息息相關”，我非常贊同這個觀點，因為好的設計是不需要任何引導使用者就可以憑藉直覺上手實操，容錯率非常低，互動設計也是如此。卡片模態皮膚這個互動方式，讓我想到幾乎每個人小時候都玩過的一個摺紙遊戲——東南西北，問對方想要哪個，是橫是豎多少次按照對方說的做最後對方選的什麼就是什麼。這個遊戲橫豎展開收起的過程類比模態皮膚與主視窗的關係，他們是相關聯反覆的，並且玩家明確知道怎麼展開就怎麼收起，卡片模態皮膚層級關係使用者符合玩家的直覺設計，展開收起的方式也不需要引導，雖然沒有關閉按鈕玩家憑直覺也可以快速知道如何展開收起。


2）玩家操作行為上：

暫停主視窗的操作，集中到模態皮膚上；同時降低玩家容錯成本和心理。

當玩家操作卡片模態視窗時，通常有不可逆操作和可逆操作有兩種情況。不可逆操作情況有進入主視窗前的必要互動行為，不可跳過不可取消，這種情況下把玩家注意力都集中到模態皮膚上，不可操作主視窗資訊內容。


可逆操作情況有檢視詳情，展開卡片，編輯內容等，出現模態皮膚時與不可逆操作一致，中斷主視窗的操作，把玩家注意力都集中到模態皮膚上。不同的是可逆操作玩家是可能犯錯的，如果出現完全阻斷彈窗和全屏跳轉，給玩家犯了比較嚴重錯誤的感受，懷疑自己是不是笨。因為模態皮膚減輕阻斷感，所以同時也降低玩家犯錯成本和心理感知。《設計心理學九：人會犯錯》一章中有提到“人都會犯錯，建立一個防止人們犯錯的系統是不可能的。應該假設人們總會出錯，並且犯錯後最好的錯誤提示就是沒有提示”。


3）視覺表現上：

通過遮擋覆蓋吸引玩家視覺聚焦，主視窗視覺推後明確不可操作。

視覺表現主要分為介面美術設計和動效表現。遊戲互動設計師主要負責視覺的跟進稽核，想讓視覺設計師達到想要的效果，互動設計效果圖需要明確表現二者的層級關係並在美術需求文件中標註說明關係（理論了好一會偶爾實操下，不要走開，更有實操在後面哦~）。主要目標就是明確卡片模態皮膚與主視窗的關係，在展開模態皮膚時，一定要明確讓玩家知道此過程不可操作，同時玩家回到主視窗時，也要通過美術表達和微動效融合明確表達現在視覺焦點和操作已迴歸主介面。


4）擴充套件性極強：

收起卡片模態皮膚回到主視窗後，依然保留快捷展開模態皮膚方式；分層介面變為模態彈窗等。

iOS13的郵件app使用者進入後新建郵件，但是在寫郵件同時想進行檢視收件箱等操作，此時下滑回到主視窗，新建郵件的展開模態皮膚快捷方式現在在主視窗的介面底部，方便玩家多工同時進行。iOS13的很多app使用者分享主視窗操作時，點選分享按鈕操作後出現半屏分模態皮膚，手勢向上滑動會變為卡片模態皮膚。

可見卡片模態皮膚的擴充套件性、多互動形式融合性都非常強，可結合第五部分“卡片模態皮膚遊戲未來擴充套件思考”思考來看。

遊戲使用場景案例

選擇了兩個比較喜歡的遊戲，思考了一下卡片模態皮膚可以應用的場景：

1）《一起來捉妖》我的陣容

《一起來捉妖》是騰訊的一款AR探索遊戲，以“捉妖”為核心玩法。在遊戲中，玩家可以通過AR功能抓捕身邊的妖靈，對它們進行培養，完成遊戲中PVE/PVP對戰、展示、交易等諸多功能。陣容是對於PVE/PVP玩家非常重要的功能，在這裡組建/調整自己的陣容，互動設計目標必然是在讓玩家可以在最短時間內不停調整/檢視/組建陣容。

目前遊戲中的方案主要操作的是採用全屏介面，需要檢視陣容詳情和返回到陣容介面都是全屏跳轉，阻斷感略強，但顯而易見的好處是更多手機螢幕區域可以用來專注目前操作。因為返回在介面左上角，玩家最多可組建50個陣容，在陣容主視窗和陣容詳情操作兩個介面反覆檢視調整返回，這是豎屏遊戲對於單手操作玩家不夠友好，在切換之間花費了過多的操作和阻斷成本，遊戲沉浸感和功能性的目標都有待優化和提升。


使用卡片模態皮膚互動框架提升的體驗：

• 層級明確，主任務流和補充操作的層級關係玩家易理解；
• 不用再操作陣容時的介面下半部分割槽域和離手指最遠的左上角返回按鈕單手繁雜操作了，手指下滑即回到主任務流，此功能的操作區域僅集中在介面下半部分，大大降低操作成本和提高任務效率；
• 之前玩家返回時提示是否儲存，使用卡片模態皮膚如果有改動又沒有儲存配置下滑時出現動作浮窗提示是否儲存，此時操作和視覺都集中於介面下方。
• 以上三點提升的體驗，在玩家編輯的陣容非常多，集中調整眾多卡組時會有明顯提升體驗的感受。
  

2）《跑跑卡丁車》商城購買流程

《跑跑卡丁車》是一款休閒類賽車競速遊戲。商城是休閒類遊戲開發者主要盈利途徑之一，所以跑跑的商城設計尤為重要。設計目標主要是最大限度展示架車和車手等道具，視覺衝擊力極強，並且貫穿購買流程的始終，最大程度刺激玩家的購買慾望。

目前遊戲中的方案從主介面進入商城，以及商城的展示視覺效果、互動體驗都設計的非常棒，也達到了刺激玩家購買慾望的目標。但是在商品詳情介面開始購買流程後，購買彈窗、二次確認彈窗、充值提示彈窗三層直接疊加，雖然用了背景模糊的效果，但是依然可以感受到層級的厚重和複雜。設計目標有個是商品的展示貫穿購買流程的始終，這裡三層彈窗把展示介面完全遮擋，在關鍵刺激玩家消費慾望的瞬時操作時，仍有優化空間。購買流程前都設計的非常好，玩家從欣賞展示商品到購買流程，刺激玩家的消費心理曲線是逐漸上升——迅速下降的過程。


使用卡片模態皮膚互動框架提升的體驗：

• 在購買流程時依然保持刺激玩家消費，讓玩家消費的心理曲線是逐漸上升的過程。在商品詳情介面點選購買操作後，商品展示場景由中間區域左移部分隱藏詳細資訊僅展示商品視覺效果但不可操作，出現半屏模態皮膚為購買操作。這樣設計的目的是玩家在購買流程、下定決心氪金時依然感受到這個商品對他的衝擊力。
• 通過手勢操作簡化複雜堆疊層級，給單一選項減少玩家思考。從下面互動設計圖可以看出，從商城介面、商品詳情介面到購買介面、二次確認介面、充值提示介面所有的操作按鈕都只有一個並且同一位置，讓玩家在購買時更加流暢操作，最高效完成目標，獲得心愛物品。
• 明確層級關係。在這個複雜的操作提示中，下圖設計並沒有簡化流程，但是明確了層級關係。玩家最終會到達充值提示彈窗，此時明確看到有三層彈窗需要操作，通過右滑的方式關閉彈窗，此時玩家的手指操作範圍依然是介面的右下角區域。
• 以上三點提升的體驗，在玩家對多個商品反覆糾結是否購買的時候尤其體現出來。
  

來源：GameTube
原文：https://mp.weixin.qq.com/s/xagtIcaXvi1Ck4cqQd6HKA