APP設計中,6種常見組件的差異及應用方式
在APP設計中,有很多組建有著類似的功能和用法。如何正確使用這些組件?這些組件之間有什么區(qū)別?一起看看作者的解讀。
一、警示框(alert)和底部操作列表(actionsheet)
警示框是傳達應用或設備某些狀態(tài)的信息,并且常常需要用戶來點擊操作。底部操作列表展示了與用戶觸發(fā)的操作直接相關的一系列選項,包含兩個或以上的按鈕。一般含有三種以上操作使用底部操作列表,一種或者兩種操作使用警示框或底部操作列表。
對于警示框(alert)和底部操作列表(actionsheet)的困惑多用于二次確認上,例如微信的退出登錄使用的是底部操作列表,而QQ用的是警示框。警示框(alert)和底部操作列表(actionsheet)的區(qū)別在于用法:警示框側重提示文字;進而表示提示文字的內容優(yōu)先級較高;底部操作列表側重選擇按鈕;進而表示選擇按鈕的功能優(yōu)先級較高;按鈕為0-2個時,建議使用警示框;按鈕為2-n個時,建議使用底部操作列表;當然有些場景需要強阻斷操作,例如提示沒有網(wǎng)絡、版本升級等情況需要使用警示框;具體情況可根據(jù)產品對待。例如微信退出登錄用的是底部操作列表,阻斷性不強,對用戶打擾程度較低。
二、標簽欄(tabbar)和工具欄(toolbar)
標簽欄讓用戶在不同子任務、視圖和模式中進行切換。工具欄放置著用于操作當前屏幕中各對象的組件,在iPhone上,工具欄始終位于屏幕底部,而在iPad上則有可能出現(xiàn)在頂部。
例如App Store中底部的標簽欄和iOS原生郵件詳情頁下方工具欄。
標簽欄(tabbar)和工具欄(toolbar)之間存在區(qū)別:標簽欄讓用戶在不同視圖切換,例如App Store點擊游戲tab進入游戲內容界面,則涉及到視圖切換是標簽欄。工具欄則是對當前界面內容進行操作,例如iOS原生郵件點擊工具欄中刪除,則刪除當前郵件。所以涉及到對當前頁面進行操作時要考慮使用工具欄。
三、底部動作條(bottomsheets)和菜單(menus)
底部動作條:一個從屏幕底部邊緣向上滑出一個面板,在這種方式下向用戶呈現(xiàn)一組功能。提供三個或三個以上需要提供給用戶選擇并且不需要對其進行額外解釋的行動選項情境可以采取此方法展現(xiàn)行動選項。可以是宮格樣式也可以是列表樣式。
菜單:菜單由按鈕、動作、點或者包含至少兩個菜單項其他控件觸發(fā)而成立一個臨時紙張(paper)。每一個菜單項都是離散選項或者動作,并且能夠影響到應用、視圖或者視圖中選中按鈕。
例如微信公眾號點擊更多出現(xiàn)了一個底部動作條;微信對話長按出現(xiàn)菜單再點擊退出出現(xiàn)了一個菜單。
總結下來:
- 如果只有兩個或更少數(shù)量行動選項可考慮采取菜單(Menu)或者提示框替代。
- 針對長按情境大多數(shù)采取菜單(menu)
四、選擇器和底部動作條
針對互斥性單項選擇需求采取選擇器(Selector),好處在于來回切換確定同時由于滾輪式滾動容納非常多選項很合適。
例如獵聘APP早期版本,在選擇當前狀態(tài)時采取了“刪除”、“取消”等字眼描述方式采取了類似“編輯資料”的形式展開全部狀態(tài)并不能清晰地表達意思且無法容納更多狀態(tài)因此做法錯誤獵聘APP目前已經改為選擇器形式展開全部狀態(tài)并且支持搜索功能使得交互更加友好明確
五、下拉菜單(drop-downmenu)、 底部操 作 列 表 ( actionsheet ) 及活 動 視 圖 控 制 器 ( activityviewcontroller )
下拉菜單:通常適用于提供快捷入口導流用戶去做其他任務
活動視圖控制器:一個臨時視圖羅列了一系列可以針對頁面特定內容系統(tǒng)服務以及定制服務
例子:
- 在支付寶中點擊“更多”出現(xiàn)下拉菜單
- 微信公眾號主頁點擊“更多”出現(xiàn)了一個懸浮窗口
- 公眾號歷史文章中點擊“更多”出現(xiàn)活動視圖控制器
總結:
- 如果希望提供下一個任務入口則可考慮采取下拉菜單
- 如果希望分享當前頁面內容則可考慮活動視圖控制器
- 如果希望提供與用戶觸發(fā)相關聯(lián)行為則可考慮采取 底 部 操 作 列 表 ( actionsheet )
六、Snackbar 和 Toast
Snackbar 是一種針對某些行為反饋機制, 常以小型彈窗形式呈現(xiàn)在手機屏幕最下方, 或者電腦屏幕左下角, 它們會覆蓋所有正在運行程序, 包括浮點按鈕. Snackbar 會自己消失, 或者當超時時間結束后, 或者當用戶觸摸屏幕其他位置后.
Toast 主要用于提示系統(tǒng)消息. Toast 同 Snackbar 非常相似, 但是 Toast 并不包含任何交互元素, 也不能從屏幕其他位置關閉.
總結:
1.如果信息反饋需要承載更多提示語建議采取Toast。
2.如果嵌入了交互元素建議采取Snackbar。
3.Toast 相比 Snackbar 提醒強度稍低些。
4.想要學習關于 App 運營等方面知識請關注135編輯器!
文章申明:本文章轉載自互聯(lián)網(wǎng)公開渠道,如有侵權請聯(lián)系我們刪除
登錄后可以評論
立即登錄
立即登錄
熱門工具
135編輯器
領先的在線圖文編輯平臺原創(chuàng)樣式素材,一鍵套用
筆格設計
受歡迎的在線作圖網(wǎng)站,新媒體配圖、手機海報應有盡有
筆格PPT
輸入主題,AI一鍵生成PPT;上傳本地文件秒變PPT
管小助
企業(yè)營銷、私域流量運營——站式營銷管理平臺