3分鐘帶你掌握11個最常用的交互控件
添加時間：2017-05-21 來源：極地設計 瀏覽人數：4159
|
本文將來總結一下各個控件的特點，方便各位更好的理解這些控件。
警告框（Alerts）
彈出框（Popovers，iOS獨有）
簡易菜單（Simple Menus，MD獨有）
模態視圖（Modal Views，iOS獨有）
確認彈框（Confirmation Dialogs，MD獨有）
全屏彈框（Full-screen Dialogs，MD獨有）
上拉菜單（Action Sheets，iOS獨有）
簡易彈框（Simple Dialogs，MD獨有）
活動視圖（Activity Views，iOS獨有）
底板（Bottom Sheets，MD獨有）
提示框（Toasts）
既然各個控件都出過場了，也是時候讓它們合個體了！
彈出類控件比較表格（工具欄不是彈出類控件）
模態
觀察上表，左邊iOS這一欄，從警告框到活動視圖，它們構成了一個聽起來很高大上的詞匯——模態（Modal，不是Model）。iOS設計規范對模態的定義是這樣神兒的：模態讓用戶聚焦到某一個任務、消息或者視圖上而不能做別的事情，直到用戶完成了當前的任務。比如警告框，用戶必須必須選擇警告框里的一個選項，警告框才會消失，否則用戶什么也做不了。這個警告框，就創造了“模態”的體驗。
模態示例1——警告框
模態示例2——模態視圖
關于如何使用模態，蘋果有以下幾點建議：
1.盡量少使用。因為一般來說，人們使用應用的時候不是線性的，不是先做A再做B這樣，是想到啥做啥。而模態是線性的，比較強制。蘋果建議，只在某個任務特別重要，必須引起用戶的注意、或者某個任務必須被完成才能繼續使用應用、或者需要應用需要保存數據時，才使用模態這種設計。
2.使用模態時需要提供一個清楚明白的退出模態的通道。需保證用戶總能知道他們在一個模態中操作后的結果。
3.保持模態里的任務簡單、簡短、單一。如果要在模態視圖中創建帶有多層級關系的任務，一定要慎重！因為用戶很容易忘記它們操作的來龍去脈。
4.只在展示很重要的提示信息時，才考慮使用警告框。最理想的情況是，警告框可以讓用戶采取行動。警告框比較打擾用戶，所以有必要讓用戶覺得這種打擾是值得的。
5.不要在一個彈出框上面使用模態視圖。彈出框之上唯一可以出現的，是警告框（警告框權限真的很大啊！）如果非要在彈出框上面展示一個模態視圖，那么請先讓彈出框關閉，再展現模態視圖。
在Material Design（簡稱為MD，下同）中，沒有與模態相對應的概念。但其實，對話框和底板（除了固定底板），構成的也是模態的體驗。
控件對比總結
不知不覺中，對比了這么多控件。下面我們來總結一下各個控件的特點，方便各位更好的理解這些控件。
警告框
左：iOS警告框； 右：MD警告框
左圖展示了iOS中警告框的幾種形式，右圖展示了MD中警告框的包含元素，其中標題不是必須的。對于警告框，蘋果規范和MD都建議盡量少使用，必須是告知很重要的信息才出現。另外，對于警告框的按鈕，應盡量告知用戶操作的結果，而盡量避免使用“是/否”這樣的文案。
彈出框 & 簡易菜單
左：iOS彈出框； 中、右：MD簡易菜單
對于iOS的彈出框，原本是針對iPad這樣的大屏設備設置的控件，近兩年由于手機屏幕越來越大，也開始應用于手機，需要注意iOS的彈出框是自帶箭頭的，箭頭指向入口。MD的簡易菜單，需要注意菜單沒有箭頭，并且菜單是壓住入口的，這一點經常被用錯。
上拉菜單 & 簡易彈框
左：iOS上拉菜單； 右：MD簡易彈框
上拉菜單和簡易彈框，都是用于提供一些列選項的控件。不同的是，上拉菜單必須包含“取消”按鈕；上拉菜單可用于毀滅性操作（比如“刪除”）等的二次確認。而簡易彈框沒有“取消”按鈕，在選項中可加入頭像、icon等元素，另外還有如上圖中的“添加聯系人”這樣的操作按鈕。
上拉菜單 & 活動視圖 & 模態底板
左：上拉菜單； 中：活動視圖； 右：模態底板
細心的朋友可能已經發現了，這里又出現了上拉菜單。事實上，這里要跟大家總結一下，上面提到的彈出框、上拉菜單、活動視圖、簡易彈框、簡易菜單、模態底板，功能上其實非常相近，都是提供當前環境下的一系列選項。區別是展現形式的不同，還有個別控件有其獨特的功能點。在MD中，有這樣一句介紹：Modal bottom sheets are alternatives to menus, or simple dialogs, and can display deep-linked content from another app（模態底板與簡易彈框、簡易菜單可以互相替換使用，唯一的區別就是模態底板中可以承載深層鏈接）。鐺鐺，模態底板把這一串控件都串起來了。
確認彈框 & 全屏彈框 & 模態視圖
左：MD確認彈框； 中：全屏彈框； 右：模態視圖
確認彈框用于確定一個選項。全屏彈框和模態視圖，可用于較為復雜的任務，它們可以調起別的控件。
感謝您對極地作品的預覽，品牌策劃與設計，形象店設計制作，專注中高端品牌策劃設計，我們更專業，歡迎咨詢微信/手機：13656226579 0512-89169975 www.amhistory.cn
|
|
|
