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

一 ?UI設(shè)計(jì)基礎(chǔ)

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):視覺的層次感和生動(dòng)的交互動(dòng)畫會(huì)賦予UI新的活力荆姆,有助于用戶更好地理解并讓用戶在使用過程中感到愉悅蔼囊。

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

首先畏鼓,去除掉UI元素讓應(yīng)用的核心功能突顯出來酱酬,并明確之間的相關(guān)性。

然后云矫,使用iOS的主題來定義UI并進(jìn)行用戶體驗(yàn)設(shè)計(jì)膳沽。完善細(xì)節(jié)設(shè)計(jì),以及適當(dāng)合理的修飾让禀。

最后挑社,保證你設(shè)計(jì)的UI可以適配各種設(shè)備和各種操作模式,使得用戶在不同場(chǎng)景下都可以享受你的應(yīng)用巡揍。

在整個(gè)設(shè)計(jì)過程中痛阻,時(shí)刻準(zhǔn)備著推翻先例,質(zhì)疑各種假設(shè)吼肥,并以內(nèi)容和功能視為重點(diǎn)來驅(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ù)。

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

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

1.1.2 保證清晰(Provide Clarity)

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

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

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

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

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

1.1.3 用深度層次來進(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)能讓用戶在不離開當(dāng)前界面的情景下預(yù)覽其他重要內(nèi)容。

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

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

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

當(dāng)用戶選擇了某個(gè)月份服鹅,年份視圖會(huì)局部放大該月份,過渡到月份視圖百新。今天的日期依然處于高亮狀態(tài)企软,年份會(huì)顯示在返回按鈕處,這樣用戶可以清楚地知道他們?cè)谀膬悍雇麄儚哪睦镞M(jìn)來以及如何返回仗哨。

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

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

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

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

欄(Bars):包含了上下文信息來指引用戶他們所在的位置雏节,以及控件來幫助用戶導(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í)別、繪圖阔拳、輔助功能和打印支持崭孤。

從編程的角度來看,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)航控制器來展示其視圖層級(jí)。

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

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

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

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

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

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

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

iOS在特征集合(trait collection)的定義中包含了顯示環(huán)境的概念享钞,特征集合囊括了尺寸類別(size class)揍诽,顯示比例(display scale)和用戶界面語言(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)你靠尺寸類別來驅(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ī)尺寸類型施符。換句話說,iPad顯示環(huán)境一直處于垂直和水平的常規(guī)狀態(tài)擂找。

注:合格的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ī)高度類型肩刃。

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

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

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

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

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

當(dāng)你使用自適應(yīng)來開發(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ì)讓用戶感覺到迷失方向,讓他們感覺對(duì)應(yīng)用失去控制使鹅。

避免布局上不必要的變化颇象。在所有環(huán)境中保持一致的使用體驗(yàn),能讓人們?cè)谛D(zhuǎn)設(shè)備或在不同設(shè)備上運(yùn)行你的應(yīng)用時(shí)維持穩(wěn)定的使用模式并徘。例如,如果你在水平的常規(guī)模式下使用了網(wǎng)格來顯示圖像扰魂,那么無需在壓縮模式下使用列表來展示同樣的內(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)行才睹,用戶無論用左手或是右手握持時(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è)定的方式來響應(yīng)設(shè)備翻轉(zhuǎn)。舉個(gè)例子坞琴,一個(gè)游戲讓用戶利用設(shè)備翻轉(zhuǎn)來移動(dòng)游戲中的部件哨查,那么這個(gè)游戲應(yīng)用本身(的UI)不能對(duì)翻轉(zhuǎn)屏幕產(chǎn)生響應(yīng)。在這種情況下置济,你必須關(guān)聯(lián)兩個(gè)需要變化的方向解恰,并且允許人們?cè)谶@兩個(gè)方向切換直到他們開始(了解并執(zhí)行)應(yīng)用的主體任務(wù)。一旦人們開始執(zhí)行主要任務(wù)浙于,那就開始按程序設(shè)定的那樣來響應(yīng)設(shè)備的動(dòng)作护盈。

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

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

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

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

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

確保用戶在內(nèi)容處于默認(rèn)尺寸時(shí)便可清楚明白它的主要內(nèi)容與含義翅阵。例如,用戶應(yīng)當(dāng)無需水平滾動(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)。在一般情況下崇摄,有著相似功能的控件看起來也應(yīng)該類似擎值。用戶常常認(rèn)為他們看到的不同總有原因,而且他們傾向于花時(shí)間去嘗試(譯者按:因此為了避免用戶做無用的嘗試逐抑,建議類似的功能外觀都保持一樣鸠儿。)

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

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

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

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

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

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

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

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

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

盡可能讓用戶晚一點(diǎn)再登錄撕贞。最理想的狀態(tài)是,用戶在無需登錄的情況下就能盡量多地瀏覽內(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)短的文字链快,來描述為什么必須先登錄,以及這樣做會(huì)給用戶帶來什么好處起胰。

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

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

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

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

不要太早要求用戶去給你的應(yīng)用評(píng)分集惋。過早要求用戶進(jìn)行評(píng)分可能會(huì)適得其反孕似。如果你想獲得有價(jià)值的反饋和評(píng)論,在邀請(qǐng)用戶評(píng)論之前刮刑,請(qǐng)給他們一點(diǎn)時(shí)間來使用你的應(yīng)用喉祭,并對(duì)你的應(yīng)用形成印象养渴。例如,你可以等用戶訪問了一定數(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)前處于豎屏模式妈嘹。這樣的話,如果用戶在豎屏模式下打開應(yīng)用绍妨,他們也知道應(yīng)該把設(shè)備轉(zhuǎn)成橫屏來進(jìn)行使用蟋滴。

注:最好讓橫屏應(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)用這張圖蛾号,這樣可以讓用戶覺得啟動(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ù)使用。無需讓用戶記住是如何回到此狀態(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替換上來。在這種情況下琅轧,你必須做到以下幾點(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í)還能一直聽歌,接著又想用另外一個(gè)應(yīng)用來檢查代辦項(xiàng)或者玩游戲辐啄。關(guān)于如何正確處理多任務(wù)采章,請(qǐng)查閱Multitasking.

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

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

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

1.5 導(dǎo)航(Navigation)

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

廣義來說可婶,導(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)用在這方面是很好示范筐赔,可以參考他們铣猩。

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

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

譯者注:以上為視頻截圖失仁,完整視頻可點(diǎn)擊觀看尸曼。

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

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

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

應(yīng)該讓用戶時(shí)刻清楚自己當(dāng)前在應(yīng)用中所處的位置屹徘,及如何前往目的頁(yè)面。無論使用哪種適合你的應(yīng)用結(jié)構(gòu)的導(dǎo)航衅金,最重要的是用戶訪問內(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)幫助用戶輕松訪問分層內(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

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

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

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

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

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)行交互操作委乌。

理想情況下床牧,用戶可以與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ù)過于復(fù)雜踏堡,用戶會(huì)在進(jìn)入模態(tài)情境時(shí)忽略了主要任務(wù)。在設(shè)計(jì)一個(gè)涉及視覺層次的模態(tài)任務(wù)時(shí)特別要考慮這一點(diǎn)咒劲,因?yàn)橛脩粲锌赡苊允Р⑶彝浫绾位氐街暗牟僮髦腥デ牦 H绻粋€(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.

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

本章英文原文訪問地址:iOS Human Interface Guidelines

出處:騰訊ISUX


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末蹦玫,一起剝皮案震驚了整個(gè)濱河市赎婚,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌樱溉,老刑警劉巖挣输,帶你破解...
    沈念sama閱讀 212,599評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異福贞,居然都是意外死亡撩嚼,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,629評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門挖帘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來完丽,“玉大人,你說我怎么就攤上這事肠套〗⒂浚” “怎么了?”我有些...
    開封第一講書人閱讀 158,084評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵你稚,是天一觀的道長(zhǎng)瓷耙。 經(jīng)常有香客問我,道長(zhǎng)刁赖,這世上最難降的妖魔是什么搁痛? 我笑而不...
    開封第一講書人閱讀 56,708評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮宇弛,結(jié)果婚禮上鸡典,老公的妹妹穿的比我還像新娘。我一直安慰自己枪芒,他們只是感情好彻况,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,813評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著舅踪,像睡著了一般纽甘。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上抽碌,一...
    開封第一講書人閱讀 50,021評(píng)論 1 291
  • 那天悍赢,我揣著相機(jī)與錄音,去河邊找鬼。 笑死左权,一個(gè)胖子當(dāng)著我的面吹牛皮胡,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播赏迟,決...
    沈念sama閱讀 39,120評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼屡贺,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了锌杀?” 一聲冷哼從身側(cè)響起烹笔,我...
    開封第一講書人閱讀 37,866評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎抛丽,沒想到半個(gè)月后谤职,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,308評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡亿鲜,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,633評(píng)論 2 327
  • 正文 我和宋清朗相戀三年允蜈,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蒿柳。...
    茶點(diǎn)故事閱讀 38,768評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡饶套,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出垒探,到底是詐尸還是另有隱情妓蛮,我是刑警寧澤,帶...
    沈念sama閱讀 34,461評(píng)論 4 333
  • 正文 年R本政府宣布圾叼,位于F島的核電站蛤克,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏夷蚊。R本人自食惡果不足惜构挤,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,094評(píng)論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望惕鼓。 院中可真熱鬧筋现,春花似錦、人聲如沸箱歧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,850評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽呀邢。三九已至洒沦,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間驼鹅,已是汗流浹背微谓。 一陣腳步聲響...
    開封第一講書人閱讀 32,082評(píng)論 1 267
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留输钩,地道東北人豺型。 一個(gè)月前我還...
    沈念sama閱讀 46,571評(píng)論 2 362
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像买乃,于是被迫代替她去往敵國(guó)和親姻氨。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,666評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容