亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

恭喜你成為UI中國(guó)推薦設(shè)計(jì)師 (詳情)
//百度統(tǒng)計(jì) 20220402 uicn

您的意見是我們 UI 中國(guó)進(jìn)步的動(dòng)力!
點(diǎn)擊立即反饋按鈕,發(fā)表您的意見!
立即反饋
QQ群反饋
您也可以加入U(xiǎn)I中國(guó)官方反饋群進(jìn)行反饋!
群號(hào):302892100
備注:反饋問題后@管理員能讓我們及時(shí)了解您的意見

提交需求

賽事與廣告咨詢合作,請(qǐng)?zhí)顚懶枨蟊韱?,我們?huì)在第一時(shí)間與您聯(lián)系!

0/20
0/200

設(shè)計(jì)大賽

  • 設(shè)計(jì)大賽
  • 發(fā)布廣告
  • 發(fā)布招聘
  • 其它需求

提交完成
感謝您對(duì)UI中國(guó)的支持和信賴!
APP設(shè)計(jì)中,6組常見組件的區(qū)別與用法
0.0°

在設(shè)計(jì)iOS版和Android版的APP過程中會(huì)涉及到很多組件。不同的場(chǎng)景使用的組件也不一樣。這篇文章講述六組易混淆組件的區(qū)別和用法。六組組件如下:

1.警示框(alert)和底部操作列表(action sheet)

2.標(biāo)簽欄(tab bar)和工具欄(tool bar)

3.底部動(dòng)作條(bottom sheets)和菜單(menus)

4.選擇器(selector)和底部操作列表(action sheet)

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

6.snackbar和toast


1.警示框(alert)和底部操作列表(action sheet)

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

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

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

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

Image title

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

Image title

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

1.警示框側(cè)重提示文字;進(jìn)而表示提示文字的內(nèi)容優(yōu)先級(jí)較高。

2.底部操作列表側(cè)重選擇按鈕;進(jìn)而表示選擇按鈕的功能優(yōu)先級(jí)較高。

3.按鈕為0-2個(gè)時(shí),建議使用警示框。

4.按鈕為2-n個(gè)時(shí),建議使用底部操作列表。

5.當(dāng)然有的場(chǎng)景需要強(qiáng)阻斷操作,例如提示沒有網(wǎng)絡(luò),版本升級(jí),這種情況需要使用警示框。

6.具體情況可根據(jù)產(chǎn)品對(duì)待。例如微信退出登錄用的是底部操作列表,原因,較警示框而言阻斷性不強(qiáng),對(duì)用戶的打擾程度較低。同時(shí)登錄按鈕位于底部,手指移動(dòng)路徑短


2.標(biāo)簽欄(tab bar)和工具欄(tool bar)

標(biāo)簽欄:讓用戶在不同的子任務(wù)、視圖和模式中進(jìn)行切換。

工具欄:放置著用于操作當(dāng)前屏幕中各對(duì)象的組件,在iPhone上,工具欄始終位于屏幕底部,而在iPad上則有可能出現(xiàn)在頂部。

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

Image title

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

1.標(biāo)簽欄讓用戶在不同視圖切換,例如app store 點(diǎn)擊游戲tab,進(jìn)入游戲內(nèi)容的界面,所以涉及到視圖切換是標(biāo)簽欄。

2.工具欄是對(duì)當(dāng)前界面內(nèi)容的操作,例如iOS原生郵件點(diǎn)擊工具欄中的刪除,則刪除當(dāng)前郵件。所以涉及到對(duì)當(dāng)前頁面的操作是工具欄。


3.底部動(dòng)作條(bottom sheets)和菜單(menus)

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

Image title

底部動(dòng)作條可以是列表樣式的也可以是宮格樣式。

菜單:是臨時(shí)的一張紙(paper),由按鈕(button)、動(dòng)作(action)、點(diǎn)(pointer)或者包含至少兩個(gè)菜單項(xiàng)的其他控件觸發(fā)。

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

Image title

例如:微信公眾號(hào)點(diǎn)擊更多,出現(xiàn)底部動(dòng)作條;微信對(duì)話列表長(zhǎng)按出現(xiàn)菜單,點(diǎn)擊退出出現(xiàn)的菜單。

Image title

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

1.如果只有兩個(gè)或者更少的操作,或者需要詳加描述的,可以考慮使用菜單(Menu)或者提示框替代。

2.長(zhǎng)按操作,多數(shù)情況使用菜單(menu)。


4.選擇器和底部操作列表

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

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

Image title


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

下拉菜單:常使用于提供快捷功能入口。導(dǎo)流去做其他操作任務(wù)。

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

活動(dòng)視圖控制器:是一個(gè)臨時(shí)視圖,當(dāng)中羅列了一系列可以針對(duì)頁面特定內(nèi)容的系統(tǒng)服務(wù)和定制服務(wù)。

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

Image title

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

1.如果操作選項(xiàng)是提供下一個(gè)操作任務(wù)入口,則使用下拉菜單。例如支付寶的下拉菜單提供前往花唄明細(xì)和銀行卡明細(xì)的功能入口。

2.如果是對(duì)當(dāng)前界面內(nèi)容的分享則使用活動(dòng)視圖控制器。例如活動(dòng)視圖控制器提供歷史文章主頁的各類分享和其他操作。

3.如果是對(duì)當(dāng)前頁面內(nèi)容的操作,則使用底部操作列表。例如底部操作列表是對(duì)微信公眾號(hào)主頁各種操作。


6.snackbar和toast

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

它們會(huì)在超時(shí)或者用戶在屏幕其他地方觸摸之后自動(dòng)消失。用戶可以在屏幕其他區(qū)域滑動(dòng)關(guān)閉。當(dāng)它們出現(xiàn)時(shí),不會(huì)阻礙用戶在屏幕上的輸入,并且也不支持輸入。屏幕上同時(shí)最多只能顯示一個(gè) Snackbar。

Image title

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

Image title

本文討論的toast和snackbar主要是針對(duì)Android端,當(dāng)然iOS端中設(shè)計(jì)使用taost很多,例如gmail和網(wǎng)易郵箱使用過snackbar。

Image title

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

1.toast作為信息的反饋提示,可以承載更多的提示語。提示語很長(zhǎng)的時(shí)候建議用toast,snackbar 中的文案必須要求很簡(jiǎn)潔。

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

3.toast相對(duì)于snackbar而言,提示強(qiáng)度略低。


以上為我總結(jié)六組常見相似組件的例子。如果大家有其他的例子歡迎補(bǔ)充!




更新:2017-12-18

收藏

30人已收藏

UEDC

歡迎大家關(guān)注交流

  • 7

    作品

  • 301

    粉絲

  • 19

    關(guān)注

  • 以手機(jī)淘寶為例,看原型圖易缺失的交互場(chǎng)景
  • 我在ITUX做交互設(shè)計(jì)的經(jīng)驗(yàn)感悟
  • 附源文件| 如何制作統(tǒng)一可復(fù)用iOS/MD元件庫
  • 案例講解 | 移動(dòng)端的長(zhǎng)表單應(yīng)該如何設(shè)計(jì)?

    猜你喜歡

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

      0.0°

      你確定要舉報(bào)APP設(shè)計(jì)中,6組常見組件的區(qū)別與用法?

      如果查出惡意舉報(bào),十天內(nèi)禁止提交任何舉報(bào)申請(qǐng)。

      0/200

      上傳證據(jù): 超過10M的附件請(qǐng)使用網(wǎng)盤地址

      點(diǎn)擊上傳附件

      對(duì)誰可見:

      全部設(shè)計(jì)師
      • 全部設(shè)計(jì)師
      • 推薦設(shè)計(jì)師和認(rèn)證設(shè)計(jì)師

      您確認(rèn)要推薦?

      該作品發(fā)布時(shí)間:2017年12月16日

      評(píng)分

      完整度

      啟發(fā)性

      勤奮性

      排版布局

      推薦心得

      建議20-200字以內(nèi)

      0/200

      19
      30
      2

      賬號(hào)或密碼錯(cuò)誤,請(qǐng)重新輸入

      賬號(hào)或密碼錯(cuò)誤,請(qǐng)重新輸入

      登錄

      手機(jī)號(hào)

      發(fā)送驗(yàn)證碼 120s 驗(yàn)證碼錯(cuò)誤

      登錄
      第三方賬號(hào)登錄