2015-11-5 用心設計
藍藍設計( ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
來源:莫貝網
譯者注:本文譯自蘋果官方人機界面指南 iOS Human Interface Guidelines (2015年10 月21日),由騰訊ISUX設計師翻譯整理,非發文者一人之作。譯文首發于ISUX博客,如在閱讀過程中發現錯誤與疏漏之處,歡迎不吝指出。后續章節會陸續更新,敬請期待。
文章索引
iOS 表現了以下三大設計原則:
無論你是重新設計現有的應用,還是重新開發一個新應用,請基于下列方法進行設計考慮:
在整個設計過程中,時刻準備著推翻先例,質疑各種假設,并以內容和功能視為重點來驅動每個細節的設計。
盡管清新美觀的UI和流暢的動態效果都是iOS體驗的亮點,但內容始終是iOS的核心。
這里有一些方法可以確保你的設計既可以提升功能體驗,又可以關注內容本身。
充分利用整個屏幕。系統天氣應用是這個方法的絕佳范例:用漂亮的全屏天氣圖片呈現現在的天氣,直觀地向用戶傳遞了最重要的信息,同時也留出空間呈現了每個時段的天氣數據。
重新考慮(盡量減少)擬物化設計的使用。遮罩、漸變和陰影有時會讓UI元素顯得很厚重,導致影響到了對內容的關注。相反,應該以內容為核心,讓用戶界面成為內容的支撐。
用半透明UI元素樣式來暗示背后的內容。半透明的控件元素(比如控制中心)可以提供了上下文的使用場景,幫助用戶看到更多可用的內容,并可以起到短暫的提示作用。在iOS中,半透明的控件元素只讓它遮擋住的地方變得模糊——看上去像蒙著一層米紙——它并沒有遮擋屏幕剩余的部分。
確保你的應用始終是以內容為核心的另一個方法是保證清晰度。這里有幾種方法可以讓最重要的內容和功能清晰可見,且易于交互。
使用大量留白。留白可以使重要的內容和功能更加醒目、更易理解。留白還可以傳達一種平靜和安寧的心理感受,它可以使一個應用看起來更加聚焦和。
讓顏色簡化UI。使用一個主題色——比如Notes中用了黃色——高亮了重要區塊的信息并巧妙地用樣式暗示可交互性。同時,也讓應用有了一致的視覺主題。內置的應用使用了同系列的系統顏色,這樣一來,無論在深色或淺色背景上看起來都很干凈,純粹。
通過使用系統字體確保易讀性。iOS的系統字體(San Francisco)使用動態類型(Dynamic Type)來自動調整字間距和行間距,使文本在任何尺寸大小下都清晰易讀。無論你是使用系統字體還是自定義字體,一定要采用動態類型,這樣一來當用戶選擇 不同字體尺寸時,你的應用才可以及時做出響應。
使用無邊框的按鈕。默認情況下,所有的欄(bar)上的按鈕都是無邊框的。在內容區域,通過文案、顏色以及操作指引標題來表明該無邊框按鈕的可交互性。當它被激活時,按鈕可以顯示較窄的邊框或淺色背景作為操作響應。
iOS經常在不同的視圖層級上展現內容,用以表達層次結構和位置,這樣可以幫助用戶了解屏幕上對象之間的關系。
對于支持3D觸控的設備,輕壓(Peek)、重壓(Pop),以及快捷操作(Quick Actions)能讓用戶在不離開當前界面的情景下預覽其他重要內容。
通過使用一個在主屏幕上方的半透明背景浮層,這樣文件夾就能清楚地把內容和屏幕上其他內容區分開來。
如圖所示,備忘錄(Reminders)以不同的層級展示內容條目。用戶在使用備忘錄里的某個條目時,其他條目會被集中收起在屏幕下方。
日歷具有較深的層級,當用戶在翻閱年、月、日時,增強的轉場動畫效果給用戶一種層級縱深感。在滾動年份視圖時,用戶可以即時看到今天的日期以及其他日歷任務。
當用戶選擇了某個月份,年份視圖會局部放大該月份,過渡到月份視圖。今天的日期依然處于高亮狀態,年份會顯示在返回按鈕處,這樣用戶可以清楚地知道他們在哪兒,他們從哪里進來以及如何返回。
類似的過渡動畫也出現在用戶選擇某個日期時:月份視圖從所選位置分開,將所在的周日期推向內容區頂端并顯示以小時為單位的當天時間軸視圖。這些交互動畫增強了年、月、日之間的層級關系以及用戶的感知。
幾乎所有的iOS應用都應用了UIKit framework中定義的組件。了解這些基本組件的名稱、作用和功能可以幫助你在應用的界面設計過程中做出更好的決策。
UIKit提供的UI組件可以大致分為以下4種類型:
UIKit除了定義UI組件元素,還定義對象如何實現功能,例如手勢識別、繪圖、輔助功能和打印支持。
從編程的角度來看,UI組件元素其實是視圖的子類,因為它們繼承了UIView。視圖能繪制屏幕內容并知道用戶何時在其范圍內觸屏。視圖的所有類型有:控件(比如按鈕和滑塊)、內容視圖(比如集合視圖和表格視圖),以及臨時視圖(如警告提示和動作菜單)。
要在應用中管理一組或者一系列的視圖,通常需要使用視圖控制器。它能協調視圖的內容顯示,實現與用戶交互的功能并能在不同屏幕內容之間切換。比如,“設置”使用了一個導航控制器來展示其視圖層級。
這里有一個關于視圖與視圖控制器如何結合并呈現iOS應用的UI的例子,如圖。
盡管開發者認為真正起到作用的是視圖和視圖控制器,但一般用戶感知到的iOS應用是不同屏幕內容的集合。從這個角度來看,在應用里,屏幕內容一般對應于一個獨特的視覺狀態或者模式。
注:一個iOS應用程序包含一個窗口。但是,不同于計算機程序中的窗口,iOS窗口沒有可見的部分并且不能在屏幕上被移動到另一個位置。很多iOS應用程序只有一個窗口;可以支持外部顯示設備器的應用程序可以有不止一個窗口。
在iOS Human Interface Guidelines中,屏幕(screen)這個詞和大部分用戶理解的一樣。作為一個開發者,你也許需要閱讀一下其他與UIscreen相關的章節,這樣你可以更好的了解如何關聯外部屏幕。
人們通常希望在他們所有的設備和多種情境中使用自己喜歡的應用程序,比如在不同的設備方向上和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使用的是壓縮寬度和常規高度。
橫屏時,這些設備在寬高上使用的都是壓縮類。
當你使用自適應來開發UI時,你可以保證UI跟隨顯示環境變化而適當地響應。遵照這些指南,你可以給用戶良好的設備響應體驗。
在所有環境下都保持對主體內容的專注。這是最高優先級。人們使用應用時,瀏覽感興趣的內容并與之發生互動。隨著環境變化改變專注點會讓用戶感覺到迷失方向,讓他們感覺對應用失去控制。
避免布局上不必要的變化。在所有環境中保持一致的使用體驗,能讓人們在旋轉設備或在不同設備上運行你的應用時維持穩定的使用模式。例如,如果你在水平的常規模式下使用了網格來顯示圖像,那么無需在壓縮模式下使用列表來展示同樣的內容,雖然你可能調整了網格的尺寸。
如果你的應用只在一個方向上運行,那么請直接一點。人們希望在各種握持方式下都可以使用你的應用,能滿足這個期待是最好的。但是,如果你的應用只在一個方向下運行,那么你應當注意:
如果你的應用將設備方向翻轉視為用戶輸入(的一種指令),那么就按照程序設定的方式來響應設備翻轉。舉個例子, 一個游戲讓用戶利用設備翻轉來移動游戲中的部件,那么這個游戲應用本身(的UI)不能對翻轉屏幕產生響應。在這種情況下,你必須關聯兩個需要變化的方向, 并且允許人們在這兩個方向切換直到他們開始(了解并執行)應用的主體任務。一旦人們開始執行主要任務,那就開始按程序設定的那樣來響應設備的動作。
布局包含的不僅僅是一個應用屏幕上的UI元素外觀。你的布局,應該告訴用戶什么是最重要的,他們的選擇是什么,以及事物是如何關聯起來的。
強調重要內容或功能,讓用戶容易集中注意在主要任務上。有幾個比較好的辦法是在屏幕上半部分放置主要內容——遵循從左到右的習慣——從靠近左側的屏幕開始:
使用不同的視覺化重量和平衡來告訴用戶當前屏顯元素的主次關系。大型控件吸引眼球,比小的控件更容易在出現時被注意到。而且大型控件也更容易被用戶點擊,這讓它們在應用中尤其有用——就像電話和時鐘(上面的按鈕)那樣——能讓用戶經常在容易分心的環境下仍然保持正常使用。
使用對齊來讓閱讀更舒緩,讓分組和層次之間更有秩序。對齊讓應用看起來整潔而有序,也讓用戶在滑動整屏內容時更容易定位和專注于重要信息。不同信息組的縮進與對齊讓它們之間的關聯更清晰,也讓用戶更容易找到某個控件。
確保用戶在內容處于默認尺寸時便可清楚明白它的主要內容與含義。例如,用戶應當無需水平滾動就能看到重要的文本,或不用放大就可以看到主體圖像。
準備好改變字體大小。用戶期望大多數應用都可以響應他們在iOS的設置中設定的字體大小。為了適應一些文本大小的變化,你也許需要調整布局;想要得到更多文本顯示相關的信息,請查閱下文“顏色與字體”中相關的內容。
盡量避免UI上不一致的表現。在一般情況下,有著相似功能的控件看起來也應該類似。用戶常常認為他們看到的不同總有原因,而且他們傾向于花時間去嘗試(譯者按:因此為了避免用戶做無用的嘗試,建議類似的功能外觀都保持一樣。)
給每個互動的元素充足的空間,從而讓用戶容易操作這些內容和控件。常用的點按類控件的大小是44 x 44點(points)。
我們通常認為用戶不會花超過一兩分鐘去評價一款新應用。當你可以地利用這段極短的時間,即時呈現對用戶有幫助的內容時,你就能夠激發新用戶的興趣并給所有用戶一種極棒的體驗。
重要:不要在安裝過程結束后告訴用戶需要重啟設備。重啟需要花費時間,同時也會讓人覺得你的應用不可靠且很難使用。
如果你的應用有內存使用或其它問題,導致不重啟就無法流暢運行,你必須聲明這些問題。想要了解如何開發一款性能良好的應用,請參閱Use Memory Efficiently.
盡可能避免使用閃屏或者其他啟動體驗方式。用戶能夠在啟動應用后立即開始使用是最好不過的。
盡可能地,避免讓用戶做過多設置。而應該如此:
盡可能讓用戶晚一點再登錄。最理想的狀態是,用戶在無需登錄的情況下就能盡量多地瀏覽內容并使用部分功能。例如,App Store會在用戶確定進行購買商品時,才要求用戶進行登錄。對于那些強制用戶登錄后才能進行一切有用操作的應用,用戶往往會直接放棄。
如果你的應用必須先登錄后使用,那么你應該在登錄頁面有一些簡短的文字,來描述為什么必須先登錄,以及這樣做會給用戶帶來什么好處。
謹慎使用新手引導(介紹應用的功能和如何進行操作)。在考慮新手引導之前,你應該努力地完善你的應用,盡可能使應用的功能直觀和易于尋找。其實,好的應用不需要新手引導。如果你確實覺得需要新手引導,那么請參考如下的建議,設計一個簡潔、有針對性并且不妨礙用戶的新手引導。
不要太早要求用戶去給你的應用評分。過早要求用戶進行評分可能會適得其反。如果你想獲得有價值的反饋和評論,在邀請用戶評論之前,請給他們一點時間來使用你的應用,并對你的應用形成印象。例如,你可以等用戶訪問了一定數量的頁面或完成了一定數量的任務之后,再邀請他們進行評價。
一般建議按照屏幕默認的定向方式啟動你的應用。盡管如此,如果你的應用只有一種屏幕方向,那么就始終以這個方向 啟動,讓用戶在他們自己需要時再改變設備方向。例如,一個游戲或者媒體觀看應用只在橫屏模式下運行,那么就應該以橫屏模式啟動,即使設備當前處于豎屏模 式。這樣的話,如果用戶在豎屏模式下打開應用,他們也知道應該把設備轉成橫屏來進行使用。
注:最好讓橫屏應用支持兩種方向的橫屏,即home鍵在左或在右方都支持。如果設備當前已經處于橫向狀態,那么就按照當前狀態啟動應用,除非你有充 分的理由不這么做。其他情況時,可以考慮按home鍵處于右側的方式啟動應用。(想要了解更多關于支持不同設備方向的內容,請參閱前文中 Adaptivity and Layout相關章節。)
提供一張與應用首頁看上去一樣的閃屏。iOS會在啟動應用時調用這張圖,這樣可以讓用戶覺得啟動速度很快,同時,也可以讓你的應用有足夠的時間去加載內容。具體如何制作閃屏,請查閱Launch Files。
如果可能,不要讓用戶在初次啟動應用時閱讀免責聲明或者確認用戶協議。你可以直接在App Store展示這些內容,使用戶在下載前就有所了解。如果在某些情況下你必須展示這些內容,要確保它們與界面保持統一并在產品功能與用戶體驗之間達成平衡。
在應用重啟后,需要恢復到用戶退出使用時的狀態,讓他們可以從中斷之處繼續使用。無需讓用戶記住是如何回到此狀態的。了解更多關于保持和恢復應用狀態的有效方式,請查閱Preserving Your App’s Visual Appearance Across Launches。
iOS 應用不存在關閉或退出選項。當用戶切換到另一個應用,回到主屏幕或者將設備調至睡眠模式的時候,其實就是停止了當前應用的使用。
當用戶切換應用時,iOS的多任務系統會將其放置到后臺并將新應用的UI替換上來。在這種情況下,你必須做到以下幾點:
隨時并盡快保存用戶信息。因為在后臺的應用隨時有可能被終止或退出。
當應用停止的時候保存盡可能多的當前狀態的詳細信息。這樣使用戶可以在回到應用時能從中斷之處繼續使用。例如,在使用可滾動的數據列表時,退出后保存列表所在的位置。了解更多關于保持和恢復應用狀態的有效方式,請查閱Preserving Your App’s Visual Appearance Across Launches.
有些應用可能需要一直在后臺運行。例如,用戶可能希望能在使用一個應用的同時還能一直聽歌,接著又想用另外一個應用來檢查代辦項或者玩游戲。關于如何正確處理多任務,請查閱Multitasking.
不要強制讓應用退出。因為這樣會讓用戶誤以為是系統崩潰。如果有問題產生,需要告訴用戶具體狀況以及如何解決。以下有兩個建議,取決于出現的問題有多嚴重,可以酌情使用:
如果應用中所有的功能當前都不可用,那么應該顯示一些內容來解釋當前的情形,并建議用戶如何進行后續操作。這部分內容給予了用戶以反饋,使用戶相信你的應用現在沒問題。同時這也可以穩定用戶情緒,讓他們決定是否要采取糾正措施,繼續使用應用,還是切換到另一個應用。
如果只有部分功能不可用,那么只要當用戶使用這些功能時顯示提示即可。其他情況下,用戶就應該能正常使用應用的其他功能。如果你決定使用警告框來進行提示,請確保只在用戶嘗試使用不可用的功能時再顯示。
除非導航設計不合理,不然用戶應該明顯察覺不到應用中的導航體驗。導航設計應該能夠支撐你應用結構和目的卻又不分散用戶注意力。
廣義來說,導航主要有以下幾種類型,每個導航都有其適應的應用結構:
在有層級結構的應用中,用戶在每個層級中都要選擇一項,直到到達目的層級。如果要切換到另一個目的層級,用戶必須回退一些層級,或者直接回到初始層級再次選擇。系統設置和郵箱應用在這方面是很好示范,可以參考他們。
譯者注:以上為視頻截圖,完整視頻可點擊觀看。
在扁平信息架構的應用中,用戶可以從首頁目錄直接切換到另一個,因為所有的分類都可以從主屏直接訪問。音樂和App Store是兩個使用扁平結構的好例子。
譯者注:以上為視頻截圖,完整視頻可點擊觀看。
在內容或體驗驅動的信息架構應用中,導航也會根據內容或體驗來設計。例如,在閱讀一本電子書時,用戶會一頁接一頁的進行閱讀,或者直接從目錄中選中某一個指定的頁碼;同樣,在游戲中導航也是體驗的重要組成部分。
譯者注:以上為視頻截圖,完整視頻可點擊觀看。
在某些情況下,在一個應用中結合多種導航類型會有很好的效果。例如,對于扁平信息結構中某一分類下的內容,用分層導航的方式來顯示可能會更好。
應該讓用戶時刻清楚自己當前在應用中所處的位置,及如何前往目的頁面。無論使用哪種適合你的應用結構的導航,最重要的是用戶訪問內容的路徑要有邏輯、可預期和易于追溯。
UIKit定義了一些標準的UI元素,以方便地構建分層或扁平導航,還有一些元素可以構建以內容為中心的導航,例如電子書或者媒體觀看類應用。游戲或者其他體驗驅動的應用通常需要一些自定義的元素和行為。
使用導航欄(Navigation Bar)幫助用戶輕松訪問分層內容。導航欄的標題可以顯示用戶當前所處的層級,而后退按鈕可以回到上一層級。想要了解更多內容,請查看Navigation Bar.
使用標簽欄(Tab Bar)顯示同類型的內容或功能。標簽欄很適合于扁平信息結構,可以讓用戶在分類之間隨意切換,而不用在意當前所處的位置。想要了解更多內容,請查看Tab Bar.
在應用中,如果每屏顯示的都是同類項或同類頁,可以使用頁面控件(Page Control)。頁面控件的優點是可以直觀地告訴用戶有多少個項目或頁面,以及當前所處位置。想要了解更多內容,請查看Page Control。
一般來說,最好能給用戶提供到達每一屏的唯一路徑。如果某屏內容用戶需要在不同場景下查看,可以考慮使用臨時視圖,例如模態視圖、動作菜單或警告框。想要了解更多,請查看Modal View、Action Sheet和Alert。
UIKit同時還提供了以下相關控件:
(譯者注:上文提到的Navigation Bar, Tab Bar, Page Control, Modal View, Action Sheet, Alert, Segmented Control和Toolbar均處在iOS Human Interface Guidelines的第4章 UI Elements部分,翻譯將在后續更新中放出,煩請各位耐心等候。若有需要,亦可先參考先前已翻譯的iOS7 UI Elements章節:上,下。)
模態是一個承載某些連貫操作或內容的優缺點并存的模式。它可以給用戶提供一種不脫離主任務的方式去完成一個任務或者獲得信息,但是也會臨時性的阻止用戶對應用的其他部分進行交互操作。
理想情況下,用戶可以與iOS 應用進行一種非線性的交互,所以,盡可能的減少你應用中的模態體驗是最好的。通常情況,僅在以下情境可以考慮使用模態:
保證模態任務簡單、簡短和高度聚焦。你肯定不希望用戶使用模態視圖時像使用應用中的一個mini應用一樣。如果子任務過于復雜,用戶會在進入模態情境時忽略了主要任務。在設計一個涉及視覺層次的模態任務時特別要考慮這一點,因為用戶有可能迷失并且忘記如何回到之前的操作中去。如果一個模態任務必須包含不同視圖的子任務,確保給用戶一個獨立、清晰的導航路徑,并避免迂回。更多關于模態試圖的信息請參考Modal View.
始終提供明顯、安全的退出模態任務的途徑。確保用戶在退出模態視圖時可以預期操作的結果。
一個任務需要多層級的模態視圖時,確保用戶理解點擊非最高層級下的完成按鈕的結果。點擊一個低層級視圖上的完成按鈕是完成這個視圖中任務的一部分,還是整個任務。因為有可能存在這種困惑,所以要盡可能避免在下級視圖中添加完成按鈕。
保證提醒對話框的內容都是必要且可操作的。提醒對話框會打斷用戶的體驗并且要點擊才會消失,所以要讓用戶感到提醒信息是有用的,打斷是有價值的。想要了解更多請參考Alert.
(譯者注:上文提到的Modal View與Alert均處在iOS Human Interface Guidelines的第4章 UI Elements部分,翻譯將在后續更新中放出,煩請各位耐心等候。若有需要,亦可先參考先前已翻譯的iOS7 UI Elements章節:上,下。)
尊重用戶關于接收通知的偏好設置。用戶會設置接收應用通知的形式,確保遵重用戶的喜好設置,否則可能會觸怒用戶,導致其關閉應用中所有的推送通知。
為了暗示交互性,設計時會使用很多線索,包括點擊的反饋、顏色、位置、上下文、表意明確的圖標和標簽等。并不需要過于修飾元素來向用戶展示可交互性。
在支持3D Touch的設備上,當用戶按壓主屏上的圖標時,背景會虛化以此來暗示可以進行更多功能的選擇。
一個關鍵的顏色可以給用戶提供很強的視覺指引,尤其是沒有冗余的其它顏色時。為了對比,使用藍色來標記可交互的元素,同時能提供統一的、易識別的視覺風格。
返回按鈕使用多個線索指明其可交互并傳達其功能:它出現在導航中,顯示了一個指向后方的圖標,使用了關鍵色,并且顯示了上一級頁面的標題。
一個圖標或者標題提供了清晰的名稱指引用戶點擊它。例如,地圖中的標題“Flyover Tour”,“Directions to Here”,清晰的說明了用戶可做的操作。結合關鍵色,就可以省去按鈕邊界或其他多余的修飾。
在內容區域,必要時可以給按鈕添加邊界或背景。位于欄(Bar)、動作列表(Action Sheet)和警告框(Alert)中的按鈕可以不需要邊界,因為用戶知道在這種區域中大多數選項是可交互的。但是在內容區域,有必要使用邊界或背景將 按鈕從其他內容中區分出來。例如,音樂,時鐘,照片,App Store在一些特別的場景中使用這種按鈕。
照片管理中給分享按鈕增加了邊框,從其他解釋性文本中區分出來。
時鐘在秒表和計時頁面中給按鈕增加背景來強調開始和暫停按鈕,并且使按鈕在易分散注意力的內容中更容易點擊。
應用商店中使用有邊界的按鈕,將按鈕和整個內容條區分開來,點擊整條內容查看詳細信息,點擊按鈕進行下載安裝。
用戶使用點擊、拖拽、捏合等手勢與應用和他們的IOS設備進行交互。使用手勢拉近了用戶和設備之間的距離,并且增強了直接操縱感。用戶通常期待手勢在不同應用之間都是通用的。
用戶在使用3D Touch時不需要學習額外的手勢操作。當用戶輕按屏幕并得到反饋時,很容易就能發現3D Touch提供的額外的交互方式。
除了用戶熟悉的標準手勢,iOS還定義了一些系統范圍內的操作,例如呼出控制中心(Control Center)或消息中心(Notification Center)。用戶可以在任意應用下都使用這些手勢。
不要給標準手勢賦予不同的行為。除非你的應用是游戲,否則重新定義標準手勢會使用戶迷惑,且增加使用難度。
不要創建和標準手勢功能相似的手勢操作。用戶已經習慣了標準手勢的行為,沒有必要讓用戶額外學習不同的操作手勢來達到同樣的操作結果。
可以用復雜手勢作為完成某任務的快捷方式,但不能是唯一觸達方式。最好給用戶提供一些簡單,直接的方式完成某操作,即使這種方法需要他們額外地多點擊一到兩次。簡單的手勢能讓用戶集中于當前的體驗和內容,而不是交互操作本身。
除非是游戲,否則避免定義新的手勢。在游戲或其他沉浸式的應用中,操作手勢也是有趣體驗的一部分。但是在普通應用中,幫助用戶達成目標要比操作本身重要的多,所以最好使用標準手勢,盡量避免讓用戶去發覺和記憶新的操作。
在特定的環境中,可以考慮使用多指操作。雖然復雜的操作并不一定適用于所有應用,但對用戶會花大量時間使用的應用來說可以豐富體驗,例如游戲或創建內容環境。但因為非標準手勢可發現性差,要盡量少用,并且不要讓這類手勢成為完成任務的唯一方式。
反饋幫助用戶了解應用當前在做什么,發現接下來可以做什么以及理解他們動作產生的結果。UIKit的操作和視圖提供了很多反饋類型。
盡可能將狀態或其他的反饋信息整合到UI中。用戶不進行操作或不跳出當前內容就能獲得需要的信息是最好的。例如,郵箱將當前的狀態顯示在不影響當前內容的工具欄上。
避免顯示不必要的提醒對話框。對話框是很強的反饋機制,只有在傳遞非常重要,且可操作的信息時才需要使用它。如果用戶常看到很多沒有重要信息的對話框,他們很快就會忽略所有對話框提醒。想要了解更多信息,請參考Alert.(譯者注:Alert處在iOS Human Interface Guidelines的第4章 UI Elements部分,翻譯將在后續更新中放出,煩請各位耐心等候。若有需要,亦可先參考先前已翻譯的iOS7 UI Elements章節:下。)
不管用戶是點擊控件還是使用鍵盤,輸入信息都會花費時間和精力。如果在發揮有用的效用前就讓用戶輸入大量信息會減弱用戶繼續使用的欲望。
讓用戶更容易的進行選擇。例如,使用選擇器或者表格代替純文本,因為大部分用戶覺得從列表中進行選擇要比打字容易的多。
適時地從iOS中獲取信息。設備上存儲了大量的用戶信息。可以的話,不要讓用戶提供你可以輕易找到的信息,例如聯系人或日歷信息。
提供有用的反饋來平衡用戶的輸入。在使用應用的過程中,付出和回報的概念可以幫助用戶感到進程在被推進。
細微、精美的動畫遍布iOS的用戶界面,他們使應用的體驗更具吸引力,更具動態性。適當的動畫可以:
(譯者注:以上為視頻截圖,完整視頻請點擊觀看)
謹慎地增加動畫,特別是在那些無法提供沉浸式體驗的應用中。過多和無理由的動畫會阻礙應用的流暢性,降低性能,還會分散用戶在操作中的注意力。
尤其是要有目的地,合理地應用動效和UIKit中的動態控件,并確保對結果進行測試。合理地使用動效可以提升用戶的理解程度和愉悅感;應用過度使用動效會給用戶帶來迷惑和難以掌控的感覺。
如果可以,保持自定義動畫和內置動畫的一致性。用戶習慣于內置iOS應用使用的精細動畫。事實上,用戶傾向于把視圖之間的平滑切換,對設備方向改變的流暢相應和基于物理的滾動效果看做是iOS體驗的一部分。除非,你的應用要給用戶提供類似游戲應用的沉浸式體驗,這種情況下自定義的動畫可以區別于內置動畫。
使用風格類型一致的動畫。自定義動畫之間也需要保持一致性,這樣可以讓用戶在使用應用以之前建立的經驗為基礎。
一般來說,自定義的動畫要考慮動畫的現實性和可信性。人們樂意接受自由的藝術創作,但是當動效不合理或者違反物 理學時,用戶會感到困惑。例如,當你從屏幕頂部下滑拖出一個視圖的時候,你也要上滑將它收起,因為這么做可以幫助用戶記住這個視圖從何而來。如果你下滑到 屏幕底部關閉這個視圖,用戶關于從屏幕上方呼起的心理模型就會被打破。
成功的品牌推廣不僅僅包括在應用中添加品牌元素。優秀的應用應該通過創建獨特的外觀和感覺來為用戶提供愉悅、難忘的體驗。
在iOS系統之下可以很容易地使用自定義的圖標、顏色和字體來創建區別于其他應用的UI。當你進行這些元素的設計時,牢記以下兩點:
當你需要讓用戶意識到你的品牌時,你應該遵循以下幾點:
以精致優雅不唐突的方式植入品牌元素。用戶使用你的應用來完成事務或者進行娛樂,他們不希望被強迫著去觀看廣告。為了獲得最好的用戶體驗,你可以通過字體、顏色和圖像的設計來潛移默化地地提醒用戶你的品牌身份。
避免遠離用戶關心的內容。不要像上圖中的反例那樣將僅有品牌意義的內容放在屏幕頂部二級欄上持續展示,使正文內容空間被壓縮,而是考慮以其他低侵入性的方法無處不在地展示品牌,如使用自定義顏色、字體,或巧妙地定制屏幕的背景。
抵抗住誘惑,不要把你的logo貫穿整個應用。移 動設備的屏幕多數相當小,logo的每一次出現都會占據空間,從而將用戶與他們想看的內容隔離開。而且,在應用中顯示logo并不能像在網頁中顯示 logo那樣達到相同的目的:對于用戶來說通常會很容易在不知道網頁所屬的情況下訪問一個網頁,但卻極少有用戶會在完全不看一個iOS系統中的應用圖標的 情況下就打開它。
在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元素交互屬性的方式之一。如果可交互和不可交互的元素使用相同的顏色,用戶將會難以判斷哪些區域是可點的。
色彩可以向用戶傳達信息,但不一定會以你希望的方式。每個人眼中的色彩是不一樣的,不同的文化為色彩賦予的意義也是不相同的。花時間來研究如何使用色彩才可能會被其他國家或者文化接受。你要盡可能確定應用中運用的色彩向用戶傳達了恰當的信息。
大多數情況下,不能讓顏色喧賓奪主,讓用戶分心。除非色彩是應用的目的和本質所在,通常情況下色彩應該用來從細微細節之處提升用戶體驗。
Apple為全平臺設計了San Francisco字體以提供一種優雅的、一致的排版方式和閱讀體驗。在iOS 9及未來的版本中,San Francisco 是系統字體。
San Francisco搭配Dynamic Type,可以為您提供:
下載San Francisco可訪問 https://developer.apple.com/fonts/.(注意:iOS9中的San Francisco字體取名為SF-UI)。當你在你的app中采用San Francisco時,你可以調整模擬器>設置中的值來測試在不同尺寸下你的app的文本。
注:如果你是用自定義字體,你仍然可以采用Dynamic Type或根據系統的字號設置來規劃字體范圍。當用戶改變設置時,你的應用也必須響應式的配合。如需了解如何使用文字樣式并確保當用戶改變文字型號設置時你的應用能夠獲取通知,可以參考Text Styles.
San Francisco 有兩類尺寸: 文本模式(Text)和 展示模式(Display)。 文本模式適用于小于20點(points)的尺寸,展示模式適用于大于20點(points)的尺寸。當你在你的app中使用San Francisco時,iOS會自動在適當的時機在文本模式和展示模式中切換。
注:如果你使用應用程序如Sketch或Photoshop來生成你的設計,那么當你設置的字體不小于20點的 時候,你需要切換到展示模式。iOS會根據字體大小為San Francisco自動調整字間距。(字間距是以用作于修改文字間距)。表格10-1 和 10-2分別是文本模式(Text)和展示模式(Display) 在不同字號下的間距值。
為了突出某些文字或者為了在內容塊之間建立視覺關聯,你可以依賴由Dynamic Type支持的語義化樣式,如標題、正文,你也可以指定字體權重,如細體或者半粗。使用 Dynamic Type樣式使得你的內容能更好地表達含義,但如果你想要對你的設計有更好的把控能力,你可以對特定的文字設置特定的權重。(想要了解更多關于調整字體權 重, 可以參閱UIFont Class Reference.)
例如,你可能想要增加某些文字的權重,來幫助用戶可視化你的內容的層次結構,或者把用戶的注意力吸引到特定的詞或短語。另外,你可以通過增加較小文 字的權重和減小較大文字的權重,在多個不同字號的、相鄰的標簽中建立視覺凝聚。字體權重在內容的整體風格和表達中有重要影響,因此你可以選擇特定的權重來 達到設計目的。
文本尺寸的響應式變化需要優先考慮內容。并不是所有的內容對于用戶都是同等重要的。當用戶選擇更大的文本尺寸時,他們是想要使他們關注的內容更容易閱讀;他們并不總是想要屏幕上的每個單詞都更大。
例如,當用戶選擇具備更大易用性的文本尺寸時,郵件將會以更大的尺寸顯示郵件的主題和內容,而對于那些沒那么重要的信息——如時間和收件人——則采用較小的尺寸。
確保一個自定義字體在不同尺寸下的所有類型都具備可讀性。實現這一效果的方法之一是效仿在不同的文本尺寸下iOS系統呈現字體樣式的一些方法。例如:
通常情況下,應用中整體應該使用單一字體。多種字體的混雜會使你的應用看上去支離破碎和草率。相反,使用一種字體和少數樣式。根據語義用途,使用UIFont類的API來定義不同文本區域的樣式,比如正文或者標題。
每個應用都需要一個漂亮的圖標。用戶常常會在看到應用圖標的時候便建立起對應用的第一印象,并以此評判應用的品質、作用以及可靠性。
以下幾點是你在設計應用圖標時應當記住的。當你確定要開始設計時,請參考App Icon來獲取更詳細的設計規格與指導。(譯者注:App Icon處在iOS Human Interface Guidelines的Icon and Image Design部分,翻譯將在后續更新中放出,煩請各位耐心等候。)
iOS提供了一系列小的icon,用以代表各種常見任務與操作,它們常用在標簽欄(Tab Bar)、工具欄(Toolbars)與導航欄(Navigation Bar)中。用戶通常都已經了解這些內置圖標的含義了,因此可以盡可能的多使用它們。
如果需要自定義動作或者內容,你也可以設計自定義圖標。設計這些小的線性圖標與設計應用圖標有很大的區別,請參考Bar Button Icons來了解更多內容。(譯者注:Bar Button Icons章節處在iOS Human Interface Guidelines的Icon and Image Design部分,翻譯將在后續更新中放出,煩請各位耐心等候)
請注意,你有時候也可以用文字來代替工具欄和導航欄的圖標。 就像iOS的日歷里面,工具欄上便是使用”今天”,”日歷”和”收件箱”來代替圖標進行表意的。
想要決定在工具欄和導航欄中到底是用圖標還是文字,可以優先考慮一屏中最多會同時出現多少個圖標。同一屏幕中圖標的數量過多可能會讓整個應用看起來難以理解。使用圖標還是文字還取決于屏幕方向是橫向還是縱向,因為水平視圖下通常會擁有更多的空間,可以承載更多的文字。
iOS應用大多數圖形豐富。無論是你需要展示用戶的照片,還是需要創建自定義圖片,以下這些需求都應該遵守:
不要使用從蘋果系列產品中復制的圖形。這些圖形均受版權保護,而且產品的設計可能會頻繁改變。
不要將蘋果的應用圖標,圖像或者截圖用于你的設計中。所有蘋果的設計均受版權保護并且不允許出現在你的UI中,除非它們是由系統直接提供的。
你在應用中呈現的每一個字都是與用戶進行對話的一部分。把握這樣的對話機會,為你的用戶提供清晰的表意與愉悅的體驗。
設置是面向全體用戶的一個基礎應用,因此它使用了簡明扼要的語言來描述用戶可以進行的操作。舉個例子,設置→勿擾模式(Do Not Disturb)就沒有使用難以理解的復雜技術術語,而是用了簡單的語言,給用戶描述了里頭的一系列操作。
保證你使用的術語是用戶能理解的。根據你對用戶群的理解來決定在應用中使用什么樣的詞匯。舉個例子,在一款針對小白用戶的應用中使用技術術語是不合適的,但對于針對高端用戶的應用來說,使用技術術語是很自然的事情。
使用非正式的友好語氣,但不需要太過卑微。避免太正式太僵化,或者太過嘻嘻哈哈,傲慢無禮。請記住,用戶可能會反復閱讀這些文本,因此有些起初看上去很俏皮的語句,多看幾次之后可能會顯得煩人。
像新聞編輯一般遣詞造句,避免不必要的冗余語句。當你的文案足夠簡明扼要,用戶就可以很輕松地閱讀和理解它。確定最重要的信息,精煉它并且突出它,讓用戶不需要讀一大段文字才能了解他們在找什么,以及下一步要做什么。
給控件加上短標簽或者容易理解的圖標。讓用戶只掃一眼就能知道這個控件是干什么的。
描述時間時要注意準確性。今天和明天這些詞匯確實顯得比較友好,但有時候會讓用戶費解,因為你可能沒有辦法確定 用戶當前的時區和時間。舉個例子,假如有一項活動會在半夜12點前開始,對于在同一個時區的用戶而言,這個活動是在今天開始的,但對于那些在早一點的時區 里的用戶而言,這個活動在昨天就已經開始了。
為你的應用寫一則漂亮的App Store描述,地把握住這個與潛在用戶溝通的絕佳機會。除了準確描述你的應用、強調應用的品質與亮點以外,你還需要:
與iOS整合,指的是在當前平臺上給用戶提供一種舒適的、賓至如歸般的體驗,當然這并不意味著我們要把每一個應用做的和內置應用一模一樣。
最好的與iOS整合的方式便是深刻地了解iOS的主題與核心——這一部分在上文為iOS而設計(Designing for iOS)部分中已有詳細描述,并尋求出如何在你的應用中融合與表達這種主題。當你這么做的時候,遵循本章中的指引可以幫助你為你的用戶提供他們想要的體 驗。
盡可能使用UIkit提供的標準UI元素是一個好主意。多使用標準元素而非自定義元素,你與你的用戶都將受益:
想要充分地利用標準UI元素的優點,有一些關鍵點需要特別注意:
嚴格遵循每個UI元素的設計規范。當你應用中的UI元素的外觀與功能都是用戶所熟悉的,他們可以很容易地根據先前的經驗來使用他們,進而更好地使用你的應用。你可以從這些章節中找到各種UI元素的設計規范:Bars, Content Views, Controls, Temporary Views.
(譯者注:上文提到的章節均處在iOS Human Interface Guidelines的第4章,翻譯將在后續更新中放出,煩請各位耐心等候。若有需要,亦可先參考先前已翻譯的iOS7 UI Elements章節:上,下。)
不要混用不同版本的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章,翻譯將在后續更新中放出,煩請各位耐心等候。若有需要,亦可先參考先前已翻譯的iOS7 UI Elements章節:上,下。)
如果你的app是沉浸式體驗,那么創造全新的自定義UI是合理的。因為你在創造一個統一的體驗環境,讓用戶在其中能夠有所期待并探索如何控制應用。
iOS應用可以幫助用戶創建和處理文件,但這并不意味著用戶需要過分考慮iOS設備的文件系統如何運作。
如果你的應用中支持用戶創建和編輯文檔,那么提供一個清晰的圖形庫視圖(document library view)讓用戶能夠方便地打開或者新建文檔是一個好的做法。理想狀況下,這樣的圖形庫視圖擁有以下特征:
舉個例子,Pages的圖形庫視圖里面,既展示了用戶已存在的文檔,也加入了便捷的新建文檔操作。
提示:你可以使用Quick Look Preview功能來讓用戶預覽你的應用中的文件,哪怕你的應用不能打開這些文件。想要了解如何在你的應用中提供這個功能,請參閱Quick Look.
如果你的應用允許用戶使用在其他應用中創建的文檔,你可以通過模態文檔選擇視圖控制器(modal document picker view controller)來幫助用戶觸達它們。這個控制器可以提取用戶在iCloud中的文檔,還可以通過文檔提供者擴展(Document Provider extensions)來提取在其它應用中創建和儲存的文件。想要了解更多文檔提供者擴展的內容,可以參考Document Provider Extensions; 想要了解更多文檔提取視圖控制器,請參考Document Picker Programming Guide.
給用戶足夠的信心,讓他們相信除非主動取消或者刪除,他們的成果會被隨時妥善保存。如果你的應用幫助用戶創建于管理文檔,不能要求用戶每次都能及時保存。無論是打開另一個文檔或切換應用的時候,iOS應用都應當承擔起幫助用戶保存輸入內容的責任。
如果你的應用的主要功能不是創造內容,但又允許用戶查看或編輯信息,這種情況下你需要詢問用戶是否要保存修改。在這種場景下,比較好的做法是提供 “編輯”按鈕,點擊后進入編輯狀態,同時編輯按鈕變成“保存”和“取消”按鈕,這種變化可以提示用戶當前處于編輯模式。“保存”可以保留修改內容,“取 消”則退出編輯模式。
某些應用需要用戶手動安裝或設置選項,但是大部分應用不需要如此。一個好的應用可以讓大部分用戶快速上手,并通過主界面給用戶提供便捷的調整體驗的方式。
當你的應用在默認狀態下就能滿足大部分用戶的期望,用戶對設置的需求就減少了。如果你需要儲存用戶的基本資料,可以優先向系統請求和拉取相關信息,而不是上來就讓用戶自己填寫它。如果你一定要提供用戶鮮少用到的設置項,請參考App Programming Guide for iOS中的The Setting Bundle部分來了解如何在代碼中定義它們。
盡可能在主UI中提供設置選項。如果這個設置項代表著用戶一個基本任務,又或者用戶在進行主線任務時有可能頻繁改變設置,那么將設置項放在主UI中會很方便。如果用戶只是偶爾才會用到設置項,那么可以將其放在獨立的視圖中。
如果應用內相關設置需要在系統設置中改變,幫助用戶直接訪問系統設置。尤其是,如果你要用一段文字來描述如何改變這個設置,比如“設置>隱私>定位服務”,倒不如直接放置一個按鈕,點擊后即可到達設置中的定位服務。想要了解如何實現,請參考 Settings Launch URL.
iOS提供了豐富的技術方式來支持用戶完成他們所期望的各種任務和場景。這意味著在絕大多數情況下,將系統提供的技術整合到你的應用中,往往比自定義一種新的技術更為可靠。
某些iOS技術,比如多任務并行(Multitasking)與語音向導(VoiceOver)等等,是所有應用都應該包含的系統級特性。而另外一些技術是否整合到應用中,則取決于應用本身的功能性。比如處理門票和禮品卡的應用(Wallet)支持用戶在應用內內購(In-App Purchase),展示應用內置廣告(iAd Rich Media Ads)則可以整合 Game Center,同時支持iCloud.
本章英文原文訪問地址:iOS Human Interface Guidelines
本章中文翻譯PDF下載:點此下載
出處:騰訊ISUX