編者按:讓人激動到手發抖的蘋果官方人機指南中文版來了!騰訊ISUX整個團隊的心血譯作,整篇近2萬字,10月21号剛釋出,今天就出稿了,而且品質奇高,用詞精确,語句曉暢。看再多零散的設計技巧,都不如直接看官方設計指南有效。作為UI設計師的必讀教科書,這篇千萬要收藏!
1.1 為iOS而設計
iOS 表現了以下三大設計原則:
遵從(Deference):UI應該有助于使用者更好地了解内容并與之互動,并且不會分散使用者對内容本身的注意力。
清晰(Clarity):各種尺寸的文字清晰易讀;圖示應該精确醒目,去除多餘的修飾,突出重點,以功能驅動設計。
深度(Depth):視覺的層次感和生動的互動動畫會賦予UI新的活力,有助于使用者更好地了解并讓使用者在使用過程中感到愉悅。

無論你是重新設計現有的應用,還是重新開發一個新應用,請基于下列方法進行設計考慮:
首先,去除掉UI元素讓應用的核心功能突顯出來,并明确之間的相關性。
然後,使用iOS的主題來定義UI并進行使用者體驗設計。完善細節設計,以及适當合理的修飾。
最後,保證你設計的UI可以适配各種裝置和各種操作模式,使得使用者在不同場景下都可以享受你的應用。
在整個設計過程中,時刻準備着推翻先例,質疑各種假設,并以内容和功能視為重點來驅動每個細節的設計。
1.1.1 設計跟随内容
盡管清新美觀的UI和流暢的動态效果都是iOS體驗的亮點,但内容始終是iOS的核心。
這裡有一些方法可以確定你的設計既可以提升功能體驗,又可以關注内容本身。
充分利用整個螢幕。系統天氣應用是這個方法的絕佳範例:用漂亮的全屏天氣圖檔呈現現在的天氣,直覺地向使用者傳遞了最重要的資訊,同時也留出空間呈現了每個時段的天氣資料。
重新考慮(盡量減少)拟物化設計的使用。遮罩、漸變和陰影有時會讓UI元素顯得很厚重,導緻影響到了對内容的關注。相反,應該以内容為核心,讓使用者界面成為内容的支撐。
用半透明UI元素樣式來暗示背後的内容。半透明的控件元素(比如控制中心)可以提供了上下文的使用場景,幫助使用者看到更多可用的内容,并可以起到短暫的提示作用。在iOS中,半透明的控件元素隻讓它遮擋住的地方變得模糊——看上去像蒙着一層米紙——它并沒有遮擋螢幕剩餘的部分。
1.1.2 保證清晰
確定你的應用始終是以内容為核心的另一個方法是保證清晰度。這裡有幾種方法可以讓最重要的内容和功能清晰可見,且易于互動。
使用大量留白。留白可以使重要的内容和功能更加醒目、更易了解。留白還可以傳達一種平靜和安甯的心理感受,它可以使一個應用看起來更加聚焦和高效。
讓顔色簡化UI。使用一個主題色——比如Notes中用了黃色——高亮了重要區塊的資訊并巧妙地用樣式暗示可互動性。同時,也讓應用有了一緻的視覺主題。内置的應用使用了同系列的系統顔色,這樣一來,無論在深色或淺色背景上看起來都很幹淨,純粹。
通過使用系統字型確定易讀性。iOS的系統字型(San Francisco)使用動态類型(Dynamic Type)來自動調整字間距和行間距,使文本在任何尺寸大小下都清晰易讀。無論你是使用系統字型還是自定義字型,一定要采用動态類型,這樣一來當使用者選擇不同字型尺寸時,你的應用才可以及時做出響應。
使用無邊框的按鈕。預設情況下,所有的欄(bar)上的按鈕都是無邊框的。在内容區域,通過文案、顔色以及操作指引标題來表明該無邊框按鈕的可互動性。當它被激活時,按鈕可以顯示較窄的邊框或淺色背景作為操作響應。
1.1.3 用深度層次來進行交流
iOS經常在不同的視圖層級上展現内容,用以表達層次結構和位置,這樣可以幫助使用者了解螢幕上對象之間的關系。
對于支援3D觸控的裝置,輕壓(Peek)、重壓(Pop),以及快捷操作(Quick Actions)能讓使用者在不離開目前界面的情景下預覽其他重要内容。
1.2 iOS應用解析
幾乎所有的iOS應用都應用了UIKit framework中定義的元件。了解這些基本元件的名稱、作用和功能可以幫助你在應用的界面設計過程中做出更好的決策。
UIKit提供的UI元件可以大緻分為以下4種類型:
欄(Bars):包含了上下文資訊來指引使用者他們所在的位置,以及控件來幫助使用者導航或執行操作。
内容視圖(Content Views):包含了應用的具體内容以及某些操作行為,比如滾動、插入、删除、排序等等。
控件(Controls):用于執行操作或展示資訊。
臨時視圖(Temporary Views):短暫出現給予使用者重要資訊或提供更多的選擇和功能。
UIKit除了定義UI元件元素,還定義對象如何實作功能,例如手勢識别、繪圖、輔助功能和列印支援。
從程式設計的角度來看,UI元件元素其實是視圖的子類,因為它們繼承了UIView。視圖能繪制螢幕内容并知道使用者何時在其範圍内觸屏。視圖的所有類型有:控件(比如按鈕和滑塊)、内容視圖(比如集合視圖和表格視圖),以及臨時視圖(如警告提示和動作菜單)。
要在應用中管理一組或者一系列的視圖,通常需要使用視圖控制器。它能協調視圖的内容顯示,實作與使用者互動的功能并能在不同螢幕内容之間切換。比如,“設定”使用了一個導航控制器來展示其視圖層級。
這裡有一個關于視圖與視圖控制器如何結合并呈現iOS應用的UI的例子,如圖。
盡管開發者認為真正起到作用的是視圖和視圖控制器,但一般使用者感覺到的iOS應用是不同螢幕内容的集合。從這個角度來看,在應用裡,螢幕内容一般對應于一個獨特的視覺狀态或者模式。
注:一個iOS應用程式包含一個視窗。但是,不同于計算機程式中的視窗,iOS視窗沒有可見的部分并且不能在螢幕上被移動到另一個位置。很多iOS應用程式隻有一個視窗;可以支援外部顯示裝置器的應用程式可以有不止一個視窗。
在iOS Human Interface Guidelines中,螢幕(screen)這個詞和大部分使用者了解的一樣。作為一個開發者,你也許需要閱讀一下其他與UIscreen相關的章節,這樣你可以更好的了解如何關聯外部螢幕。
1.3 适應性和布局
1.3.1 為自适應而開發
人們通常希望在他們所有的裝置和多種情境中使用自己喜歡的應用程式,比如在不同的裝置方向上和iPad的分屏情況下。尺寸類别( Size classes)和自動布局(Auto Layout)可以通過定義螢幕的布局、視圖控制器和視圖在環境變化時候應該怎麼适應來幫助你實作這個願望。(顯示環境[display environment]的概念指的是裝置的整個螢幕或者其中一部分,比如彈出框的區域或者iPad分屏視圖中其中一側的區域。)
iOS在特征集合(trait collection)的定義中包含了顯示環境的概念, 特征集合囊括了尺寸類别(size class),顯示比例(display scale)和使用者界面語言(user interface idiom)。你可以使用一個特征集合讓你的視圖和視圖控制器響應顯示環境的變化。
iOS定義了兩個尺寸類别(size class),正常的(regular)和壓縮的(compact)。正常尺寸與拓展的空間緊密相關,壓縮尺寸與限制的空間相關。想要定義一種顯示環境,你需要定義一種橫屏尺寸類别,與一種豎屏尺寸類别。如你所想,一個iOS裝置在豎屏模式可以使用一套類别,而橫屏模式下可以使用另一套類别。
iOS能随着尺寸類别和顯示環境變化而自動生成不同布局。舉個例子,當垂直尺寸從壓縮變為正常時,導航欄和工具欄會自動變高。
當你靠尺寸類别來驅動布局變化時,你的應用在任何顯示環境時都能顯示得很好。關于如何在Interface Builder中更好的使用尺寸類别,你可以查閱Size Classes Design Help.
注:在一種尺寸類别中,持續使用Auto Layout進行小的布局調整,比如拉伸或壓縮内容。更多Auto Layout,參看 Auto Layout Guide.
下面的執行個體可以幫助你形象展現尺寸類型如何适配不同裝置的顯示環境。例如:iPad(包括iPad Pro)在長寬和橫屏豎屏時都使用正常尺寸類型。換句話說,iPad顯示環境一直處于垂直和水準的正常狀态。
注:合格的iPad型号支援多任務,你的應用可能需要與其他應用共享同一個螢幕。確定使用Auto Layout,這樣你可以在使用者使用多任務功能時響應他,比如 分屏模式(Split View)和多任務分屏模式(Slide Over)。
除了使用Auto Layout,當你在iPad Pro上展示可讀性的内容時,依靠UIView的 readableContentGuide屬性是非常重要的,這樣可以擁有讓讀者舒服的邊距。
iPhone的顯示環境可根據不同的裝置和不同的握持方向而改變。
豎屏時,iPhone6 Plus使用的是壓縮寬度和正常高度類型。
橫屏時,iPhone6 Plus使用的是正常寬度和壓縮高度類型。
其他iPhone型号,包括iPhone6使用相同的尺寸類型設定。
豎屏時,iPhone 6,iPhone 5 和iPhone 4S使用的是壓縮寬度和正常高度。
橫屏時,這些裝置在寬高上使用的都是壓縮類。
1.3.2 在不同環境提供良好體驗
當你使用自适應來開發UI時,你可以保證UI跟随顯示環境變化而适當地響應。遵照這些指南,你可以給使用者良好的裝置響應體驗。
在所有環境下都保持對主體内容的專注。這是最高優先級。人們使用應用時,浏覽感興趣的内容并與之發生互動。随着環境變化改變專注點會讓使用者感覺到迷失方向,讓他們感覺對應用失去控制。
避免布局上不必要的變化。在所有環境中保持一緻的使用體驗,能讓人們在旋轉裝置或在不同裝置上運作你的應用時維持穩定的使用模式。例如,如果你在水準的正常模式下使用了網格來顯示圖像,那麼無需在壓縮模式下使用清單來展示同樣的内容 ,雖然你可能調整了網格的尺寸。
如果你的應用隻在一個方向上運作,那麼請直接一點。人們希望在各種握持方式下都可以使用你的應用,能滿足這個期待是最好的。但是,如果你的應用隻在一個方向下運作,那麼你應當注意:
避免出現提示人們旋轉裝置的相關UI元素。讓應用在支援的方向下清晰地運作,如果需要使用者旋轉裝置,不要給UI添加不必要的混亂。
支援同一個方向上的變化。例如,如果一個應用隻能橫屏運作,使用者無論用左手或是右手握持時都能觸及到home鍵。如果使用者在使用應用時180度旋轉裝置,那最好應用内容也能及時響應并旋轉180度。
如果你的應用将裝置方向翻轉視為使用者輸入(的一種指令),那麼就按照程式設定的方式來響應裝置翻轉。舉個例子,一個遊戲讓使用者利用裝置翻轉來移動遊戲中的部件,那麼這個遊戲應用本身(的UI)不能對翻轉螢幕産生響應。在這種情況下,你必須關聯兩個需要變化的方向,并且允許人們在這兩個方向切換直到他們開始(了解并執行)應用的主體任務。一旦人們開始執行主要任務,那就開始按程式設定的那樣來響應裝置的動作。
1.3.3 使用布局來溝通
布局包含的不僅僅是一個應用螢幕上的UI元素外觀。你的布局,應該告訴使用者什麼是最重要的,他們的選擇是什麼,以及事物是如何關聯起來的。
強調重要内容或功能,讓使用者容易集中注意在主要任務上。有幾個比較好的辦法是在螢幕上半部分放置主要内容——遵循從左到右的習慣——從靠近左側的螢幕開始:
使用不同的視覺化重量和平衡來告訴使用者目前屏顯元素的主次關系。大型控件吸引眼球,比小的控件更容易在出現時被注意到。而且大型控件也更容易被使用者點選,這讓它們在應用中尤其有用——就像電話和時鐘(上面的按鈕)那樣——能讓使用者經常在容易分心的環境下仍然保持正常使用。
使用對齊來讓閱讀更舒緩,讓分組和層次之間更有秩序。對齊讓應用看起來整潔而有序,也讓使用者在滑動整屏内容時更容易定位和專注于重要資訊。不同資訊組的縮進與對齊讓它們之間的關聯更清晰,也讓使用者更容易找到某個控件。
確定使用者在内容處于預設尺寸時便可清楚明白它的主要内容與含義。例如,使用者應當無需水準滾動就能看到重要的文本,或不用放大就可以看到主體圖像。
準備好改變字型大小。使用者期望大多數應用都可以響應他們在iOS的設定中設定的字型大小。為了适應一些文本大小的變化,你也許需要調整布局;想要得到更多文本顯示相關的資訊,請查閱下文“顔色與字型”中相關的内容。
盡量避免UI上不一緻的表現。在一般情況下,有着相似功能的控件看起來也應該類似。使用者常常認為他們看到的不同總有原因,而且他們傾向于花時間去嘗試(譯者按:是以為了避免使用者做無用的嘗試,建議類似的功能外觀都保持一樣。)
給每個互動的元素充足的空間,進而讓使用者容易操作這些内容和控件。常用的點按類控件的大小是44 x 44點(points)。
1.4 啟動與停止
1.4.1 即時啟動
我們通常認為使用者不會花超過一兩分鐘去評價一款新應用。當你可以最大程度地利用這段極短的時間,即時呈現對使用者有幫助的内容時,你就能夠激發新使用者的興趣并給所有使用者一種極棒的體驗。
重要:不要在安裝過程結束後告訴使用者需要重新開機裝置。重新開機需要花費時間,同時也會讓人覺得你的應用不可靠且很難使用。
如果你的應用有記憶體使用或其它問題,導緻不重新開機就無法流暢運作,你必須聲明這些問題。想要了解如何開發一款性能良好的應用,請參閱Use Memory Efficiently。
盡可能避免使用閃屏或者其他啟動體驗方式。使用者能夠在啟動應用後立即開始使用是最好不過的。
盡可能地,避免讓使用者做過多設定。而應該如此:
聚焦在80%目标使用者的需求上。這樣絕大部分使用者就無需設定各種選項,因為你的應用已經預設處于他們想要的狀态。如果有些功能僅有少部分使用者想要,或者是大部分使用者隻需要使用一次,那就别管它了。
盡可能用其他方式擷取更多的使用者資訊。如果你能得到使用者在内置應用或硬體設定中提供的資訊,直接從系統中擷取,不要讓使用者再次輸入。
如果你必須要求使用者設定使用者資訊,在你的應用中直接提示使用者輸入。然後盡快儲存這些設定(一般來說,儲存到你的應用的設定子產品中)。這樣使用者就無需強制跳出應用進入系統設定頁面了。如果使用者需要更改設定,他們可以在任何時候進入應用的設定子產品進行修改。
盡可能讓使用者晚一點再登入。最理想的狀态是,使用者在無需登入的情況下就能盡量多地浏覽内容并使用部分功能。例如,App Store會在使用者确定進行購買商品時,才要求使用者進行登入。對于那些強制使用者登入後才能進行一切有用操作的應用,使用者往往會直接放棄。
如果你的應用必須先登入後使用,那麼你應該在登入頁面有一些簡短的文字,來描述為什麼必須先登入,以及這樣做會給使用者帶來什麼好處。
謹慎使用新手引導(介紹應用的功能和如何進行操作)。在考慮新手引導之前,你應該努力地完善你的應用,盡可能使應用的功能直覺和易于尋找。其實,好的應用不需要新手引導。如果你确實覺得需要新手引導,那麼請參考如下的建議,設計一個簡潔、有針對性并且不妨礙使用者的新手引導。
隻提供開始使用應用所必需的資訊。好的新手引導應該告訴使用者第一步應該做什麼,或者簡短地示範大部分使用者感興趣的一些功能。如果在能夠探索你的應用之前,給使用者展示太多資訊,讓使用者記住這些不是目前所必須的内容,會讓使用者覺得你的應用很難用。如果在某些特定場景下确實需要額外幫助,那麼也應該隻在使用者處于這個場景之後再提供。
使用動畫和可互動的方式來吸引使用者,并讓使用者通過實際操作來學習如何使用。對于文字内容的增加應該謹慎,且僅當增加文字對于提升體驗有益時才這麼做。不要指望使用者會閱讀大段的文字。例如,可以使用動畫而不是文字來描述如何執行一個簡單的任務。在引導使用者了解較為複雜的任務時,可以通過一些引導浮層來簡要說明每一個步驟使用者需要做什麼。盡可能避免展示應用截圖,因為截圖不可互動的,使用者可能會混淆截圖和應用的實際界面。
能夠讓使用者很容易地取消或者跳過新手引導。有些使用者看完新手引導之後就不想再看,有些甚至根本就不想看新手引導。請記住使用者的選擇,不要強迫使用者每次打開你的應用都要再選擇一次。
不要太早要求使用者去給你的應用評分。過早要求使用者進行評分可能會适得其反。如果你想獲得有價值的回報和評論,在邀請使用者評論之前,請給他們一點時間來使用你的應用,并對你的應用形成印象。例如,你可以等使用者通路了一定數量的頁面或完成了一定數量的任務之後,再邀請他們進行評價。
一般建議按照螢幕預設的定向方式啟動你的應用。盡管如此,如果你的應用隻有一種螢幕方向,那麼就始終以這個方向啟動,讓使用者在他們自己需要時再改變裝置方向。例如,一個遊戲或者媒體觀看應用隻在橫屏模式下運作,那麼就應該以橫屏模式啟動,即使裝置目前處于豎屏模式。這樣的話,如果使用者在豎屏模式下打開應用,他們也知道應該把裝置轉成橫屏來進行使用。
注:最好讓橫屏應用支援兩種方向的橫屏,即home鍵在左或在右方都支援。如果裝置目前已經處于橫向狀态,那麼就按照目前狀态啟動應用,除非你有充分的理由不這麼做。其他情況時,可以考慮按home鍵處于右側的方式啟動應用。(想要了解更多關于支援不同裝置方向的内容,請參閱前文中Adaptivity and Layout相關章節。)
提供一張與應用首頁看上去一樣的閃屏。iOS會在啟動應用時調用這張圖,這樣可以讓使用者覺得啟動速度很快,同時,也可以讓你的應用有足夠的時間去加載内容。具體如何制作閃屏,請查閱Launch Files。
如果可能,不要讓使用者在初次啟動應用時閱讀免責聲明或者确認使用者協定。你可以直接在App Store展示這些内容,使使用者在下載下傳前就有所了解。如果在某些情況下你必須展示這些内容,要確定它們與界面保持統一并在産品功能與使用者體驗之間達成平衡。
在應用重新開機後,需要恢複到使用者退出使用時的狀态,讓他們可以從中斷之處繼續使用。無需讓使用者記住是如何回到此狀态的。了解更多關于保持和恢複應用狀态的有效方式,請查閱Preserving Your App’s Visual Appearance Across Launches。
1.4.2 時刻準備好停止
iOS 應用 不存在關閉或退出選項。當使用者切換到另一個應用,回到主螢幕或者将裝置調至睡眠模式的時候,其實就是停止了目前應用的使用。
當使用者切換應用時,iOS的多任務系統會将其放置到背景并将新應用的UI替換上來。在這種情況下,你必須做到以下幾點:
随時并盡快儲存使用者資訊。因為在背景的應用随時有可能被終止或退出。
當應用停止的時候儲存 盡可能多的目前狀态的詳細資訊。這樣使使用者可以在回到應用時能從中斷之處繼續使用。例如,在使用可滾動的資料清單時,退出後儲存清單所在的位置。了解更多關于保持和恢複應用狀态的有效方式,請查閱Preserving Your App’s Visual Appearance Across Launches.
有些應用可能需要一直在背景運作。例如,使用者可能希望能在使用一個應用的同時還能一直聽歌,接着又想用另外一個應用來檢查代辦項或者玩遊戲。關于如何正确處理多任務,請查閱Multitasking.
不要強制讓應用退出。因為這樣會讓使用者誤以為是系統崩潰。如果有問題産生,需要告訴使用者具體狀況以及如何解決。以下有兩個建議,取決于出現的問題有多嚴重,可以酌情使用:
如果應用中所有的功能目前都不可用,那麼應該顯示一些内容來解釋目前的情形,并建議使用者如何進行後續操作。這部分内容給予了使用者以回報,使使用者相信你的應用現在沒問題。同時這也可以穩定使用者情緒,讓他們決定是否要采取糾正措施,繼續使用應用,還是切換到另一個應用。
如果隻有部分功能不可用,那麼隻要當使用者使用這些功能時顯示提示即可。其他情況下,使用者就應該能正常使用應用的其他功能。如果你決定使用警告框來進行提示,請確定隻在使用者嘗試使用不可用的功能時再顯示。
1.5 模态情境
模态是一個承載某些連貫操作或内容的優缺點并存的模式。它可以給使用者提供一種不脫離主任務的方式去完成一個任務或者獲得資訊,但是也會臨時性的阻止使用者對應用的其他部分進行互動操作。
理想情況下,使用者可以與iOS 應用進行一種非線性的互動,是以,盡可能的減少你應用中的模态體驗是最好的。通常情況,僅在以下情境可以考慮使用模态:
必須引起使用者關注的時候
一個獨立的任務需要完成或者很明确需要被放棄,為了避免在模棱兩可的狀态下遺漏使用者資訊的時候
保證模态任務簡單、簡短和高度聚焦。你肯定不希望使用者使用模态視圖時像使用應用中的一個mini應用一樣。如果子任務過于複雜,使用者會在進入模态情境時忽略了主要任務。在設計一個涉及視覺層次的模态任務時特别要考慮這一點,因為使用者有可能迷失并且忘記如何回到之前的操作中去。如果一個模态任務必須包含不同視圖的子任務,確定給使用者一個獨立、清晰的導航路徑,并避免迂回。更多關于模态試圖的資訊請參考Modal View.
始終提供明顯、安全的退出模态任務的途徑。確定使用者在退出模态視圖時可以預期操作的結果。
一個任務需要多層級的模态視圖時,確定使用者了解點選非最高層級下的完成按鈕的結果。點選一個低層級視圖上的完成按鈕是完成這個視圖中任務的一部分,還是整個任務。因為有可能存在這種困惑,是以要盡可能避免在下級視圖中添加完成按鈕。
保證提醒對話框的内容都是必要且可操作的。提醒對話框會打斷使用者的體驗并且要點選才會消失,是以要讓使用者感到提醒資訊是有用的,打斷是有價值的。想要了解更多請參考Alert.
(譯者注:上文提到的Modal View與Alert均處在iOS Human Interface Guidelines的第4章 UI Elements部分,翻譯将在後續更新中放出,煩請各位耐心等候。)
尊重使用者關于接收通知的偏好設定。使用者會設定接收應用通知的形式,確定遵重使用者的喜好設定,否則可能會觸怒使用者,導緻其關閉應用中所有的推送通知。
1.6互動性與回報
1.6.1 可互動元素吸引使用者點選
為了暗示互動性,設計時會使用很多線索,包括點選的回報、顔色、位置、上下文、表意明确的圖示和标簽等。并不需要過于修飾元素來向使用者展示可互動性。
在支援3D Touch的裝置上,當使用者按壓主屏上的圖示時,背景會虛化以此來暗示可以進行更多功能的選擇。
一個關鍵的顔色可以給使用者提供很強的視覺指引,尤其是沒有備援的其它顔色時。為了對比,使用藍色來标記可互動的元素,同時能提供統一的、易識别的視覺風格。
傳回按鈕使用多個線索指明其可互動并傳達其功能:它出現在導航中,顯示了一個指向後方的圖示,使用了關鍵色,并且顯示了上一級頁面的标題。
1.6.2 使用者所知道的标準手勢
使用者使用點選、拖拽、捏合等手勢與應用和他們的IOS裝置進行互動。使用手勢拉近了使用者和裝置之間的距離,并且增強了直接操縱感。使用者通常期待手勢在不同應用之間都是通用的。
在遊戲或其他沉浸式的應用中,操作手勢也是有趣體驗的一部分。但是在普通應用中,幫助使用者達成目标要比操作本身重要的多,是以最好使用标準手勢,盡量避免讓使用者去發覺和記憶新的操作。
1.6.3 回報有助于了解
回報幫助使用者了解應用目前在做什麼,發現接下來可以做什麼以及了解他們動作産生的結果。UIKit的操作和視圖提供了很多回報類型。
盡可能将狀态或其他的回報資訊整合到UI中。使用者不進行操作或不跳出目前内容就能獲得需要的資訊是最好的。例如,郵箱将目前的狀态顯示在不影響目前内容的 工具欄上。
避免顯示不必要的提醒對話框。對話框是很強的回報機制,隻有在傳遞非常重要,且可操作的資訊時才需要使用它。如果使用者常看到很多沒有重要資訊的對話框,他們很快就會忽略所有對話框提醒。想要了解更多資訊,請參考Alert.(譯者注:Alert處在iOS Human Interface Guidelines的第4章 UI Elements部分,翻譯将在後續更新中放出,煩請各位耐心等候。)
1.6.4 輸入資訊的方式要簡單
不管使用者是點選控件還是使用鍵盤,輸入資訊都會花費時間和精力。如果在發揮有用的效用前就讓使用者輸入大量資訊會減弱使用者繼續使用的欲望。
讓使用者更容易的進行選擇。例如,使用選擇器或者表格代替純文字,因為大部分使用者覺得從清單中進行選擇要比打字容易的多。
1.7動畫(Animation)
細微、精美的動畫遍布iOS的使用者界面,他們使應用的體驗更具吸引力,更具動态性。适當的動畫可以:
傳達狀态和提供回報
增強直接的操縱感
将使用者的操作可視化
(譯者注:以上為視訊截圖,完整視訊請點選觀看)
謹慎地增加動畫,特别是在那些無法提供沉浸式體驗的應用中。過多和無理由的動畫會阻礙應用的流暢性,降低性能,還會分散使用者在操作中的注意力。
尤其是要有目的 地,合理地應用動效和UIKit中的動态控件,并確定對結果進行測試。合理地使用動效可以提升使用者的了解程度和愉悅感;應用過度使用動效會給使用者帶來迷惑和難以掌控的感覺。
如果可以,保持自定義動畫和内置動畫的一緻性。使用者習慣于内置iOS應用使用的精細動畫。事實上,使用者傾向于把視圖之間的平滑切換,對裝置方向改變的流暢相應和基于實體的滾動效果看做是iOS體驗的一部分。除非,你的應用要給使用者提供類似遊戲應用的沉浸式體驗,這種情況下自定義的動畫可以差別于内置動畫。
使用風格類型一緻的動畫。自定義動畫之間也需要保持一緻性,這樣可以讓使用者在使用應用以之前建立的經驗為基礎。
一般來說,自定義的動畫要考慮動畫的現實性和可信性。人們樂意接受自由的藝術創作,但是當動效不合理或者違反實體學時,使用者會感到困惑。例如,當你從螢幕頂部下滑拖出一個視圖的時候,你也要上滑将它收起,因為這麼做可以幫助使用者記住這個視圖從何而來。如果你下滑到螢幕底部關閉這個視圖,使用者關于從螢幕上方呼起的心理模型就會被打破。
1.8 顔色與字型
1.8.1 色彩有助于增進溝通
在iOS系統中,顔色會用于表明互動,傳遞活性以及提供視覺連續性。内置的應用程式選擇使用那些看起來更具個性的、純粹、幹淨的顔色,并輔以或亮或暗的背景組合。
如果你要建立多樣的自定義顔色,要確定它們能夠和諧共存。例如,如果你的應用的基本風格是柔和的色調,你就應該建立一個協調的柔和色調的色闆用于整個應用。
注意在不同情境下的顔色對比。例如,如果在導航欄的背景與欄按鈕标題之間沒有足夠的對比,按鈕就會很難被使用者看到。一個快速但不嚴謹的方法是通過将裝置置于不同的光照環境之中(包括晴朗的室外)來測試裝置上的顔色是否具有足夠的對比度。
雖然在裝置上檢視你的應用能夠在一定程度上幫助你找到需要調整的地方,但這仍代替不了能産生可靠結果的更科學客觀的方法。這種方法涉及到判定前景色和背景色的亮度值是否符合一定的比率。這個比率值可以通過線上對比度電腦或者根據WCAG2.0标準中提供的公式自己計算獲得。你應用中理想的顔色對比度應該是4.5:1或更高。
當你使用自定義的欄顔色時,着重考慮半透明的欄和應用内容。當你需要建立能比對特别顔色的欄顔色時(比如一個已有品牌中的顔色),可能在你獲得你想要的結果之前,你需要用各種顔色進行實驗。欄的顯示将會同時受到iOS系統所提供的半透明欄與藏在欄後面的應用内容的呈現所影響。
API注:使用淺色(tintColor)的屬性值給予欄按鈕顔色,使用欄淺色(barTintColor)的屬性值為欄本身賦色。欲了解更多關于欄屬性的内容,可參見UINavigationBar Class Reference,,UITabBar Class Reference,UIToolbar Class Reference和 UISearchBar Class Reference.
注意顔色的盲區。多數色盲的人很難區分紅色與綠色。需要對你的應用進行測試以確定在其中你沒有将紅色與綠色作為區分兩個不同狀态或值的唯一方式,一些圖像編輯軟體或工具能夠有效的幫你驗證顔色的盲區。通常意義來說,使用多種方式來表征原色的互動性是非常好的(需要了解更多關于在iOS系統中表征互動性的資訊,請參閱Interactive Elements Invite Touch)。
考慮選擇一種基準色顔色來表征互動性與狀态。内置的應用裡的基準色包括比如備忘錄中的黃色,和月曆中的紅色等等。如果你定義一種用于表征互動和狀态的基準色,要確定你的應用中的其他顔色不會與它發生沖突。
避免給可互動和不可互動的元素使用相同的顔色。色彩是表明UI元素互動屬性的方式之一。如果可互動和不可互動的元素使用相同的顔色,使用者将會難以判斷哪些區域是可點的。
色彩可以向使用者傳達資訊,但不一定會以你希望的方式。每個人眼中的色彩是不一樣的,不同的文化為色彩賦予的意義也是不相同的。花時間來研究如何使用色彩才可能會被其他國家或者文化接受。你要盡可能确定應用中運用的色彩向使用者傳達了恰當的資訊。
大多數情況下,不能讓顔色喧賓奪主,讓使用者分心。除非色彩是應用的目的和本質所在,通常情況下色彩應該用來從細微細節之處提升使用者體驗。
1.8.2 優秀的排版提供清晰的傳達
Apple為全平台設計了San Francisco字型以提供一種優雅的、一緻的排版方式和閱讀體驗。在iOS 9及未來的版本中,San Francisco 是系統字型。
確定一個自定義字型在不同尺寸下的所有類型都具備可讀性。實作這一效果的方法之一是效仿在不同的文本尺寸下iOS系統呈現字型樣式的一些方法。例如:
文本永遠都不應該小于11點(points),即使是使用者選擇極小的文本尺寸。相較而言,内容樣式使用17點的字号作為大尺寸,這也是預設的文本字号。
通常來說,字号與行距值在每一檔的文本尺寸設定中差别為1點。唯一例外的是兩種标題的樣式,它們在極小、小和中尺寸的設定中均使用相同的字号、行距和字距。
在最小的三種文本尺寸中,字間距相對較大;而在最大的三中文本尺寸中,字間距相對緊湊。
标題和内容的樣式使用相同的字型尺寸,同時,為了區分标題與内容樣式,标題樣式使用更重的值。
導航控制欄的文本使用相同的字号,而内容文本的樣式則使用大尺寸的設定(值為17點)。
文本總是使用正常或者中重,一般不适用輕或者加粗。
通常情況下,應用中整體應該使用單一字型。多種字型的混雜會使你的應用看上去支離破碎和草率。相反,使用一種字型和少數樣式。根據語義用途,使用UIFont類的API來定義不同文本區域的樣式,比如正文或者标題。
1.9 圖示和圖形
1.9.1 應用圖示
每個應用都需要一個漂亮的圖示。使用者常常會在看到應用圖示的時候便建立起對應用的第一印象,并以此評判應用的品質、作用以及可靠性。
以下幾點是你在設計應用圖示時應當記住的。當你确定要開始設計時,請參考App Icon來擷取更詳細的設計規格與指導。(譯者注:App Icon處在iOS Human Interface Guidelines的Icon and Image Design部分,翻譯将在後續更新中放出,煩請各位耐心等候。)
應用圖示是整個應用品牌的重要組成部分。将圖示設計當成一個講述應用背後的故事,以及與使用者建立情感連接配接的機會。
最好的應用圖示是獨特的,整潔的,打動人心的,讓人印象深刻的。
一個好的應用圖示應該在不同的背景以及不同的規格下都同樣美觀。為了豐富大尺寸圖示的質感而添加的細節有可能讓圖示在小尺寸時變得不清晰。
1.9.2 小圖示
iOS提供了一系列小的icon,用以代表各種常見任務與操作,它們常用在标簽欄(Tab Bar)、工具欄(Toolbars)與導航欄(Navigation Bar)中。使用者通常都已經了解這些内置圖示的含義了,是以可以盡可能的多使用它們。
如果需要自定義動作或者内容,你也可以設計自定義圖示。設計這些小的線性圖示與設計應用圖示有很大的差別,請參考Bar Button Icons來了解更多内容。
1.9.3 圖形
iOS應用大多數圖形豐富。無論是你需要展示使用者的照片,還是需要建立自定義圖檔,以下這些需求都應該遵守:
支援Retina顯示屏。確定你應用中的所有圖檔資源都提供了高分辨率規格。尤其需要注意的是,iPhone 6 Plus需要提供@3x規格的圖檔,而所有其他的高分辨率iOS裝置都需要提供@2x規格的圖檔。
顯示照片或圖檔時請使用原始尺寸,并不要将它拉伸到大于100%。你不會希望在你的應用中看到拉伸和變形的圖檔。可以讓使用者自己來選擇他們是否想要縮放圖檔。
1.10 術語和措辭
你在應用中呈現的每一個字都是與使用者進行對話的一部分。把握這樣的對話機會,為你的使用者提供清晰的表意與愉悅的體驗。
給控件加上短标簽或者容易了解的圖示。讓使用者隻掃一眼就能知道這個控件是幹什麼的。
為你的應用寫一則漂亮的App Store描述,最大程度地把握住這個與潛在使用者溝通的絕佳機會。除了準确描述你的應用、強調應用的品質與亮點以外,你還需要:
修正所有的拼寫、文法與标點符号錯誤。這些小錯誤也許不會影響使用者正常使用,但是可能會讓他們對應用的整體品質産生負面印象。
盡量少用全大寫的詞彙。雖然大寫單詞有時候可以吸引注意力,但是全大寫的段落不适合閱讀,而且會産生一種朝使用者扯着嗓子吼的感覺。
可以描述bug修複情況。如果您的應用新版包含使用者一直期待的bug修複,那在你的軟體描述中提到這一點就是個很好的做法。
1.11 與iOS的整合
與iOS整合,指的是在目前平台上給使用者提供一種舒适的、賓至如歸般的體驗,當然這并不意味着我們要把每一個應用做的和内置應用一模一樣。
最好的與iOS整合的方式便是深刻地了解iOS的主題與核心——這一部分在上文為iOS而設計(Designing for iOS)部分中已有較長的描述,并尋求出如何在你的應用中融合與表達這種主題。當你這麼做的時候,遵循本章中的指引可以幫助你為你的使用者提供他們想要的體驗。
1.11.1 正确使用标準UI元素
盡可能使用UIkit提供的标準UI元素是一個好主意。多使用标準元素而非自定義元素,你與你的使用者都将受益:
标準UI元素會根據iOS官方的更新而自動更新——而自定義元素不會。
标準UI元素對于你自定義外觀和行為來說擁有優秀的擴充性。舉個例子,iOS中所有的視圖(Views,從UIView中繼承的對象)都是 可以使用TintColor屬性來定義顔色的,它讓應用配色變得很簡單。
使用者更熟悉和習慣标準的元素,因為他們可以立刻明白你的應用中這些元素的用途。
想要充分地利用标準UI元素的優點,有一些關鍵點需要特别注意:
嚴格遵循每個UI元素的設計規範。當你應用中的UI元素的外觀與功能都是使用者所熟悉的,他們可以很容易地根據先前的經驗來使用他們,進而更好地使用你的應用。你可以從這些章節中找到各種UI元素的設計規範:Bars, Content Views, Controls, Temporary Views.
不要混用不同版本的iOS裡的UI元素。你一定不希望讓使用者覺得你的UI元素來自于與目前使用者的裝置版本不同的iOS系統。
大體來說,請避免創造自定義UI元素來表現标準互動行為。先問問你自己為什麼一定要建立一個與标準UI元素行為完全相同的自定義元素。如果你隻是想改變标準UI元素的外觀,可以考慮使用UIKit外觀定制API(UIKit appearance customization APIs),或者給元素填充别的顔色。如果你需要定義一個與标準控件稍有不同的行為,請確定你在改變了這個UI元素的屬性和行為之後,這個元素仍然能完成你所希望的操作。如果你需要完全自定義一個行為,最好是設計一個與标準元素完全不相像的自定義元素。
提示:Interface Builder讓擷取标準UI元素,使用外觀定制API(the appearance customization APIs),擷取屬性,以及在你的應用裡使用自定義和系統自帶圖示變得很簡單。想要了解更多Interface Builder的内容,請參閱Xcode Overview.
不要用系統自帶的按鈕和圖示表達其他含義。iOS提供了多種可用的按鈕和圖示。請确認你了解它們的準确表意;不要單純憑借你看到這些圖示樣式的猜測和了解來解讀和使用它們。(你可以在Toolbar and Navigation Bar Buttons和Tab Bar Icons中了解到這些按鈕和圖示的準确含義。)
如果你所需要的功能無法用系統提供的按鈕和圖示來表現,你也可以設計自定義按鈕。自定義按鈕的設計可以參考 Bar Button Icons.
(譯者注:上文提到的章節均處在iOS Human Interface Guidelines的第4章,翻譯将在後續更新中放出,煩請各位耐心等候。)
如果你的app是沉浸式體驗,那麼創造全新的自定義UI是合理的。因為你在創造一個統一的體驗環境,讓使用者在其中能夠有所期待并探索如何控制應用。
1.11.2 充分利用iOS技術
iOS提供了豐富的技術方式來支援使用者完成他們所期望的各種任務和場景。這意味着在絕大多數情況下,将系統提供的技術整合到你的應用中,往往比自定義一種新的技術更為可靠。