IOS 9人机界面指南(1):UI设计基础
編者按:讓人激動到手發抖的蘋果官方人機指南中文版來了!騰訊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提供了豐富的技術方式來支持用戶完成他們所期望的各種任務和場景。這意味著在絕大多數情況下,將系統提供的技術整合到你的應用中,往往比自定義一種新的技術更為可靠。
某些iOS技術,比如多任務并行(Multitasking)與語音向導(VoiceOver)等等,是所有應用都應該包含的系統級特性。而另外一些技術是否整合到應用中,則取決于應用本身的功能性。比如處理門票和禮品卡的應用(Wallet)支持用戶在應用內內購(In-App Purchase),展示應用內置廣告(iAd Rich Media Ads)則可以整合 Game Center,同時支持iCloud.
總結
以上是生活随笔為你收集整理的IOS 9人机界面指南(1):UI设计基础的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Cocos2d-x 寻路算法解析(一):
- 下一篇: unity3d干货分享:实现敌人锥形视角