作者對原型設(shè)計中的常用的一些通用元件進行了場景和規(guī)范整理，主要分為信息欄Bars篇、視圖Views篇、控件Controls篇三章。本章主要介紹Controls篇，源文件和另外兩章的規(guī)范請參考下文鏈接。

百度網(wǎng)盤下載地址：https://pan.baidu.com/s/1-deWfW_I8qUM2c6HFWZYqg

系統(tǒng)按鈕（System Buttons)

使用場景：系統(tǒng)按鈕經(jīng)常出現(xiàn)在導(dǎo)航欄和工具欄中，但可以在任何地方使用。

原生規(guī)范【iOS Human Interface Guidelines】：

1. 左側(cè)第一個按鈕為信息按鈕（Info Button),用于顯示關(guān)于應(yīng)用程序的配置細節(jié)。
2. 左側(cè)第二個按鈕為詳細信息按鈕（Detail Disclosure Button），點擊后打開一個新的視圖，通常用于表格中，以訪問關(guān)于特定行的信息。
3. 第三個按鈕為添加聯(lián)系人按鈕（Add Contact Buttons)，用來瀏覽現(xiàn)有聯(lián)系人的列表，并選擇一個插入文本字段或其他視圖。

編輯菜單（Edit Menu)

使用場景：

在文本區(qū)域，text view、web view 或 image view 中長按或雙擊一個元素，來選擇內(nèi)容并彈出編輯選項，例如復(fù)制和粘貼。

原生規(guī)范【iOS Human Interface Guidelines】：

1. 為當前上下文環(huán)境顯示適當?shù)拿睿?/li>
2. 如有必要，可調(diào)整編輯選項的位置；
3. 不要使用與 edit menu 功能相同的其他控件；
4. 允許對可能有用的不可編輯的文本進行選擇和復(fù)制；
5. 不要將編輯類選項添加到按鈕；
6. 使編輯操作可撤消；
7. 在系統(tǒng)提供的命令之后顯示自定義命令；
8. 使自定義命令的數(shù)量最少并保持自定義命令名稱簡短。

文字按鈕（Text Labels）

使用場景：用于幫助用戶通過點擊來執(zhí)行某個操作或進行某個選擇。

原生規(guī)范【iOS Human Interface Guidelines】：

1. 文字按鈕通常顯示在導(dǎo)航欄和工具欄中，但可以在任何地方使用；
2. 在標題中使用動詞。一個特定的動作標題可以暗示一個按鈕是可交互式的，并能讓用戶在點擊前就能預(yù)知操作結(jié)果；
3. 使用標題樣式。除了文章，協(xié)調(diào)連詞和四個字母以內(nèi)的的介詞之外，可以使用大寫字母引起用戶注意；
4. 盡量縮短標題。超長的文本可能會擠滿您的界面，并可能會在較小的屏幕上截斷；
5. 考慮僅在必要時添加描邊或背景，默認情況下，系統(tǒng)按鈕沒有描邊或背景。然而，在某些內(nèi)容情境下，需要邊界或背景來暗示交互性。在電話應(yīng)用程序中，數(shù)字的描邊加強了傳統(tǒng)的通話模式，“呼叫”按鈕的背景成為一個引人注目的目標，暗示很容易觸發(fā)。

原生規(guī)范【Google Material Guidelines】：

1. 無線框無底色的文字按鈕通常用于不重要的操作；有線框無底色的文字按鈕用于中度重要的文字按鈕；有底色的文字按鈕用于非常重要的操作。
2. 文字按鈕應(yīng)當描述用戶點擊后將發(fā)生的動作，如果不使用文字標簽，則應(yīng)該用圖標來進行表示。
3. 文字按鈕應(yīng)當與附近的文本進行有效區(qū)分，比如：通過大寫/材質(zhì)/顏色/大小或位置等方式。
4. 文字按鈕通常用于不太明顯的動作，包括以下位置：對話框和卡片中。

頁面控件（Page Controls)

使用場景：用于顯示當前頁在頁面列表中的位置。

外觀：

1. 通常顯示為一系列小的指示符點，表示它們的順序；
2. 實心點表示當前頁。從視覺上看，這些點總是等距的；
3. 用戶可以滑動頁面來訪問下一頁或前一頁，但不能點擊特定點來訪問特定頁面；
4. 導(dǎo)航總是循序發(fā)生，通常是通過將頁面滑動到一邊。

原生規(guī)范【iOS Human Interface Guidelines】：

1. 不要使用具有層次關(guān)系的頁面控件，頁面控件不顯示頁面是如何關(guān)聯(lián)的或指示哪個頁面對應(yīng)于每個點。
2. 不要顯示太多的頁面，超過10個點用戶將難以一眼看清，超過大約20個打開的頁面將花費用戶大量時間。如果您的應(yīng)用程序需要顯示超過20個頁面體，請考慮使用如網(wǎng)格等非順序?qū)Ш降姆绞健?/li>
3. 頁面控件應(yīng)始終位于內(nèi)容底部和屏幕底部之間的中心位置，這樣可以使它保持可見，且不會遮擋內(nèi)容或被內(nèi)容遮擋。

選擇器（Picker)

使用場景：用于幫助用戶從多個選定值中進行單個選定值的選擇。

外觀：

1. 包括一個或多個不同值的可滾動列表，每個列表具有單個選定值，該值以深色文本顯示在視圖的中心；
2. 高度大約是五行列表值的高度。寬度取決于設(shè)備和上下文，或者是屏幕寬度或其封閉視圖。

原生規(guī)范【iOS Human Interface Guidelines】：

1. 使用可推測的選項值，當可滾動列表靜止時，選擇器中的許多值可能被隱藏。人們需要能夠推測這些被隱藏的選項值是什么，例如：可以使用按字母順序排列，這樣他們就可以快速地推測并瀏覽這些列表進行選擇。
2. 避免在切換屏幕時顯示選擇器。
3. 盡量使用表格來代替有大值列表的選擇器，在長列表選項中需要增加可以包括一個索引，使其可以滾動的更快。

進度指示（Progress Indicators)

使用場景：

當應(yīng)用程序加載內(nèi)容或執(zhí)行冗長的數(shù)據(jù)處理操作時，使用進度指示，讓人們知道你的應(yīng)用程序沒有停止，讓他們知道他們將等待多久。

分段控件（Segmented Control）

使用場景：用來作為不同視圖的入口控件，可用作頁面導(dǎo)航或切換導(dǎo)航。

外觀：

1. 可以包含兩個或者更多的分段選項，每一個選項作為一個獨立的按鈕而存在；
2. 在一個分段控件里，所有的分段選項在長度上要保持一致；
3. 和按鈕一樣，每個分段選項可以包含文案或者圖片。

原生規(guī)范【iOS Human Interface Guidelines】：

1. 限制分段選項的數(shù)目，以提高可用性。更寬的分段選項更容易點擊；
2. 盡量保證每個分段選項里的內(nèi)容的尺寸是一致的，否則在視覺上會不太美觀；
3. 在一個分段選項里，避免同時使用文案和圖片。盡管單個分段選項里可以包含文案或者圖片，但是同時包含兩者可能會使界面看起來割裂和迷惑；
4. 如果你訂制了一個分段控件的外觀，那么請確保內(nèi)容的位置是恰當?shù)?。比如，如果你更改了分段控件的背景，那么請確保里面的內(nèi)容看起來是OK的，并且是對齊的。

滑塊（Sliders）

使用場景：用于屏幕亮度水平或媒體播放時的位置。

原生規(guī)范【iOS Human Interface Guidelines】：

1. 當滑塊的值變化時，最小值與拇指之間的軌跡部分填充顏色?；瑝K可選擇性的展示左、右圖標用來說明最小值和最大值的含義；
2. 可自定義滑塊的外觀，包括軌道顏色，拇指圖像，以及左右圖標。例如：調(diào)整圖像大小的滑塊可以在左邊顯示一個小的圖標，右邊顯示一個大的圖標。

步進器(Steppers)

使用場景：用于增加或減少值的兩段控制。

外觀：

1. 包括一個或多個不同值的可滾動列表，每個列表具有單個選定值，該值以深色文本顯示在視圖的中心；
2. 高度大約是五行列表值的高度，寬度取決于設(shè)備和上下文，或者是屏幕寬度或其封閉視圖。

原生規(guī)范【iOS Human Interface Guidelines】：

1. 使步進器的點擊反饋明顯。步進器本身不顯示任何值，所以需要通過反饋另用戶知道在使用步進器時它們的值是如何變化的；
2. 避免使用步進器進行頁面選擇，因為即使一個合理的頁面范圍也需要大量的點擊。

選擇控件(Selection Controls）

使用場景：用于幫助用戶對選項進行選擇。通常包括單選框控件（Radio buttons）、復(fù)選框控件（Checkboxes）和開關(guān)控件（Switches）。

原生規(guī)范【iOS Human Interface Guidelines】：

1. iOS原生控件僅包含開關(guān)控件，單選框和復(fù)選框控件可通過自定義tableview的方式進行創(chuàng)建，但應(yīng)盡量避免這種自定義方式。
2. 控件顏色支持自定義，同樣支持自定義開關(guān)樣式。
3. 開關(guān)控件僅在列表中使用。如果需要在工具欄或?qū)Ш綑谥惺褂妙愃乒δ?，可以選擇用按鈕來代替，并提供兩個不同的按鈕狀態(tài)來進行信息傳達。
4. 避免添加文案來對開關(guān)的值進行描述，開關(guān)的狀態(tài)已經(jīng)一目了然，添加描述只會增加信息的冗余。
5. 盡量使用開關(guān)控件來管理接口元素的功能，比如：在設(shè)置中啟用飛行模式將禁用某些設(shè)置，禁用WI-FI也會導(dǎo)致一些選項功能自動被禁用。當某個開關(guān)不可開啟時，建議讓該選項直接消失。

原生規(guī)范【Google Material Guidelines】：

1. 從列表選項中選擇單個選項時，使用單選框控件；
2. 從列表選項中選擇多個選項或需要對父子關(guān)系的開關(guān)進行設(shè)置時，使用復(fù)選框控件；
3. 觸發(fā)某個選項/模式/布局的開啟或關(guān)閉狀態(tài)時，使用開關(guān)控件。當某個開關(guān)不可開啟時，開關(guān)開啟后會立即自動切換為關(guān)閉狀態(tài)。當開關(guān)存在接口返回延遲時，應(yīng)當在開關(guān)按鈕上顯示對應(yīng)的加載進度狀態(tài)。

文本框(Text Field)

使用場景：用于幫助用戶輸入文字。

外觀：

1. 包括一個或多個不同值的可滾動列表，每個列表具有單個選定值，該值以深色文本顯示在視圖的中心。
2. 高度大約是五行列表值的高度，寬度取決于設(shè)備和上下文，或者是屏幕寬度或其封閉視圖。

原生規(guī)范【iOS Human Interface Guidelines】：

1. 在文本字段中可以顯示模式提示；
2. 在適當?shù)臅r候在文本字段的右端顯示一個清除按鈕。當這個元素出現(xiàn)時，輕擊它可以清除文本字段的內(nèi)容；
3. 在適當?shù)臅r候使用安全文本字段。當應(yīng)用程序請求敏感數(shù)據(jù)時，如密碼，請始終使用安全文本字段；
4. 使用圖像和按鈕在文本字段中時需提供清晰的功能性，您可以在文本字段的左側(cè)或右側(cè)顯示自定義圖像，也可以添加系統(tǒng)提供的按鈕。

鍵盤（Keyboard）

使用場景：為輔助需要輸入字符的操作時使用。

交互說明：

1. 鍵盤彈出時，對應(yīng)文本框應(yīng)處于激活輸入狀態(tài)；
2. 可設(shè)置鍵盤彈出時是否置頂某些重要信息；
3. 可設(shè)置鍵盤彈出時，與之處于同一層級的組件保持手勢交互；
4. 可設(shè)置關(guān)閉方式（鍵盤關(guān)閉/點擊組件外區(qū)域關(guān)閉/Android返回鍵關(guān)閉）。

相關(guān)閱讀

Axure常用元件及使用規(guī)范：Bars篇

Axure常用元件及使用規(guī)范：Views篇

文由 @愚者秦?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議