什么是卡片模態面板

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）《跑跑卡丁車》商城購買流程

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

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

使用卡片模態面板交互框架提升的體驗：
?

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

總結

以上是生活随笔為你收集整理的游戏中的卡片模态面板设计【1】—运用案例分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。