777精品出轨人妻国产,熟女av人妻一区二区三四区,国产精品无码中文在线av,美脚パンスト女教师在线观看

iOS 9人機界面指南(一):UI設計基礎(上)

舉報 2015-11-06

iOS 9人機界面指南(一):UI設計基礎(上)

來源:ISUX

譯者注:本文譯自蘋果官方人機界面指南 iOS Human Interface Guidelines (2015年10 月21日),由騰訊ISUX設計師翻譯整理,非發文者一人之作。譯文首發于ISUX博客,如在閱讀過程中發現錯誤與疏漏之處,歡迎不吝指出。后續章節會陸續更新,敬請期待。

上篇:

1.1 為iOS而設計(Designing for iOS)
1.1.1 設計跟隨內容 (Defer to Content)
1.1.2 保證清晰 (Provide Clarity)
1.1.3 用深度層次來進行交流 (Use Depth to Communicate)
1.2 iOS應用解析 (iOS App Anatomy)
1.3 適應性和布局(Adaptivity and Layout)
1.3.1 為自適應而開發(Build In Adaptivity)
1.3.2 在不同環境提供良好體驗(Provide a Great Experience in Each Environment)
1.3.3 使用布局來溝通(Use Layout to Communicate)
1.4 啟動與停止(Starting and Stopping)
1.4.1 即時啟動(Start Instantly)
1.4.2 時刻準備好停止(Always Be Prepared to Stop)
1.5 導航(Navigation)
1.6 模態情境(Modal Contexts)

1.1 為iOS而設計(Designing for iOS)

iOS 表現了以下三大設計原則:

遵從(Deference):UI應該有助于用戶更好地理解內容并與之交互,并且不會分散用戶對內容本身的注意力。
清晰(Clarity):各種尺寸的文字清晰易讀;圖標應該精確醒目,去除多余的修飾,突出重點,以功能驅動設計。
深度(Depth):視覺的層次感和生動的交互動畫會賦予UI新的活力,有助于用戶更好地理解并讓用戶在使用過程中感到愉悅。

2.jpg

無論你是重新設計現有的應用,還是重新開發一個新應用,請基于下列方法進行設計考慮:

● 首先,去除掉UI元素讓應用的核心功能突顯出來,并明確之間的相關性。
● 然后,使用iOS的主題來定義UI并進行用戶體驗設計。完善細節設計,以及適當合理的修飾。
● 最后,保證你設計的UI可以適配各種設備和各種操作模式,使得用戶在不同場景下都可以享受你的應用。

在整個設計過程中,時刻準備著推翻先例,質疑各種假設,并以內容和功能視為重點來驅動每個細節的設計。

1.1.1 設計跟隨內容 (Defer to Content)

盡管清新美觀的UI和流暢的動態效果都是iOS體驗的亮點,但內容始終是iOS的核心。

這里有一些方法可以確保你的設計既可以提升功能體驗,又可以關注內容本身。

充分利用整個屏幕。系統天氣應用是這個方法的絕佳范例:用漂亮的全屏天氣圖片呈現現在的天氣,直觀地向用戶傳遞了最重要的信息,同時也留出空間呈現了每個時段的天氣數據。

3.jpg

重新考慮(盡量減少)擬物化設計的使用。遮罩、漸變和陰影有時會讓UI元素顯得很厚重,導致影響到了對內容的關注。相反,應該以內容為核心,讓用戶界面成為內容的支撐。

4.jpg

用半透明UI元素樣式來暗示背后的內容。半透明的控件元素(比如控制中心)可以提供了上下文的使用場景,幫助用戶看到更多可用的內容,并可以起到短暫的提示作用。在iOS中,半透明的控件元素只讓它遮擋住的地方變得模糊——看上去像蒙著一層米紙——它并沒有遮擋屏幕剩余的部分。

5.jpg

1.1.2 保證清晰 (Provide Clarity)

確保你的應用始終是以內容為核心的另一個方法是保證清晰度。這里有幾種方法可以讓最重要的內容和功能清晰可見,且易于交互。

使用大量留白。留白可以使重要的內容和功能更加醒目、更易理解。留白還可以傳達一種平靜和安寧的心理感受,它可以使一個應用看起來更加聚焦和高效。

6.jpg

讓顏色簡化UI。使用一個主題色——比如Notes中用了黃色——高亮了重要區塊的信息并巧妙地用樣式暗示可交互性。同時,也讓應用有了一致的視覺主題。內置的應用使用了同系列的系統顏色,這樣一來,無論在深色或淺色背景上看起來都很干凈,純粹。

7.jpg

通過使用系統字體確保易讀性。iOS的系統字體(San Francisco)使用動態類型(Dynamic Type)來自動調整字間距和行間距,使文本在任何尺寸大小下都清晰易讀。無論你是使用系統字體還是自定義字體,一定要采用動態類型,這樣一來當用戶選擇不同字體尺寸時,你的應用才可以及時做出響應。

8.jpg

使用無邊框的按鈕。默認情況下,所有的欄(bar)上的按鈕都是無邊框的。在內容區域,通過文案、顏色以及操作指引標題來表明該無邊框按鈕的可交互性。當它被激活時,按鈕可以顯示較窄的邊框或淺色背景作為操作響應。

9.jpg

1.1.3 用深度層次來進行交流 (Use Depth to Communicate)

iOS經常在不同的視圖層級上展現內容,用以表達層次結構和位置,這樣可以幫助用戶了解屏幕上對象之間的關系。

對于支持3D觸控的設備,輕壓(Peek)、重壓(Pop),以及快捷操作(Quick Actions)能讓用戶在不離開當前界面的情景下預覽其他重要內容。

10.jpg

通過使用一個在主屏幕上方的半透明背景浮層,這樣文件夾就能清楚地把內容和屏幕上其他內容區分開來。

11.png

如圖所示,備忘錄(Reminders)以不同的層級展示內容條目。用戶在使用備忘錄里的某個條目時,其他條目會被集中收起在屏幕下方。

12.png

日歷具有較深的層級,當用戶在翻閱年、月、日時,增強的轉場動畫效果給用戶一種層級縱深感。在滾動年份視圖時,用戶可以即時看到今天的日期以及其他日歷任務。

13.png

當用戶選擇了某個月份,年份視圖會局部放大該月份,過渡到月份視圖。今天的日期依然處于高亮狀態,年份會顯示在返回按鈕處,這樣用戶可以清楚地知道他們在哪兒,他們從哪里進來以及如何返回。

14.png

類似的過渡動畫也出現在用戶選擇某個日期時:月份視圖從所選位置分開,將所在的周日期推向內容區頂端并顯示以小時為單位的當天時間軸視圖。這些交互動畫增強了年、月、日之間的層級關系以及用戶的感知。

15.png

1.2 iOS應用解析 (iOS App Anatomy)

幾乎所有的iOS應用都應用了UIKit framework中定義的組件。了解這些基本組件的名稱、作用和功能可以幫助你在應用的界面設計過程中做出更好的決策。

16.jpg

UIKit提供的UI組件可以大致分為以下4種類型:

欄(Bars):包含了上下文信息來指引用戶他們所在的位置,以及控件來幫助用戶導航或執行操作。
內容視圖(Content Views):包含了應用的具體內容以及某些操作行為,比如滾動、插入、刪除、排序等等。
控件(Controls):用于執行操作或展示信息。
臨時視圖(Temporary Views):短暫出現給予用戶重要信息或提供更多的選擇和功能。

UIKit除了定義UI組件元素,還定義對象如何實現功能,例如手勢識別、繪圖、輔助功能和打印支持。

從編程的角度來看,UI組件元素其實是視圖的子類,因為它們繼承了UIView。視圖能繪制屏幕內容并知道用戶何時在其范圍內觸屏。視圖的所有類型有:控件(比如按鈕和滑塊)、內容視圖(比如集合視圖和表格視圖),以及臨時視圖(如警告提示和動作菜單)。

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

這里有一個關于視圖與視圖控制器如何結合并呈現iOS應用的UI的例子,如圖。

17.jpg

盡管開發者認為真正起到作用的是視圖和視圖控制器,但一般用戶感知到的iOS應用是不同屏幕內容的集合。從這個角度來看,在應用里,屏幕內容一般對應于一個獨特的視覺狀態或者模式。

注:一個iOS應用程序包含一個窗口。但是,不同于計算機程序中的窗口,iOS窗口沒有可見的部分并且不能在屏幕上被移動到另一個位置。很多iOS應用程序只有一個窗口;可以支持外部顯示設備器的應用程序可以有不止一個窗口。

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

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

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

人們通常希望在他們所有的設備和多種情境中使用自己喜歡的應用程序,比如在不同的設備方向上和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顯示環境一直處于垂直和水平的常規狀態。

18.png

注:合格的iPad型號支持多任務,你的應用可能需要與其他應用共享同一個屏幕。確保使用Auto Layout,這樣你可以在用戶使用多任務功能時響應他,比如 分屏模式(Split View)和多任務分屏模式(Slide Over)。除了使用Auto Layout,當你在iPad Pro上展示可讀性的內容時,依靠UIView的 readableContentGuide屬性是非常重要的,這樣可以擁有讓讀者舒服的邊距。

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

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

19.jpg

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

20.jpg

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

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

21.jpg

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

22.jpg

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

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

在所有環境下都保持對主體內容的專注。這是最高優先級。人們使用應用時,瀏覽感興趣的內容并與之發生互動。隨著環境變化改變專注點會讓用戶感覺到迷失方向,讓他們感覺對應用失去控制。

避免布局上不必要的變化。在所有環境中保持一致的使用體驗,能讓人們在旋轉設備或在不同設備上運行你的應用時維持穩定的使用模式。例如,如果你在水平的常規模式下使用了網格來顯示圖像,那么無需在壓縮模式下使用列表來展示同樣的內容,雖然你可能調整了網格的尺寸。

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

● 避免出現提示人們旋轉設備的相關UI元素。讓應用在支持的方向下清晰地運行,如果需要用戶旋轉設備,不要給UI添加不必要的混亂。

● 支持同一個方向上的變化。例如,如果一個應用只能橫屏運行,用戶無論用左手或是右手握持時都能觸及到home鍵。如果用戶在使用應用時180度旋轉設備,那最好應用內容也能及時響應并旋轉180度。

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

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

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

強調重要內容或功能,讓用戶容易集中注意在主要任務上。有幾個比較好的辦法是在屏幕上半部分放置主要內容——遵循從左到右的習慣——從靠近左側的屏幕開始:

23.jpg

使用不同的視覺化重量和平衡來告訴用戶當前屏顯元素的主次關系。大型控件吸引眼球,比小的控件更容易在出現時被注意到。而且大型控件也更容易被用戶點擊,這讓它們在應用中尤其有用——就像電話和時鐘(上面的按鈕)那樣——能讓用戶經常在容易分心的環境下仍然保持正常使用。

24.jpg

使用對齊來讓閱讀更舒緩,讓分組和層次之間更有秩序。對齊讓應用看起來整潔而有序,也讓用戶在滑動整屏內容時更容易定位和專注于重要信息。不同信息組的縮進與對齊讓它們之間的關聯更清晰,也讓用戶更容易找到某個控件。

確保用戶在內容處于默認尺寸時便可清楚明白它的主要內容與含義。例如,用戶應當無需水平滾動就能看到重要的文本,或不用放大就可以看到主體圖像。

準備好改變字體大小。用戶期望大多數應用都可以響應他們在iOS的設置中設定的字體大小。為了適應一些文本大小的變化,你也許需要調整布局;想要得到更多文本顯示相關的信息,請查閱下文“顏色與字體”中相關的內容。

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

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

25.jpg

1.4 啟動與停止(Starting and Stopping)

1.4.1 即時啟動(Start Instantly)

我們通常認為用戶不會花超過一兩分鐘去評價一款新應用。當你可以最大程度地利用這段極短的時間,即時呈現對用戶有幫助的內容時,你就能夠激發新用戶的興趣并給所有用戶一種極棒的體驗。

26.jpg

重要:不要在安裝過程結束后告訴用戶需要重啟設備。重啟需要花費時間,同時也會讓人覺得你的應用不可靠且很難使用。如果你的應用有內存使用或其它問題,導致不重啟就無法流暢運行,你必須聲明這些問題。想要了解如何開發一款性能良好的應用,請參閱Use Memory Efficiently.盡可能避免使用閃屏或者其他啟動體驗方式。用戶能夠在啟動應用后立即開始使用是最好不過的。

盡可能地,避免讓用戶做過多設置。而應該如此:

● 聚焦在80%目標用戶的需求上。這樣絕大部分用戶就無需設置各種選項,因為你的應用已經默認處于他們想要的狀態。如果有些功能僅有少部分用戶想要,或者是大部分用戶只需要使用一次,那就別管它了。

● 盡可能用其他方式獲取更多的用戶信息。如果你能得到用戶在內置應用或硬件設置中提供的信息,直接從系統中獲取,不要讓用戶再次輸入。

● 如果你必須要求用戶設置用戶信息,在你的應用中直接提示用戶輸入。然后盡快保存這些設定(一般來說,保存到你的應用的設置模塊中)。這樣用戶就無需強制跳出應用進入系統設置頁面了。如果用戶需要更改設置,他們可以在任何時候進入應用的設置模塊進行修改。

盡可能讓用戶晚一點再登錄。最理想的狀態是,用戶在無需登錄的情況下就能盡量多地瀏覽內容并使用部分功能。例如,App Store會在用戶確定進行購買商品時,才要求用戶進行登錄。對于那些強制用戶登錄后才能進行一切有用操作的應用,用戶往往會直接放棄。

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

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

● 只提供開始使用應用所必需的信息。好的新手引導應該告訴用戶第一步應該做什么,或者簡短地演示大部分用戶感興趣的一些功能。如果在能夠探索你的應用之前,給用戶展示太多信息,讓用戶記住這些不是當前所必須的內容,會讓用戶覺得你的應用很難用。如果在某些特定場景下確實需要額外幫助,那么也應該只在用戶處于這個場景之后再提供。

● 使用動畫和可交互的方式來吸引用戶,并讓用戶通過實際操作來學習如何使用。對于文字內容的增加應該謹慎,且僅當增加文字對于提升體驗有益時才這么做。不要指望用戶會閱讀大段的文字。例如,可以使用動畫而不是文字來描述如何執行一個簡單的任務。在引導用戶了解較為復雜的任務時,可以通過一些引導浮層來簡要說明每一個步驟用戶需要做什么。盡可能避免展示應用截圖,因為截圖不可交互的,用戶可能會混淆截圖和應用的實際界面。

● 能夠讓用戶很容易地取消或者跳過新手引導。有些用戶看完新手引導之后就不想再看,有些甚至根本就不想看新手引導。請記住用戶的選擇,不要強迫用戶每次打開你的應用都要再選擇一次。

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

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

27.jpg

注:最好讓橫屏應用支持兩種方向的橫屏,即home鍵在左或在右方都支持。如果設備當前已經處于橫向狀態,那么就按照當前狀態啟動應用,除非你有充分的理由不這么做。其他情況時,可以考慮按home鍵處于右側的方式啟動應用。(想要了解更多關于支持不同設備方向的內容,請參閱前文中Adaptivity and Layout相關章節。)

提供一張與應用首頁看上去一樣的閃屏。iOS會在啟動應用時調用這張圖,這樣可以讓用戶覺得啟動速度很快,同時,也可以讓你的應用有足夠的時間去加載內容。具體如何制作閃屏,請查閱Launch Files。

如果可能,不要讓用戶在初次啟動應用時閱讀免責聲明或者確認用戶協議。你可以直接在App Store展示這些內容,使用戶在下載前就有所了解。如果在某些情況下你必須展示這些內容,要確保它們與界面保持統一并在產品功能與用戶體驗之間達成平衡。

在應用重啟后,需要恢復到用戶退出使用時的狀態,讓他們可以從中斷之處繼續使用。無需讓用戶記住是如何回到此狀態的。了解更多關于保持和恢復應用狀態的有效方式,請查閱Preserving Your App’s Visual Appearance Across Launches。

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

iOS 應用不存在關閉或退出選項。當用戶切換到另一個應用,回到主屏幕或者將設備調至睡眠模式的時候,其實就是停止了當前應用的使用。當用戶切換應用時,iOS的多任務系統會將其放置到后臺并將新應用的UI替換上來。在這種情況下,你必須做到以下幾點:

隨時并盡快保存用戶信息。因為在后臺的應用隨時有可能被終止或退出。

當應用停止的時候保存盡可能多的當前狀態的詳細信息。這樣使用戶可以在回到應用時能從中斷之處繼續使用。例如,在使用可滾動的數據列表時,退出后保存列表所在的位置。了解更多關于保持和恢復應用狀態的有效方式,請查閱Preserving Your App’s Visual Appearance Across Launches.

有些應用可能需要一直在后臺運行。例如,用戶可能希望能在使用一個應用的同時還能一直聽歌,接著又想用另外一個應用來檢查代辦項或者玩游戲。關于如何正確處理多任務,請查閱Multitasking.

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

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

28.jpg

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

29.jpg

1.5 導航(Navigation)

除非導航設計不合理,不然用戶應該明顯察覺不到應用中的導航體驗。導航設計應該能夠支撐你應用結構和目的卻又不分散用戶注意力。

廣義來說,導航主要有以下幾種類型,每個導航都有其適應的應用結構:

● 分層
● 扁平
● 內容或體驗驅動

在有層級結構的應用中,用戶在每個層級中都要選擇一項,直到到達目的層級。如果要切換到另一個目的層級,用戶必須回退一些層級,或者直接回到初始層級再次選擇。系統設置和郵箱應用在這方面是很好示范,可以參考他們。

30.jpg
譯者注:以上為視頻截圖,完整視頻可點擊觀看。

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

31.jpg
譯者注:以上為視頻截圖,完整視頻可點擊觀看。

在內容或體驗驅動的信息架構應用中,導航也會根據內容或體驗來設計。例如,在閱讀一本電子書時,用戶會一頁接一頁的進行閱讀,或者直接從目錄中選中某一個指定的頁碼;同樣,在游戲中導航也是體驗的重要組成部分。

20151020154550662.jpg
譯者注:以上為視頻截圖,完整視頻可點擊觀看。

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

應該讓用戶時刻清楚自己當前在應用中所處的位置,及如何前往目的頁面。無論使用哪種適合你的應用結構的導航,最重要的是用戶訪問內容的路徑要有邏輯、可預期和易于追溯。

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

使用導航欄(Navigation Bar)幫助用戶輕松訪問分層內容。導航欄的標題可以顯示用戶當前所處的層級,而后退按鈕可以回到上一層級。想要了解更多內容,請查看Navigation Bar.

使用標簽欄(Tab Bar)顯示同類型的內容或功能。標簽欄很適合于扁平信息結構,可以讓用戶在分類之間隨意切換,而不用在意當前所處的位置。想要了解更多內容,請查看Tab Bar.

在應用中,如果每屏顯示的都是同類項或同類頁,可以使用頁面控件(Page Control)。頁面控件的優點是可以直觀地告訴用戶有多少個項目或頁面,以及當前所處位置。想要了解更多內容,請查看Page Control

一般來說,最好能給用戶提供到達每一屏的唯一路徑。如果某屏內容用戶需要在不同場景下查看,可以考慮使用臨時視圖,例如模態視圖、動作菜單或警告框。想要了解更多,請查看Modal ViewAction SheetAlert

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

● 分段控件(Segmented Control)。分段控件讓用戶在一屏內就可以查到不同分類的內容,而不需要切換到其他屏幕。

● 工具欄(Toolbar)。盡管工具欄和導航欄或標簽欄相似,但是工具欄不具導航作用。相反,工具欄為用戶提供了可以控制當前屏幕內容的控件。

(譯者注:上文提到的Navigation Bar, Tab Bar, Page Control, Modal View, Action Sheet, Alert, Segmented Control和Toolbar均處在iOS Human Interface Guidelines的第4章 UI Elements部分,翻譯將在后續更新中放出,煩請各位耐心等候。若有需要,亦可先參考先前已翻譯的iOS7 UI Elements章節:上,下。)

1.6 模態情境(Modal Contexts)

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

32.png

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

● 必須引起用戶關注的時候
● 一個獨立的任務需要完成或者很明確需要被放棄,為了避免在模棱兩可的狀態下遺漏用戶信息的時候

保證模態任務簡單、簡短和高度聚焦。你肯定不希望用戶使用模態視圖時像使用應用中的一個mini應用一樣。如果子任務過于復雜,用戶會在進入模態情境時忽略了主要任務。在設計一個涉及視覺層次的模態任務時特別要考慮這一點,因為用戶有可能迷失并且忘記如何回到之前的操作中去。如果一個模態任務必須包含不同視圖的子任務,確保給用戶一個獨立、清晰的導航路徑,并避免迂回。更多關于模態試圖的信息請參考Modal View.

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

一個任務需要多層級的模態視圖時,確保用戶理解點擊非最高層級下的完成按鈕的結果。點擊一個低層級視圖上的完成按鈕是完成這個視圖中任務的一部分,還是整個任務。因為有可能存在這種困惑,所以要盡可能避免在下級視圖中添加完成按鈕。

保證提醒對話框的內容都是必要且可操作的。提醒對話框會打斷用戶的體驗并且要點擊才會消失,所以要讓用戶感到提醒信息是有用的,打斷是有價值的。想要了解更多請參考Alert.

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

尊重用戶關于接收通知的偏好設置。用戶會設置接收應用通知的形式,確保遵重用戶的喜好設置,否則可能會觸怒用戶,導致其關閉應用中所有的推送通知。


下篇:

1.7 交互性與反饋(Interactivity and Feedback)
1.7.1 可交互元素吸引用戶點擊(Interactive Elements Invite Touch)
1.7.2 用戶所知道的標準手勢(Users Know the Standard Gestures)
1.7.3 反饋有助于理解(Feedback Aids Understanding)
1.7.4 輸入信息的方式要簡單(Inputting Information Should Be Easy)
1.8 動畫(Animation)
1.9 品牌推廣(Branding)
1.10 顏色與字體(Color and Typography)
1.10.1 色彩有助于增進溝通(Color Enhances Communication)
1.10.2 優秀的排版提供清晰的傳達(Great Typography Enables Clear Communication)
1.11 圖標和圖形(Icons and Graphics)
1.11.1 應用圖標(The App Icon)
1.11.2 小圖標(Small Icons)
1.11.3 圖形(Graphics)
1.12 術語和措辭(Terminology and Wording)
1.13 與iOS的整合(Integrating with iOS)
1.13.1 正確使用標準UI元素(Use Standard UI Elements Correctly)
1.13.2 弱化文件和文檔處理(Downplay File and Document Handing)
1.13.3 必要時提供可配置選項(Be Configurable If Necessary)
1.13.4 充分利用iOS技術(Take Advantage of iOS Technologies

本章英文原文訪問地址:iOS Human Interface Guidelines
本章中文翻譯PDF下載:點此下載

iOS 9人機界面指南(一):UI設計基礎(下)

本文系作者授權數英發表,內容為作者獨立觀點,不代表數英立場。
轉載請在文章開頭和結尾顯眼處標注:作者、出處和鏈接。不按規范轉載侵權必究。
本文系作者授權數英發表,內容為作者獨立觀點,不代表數英立場。
未經授權嚴禁轉載,授權事宜請聯系作者本人,侵權必究。
本內容為作者獨立觀點,不代表數英立場。
本文禁止轉載,侵權必究。
本文系數英原創,未經允許不得轉載。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權,侵權必究。

    評論

    文明發言,無意義評論將很快被刪除,異常行為可能被禁言
    DIGITALING
    登錄后參與評論

    評論

    文明發言,無意義評論將很快被刪除,異常行為可能被禁言
    800

    推薦評論

    暫無評論哦,快來評論一下吧!

    全部評論(0條)

    主站蜘蛛池模板: 攀枝花市| 平山县| 皋兰县| 宜城市| 大埔区| 越西县| 平湖市| 民县| 德惠市| 常山县| 东阳市| 库尔勒市| 灌南县| 门头沟区| 丰宁| 博白县| 库伦旗| 安塞县| 法库县| 弥渡县| 布尔津县| 外汇| 新泰市| 虞城县| 米林县| 房产| 墨竹工卡县| 马龙县| 安岳县| 三亚市| 阳信县| 阿拉善右旗| 宁河县| 大方县| 鹤壁市| 海丰县| 中西区| 宜宾县| 洞口县| 平乐县| 广丰县|