作者對(duì)原型設(shè)計(jì)中的常用的一些通用元件進(jìn)行了場(chǎng)景和規(guī)范整理，主要分為信息欄Bars篇、視圖Views篇、控件Controls篇三章。本章主要介紹Views篇，但源文件已涵蓋所有篇組件，后續(xù)還會(huì)繼續(xù)更新迭代。

百度網(wǎng)盤(pán)下載地址：https://pan.baidu.com/s/1M6OEK-adzNyNHyjIaSq6OA

一、遮罩（Mask）

1. 使用場(chǎng)景

為突出彈窗/浮層或其它業(yè)務(wù)信息時(shí)伴隨顯示。

2. 交互說(shuō)明【點(diǎn)擊事件】

1. 遮罩出現(xiàn)時(shí)，應(yīng)禁止遮罩層以下的所有操作；
2. 可設(shè)置手動(dòng)關(guān)閉，點(diǎn)擊遮罩區(qū)域或點(diǎn)擊Android系統(tǒng)返回鍵后伴隨主體信息一同快速消失（遮罩消失無(wú)需動(dòng)效）；
3. 可設(shè)置跟隨主體信息一同消失（遮罩消失無(wú)需動(dòng)效）。

二、動(dòng)作面板（Action Sheets)

1. 使用場(chǎng)景

由用戶(hù)操作后觸發(fā)的一種特定的模態(tài)彈出框 ，呈現(xiàn)一組與當(dāng)前情境相關(guān)的兩個(gè)或多個(gè)選項(xiàng)。用戶(hù)可以使用Action Sheet啟動(dòng)某個(gè)任務(wù)，或者確認(rèn)是否執(zhí)行某個(gè)可能具有破壞性的操作。

2. 混用區(qū)分【與Alert的區(qū)分】

Action Sheet是可以連續(xù)彈出的，例如第一個(gè)Action Sheet中選擇刪除，第二個(gè)Action Sheet中確認(rèn)刪除。此外，如果危險(xiǎn)的情況并非由用戶(hù)主動(dòng)發(fā)起或者嚴(yán)重影響系統(tǒng)本身的完整性，應(yīng)該使用Alert（這是Alert和Aciton Sheet最大的區(qū)別）。

3. 原生規(guī)范【iOS Human Interface Guidelines】

提供完成一項(xiàng)任務(wù)的多個(gè)選項(xiàng)：Action Sheet能承載較多內(nèi)容，而且僅覆蓋當(dāng)前屏幕的一部分，即不會(huì)對(duì)用戶(hù)心流有很大的干擾，操作也非常便捷，適合呈現(xiàn)與當(dāng)前任務(wù)相關(guān)的多個(gè)選項(xiàng)。

危險(xiǎn)操作二次確認(rèn)：用戶(hù)在使用過(guò)程中，出現(xiàn)刪除、未保存退出等可能產(chǎn)生潛在風(fēng)險(xiǎn)的行為時(shí)，應(yīng)當(dāng)彈出Action Sheet，讓用戶(hù)有機(jī)會(huì)停下來(lái)充分考慮當(dāng)前操作可能導(dǎo)致的危險(xiǎn)結(jié)果，并將危險(xiǎn)操作用紅色標(biāo)注，為他們提供其它替代的安全選項(xiàng)。

不同屏幕尺寸的呈現(xiàn)樣式：在iPhone屏幕上，為了便于單手持握時(shí)操作，Action Sheet通常占據(jù)屏幕底部區(qū)域。在屏幕較大的iPad上，如果繼續(xù)顯示在屏幕底部，注意力切換和手指移動(dòng)的路徑會(huì)很長(zhǎng)，頻繁使用會(huì)比較累，因此iPad的Action Sheet通常在觸發(fā)區(qū)域附近以Popover（彈出式氣泡）呈現(xiàn)。

關(guān)閉Action Sheet可以通過(guò)點(diǎn)擊“取消”按鈕和空白區(qū)域，Action Sheet以Popover呈現(xiàn)時(shí)不需要“取消”按鈕，因?yàn)辄c(diǎn)擊寬廣的空白區(qū)域關(guān)閉更方便。

4. 原生規(guī)范【Google Material Guidelines】

安卓原生未提供該控件。

三、活動(dòng)面板（Activity Sheets)

1. 使用場(chǎng)景

用于提供如復(fù)制、喜愛(ài)或分享之類(lèi)的任務(wù)操作。

2. 原生規(guī)范【iOS Human Interface Guidelines】

1. 系統(tǒng)在活動(dòng)面板中內(nèi)置了打印、消息和Airplay等功能，功能排序不可更改，但在不需要的場(chǎng)景中可以隱藏這些內(nèi)置功能；
2. 確保內(nèi)容與上下文能夠匹配，當(dāng)標(biāo)題過(guò)長(zhǎng)時(shí)iOS會(huì)自動(dòng)縮小文本，甚至截?cái)嗨?，因此?yīng)保持標(biāo)題的簡(jiǎn)潔，并避免在標(biāo)題中使用您的公司或產(chǎn)品名稱(chēng)。

3. 原生規(guī)范【Google Material Guidelines】

安卓原生未提供該控件。

四、警告對(duì)話(huà)框（Alert Dialogs)

1. 使用場(chǎng)景

是一種緊急的打擾（提示），用以告知用戶(hù)他的應(yīng)用或設(shè)備某種狀態(tài)的重要信息，并且常常需要其來(lái)進(jìn)行操作。

2. 混用區(qū)分【與Snackbars的區(qū)分】

1. Alert Dialog是操作的確認(rèn)，為操作的“最后一步”，只有當(dāng)用戶(hù)點(diǎn)擊了“確認(rèn)”按鈕這個(gè)操作才算是真正完成；
2. snackbars是當(dāng)用戶(hù)真正操作完成后才出現(xiàn)的提示信息，其信息的重要程度比警告框要低。另外，在很多情況下，snackbars會(huì)有“撤銷(xiāo)”按鈕，留給用戶(hù)反悔的余地。

3. 原生規(guī)范【iOS Human Interface Guidelines】

包含的元素：標(biāo)題（必選）、描述信息（可選）、輸入框（可選）、按鈕（必選）。同時(shí)，警告框的樣式都是磨砂效果的圓角白框，不可更改。

盡量少使用：Alert Dialog只用于重要的場(chǎng)景，如購(gòu)買(mǎi)、刪除、報(bào)錯(cuò)?？刂艫lert Dialog的出現(xiàn)頻次可確保它能夠引起用戶(hù)足夠的重視，一定要確保每一個(gè)警告框都提供重要的信息和有用的操作選項(xiàng)。

4. 原生規(guī)范【Google Material Guidelines】

大多數(shù)的警告框應(yīng)該都是沒(méi)有標(biāo)題的，用一到兩句描述一個(gè)告知決定的文案。在寫(xiě)這句文案時(shí)，有兩點(diǎn)需要注意：

使用疑問(wèn)句，例如：“刪除這個(gè)對(duì)話(huà)？”

文案與警告框中的按鈕文案要相關(guān)聯(lián)。按鈕的文案，應(yīng)告知用戶(hù)操作的結(jié)果，盡量避免使用“是/否”這樣的文案。

對(duì)于有標(biāo)題的警告框，“只在高風(fēng)險(xiǎn)的操作時(shí)使用（如，操作將導(dǎo)致網(wǎng)絡(luò)失去連接）”。并且，用戶(hù)通過(guò)標(biāo)題和操作按鈕，就應(yīng)該能明白是在做什么選擇。

對(duì)于標(biāo)題，需注意以下兩點(diǎn)：

• 使用詢(xún)問(wèn)操作的疑問(wèn)句，例如：“清除USB存儲(chǔ)內(nèi)容？”
• 避免道歉或者有歧義的問(wèn)句，例如：“警告！”、“你確定嗎？（Are you sure?）”

五、工具提示（Tooltips)

1. 使用場(chǎng)景

針對(duì)具有交互性的信息進(jìn)行反饋（信息主要是圖形而非文本）。

2. iOS自定義功能

iOS無(wú)此原生控件，但可通過(guò)自定義Popover的形式實(shí)現(xiàn)。

1. 滿(mǎn)足不同要求的初始化方法（四個(gè)) ;
2. 可選不同的箭頭方向（上、下、左、右）;
3. 字體可自定義 ;
4. 字體顏色可自定義 ;
5. 背景顏色可自定義 ;
6. 背景寬度自定義 ;
7. 陰影，陰影的顏色可自定義。

3. 原生規(guī)范【Google Material Guidelines】

1. 工具提示是當(dāng)用戶(hù)懸停在，聚焦或觸摸元素時(shí)顯示的文本標(biāo)簽；
2. 工具提示在元素被激活時(shí)識(shí)別元素。 它們可能包含關(guān)于其功能的簡(jiǎn)要幫助文本。 例如，它們可以包含關(guān)于可操作圖標(biāo)的文本信息；
3. 工具提示標(biāo)簽不接收輸入焦點(diǎn)；
4. 工具提示不顯示豐富的信息，包括圖像和格式化的文本。

六、透明指示層（HUD/Toast)

1. 使用場(chǎng)景

用于提示用戶(hù)操作結(jié)果的反饋方式，特點(diǎn)是簡(jiǎn)單、小巧、對(duì)用戶(hù)的打擾小。

2. 混用區(qū)分【Toast與HUD的區(qū)別】

1. HUD出現(xiàn)在屏幕的中央，Toast在底部；
2. HUD可以由icon，Toast不能有icon，只能用文字；
3. HUD一般是毛玻璃透明，Toast一般是灰黑或者黑色半透明；
4. HUD中內(nèi)容可以變化（如調(diào)節(jié)音量時(shí)），Toast中內(nèi)容不可變化。

3. 原生規(guī)范【iOS Human Interface Guidelines】

建議慎用該提示方式，而建議潛移默化地將狀態(tài)改變或者其它類(lèi)型的反饋放進(jìn)你的界面中。理想的情況是：用戶(hù)可以不用進(jìn)行操作或者被打擾，就能得知重要的信息。

4. 原生規(guī)范【Google Material Guidelines】

Toast優(yōu)先適用于系統(tǒng)提示。它也在屏幕下方出現(xiàn)，但是不能被劃出屏幕外（而被清除）。

七、滾動(dòng)視圖（Scroll Views）

1. 使用場(chǎng)景

用戶(hù)幫助用戶(hù)瀏覽大于可見(jiàn)區(qū)域的內(nèi)容，如：圖像或文檔。當(dāng)人使用滑動(dòng)、點(diǎn)擊、拖拽、捏合等手勢(shì)時(shí)，滾動(dòng)視圖會(huì)跟隨手勢(shì)，以一種感覺(jué)自然的方式顯示或縮放視圖。

2. 原生規(guī)范【iOS Human Interface Guidelines】

1. 當(dāng)用戶(hù)使用滾動(dòng)視圖時(shí)，會(huì)顯示瞬間滾動(dòng)指示器，還可以將滾動(dòng)視圖配置為分頁(yè)模式進(jìn)行操作，其中滾動(dòng)顯示全新的內(nèi)容頁(yè)面，而不是在當(dāng)前頁(yè)面上移動(dòng)。
2. 適當(dāng)支持縮放行為。需要注意變焦情況，設(shè)置合理的最大和最小的刻度值，比如放大單個(gè)字符到全屏幕通常是沒(méi)有任何意義的。
3. 當(dāng)滾動(dòng)視圖處于分頁(yè)模式時(shí)，需顯示有多少頁(yè)可瀏覽、屏幕還有多少內(nèi)容可查看的指示控件。
4. 禁止在滾動(dòng)視圖內(nèi)放置另一個(gè)滾動(dòng)視圖，這樣會(huì)讓用戶(hù)難以理解。
5. 如果要在一個(gè)頁(yè)面放置兩個(gè)滾動(dòng)視圖，需確保兩個(gè)視圖的滑動(dòng)方向有所區(qū)分，以便于用戶(hù)進(jìn)行理解。

3. 原生規(guī)范【Google Material Guidelines】

Google Material Guidelines中將Scroll Views作為WEB開(kāi)發(fā)控件進(jìn)行說(shuō)明，但實(shí)際操作感受與iOS規(guī)范無(wú)異。歡迎對(duì)該方面有了解的朋友進(jìn)行補(bǔ)充。

相關(guān)閱讀

Axure常用元件及使用規(guī)范：Bars篇

文由 @愚者秦?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議