作者對原型設計中的常用的一些通用元件進行了場景和規範整理，主要分為信息欄Bars篇、視圖Views篇、控件Controls篇三章。本章主要介紹Views篇，但源文件已涵蓋所有篇組件，後續還會繼續更新迭代。
一、遮罩（Mask）
1. 使用場景
為突出彈窗/浮層或其它業務信息時伴隨顯示。
2. 交互說明【點擊事件】
- 遮罩出現時，應禁止遮罩層以下的所有操作；
- 可設置手動關閉，點擊遮罩區域或點擊Android系統返回鍵後伴隨主體信息一同快速消失（遮罩消失無需動效）；
- 可設置跟隨主體信息一同消失（遮罩消失無需動效）。
二、動作面板（Action Sheets)
1. 使用場景
由用戶操作後觸發的一種特定的模態彈出框 ，呈現一組與當前情境相關的兩個或多個選項。用戶可以使用Action Sheet啟動某個任務，或者確認是否執行某個可能具有破壞性的操作。
2. 混用區分【與Alert的區分】
Action Sheet是可以連續彈出的，例如第一個Action Sheet中選擇刪除，第二個Action Sheet中確認刪除。此外，如果危險的情況並非由用戶主動發起或者嚴重影響系統本身的完整性，應該使用Alert（這是Alert和Aciton Sheet最大的區別）。
3. 原生規範【iOS Human Interface Guidelines】
提供完成一項任務的多個選項：Action Sheet能承載較多內容，而且僅覆蓋當前屏幕的一部分，即不會對用戶心流有很大的干擾，操作也非常便捷，適合呈現與當前任務相關的多個選項。
危險操作二次確認：用戶在使用過程中，出現刪除、未保存退出等可能產生潛在風險的行為時，應當彈出Action Sheet，讓用戶有機會停下來充分考慮當前操作可能導致的危險結果，並將危險操作用紅色標註，為他們提供其它替代的安全選項。
不同屏幕尺寸的呈現樣式：在iPhone屏幕上，為了便於單手持握時操作，Action Sheet通常佔據屏幕底部區域。在屏幕較大的iPad上，如果繼續顯示在屏幕底部，注意力切換和手指移動的路徑會很長，頻繁使用會比較累，因此iPad的Action Sheet通常在觸發區域附近以Popover（彈出式氣泡）呈現。
關閉Action Sheet可以通過點擊“取消”按鈕和空白區域，Action Sheet以Popover呈現時不需要“取消”按鈕，因為點擊寬廣的空白區域關閉更方便。
4. 原生規範【Google Material Guidelines】
安卓原生未提供該控件。
三、活動面板（Activity Sheets)
1. 使用場景
用於提供如複製、喜愛或分享之類的任務操作。
2. 原生規範【iOS Human Interface Guidelines】
- 系統在活動面板中內置了打印、消息和Airplay等功能，功能排序不可更改，但在不需要的場景中可以隱藏這些內置功能；
- 確保內容與上下文能夠匹配，當標題過長時iOS會自動縮小文本，甚至截斷它，因此應保持標題的簡潔，並避免在標題中使用您的公司或產品名稱。
3. 原生規範【Google Material Guidelines】
安卓原生未提供該控件。
四、警告對話框（Alert Dialogs)
1. 使用場景
是一種緊急的打擾（提示），用以告知用戶他的應用或設備某種狀態的重要信息，並且常常需要其來進行操作。
2. 混用區分【與Snackbars的區分】
- Alert Dialog是操作的確認，為操作的“最後一步”，只有當用戶點擊了“確認”按鈕這個操作才算是真正完成；
- snackbars是當用戶真正操作完成後才出現的提示信息，其信息的重要程度比警告框要低。另外，在很多情況下，snackbars會有“撤銷”按鈕，留給用戶反悔的餘地。
3. 原生規範【iOS Human Interface Guidelines】
包含的元素：標題（必選）、描述信息（可選）、輸入框（可選）、按鈕（必選）。同時，警告框的樣式都是磨砂效果的圓角白框，不可更改。
儘量少使用：Alert Dialog只用於重要的場景，如購買、刪除、報錯。控制Alert Dialog的出現頻次可確保它能夠引起用戶足夠的重視，一定要確保每一個警告框都提供重要的信息和有用的操作選項。
4. 原生規範【Google Material Guidelines】
大多數的警告框應該都是沒有標題的，用一到兩句描述一個告知決定的文案。在寫這句文案時，有兩點需要注意：
使用疑問句，例如：“刪除這個對話？”
文案與警告框中的按鈕文案要相關聯。按鈕的文案，應告知用戶操作的結果，儘量避免使用“是/否”這樣的文案。
對於有標題的警告框，“只在高風險的操作時使用（如，操作將導致網絡失去連接）”。並且，用戶通過標題和操作按鈕，就應該能明白是在做什麼選擇。
對於標題，需注意以下兩點：
- 使用詢問操作的疑問句，例如：“清除USB存儲內容？”
- 避免道歉或者有歧義的問句，例如：“警告！”、“你確定嗎？（Are you sure?）”
五、工具提示（Tooltips)
1. 使用場景
針對具有交互性的信息進行反饋（信息主要是圖形而非文本）。
2. iOS自定義功能
iOS無此原生控件，但可通過自定義Popover的形式實現。
- 滿足不同要求的初始化方法（四個) ;
- 可選不同的箭頭方向（上、下、左、右）;
- 字體可自定義 ;
- 字體顏色可自定義 ;
- 背景顏色可自定義 ;
- 背景寬度自定義 ;
- 陰影，陰影的顏色可自定義。
3. 原生規範【Google Material Guidelines】
- 工具提示是當用戶懸停在，聚焦或觸摸元素時顯示的文本標籤；
- 工具提示在元素被激活時識別元素。 它們可能包含關於其功能的簡要幫助文本。 例如，它們可以包含關於可操作圖標的文本信息；
- 工具提示標籤不接收輸入焦點；
- 工具提示不顯示豐富的信息，包括圖像和格式化的文本。
六、透明指示層（HUD/Toast)
1. 使用場景
用於提示用戶操作結果的反饋方式，特點是簡單、小巧、對用戶的打擾小。
2. 混用區分【Toast與HUD的區別】
- HUD出現在屏幕的中央，Toast在底部；
- HUD可以由icon，Toast不能有icon，只能用文字；
- HUD一般是毛玻璃透明，Toast一般是灰黑或者黑色半透明；
- HUD中內容可以變化（如調節音量時），Toast中內容不可變化。
3. 原生規範【iOS Human Interface Guidelines】
建議慎用該提示方式，而建議潛移默化地將狀態改變或者其它類型的反饋放進你的界面中。理想的情況是：用戶可以不用進行操作或者被打擾，就能得知重要的信息。
4. 原生規範【Google Material Guidelines】
Toast優先適用於系統提示。它也在屏幕下方出現，但是不能被劃出屏幕外（而被清除）。
七、滾動視圖（Scroll Views）
1. 使用場景
用戶幫助用戶瀏覽大於可見區域的內容，如：圖像或文檔。當人使用滑動、點擊、拖拽、捏合等手勢時，滾動視圖會跟隨手勢，以一種感覺自然的方式顯示或縮放視圖。
2. 原生規範【iOS Human Interface Guidelines】
- 當用戶使用滾動視圖時，會顯示瞬間滾動指示器，還可以將滾動視圖配置為分頁模式進行操作，其中滾動顯示全新的內容頁面，而不是在當前頁面上移動。
- 適當支持縮放行為。需要注意變焦情況，設置合理的最大和最小的刻度值，比如放大單個字符到全屏幕通常是沒有任何意義的。
- 當滾動視圖處於分頁模式時，需顯示有多少頁可瀏覽、屏幕還有多少內容可查看的指示控件。
- 禁止在滾動視圖內放置另一個滾動視圖，這樣會讓用戶難以理解。
- 如果要在一個頁面放置兩個滾動視圖，需確保兩個視圖的滑動方向有所區分，以便於用戶進行理解。
3. 原生規範【Google Material Guidelines】
Google Material Guidelines中將Scroll Views作為WEB開發控件進行說明，但實際操作感受與iOS規範無異。歡迎對該方面有了解的朋友進行補充。
閱讀更多 人人都是產品經理 的文章
