APP設(shè)計中,6組常見組件的區(qū)別與用法

UX
15 評論 37685 瀏覽 327 收藏 11 分鐘

在APP設(shè)計中,有很多組建有著類似的功能和用法。如何正確使用這些組件?這些組件之間有什么區(qū)別?一起看看作者的解讀。

在設(shè)計iOS版和Android版的APP過程中會涉及到很多組件。不同的場景使用的組件也不一樣。這篇文章講述六組常見的相似組件的區(qū)別和用法。

  1. 警示框(alert)和底部操作列表(action sheet)
  2. 標(biāo)簽欄(tab bar)和工具欄(tool bar)
  3. 底部動作條(bottom sheets)和菜單(menus)
  4. 選擇器(selector)和底部操作列表(action sheet)
  5. 下拉菜單(drop-down menu)、底部操作列表(action sheet)及活動視圖控制器(activity view controller)
  6. snackbar和toast

一、警示框(alert)和底部操作列表(action sheet)

警示框是傳達(dá)應(yīng)用或設(shè)備某些狀態(tài)的信息,并且常常需要用戶來點擊操作。

底部操作列表展示了與用戶觸發(fā)的操作直接相關(guān)的一系列選項,包含兩個或以上的按鈕。

一般含有三種以上操作使用底部操作列表,一種或者兩種操作使用警示框或底部操作列表。

例如:iOS原生郵箱,點擊“更多”出現(xiàn)底部操作列表,展示四種操作選項。推特的退出登錄僅需要二次確認(rèn)使用的是警示框。

對于警示框(alert)和底部操作列表(action sheet)的困惑多用于二次確認(rèn)上,例如微信的退出登錄使用的是底部操作列表,而qq用的是警示框。

警示框(alert)和底部操作列表(action sheet)的區(qū)別于用法:

  • 警示框側(cè)重提示文字;進(jìn)而表示提示文字的內(nèi)容優(yōu)先級較高;
  • 底部操作列表側(cè)重選擇按鈕;進(jìn)而表示選擇按鈕的功能優(yōu)先級較高;
  • 按鈕為0-2個時,建議使用警示框;
  • 按鈕為2-n個時,建議使用底部操作列表;
  • 當(dāng)然有的場景需要強阻斷操作,例如提示沒有網(wǎng)絡(luò),版本升級,這種情況需要使用警示框;
  • 具體情況可根據(jù)產(chǎn)品對待。例如微信退出登錄用的是底部操作列表,阻斷性不強,對用戶的打擾程度較低;

二、標(biāo)簽欄(tab bar)和工具欄(tool bar)

  • 標(biāo)簽欄:讓用戶在不同的子任務(wù)、視圖和模式中進(jìn)行切換。
  • 工具欄:放置著用于操作當(dāng)前屏幕中各對象的組件,在iPhone上,工具欄始終位于屏幕底部,而在iPad上則有可能出現(xiàn)在頂部

例如:app store中底部的標(biāo)簽欄和iOS原生郵件詳情的底部工具欄

標(biāo)簽欄(tab bar)和工具欄(tool bar)的區(qū)別:

  • 標(biāo)簽欄讓用戶在不同視圖切換,例如app store 點擊游戲tab,進(jìn)入游戲內(nèi)容的界面,所以涉及到視圖切換是 標(biāo)簽欄。
  • 工具欄是對當(dāng)前界面內(nèi)容的操作,例如iOS原生郵件點擊工具欄中的刪除,則刪除當(dāng)前郵件。所以涉及到對當(dāng)前頁面的操作是工具欄。

三、底部動作條(bottom sheets)和菜單(menus)

底部動作條:一個從屏幕底部邊緣向上滑出的一個面板,使用這種方式向用戶呈現(xiàn)一組功能。底部動作條提供三個或三個以上的操作需要提供給用戶選擇、并且不需要對操作有額外解釋的情景。

底部動作條可以是列表樣式的也可以是宮格樣式。

菜單:菜單是臨時的一張紙(paper),由按鈕(button)、動作(action)、點(pointer)或者包含至少兩個菜單項的其他控件觸發(fā)。

每一個菜單項是一個離散的選項或者動作,并且能夠影響到應(yīng)用、視圖或者視圖中選中的按鈕。

例如:微信公眾號點擊更多,出現(xiàn)底部動作條;微信對話列表長按出現(xiàn)菜單,點擊退出出現(xiàn)的菜單

總結(jié)底部動作條(bottom sheet)和菜單(menu)的區(qū)別:

  • 如果只有兩個或者更少的操作,或者需要詳加描述的,可以考慮使用菜單(Menu)或者提示框替代。
  • 長按操作,多數(shù)情況使用菜單(menu)

四、選擇器和底部操作列表

對于互斥的單項選擇而言,要使用選擇器。選擇器的好處是可以來回切換確定,同時由于選擇器里面的內(nèi)容滾動,所以可以容納非常多的選項。

例如獵聘app早期版本,選擇當(dāng)前狀態(tài),使用的是底部操作列表。這樣做是錯誤的。底部操作列表是對選項進(jìn)行操作而不是選擇。獵聘現(xiàn)版本已經(jīng)改為了選擇器。

五、下拉菜單(drop-down menu)、底部操作列表(action sheet)及活動視圖控制器(activity view controller)

  • 下拉菜單:常見適用于提供快捷入口。導(dǎo)流用戶去做其他操作任務(wù)。
  • 底部操作列表:展示了與用戶觸發(fā)的操作直接相關(guān)的一系列選項,包含兩個或以上的按鈕。
  • 活動視圖控制器:是一個臨時視圖,當(dāng)中羅列了一系列可以針對頁面特定內(nèi)容的系統(tǒng)服務(wù)和定制服務(wù)。

例如在支付寶中,點擊“更多”出現(xiàn)下拉菜單。微信公眾號主頁點擊“更多”出現(xiàn)底部操作列表。公眾號歷史文章中點擊“更多”出現(xiàn)視圖控制器。

下拉菜單、底部操作列表及動視圖控制器的區(qū)別:

  • 如果操作選項是提供下一個操作任務(wù)入口,則使用下拉菜單;
  • 如果是對當(dāng)前操作的分享則使用活動視圖控制器;
  • 如果是對當(dāng)前頁面內(nèi)容的操作,則使用底部操作列表;

六、snackbar和toast

Snackbar 是一種針對操作的輕量級反饋機制,常以一個小的彈出框的形式,出現(xiàn)在手機屏幕下方或者桌面左下方。它們出現(xiàn)在屏幕所有層的最上方,包括浮動操作按鈕。

它們會在超時或者用戶在屏幕其他地方觸摸之后自動消失。Snackbar 可以在屏幕其他區(qū)域滑動關(guān)閉。當(dāng)它們出現(xiàn)時,不會阻礙用戶在屏幕上的輸入,并且也不支持輸入。

屏幕上同時最多只能顯示一個 Snackbar。

Toast主要用于提示系統(tǒng)消息。Toast 同 Snackbar 非常相似,但是 Toast 并不包含操作也不能從屏幕其他區(qū)域上滑動關(guān)閉,文本內(nèi)容左對齊。

文章討論的toast和snackbar主要是針對Android端,當(dāng)然iOS設(shè)計規(guī)范中使用taost很多,使用snackbar我也僅僅在gmail中看見過。

總結(jié)snackbar和toast的區(qū)別:

1.toast作為信息的反饋提示,可以承載更多的提示語。提示語很長的時候建議用taost,snack bar 文案必須要求很端

2.如果在提示信息里面嵌入操作,使用snackbar ,例如微信收藏,可在snack bar中加入操作按鈕進(jìn)行收藏標(biāo)簽分類

3.toast相對于snackbar而言,提示強度稍低一些。

#專欄作家#

UX,微信公眾號:UEDC,人人都是產(chǎn)品經(jīng)理專欄作家。前華為ITUX交互組組長,現(xiàn)美團(tuán)點評高級交互設(shè)計師。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Unsplash ,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 這個剛好是我們經(jīng)常接觸的。 做安卓rom的定制,ios不是很了解。
    安卓里面的我們把這個叫空間庫,安裝的三方app都可以調(diào)用庫中控件
    主要的控件是 Dialog,彈窗類的都是。Action Bar,就是app頂部的標(biāo)題欄
    list item控件 內(nèi)容頁面里的list常用
    search view 搜索條
    toast 這個安卓里面太常用了,ios里好像很少見
    其實Tab 我們也是用控件來實現(xiàn)了,不同應(yīng)用內(nèi)可以給他自定義顏色和tab數(shù)目和文字

    來自廣東 回復(fù)
    1. 加個好友,交流下,我的微信:goldseng

      來自上海 回復(fù)
  2. 小白學(xué)習(xí)了~ 了解了常見組件的基礎(chǔ)概念

    來自北京 回復(fù)
  3. mark

    回復(fù)
  4. 您好,整理的非常不錯。
    請教一下 關(guān)于 action sheet(底部操作列表) 和 bottom sheet(底部動作條) 這兩個 不是一樣的,只不過一個是IOS 一個是安卓的叫法。
    這樣的話 你文中出現(xiàn)alet和 action sheet的對比 下面是 bottom sheet和menus的對比;就有點讓人懵。

    來自上海 回復(fù)
  5. action sheet 和 alert sheet的區(qū)別在于是否是由用戶主動發(fā)起,用戶主動發(fā)起使用action sheet,系統(tǒng)自動觸發(fā)使用alert sheet

    來自北京 回復(fù)
    1. 都是用戶主動發(fā)起的。

      來自北京 回復(fù)
  6. 你這個都是ios的 安卓的呢?

    來自浙江 回復(fù)
    1. toast和snackbar、菜單和底部動作條這都是安卓的啊。

      來自北京 回復(fù)
    2. 期待能整理一份iOS和安卓特有的交互規(guī)范

      回復(fù)
    3. 囧,這工作量有點大啊,你可以看官方的規(guī)范

      來自上海 回復(fù)
    4. 群主,哪里可以看;能附鏈接和地址嗎

      來自上海 回復(fù)
    5. 可以百度一下

      來自福建 回復(fù)
  7. 這個分享很贊

    來自廣東 回復(fù)
  8. 謝謝分享,有些概念清晰了很多。

    來自北京 回復(fù)