久久人妻牲爱视频,亚洲无码视频区,黑人操人妻一区二区,aaa在线视频,日产精品久久久久久久,99熟妇诱惑视频,激情只爱无码,国产精品日韩一区二区,超碰成人三级在线

iOS 9人機(jī)界面指南(一):UI設(shè)計(jì)基礎(chǔ)(上)

轉(zhuǎn)載 4 收藏15 評(píng)論
舉報(bào) 2015-11-06

iOS 9人機(jī)界面指南(一):UI設(shè)計(jì)基礎(chǔ)(上)

來(lái)源:ISUX

譯者注:本文譯自蘋果官方人機(jī)界面指南 iOS Human Interface Guidelines (2015年10 月21日),由騰訊ISUX設(shè)計(jì)師翻譯整理,非發(fā)文者一人之作。譯文首發(fā)于ISUX博客,如在閱讀過(guò)程中發(fā)現(xiàn)錯(cuò)誤與疏漏之處,歡迎不吝指出。后續(xù)章節(jié)會(huì)陸續(xù)更新,敬請(qǐng)期待。

上篇:

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

1.1 為iOS而設(shè)計(jì)(Designing for iOS)

iOS 表現(xiàn)了以下三大設(shè)計(jì)原則:

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

2.jpg

無(wú)論你是重新設(shè)計(jì)現(xiàn)有的應(yīng)用,還是重新開(kāi)發(fā)一個(gè)新應(yīng)用,請(qǐng)基于下列方法進(jìn)行設(shè)計(jì)考慮:

● 首先,去除掉UI元素讓應(yīng)用的核心功能突顯出來(lái),并明確之間的相關(guān)性。
● 然后,使用iOS的主題來(lái)定義UI并進(jìn)行用戶體驗(yàn)設(shè)計(jì)。完善細(xì)節(jié)設(shè)計(jì),以及適當(dāng)合理的修飾。
● 最后,保證你設(shè)計(jì)的UI可以適配各種設(shè)備和各種操作模式,使得用戶在不同場(chǎng)景下都可以享受你的應(yīng)用。

在整個(gè)設(shè)計(jì)過(guò)程中,時(shí)刻準(zhǔn)備著推翻先例,質(zhì)疑各種假設(shè),并以內(nèi)容和功能視為重點(diǎn)來(lái)驅(qū)動(dòng)每個(gè)細(xì)節(jié)的設(shè)計(jì)。

1.1.1 設(shè)計(jì)跟隨內(nèi)容 (Defer to Content)

盡管清新美觀的UI和流暢的動(dòng)態(tài)效果都是iOS體驗(yàn)的亮點(diǎn),但內(nèi)容始終是iOS的核心。

這里有一些方法可以確保你的設(shè)計(jì)既可以提升功能體驗(yàn),又可以關(guān)注內(nèi)容本身。

充分利用整個(gè)屏幕。系統(tǒng)天氣應(yīng)用是這個(gè)方法的絕佳范例:用漂亮的全屏天氣圖片呈現(xiàn)現(xiàn)在的天氣,直觀地向用戶傳遞了最重要的信息,同時(shí)也留出空間呈現(xiàn)了每個(gè)時(shí)段的天氣數(shù)據(jù)。

3.jpg

重新考慮(盡量減少)擬物化設(shè)計(jì)的使用。遮罩、漸變和陰影有時(shí)會(huì)讓UI元素顯得很厚重,導(dǎo)致影響到了對(duì)內(nèi)容的關(guān)注。相反,應(yīng)該以內(nèi)容為核心,讓用戶界面成為內(nèi)容的支撐。

4.jpg

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

5.jpg

1.1.2 保證清晰 (Provide Clarity)

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

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

6.jpg

讓顏色簡(jiǎn)化UI。使用一個(gè)主題色——比如Notes中用了黃色——高亮了重要區(qū)塊的信息并巧妙地用樣式暗示可交互性。同時(shí),也讓應(yīng)用有了一致的視覺(jué)主題。內(nèi)置的應(yīng)用使用了同系列的系統(tǒng)顏色,這樣一來(lái),無(wú)論在深色或淺色背景上看起來(lái)都很干凈,純粹。

7.jpg

通過(guò)使用系統(tǒng)字體確保易讀性。iOS的系統(tǒng)字體(San Francisco)使用動(dòng)態(tài)類型(Dynamic Type)來(lái)自動(dòng)調(diào)整字間距和行間距,使文本在任何尺寸大小下都清晰易讀。無(wú)論你是使用系統(tǒng)字體還是自定義字體,一定要采用動(dòng)態(tài)類型,這樣一來(lái)當(dāng)用戶選擇不同字體尺寸時(shí),你的應(yīng)用才可以及時(shí)做出響應(yīng)。

8.jpg

使用無(wú)邊框的按鈕。默認(rèn)情況下,所有的欄(bar)上的按鈕都是無(wú)邊框的。在內(nèi)容區(qū)域,通過(guò)文案、顏色以及操作指引標(biāo)題來(lái)表明該無(wú)邊框按鈕的可交互性。當(dāng)它被激活時(shí),按鈕可以顯示較窄的邊框或淺色背景作為操作響應(yīng)。

9.jpg

1.1.3 用深度層次來(lái)進(jìn)行交流 (Use Depth to Communicate)

iOS經(jīng)常在不同的視圖層級(jí)上展現(xiàn)內(nèi)容,用以表達(dá)層次結(jié)構(gòu)和位置,這樣可以幫助用戶了解屏幕上對(duì)象之間的關(guān)系。

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

10.jpg

通過(guò)使用一個(gè)在主屏幕上方的半透明背景浮層,這樣文件夾就能清楚地把內(nèi)容和屏幕上其他內(nèi)容區(qū)分開(kāi)來(lái)。

11.png

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

12.png

日歷具有較深的層級(jí),當(dāng)用戶在翻閱年、月、日時(shí),增強(qiáng)的轉(zhuǎn)場(chǎng)動(dòng)畫效果給用戶一種層級(jí)縱深感。在滾動(dòng)年份視圖時(shí),用戶可以即時(shí)看到今天的日期以及其他日歷任務(wù)。

13.png

當(dāng)用戶選擇了某個(gè)月份,年份視圖會(huì)局部放大該月份,過(guò)渡到月份視圖。今天的日期依然處于高亮狀態(tài),年份會(huì)顯示在返回按鈕處,這樣用戶可以清楚地知道他們?cè)谀膬?,他們從哪里進(jìn)來(lái)以及如何返回。

14.png

類似的過(guò)渡動(dòng)畫也出現(xiàn)在用戶選擇某個(gè)日期時(shí):月份視圖從所選位置分開(kāi),將所在的周日期推向內(nèi)容區(qū)頂端并顯示以小時(shí)為單位的當(dāng)天時(shí)間軸視圖。這些交互動(dòng)畫增強(qiáng)了年、月、日之間的層級(jí)關(guān)系以及用戶的感知。

15.png

1.2 iOS應(yīng)用解析 (iOS App Anatomy)

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

16.jpg

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

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

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

從編程的角度來(lái)看,UI組件元素其實(shí)是視圖的子類,因?yàn)樗鼈兝^承了UIView。視圖能繪制屏幕內(nèi)容并知道用戶何時(shí)在其范圍內(nèi)觸屏。視圖的所有類型有:控件(比如按鈕和滑塊)、內(nèi)容視圖(比如集合視圖和表格視圖),以及臨時(shí)視圖(如警告提示和動(dòng)作菜單)。

要在應(yīng)用中管理一組或者一系列的視圖,通常需要使用視圖控制器。它能協(xié)調(diào)視圖的內(nèi)容顯示,實(shí)現(xiàn)與用戶交互的功能并能在不同屏幕內(nèi)容之間切換。比如,“設(shè)置”使用了一個(gè)導(dǎo)航控制器來(lái)展示其視圖層級(jí)。

這里有一個(gè)關(guān)于視圖與視圖控制器如何結(jié)合并呈現(xiàn)iOS應(yīng)用的UI的例子,如圖。

17.jpg

盡管開(kāi)發(fā)者認(rèn)為真正起到作用的是視圖和視圖控制器,但一般用戶感知到的iOS應(yīng)用是不同屏幕內(nèi)容的集合。從這個(gè)角度來(lái)看,在應(yīng)用里,屏幕內(nèi)容一般對(duì)應(yīng)于一個(gè)獨(dú)特的視覺(jué)狀態(tài)或者模式。

注:一個(gè)iOS應(yīng)用程序包含一個(gè)窗口。但是,不同于計(jì)算機(jī)程序中的窗口,iOS窗口沒(méi)有可見(jiàn)的部分并且不能在屏幕上被移動(dòng)到另一個(gè)位置。很多iOS應(yīng)用程序只有一個(gè)窗口;可以支持外部顯示設(shè)備器的應(yīng)用程序可以有不止一個(gè)窗口。

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

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

1.3.1 為自適應(yīng)而開(kāi)發(fā)(Build In Adaptivity)

人們通常希望在他們所有的設(shè)備和多種情境中使用自己喜歡的應(yīng)用程序,比如在不同的設(shè)備方向上和iPad的分屏情況下。尺寸類別( Size classes)和自動(dòng)布局(Auto Layout)可以通過(guò)定義屏幕的布局、視圖控制器和視圖在環(huán)境變化時(shí)候應(yīng)該怎么適應(yīng)來(lái)幫助你實(shí)現(xiàn)這個(gè)愿望。(顯示環(huán)境[display environment]的概念指的是設(shè)備的整個(gè)屏幕或者其中一部分,比如彈出框的區(qū)域或者iPad分屏視圖中其中一側(cè)的區(qū)域。)

iOS在特征集合(trait collection)的定義中包含了顯示環(huán)境的概念,特征集合囊括了尺寸類別(size class),顯示比例(display scale)和用戶界面語(yǔ)言(user interface idiom)。你可以使用一個(gè)特征集合讓你的視圖和視圖控制器響應(yīng)顯示環(huán)境的變化。

iOS定義了兩個(gè)尺寸類別(size class),常規(guī)的(regular)和壓縮的(compact)。常規(guī)尺寸與拓展的空間緊密相關(guān),壓縮尺寸與約束的空間相關(guān)。想要定義一種顯示環(huán)境,你需要定義一種橫屏尺寸類別,與一種豎屏尺寸類別。如你所想,一個(gè)iOS設(shè)備在豎屏模式可以使用一套類別,而橫屏模式下可以使用另一套類別。

iOS能隨著尺寸類別和顯示環(huán)境變化而自動(dòng)生成不同布局。舉個(gè)例子,當(dāng)垂直尺寸從壓縮變?yōu)槌R?guī)時(shí),導(dǎo)航欄和工具欄會(huì)自動(dòng)變高。

當(dāng)你靠尺寸類別來(lái)驅(qū)動(dòng)布局變化時(shí),你的應(yīng)用在任何顯示環(huán)境時(shí)都能顯示得很好。關(guān)于如何在Interface Builder中更好的使用尺寸類別,你可以查閱Size Classes Design Help.

注:在一種尺寸類別中,持續(xù)使用Auto Layout進(jìn)行小的布局調(diào)整,比如拉伸或壓縮內(nèi)容。更多Auto Layout,參看 Auto Layout Guide.

下面的實(shí)例可以幫助你形象展現(xiàn)尺寸類型如何適配不同設(shè)備的顯示環(huán)境。例如:iPad(包括iPad Pro)在長(zhǎng)寬和橫屏豎屏?xí)r都使用常規(guī)尺寸類型。換句話說(shuō),iPad顯示環(huán)境一直處于垂直和水平的常規(guī)狀態(tài)。

18.png

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

iPhone的顯示環(huán)境可根據(jù)不同的設(shè)備和不同的握持方向而改變。

豎屏?xí)r,iPhone6 Plus使用的是壓縮寬度和常規(guī)高度類型。

19.jpg

橫屏?xí)r,iPhone6 Plus使用的是常規(guī)寬度和壓縮高度類型。

20.jpg

其他iPhone型號(hào),包括iPhone6使用相同的尺寸類型設(shè)置。

豎屏?xí)r,iPhone 6,iPhone 5 和iPhone 4S使用的是壓縮寬度和常規(guī)高度。

21.jpg

橫屏?xí)r,這些設(shè)備在寬高上使用的都是壓縮類。

22.jpg

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

當(dāng)你使用自適應(yīng)來(lái)開(kāi)發(fā)UI時(shí),你可以保證UI跟隨顯示環(huán)境變化而適當(dāng)?shù)仨憫?yīng)。遵照這些指南,你可以給用戶良好的設(shè)備響應(yīng)體驗(yàn)。

在所有環(huán)境下都保持對(duì)主體內(nèi)容的專注。這是最高優(yōu)先級(jí)。人們使用應(yīng)用時(shí),瀏覽感興趣的內(nèi)容并與之發(fā)生互動(dòng)。隨著環(huán)境變化改變專注點(diǎn)會(huì)讓用戶感覺(jué)到迷失方向,讓他們感覺(jué)對(duì)應(yīng)用失去控制。

避免布局上不必要的變化。在所有環(huán)境中保持一致的使用體驗(yàn),能讓人們?cè)谛D(zhuǎn)設(shè)備或在不同設(shè)備上運(yùn)行你的應(yīng)用時(shí)維持穩(wěn)定的使用模式。例如,如果你在水平的常規(guī)模式下使用了網(wǎng)格來(lái)顯示圖像,那么無(wú)需在壓縮模式下使用列表來(lái)展示同樣的內(nèi)容,雖然你可能調(diào)整了網(wǎng)格的尺寸。

如果你的應(yīng)用只在一個(gè)方向上運(yùn)行,那么請(qǐng)直接一點(diǎn)。人們希望在各種握持方式下都可以使用你的應(yīng)用,能滿足這個(gè)期待是最好的。但是,如果你的應(yīng)用只在一個(gè)方向下運(yùn)行,那么你應(yīng)當(dāng)注意:

● 避免出現(xiàn)提示人們旋轉(zhuǎn)設(shè)備的相關(guān)UI元素。讓應(yīng)用在支持的方向下清晰地運(yùn)行,如果需要用戶旋轉(zhuǎn)設(shè)備,不要給UI添加不必要的混亂。

● 支持同一個(gè)方向上的變化。例如,如果一個(gè)應(yīng)用只能橫屏運(yùn)行,用戶無(wú)論用左手或是右手握持時(shí)都能觸及到home鍵。如果用戶在使用應(yīng)用時(shí)180度旋轉(zhuǎn)設(shè)備,那最好應(yīng)用內(nèi)容也能及時(shí)響應(yīng)并旋轉(zhuǎn)180度。

如果你的應(yīng)用將設(shè)備方向翻轉(zhuǎn)視為用戶輸入(的一種指令),那么就按照程序設(shè)定的方式來(lái)響應(yīng)設(shè)備翻轉(zhuǎn)。舉個(gè)例子,一個(gè)游戲讓用戶利用設(shè)備翻轉(zhuǎn)來(lái)移動(dòng)游戲中的部件,那么這個(gè)游戲應(yīng)用本身(的UI)不能對(duì)翻轉(zhuǎn)屏幕產(chǎn)生響應(yīng)。在這種情況下,你必須關(guān)聯(lián)兩個(gè)需要變化的方向,并且允許人們?cè)谶@兩個(gè)方向切換直到他們開(kāi)始(了解并執(zhí)行)應(yīng)用的主體任務(wù)。一旦人們開(kāi)始執(zhí)行主要任務(wù),那就開(kāi)始按程序設(shè)定的那樣來(lái)響應(yīng)設(shè)備的動(dòng)作。

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

布局包含的不僅僅是一個(gè)應(yīng)用屏幕上的UI元素外觀。你的布局,應(yīng)該告訴用戶什么是最重要的,他們的選擇是什么,以及事物是如何關(guān)聯(lián)起來(lái)的。

強(qiáng)調(diào)重要內(nèi)容或功能,讓用戶容易集中注意在主要任務(wù)上。有幾個(gè)比較好的辦法是在屏幕上半部分放置主要內(nèi)容——遵循從左到右的習(xí)慣——從靠近左側(cè)的屏幕開(kāi)始:

23.jpg

使用不同的視覺(jué)化重量和平衡來(lái)告訴用戶當(dāng)前屏顯元素的主次關(guān)系。大型控件吸引眼球,比小的控件更容易在出現(xiàn)時(shí)被注意到。而且大型控件也更容易被用戶點(diǎn)擊,這讓它們?cè)趹?yīng)用中尤其有用——就像電話和時(shí)鐘(上面的按鈕)那樣——能讓用戶經(jīng)常在容易分心的環(huán)境下仍然保持正常使用。

24.jpg

使用對(duì)齊來(lái)讓閱讀更舒緩,讓分組和層次之間更有秩序。對(duì)齊讓應(yīng)用看起來(lái)整潔而有序,也讓用戶在滑動(dòng)整屏內(nèi)容時(shí)更容易定位和專注于重要信息。不同信息組的縮進(jìn)與對(duì)齊讓它們之間的關(guān)聯(lián)更清晰,也讓用戶更容易找到某個(gè)控件。

確保用戶在內(nèi)容處于默認(rèn)尺寸時(shí)便可清楚明白它的主要內(nèi)容與含義。例如,用戶應(yīng)當(dāng)無(wú)需水平滾動(dòng)就能看到重要的文本,或不用放大就可以看到主體圖像。

準(zhǔn)備好改變字體大小。用戶期望大多數(shù)應(yīng)用都可以響應(yīng)他們?cè)趇OS的設(shè)置中設(shè)定的字體大小。為了適應(yīng)一些文本大小的變化,你也許需要調(diào)整布局;想要得到更多文本顯示相關(guān)的信息,請(qǐng)查閱下文“顏色與字體”中相關(guān)的內(nèi)容。

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

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

25.jpg

1.4 啟動(dòng)與停止(Starting and Stopping)

1.4.1 即時(shí)啟動(dòng)(Start Instantly)

我們通常認(rèn)為用戶不會(huì)花超過(guò)一兩分鐘去評(píng)價(jià)一款新應(yīng)用。當(dāng)你可以最大程度地利用這段極短的時(shí)間,即時(shí)呈現(xiàn)對(duì)用戶有幫助的內(nèi)容時(shí),你就能夠激發(fā)新用戶的興趣并給所有用戶一種極棒的體驗(yàn)。

26.jpg

重要:不要在安裝過(guò)程結(jié)束后告訴用戶需要重啟設(shè)備。重啟需要花費(fèi)時(shí)間,同時(shí)也會(huì)讓人覺(jué)得你的應(yīng)用不可靠且很難使用。如果你的應(yīng)用有內(nèi)存使用或其它問(wèn)題,導(dǎo)致不重啟就無(wú)法流暢運(yùn)行,你必須聲明這些問(wèn)題。想要了解如何開(kāi)發(fā)一款性能良好的應(yīng)用,請(qǐng)參閱Use Memory Efficiently.盡可能避免使用閃屏或者其他啟動(dòng)體驗(yàn)方式。用戶能夠在啟動(dòng)應(yīng)用后立即開(kāi)始使用是最好不過(guò)的。

盡可能地,避免讓用戶做過(guò)多設(shè)置。而應(yīng)該如此:

● 聚焦在80%目標(biāo)用戶的需求上。這樣絕大部分用戶就無(wú)需設(shè)置各種選項(xiàng),因?yàn)槟愕膽?yīng)用已經(jīng)默認(rèn)處于他們想要的狀態(tài)。如果有些功能僅有少部分用戶想要,或者是大部分用戶只需要使用一次,那就別管它了。

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

● 如果你必須要求用戶設(shè)置用戶信息,在你的應(yīng)用中直接提示用戶輸入。然后盡快保存這些設(shè)定(一般來(lái)說(shuō),保存到你的應(yīng)用的設(shè)置模塊中)。這樣用戶就無(wú)需強(qiáng)制跳出應(yīng)用進(jìn)入系統(tǒng)設(shè)置頁(yè)面了。如果用戶需要更改設(shè)置,他們可以在任何時(shí)候進(jìn)入應(yīng)用的設(shè)置模塊進(jìn)行修改。

盡可能讓用戶晚一點(diǎn)再登錄。最理想的狀態(tài)是,用戶在無(wú)需登錄的情況下就能盡量多地瀏覽內(nèi)容并使用部分功能。例如,App Store會(huì)在用戶確定進(jìn)行購(gòu)買商品時(shí),才要求用戶進(jìn)行登錄。對(duì)于那些強(qiáng)制用戶登錄后才能進(jìn)行一切有用操作的應(yīng)用,用戶往往會(huì)直接放棄。

如果你的應(yīng)用必須先登錄后使用,那么你應(yīng)該在登錄頁(yè)面有一些簡(jiǎn)短的文字,來(lái)描述為什么必須先登錄,以及這樣做會(huì)給用戶帶來(lái)什么好處。

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

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

● 使用動(dòng)畫和可交互的方式來(lái)吸引用戶,并讓用戶通過(guò)實(shí)際操作來(lái)學(xué)習(xí)如何使用。對(duì)于文字內(nèi)容的增加應(yīng)該謹(jǐn)慎,且僅當(dāng)增加文字對(duì)于提升體驗(yàn)有益時(shí)才這么做。不要指望用戶會(huì)閱讀大段的文字。例如,可以使用動(dòng)畫而不是文字來(lái)描述如何執(zhí)行一個(gè)簡(jiǎn)單的任務(wù)。在引導(dǎo)用戶了解較為復(fù)雜的任務(wù)時(shí),可以通過(guò)一些引導(dǎo)浮層來(lái)簡(jiǎn)要說(shuō)明每一個(gè)步驟用戶需要做什么。盡可能避免展示應(yīng)用截圖,因?yàn)榻貓D不可交互的,用戶可能會(huì)混淆截圖和應(yīng)用的實(shí)際界面。

● 能夠讓用戶很容易地取消或者跳過(guò)新手引導(dǎo)。有些用戶看完新手引導(dǎo)之后就不想再看,有些甚至根本就不想看新手引導(dǎo)。請(qǐng)記住用戶的選擇,不要強(qiáng)迫用戶每次打開(kāi)你的應(yīng)用都要再選擇一次。

不要太早要求用戶去給你的應(yīng)用評(píng)分。過(guò)早要求用戶進(jìn)行評(píng)分可能會(huì)適得其反。如果你想獲得有價(jià)值的反饋和評(píng)論,在邀請(qǐng)用戶評(píng)論之前,請(qǐng)給他們一點(diǎn)時(shí)間來(lái)使用你的應(yīng)用,并對(duì)你的應(yīng)用形成印象。例如,你可以等用戶訪問(wèn)了一定數(shù)量的頁(yè)面或完成了一定數(shù)量的任務(wù)之后,再邀請(qǐng)他們進(jìn)行評(píng)價(jià)。

一般建議按照屏幕默認(rèn)的定向方式啟動(dòng)你的應(yīng)用。盡管如此,如果你的應(yīng)用只有一種屏幕方向,那么就始終以這個(gè)方向啟動(dòng),讓用戶在他們自己需要時(shí)再改變?cè)O(shè)備方向。例如,一個(gè)游戲或者媒體觀看應(yīng)用只在橫屏模式下運(yùn)行,那么就應(yīng)該以橫屏模式啟動(dòng),即使設(shè)備當(dāng)前處于豎屏模式。這樣的話,如果用戶在豎屏模式下打開(kāi)應(yīng)用,他們也知道應(yīng)該把設(shè)備轉(zhuǎn)成橫屏來(lái)進(jìn)行使用。

27.jpg

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

提供一張與應(yīng)用首頁(yè)看上去一樣的閃屏。iOS會(huì)在啟動(dòng)應(yīng)用時(shí)調(diào)用這張圖,這樣可以讓用戶覺(jué)得啟動(dòng)速度很快,同時(shí),也可以讓你的應(yīng)用有足夠的時(shí)間去加載內(nèi)容。具體如何制作閃屏,請(qǐng)查閱Launch Files。

如果可能,不要讓用戶在初次啟動(dòng)應(yīng)用時(shí)閱讀免責(zé)聲明或者確認(rèn)用戶協(xié)議。你可以直接在App Store展示這些內(nèi)容,使用戶在下載前就有所了解。如果在某些情況下你必須展示這些內(nèi)容,要確保它們與界面保持統(tǒng)一并在產(chǎn)品功能與用戶體驗(yàn)之間達(dá)成平衡。

在應(yīng)用重啟后,需要恢復(fù)到用戶退出使用時(shí)的狀態(tài),讓他們可以從中斷之處繼續(xù)使用。無(wú)需讓用戶記住是如何回到此狀態(tài)的。了解更多關(guān)于保持和恢復(fù)應(yīng)用狀態(tài)的有效方式,請(qǐng)查閱Preserving Your App’s Visual Appearance Across Launches。

1.4.2 時(shí)刻準(zhǔn)備好停止(Always Be Prepared to Stop)

iOS 應(yīng)用不存在關(guān)閉或退出選項(xiàng)。當(dāng)用戶切換到另一個(gè)應(yīng)用,回到主屏幕或者將設(shè)備調(diào)至睡眠模式的時(shí)候,其實(shí)就是停止了當(dāng)前應(yīng)用的使用。當(dāng)用戶切換應(yīng)用時(shí),iOS的多任務(wù)系統(tǒng)會(huì)將其放置到后臺(tái)并將新應(yīng)用的UI替換上來(lái)。在這種情況下,你必須做到以下幾點(diǎn):

隨時(shí)并盡快保存用戶信息。因?yàn)樵诤笈_(tái)的應(yīng)用隨時(shí)有可能被終止或退出。

當(dāng)應(yīng)用停止的時(shí)候保存盡可能多的當(dāng)前狀態(tài)的詳細(xì)信息。這樣使用戶可以在回到應(yīng)用時(shí)能從中斷之處繼續(xù)使用。例如,在使用可滾動(dòng)的數(shù)據(jù)列表時(shí),退出后保存列表所在的位置。了解更多關(guān)于保持和恢復(fù)應(yīng)用狀態(tài)的有效方式,請(qǐng)查閱Preserving Your App’s Visual Appearance Across Launches.

有些應(yīng)用可能需要一直在后臺(tái)運(yùn)行。例如,用戶可能希望能在使用一個(gè)應(yīng)用的同時(shí)還能一直聽(tīng)歌,接著又想用另外一個(gè)應(yīng)用來(lái)檢查代辦項(xiàng)或者玩游戲。關(guān)于如何正確處理多任務(wù),請(qǐng)查閱Multitasking.

不要強(qiáng)制讓應(yīng)用退出。因?yàn)檫@樣會(huì)讓用戶誤以為是系統(tǒng)崩潰。如果有問(wèn)題產(chǎn)生,需要告訴用戶具體狀況以及如何解決。以下有兩個(gè)建議,取決于出現(xiàn)的問(wèn)題有多嚴(yán)重,可以酌情使用:

如果應(yīng)用中所有的功能當(dāng)前都不可用,那么應(yīng)該顯示一些內(nèi)容來(lái)解釋當(dāng)前的情形,并建議用戶如何進(jìn)行后續(xù)操作。這部分內(nèi)容給予了用戶以反饋,使用戶相信你的應(yīng)用現(xiàn)在沒(méi)問(wèn)題。同時(shí)這也可以穩(wěn)定用戶情緒,讓他們決定是否要采取糾正措施,繼續(xù)使用應(yīng)用,還是切換到另一個(gè)應(yīng)用。

28.jpg

如果只有部分功能不可用,那么只要當(dāng)用戶使用這些功能時(shí)顯示提示即可。其他情況下,用戶就應(yīng)該能正常使用應(yīng)用的其他功能。如果你決定使用警告框來(lái)進(jìn)行提示,請(qǐng)確保只在用戶嘗試使用不可用的功能時(shí)再顯示。

29.jpg

1.5 導(dǎo)航(Navigation)

除非導(dǎo)航設(shè)計(jì)不合理,不然用戶應(yīng)該明顯察覺(jué)不到應(yīng)用中的導(dǎo)航體驗(yàn)。導(dǎo)航設(shè)計(jì)應(yīng)該能夠支撐你應(yīng)用結(jié)構(gòu)和目的卻又不分散用戶注意力。

廣義來(lái)說(shuō),導(dǎo)航主要有以下幾種類型,每個(gè)導(dǎo)航都有其適應(yīng)的應(yīng)用結(jié)構(gòu):

● 分層
● 扁平
● 內(nèi)容或體驗(yàn)驅(qū)動(dòng)

在有層級(jí)結(jié)構(gòu)的應(yīng)用中,用戶在每個(gè)層級(jí)中都要選擇一項(xiàng),直到到達(dá)目的層級(jí)。如果要切換到另一個(gè)目的層級(jí),用戶必須回退一些層級(jí),或者直接回到初始層級(jí)再次選擇。系統(tǒng)設(shè)置和郵箱應(yīng)用在這方面是很好示范,可以參考他們。

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

在扁平信息架構(gòu)的應(yīng)用中,用戶可以從首頁(yè)目錄直接切換到另一個(gè),因?yàn)樗械姆诸惗伎梢詮闹髌林苯釉L問(wèn)。音樂(lè)和App Store是兩個(gè)使用扁平結(jié)構(gòu)的好例子。

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

在內(nèi)容或體驗(yàn)驅(qū)動(dòng)的信息架構(gòu)應(yīng)用中,導(dǎo)航也會(huì)根據(jù)內(nèi)容或體驗(yàn)來(lái)設(shè)計(jì)。例如,在閱讀一本電子書時(shí),用戶會(huì)一頁(yè)接一頁(yè)的進(jìn)行閱讀,或者直接從目錄中選中某一個(gè)指定的頁(yè)碼;同樣,在游戲中導(dǎo)航也是體驗(yàn)的重要組成部分。

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

在某些情況下,在一個(gè)應(yīng)用中結(jié)合多種導(dǎo)航類型會(huì)有很好的效果。例如,對(duì)于扁平信息結(jié)構(gòu)中某一分類下的內(nèi)容,用分層導(dǎo)航的方式來(lái)顯示可能會(huì)更好。

應(yīng)該讓用戶時(shí)刻清楚自己當(dāng)前在應(yīng)用中所處的位置,及如何前往目的頁(yè)面。無(wú)論使用哪種適合你的應(yīng)用結(jié)構(gòu)的導(dǎo)航,最重要的是用戶訪問(wèn)內(nèi)容的路徑要有邏輯、可預(yù)期和易于追溯。

UIKit定義了一些標(biāo)準(zhǔn)的UI元素,以方便地構(gòu)建分層或扁平導(dǎo)航,還有一些元素可以構(gòu)建以內(nèi)容為中心的導(dǎo)航,例如電子書或者媒體觀看類應(yīng)用。游戲或者其他體驗(yàn)驅(qū)動(dòng)的應(yīng)用通常需要一些自定義的元素和行為。

使用導(dǎo)航欄(Navigation Bar)幫助用戶輕松訪問(wèn)分層內(nèi)容。導(dǎo)航欄的標(biāo)題可以顯示用戶當(dāng)前所處的層級(jí),而后退按鈕可以回到上一層級(jí)。想要了解更多內(nèi)容,請(qǐng)查看Navigation Bar.

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

在應(yīng)用中,如果每屏顯示的都是同類項(xiàng)或同類頁(yè),可以使用頁(yè)面控件(Page Control)。頁(yè)面控件的優(yōu)點(diǎn)是可以直觀地告訴用戶有多少個(gè)項(xiàng)目或頁(yè)面,以及當(dāng)前所處位置。想要了解更多內(nèi)容,請(qǐng)查看Page Control。

一般來(lái)說(shuō),最好能給用戶提供到達(dá)每一屏的唯一路徑。如果某屏內(nèi)容用戶需要在不同場(chǎng)景下查看,可以考慮使用臨時(shí)視圖,例如模態(tài)視圖、動(dòng)作菜單或警告框。想要了解更多,請(qǐng)查看Modal ViewAction SheetAlert。

UIKit同時(shí)還提供了以下相關(guān)控件:

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

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

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

1.6 模態(tài)情境(Modal Contexts)

模態(tài)是一個(gè)承載某些連貫操作或內(nèi)容的優(yōu)缺點(diǎn)并存的模式。它可以給用戶提供一種不脫離主任務(wù)的方式去完成一個(gè)任務(wù)或者獲得信息,但是也會(huì)臨時(shí)性的阻止用戶對(duì)應(yīng)用的其他部分進(jìn)行交互操作。

32.png

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

● 必須引起用戶關(guān)注的時(shí)候
● 一個(gè)獨(dú)立的任務(wù)需要完成或者很明確需要被放棄,為了避免在模棱兩可的狀態(tài)下遺漏用戶信息的時(shí)候

保證模態(tài)任務(wù)簡(jiǎn)單、簡(jiǎn)短和高度聚焦。你肯定不希望用戶使用模態(tài)視圖時(shí)像使用應(yīng)用中的一個(gè)mini應(yīng)用一樣。如果子任務(wù)過(guò)于復(fù)雜,用戶會(huì)在進(jìn)入模態(tài)情境時(shí)忽略了主要任務(wù)。在設(shè)計(jì)一個(gè)涉及視覺(jué)層次的模態(tài)任務(wù)時(shí)特別要考慮這一點(diǎn),因?yàn)橛脩粲锌赡苊允Р⑶彝浫绾位氐街暗牟僮髦腥?。如果一個(gè)模態(tài)任務(wù)必須包含不同視圖的子任務(wù),確保給用戶一個(gè)獨(dú)立、清晰的導(dǎo)航路徑,并避免迂回。更多關(guān)于模態(tài)試圖的信息請(qǐng)參考Modal View.

始終提供明顯、安全的退出模態(tài)任務(wù)的途徑。確保用戶在退出模態(tài)視圖時(shí)可以預(yù)期操作的結(jié)果。

一個(gè)任務(wù)需要多層級(jí)的模態(tài)視圖時(shí),確保用戶理解點(diǎn)擊非最高層級(jí)下的完成按鈕的結(jié)果。點(diǎn)擊一個(gè)低層級(jí)視圖上的完成按鈕是完成這個(gè)視圖中任務(wù)的一部分,還是整個(gè)任務(wù)。因?yàn)橛锌赡艽嬖谶@種困惑,所以要盡可能避免在下級(jí)視圖中添加完成按鈕。

保證提醒對(duì)話框的內(nèi)容都是必要且可操作的。提醒對(duì)話框會(huì)打斷用戶的體驗(yàn)并且要點(diǎn)擊才會(huì)消失,所以要讓用戶感到提醒信息是有用的,打斷是有價(jià)值的。想要了解更多請(qǐng)參考Alert.

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

尊重用戶關(guān)于接收通知的偏好設(shè)置。用戶會(huì)設(shè)置接收應(yīng)用通知的形式,確保遵重用戶的喜好設(shè)置,否則可能會(huì)觸怒用戶,導(dǎo)致其關(guān)閉應(yīng)用中所有的推送通知。


下篇:

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

本章英文原文訪問(wèn)地址:iOS Human Interface Guidelines
本章中文翻譯PDF下載:點(diǎn)此下載

iOS 9人機(jī)界面指南(一):UI設(shè)計(jì)基礎(chǔ)(下)

本文系作者授權(quán)數(shù)英發(fā)表,內(nèi)容為作者獨(dú)立觀點(diǎn),不代表數(shù)英立場(chǎng)。
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_(kāi)頭和結(jié)尾顯眼處標(biāo)注:作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
本文系作者授權(quán)數(shù)英發(fā)表,內(nèi)容為作者獨(dú)立觀點(diǎn),不代表數(shù)英立場(chǎng)。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載,授權(quán)事宜請(qǐng)聯(lián)系作者本人,侵權(quán)必究。
本內(nèi)容為作者獨(dú)立觀點(diǎn),不代表數(shù)英立場(chǎng)。
本文禁止轉(zhuǎn)載,侵權(quán)必究。
本文系數(shù)英原創(chuàng),未經(jīng)允許不得轉(zhuǎn)載。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán),侵權(quán)必究。

    評(píng)論

    文明發(fā)言,無(wú)意義評(píng)論將很快被刪除,異常行為可能被禁言
    DIGITALING
    登錄后參與評(píng)論

    評(píng)論

    文明發(fā)言,無(wú)意義評(píng)論將很快被刪除,異常行為可能被禁言
    800

    推薦評(píng)論

    暫無(wú)評(píng)論哦,快來(lái)評(píng)論一下吧!

    全部評(píng)論(0條)

    上高县| 咸阳市| 怀化市| 宁乡县| 沂源县| 乌兰浩特市| 平果县| 东至县| 舟曲县| 平度市| 子长县| 诸城市| 岐山县| 潜山县| 兰州市| 东阳市| 玉溪市| 靖宇县| 竹溪县| 商南县| 东乌珠穆沁旗| 集安市| 神农架林区| 大同县| 会同县| 西和县| 阜平县| 闽侯县| 汕尾市| 麻江县| 皮山县| 科技| 新民市| 金溪县| 安化县| 芦山县| 安塞县| 苗栗市| 曲阳县| 桦川县| 乐清市|