長城上的貓

股票融资最高几倍杠杆:APP設計中,6組易混淆組件的區別和用法

長城上的貓 APP設計 480瀏覽

股票融资融券是什么意思 www.432722.tw ?小編:iOS和Android版本的APP在很多UI設計上都會有些重疊或相似性,但是仍然有所區別。我們在設計時可以注意不同版本的組件差異性,一起來看看APP設計中,6組易混淆組件的區別和用法這一篇文章吧~

?

前言

在設計iOS版或Android版App過程中會使用到很多組件。
設計師在使用組件的過程中,可能沒有意識到相似組件之間的差異性和正確的用法,導致組件使用出錯。
?
這篇文章講述6組易混淆組件的區別及正確用法,6組組件如下:?
  • ?1.底部操作列表(Action sheet)和警示框(Alert)
  • 2.標簽欄(Tab bar)和工具欄(Tool bar)
  • 3.底部動作條(Bottom sheets)和菜單(Menus)
  • 4.選擇器(Select)和底部操作列表(Action Sheet)
  • 5.下拉菜單(Drop-down menu)、底部操作列表(Action sheet)及活動視圖控制器(Activity view controller)
  • 6.Snackbar和Toast

?

1.底部操作列表和警示框

在iOS原生郵箱,用戶點擊“轉發/回復”出現底部操作列表,呈現3種操作選項。推特退出登錄時,通過警示框讓用戶進行二次確認。

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

?
警告框是告知App或設備某些狀態的信息,并且需要用戶來點擊操作。
底部操作列表伴隨著用戶操作后出現,而警示框可能用戶不操作也會出現。如下圖所示,當用戶首次下載App,并打開時候,通過警示框來獲取權限。

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

?
對于警示框和底部操作列表的使用困惑多在二次確認上,例如微信的退出登錄使用的是底部操作列表,而QQ用的是警示框。

 

總結警示框和底部操作列表的區別于用法:

  • 1.底部操作列表側重選擇按鈕,選擇按鈕的功能優先級較高,如微信退出的底部操作列表按鈕;
  • 2.警示框側重點是提示文字,提示文字的內容優先級較高,如QQ退出警示框偏重文案提示;
  • 3.按鈕為0-2個時,建議使用警示框;
  • 4.按鈕為2-n個時,建議使用底部操作列表;
  • 5.當然有的場景需要強阻斷操作,例如提示沒有網絡,版本升級,這種情況需要使用警示框;
  • 6.具體情況可根據產品對待,例如微信退出登錄用的是底部操作列表,原因可能是底部操作列表阻斷性不強,對用戶的打擾程度較低。

?

2.標簽欄和工具欄

標簽欄:讓用戶在不同的界面視圖和模式中進行切換。
工具欄:用于操作當前界面內容的組件,在iPhone上,工具欄始終位于屏幕底部,而在iPad上則有可能出現在頂部。
如下圖,綠洲底部的標簽欄和iOS原生郵箱詳情的底部工具欄。

總結標簽欄和工具欄的區別:

  • 1.標簽欄讓用戶在不同視圖切換,例如綠洲點擊tab2,進入搜索界面,所以涉及到界面視圖切換是標簽欄。
  • 2.工具欄是對當前界面內容的操作,例如iOS原生郵件點擊工具欄中的刪除,則刪除當前郵件。所以涉及到對當前頁面的操作是工具欄。

?

3.底部動作條和菜單

底部動作條:一個從屏幕底部邊緣向上滑出的一個面板,使用這種方式向用戶呈現一組功能。
底部動作條提供2個或2個以上的操作需要提供給用戶選擇、并且不需要對操作有額外的解釋。
底部動作條可以是列表樣式的也可以是宮格樣式。
底部動作條是Android的設計指南組件,iOS相對應的是底部操作列表。
菜單:菜單是臨時的一張紙(paper),由按鈕(button)、動作(action)、點(pointer)或者包含至少兩個菜單項的其他控件觸發。
?
每一個菜單項是一個離散的選項或者動作,并且能夠影響到應用、視圖或者視圖中選中的按鈕。
?
如下圖,微信公眾號點擊更多,出現底部動作條。微信對話列表長按出現菜單。

 

總結底部動作條和菜單的區別:

  • 1.如果有3個或3個以上的操作,可以使用底部操作列表;
  • 2.長按操作,多數情況使用菜單。

?

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

對于互斥的單項選擇而言,要使用選擇器。
選擇器的好處是可以來回切換確定,同時由于選擇器里面的內容滾動,所以可以容納非常多的選項。
底部操作列表展示與用戶觸發的操作直接相關的一系列選項,包含兩個或以上的操作按鈕。
例如獵聘app早期版本,選擇當前狀態,使用的是底部操作列表。這樣做是錯誤的。
底部操作列表是對選項進行操作而不是選擇。獵聘現版本已經改為了選擇器。

?

5.下拉菜單、底部操作列表及活動視圖控制器

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

下拉菜單:常見適用于提供快捷入口。導流用戶去做其他功能任務。

底部操作列表:展示了與用戶觸發的操作直接相關的一系列選項,包含兩個或以上的按鈕。
活動視圖控制器:是一個臨時視圖,當中羅列了一系列可以針對頁面特定內容的系統服務和定制服務。
?
總結下拉菜單、底部操作列表及動視圖控制器的區別:
  • 1.如果操作選項是提供下一個操作任務入口,則使用下拉菜單;
  • 2.如果是對當前操作的分享則使用活動視圖控制器;
  • 3.如果是對當前頁面內容的操作,則使用底部操作列表。

?

6.Snackbar和Toast

Snackbar 是一種針對操作的輕量級反饋機制,常以一個小的彈出框的形式,出現在手機屏幕下方或者桌面左下方。它們出現在屏幕所有層的最上方,包括浮動操作按鈕。
例如微信對話收藏后,底部會出現Snackbar。它的作用除了提示用戶收藏成功,還可以讓用戶對收藏的信息進行添加標簽。

它會在超時或者用戶在屏幕其他地方觸摸之后自動消失。Snackbar 可以在屏幕其他區域滑動關閉。當它出現時,不會阻礙用戶在屏幕上的輸入,并且Snackbar也不支持輸入。屏幕上同時最多只能顯示一個 Snackbar。

?
Toast主要用于提示系統消息。Toast 同 Snackbar 非常相似,但是 Toast 并不包含操作也不能從屏幕其他區域上滑動關閉,文本內容左對齊。
?
文章討論的Toast和Snackbar主要是針對Android端,當然iOS設計規范中使用Taost很多,使用Snackbar我也僅僅在gmail中看見過。

總結Snackbar和Toast的區別:

  • 1.Toast作為信息的反饋提示,可以承載更多的提示語。提示語很長的時候建議用Toast,Snackbar 文案必須要求很短;
  • 2.如果在提示信息里面嵌入操作,則需要使用Snackbar 。如微信收藏在Snackbar中加入操作按鈕進行收藏標簽分類;
  • 3.Toast相對于Snackbar而言,提示強度稍低一些。
?
以上是我總結的6組易混淆組件的例子,如果大家有其他更好的例子,歡迎補充。 ?
本期福利可以自行下載iOS設計指南pdf、Material Design中文規范網址哦~ 密碼:1whh?
?
原文地址:Echo的設計筆記(公眾號)
作者:Echo?
??
?

轉載請注明:股票融资融券是什么意思 » APP設計中,6組易混淆組件的區別和用法

登錄收藏
 
你可能喜歡的:
沒有競品參考就不知道如何設計,什么情況?沒有競品參考就不知道如何設計,什么情況?
Material Design Data Format 數據格式Material Design Data Format 數據格式
Material Design Confirmation &Acknowledgement 確認&通知Material Design Confirmation &Acknowledgement 確認&通知
3點提升發布流程設計3點提升發布流程設計
【面試題】喵街tab商城頁改版總結【面試題】喵街tab商城頁改版總結
Material Design States 狀態Material Design States 狀態
Material Design Selection 選擇Material Design Selection 選擇
從「科學方法」到「設計實踐」 – 云產品設計師會夢見服務器么?從「科學方法」到「設計實踐」 – 云產品設計師會夢見服務器么?
異常場景怎么處理?異常場景怎么處理?
UI設計交接給開發之后看起來更糟的7個原因,以及為什么這可能是你的錯UI設計交接給開發之后看起來更糟的7個原因,以及為什么這可能是你的錯
?
{ganrao}