iOS 8人機介面指南(一):UI設計基礎

發表於2014-10-10

文章索引

 

1.1 為iOS而設計(Designing for iOS)

iOS 的革新關鍵詞如下:

  • 遵從:UI能夠更好地幫助使用者理解內容並與之互動,但卻不會分散使用者對內容本身的注意力。
  • 清晰:各種大小的文字應該易讀,圖示應該醒目,去除多餘的修飾,突出重點,很好地突顯了設計理念。
  • 深度:視覺的層次和生動的互動動作會賦予UI新的活力,不但幫助使用者更好理解新UI的操作並讓使用者在使用過程中感到驚喜。

無論你是重新設計一個現有的應用或是重新開發一個,請嘗試下列方法:

  • 首先,去除了UI元素讓應用的核心功能呈現得更加直接並強調其相關性。
  • 其次,直接使用iOS的系統主題讓其成為應用的UI,這樣能給使用者統一的視覺感受。
  • 最後,保證你設計的UI可以適應各種裝置和不同操作模式,這樣使用者可以在不同場景下舒適地享用你的應用。

在整個設計過程中,時刻準備著推翻先例,假設問題,並以重點內容和功能(為目標)來驅動每個細節設計。

1.1.1 以內容為核心(Defer to Content)

雖然明快美觀的UI和流暢的動態效果是iOS體驗的亮點,但內容始終是iOS的核心。

這裡有一些方法,以確保你的設計能夠提升你的應用功能體驗並關注內容本身。

充分利用整個螢幕。天氣應用是最好的例子:漂亮的天氣圖片充滿全屏,呈現使用者所在地當前天氣情況這最重要的資訊,同時也留出空間呈現了每個時段的氣溫資料。

儘量減少視覺修飾和擬物化設計的使用。UI皮膚、漸變和陰影有時會讓UI元素顯得很厚重,致使搶了內容的風頭。應該以內容為核心,讓UI成為內容的支撐。

嘗試使用半透明底板。半透明的控制元件——比如控制中心——關聯了使用場景,幫助使用者看到更多可用的內容,並可以起到短暫的提示作用。在iOS中,透明的控制元件只讓它遮擋住的地方變得模糊——看上去像蒙著一層米紙一樣——它並沒有遮擋螢幕剩餘的部分。

1.1.2 保證清晰度(Provide Clarity)

保證清晰度是另一個方法,以確保你的應用中內容始終是核心。以下是幾種方法,讓最重要的內容和功能清晰,易於互動。

使用大量留白。留白讓重要內容和功能顯得更加醒目。此外,留白可以傳達一種平靜和安寧的視覺感受,它可以使一個應用看起來更加聚焦和高效。

讓顏色簡化UI一個主題色——比如在記事本中使用的黃色——讓重要區域更加醒目並巧妙地表示互動性。這同時也給了一個應用一個統一的視覺主題。內建應用使用家族化的系統顏色,無論在深色和淺色背景上看起來都乾淨,純粹。

通過使用系統字型確保易讀性。iOS的系統字型自動調整行間距和行的高度,使閱讀時文字清晰易讀,無論何種大小的字號都表現良好。無論你是使用系統或是自定義字型,務必使用動態型,這樣你的應用可以在使用者選擇不同字號時做出應對。

使用無邊框的按鈕。預設情況下,所有bar上的按鈕都是無邊框的。在內容區域,無邊框按鈕以文案、顏色以及操作指引標題來表明按鈕功能。當按鈕被啟用時,該按鈕呈現高亮的淺色狀態來作為操作響應。

1.1.3 用深度來體現層次(Use Depth to Communicate)

iOS經常在不同的層級上展現內容,用以表達分組和位置,並幫助使用者瞭解在螢幕上的物件之間的關係。

通過使用一個在主螢幕上方的半透明背景浮層來區分資料夾和其餘部分的內容。

備忘錄以不同的層級展示,如插圖所示。使用者在使用備忘錄裡的某個條目時,其他的條目被收起在螢幕下方(譯者按:其實這個視覺提示使用起來很隱晦)。

日曆有較深的層級,當他們在翻閱年、月、日的時候,以及增強的互動動畫給使用者一種層級縱深感(循序切換的層次,從年到月到日)。在滾動年份檢視時,使用者可以即時看到今天的日期以及其他日曆任務。當使用者處於月份檢視時,點選年份檢視按鈕,月份會縮小至年份檢視中的所處位置。

今天的日期依然處於高亮狀態,年份出現在返回按鈕處,這樣使用者可以清楚地知道他們在哪兒,他們從哪裡進來並且知道如何返回。

類似的過渡動畫出現在使用者選擇一個日期時:月份檢視從所選位置分開,將當前的週日期推向螢幕頂端並翻轉出以小時為單位的當天時間檢視。這些動畫加強了日曆上年月日之間的關係的感知度。

1.2 iOS應用解析(iOS App Anatomy)

幾乎所有的iOS 應用都應用了UIKit framework中定義的元件。瞭解這些元件的名字,作用和構成能夠幫助你設計應用過程中做出更好的決定。

UIKit提供的UI元件大致分成以下4種大類:

Bars包含了導航資訊,告訴使用者他們所在的位置幷包含了一些能幫助使用者瀏覽或啟動某些操作的控制按鈕。

內容檢視:包含了應用的主體內容以及某些操作行為,比如滾動、插入、刪除、排序等等。

控制按鈕:展示資訊或者控制動作。

臨時檢視:短時間出現,給使用者重要資訊或者額外的選擇或者其他功能。

除了定義UI元件,UIKit也定義物件實現的功能,例如手勢識別、繪圖、輔助功能和列印支援。

從程式設計的角度來說,UI元件被認為是不同類別的檢視,因為他們從UIView得到繼承。檢視能繪製螢幕內容並且知道使用者何時觸控了螢幕。檢視的所有型別有:控制元件(比如按鈕和滑塊),內容檢視(比如集合檢視和表格檢視),以及臨時檢視(如警告提示和動作選單)。

要在應用中管理一組或者一系列的檢視,通常需要使用一個檢視控制器,它能協調檢視的顯示內容,實現與使用者互動的功能並能在不同螢幕內容之間切換。比如,“設定”使用了一個導航控制器來展示其檢視層級。

下面是一個例子,關於檢視與檢視控制器如何結合並呈現iOS 應用的UI。

雖然開發者認為真正起到作用的是檢視和檢視控制器,但一般使用者感知到的iOS應用是不同螢幕內容的集合。從這個角度來看,在應用裡,螢幕內容一般對應於一個獨特的視覺狀態或者模式。

注:一個iOS應用程式包含一個視窗。但是,不同於計算機程式中的視窗,iOS視窗沒有可見的部分並且不能在螢幕上被移動到另一個位置。很多iOS應用程式只有一個視窗;可以支援外部顯示裝置器的應用程式可以有不止一個視窗。

iOS Human Interface Guidelines中,screen這個詞和大部分使用者理解的一樣。作為一個開發者,你也許需要讀一下其他與UIscreen相關的章節,這樣你可以更好的瞭解如何關聯外部螢幕。

1.3 適應性和佈局(Adaptivity and Layout)

1.3.1 為自適應而開發(Build In Adaptivity)

人們通常想隨心所欲地使用自己喜歡的應用程式。在iOS 8及未來的版本中,你可以使用不同解析度和自動佈局來幫助你定義螢幕佈局檢視,檢視控制器以及需要隨顯示環境改變的檢視(顯示環境display environment的概念指的是裝置的整個螢幕或者其中一部分,比如一個跳出選單區域或一個分檢視控制器的主檢視部分)。

iOS定義了兩個尺寸類別(size class),常規的(regular)和壓縮的(compact)。常規尺寸有著較易擴充的空間,而壓縮尺寸約束了空間的使用。想要定義一種顯示環境,你需要定義橫縱尺寸型別。如你所想,iOS裝置可以有橫屏豎屏兩種不同的使用模式。

iOS能隨著顯示環境和尺寸類別變化而自動生成不同佈局。舉個例子,當垂直尺寸從壓縮變為常規時,導航欄和工具欄會自動變高。

當你靠尺寸類別來驅動佈局變化時,你的應用在任何顯示環境時都能顯示得很好。關於如何在Interface Builder中更好的使用尺寸類別,你可以查閱Size Classes Design Help

注:在一種尺寸類別中,持續使用Auto Layout進行小的佈局調整,比如拉伸或壓縮內容。

下面的例項可以幫助你理解尺寸型別是如何適配不同裝置的顯示環境。例如:iPad在長寬和橫屏豎屏時都使用常規尺寸型別。換句話說,iPad顯示環境一直處於垂直和水平的常規狀態。

iPhone的顯示環境可根據不同的裝置和不同的握持方向而改變。

豎屏時,iPhone6 Plus使用的是常規高度和壓縮寬度型別。

橫屏時,iPhone6 Plus使用的是壓縮高度和常規寬度型別。

其他iPhone型號,包括iPhone6使用相同的尺寸型別設定。

豎屏時,iPhone 6,iPhone 5 和iPhone 4S使用的是壓縮寬度和常規高度。

橫屏時,這些裝置在寬高上使用的都是壓縮類。

1.3.2 在不同環境提供良好體驗(Provide a Great Experience in Each Environment)

當你使用自適應來開發UI時,你可以保證UI跟隨顯示環境變化而適當地響應。遵照這些指南,你可以給使用者良好的裝置響應體驗。

在所有環境下都保持對主體內容的專注。這是最高優先順序。人們使用應用時,與感興趣的內容發生互動。當使用環境變化的同時,改變專注點會讓使用者感覺到迷失方向,喪失了對應用的控制。

避免佈局上不必要的變化。在所有環境中類似的使用體驗讓人們在旋轉裝置或在不同裝置上執行你的應用時維持使用模式。例如,如果你使用一個網格在水平的常規模式下顯示影象,你無需在一個列表中展示與壓縮模式下相同資訊,雖然你可能調整了網格的尺寸。

如果你的應用只在一個方向上執行,那麼請直接一點。人們希望在各種握持方式下都可以使用你的應用,能滿足這個期待是最好的。但是,如果你的應用只在一個方向下執行,那麼以下幾點請務必注意:

  • 避擴音示人們旋轉裝置的提示UI出現。讓應用清晰地執行在支援的方向下,讓使用者明白應該旋轉裝置,而不是新增不必要的引導性混亂。
  • 支援同一個方向上的變化。例如,如果一個應用只能垂直執行,使用者無論用左手或是右手握持時都能觸及到home鍵。如果使用者在使用應用時180度旋轉裝置,那最好應用內容也能及時響應並旋轉180度。

如果你的應用將裝置方向翻轉視為使用者輸入(的一種指令),那麼就按照程式設定的方式來響應裝置翻轉。舉個例子,一個遊戲讓使用者利用裝置翻轉來移動遊戲中的部件,那麼這個遊戲應用本身(的UI)不能對翻轉螢幕產生響應。在這種情況下,你必須關聯兩個需要變化的方向,並且允許人們在這兩個方向切換直到他們開始(瞭解並執行)應用的主體任務。一旦人們開始執行主要任務,那就開始按程式設定的那樣來響應裝置的動作吧。

1.3.3 使用佈局來溝通(Use Layout to Communicate)

佈局包含的不僅僅是一個應用螢幕上的UI元素外觀。你的佈局,應該告訴使用者什麼是最重要的,他們的選擇是什麼,以及事物是如何關聯起來的。

提升重要內容或功能,讓使用者容易集中注意在主要任務上。有幾個比較好的辦法是在螢幕上半部分放置主要內容,以從左到右的習慣,從靠近左側的螢幕開始。

使用視覺化的重量和平衡向使用者展示相關的屏顯重要元素。大型控制元件吸引眼球,而比小的控制元件更容易在出現時被注意到。而且大型控制元件也更容易被使用者點選,這讓它們在應用中更加有用——就像電話和時鐘(上面的按鈕)——使用者經常在容易分心的環境中能(正常)使用它們。

使用對齊來讓閱讀更舒緩,讓分組和層次之間更有秩序。對齊讓應用看起來整潔而有序,也讓使用者在專注於螢幕時更有空間,從而專注於重要資訊。不同資訊組的縮排與對齊讓它們之間的關聯更清晰,也讓使用者更容易找到某個控制元件。

確保使用者能明白處於預設尺寸的首要內容的含義。例如,使用者無需水平滾動就能看到重要的文字,或不用放大就可以看到主體影象。

準備好改變字型大小。使用者期望大多數應用能有設定字號大小的功能。為了適應一些文字大小的變化,你也許需要調整佈局;想要得到更多文字顯示相關的資訊,你可以查閱章節Text Should Always Be Legible.

儘量避免UI上不一致的表現。在一般情況下,有著相似功能的控制元件看起來也應該類似。使用者常常認為他們看到的不同總有原因,而且他們傾向於花時間去嘗試(譯者按:因此為了避免使用者做無用的嘗試所以建議類似功能外觀一樣)。

給每個互動的元素充足的空間,從而讓使用者容易操作這些內容和控制元件。常用的點按類控制元件的大小是44 x 44點(points)。

1.4 起始與停止(Starting and Stopping)

1.4.1 即時啟動(Start Instantly)

有種說法是使用者往往不會花超過一兩分鐘去審視一個新應用,當你將應用從開啟到啟動這段時間壓縮得很短,並且同時在載入過程中呈現一些對使用者有幫助的內容,你就會激發使用者的興趣並給所有使用者一個驚喜。

重要:不要在安裝過程結束後告訴使用者需要重啟裝置。重啟需要時間並且會讓人覺得你的應用看上去不可靠而且很難使用。

如果你的應用有記憶體使用問題,或者不重啟就無法流暢執行,你必須宣告這些問題。關於如何開發一款效能良好的應用,請查閱iOS應用程式設計指南

儘可能避免使用閃屏或者其他啟動體驗。使用者能夠在啟動後立即開始使用應用是最好不過的。

避免讓使用者做過多設定。而應該如此:

  • 聚焦在滿足80%的使用者需求上。這樣主體使用者群就無需設定各種選項,因為你的應用已經預設處於他們想要的狀態。如果有些功能有少部分使用者想要,換句話說,大部分人不需要的話,就別管它了。
  • 儘可能用其他方式獲取更多(使用者)資訊。如果你能得到使用者在內建應用或硬體設定中提供的資訊,直接從系統中獲取它們,而不需要再次讓使用者輸入。
  • 如果你必須獲取設定資訊,在你的應用中直接向使用者詢問,然後儘快儲存這些設定(譯者注:這段講的是許可權許可,如能否訪問照片或者日曆或地理位置資訊等等)。這樣使用者就無需強制跳出應用進入系統設定頁面了。如果使用者需要更改設定,他們可以在任何時候進入應用的設定選項進行修改。

儘可能讓使用者晚一些再登入。最理想的狀態是,使用者在無需登入的情況下就能儘量多地瀏覽內容並使用部分功能。例如,App Store應用會在使用者瀏覽商品並確定進行購買時,才要求使用者進行登入。對於必須登入才能進行後續瀏覽和操作的應用,使用者往往會直接放棄。

如果你的應用必須先登入後使用,那麼你應該在登入頁面有一些簡短的文字,來描述為什麼必須先登入,以及這樣做會給使用者帶來什麼好處。

謹慎使用新手引導(介紹應用的功能和如何進行操作)。在考慮新手引導之前,你應該完善你的應用,儘可能使應用的功能直觀和易於尋找。有句話說得好,好的應用不需要新手引導。如果你確實覺得需要新手引導,那麼請參考如下的建議,設計一個簡潔、有針對性並且不妨礙使用者的新手引導。

  • 只提供開始使用應用所必需的資訊。好的新手引導應該告訴使用者接下來第一步應該做什麼,或者簡短地演示大部分使用者感興趣的一些功能。在能夠瀏覽你的應用之前,如果使用者遇到太多的資訊,讓使用者記住這些不是當前所必須的內容,他們很可能會覺得你的應用很難用。如果在某些特定場景下確實需要一些引導,那麼也應該在使用者進入這個場景之後再進行。
  • 使用互動動畫來吸引使用者,並讓使用者通過實際上手來學習如何使用。對於文字內容的增加應該謹慎,且僅當增加文字對於提升體驗有益時才這麼做。不要指望使用者會閱讀大段的文字。例如,可以使用動畫而不是文字來描述如何執行一個簡單的任務。在引導使用者瞭解較為複雜的任務時,可以通過一些引導浮層來簡要說明每一個步驟使用者需要做什麼。儘可能避免展示應用截圖,因為截圖是死的,使用者可能會混淆截圖和應用的實際介面。
  • 能夠簡單地取消或者跳過新手引導。有些使用者看完新手引導之後就不想再看,有些甚至根本就不想看新手引導。請記住使用者的選擇,不要強迫使用者每次開啟你的應用都要再做一次選擇。

不要太早要求使用者去給你的應用評分。過早要求使用者進行評分可能會適得其反。如果你想獲得使用者有價值的反饋和評論,在邀請使用者評論之前,請給他們一點時間來使用你的應用,並對你的應用形成印象。例如,你可以等使用者訪問了一定數量的頁面或完成了一定數量的任務之後,再邀請他們進行評價。

一般建議按照螢幕預設的定向方式啟動你的應用。儘管如此,如果你的應用只有一種螢幕方向,那麼就始終以這個方向啟動,讓使用者在他們自己需要時再改變裝置方向。例如,一個遊戲或者媒體觀看應用只在橫屏模式下執行,那麼就應該以橫屏模式啟動,即使裝置當前處於豎屏模式。這樣的話,如果使用者在豎屏模式下開啟應用,他們也知道應該把裝置轉成橫屏來進行使用。

注:最好讓橫屏應用支援兩種模式的橫屏,即home鍵處於左右兩側的狀態。如果裝置當前已經處於橫向狀態,那麼就按照當前狀態啟動應用,除非你有充分的理由不這麼做。其他情況時,可以考慮按home鍵處於右側的方式啟動應用。(想要了解更多關於支援不同裝置方向的內容,請參閱Respond to Changes in Device Orientation.)

準備一張與應用首頁看上去一樣的閃屏。iOS會在啟動應用時呼叫這張圖,這樣可以讓使用者覺得啟動速度很快,降低對等待時間的感知度。具體如何製作閃屏,請查閱Launch Images。(譯者注:Launch Images章節處在iOS Human Interface Guidelines的Icon and Image Design部分,翻譯將在後續更新中放出,煩請各位耐心等候。)

如果可能,不要讓使用者在初次啟動應用時閱讀免責宣告或者確認使用者協議。你可以直接在App Store展示這些內容,使使用者在下載前就有所瞭解;雖然這個辦法能最大地減少麻煩,但也不是一直可行。如果在某些情況下你必須展示這些內容,要確保它們與UI保持統一併在產品功能與使用者體驗之間達成平衡。

在應用重啟後,需要恢復到使用者退出使用時的狀態,讓他們可以從中斷之處繼續使用。無需讓使用者記住是如何達到此種退出狀態的。

1.4.2 時刻準備好停止(Always Be Prepared to Stop)

iOS 應用無需關閉或退出選項。當使用者切換應用,回到主螢幕或者將裝置調至睡眠模式的時候,其實就是停止了當前應用的使用。

當使用者切換應用時,iOS的多工系統會將其放置到後臺並將新應用的UI替換上來。在這種情況下,你必須做到以下幾點:

  • 隨時並儘快儲存使用者資訊,因為在後臺的應用隨時有可能被終止或退出。
  • 當應用停止的時候儲存當前狀態,使使用者可以在回到應用時能從中斷之處繼續使用。例如,在使用可滾動的資料列表時,退出後儲存列表所在的位置。

有些應用可能需要一直在後臺執行。例如,使用者可能希望能在使用一個應用的同時還能一直聽歌,接著又想用另外一個應用來檢查代辦項或者玩遊戲。關於如何正確處理多工,請查閱Multitasking。(譯者注:Multitasking章節處在iOS Human Interface Guidelines的iOS Technologies部分,翻譯將在後續更新中放出,煩請各位耐心等候。)

不要強制讓應用退出。因為這樣會讓使用者誤以為是crash。如果有問題產生,需要告訴使用者具體狀況以及如何解決。以下有兩個建議,取決於出現的問題有多嚴重而酌情使用:

如果應用中所有的功能當前都不可用,那麼應該顯示一些內容來解釋當前的情形,並建議使用者如何進行後續操作。這部分內容給予了使用者以反饋,使使用者相信你的應用現在沒問題。同時這也可以穩定使用者情緒,讓他們決定是否要採取糾正措施,繼續使用應用,還是切換到另一個應用。

如果只有部分功能不可用,那麼只要當使用者使用這些功能時顯示提示即可。不然的話,使用者就應該能正常使用應用的其他功能。如果你決定使用警告框來進行提示,請確保只在使用者嘗試使用不可用的功能時再顯示。

1.5 導航(Navigation)

除非導航設計的不合理,不然使用者不應明顯察覺到應用中的導航體驗。放置導航到一個能夠支撐你的應用結構和目的卻又不過分引起使用者注意的狀態。

廣義來說,有三種主要型別的導航,每種導航都有其適應的應用結構:

  • 分層。
  • 扁平。
  • 內容或經驗驅動。

在分層應用中,使用者在每個層級中都要選擇其中一項,直到目的層級。如果要切換到另一個層級,使用者必須回退一些層級,或者直接回到初始層級進行再次選擇。系統的設定和郵件應用在這方面是很好的示範,可以參考他們。

在扁平應用中,使用者可以從一個主要分類直接切換到另一個,因為所有的主要分類都可以從主屏直接訪問。音樂和App Store是兩個使用扁平結構的好例子。

在內容驅動或經驗驅動資訊結構的應用中,導航的內容也會根據內容或經驗來進行設計。例如,在閱讀一本電子書時,使用者會一頁接一頁地進行閱讀,也會在目錄中選擇想要閱讀的頁碼跳轉後開始閱讀。同樣的,在遊戲應用中,導航的作用也非常重要。

在某些情況下,在一個應用中結合多種導航型別會有很好的效果。例如,對於扁平資訊結構中某一分類下的內容,用分層導航的方式來顯示可能會更好。

使用者應該時刻清楚自己當前在應用中所處的位置,以及如何前往他們所想到的頁面。

無論導航型別是否適合你的應用結構,最重要的是使用者訪問內容的路徑應該是合理、可預期和易於尋找的。

UIKit定義了一些標準的UI元素,這些元素即可以構建分層或扁平的導航,也可以實現以內容為中心的導航,例如電子書或者媒體觀看類應用。遊戲或者其他經驗驅動的應用通常需要一些自定義的元素和行為。

使用導航欄(Navigation Bar)幫助使用者輕鬆訪問分層內容。導航欄的標題可以顯示使用者當前所處的層級,而後退按鈕可以回到上一層級。檢視Navigation Bar瞭解更多。

使用標籤欄(Tab Bar)顯示同型別的內容或功能。標籤欄很適合於扁平資訊結構,可以讓使用者在分類之間隨意切換,而不用在意當前所處的位置。檢視Tab Bar瞭解更多。

在應用中,如果每屏顯示的都是同類項或同類頁,可以使用頁面控制元件(Page Control)。頁面控制元件的優點是可以直觀地告訴使用者共有多少個專案或頁面,以及當前所處的位置。檢視Page Control瞭解更多。

一般來說,最好能給使用者到達每一屏的路徑。如果使用者需要,就應該考慮使用臨時檢視,例如模態檢視、動作選單或警告框。檢視Modal ViewAction SheetAlert瞭解更多。

(譯者注:上文提到的章節均處在iOS Human Interface Guidelines的第4章,翻譯將在後續更新中放出,煩請各位耐心等候。若有需要,亦可先參考先前已翻譯的iOS7 UI Elements章節:。)

UIKit同時還提供了以下相關控制元件:

  • 分段控制元件(Segmented Control)。分段控制元件讓使用者在一屏內就可以檢視到不同分類的內容,而不需要切換到其他螢幕。
  • 工具欄(Toolbar)。儘管工具欄看起來和導航欄或標籤欄相似,但是工具欄不具導航作用。相反,工具欄為使用者提供了可以控制當前螢幕內容的控制元件。

1.6 模態情境(Modal Contexts)

模態是一個承載某些連貫操作或內容的優缺點並存的模式。它可以給使用者提供一種不脫離主任務的方式去完成一個任務或者獲得資訊,但是也會臨時性地阻止使用者對應用的其他部分進行互動操作。

理想情況下,使用者可以與iOS 應用進行一種非線性的互動,所以,儘可能減少應用中的模態體驗是最好的。通常情況,在以下情形下可以考慮使用模態情境:

  • 必須引起使用者關注的時候。
  • 一個獨立的任務需要完成或者很明確需要被放棄,為了避免在模稜兩可的狀態下遺漏使用者資訊的時候。

保持模態任務的簡單,簡短和高度聚焦。你肯定不希望使用者使用模態檢視時像使用應用中的一個mini應用一樣。如果子任務過於複雜,使用者會在進入模態情境時忽略主要任務。在設計一個涉及視覺層次的模態任務時特別要考慮這一點,因為使用者有可能迷失並且忘記如何回到之前的操作中去。如果一個模態任務必須包含不同檢視的子任務,確保給使用者一個獨立、清晰的導航路徑,並避免迂迴。

始終提供明顯、安全的途徑退出模態任務。確保使用者在退出模態檢視時可以預期操作的結果。

一個任務需要多層級的模態檢視時,確保使用者理解點選完成按鈕的結果。點選一個低層級檢視上的完成按鈕是完成這個檢視中任務的一部分,還是整個任務?因為存在這種困惑的可能性,所以要儘可能避免在下級檢視中新增完成按鈕。

保證提醒對話方塊的內容都是重要且可操作的。提醒對話方塊會打斷使用者的體驗並且要點選才會消失,所以要讓使用者感到提醒資訊是有用的,打斷是有價值的。

尊重使用者關於接收通知的選擇。使用者會設定接收應用通知的形式,必須尊重要使用者的喜好設定,否則可能觸怒使用者,導致其關閉所有的推送通知。

1.7 互動性和反饋(Interactivity and Feedback)

1.7.1 使用者知道標準手勢(Users Know the Standard Gestures)

使用者使用點選、拖拽、捏合等手勢與iOS裝置進行互動。使用手勢拉近了使用者和裝置之間的距離,並且增強了直接操縱感。使用者通常期待手勢在不同應用之間都是通用的。

除了使用者熟悉的標準手勢,iOS還定義了一些系統範圍內的操作,例如撥出控制中心或訊息中心。在任意應用下都可以使用這些操作。

不要給標準手勢賦予不同的行為。除非你的應用是遊戲,否則重新定義標準手勢會使使用者迷惑,且增加使用難度。

不要建立和標準手勢功能相似的手勢操作。使用者已經習慣了標準手勢的行為,沒有必要讓使用者學習達到同樣效果的不同操作。

可以用複雜手勢作為完成某任務的快捷方式,但不能是唯一觸達方式。最好給使用者提供一些簡單、直接的方式完成某操作,即使這種方法需要額外的動作。簡單的手勢能讓使用者集中於當前的體驗和內容,而不是互動操作本身。

除非是遊戲,否則避免定義新的手勢。在遊戲或其他沉浸式的應用中,操作手勢也是有趣體驗的一部分。但是在普通應用中,幫助使用者達成目標要比操作本身重要的多,所以最好使用標準手勢,儘量避免讓使用者去發掘和記憶新的操作。

在特定的環境中,可以考慮使用多指操作。雖然複雜的操作並不一定適用於所有應用,但對使用者會花大量時間使用的應用來說可以豐富體驗,例如遊戲或建立內容環境。但因為非標準手勢可發現性差,要儘量少用,並且不要讓這類手勢成為完成任務的唯一方式。

1.7.2 可互動元素吸引使用者點選(Interactive Elements Invite Touch)

為了暗示互動性,設計時會使用很多線索,包括顏色、位置、上下文、表意明確的圖示和標籤等。並不需要過於修飾元素來向使用者展示可互動性。

一個關鍵的顏色可以給使用者提供很強的視覺指引,尤其是沒有冗餘的其它顏色時。為了有對比,使用藍色標記可互動的元素,並且使用統一的、易識別的視覺風格。

返回按鈕使用多個線索指明其可互動性並傳達其功能:它出現在導航中,顯示了一個指向後方的圖示,使用了關鍵色,顯示了上一級頁面的標題。

一個圖示或者標題提供了清晰的名稱指引使用者點選它。例如,地圖中的標題“立交橋路線”,“定位到這裡”,清晰地說明了使用者可做的操作。結合關鍵色,就可以省去按鈕邊界或其他多餘的修飾。

在內容區域,有必要給按鈕新增邊界或背景。操作條中的按鈕、動作表單和提醒對話方塊可以不需要邊界,因為使用者知道在這種區域中大多數選項是可互動的。但是在內容區域,按鈕有必要使用邊界或背景將按鈕從其他內容中區分出來。例如,系統自帶的音樂、時鐘、照片和App Store應用會在一些特別的場景中使用這種按鈕。

照片應用中給分享按鈕增加了邊框,與其他解釋性文字進行了區分。

時鐘應用在秒錶和計時頁面中給按鈕增加背景來強調開始和暫停按鈕,並且使按鈕在周圍的內容中更容易點選。

App Store應用中使用有邊界的按鈕,將按鈕和整個內容條區分開來,點選整條內容檢視詳細資訊,點選按鈕進行下載安裝。

1.7.3 反饋有助於理解(Feedback Aids Understanding)

反饋會幫助使用者瞭解應用當前在做什麼,發現接下來可以做什麼以及理解動作產生的結果。UIKit提供了很多反饋。

儘可能將狀態或其他的反饋資訊整合到UI中。使用者不進行操作或不跳出當前內容就能獲得需要的資訊是最好的。例如,郵箱應用將當前郵箱的狀態顯示工具條上,這樣就不會影響當前內容。

避免顯示不必要的警告框。警告框是一種很強的反饋機制,只有在傳遞非常重要也是理論上可行的資訊時才需要使用它。如果使用者常看到很多不是重要資訊的警告框,他們很快就會忽略所有對話方塊提醒。

1.7.4 輸入資訊的方式要簡單(Inputting Information Should Be Easy)

不管使用者是點選控制元件還是使用鍵盤,輸入資訊都會花費時間和精力。如果發揮有用的效用前就讓使用者輸入大量資訊會減弱使用者繼續使用的慾望。

讓使用者更容易地進行選擇。例如,使用選擇器或者表格代替純文字,避免要求使用者打字來提高選擇效率,降低選擇成本。

[ISUX轉譯]iOS 8人機介面指南(一):UI設計基礎

適宜地從iOS中獲取資訊。裝置上儲存了大量的使用者資訊。可以的話,不要讓使用者提供你可以輕易找到的資訊,例如聯絡人或日曆資訊。

提供有用的反饋來平衡使用者的輸入。付出和回報的概念可以幫助使用者感到程式在被推進。

1.8 動畫(Animation)

iOS的使用者介面中遍佈著細微、精美的動畫,它們使得應用的體驗更具吸引力、更具動態性。適當的動畫可以:

  • 傳達狀態和提供反饋
  • 增強直接操作的感覺
  • 幫助人們視覺化他們的操作結果
(視訊)

謹慎地增加動畫,特別是在那些無法提供沉浸性體驗的應用中。看起來過多的無理由的動畫會阻礙應用的流暢性,降低效能,還會分散使用者在任務中的注意力。尤其要說的是,要有目的和限制性地使用運動效果和UI元件中的動態行為,並確保對結果進行測試。一旦被合理的使用,這些效果能提高使用者的理解度和愉悅度;過度使用他們則會使應用看起來很迷惑,很難控制。

在合適的時候,使自定義的動畫與內建動畫保持統一。人們習慣於謹慎新增動畫,尤其是在那些不能提供沉浸式使用者體驗的應用中。如果應用主要關注一些嚴肅的任務或者生產性任務,那麼動畫就顯得多餘了,還會無端打亂應用的使用流程,降低應用的效能,讓使用者從當前的任務中分心。

開發者的自定義動畫應該切合內建iOS應用的動畫。使用者習慣於內建iOS 應用使用的精細動畫。事實上,使用者趨向於把檢視之間的平滑轉換,對裝置方向改變的流暢響應和基於物理力學的滾動效果看作是iOS體驗的一部分。除非你的應用能夠給使用者沉浸式的體驗–比如遊戲–自定義動畫應該可以與內建應用的動畫相媲美。

使用風格型別一致的動畫。在應用中使用風格型別一致的動畫非常重要,可以讓使用者構建基於使用應用獲得的使用者體驗。

大多數情況下,恰當一點的做法是讓自定義動畫更具現實性。使用者樂意於接受自由的藝術創作,但當你的動畫違揹物理定律和自然法則的時候,他們會感覺到非常迷惑。

1.9 品牌推廣(Branding)

品牌推廣並不僅僅是在應用中展示品牌的顏色和logo。理想狀態下,你開發的某個特定品牌的應用應該通過建立獨特的外觀和感覺來為使用者提供難忘的體驗。

在iOS系統之下可以很容易地使用自定義的圖示、顏色和字型來建立區別於其他應用的UI。當你進行這些元素的設計時,牢記以下兩點:

  • 每個自定義的元素本身都需要具備良好的觀感和功能性,但它也應該與應用中其他元素保持一致,無論應用中其他元素是自定義的還是標準的。
  • 為了在iOS中感覺舒適,你的應用雖然不必看起來跟內建的一樣,但是需要對它的遵從、清晰度和深度(如欲瞭解更多,參見1.1 為iOS而設計(Design for iOS))進行整合。花些時間弄清楚在你的應用中遵從、清晰和深度所代表的意味,並把它們在你的自定義元素中表達出來。

當你需要讓使用者意識到你的品牌時,你應該遵循以下幾點:

以精緻優雅不唐突的方式植入品牌的顏色和圖片。使用者使用你的應用來完成事務或者進行娛樂,他們不希望被強迫著去觀看廣告。為了獲得最好的使用者體驗,你可以通過字型、顏色和影象的設計來潛移默化地地提醒使用者你的品牌身份。

避免遠離使用者關心的內容。比如,在螢幕頂部展示一個二級欄目,僅用來展示品牌資產,這意味著內容沒有足夠的空間,可以考慮以其他低侵入性的方法無處不在地展示品牌,比如巧妙地定製螢幕的背景。

抵抗住誘惑,不要把你的logo貫穿整個應用。移動裝置的螢幕多數相當小,logo的每一次出現都會佔據空間而將使用者與他們想看的內容隔離開。而且,在應用中顯示logo並不能像在網頁中顯示logo那樣達到相同的目的:對於使用者來說通常會很容易在不知道網頁所屬的情況下訪問一個網頁,但卻極少有使用者會在完全不看一個iOS系統中的應用圖示的情況下就開啟它。

1.10 顏色與字型(Color and Typography)

1.10.1 色彩有助於增進溝通(Color Enhances Communication)

在iOS系統中,顏色會用於表徵互動,傳遞活性以及提供視覺連續性。內建的應用程式選擇使用那些看起來更具個性的、純粹、乾淨的顏色,並輔以或亮或暗的背景組合。

如果你要建立多樣的自定義顏色,要確保它們能夠和諧共存。例如,如果你的應用的基本風格是柔和的色調,你就應該建立一個協調的柔和色調的色板用於整個應用。

注意在不同情境下的顏色對比。例如,如果在導航欄的背景與欄按鈕標題之間沒有足夠的對比,按鈕就會很難被使用者看到。 依據經驗的法則來說,需要區分的顏色必須至少存在50%的亮度差異。(我們)需要將裝置置於不同的光照環境之中(包括晴朗的室外)來測試裝置上的觀感效果。

提示:一種發現需要更高對比度的區域的方法是降低UI的飽和度並在灰度模式下檢視它。如果在灰度版本中你很難區分可互動與非可互動元素或背景等,你有可能需要增加這些元素之間的對比度。

當你使用自定義的欄顏色時,著重考慮半透明的欄和應用內容。當你需要建立能匹配特別顏色的欄顏色時(比如一個已有品牌中的顏色),可能在你獲得你想要的結果之前,你需要用各種顏色進行實驗。欄的顯示將會同時受到iOS系統所提供的半透明欄與藏在欄後面的應用內容的呈現所影響。

API註釋:使用淺色(TintColor)的屬性值給予欄按鈕顏色,使用欄淺色(BarTintColor)的屬性值為欄本身賦色。欲瞭解更多關於欄屬性的內容,可參見UINavigationBar Class Reference,,UITabBar Class ReferenceUIToolbar Class Reference和 UISearchBar Class Reference(譯者注:相關章節翻譯將在後續更新中放出,煩請各位耐心等候。)

注意顏色的盲區。多數色盲的人很難區分紅色與綠色。需要對你的應用進行測試以確保在其中你沒有將紅色與綠色作為區分兩個不同狀態或值的唯一方式,一些影象編輯軟體或工具能夠有效的幫你驗證顏色的盲區。通常意義來說,使用多種方式來表徵原色的互動性是非常好的(需要了解更多關於在iOS系統中表徵互動性的資訊,詳見Interactive Elements Invite Touch)。

考慮選擇一種基準色顏色來表徵互動性與狀態。在內建的應用中基準色有比如備忘錄中的黃色與日曆中的紅色等。如果你定義一種用於表徵互動和狀態的基準色,要確保你的應用中的其他顏色不會與它發生衝突。

色彩可以向使用者傳達資訊,但不一定會以你希望的方式。每個人眼中的色彩是不一樣的,不同的文化為色彩賦予的意義也是不相同的。花時間來研究如何使用色彩才可能會被其他國家或者文化接受。你要儘可能確定應用中運用的色彩向使用者傳達了恰當的資訊。

大多數情況下,不能讓顏色喧賓奪主,讓使用者分心。除非色彩是應用的目的和本質所在,通常情況下色彩應該用來從細微細節之處提升使用者體驗。

1.10.2 文字應該清晰易讀(Text Should Always Be Legible)

文字首先必須是清晰可辨的。如果使用者不能看清楚應用中的字詞,那麼文字再好看也是沒是無意義的。當你在你的應用中採用Dynamic Type時,你可以實現:

  • 能自動調整文字的粗細,字母間距以及行高。
  • 為語義上有區別的文字模組指定不同的文字樣式,比如正文、腳註或者標題。
  • 文字可以根據使用者在動態文字和可訪問性設定中指定字型大小的變化作出適當的響應。

注:如果你是用自定義字型,你仍然可以依據系統的字號設定來規劃字型範圍。當使用者改變設定時,你的應用也必須響應式的配合。

就你而言,要採用Dynamic Type需要一些工作。為了學習如何使用文字樣式並確保當使用者改變文字型號設定時你的應用能夠獲取通知,可以參考Text Styles in Text Programming Guide for iOS(譯者注:相關章節翻譯將在後續更新中放出,煩請各位耐心等候。)

文字尺寸的響應式變化需要優先考慮內容。並不是所有的內容對於使用者都是同等重要的。當使用者選擇更大的文字尺寸時,他們是想要使他們關注的內容更容易閱讀;他們並不總是想要螢幕上的每個單詞都更大。

例如,當使用者選擇具備更大易用性的文字尺寸時,郵件將會以更大的尺寸顯示郵件的主題和內容,而對於那些沒那麼重要的資訊——如時間和收件人——則採用較小的尺寸。

在適當的情況下,當使用者選擇一個不同的文字尺寸時要調整頁面佈局。例如,當使用者選擇小的文字尺寸時,你可能想將內容由一列的佈局方式改為兩列。如果你決定根據不同的文字尺寸調整佈局,你可以選擇針對尺寸的子集來實現——如包含小,中和大尺寸——而不是對於每個可能的尺寸都進行佈局的調整。

確保一個自定義字型在不同尺寸下的所有型別都具備可讀性。實現這一效果的方法之一是效仿在不同的文字尺寸下iOS系統呈現字型樣式的一些方法。例如:

  • 文字永遠都不應該小於11點(points),即使是使用者選擇極小的文字尺寸。相較而言,內容樣式使用17點的字號作為大尺寸的預設文字尺寸設定。
  • 通常來說,字號與行距值在每一檔的文字尺寸設定中差別為1點。唯一例外的是兩種標題的樣式,它們被應用在極小、小和中尺寸的設定中,使用了相同的字號、行距和字距。
  • 在最小的三種文字尺寸中,字間距相對較大;而在最大的三中文字尺寸中,字間距相對緊湊。
  • 標題和內容的樣式使用相同的字型尺寸,同時,為了區分標題與內容樣式,標題樣式使用更重的值。
  • 導航控制欄的文字使用相同的字號,而內容文字的樣式則使用大尺寸的設定(值為17點)。
  • 文字總是使用常規或者中重,一般不適用輕或者加粗。

通常情況下,應用中整體應該使用單一字型。多種字型的混雜會使你的應用看上去支離破碎和草率。相反,使用一種字型和少數樣式。根據語義用途,使用UIFont類的API來定義不同文字區域的樣式,比如正文或者標題。

1.11 圖示和圖形(Icons and Graphics)

1.11.1 應用圖示(The App Icon)

每個應用都需要一個漂亮的圖示。使用者常常會在看到應用圖示的時候便建立起對應用的第一印象,並以此評判應用的品質、作用以及可靠性。

以下幾點是你在設計應用圖示時應當記住的。當你確定要開始設計時,請參考App Icon來獲取更詳細的設計規格與指導。(譯者注:App Icon章節處在iOS Human Interface Guidelines的Icon and Image Design部分,翻譯將在後續更新中放出,煩請各位耐心等候。)

  • 應用圖示是整個應用品牌的重要組成部分。將圖示設計當成一個講述應用背後的故事,以及與使用者建立情感連線的機會。
  • 最好的應用圖示是獨特的,整潔的,打動人心的,讓人印象深刻的。
  • 一個好的應用圖示應該在不同的背景以及不同的規格下都同樣美觀。為了豐富大尺寸圖示的質感而新增的細節有可能讓圖示在小尺寸時變得不清晰。

1.11.2 欄圖示(Bar Icons)

iOS提供了一系列小的icon,用以代表各種常見任務與操作,它們常用在標籤欄(Tab Bar)、工具欄(Toolbars)與導航欄(Navigation Bar)中。使用者通常都已經瞭解這些內建圖示的含義了,因此可以儘可能的多使用它們。

如果需要自定義動作或者內容,你也可以設計自定義圖示。設計這些小的線性圖示與設計應用圖示有很大的區別,請參考Bar Button Icons來了解更多內容。(譯者注:Bar Button Icons章節處在iOS Human Interface Guidelines的Icon and Image Design部分,翻譯將在後續更新中放出,煩請各位耐心等候)

請注意,你有時候也可以用文字來代替工具欄和導航欄的圖示。 就像iOS的日曆裡面,工具欄上便是使用“今天”、“日曆”和“收件箱”來代替圖示進行表意的。

想要決定在工具欄和導航欄中到底是用圖示還是文字,可以優先考慮一屏中最多會同時出現多少個圖示。如果數量過多,可能會讓整個應用看起來難以理解。使用圖示還是文字還取決於螢幕方向是橫向還是縱向,因為水平檢視下通常會擁有更多的空間,可以承載更多的文字。

1.11.3 圖形(Graphics)

iOS應用大多數圖形豐富。無論是你需要展示使用者的照片,還是需要建立自定義圖片,以下這些需求都應該遵守:

  • 支援Retina螢幕。確保你應用中的所有圖片資源都提供了高解析度規格。尤其需要注意的是,iPhone 6 Plus需要提供@3x規格的圖片,而所有其他的高解析度iOS裝置都需要提供@2x規格的圖片。
  • 顯示照片或圖片時請使用原始尺寸,並不要將它拉伸到大於100%你不會希望在你的應用中看到拉伸和變形的圖片。可以讓使用者自己來選擇他們是否想要縮放圖片。

不要使用帶有蘋果符號與版權的圖片。這些符號都擁有版權,並且產品的設計可能會經常改變。

1.12 術語和措辭(Terminology and Wording)

你在應用中呈現的每一個字都是與使用者進行對話的一部分。把握這樣的對話機會,為你的使用者提供清晰的表意與愉悅的體驗。

設定是面向全體使用者的一個基礎應用,它使用了簡明扼要的語言來描述了使用者可以進行的操作。舉個例子,設定→勿擾模式(Do Not Disturb)就沒有使用難以理解的複雜術語,而是用了簡單的語言,給使用者描述了裡頭的一系列操作。

保證你使用的術語是使用者能理解的。根據你對使用者群的理解來決定在應用中使用什麼樣的詞彙。舉個例子,在一款針對小白使用者的應用中使用技術術語是不合適的,但對於針對高階使用者的應用來說,使用技術術語是很自然的事情。

使用非正式的友好語氣,但不需要太過低三下四。避免太正式太僵化,或者太過嘻嘻哈哈,傲慢無禮。請記住,使用者可能會反覆閱讀這些文字,因此有些起初看上去很俏皮的語句,多看幾次之後可能會顯得幼稚和煩人。

像新聞編輯一般遣詞造句,避免不必要的冗餘語句。當你的文案足夠簡明扼要,使用者就可以很輕鬆地閱讀和理解它。確定最重要的資訊,精煉它並且突出它,讓使用者不需要讀一大段文字才能瞭解他們在找什麼,以及下一步要做什麼。

給控制元件加上短標籤或者容易理解的圖示。讓使用者只掃一眼就能知道這個控制元件是幹什麼的。

描述時間時要注意準確性。今天和明天這些詞彙確實顯得比較友好,但有時候會讓使用者費解,因為你可能沒有辦法確定使用者當前的時區和時間。舉個例子,假如有一項活動會在半夜12點前開始,對於在同一個時區的使用者而言,這個活動是在今天開始的,但對於那些在早一點的時區裡的使用者而言,這個活動在昨天就已經開始了。

為你的應用寫一則漂亮的App Store描述,最大程度地把握住這個與潛在使用者溝通的絕佳機會。除了準確描述你的應用、強調應用的品質與亮點以外,你還需要:

  • 修正所有的拼寫、語法與標點符號錯誤。這些小錯誤也許不會影響使用者正常使用,但是可能會讓他們對應用的整體品質產生負面印象。
  • 儘量少用全大寫的詞彙。雖然大寫單詞有時候可以吸引注意力,但是全大寫的段落不適合閱讀,而且會產生一種朝使用者扯著嗓子吼的感覺。
  • 可以描述bug修復情況。如果你的應用新版包含使用者一直期待的bug修復,那在你的軟體描述中提到這一點就是個很好的做法。

1.13 與iOS的整合(Integrating with iOS)

與iOS整合,指的是在當前平臺上給使用者提供一種舒適的、賓至如歸般的體驗,當然這並不意味著我們要把每一個應用做的和內建應用一模一樣。

最好的與iOS整合的方式便是深刻地瞭解iOS的主題與核心——這一部分在上文1.1 為iOS而設計(Designing for iOS)部分中已有詳細描述,並尋求出如何在你的應用中融合與表達這種主題。當你這麼做的時候,遵循本章中的指引可以幫助你為你的使用者提供他們想要的體驗。

1.13.1 正確使用標準UI元素(Use Standard UI Elements Correctly)

儘可能使用UIKit提供的標準UI元素。多使用標準元素而非自定義元素,你與你的使用者都將受益:

  • 標準UI元素會根據iOS官方的更新而自動更新——而自定義元素不會。
  • 標準UI元素對於你自定義外觀和行為來說擁有優秀的擴充套件性。舉個例子,iOS中所有的檢視(Views)都是可自定義顏色的,它讓應用配色變得很簡單。想要了解更多如何給UI元素定義顏色,可以參考iOS 7 UI Transition GuideUsing Tint Color的相關章節。
  • 使用者更熟悉和習慣標準的元素,因為這對於他們來說沒有學習成本,他們可以立刻明白這些元素的用途。

想要充分地利用標準UI元素的優點,有一些關鍵點需要特別注意:

嚴格遵循每個UI元素的設計規範。當你應用中的UI元素的外觀與功能都是使用者所熟悉的,他們可以很容易地根據先前的經驗來使用他們,進而更好地使用你的應用。你可以從這些章節中找到各種UI元素的設計規範:BarsContent ViewsControlsTemporary Views.

(譯者注:上文提到的章節均處在iOS Human Interface Guidelines的第4章,翻譯將在後續更新中放出,煩請各位耐心等候。若有需要,亦可先參考先前已翻譯的iOS7 UI Elements章節:。)

不要混用不同版本的iOS裡的UI元素。你一定不希望讓使用者覺得你的UI元素來自於與當前裝置版本不同的iOS系統。

大體來說,請避免創造自定義UI元素來表現標準互動行為。先問問你自己為什麼一定要建立一個與標準UI元素行為完全相同的自定義元素。如果你只是想改變標準UI元素的外觀,可以考慮使用UIKit外觀定製API(UIKit appearance customization APIs),或者給元素填充別的顏色。如果你需要定義一個與標準控制元件稍有不同的行為,請確保你在改變了這個UI元素的屬性和行為之後,這個元素仍然能完成你所希望的操作。

 

不要用系統自帶的按鈕和圖示表達其他含義。iOS提供了多種可用的按鈕和圖示。請確認你瞭解它們的準確表意;不要單純憑藉你看到這些圖示樣式的猜測和理解來解讀和使用它們。(你可以在Toolbar and Navigation Bar ButtonsTab Bar Icons中瞭解到這些按鈕和圖示的準確含義。)

如果你所需要的功能無法用系統提供的按鈕和圖示來表現,你也可以設計自定義按鈕。自定義按鈕的設計可以參考Bar Button Icons

(譯者注:上文提到的章節均處在iOS Human Interface Guidelines的第4章,翻譯將在後續更新中放出,煩請各位耐心等候。若有需要,亦可先參考先前已翻譯的iOS7 UI Elements章節:。)

如果你的應用是沉浸式體驗,那麼創造全新的自定義UI是合理的。因為你在創造一個統一的體驗環境,讓使用者在其中能夠有所期待並探索如何控制應用。

1.13.2 弱化檔案和文件處理(Downplay File and Document Handing)

iOS應用可以幫助使用者建立和處理檔案,但這並不意味著使用者需要過分考慮iOS裝置的檔案系統如何運作。

如果你的應用中支援使用者建立和編輯文件,那麼提供一個清晰的圖形庫檢視(document library view)讓使用者能夠方便地開啟或者新建文件是一個好的做法。理想狀況下,這樣的圖形庫檢視擁有以下特徵:

  • 高度圖形化。使用者通過螢幕上的縮圖就可以一目瞭然,快速找出自己想要的檔案。
  • 讓使用者用最少的動作完成自己的任務。比如說,使用者可以快速地水平滾動檔案列表,然後輕點一下自己想要的檔案來開啟它。
  • 包含新建文件功能。一個圖形庫檢視應該支援讓使用者點選一個新建文件的佔點陣圖便完成新建文件操作,而不是讓使用者通過訪問別的地方來新建文件。

舉個例子,Pages應用的圖形庫檢視裡面,既展示了使用者已存在的文件,也加入了便捷的新建文件操作。

如果你的應用允許使用者使用在其他應用中建立的文件,你可以通過模態文件選擇檢視控制器(modal document picker view controller)來幫助使用者觸達它們。這個控制器可以提取使用者在iCloud中的文件,還可以通過文件提供者擴充套件(Document Provider extensions)來提取在其它應用中建立和儲存的檔案。想要了解更多文件提供者擴充套件的內容,可以參考Document Provider Extensions; 想要了解更多文件提取檢視控制器,請參考Document Picker Programming Guide.

給使用者足夠的信心,讓他們相信除非主動取消或者刪除,他們的成果會被隨時妥善儲存如果你的應用幫助使用者建立於管理文件,不能要求使用者每次都能及時儲存。無論是開啟另一個文件或切換應用的時候,iOS應用都應當承擔起幫助使用者儲存輸入內容的責任。

如果你的應用的主要功能不是創造內容,但又允許使用者檢視或編輯資訊,這種情況下你需要詢問使用者是否要儲存修改。在這種場景下,比較好的做法是提供“編輯”按鈕,點選後進入編輯狀態,同時編輯按鈕變成“儲存”和“取消”按鈕,這種變化可以提示使用者當前處於編輯模式。“儲存”可以保留修改內容,“取消”則退出編輯模式。

1.13.3 必要時提供可配置選項(Be Configurable If Necessary)

某些應用需要使用者手動安裝或設定選項,但是大部分應用不需要如此。一個好的應用可以讓大部分使用者快速上手,並通過主介面給使用者提供便捷的調整體驗的方式。

當你的應用在預設狀態下就能滿足大部分使用者的期望,使用者對設定的需求就減少了。如果你需要儲存使用者的基本資料,可以優先向系統請求和拉取相關資訊,而不是上來就讓使用者自己填寫它。如果你一定要提供使用者鮮少用到的設定項,請參考App Programming Guide for iOS中的The Setting Bundle部分來了解如何在程式碼中定義它們。

儘可能在主介面提供設定選項。如果使用者在進行主線任務時有可能頻繁改變設定,將設定項放在主UI中會很方便。如果使用者只是偶爾才會用到設定項,那麼可以將其放在獨立的檢視中。

如果應用內相關設定需要在系統設定中改變,幫助使用者直接訪問系統設定。尤其是,如果你要用一段文字來描述如何改變這個設定,比如“設定>隱私>定位服務”,倒不如直接放置一個按鈕,點選後即可到達設定中的定位服務。想要了解如何實現,請參考 Settings Launch URL.

1.13.4 充分利用iOS技術(Take Advantage of iOS Technologies)

iOS提供了豐富的技術方式來支援使用者完成他們所期望的各種任務和場景。這意味著在絕大多數情況下,將系統提供的技術整合到你的應用中,往往比自定義一種新的技術更為可靠。

某些iOS技術,比如多工並行(Multitasking)與語音嚮導(VoiceOver)等等,是所有應用都應該包含的系統級特性。而另外一些技術是否整合到應用中,則取決於應用本身的功能性。比如處理門票和禮品卡的應用(Passbook)支援使用者通過In-App Purchase完成購買,展示應用內建廣告(iAd Rich Media Ads)則可以整合 Game Center,同時支援iCloud

相關文章