來源:優設 作者:UEDC
在設計iOS版和Android版的APP過程中會涉及到很多組件。不同的場景使用的組件也不一樣。這篇文章講述六組常見的相似組件的區別和用法。
警示框(alert)和底部操作列表(action sheet)
標簽欄(tab bar)和工具欄(tool bar)
底部動作條(bottom sheets)和菜單(menus)
選擇器(selector)和底部操作列表(action sheet)
下拉菜單(drop-down menu)、底部操作列表(action sheet)及活動視圖控制器(activity view controller)
snackbar和toast
一. 警示框（Alert）和底部操作列表（Action Sheet）
警示框是傳達應用或設備某些狀態的信息，并且常常需要用戶來點擊操作。
底部操作列表展示了與用戶觸發的操作直接相關的一系列選項，包含兩個或以上的按鈕。
一般含有三種以上操作使用底部操作列表，一種或者兩種操作使用警示框或底部操作列表。
例如：iOS原生郵箱，點擊「更多」出現底部操作列表，展示四種操作選項。推特的退出登錄需要二次確認，使用的是警示框。
對于警示框(alert)和底部操作列表(action sheet)的困惑多用于二次確認上，例如微信的退出登錄使用的是底部操作列表，而qq用的是警示框。
警示框(alert)和底部操作列表(action sheet)的區別于用法：
警示框側重提示文字，進而表示提示文字的內容優先級較高;
底部操作列表側重選擇按鈕，進而表示選擇按鈕的功能優先級較高;
按鈕為0-2個時，建議使用警示框;
按鈕為2-n個時，建議使用底部操作列表;
當然有的場景需要強阻斷操作，例如提示沒有網絡，版本升級，這種情況需要使用警示框;
具體情況可根據產品對待。例如微信退出登錄用的是底部操作列表，阻斷性不強，對用戶的打擾程度較低。
二. 標簽欄（Tab bar)和工具欄（Tool bar）
標簽欄：讓用戶在不同的子任務、視圖和模式中進行切換。
工具欄：放置著用于操作當前屏幕中各對象的組件，在iPhone上，工具欄始終位于屏幕底部，而在iPad上則有可能出現在頂部。
例如：app store中底部的標簽欄和iOS原生郵件詳情的底部工具欄。
標簽欄(tab bar)和工具欄(tool bar)的區別：
標簽欄讓用戶在不同視圖切換，例如app store 點擊游戲tab，進入游戲內容的界面，所以涉及到視圖切換是標簽欄。
工具欄是對當前界面內容的操作，例如iOS原生郵件點擊工具欄中的刪除，則刪除當前郵件。所以涉及到對當前頁面的操作是工具欄。
三. 底部動作條（Bottom sheets）和菜單（Menus）
底部動作條：一個從屏幕底部邊緣向上滑出的一個面板，使用這種方式向用戶呈現一組功能。底部動作條提供三個或三個以上的操作需要提供給用戶選擇，并且不需要對操作有額外解釋的情景。
底部動作條可以是列表樣式的，也可以是宮格樣式。
菜單：菜單是臨時的一張紙(paper)，由按鈕(button)、動作(action)、點(pointer)或者包含至少兩個菜單項的其他控件觸發。
每一個菜單項是一個離散的選項或者動作，并且能夠影響到應用、視圖或者視圖中選中的按鈕。
