01-基礎(chǔ)
按鈕
類型
一般按鈕（填充/描邊）、文字按鈕、圖標按鈕趾断、浮動操作按鈕（FAB）。
原則
布局：
一個容器中應(yīng)該只使用一種類型的按鈕溯壶，只在比較特殊的情況下（比如需要強調(diào)一個重要的功能）時才可以混合使用多種類型的按鈕哈蝇。
根據(jù)場景使用不同類型的按鈕：
所使用的按鈕類型應(yīng)該和它所處的上下文相符凉馆。
按鈕文本
按鈕或控件的標簽應(yīng)該簡明薪寓、準確的反映出菜單中的菜單項。菜單欄通常使用一個單詞作為標簽澜共，像 “文件” 向叉、 “格式” 、 “編輯” 和 “視圖” 嗦董。其他內(nèi)容可能會有更長的標簽母谎。（iOS建議增加圖標輔助說明菜單項的含義）
使用動詞：一個特定于動作的標題表明這個按鈕是可交互的，而且告訴你當你觸擊的時候會發(fā)生什么京革。
保持簡潔：過長的標題文本讓你的界面變得擁擠奇唤，而且在較小的屏幕上可能會被截斷。
標準對話框
按鈕對齊方式：右對齊
將確定按鈕放在右邊匹摇，取消按鈕放在左邊咬扇。
表單
按鈕對齊方式：左對齊
確定按鈕在左邊，取消按鈕在右邊廊勃。
卡片
按鈕最好放在卡片的左側(cè)懈贺，以增加其可見度。然而，由于卡片的布局非常靈活梭灿，按鈕也可以放在適合于內(nèi)容和上下文的其他位置画侣。
非標準的對話框和模態(tài)化窗口
在非標準的對話框和模態(tài)化窗口中，按鈕的位置取決于它們包含的內(nèi)容的復(fù)雜性堡妒。
如果對話框中的內(nèi)容相對簡單配乱，推薦把按鈕放在對話框右側(cè)，并且確定按鈕在取消按鈕的右側(cè)涕蚤。
對于復(fù)雜的表單宪卿，建議把按鈕放在表單左側(cè)的诵，并且確定按鈕在取消按鈕的左側(cè)万栅。
輸入框
類型
單行文本、多行文本西疤、段落文本
布局方式
上下布局 烦粒、左右布局-文本左對齊、左右布局-文本右對齊代赁、無標簽扰她、圖標標簽
組成元素
標簽、必填提示芭碍、輸入線徒役、光標、占位符窖壕、字符計數(shù)器忧勿、幫助文字、錯誤提示瞻讽、清除按鈕鸳吸。
狀態(tài)
正常、禁用速勇、聚焦晌砾、錯誤。
原則
可識別
文本框應(yīng)使用可點擊的觸摸目標烦磁，指示用戶可以輸入信息养匈。
容易找到
應(yīng)該要能很容易的在其他元素中找到文本框。
可讀的
文本框應(yīng)該指明其狀態(tài) - 啟用還是禁用都伪、為空還是已有文本輸入乖寒、通過驗證還是未通過驗證 - 具有清晰的標簽、輸入框和輔助文本院溺。
使用合適的鍵盤類型
顯示合適的鍵盤類型楣嘁。iOS提供了幾種不同類型的鍵盤，每種都是為了讓不同類型的輸入更加便利而設(shè)計。為了簡化數(shù)據(jù)輸入逐虚，在文本視圖的編輯期間聋溜，都應(yīng)該顯示適合于區(qū)域中內(nèi)容的鍵盤類型。例如叭爱，如果你的APP要求郵箱地址撮躁，就應(yīng)該展示郵件地址鍵盤。完整的可使用的鍵盤類型清單买雾，see the?UIKeyboardType?constant of?UITextInputTraits把曼。
合適的默認值
根據(jù)設(shè)備的信息（位置、網(wǎng)絡(luò)等）漓穿、用戶的信息（已經(jīng)登錄的）等嗤军，預(yù)先填入默認值，減少輸入工作量晃危。
使用輔助輸入
結(jié)合移動設(shè)備的特性叙赚、采用語音、掃碼僚饭、手勢等方式來輸入信息震叮，讓輸入過程更加輕松便捷。
其它輔助
格式化輸入鳍鸵、前綴苇瓣、后綴
單選
單選將選項平鋪，與下拉菜單相比偿乖，占用空間大击罪，操作更加便捷、直觀汹想。
復(fù)選
復(fù)選框與單選類似外邓，區(qū)別是可以選擇多個。
開關(guān)
開關(guān)是兩個互斥狀態(tài)（開和關(guān)）之間的視覺切換古掏。
開關(guān)按鈕切換單個設(shè)置項的狀態(tài)损话。開關(guān)控件中的選項，以及它的狀態(tài)槽唾，應(yīng)該在相應(yīng)的內(nèi)聯(lián)標簽中顯示清楚丧枪。開關(guān)按鈕具有和單選按鈕一樣的視覺屬性。
原則
考慮為開關(guān)加上顏色以匹配你APP的樣式庞萍。如果在你的APP中表現(xiàn)良好的話拧烦，你可以改變開關(guān)中開和關(guān)狀態(tài)的顏色。
僅僅在表格行中使用開關(guān)钝计。開關(guān)是為了在表格中使用的恋博，例如在一列設(shè)置列表中可以切換開和關(guān)齐佳。如果你在工具欄或?qū)Ш綑谥行枰愃频墓δ埽冒粹o代替债沮，并提供兩個明顯的圖標來表明狀態(tài)炼吴。
避免增加標簽來描述開關(guān)的值。開關(guān)不是開就是關(guān)疫衩。提供標簽來描述這些狀態(tài)是多余的硅蹦，而且讓界面顯得擁擠混亂。
考慮使用開關(guān)來管理相關(guān)界面元素的可用性闷煤。開關(guān)經(jīng)常會影響界面中的其他內(nèi)容童芹。例如，在設(shè)置中打開飛行模式鲤拿，將禁用其它設(shè)置假褪，例如蜂窩網(wǎng)絡(luò)和個人熱點設(shè)置。在設(shè)置>WiFi中關(guān)閉WiFi皆愉，會導(dǎo)致可用網(wǎng)絡(luò)和其它選項消失嗜价。
02-更多選項/操作命令
Chips/薄片
薄片是表示輸入（如郵件收件人艇抠、增加標簽）幕庐、屬性或動作的緊湊元素。允許人們輸入信息家淤、進行選擇异剥、過濾內(nèi)容或觸發(fā)操作。
輸入的薄片可以編輯絮重，編輯完成后顯示為薄片冤寿。順序可以拖動更換順序，數(shù)量較多時可以滾動顯示青伤。
選擇薄片類似于單選或者多選控件督怜，盡量一行顯示。
過濾薄片就是篩選中的各個條件狠角，點擊選擇一個或多個号杠。一般在搜索框下方或者側(cè)邊卡片中顯示。
動作薄片類似按鈕丰歌，會觸發(fā)上下文操作姨蟋，一直持續(xù)的顯示。
氣泡/Popovers
氣泡彈窗出現(xiàn)時立帖，背景會變暗眼溶，更加聚焦。適合內(nèi)容較多的場景晓勇。
氣泡式彈窗是當你觸擊一個控件或一個區(qū)域時堂飞，出現(xiàn)在屏幕其它內(nèi)容之上的臨時性視圖灌旧。通常，氣泡式彈窗包含一個箭頭指向出現(xiàn)的位置绰筛。氣泡式彈窗可以使非模態(tài)或者模態(tài)的节榜。非模態(tài)的氣泡式彈窗在點擊屏幕的其他區(qū)域或者彈窗上的按鈕時關(guān)閉。模態(tài)的氣泡式彈窗在點擊去取消或者頁面上的其它按鈕時關(guān)閉别智。
氣泡式彈窗最適合在大屏幕上使用宗苍，并且可以包含多樣化的元素。包括導(dǎo)航欄薄榛、工具欄讳窟、標簽欄、表格敞恋、集合丽啡、圖片、地圖和自定義視圖硬猫。當出現(xiàn)氣泡式彈窗時补箍，其它視圖的交互元素不可用直到氣泡式彈窗被關(guān)閉。使用氣泡式彈窗來展示與當前屏幕內(nèi)容相關(guān)聯(lián)的選項或信息啸蜜。例如在許多iPad APP中坑雅，當你觸擊行動按鈕時通過氣泡式彈窗來展示分享選項。
原則
避免在iPhone上使用氣泡式彈窗衬横。一般而言裹粤，氣泡式彈窗僅供iPad APP使用。在iPhone APP中蜂林，通過全屏的模態(tài)視圖而不是氣泡式彈窗來展示信息遥诉，以此利用所有可用的屏幕空間。（For related guidance, see?Modality.）
僅使用關(guān)閉按鈕確認和指引噪叙。取消和完成這樣的關(guān)閉按鈕矮锈，如果能提供清晰的信息，例如退出時保存或者不保存修改內(nèi)容睁蕾，就值得保留苞笨。一般而言，氣泡式彈窗應(yīng)該在它不需要存在時自動關(guān)閉惫霸。在大多數(shù)情況下猫缭，氣泡式彈窗應(yīng)該在某人觸擊了邊界外的區(qū)域或者選擇了其中的一個條目時自動關(guān)閉。如果允許多選壹店，氣泡式彈窗應(yīng)該持續(xù)存在直到有人明確關(guān)閉或者點擊了邊界外的區(qū)域時關(guān)閉漾稀。
當自動關(guān)閉非模態(tài)氣泡式彈窗時嫉柴，總是自動保存內(nèi)容涩惑。非模態(tài)彈窗很容易因為觸擊了屏幕的其他部分而被關(guān)閉。只有當某人明確點擊取消按鈕時才拋棄所做的工作藏杖。
在屏幕合適的位置放置氣泡式彈窗。氣泡式彈窗的箭頭應(yīng)該盡可能直接地指向激活它的元素脉顿。因為氣泡式彈窗不能在屏幕中隨意拖動蝌麸，氣泡式彈窗不應(yīng)該覆蓋人們在使用時可能需要查看的重要內(nèi)容。氣泡式彈窗也不應(yīng)該覆蓋觸擊展示該彈窗的元素艾疟。
一次展示一個氣泡式彈窗来吩。同時展示多個氣泡式彈窗干擾界面并且讓人困惑。不要一個彈窗中出現(xiàn)另一個彈窗的級聯(lián)或?qū)盈B方式展示氣泡式彈窗蔽莱。如果需要展示一個新的氣泡式彈窗弟疆，首先應(yīng)該關(guān)閉當前打開的彈窗。
不要在氣泡式彈窗上面展示另一個新的視圖盗冷。除了警告框怠苔，沒有其他東西應(yīng)該出現(xiàn)在氣泡式彈窗的上面。
可能情況下仪糖，讓用戶通過一次觸擊就可以關(guān)閉一個氣泡式彈窗和打開另一個新的彈窗柑司。當幾個不同的欄按鈕都可以打開不同的彈窗時，避免額外的觸擊是特別可取的锅劝。
避免讓氣泡式彈窗太大攒驰。氣泡式彈窗不應(yīng)該占據(jù)整個屏幕。讓它足夠包含需要包含的內(nèi)容并且指向來自的地方鸠天。要注意系統(tǒng)可能會調(diào)整氣泡式彈窗的尺寸來確保它適合當前的屏幕讼育。
確保自定義的氣泡式彈窗看起來像氣泡式彈窗帐姻。盡管你可以在自定義許多氣泡式彈窗的視覺外觀稠集，避免創(chuàng)造一個人們不能識別為一個氣泡式彈窗的設(shè)計。當包含標準的控件和視圖時饥瓷，氣泡式彈窗會最有效剥纷。
當改變氣泡式彈窗尺寸的時候，提供平滑流暢的過渡呢铆。有一些氣泡式彈窗為同樣的信息提供標準和拓展的視圖晦鞋。如果你調(diào)整一個氣泡式彈窗的大小，提供改變的動效來避免給人新彈窗代替了舊彈窗的印象棺克。
上下文菜單/context menu
對于相關(guān)條目的快捷操作悠垛。類似于隱藏的內(nèi)聯(lián)按鈕。
要打開上下文菜單娜谊，人們可以使用系統(tǒng)自定義的長按手勢或者3D Touch（3D Touch可以更快的顯示上下文菜單）确买。打開之后，上下文菜單展示條目的預(yù)覽以及對其執(zhí)行的命令列表纱皆。人們可以選擇一個命令或者拖拽條目到另一個區(qū)域湾趾、窗口芭商、或者APP。
原則
一致性的使用上下文菜單搀缠。如果你為一些地方的條目提供上下文菜單铛楣，而另一些地方的條目不提供，人們將會不知道在哪里可以使用這些功能艺普，而且可能認為你的APP出現(xiàn)了問題簸州。
僅僅包含對于條目最常用的命令。例如歧譬，在郵件信息中的上下文菜單勿侯，包含回復(fù)和移動郵件是有意義的，但是包含格式化和郵箱命令是沒有意義的缴罗。列舉太多的命令會讓人不知所措助琐。
上下文菜單中的每個命令都包含一個標志符號。標志符號強化了命令的意義面氓，幫助人們快速理解他的功能兵钮。當你使用?SF Symbols，你可以在已有的符號中選擇一個代表你的命令舌界，或者編輯相關(guān)的符號以創(chuàng)建一個自定義的標志符號掘譬。如果你的上下文菜單包含一個子菜單，你不需要提供一個標志符號呻拌，因為它會自動增加一個系統(tǒng)提供的V型符號葱轩，表明存在附加的命令。
用子菜單來管理復(fù)雜性藐握。子菜單是上下文菜單的一個菜單項靴拱，用于展示與命令邏輯關(guān)聯(lián)的二級菜單。給子菜單提供能夠描述其內(nèi)容的簡潔易懂的標題猾普，這樣人們就可以在不展開子菜單的情況下預(yù)估它的命令袜炕。簡明的、面向動作的標題可以讓人們跳過他們在當前上下文中不需要的子菜單初家。
只有一級子菜單偎窘。盡管子菜單可以縮短上下文菜單，并明確人們可以執(zhí)行的命令溜在，超過一級的子菜單增加了體驗的復(fù)雜性陌知，而且人們很難導(dǎo)航。
將最常用的菜單項放在菜單的頂部掖肋。當人們打開一個上下文菜單的時候仆葡，焦點在菜單的頂部。將最常用的菜單項放在菜單的頂部可以幫助人們找到他們要找的菜單項培遵。
使用分隔符來組織相關(guān)的菜單條目浙芙。創(chuàng)造視覺分組可以幫助人們更快地掃描菜單登刺。例如，你可能使用分隔符將編輯菜單項相關(guān)的操作放一組嗡呼，將分享相關(guān)的菜單項放另一組纸俭。通常，上下文菜單中不需要超過三個組南窗。
避免為同一個菜單項同時提供上下文菜單和編輯菜單揍很。當同一個菜單項中兩種功能都可用的時候，會讓用戶感到困惑万伤，并且讓系統(tǒng)很難預(yù)測意圖窒悔。有關(guān)其它的指導(dǎo)，see?Edit Menus敌买。
避免提供用于打開項目預(yù)覽的動作按鈕简珠。人們可以觸擊打開正在預(yù)覽的項目，所以通常不需要明顯的“打開”按鈕虹钮。
編輯菜單/Edit Menus
在文本視圖聋庵、網(wǎng)頁視圖中，選擇文本后出現(xiàn)芙粱〖烙瘢可以看作上下文菜單針對文本編輯的一種特殊形式。
為當前上下文展示合適的命令春畔。默認情況下脱货，命令選項包含剪切、復(fù)制律姨、粘貼振峻、選擇、全選和刪除线召，其中任何一個都可以選擇禁用铺韧。如果沒有選擇任何東西，菜單不應(yīng)該展示需要選擇的選項缓淹，例如復(fù)制或剪切。同樣的塔逃，當已經(jīng)有了選擇讯壶，菜單中不應(yīng)該有“選擇”選項。
如果有必要的話湾盗，調(diào)整編輯選項的位置伏蚊。默認情況下，取決于可用空間格粪，菜單位于插入點或者選擇的上方或下方躏吊，并包含一個指向相關(guān)內(nèi)容的箭頭氛改。盡管你不能改變菜單的形狀，但是位置是可配置的——你可以使之避免遮蓋界面中重要的內(nèi)容或者部分比伏。
不要使用相同功能的其他控件來作為編輯菜單胜卤。提供多種方式來啟動同樣的操作會導(dǎo)致不一致的用戶體驗并且會導(dǎo)致混淆。例如赁项，如果你的APP讓人們通過菜單來復(fù)制內(nèi)容葛躏，那么也就不要再放置一個復(fù)制按鈕。
對于可能有用但不可編輯的文本悠菜，允許選擇和復(fù)制舰攒。人們通常希望將靜態(tài)內(nèi)容，例如圖像標簽或社交媒狀態(tài)等添加到電子郵件悔醋、便箋或web搜索中摩窃。
不要給按鈕添加編輯選項。如果你這樣做芬骄，試圖激活選項的人將會最終激活按鈕偶芍。
讓編輯選項可以撤銷。在動作執(zhí)行之前菜單不需要確認德玫。因為有人可能會在執(zhí)行操作之后改變主意匪蟀，所以總是要讓撤銷和重做可用。
用有意義的自定義命令來擴展編輯選項宰僧。你可以通過額外的APP特定的命令來增加價值材彪。與標準的命令一樣，任何自定義的命令都應(yīng)該是對選擇的文本或?qū)ο髨?zhí)行操作琴儿。
在系統(tǒng)提供的命令后面顯示自定義命令段化。不要將自定義命令插入在系統(tǒng)提供的命令中間，這些命令是被廣泛認知且經(jīng)常使用的造成。
最小化自定義命令的數(shù)量显熏。不要用太多的選擇壓垮人們。
保持自定義命令的名稱簡短晒屎。命令名稱應(yīng)該是動詞或者簡短的動詞短語喘蟆，簡潔的描述將要執(zhí)行動作。使用標題風格的大小寫形式——除了冠詞鼓鲁、并列連詞和四個或四個字母以下的介詞以外蕴轨，每個單詞都要大寫。
下拉菜單/Pull-Down Menus
與氣泡彈窗類似骇吭，提供更多的信息橙弱。但是不像氣泡彈窗會讓背景變暗，選項信息也更為簡潔。
在iOS 14及更高版本中棘脐，按鈕可以顯示一個下拉菜單斜筐，其中列出了人們可以選擇的項目或動作。您可以使用下拉菜單（或簡單地使用菜單）來提供與按鈕操作直接相關(guān)的項目蛀缝，或提供在當前上下文中有用的操作列表顷链。
與動作列表（action sheets ）、上下文菜單（context menus）和氣泡彈窗（and popovers）相比内斯，下拉菜單有幾個優(yōu)勢蕴潦。
· 菜單與按鈕位置上接近，因此人們可以立即了解菜單項與他們正在執(zhí)行的動作之間的關(guān)系俘闯。
· 除了列出的動作之外潭苞，菜單還可以提供可供人們用來影響主要動作的選擇。
· 菜單進入視圖的動作迅速真朗，并且在菜單出現(xiàn)時不會使屏幕變暗此疹，從而使過渡效果和總體體驗更加輕盈。
不要將所有操作都放在菜單中遮婶。菜單可讓您提供一系列項目蝗碎，而不會弄亂您的界面，但是將所有操作置于菜單中意味著人們必須至少點擊兩次才能執(zhí)行任何操作旗扑”钠铮考慮將最重要的操作放在主界面中，并使用菜單提供補充項目臀防。例如眠菇，編寫新消息是人們在“消息”中執(zhí)行的最常見操作，因此“撰寫”按鈕在主界面中突出顯示袱衷。為了給人們提供方便的一組編輯選項捎废，Messages會將菜單附加到“編輯”按鈕上，而不是在主界面中顯示這些選項致燥。
使用菜單顯示與操作直接相關(guān)的選項登疗。通過菜單，您可以在無需向主界面添加按鈕的情況下嫌蚤，為人們提供澄清動作目標或自定義動作行為的方法（細分動作目的）辐益。例如：
當用戶點擊應(yīng)用中的“添加”按鈕時，您可以顯示一個菜單搬葬，讓他們指定要添加的項目荷腊。
如果您的應(yīng)用支持排序，則可以使用菜單讓人們選擇要進行排序的屬性急凰。
在允許在多個位置之間導(dǎo)航的應(yīng)用程序中，菜單可以使人們導(dǎo)航到特定位置，而不用追溯每個步驟抡锈。
使用菜單提供輔助應(yīng)用操作疾忍。如果您的應(yīng)用程序包含不屬于主界面的基本操作，則可以將這些操作分組在菜單中床三。例如一罩，“文件”除了查看和排序內(nèi)容的選項外，還使用菜單提供諸如添加文件夾或掃描文檔之類的操作撇簿。
考慮添加“更多”按鈕以顯示菜單聂渊。“更多”按鈕可以與大多數(shù)界面很好地集成在一起，人們通常都知道四瘫，它可以訪問其他功能汉嗽。您可以通過將省略號放在圓形按鈕中來創(chuàng)建“更多”按鈕（請參閱SF符號以了解有關(guān)符號的更多信息）≌颐郏或者饼暑，您可以通過在現(xiàn)有按鈕上執(zhí)行特定手勢來讓人們顯示菜單。例如洗做，在iOS 14和更高版本中弓叛，Safari通過顯示選項卡相關(guān)操作的菜單（如“新建選項卡”和“關(guān)閉所有選項卡”）來響應(yīng)選項卡按鈕上的長按手勢。（“更多”按鈕觸發(fā)或者手勢觸發(fā)）
使用分隔符以可視方式對相關(guān)菜單項進行分組诚纸。創(chuàng)建視覺分組可以幫助人們更快地掃描菜單撰筷。例如，“文件”應(yīng)用中的“更多”菜單使用分隔符來幫助人們畦徘，從與查看和排序相關(guān)的項目中毕籽，區(qū)分影響內(nèi)容的操作。在菜單中使用三個以上的組可能使理解變得困難旧烧。
讓人們知道菜單項何時具有破壞性影钉，并要求他們確認意圖。菜單使用紅色文本突出顯示您標識為潛在破壞性的操作掘剪。當人們選擇破壞性操作時平委，系統(tǒng)會顯示一個操作面板（action sheet）（iOS）或彈出框（popover ）（iPadOS），他們可以在其中確認選擇或取消該操作夺谁。由于操作面板出現(xiàn)在與菜單不同的位置廉赔，并且需要有意地撤消，因此它可以幫助避免錯誤地丟失數(shù)據(jù)匾鸥。
提供值時蜡塌，在菜單項中包含標志符號。如果需要澄清項目的含義勿负，可以在其標題后顯示標志符號或圖像馏艾。為此，使用SF符號（SF symbol）可以幫助您提供熟悉的體驗，同時確保該符號在各個比例下均與文本保持對齊琅摩。
如果有意義铁孵，顯示菜單標題。在大多數(shù)情況下房资，人們會理解菜單項的上下文蜕劝，因為當他們點擊按鈕執(zhí)行操作時，菜單會立即顯示轰异。如有必要岖沛，您可以提供簡潔的標題，顯示在菜單頂部搭独。
菜單
Material Design 中特有婴削，類似于iOS中氣泡彈窗、上下文菜單戳稽、編輯菜單馆蠕、下拉菜單的結(jié)合。使用場景涵蓋更廣惊奇。易于打開互躬、關(guān)閉，適合當前的用戶需求颂郎，菜單項便于掃描吼渡。與平鋪的選項相比，更節(jié)約空間乓序。
用戶單擊按鈕寺酪、操作圖標或其他控件可以打開菜單。菜單上顯示一系列的選項替劈，每行顯示一個選項寄雀，它可以影響應(yīng)用、視圖陨献、或視圖中的選定元素盒犹。
原則
關(guān)閉菜單
觸摸菜單外部或觸發(fā)菜單的元素可以關(guān)閉菜單。
選擇了一個菜單項后也應(yīng)該關(guān)閉菜單眨业。一個例外是當菜單允許選擇多個項目時急膀，例如通過使用復(fù)選標識。
位置
菜單出現(xiàn)在所有其他應(yīng)用內(nèi)部的 UI 元素上面龄捡。
菜單顯示在觸發(fā)它的元素的位置卓嫂，當前選中的菜單項顯示在觸發(fā)它的元素的頂部。（平面上與觸發(fā)的區(qū)域關(guān)聯(lián)聘殖，縱向上位于頂層）
菜單可以滾動
如果菜單的高度不足以顯示所有的菜單項晨雳，那么菜單可以內(nèi)部滾動行瑞。一個典型的例子是在手機橫屏狀態(tài)下查看菜單。
如果不適用于特定的頁面內(nèi)容悍募，菜單項可能被禁用蘑辑。與頁面內(nèi)容相關(guān)的菜單將根據(jù)當前應(yīng)用狀態(tài)動態(tài)改變可用的菜單項洋机。
移動端一般菜單只有一級坠宴，不會出現(xiàn)多級菜單的情況。菜單不應(yīng)該用作應(yīng)用中主要的導(dǎo)航方法绷旗。
菜單項
按鈕或控件的標簽應(yīng)該簡明喜鼓、準確的反映出菜單中的菜單項。菜單欄通常使用一個單詞作為標簽衔肢，像 “文件” 庄岖、 “格式” 、 “編輯” 和 “視圖” 角骤。其他內(nèi)容可能會有更長的標簽隅忿。（iOS建議增加圖標輔助說明菜單項的含義）
菜單顯示一組一致的菜單項。每個菜單項可以基于應(yīng)用的當前狀態(tài)來啟用或禁用邦尊。（選項數(shù)量背桐、位置不變，可以選擇啟用或禁用）
不要重復(fù)顯示已選中的菜單項蝉揍。
單行顯示
每一個菜單項都只能使用單行文本（一個單詞或短語）來描述被選中時執(zhí)行的操作链峭。
菜單項還可以包括：
圖標和幫助文本，比如快捷鍵又沾。
像復(fù)選標記之類的控件來標識多選條目或狀態(tài)（詳見列表控件）
菜單排序
帶有靜態(tài)內(nèi)容的菜單應(yīng)該在菜單的頂部放置最常用的菜單項弊仪。
帶有動態(tài)內(nèi)容的菜單可能具有其他行為，例如在菜單的頂部放置之前使用過的字體杖刷。順序可以根據(jù)用戶的操作而改變励饵。
禁用菜單項
將菜單項禁用，而不是移除滑燃，這樣可以讓用戶知道在正確的條件下它們是可用的役听。
例如，當沒有東西可以恢復(fù)時，“恢復(fù)”菜單項是禁用的。在內(nèi)容被選中之前辆它， “剪切” 和 “復(fù)制” 菜單項是禁用的表谊。
菜單的類型包括上下文菜單、下拉菜單场靴、展開的下拉菜單（Exposed dropdown menu）。
上下文菜單
上下文菜單能夠根據(jù)應(yīng)用的當前狀態(tài)動態(tài)的改變可用的菜單項。（上下文菜單的菜單項可以選擇不同情況移除或者禁用）
1-與當前上下文無關(guān)的菜單項可以被移除.
2-相關(guān)的但需要滿足特定條件才能使用的菜單項可以被禁用孽椰。例如昭娩， “復(fù)制” 選項可以在選中文本后才啟用。
單個菜單項狀態(tài)
一些應(yīng)用狀態(tài)會導(dǎo)致上下文菜單只含一個菜單項黍匾。例如栏渺，當選中網(wǎng)頁上的文本時，Android 只顯示 “復(fù)制” 菜單項锐涯，因為用戶不能剪切或粘貼文本磕诊。
下拉菜單
下拉菜單通常位于觸發(fā)它的元素的下方。根據(jù)所點擊的目標而顯示不同的動作纹腌。
展開的下拉菜單（Exposed dropdown menu）
下拉選擇模式霎终，單選且選項較多、展示空間受限時使用升薯。
滑動選擇/picker/Wheels
選擇器包含一個或多個可滾動的不同值列表莱褒，每個都有一個唯一的已選值——以更深的文字顯示在視圖的中心。選擇其總是在屏幕的底部顯示涎劈，或者當用戶編輯字段或輕觸菜單時在氣泡式彈窗中顯示广凸。選擇器也可以內(nèi)聯(lián)顯示，例如在日歷事件中編輯一個預(yù)約日期蛛枚。選擇器的高度大約是五行列表值的高度谅海，選擇器的寬度不是屏幕的寬度，就是封閉視圖的寬度坤候，具體取決于設(shè)備和上下文（context）胁赢。
使用可預(yù)測且邏輯排序的值。當可滾動列表靜止不動的時候白筹，選擇器中的許多值是被隱藏的智末。最好讓人們可以預(yù)測這些值是什么，例如一列按字母順序排列的國家徒河，這樣他們就可以快速地瀏覽這些列表系馆。
避免切換屏幕來展示選擇器。當顯示在上下文中顽照、被編輯字段的下方或附近時由蘑，選擇器工作良好。
考慮使用選擇器提供中到長的項目列表代兵。如果需要顯示相當短的選項列表尼酿，請考慮使用下拉菜單而不是選擇器。盡管選擇器使您可以輕松快速地滾動瀏覽許多項目植影，但它可能會給一小部分項目增加太多視覺效果裳擎。另一方面，如果需要顯示大量項目思币，請考慮使用列表或表格鹿响。列表和表格的高度可以調(diào)整羡微，并且表格可以包含索引，這可以更快地定位列表的一部分惶我。有關(guān)指導(dǎo)妈倔，請參閱表。
底部卡片/sheet：bottom
包含補充內(nèi)容的卡片绸贡，固定在屏幕底部顯示盯蝴。可以顯示各種內(nèi)容和布局恃轩。
三種類型：標準底部卡片结洼、模態(tài)底部卡片、拓展底部卡片叉跛。
標準底部卡片
屏幕主要內(nèi)容的補充，當用戶與主要內(nèi)容交互時蒸殿，其仍然可見筷厘。可以展開與折疊宏所。
模態(tài)底部卡片
類似于action sheet酥艳，底部邊緣向上滑出的一個面板，它用于向用戶展示額外的內(nèi)容爬骤，也可以用于顯示來自其他應(yīng)用的深層鏈接充石。
打開后，背景添加蒙版霞玄，只可對該部分進行操作骤铃。點擊蒙版、關(guān)閉按鈕坷剧、下滑可以退出模態(tài)惰爬。
拓展底部卡片
小的、折疊的卡片惫企，用戶可以將其展開以訪問關(guān)鍵的特性或任務(wù)撕瞧。與標準底部卡片一樣持續(xù)存在，與模態(tài)底部卡片一樣提供入口狞尔。（淘寶的詳情丛版、智聯(lián)招聘）
相應(yīng)用戶對于主屏幕的操作，可以點擊擴展偏序，展開后可以點擊折疊页畦。
防止在屏幕的底部、尾部禽车，以最大程度的減少屏幕上的內(nèi)容寇漫。
與其它組件的配合使用
標準底部按鈕一般不與底部的標簽欄刊殉、工具欄同時出現(xiàn)。
動作面板/action sheet
動作面板是響應(yīng)控件或操作時出現(xiàn)的特定警報樣式州胳，并且提供與當前上下文有關(guān)的兩種或更多的選擇记焊。使用動作面板是為了讓人們啟動任務(wù)，或在執(zhí)行潛在的破壞性操作前請求確認栓撞。在較小的屏幕上遍膜，動作列表從屏幕底部滑出。在大一點的屏幕上瓤湘，動作面板像彈窗一樣一次全部出現(xiàn)瓢颅。
在執(zhí)行潛在的破壞性操作之前，請使用動作面板請求確認弛说。要讓人們選擇與沒有破壞性的任務(wù)相關(guān)的項目或動作挽懦，可以使用下拉菜單。
提供“取消”按鈕木人，使人們可以重新考慮破壞性操作信柿。“取消”按鈕應(yīng)出現(xiàn)在操作表的底部。
突出顯示破壞性選擇醒第。將紅色用于執(zhí)行破壞性或危險操作的按鈕渔嚷，并將這些按鈕顯示在操作表的頂部。
避免讓動作列表滾動稠曼。如果操作表上有太多選項形病，則人們必須滾動查看所有選項。滾動需要花費額外的時間來做出選擇霞幅，并且滾動操作很難做到不會無意間點擊一個按鈕漠吻。
側(cè)邊卡片/Sheet：side
側(cè)邊卡片可以承載補充的內(nèi)容，這些內(nèi)容固定在屏幕的左邊或右邊邊緣蝗岖。內(nèi)容較多時侥猩，可以上下滾動。
與導(dǎo)航抽屜放置在對立的一側(cè)抵赢。
分為標準側(cè)板和模態(tài)側(cè)板欺劳。
標準側(cè)板常駐顯示，一般在平板電腦等大尺寸屏幕上使用铅鲤』幔可以折疊或者展開。
通常用于：
·主要內(nèi)容區(qū)需要滾動邢享，側(cè)板保留固定的功能與內(nèi)容鹏往。
·放置影響主要內(nèi)容區(qū)域的上下文動作，如過濾器骇塘。
·輔助信息或元數(shù)據(jù)伊履，例如位置或者照片細節(jié)韩容。
·可以在單一頁面中完成的簡單任務(wù)，例如配置選項或者購買前指定商品的詳細信息唐瀑。
模態(tài)側(cè)板顯示時會出現(xiàn)黑色半透明蒙版群凶，取消后才能與下層的內(nèi)容進行交互。用戶注意力更加聚焦哄辣。
點擊黑色半透明蒙版请梢、向邊緣滑動、可以的話在側(cè)邊卡片的頭部使用一個可以關(guān)閉的按鈕力穗。
活動視圖/Activity Views
類似模態(tài)底部卡片毅弧。
活動是一項任務(wù)，例如“復(fù)制”当窗，“收藏夾”或“查找”够坐，在當前上下文中很有用。一旦啟動超全，活動就可以立即執(zhí)行任務(wù)咆霜，或在繼續(xù)之前要求更多信息∷恢欤活動由活動視圖管理，活動視圖顯示為工作表或彈出窗口光酣，具體取決于設(shè)備和方向疏遏。使用活動可以使人們訪問您的應(yīng)用可以執(zhí)行的自定義服務(wù)或任務(wù)。
系統(tǒng)提供了一系列內(nèi)置的活動救军，包括打印财异、信息和AirPlay。這些任務(wù)總是在活動視圖中首先出現(xiàn)而且不能被重新排序唱遭。你不需要創(chuàng)建自定義的活動來執(zhí)行這些內(nèi)置的任務(wù)戳寸。活動視圖也會顯示來自其他應(yīng)用程序的共享和操作擴展拷泽。Sharing and Actions.
設(shè)計簡單的模板圖像來代表你自定義的活動疫鹊。模板圖像使用遮罩來創(chuàng)建圖標。使用帶有合適透明度和抗鋸齒的黑色和白色司致，不要使用陰影拆吆。模板圖像應(yīng)該處于 70px × 70px區(qū)域大小的中心。
創(chuàng)建簡潔且能夠描述任務(wù)活動的標題脂矫。標題在活動視圖中的圖標下面展示枣耀。短標題效果良好。當一個標題過長的時候庭再，iOS首先會縮小字號捞奕，然后要是仍然太長牺堰，就會截斷它。一般情況下颅围，避免在標題中包含你的公司或產(chǎn)品名字伟葫。
確保活動適合當前上下文谷浅。盡管系統(tǒng)提供的任務(wù)不能在活動視圖中被重新排序扒俯，但是但他對你的APP不適用時，你可以刪除它一疯。例如撼玄。為了阻止人們印刷圖片，你可以去除“打印”活動墩邀。你也可以定義在特定的時間顯示哪些自定義任務(wù)
使用“操作”按鈕來顯示活動視圖掌猛。當人們點擊“操作”按鈕時，他們習慣于進入系統(tǒng)提供的活動視圖眉睹。避免提供另一種方式來做同樣的事情而讓用戶感到困惑荔茬。
選項頁面
用一個頁面來展示較多、信息較復(fù)雜的選項竹海，類似于全屏對話框慕蔚，可以采用宮格布局、表單布局等形式斋配，與tables孔飒、collection類似。
頁面中可以使用排序艰争、搜索等形式坏瞄。列表和表格的高度可以調(diào)整，并且表格可以包含索引甩卓，這可以更快地定位列表的一部分鸠匀。如攜程的地址選擇頁面。
日期選擇器（ios舊）
對于選擇一個特定日期逾柿、時間或者兩者同時選擇而言缀棍，日期選擇器是一個高效的交互界面。它還提供了一個顯示倒計時計時器的界面鹿寻。
日期選擇
用于選擇日期或者時間睦柴，包含單個日期選擇（餐廳預(yù)訂、會議日程安排）和范圍選擇（酒店預(yù)訂毡熏、航班預(yù)訂等）坦敌。分為嵌入、內(nèi)聯(lián)式、滾輪式狱窘、彈窗/緊湊式杜顺。還有一種特殊的為手動輸入模式，即文本框（生日）蘸炸。
內(nèi)聯(lián)-可編輯的字段躬络，適合于較小的空間（例如列表或表格行），并展開以顯示編輯視圖
滾輪—傳統(tǒng)的滾輪組搭儒。
緊湊—展開后可在模態(tài)上下文中顯示編輯視圖的標簽穷当。
日期選擇器具有四種模式，每種模式都呈現(xiàn)一組不同的可選值淹禾。
日期馁菜。顯示月份，月份中的幾天和年份铃岔。
時間汪疮。顯示小時，分鐘和（可選）AM / PM名稱毁习。
日期和時間智嚷。顯示日期，小時纺且，分鐘和（可選）AM / PM名稱盏道。
倒計時器。顯示小時和分鐘载碌，最多23小時59分鐘摇天。此模式不適用于緊湊型樣式。
當空間有限時恐仑，請使用緊湊的日期選擇器。折疊后为鳄，緊湊型樣式將顯示一個按鈕裳仆，該按鈕以應(yīng)用程序的主色顯示當前值。當人們點擊按鈕時孤钦，日期選擇器將擴展為模態(tài)視圖歧斟，從而提供對熟悉的日歷樣式編輯器和時間選擇器的訪問。在模式視圖中偏形，人們可以對日期和時間進行多次編輯静袖，然后在視圖外部輕按以確認他們的選擇。
指定分鐘數(shù)時俊扭，請考慮提供更少的分類队橙。默認情況下，分鐘列表包含60個值（0到59）。您可以選擇增加分鐘間隔捐康，只要將其平均分配為60即可仇矾。例如，您可能需要四分之一小時間隔（0解总、15贮匕、30和45）。
清晰花枫。清楚地標明重要日刻盐，例如當前日期和選定日期。
03-頁面級操作
工具欄/底部欄/Toolbars
iOS叫工具欄（Toolbars）劳翰，安卓叫底部欄（App bars: bottom）敦锌，主要用來放置與當前頁面內(nèi)容相關(guān)的按鈕，在需要的時候出現(xiàn)磕道，在不需要的時候隱藏供屉。
工具欄在APP屏幕的底部出現(xiàn)，包含執(zhí)行當前視圖或內(nèi)容相關(guān)操作的按鈕溺蕉。工具欄是半透明的伶丐，可能有一個背景色彩，總是在人們看不需要的時候被隱藏疯特。例如在Safari瀏覽器中哗魂，當你開始滑動屏幕似乎開始閱讀內(nèi)容的時候，工具欄會被隱藏漓雅。你可以通過點擊屏幕底部讓它再次出現(xiàn)录别。當鍵盤出現(xiàn)在屏幕中的時候工具欄也通常被隱藏。
了解工具欄和標簽欄的區(qū)別很重要邻吞，因為兩種類型的欄都出現(xiàn)在應(yīng)用程序屏幕的底部组题。工具欄包含用于執(zhí)行與當前上下文有關(guān)的動作的按鈕，例如創(chuàng)建項目抱冷，刪除項目崔列，添加注釋或拍照。標簽欄使人們可以在應(yīng)用程序的不同部分之間快速切換旺遮，例如“時鐘”應(yīng)用程序中的“警報”赵讯，“秒表”和“計時器”選項卡。有關(guān)指導(dǎo)耿眉，請參見標簽欄边翼。工具欄和標簽欄永遠不會在同一視圖中同時出現(xiàn)。
提供有意義的工具欄按鈕鸣剪。工具欄應(yīng)該包含在當前語義下有意義的常用的指令组底。
考慮圖標或者文字按鈕是否適合于你的APP丈积。但你需超過三個工具欄按鈕的時候，圖標很好用斤寇。當你只有三個或更少按鈕的時候桶癣，文本有時候更加清晰直觀。例如娘锁，在日歷應(yīng)用中牙寞，就是用文本按鈕，因為圖標可能會讓人感到困惑莫秆。文本的使用也使得收件箱按鈕（ Inbox button）能夠展示日歷和活動邀請的數(shù)量间雀。
避免在工具欄中使用分段控件。分段控件讓人們切換內(nèi)容镊屎，而工具欄是特定于當前視圖的惹挟。如果你需要提供一種方式來切換內(nèi)容，考慮使用標簽欄缝驳。See?Tab Bars.
給文本按鈕留有足夠的空間连锯。如果你的工具欄包含多個按鈕，這些按鈕的文本可能會擠到一起用狱，讓這些按鈕難以識別运怖。在按鈕中間插入固定的空間來增加分隔。
底部欄
Material Design中夏伊，底部欄可以包含適用于當前頁面上下文的操作摇展。包含左側(cè)的導(dǎo)航菜單控件和一個浮動操作按鈕（如果有的話）。
FAB（浮動操作按鈕）可以沒有溺忧，也可以居中放置（主要動作）或者居右放置（返回操作）咏连。
向上滑動過程中，隱藏底部欄（只保留FAB）鲁森。向下滑動時祟滴，顯示底部欄。
當鍵盤出現(xiàn)時歌溉，隱藏底部欄踱启。
與其它組件的配合使用
提示信息（SnackBar）出現(xiàn)在底部欄的Y軸上方，而不是Z軸上方研底。
頂部欄/導(dǎo)航欄/Navigation Bars
iOS叫導(dǎo)航欄（navigation bars），安卓叫頂部欄（App bars: top）透罢。頂部欄是導(dǎo)航+頁面級操作榜晦。
頂部欄導(dǎo)航：主要用于縱向深入的導(dǎo)航，如查看詳情頁面羽圃，頂部點擊返回按鈕即可返回乾胶。各頁面之間保持一致性。
頂部欄操作：頂部欄提供與當前屏幕相關(guān)的內(nèi)容和操作，可以包含品牌元素识窿、屏幕標題斩郎、導(dǎo)航和操作按鈕∮髌担可以轉(zhuǎn)換為情境化的動作欄缩宜。導(dǎo)航可以調(diào)出抽屜導(dǎo)航菜單，操作可以使用下拉菜單放置更多的動作甥温。
導(dǎo)航欄可以情境化顯示锻煌，及根據(jù)用戶的操作、頁面狀態(tài)的變化來顯示不同的內(nèi)容姻蚓。
ios的導(dǎo)航欄出現(xiàn)在APP界面的頂部宋梧，在狀態(tài)欄的下方，能夠在一些不同層級的頁面中提供導(dǎo)航狰挡。當加載一個新頁面的時候捂龄，導(dǎo)航欄的左側(cè)一般會出現(xiàn)一個返回按鈕，與前一個頁面的標題放在一起加叁。有時候倦沧，導(dǎo)航欄的右邊會包含一個編輯或者完成按鈕的控件，用來管理當前視圖的內(nèi)容殉农。在分屏視圖內(nèi)刀脏，導(dǎo)航欄可能只會出現(xiàn)在分屏視圖的窗格中。導(dǎo)航欄是透明的超凳，也許會有一個背景色調(diào)粹污。而且可以設(shè)定在鍵盤出現(xiàn)、手勢發(fā)生家制、視圖縮放的時候隱藏策治。
規(guī)則#
可在導(dǎo)航欄中使用 SegmentedControl 對內(nèi)容進行層級劃分。
避免用過多的元素填滿導(dǎo)航欄创夜。一般情況下杭跪，一個『返回按鈕』、一個『標題』驰吓、一個『當前視圖的控件』就足夠了涧尿；如果已經(jīng)有了 SegmentedControl ，一般只搭配一個『返回按鈕』或者『當前視圖的控件』檬贰。
為圖標和文字控件姑廉，提供更大的點擊熱區(qū)。
安卓規(guī)范中翁涤，頂部導(dǎo)航欄可以用更大的高度桥言，增加背景圖片（不干擾圖標識別的前提下）萌踱。滾動時可以隱藏導(dǎo)航欄、導(dǎo)航欄高于內(nèi)容區(qū)域号阿、更大高度的導(dǎo)航欄變?yōu)檎８叨鹊膶?dǎo)航欄并鸵。
當全屏展示內(nèi)容時，考慮暫時隱藏導(dǎo)航欄扔涧。當你試圖聚焦于內(nèi)容之上時园担，導(dǎo)航欄可能會形成干擾。暫時隱藏導(dǎo)航欄可以提供一個更加沉浸的體驗扰柠。照片應(yīng)用在全屏瀏覽照片時粉铐，會隱藏導(dǎo)航欄和其它交互元素。如果你采取類似的行為卤档，讓人們可以通過一個簡單的手勢如觸擊蝙泼，來恢復(fù)導(dǎo)航欄。
tips：當你不需要導(dǎo)航或者需要多樣化的控件來管理內(nèi)容時劝枣，使用工具欄汤踏。
導(dǎo)航欄標題
可在導(dǎo)航欄中顯示當前視圖的標題。如果標題非常冗長且無法精簡舔腾，可以空缺溪胶。標題默認左對齊（iOS默認居中對齊）。標題的文本應(yīng)該簡短直白稳诚，避免省略顯示哗脖，必要時可以折行顯示。
考慮在導(dǎo)航欄顯示當前視圖的標題扳还。在大多數(shù)的場景下才避，標題幫助人們理解他們正在瀏覽的是什么。但是氨距，如果給導(dǎo)航欄命名看起來是多余的桑逝，你可以讓標題處空著。例如俏让，備忘錄不需要當前備忘的標題楞遏，因為內(nèi)容的第一行就提供了所需的上下文信息（context）。
當你想要特別強調(diào)上下文信息（context）的時候首昔，使用大標題形式寡喝。大標題不會與內(nèi)容競爭，但是在一些APP中勒奇，大而粗的標題文本可以幫助人們在瀏覽和搜索時確定方向拘荡。例如，在選項卡式布局中撬陵，大標題可以幫助澄清當前激活的選項珊皿，并且在人們需要滾動到頂部時提示他們。電話采用這種策略（使用大標題來強調(diào)）巨税，而音樂使用大標題來區(qū)分專輯蟋定、藝術(shù)家、播放列表和收銀機等不同內(nèi)容區(qū)域草添。在iOS 13和更新的版本中驶兜，大標題不默認包含背景和陰影。同時远寸，當人們開始滾動頁面內(nèi)容時抄淑，大標題會轉(zhuǎn)變?yōu)闃藴蕵祟}樣式。
在大標題導(dǎo)航欄中考慮隱藏邊框驰后。在iOS 13和更新的版本中肆资，你可以通過去除導(dǎo)航欄的陰影來隱藏底部邊框（邊框會在人們滾動內(nèi)容區(qū)域時自動重新出現(xiàn)）。無邊框的導(dǎo)航樣式在大標題的導(dǎo)航欄中表現(xiàn)良好灶芝，因為它增強了標題和內(nèi)容之間的聯(lián)系感郑原。但是，在標準大小標題的導(dǎo)航欄中夜涕，無邊框樣式可能效果并不好犯犁。因為欄的標題和按鈕可能會很難辨別。一個例外是在iPad的分屏視圖中女器，你可能會通過在主視圖和詳情視圖中都使用無邊框樣式來保持二者之間的連貫性酸役。
導(dǎo)航欄控件
避免放太多控件導(dǎo)致導(dǎo)航欄變得擁擠。一般情況下驾胆，導(dǎo)航欄的內(nèi)容最多包括當前視圖的標題涣澡、一個返回按鈕、一個管理當前視圖的控件俏拱。如果你在導(dǎo)航欄中使用了分段控件（segmented control）暑塑，導(dǎo)航欄中就應(yīng)該除了分段控件外不再包含標題或者其他控件。
使用標準的返回按鈕锅必。人們知道在多層級的信息中間事格，標準的返回按鈕可以使他們原路返回。然而搞隐，如果你采用了自定義的返回按鈕驹愚，要確保它看起來像是一個返回按鈕，有直觀的表現(xiàn)劣纲，和你其它的界面相匹配逢捺，而且在整個APP中保持一致。如果你是用自定義圖片代替了系統(tǒng)提供的V形返回按鈕癞季，請同時提供一個自定義遮罩圖片(custom mask image)劫瞳。iOS使用這個遮罩圖片來實現(xiàn)轉(zhuǎn)場時的過渡動畫倘潜。
不要包含多段的面包屑路徑。返回按鈕總是表明一種單一的動作——回到之前的頁面志于。如果你認為人們在沒看到當前頁面的完整路徑情況下會迷失方向涮因，考慮讓你的APP層級更加扁平。
給文本按鈕提供充足的空間伺绽。如果你的導(dǎo)航欄包含了多個文本按鈕养泡，這些按鈕的文本可能會重疊到一起，導(dǎo)致按鈕無法識別奈应。通過在按鈕之間插入固定空間項來增加間距澜掩。
當你希望你的APP信息層級更扁平的時候，考慮在導(dǎo)航欄使用分段控件（segmented control）杖挣。如果在導(dǎo)航欄使用分段控件肩榕，僅僅在信息層級的頂層使用，并且確保在低層級中使用準確的返回按鈕標題程梦。For additional guidance, seeSegmented Controls.
04-其它
圖片選擇/Image lists
一般用于上傳圖片前的文件選擇操作点把，包含增、刪屿附、查的基本功能郎逃。數(shù)量限定時會有提示。
滑動輸入條/Sliders
滑塊是一個帶有被稱為“拇指”控件的水平軌道挺份，你可以用的手指在最大和最小值之間滑動褒翰，例如在媒體播放期間屏幕亮度等級或者位置。當滑塊值發(fā)生改變的時候匀泊，最小值和“拇指”控件之間的軌道是被填充的优训。滑塊可以選擇性的在左右兩邊顯示圖標來描述最大和最小值的含義各聘。
可以選擇一個值或者范圍揣非。
如果可以增加價值，自定義滑塊的外觀躲因。滑塊的外觀早敬，包括軌道顏色、“拇指”圖像大脉，以及左右的圖標搞监，可以調(diào)整以融入你APP的設(shè)計并傳達意圖。例如镰矿，調(diào)整圖像大小的圖標琐驴，可以在左邊展示小圖像圖標而在右邊展示大圖像圖標。
不要用滑塊來調(diào)節(jié)音量。如果你的APP中需要提供音量控制绝淡，使用可自定義的音量視圖宙刘，包含了音量等級滑塊和更改活動音頻輸出設(shè)備的的控件。了解更多關(guān)于使用音量視圖牢酵， see?MPVolumeView荐类。
原則
默認狀態(tài)下，左邊為最小值茁帽，右邊為最大值。
一般水平放置屈嗤。
提供連續(xù)或者間斷的值潘拨。
色彩選擇/Color Wells
輕按時，顏色就會顯示系統(tǒng)提供的顏色選擇器饶号。人們可以使用顏色選擇器為文本铁追，形狀，標記工具和其他元素選擇顏色茫船。
通過顏色選擇器的選項卡式界面琅束，人們可以從網(wǎng)格或光譜中選擇顏色，也可以通過選擇RGB值來選擇顏色算谈。人們還可以通過點擊吸管按鈕并使用放大鏡來選擇出現(xiàn)在屏幕上任何地方的顏色涩禀，從而選擇一種顏色。
最好使用系統(tǒng)提供的顏色選擇器來幫助人們選擇顏色然眼。使用內(nèi)置的顏色選擇器可以提供一致的用戶體驗艾船，此外還可以使人們保存可以從任何應(yīng)用程序訪問的一組顏色。系統(tǒng)定義的顏色選擇器還可以幫助Mac版iPad應(yīng)用程序為macOS用戶提供熟悉的體驗高每。
步進器/Steppers
用作增加或者減少當前數(shù)值屿岂。步進器是一個兩段式控件，用于增加或減少增量值鲸匿。默認情況下爷怀，步進器的一個段顯示一個加號，而另一段顯示一個減號带欢。如果需要运授，可以將這些符號替換為自定義圖像。
使受步進器影響的值顯而易見洪囤。步進器本身不會顯示任何值徒坡，因此請確保人們知道使用步進器時正在更改的值。
如果可能會出現(xiàn)較大的取值變化瘤缩，請不要使用步進器喇完。步進器可以很好地進行需要幾次輕擊的小改動。例如剥啤，在打印屏幕上锦溪，使用步進器來設(shè)置份數(shù)是有意義的不脯，因為人們很少對此設(shè)置進行太多更改。另一方面刻诊，使用步進器來選擇頁面范圍是沒有意義的防楷，因為即使合理的頁面范圍也需要大量的點擊。
文章結(jié)構(gòu)
組件庫
Ant Design Mobile | A Mobile Design Specification
Themes - iOS - Human Interface Guidelines - Apple Developer
概述 - Material Design - Material design 中文文檔则涯，指南复局，翻譯
https://www.material.io/design/introduction#updates
Vant - Mobile UI Components built on Vue
參考資源
Calltoidea - Light up your imagination
Mobile Design Patterns - Pttrns
UI Garage - Daily UI Inspiration & Patterns for Web, Mobile & Tablet.
