99久久精品国产片-99久久精品国产免费-99久久精品国产麻豆-99久久精品国产国产毛片-99久久精品国产高清一区二区-99久久精品费精品国产一区二区

這4個最常見的 UI 組件，給你總結(jié)了這份使用指南

2018-10-15 濤濤

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

我們在看 App 時，有沒有思考過這樣的問題，同樣都是提示彈窗為什么出現(xiàn)那么多不同的樣式，亦或者同樣都是讓界面進行切換的導(dǎo)航為什么有的可以通過側(cè)滑切換，有的卻只能點擊切換呢？最近在玩 App 時發(fā)現(xiàn)了幾組這樣的控件，下面就來和大家分享下我對他們的理解和選用。

目錄：

警告框與操作表
標簽欄與操作欄
Tabs與分段控件
Toast與Snackbar

一、警告框與操作表

1. 定義

警告框：是一種操作上的確認，只有當用戶點擊按鈕后才算真的完成，才可以有其他操作，主要作用是警告或提示用戶的。

警告框由三部分組成：標題、正文、按鈕。有些簡單的警告或提示只有正文和按鈕即可。

操作表/ActionSheet：操作表通常會從屏幕底部邊緣向上滑出一個面板，可提供2個以上的選擇。呈現(xiàn)給用戶的是簡單、清晰、無須解釋的一組操作，沒有正文的描述內(nèi)容（大部分）。另外重要的功能操作也會用紅色文字展示。

2. 如何選用？

文字內(nèi)容的重要性

文字內(nèi)容的重要性：選擇警示框和操作表時，要考慮的是兩個彈窗文字內(nèi)容對于用戶的重要程度，如果內(nèi)容極為重要則選用警示框，如果文字內(nèi)容不重要甚至不需要描述文字我們就應(yīng)該選擇操作表。

案例：如下圖，淘寶登錄密碼錯誤時，由于警示框更重要的是文字內(nèi)容的體現(xiàn)，幫助用戶找到問題所在，所以選用警示框。再看 QQ郵箱的垃圾箱中點擊全部清空時，由于信息本身就在垃圾箱內(nèi)，不需要對用戶過多的文字提示，用戶直接操作即可，所以最后選用操作表。

用戶操作流暢性

用戶操作流暢性：當我們需要讓用戶停止操作并必須點擊當前界面的按鈕時，要選擇警示框，警示框?qū)τ脩舨僮魃系牧鲿承杂兄車乐氐挠绊?。如果不需要太過強硬，我們就選用只需在屏幕中任意位置點擊就會消失的操作表。

數(shù)量

數(shù)量：這是最容易區(qū)分使用的方面，當彈窗中的按鈕數(shù)量超過2個時我們一定選用操作表，因為警示框的按鈕數(shù)量不可以超過兩個。如果數(shù)量一樣，可以根據(jù)上面兩點擇優(yōu)使用。

案例：如下圖，我們在得到App 中點擊開通「推送通知」時，因為操作按鈕只有一個，所以選擇警示框。而點開微博中的更多按鈕，用的則是操作表，因為操作按鈕有三個。

二、標簽欄與工具欄

1. 定義

標簽欄：標簽欄位于屏幕底部，它是懸浮在當前頁面之上的，并且會一直存在，只有當用戶點擊跳轉(zhuǎn)到二級菜單后才會消失。用戶可以在不同的子任務(wù)、視圖和模式中進行切換，并且切換按鈕間都屬于不同的內(nèi)容。

當用戶選中某個標簽時，該標簽呈現(xiàn)適當?shù)母吡翣顟B(tài)。數(shù)量也有限制，不能超過5個，如果存在5個以上的標簽可以將最后的標簽設(shè)計成「更多」標簽。

工具欄：工具欄同樣位于屏幕底部，懸浮在當前頁面之上的，并且當用戶不需要使用的時候，可以隱藏它。例如向上滑動界面時，工具欄會自動隱藏。工具欄的內(nèi)容主要是對當前頁面的相關(guān)操作按鈕。

2. 如何選用？

切換狀態(tài)

切換狀態(tài)：當我們需要同級別界面切換時，應(yīng)該選擇標簽欄，同時標簽欄的切換通常為一級導(dǎo)航，工具欄的功能僅針對當前界面內(nèi)容的相關(guān)操作。

案例：如下圖，微信讀書底部欄中是關(guān)于同級別的視圖切換，所以選擇標簽欄，同時標簽欄也常用于產(chǎn)品的一級導(dǎo)航。而 Safari瀏覽器底部的內(nèi)容是針對當前界面的操作功能，所以使用了工具欄。

位置狀態(tài)

位置狀態(tài)：當?shù)撞繉?dǎo)航始終在界面最上方時，上下滑動都不會消失，則選擇標簽欄；如果底部導(dǎo)航上滑隨之消失則選擇工具欄（說明：也有少數(shù)的工具欄是怎么滑動都不會消失的）。

案例：如下圖，我們來看看百度的 App，當我向上滑動界面時，底部導(dǎo)航的位置是不會消失的，所以使用了標簽欄。再看 Safari瀏覽器，因為上滑時底部欄會被隱藏，所以選用了工具欄。

選中狀態(tài)

選中狀態(tài)：當用戶選中底部某一項時，如果需要高亮顯示且顯示的內(nèi)容是不同子任務(wù)的視圖，則使用標簽欄；而當選擇后，出現(xiàn)操作表等與當前界面相關(guān)的操作時，應(yīng)該選擇工具欄。

案例：如下圖，我們還是來看百度App，當我點擊底部的選項時，切換的同時，當前選中的「好看視頻」需要變成選中的樣式，來告知用戶當前選中的是那個界面，所以使用了標簽欄。再看 Safari瀏覽器，點擊底部按鈕后出現(xiàn)操作表且當前選中的按鈕也不會變高亮，因為不會在當前切換界面，所以選擇了工具欄。

三、Tabs與分段控件/Segment Control

1. 定義

Tabs：Tabs 來自 MD規(guī)范，早在 Android 2.0時代，官方的通訊錄App 就使用頂部 Tab導(dǎo)航，可以滑動切換不同視圖。Tabs 里 Tab 呈現(xiàn)的內(nèi)容可以有很大的差別，而且數(shù)量沒有限制，Tabs 不能作為表單的單選組件。

分段控件：iOS 原生控件之一，每個分段作用是互斥的，在分段控件里，所有的分段選項框在長度上要保持一致，同 iOS規(guī)范中對于分段控件的分段選項不得超過5個，每個分段選項可以是純文字或者圖片。

2. 如何運用？

來源不同

來源不同：分段控件來自 iOS規(guī)范，而 Tabs 來源于 MD規(guī)范。

案例：如圖我們來看 iPhone 的日歷界面點擊收件箱，因為是 iOS系統(tǒng)配置的應(yīng)用，所以界面中切換樣式用的是分段控件，而反觀安卓系統(tǒng)則用的是 Tabs切換。

內(nèi)容不同

內(nèi)容不同：分段控件主要起到分割和篩選同類數(shù)據(jù)，而 Tabs 則沒有這樣的限制，Tabs 里的每一項所呈現(xiàn)的內(nèi)容可以有很大的差別。另外分段控件更多的是以單選功能出現(xiàn)在表單的使用中，而 Tab 則不能作為表單的單選組件。

案例：如下圖鯊魚記賬中的圖表頁，支持、收入為整個界面展示項目，為了讓用戶查看起來更加方便，把數(shù)據(jù)分割為周、月、年的不同的數(shù)據(jù)展示，因為是同類數(shù)據(jù)切換，所以選擇了分段控件。反觀36氪首頁的 Tabs欄，由于每個內(nèi)容的差別都很大，所以使用了 Tab欄展示。

操作方式不同

操作方式不同：分段控件需要點擊操作，而 Tabs 除了點擊外還可以通過左右滑動切換不同視圖。

案例：如下圖，網(wǎng)易錢包App 界面中的切換控件，因為在表單中且是極為近似的數(shù)據(jù)圖，不易讓用戶側(cè)滑屏幕切換，需要讓用戶更精準的點擊選擇。所以使用了智能點擊的分段控件，而優(yōu)酷視頻的切換頁變化都比較明顯，很容易區(qū)分，所以選擇了可以側(cè)滑屏幕切換的 Tabs。

數(shù)量

數(shù)量：分段控件數(shù)量不能超過5個，而 Tabs 沒有數(shù)量限制。

案例：如下圖網(wǎng)易云音樂中的消息界面，界面中因為分類的數(shù)量未超過五個（不是所有未超過5個的就要用分段控件，同時也要根據(jù)以上說的其他三種情況判斷，這里只針對數(shù)量闡述而已），所以可以使用分段控件，而網(wǎng)易云音樂視頻界面中因為分類數(shù)量過多且內(nèi)容上有區(qū)別所以選擇了 Tabs。