最新iOS設計規范五|3大界面要素:控件(Controls)

0 評論 10568 瀏覽 27 收藏 39 分鐘

編輯導讀:iOS是運行于iPhone、iPad和iPod touch設備上、最常用的移動操作系統之一。作為互聯網應用的開發者、產品經理、體驗設計師,都應當理解并熟悉平臺的設計規范。這有利于提高我們的工作效率,保證用戶良好的體驗。本文是iOS設計規范系列第5篇,介紹3大界面要素(欄、視圖、控件)中的控件。

iOS是運行于iPhone、iPad和iPod touch設備上、最常用的移動操作系統之一。作為互聯網應用的開發者、產品經理、體驗設計師,都應當理解并熟悉平臺的設計規范。這有利于提高我們的工作效率,保證用戶良好的體驗。本文是iOS設計規范系列第5篇,介紹3大界面要素(欄、視圖、控件)中的控件(Controls)。首先讓我們回顧一下iOS的3大界面要素。

3大界面要素(Interface Essentials)

大多數iOS應用都是由UI Kit中的組件構建的。UI Kit是一種定義通用界面元素的編程框架,這個框架不僅讓APP在視覺外觀上保持一致,同時也為個性化設計留有很大空間。UI Kit提供的界面組件有三類:欄(Bars),視圖(Views),控件(Controls)。

欄(Bars):

欄,可以告訴用戶在APP中當前在所在的位置、能提供導航,還可能包含用于觸發操作和傳遞信息的按鈕或其他元素。包括6種:導航欄、搜索欄、側邊欄、狀態欄、標簽欄、工具欄。

視圖(Views)包含用戶在APP中看到的基本內容,例如:文本、圖片、動畫以及交互元素。視圖可以具有滾動、插入、刪除和排列等交互行為。

控件(Controls)控件,是用于觸發操作并傳達信息的。例如:按鈕、開關、文本框和進度條,都屬于典型的控件。

iOS的15種控件(Control)

一、按鈕(Buttons)

按鈕常用于觸發特定操作,可自定義的背景顏色,并且可以包含標題或圖標。系統為大多數用例提供了許多預定義的按鈕樣式。你也可以設計自定義按鈕。系統按鈕系統按鈕通常出現在導航欄和工具欄中,也可以在任何地方使用。

  1. 在標題中使用動詞。特定于操作的標題顯示按鈕是交互式的,并說明單擊該按鈕時會發生什么。
  2. 使用標題格式命名標題。將除了冠詞、并列連詞和四個或更少字母的介詞之外,每個單詞首字母都應大寫。
  3. 按鈕標題盡量簡短。太長的文本可能會使您的界面擁擠,并可能在較小的屏幕上被截斷。
  4. 只在必要時添加邊框或背景顏色。默認情況下,系統按鈕沒有邊框或背景。但是,在某些內容區域中,邊框或背景是表示交互性所必需的。在“電話”應用程序中,帶邊框的數字鍵增強了撥打電話的傳統模式,“通話”按鈕的背景提供了易于擊中的醒目的目標。

1. 詳情展開按鈕

詳情展開按鈕可打開視圖(通常是模態視圖),其中包含與屏幕上特定項目相關的信息或功能。雖然你可以在任何類型的視圖中使用它們,但詳情展開按鈕通常是用于列表中,便于用戶訪問有關某行列表的信息。

在列表中適當使用詳情展開按鈕。當列表中有詳情展開按鈕時,點擊該按鈕會顯示附加信息,點擊其他位置則選擇行或APP的自定義行為。如果你希望用戶點擊整行以查看更多詳細細節,不要使用“詳情展開”按鈕,要使用指向性的顯示附件(漸進指示器)。

2. 信息按鈕

翻轉視圖后,“信息”按鈕可顯示有關應用程序的配置詳細信息,有時會顯示在當前視圖的背面。信息按鈕有兩種樣式:淺色和深色。選擇與您的應用程序設計最匹配且不會在屏幕上看不清楚的樣式。

3. 添加聯系人按鈕

用戶可以點擊“添加聯系人”按鈕來瀏覽現有聯系人列表,并選擇一個要插入到文本字段或其他視圖中的聯系人。例如,在郵件中,您可以在郵件的“收件人”字段中點擊“添加聯系人”按鈕,來從聯系人列表中選擇收件人。

除了“添加聯系人”按鈕之外,還應該允許鍵盤輸入?!疤砑勇撓等恕卑粹o提供了一種替代輸入聯系人信息的方式,而不是替換方法。可以將其用作添加現有聯系人的快捷方式,但也可以讓人們使用鍵盤輸入聯系人信息。

二、顏色選擇器(Color Wells)

輕按時,顏色就會很好地顯示系統提供的顏色選擇器。人們可以使用顏色選擇器為文本,形狀,標記工具和其他元素選擇顏色。

通過顏色選擇器的選項卡式界面,人們可以從網格或光譜中選擇顏色,也可以通過選擇RGB值來選擇顏色。人們還可以通過點擊吸管按鈕并使用放大鏡來選擇出現在屏幕上任何地方的顏色,從而選擇一種顏色。

最好使用系統提供的顏色選擇器來幫助人們選擇顏色。使用內置的顏色選擇器可以提供一致的用戶體驗,此外還可以使人們保存可以從任何應用程序訪問的一組顏色。系統定義的顏色選擇器還可以幫助Mac版iPad應用程序為macOS用戶提供熟悉的體驗。

三、情境菜單(Context Menus)

在iOS 13及更高版本中,你可以使用情境菜單讓用戶訪問與APP相關的其他功能,而不會使界面混亂。

情境菜單很類似于Peek(輕壓手勢喚醒)和Pop(重壓手勢喚醒),但是有兩個主要區別:

  • 所有運行iOS 13及更高版本的設備都可以使用情境菜單;但Peek和Pop僅適用于支持3D Touch的設備。
  • 情境菜單會立即彈出與相關的命令;Peek和Pop則需要向上滑動才能查看命令。

用戶可以通過系統定義的觸摸并按住或3D Touch來顯示情境菜單,(3D Touch可以使情境菜單更快地顯示)。打開時,情境菜單將顯示該項的預覽并列出對其起作用的命令。用戶可以選擇命令或將項目拖動到另一個區域、窗口或應用程序。

  • 采用一致的上下文菜單。如果你為某些地方的項目提供情境菜單而不是所有項目,用戶將不知道他們到底可以在哪些地方使用該功能,并且可能認為是APP有問題/Bug。
  • 僅包括適用于該項的最常用命令。例如,在郵件的上下文菜單中,顯示用于回復和移動郵件的命令是很有意義的,但如果顯示格式或郵箱命令沒有意義。列出太多命令可能會讓人頭昏眼花。
  • 在上下文菜單中的每個命令中都包含一個標志符號。符號強化了命令的含義,可以幫助人們立即理解其功能。使用符號時可以選擇系統提供的,也可以。如果上下文菜單包含子菜單則不需要,因為它會自動顯示系統提供的V形符號,表示存在其他命令。
  • 使用子菜單來管理復雜性。子菜單是情境菜單的菜單項,顯示邏輯相關命令的二級菜單。為子菜單提供直觀的標題來描述它們的內容,這樣用戶就可以預測子菜單的命令而不必全部顯示出來。簡潔、以行動為導向的標題也使用戶可以跳過他們在當前語境下不需要的子菜單。
  • 將子菜單保持在一個層級。雖然子菜單可以縮短情境菜單并說明用戶可以執行的命令,但是如果子菜單分還幾個層級的話會使得體驗變得復雜,并且讓用戶難以導航。
  • 將最常用的項放在情境菜單的頂部。當用戶打開情境菜單時,他們的焦點是位于菜單的頂部區域。將最常用的項應該放在菜單頂部,以便用戶及時找到他們正在尋找的項。
  • 使用分隔符對相關菜單項進行分組。創建可視分組可以幫助用戶更快地瀏覽菜單。例如:你可以使用分隔符對與需要編輯的相關的操作項進行分組,使用另一個分隔符對與共享的相關操作項進行分組。
  • 避免為同一項目提供情境菜單和編輯菜單。當人用戶為同一個項目啟用這兩個功能時,系統很難檢測到用戶的真正意圖,這可能會讓用戶感到困惑。
  • 避免提供項目預覽的操作按鈕。用戶可以通過點擊打開他們正在預覽的項目,因此通常不需要額外再提供明確的“打開”按鈕了。

四、編輯菜單(Edit Menus)

人們可以觸摸并按住或雙擊文本字段,文本視圖,Web視圖或圖像視圖中的元素,以選擇內容并顯示諸如復制和粘貼之類的編輯選項。

  • 顯示適用于當前上下文的命令。默認情況下,這些選項包括“剪切”,“復制”,“粘貼”,“選擇”,“全選”和“刪除”命令,可以選擇禁用其中任何一個。如果未選擇任何內容,則菜單不應顯示需要選擇的選項,例如“復制”或“剪切”。同樣,如果已經選擇了某些菜單,則菜單不應包含“選擇”選項。
  • 如有必要,可調整編輯菜單的位置。雖然你無法更改編輯菜單的形狀,但它的位置是可配置的 – 你可以改變展示位置來避免它覆蓋重要內容或界面的某些部分。
  • 不要使用與編輯菜單相同功能的其他控件。提供多種方式來進行相同的操作,會導致不一致的用戶體驗并造成混淆。
  • 如果有潛在使用的可能,不能編輯的文本也應提供選擇和拷貝。用戶通常希望將靜態內容(例如圖像標簽或社交媒體狀態)拷貝到電子郵件,便箋或網絡搜索中使用。
  • 不要在編輯菜單上加“編輯”按鈕。如果這樣做,用戶很容易誤點,從而導致編輯菜單被取消。
  • 讓編輯操作可撤消。在編輯菜單上執行操作之前不需要確認。但用戶在執行操作后可能改變主意,所以始終要實現撤消和返回功能。
  • 使用有用的自定義命令擴張編輯選項 。通過提供特定于應用程序的其他命令來增加菜單的選項,與標準命令一樣,任何自定義命令都可以對選擇的文本或對象進行操作。
  • 在系統提供的命令之后顯示自定義命令。不要將自定義命令與系統提供的眾所周知的和經常使用的命令混在一起
  • 盡量減少自定義命令的數量。太多的選項反而會讓人陷入糾結。
  • 自定義命令的標題盡量簡短。命令名稱應該是動詞或簡短的動詞短語,簡單地描述了要執行的操作即可。

五、標簽(Labels)

標簽描述了屏幕上的界面元素或提供了一條短消息。盡管人們無法編輯標簽,但他們有時可以復制標簽的內容。標簽可以顯示任意數量的靜態文本,但最好保持簡短

保持標簽清晰易讀。標簽可以包含純文本或樣式文本。如果您調整標簽的樣式或使用自定義字體,請確保不要犧牲易讀性。最好采用動態類型,這樣當用戶更改設備上的文本大小時,標簽的可讀性仍然可以很好。同時,你還需要在啟用了輔助功能選項的情況下測試標簽,例如粗體文本。

六、頁面控件(Page Controls)

頁面控件在平面頁面列表中顯示當前頁面的位置。它顯示為一系列小指示點,代表按打開順序顯示的可用頁面。實心點表示當前頁面。從視覺上看,這些點總是等距的,如果在屏幕上出現太多,則這些點將被裁剪。用戶可以點擊頁面控件的前端或后端來訪問下一頁或上一頁,但是他們不能點擊特定的點來轉到特定的頁面。導航通常是按順序進行的,通常是將頁面滑動到一側。

  • 不要在層級不同的頁面之間使用頁面控件。頁面控件并不會顯示頁面之間的關聯或指示哪個頁面對應于哪個點。此類控件僅用于彼此層級相同的頁面。
  • 不要顯示太多頁面。超過大約10個點很難讓人一目了然,超過20個頁面按順序瀏覽過去也是非常耗時的。如果你的應用需要顯示超過20個頁面,請考慮使用其他的排列方式 – 例如網格 – 啟用非順序導航。
  • 頁面控件顯示在屏幕底部的中心。頁面控件應始終位于內容底部和屏幕底部之間的區域,并保持居中。這樣即能讓頁面控件是可見,又不會遮擋其他內容。

七、選擇器(Pickers)

選擇器可以顯示一個或多個可滾動的不同值列表,供人們選擇。在iOS 14及更高版本中,日期選擇器支持其他選擇值的方式,例如在日歷視圖中選擇日期或使用數字鍵盤輸入日期和時間。兩種類型的選擇器都使人們可以通過選擇單值或多值來輕松輸入信息。

  • 選項為中長列表時,可以考慮使用選擇器。如果需要顯示太短的選項列表,請考慮使用下拉菜單而不是選擇器。盡管選擇器使您可以輕松快速地滾動瀏覽許多項目,但它可能會給一小部分項目增加太多視覺效果。另外,如果顯示太長的選項,考慮使用列表或表單。列表和表單的高度可以調整,并且表單可以包含索引,這可以更快地定位列表的一部分。
  • 使用可預測的和邏輯排序的值。當可滾動列表固定時,選擇器中的許多值可能會隱藏。最好是人們可以預測隱藏的值,例如按字母順序排列的國家/地區清單,以便他們可以快速瀏覽各個項目。
  • 避免切換屏幕以顯示選擇器。在正在編輯的字段的下方或附近顯示選擇器效果很好。選擇器通常顯示在屏幕底部或彈出窗口中。

1. 日期選擇器

日期選擇器是用于使用觸摸屏,鍵盤或定點設備選擇特定日期,時間或兩者的有效界面。您可以使用以下樣式之一顯示日期選擇器:

日期選擇器是用于使用觸摸屏,鍵盤或鼠標選擇特定日期、時間的有效界面。您可以使用以下樣式之一顯示日期選擇器:

  • 嵌入式:可編輯的字段,適合于較小的空間(例如列表或表格行),并展開以顯示編輯視圖
  • 緊湊式:展開后可在模態上下文中顯示編輯視圖的標簽
  • 滾輪式:傳統的滾輪組

您還可以選擇自動樣式,以使系統使用當前平臺和日期選擇器模式來確定適當的顯示樣式。

日期選擇器具有四種模式,每種模式都呈現一組不同的可選值。

  • 日期。顯示月份,月份中的幾天和年份。
  • 時間。顯示小時,分鐘和(可選)AM / PM名稱。
  • 日期和時間。顯示日期,小時,分鐘和(可選)AM / PM名稱。
  • 倒計時器。顯示小時和分鐘,最多23小時59分鐘。此模式不適用于緊湊型樣式。

日期選擇器中顯示的確切值及其順序取決于用戶的使用環境。

當空間有限時,請使用緊湊的日期選擇器。折疊后,緊湊型樣式將顯示一個按鈕,該按鈕以應用程序的主色顯示當前值。當人們點擊按鈕時,日期選擇器將擴展為模式視圖,從而提供對熟悉的日歷樣式編輯器和時間選擇器的訪問。在模式視圖中,人們可以對日期和時間進行多次編輯,然后在視圖外部輕按以確認他們的選擇。

指定分鐘數時,請考慮提供較小的粒度。默認情況下,分鐘列表包含60個值(0到59)。您可以選擇增加分鐘間隔,只要將其平均分配為60即可。例如,您可能需要四分之一小時間隔(0、15、30和45)。

八、進度指示器(Progress Indicators)

不要讓用戶坐在靜態屏幕旁等待您的應用加載內容或執行冗長的數據處理操作。使用活動指示器和進度條可以使人們知道您的應用沒有停止,并讓他們知道他們要等待多長時間。

活動加載指示(Activity Indicators):

就是通常我們講的轉菊花。當執行無法量化的任務(例如加載或同步復雜數據)時,加載器會旋轉。任務完成后它會消失。活動加載器是不是可交互元素。

  • 進度條優于加載器。如果加載過程是可量化的,請使用進度條而不是加載器,以便用戶可以更好地衡量正在發生的事情以及需要多長時間。
  • 保持加載器的轉動。用戶會很自然地把靜止的加載器與于APP的卡頓聯系起來。讓它旋轉,讓用戶知道正在發生的事情。
  • 如果有幫助,請在用戶等待任務完成時為其提供有用的提示信息??梢栽诩虞d器上方添加標簽以提供額外的上下文信息。避免使用模糊的術語,如加載或驗證,因為它們通常不會增加任何價值。

進度條(Progress Bars):

進度條是一個從左到右填充的軌道,用以顯示當前頁面的任務進度。進度條是非交互式的,但通常伴有用于取消相應操作的按鈕。

  • 保持進度條的準確性。不要只是為了讓進度看起來很快而顯示不正確的進度信息,進度條只能用于可量化的任務。否則請使用加載器(轉菊花)。
  • 將進度條用于持續時間明確的任務。進度條非常適合顯示任務的狀態,尤其是當它幫助傳達任務需要完成多長時間時。
  • 在導航欄和工具欄中隱藏軌道的未填充部分。默認情況下,進度條的軌道包含已填充和未填充的部分。當在導航欄或工具欄中使用時,進度欄應配置為隱藏軌道的未填充部分。
  • 進度條的外觀可以自定義。可以調整進度條的外觀以匹配APP的設計。例如,您可以為軌道填充指定自定義色調或圖像。

網絡加載指示(Network Activity Indicators):

網絡加載指示在iOS 13和全面屏顯示的設備上已被棄用。在iOS 12及更早版本中,以及在全面屏顯示的設備上,網絡活動指示器會在發生聯網時在屏幕頂部的狀態欄中旋轉,聯網完成后消失。和活動加載指示器樣式一樣,并且是非交互式的。

當網絡加載時間超過幾秒時,才顯示此加載器。加載很快的情況下不要顯示此加載器,因為它可能會在用戶注意到它之前就消失了。

九、下拉菜單(Pull-Down Menus)

在iOS 14及更高版本中(微信右上角的下拉菜單其實出現的更早),按鈕可以顯示一個下拉菜單,其中列出了人們可以選擇的項目或動作。您可以使用下拉菜單(以下簡稱菜單)來提供與按鈕操作直接相關的項目,或提供在當前上下文中有用的操作列表。

與操作表、上下文菜單和彈出菜單相比,菜單提供了多個優勢。

例如:

  • 菜單會在顯示該按鈕的按鈕附近打開,因此人們可以立即了解菜單項與他們正在執行的動作之間的關系。
  • 除了列出動作之外,菜單還可以提供可供人們用來影響主要動作的選擇。
  • 菜單可以快速生成動畫,并且在菜單出現時不會使屏幕變暗,從而使過渡效果和總體體驗更加輕盈。

不要將所有操作都放在菜單中。菜單可讓您提供一系列項目,而不會弄亂您的界面,但是將所有操作置于菜單中意味著用戶必須至少點擊兩次才能執行任何操作。將最重要的操作放在主界面中,使用菜單提供補充項目。

使用菜單顯示與操作直接相關的選項。通過菜單,您可以在無需向主界面添加按鈕的情況下為用戶提供澄清動作目標或自定義動作行為的方法。例如:

當用戶點擊應用中的“添加”按鈕時,您可以顯示一個菜單,讓用戶指定要添加的項目。

如果您的應用支持排序,則可以使用菜單讓用戶選擇要進行排序的屬性。

在允許在多個位置之間導航的應用程序中,菜單可以使用戶導航到特定位置,而不用追溯每個步驟。使用菜單提供輔助應用操作。如果您的應用程序包含不屬于主界面的基本操作,則可以將這些操作分組在菜單中。例如,“文件”除了查看和排序內容的選項外,還使用菜單提供諸如添加文件夾或掃描文檔之類的操作。

考慮用“更多”按鈕來顯示菜單?!案唷卑粹o可以與大多數界面很好地集成在一起,用戶也能夠理解點擊它可以訪問其他功能。通常的樣式是三個點放在圓形按鈕中來表示“更多”?;蛘?,您可以通過在現有按鈕上執行特定手勢來讓人們顯示菜單。

使用分隔符以可視方式對相關菜單項進行分組。創建視覺分組可以幫助人們更快地掃描菜單。例如,“文件”應用程序中的“更多”菜單使用分隔符來幫助用戶快速的查看和排序項目。不過分組不要大于三個,否則不容易辨認。

讓用戶知道菜單項何時具有破壞性,并要求用戶二次確認。菜單使用紅色文本突出顯示潛在破壞性的操作。當人們選擇破壞性操作時,系統會顯示一個操作表(iOS)或彈出框(iPadOS),他們可以在其中確認選擇或取消該操作。由于操作表出現在與菜單不同的位置并且需要有意地撤消,因此它可以幫助人們避免誤操作。

考慮在菜單項中包含標志符號。如果需要澄清項目的含義,可以在其標題后顯示標志符號或圖像。使用系統符號可以使用戶得到熟悉的體驗,同時確保該符號在各個比例下均與文本保持對齊。

顯示菜單標題(如果添加含義)。在大多數情況下人們會理解菜單項的上下文,因為當他們點擊按鈕執行操作時菜單會立即顯示。如有必要,你可以在菜單頂部提供簡潔的標題。

十、刷新控件(Refresh Content Controls)

手動啟動刷新控件會立即重新加載內容(通常在表視圖中),而無需等待下一次自動內容更新發生。刷新控件是活動加載指示器的一種特殊類型,默認情況下處于隱藏狀態,并在向下拖動要重新加載的視圖時可見。例如,在“郵件”中,您可以將“收件箱”郵件列表向下拖動以檢查是否有新郵件。

執行自動內容更新。不要讓用戶手動發起每個更新。定期主動更新數據,保持數據的時效性。

有必要時才為刷新提供簡短標題。可以為刷新控件加一個標題。但在大多數情況下,這是沒有必要的,因為刷新控件的動效就很明確地表明了內容正在加載。

十一、分段控件(Segmented Controls)

分段控件是兩個或多個分段的線性集合,每個分段都充當一個互斥按鈕。在控件內,所有段的寬度均相等。像按鈕一樣,句段可以包含文本或圖像。分段控件通常用于顯示不同的視圖。

限制段的數量以提高可用性。越寬的段越容易點擊。在iPhone上,分段控件應該控制在5個或5個以下。

盡量讓段內容大小一致。所有段的寬度都是相同的,如果段內容(例如段的標題)長度或大小不一致,則分段控件看起來會很不協調。

分段控件中不要同時包含文本和圖像。雖然段可以包含文本或圖像,但將兩者被混合在一個控件中可能會導致界面混亂讓人難以理解。

若自定義分段控件,請保證內容協調。若要更改(自定義)分段控件的視覺樣式,請確保內容看起來協調可讀并且對齊。

十二、滑桿(Sliders)

滑塊是帶有一個稱為“拇指”控件的水平軌道,你可以用手指滑動該控件以在最小值和最大值之間移動,例如屏幕亮度的調節或媒體文件播放期間的位置調節。

當滑塊的值發生變化時,最小值和拇指之間的軌道部分會填充顏色?;瑝K的左右位置好可以展示圖標,來說明最小值和最大值的含義。

如有必要,可以自定義滑塊的外觀。為了與你的設計風格融合并且更準確地傳達設計意圖,滑塊的外觀是可以更改的,包括軌道顏色、“拇指”圖標以及左右位置的圖標。

不要使用滑塊來調節音量。如果你的APP需要提供音量控制,請使用音量視圖。音量視圖是可以自定義的,其中包括音量視圖的滑塊和用于改變音頻輸出設備的控件。

十三、步進器(Steppers)

步進器是用于增加或減少增量值的兩段式控件。默認情況下,步進器的一個段顯示加號,另一個段顯示減號。如果需要,可以自定義步進器或替換這些圖標。

確保隨著步進器變化的值清晰可見。步進器本身不展示任何值,因此請確保用戶知道,使用步進器時它們正在改變哪個值。

不要使用步進器調整較大數量級的值。調整小數量級的值時,使用步進器是很合適的。例如,在打印頁面上,使用步進器設置份數效果是很好的,因為用戶很少對份數設置進行更改。

另外,不要用使用步進器選來擇頁面范圍,因為這需要大量的點擊。

十四、開關(Switchs)

開關主要用于兩個互斥狀態之間的視覺切換。

自定義開關的視覺樣式,使它與你的設計更協調。根據設計風格,自定義開關在其關閉和打開時的背景顏色,可以使開關在APP中的體驗更好。

僅在列表中使用開關。開關用在列表中,例如可以打開和關閉的設置列表。如果你需要工具欄或導航欄中使用類似功能,請改用按鈕,并提供兩個不同的圖標來傳達不同的狀態。

避免在開關中添加說明標簽。關于開關的打開或關閉,用戶是很明確的。額外的提供文本標簽描述開關狀態是多余的,還會使界面混亂不堪。

可以用開關來管理相關界面元素的可用性。開關通常會影響屏幕上的其他內容。例如,在“設置”中打開“飛行模式”開關會禁用其他功能/設置。

十五、文本框(Text Fields)

文本輸入框是單行且固高度固定的區域,通常帶有圓角,當用戶點擊它時會自動彈出鍵盤。使用文本輸入框來輸入少量信息,例如電子郵件地址。

在文本輸入框中顯示必要的提示,以幫助用戶更好的輸入。當輸入框中沒有其他文本時,文本輸入框可以包含占位符文本。

適當時侯,在文本輸入框的右端顯示“清除”按鈕。若有“清除”按鈕,點擊它便會立即清空文本字段的內容,避免一直點擊刪除。

適當時候,使用安全文本字段。若需要輸入的是敏感數據(如密碼)時,請始終使用安全提示類的文本字段。

使用圖像和按鈕在文本字段中提供清晰度和功能??梢栽谖谋据斎肟虻淖髠然蛴覀蕊@示自定義圖標,也可以添加系統提供的按鈕,例如“書簽”按鈕。

鍵盤:

根據實際情況,顯示適當的鍵盤類型。iOS提供了幾種不同的鍵盤類型,每種鍵盤都用于方便不同文本類型的輸入。當用戶在輸入文本時,根據輸入的文本類型顯示相應的鍵盤類型,可以簡化數據輸入。例如:如果用戶需要填寫電子郵件地址,則應顯示郵件鍵盤。

本文介紹了3大界面要素中的控件(Controls),參考資料Apple Developer-Human Interface Guidelines。下一篇介紹用戶交互(User Interaction)。

相關閱讀:

最新iOS平臺設計規范一|3大主旨和6大原則

最新iOS平臺設計規范二|7大應用架構

最新iOS平臺設計規范三|3大界面要素:欄(Bars)

最新iOS平臺設計規范四|3大界面要素:視圖(Views)

#專欄作家#

曉吾,微信公眾號:體驗主義,人人都是產品經理專欄作家。騰訊高級交互設計師,前創新工場、新浪微博交互設計師。專注社交創新與娛樂產品設計。

本文由 @曉吾 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!