Axure常用元件及使用規范:Controls篇(附源文件下載)

4 評論 12950 瀏覽 43 收藏 16 分鐘

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

百度網盤下載地址:https://pan.baidu.com/s/1-deWfW_I8qUM2c6HFWZYqg

系統按鈕(System Buttons)

使用場景:系統按鈕經常出現在導航欄和工具欄中,但可以在任何地方使用。

原生規范【iOS Human Interface Guidelines】:

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

編輯菜單(Edit Menu)

使用場景:

在文本區域,text view、web view 或 image view 中長按或雙擊一個元素,來選擇內容并彈出編輯選項,例如復制和粘貼。

原生規范【iOS Human Interface Guidelines】:

  1. 為當前上下文環境顯示適當的命令;
  2. 如有必要,可調整編輯選項的位置;
  3. 不要使用與 edit menu 功能相同的其他控件;
  4. 允許對可能有用的不可編輯的文本進行選擇和復制;
  5. 不要將編輯類選項添加到按鈕;
  6. 使編輯操作可撤消;
  7. 在系統提供的命令之后顯示自定義命令;
  8. 使自定義命令的數量最少并保持自定義命令名稱簡短。

文字按鈕(Text Labels)

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

原生規范【iOS Human Interface Guidelines】:

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

原生規范【Google Material Guidelines】:

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

頁面控件(Page Controls)

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

外觀:

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

原生規范【iOS Human Interface Guidelines】:

  1. 不要使用具有層次關系的頁面控件,頁面控件不顯示頁面是如何關聯的或指示哪個頁面對應于每個點。
  2. 不要顯示太多的頁面,超過10個點用戶將難以一眼看清,超過大約20個打開的頁面將花費用戶大量時間。如果您的應用程序需要顯示超過20個頁面體,請考慮使用如網格等非順序導航的方式。
  3. 頁面控件應始終位于內容底部和屏幕底部之間的中心位置,這樣可以使它保持可見,且不會遮擋內容或被內容遮擋。

選擇器(Picker)

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

外觀:

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

原生規范【iOS Human Interface Guidelines】:

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

進度指示(Progress Indicators)

使用場景:

當應用程序加載內容或執行冗長的數據處理操作時,使用進度指示,讓人們知道你的應用程序沒有停止,讓他們知道他們將等待多久。

分段控件(Segmented Control)

使用場景:用來作為不同視圖的入口控件,可用作頁面導航或切換導航。

外觀:

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

原生規范【iOS Human Interface Guidelines】:

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

滑塊(Sliders)

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

原生規范【iOS Human Interface Guidelines】:

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

步進器(Steppers)

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

外觀:

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

原生規范【iOS Human Interface Guidelines】:

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

選擇控件(Selection Controls)

使用場景:用于幫助用戶對選項進行選擇。通常包括單選框控件(Radio buttons)、復選框控件(Checkboxes)和開關控件(Switches)。

原生規范【iOS Human Interface Guidelines】:

  1. iOS原生控件僅包含開關控件,單選框和復選框控件可通過自定義tableview的方式進行創建,但應盡量避免這種自定義方式。
  2. 控件顏色支持自定義,同樣支持自定義開關樣式。
  3. 開關控件僅在列表中使用。如果需要在工具欄或導航欄中使用類似功能,可以選擇用按鈕來代替,并提供兩個不同的按鈕狀態來進行信息傳達。
  4. 避免添加文案來對開關的值進行描述,開關的狀態已經一目了然,添加描述只會增加信息的冗余。
  5. 盡量使用開關控件來管理接口元素的功能,比如:在設置中啟用飛行模式將禁用某些設置,禁用WI-FI也會導致一些選項功能自動被禁用。當某個開關不可開啟時,建議讓該選項直接消失。

原生規范【Google Material Guidelines】:

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

文本框(Text Field)

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

外觀:

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

原生規范【iOS Human Interface Guidelines】:

  1. 在文本字段中可以顯示模式提示;
  2. 在適當的時候在文本字段的右端顯示一個清除按鈕。當這個元素出現時,輕擊它可以清除文本字段的內容;
  3. 在適當的時候使用安全文本字段。當應用程序請求敏感數據時,如密碼,請始終使用安全文本字段;
  4. 使用圖像和按鈕在文本字段中時需提供清晰的功能性,您可以在文本字段的左側或右側顯示自定義圖像,也可以添加系統提供的按鈕。

鍵盤(Keyboard)

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

交互說明:

  1. 鍵盤彈出時,對應文本框應處于激活輸入狀態;
  2. 可設置鍵盤彈出時是否置頂某些重要信息;
  3. 可設置鍵盤彈出時,與之處于同一層級的組件保持手勢交互;
  4. 可設置關閉方式(鍵盤關閉/點擊組件外區域關閉/Android返回鍵關閉)。

相關閱讀

Axure常用元件及使用規范:Bars篇

Axure常用元件及使用規范:Views篇

 

文由 @愚者秦?原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 請問
    447*844是什么手機尺寸?

    來自上海 回復
  2. 請問解壓密碼多少?

    來自上海 回復
    1. 同問

      來自陜西 回復
    2. yuzheqin

      來自北京 回復