综合网欧美一二三,超碰探花综合,久久九九这里

標(biāo)題略微悚動，但事出有因。別看我們成天到晚使用這些看似平常的控件，但到底它們之間有些什么關(guān)系，有些什么規(guī)范和定義，怕也只能說個大概。故事的開始是這樣的...

大叔親畫（部分劇情夸張?zhí)幚恚?/div>

總結(jié)問題：

說白了就是基礎(chǔ)知識不清楚，也就是平臺之間的規(guī)范差異和定義模糊不清。還有沒有明確的規(guī)范定義，導(dǎo)致每個設(shè)計(jì)師都可能用不同的控件，或者同樣的控件不同的形式...

當(dāng)然，在這里我們還得問問自己這個頁面里用戶的主要目標(biāo)是什么？為什么是這個目標(biāo)？如何達(dá)到這個目標(biāo)？達(dá)到這個目標(biāo)的方法能實(shí)現(xiàn)么？等問題。

其實(shí)上面這個故事只是個引子，我們的主要目的還是要規(guī)范所有控件的使用場景和規(guī)則。

?iOS的規(guī)范如下：

大叔親畫

Status Bars（狀態(tài)欄）

位于手機(jī)頂部，顯示通訊電量等信息

Navigation Bars（導(dǎo)航欄）

導(dǎo)航欄位于屏幕上部，在狀態(tài)欄下面，可以在一些列層級頁面里導(dǎo)航。當(dāng)一個新的頁面展示的時候，一個返回的按鈕，通常加上上一個頁面的標(biāo)題，顯示在欄的左側(cè)。有時，導(dǎo)航欄的右側(cè)包含一個操作，如“編輯”或“完成”按鈕，用于管理活動視圖中的內(nèi)容。

Segment Control（分段選擇器）

1、一個分段器是由兩個或多個分段的線性組合，每個分段的功能都是相互互斥的按鈕，所有的分段的寬都相等。

2、分段器經(jīng)常會被用在不同的場景。如通常用于切換不同的視圖，切換上下文，或者在表單中作為單選組件使用，也就是說分段器所劃分的內(nèi)容很寬泛，不局限于某種類型數(shù)據(jù)，根據(jù)不同場景它可充當(dāng)適應(yīng)的分類工具（大叔言）。

3、限制分段數(shù)量控制在5個以內(nèi)，不要在同一個分段器里同時使用圖片和文字。

Tab Bars （Tab 欄）

標(biāo)簽欄顯示在屏幕的底部，提供在一個應(yīng)用中快速的切換不同區(qū)域的能力，Tab欄在應(yīng)用層面管理信息，嚴(yán)格的使用Tab 欄作為導(dǎo)航，它不能執(zhí)行操作，如果需要對當(dāng)前視圖中的元素起作用，請用工具欄。一般來說，使用3到5個標(biāo)簽欄在iPhone上，不能禁用或移除某一個標(biāo)簽（比如在某個場景下某個標(biāo)簽沒有內(nèi)容，在這種情況下要能使用且告知用戶為什么不能使用）?？梢约尤氩伙@眼的徽標(biāo)（小紅點(diǎn)）進(jìn)行信息溝通。

Tool Bars（工具欄）

工具欄位于屏幕底部，工具欄包含的按鈕是可以根據(jù)當(dāng)前內(nèi)容進(jìn)行操作的。但是標(biāo)簽欄和工具欄永遠(yuǎn)不會出現(xiàn)在一個視圖里，避免在工具欄中使用分段控件。

Material Design規(guī)范：

摳腳大叔親畫

Status Bars（狀態(tài)欄）

在 Android 上，狀態(tài)欄包含通知圖標(biāo)和系統(tǒng)圖標(biāo)

App Bars：top（應(yīng)用欄：上）

1、頂部應(yīng)用欄顯示與當(dāng)前屏幕相關(guān)的信息和操作。它用于品牌，屏幕標(biāo)題，導(dǎo)航和操作。

2、左邊導(dǎo)航按鈕（案例1里的標(biāo)注1處），不僅可以放菜單圖標(biāo)（這是普通樣式如案例1），還可以放向上按鈕和返回按鈕。

3、應(yīng)用欄可以轉(zhuǎn)換為上下文操作欄，這里要注意的是，當(dāng)其轉(zhuǎn)換成上下文操作欄時，跟iOS的工具欄的作用大同小異，只是這個在頂部（大叔言）。

4、安卓的應(yīng)用欄可以放背景圖片（案例2）

App Bars：bottom（應(yīng)用欄：下）

安卓的應(yīng)用欄可以放下面，如案例3所示。

Tab（選項(xiàng)卡）

1、選項(xiàng)卡可以在應(yīng)用層次結(jié)構(gòu)的任何級別使用，在跨不同的屏幕、數(shù)據(jù)集和其他交互之間整理內(nèi)容。

2、每個選項(xiàng)卡的內(nèi)容要區(qū)別于其他選項(xiàng)卡的內(nèi)容。

3、選項(xiàng)卡可以和其他組件組合，如：頂部應(yīng)用欄、卡片或者表格。

4、選項(xiàng)卡有固定的和可滑動的，且選項(xiàng)卡可以是文字、圖片或圖片加文字。

5、選項(xiàng)卡支持手勢操作，這里也要注意了，當(dāng)使用選項(xiàng)卡時，視圖內(nèi)不支持左滑操作，圖片左滑等手勢操作。另外選項(xiàng)卡不能套選項(xiàng)卡。

Bottom Navigation（底部導(dǎo)航）

1、底部導(dǎo)航欄一般放置2-5個。它們在屏幕上的位置，可以允許更快的在不同首級位置之間轉(zhuǎn)換，并且操作位置明顯。

2、可以加入徽標(biāo)（小紅點(diǎn)）顯示動態(tài)信息

Android ?Navigation Bar（安卓導(dǎo)航欄）

反向?qū)Ш绞侵钙聊恢g的向后移動。它可以按用戶的時間順序，通過最近的屏幕歷史記錄移動，或者通過應(yīng)用程序的層次結(jié)構(gòu)向上移動。所以也就意味著這個移動可以跨應(yīng)用，這種類型的導(dǎo)航通常由操作系統(tǒng)或平臺提供。各個平臺定義其行為方式以及用戶如何訪問該功能。這里可以對比著應(yīng)用欄：上里的返回箭頭（返回按鈕），這個箭頭的定義僅屬于向上導(dǎo)航，意味著屬于應(yīng)用層級的導(dǎo)航，它可以帶領(lǐng)用戶一直往上一個頁面跳轉(zhuǎn)，直到跳到首頁或最頂層的頁面。

小結(jié)

選項(xiàng)卡VS分段選擇器，區(qū)別如下：

平臺不同

選項(xiàng)卡屬于安卓，而分選選擇器屬于iOS，通過它們和平臺其他控件的組合，他們有著不同屬性和應(yīng)用場景。

類型不同

在大的方面，他們都是屬于信息、視圖切換，但究其根本是有差別的，比如選項(xiàng)卡在安卓規(guī)范里屬于導(dǎo)航下的控件，所以其屬性更傾向于信息導(dǎo)航分類。且其跟其他組件的組合形式上，都會放在組件上面起分類導(dǎo)航作用。而分段選擇器在iOS里明確定義不能導(dǎo)航，使用分段選擇器主要是整理信息分類功能（原文：Segmented controls and toolbars don’t enable navigation. Use a segmented control to organize information into different categories. Use a toolbar to provide controls for interacting with the current context.），所以分段選擇器還能放在表單里作為單選組件。

操作不同

選項(xiàng)卡支持滑動模式，且在滑動模式下有手勢，而分段選擇器只能點(diǎn)選。

UI樣式及數(shù)量不同

1、官方提供的樣式，一個是按鈕樣式，一個是選項(xiàng)卡樣式

2、分段選擇器最多承載5個，而選項(xiàng)卡在可滑動的模式下，可拓展更多的個數(shù)

應(yīng)用不同

作為導(dǎo)航下的控件，選項(xiàng)卡可以跟頂部應(yīng)用欄組合，也可以跟卡片或表格組合，但是存在選項(xiàng)卡的時候，不要在選項(xiàng)卡的內(nèi)容中包含支持滑動手勢的其他控件。而分段選擇器根其他控件組合時，更像是嵌在其他組件里的，如導(dǎo)航欄里的分段選擇器，加上其沒有手勢操作，所以沒有選項(xiàng)卡那樣的限制。