Axure常用元件及使用規范:Views篇(附源文件下載)
作者對原型設計中的常用的一些通用元件進行了場景和規范整理,主要分為信息欄Bars篇、視圖Views篇、控件Controls篇三章。本章主要介紹Views篇,但源文件已涵蓋所有篇組件,后續還會繼續更新迭代。
百度網盤下載地址:https://pan.baidu.com/s/1M6OEK-adzNyNHyjIaSq6OA
一、遮罩(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只用于重要的場景,如購買、刪除、報錯??刂艫lert 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規范無異。歡迎對該方面有了解的朋友進行補充。
相關閱讀
文由 @愚者秦?原創發布于人人都是產品經理,未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
作者大大能否發一下解壓密碼到郵箱1258887527@qq.com呢?謝謝
解壓密碼:yuzheqin
作者大大能否發一下解壓密碼到郵箱1115066740@qq.com呢?謝謝
作者大大能否發一下解壓密碼到郵箱462522978@qq.com呢?謝謝
收到了,感謝作者大大 ??