文章索引
譯者注:本文譯自蘋果官方人機界面指南 iOS Human Interface Guidelines(2015年10 月21日),,由騰訊ISUX設(shè)計師翻譯整理,,非發(fā)文者一人之作。譯文首發(fā)于ISUX博客,,如在閱讀過程中發(fā)現(xiàn)錯誤與疏漏之處,,歡迎不吝指出。后續(xù)章節(jié)會陸續(xù)更新,,敬請期待,。 1.1 為iOS而設(shè)計(Designing for iOS)iOS表現(xiàn)了以下三大設(shè)計原則:
無論你是重新設(shè)計現(xiàn)有的應(yīng)用,,還是重新開發(fā)一個新應(yīng)用,,請基于下列方法進行設(shè)計考慮:
在整個設(shè)計過程中,,時刻準(zhǔn)備著推翻先例,,質(zhì)疑各種假設(shè),并以內(nèi)容和功能視為重點來驅(qū)動每個細(xì)節(jié)的設(shè)計,。 1.1.1 設(shè)計跟隨內(nèi)容 (Defer to Content)盡管清新美觀的UI和流暢的動態(tài)效果都是iOS體驗的亮點,,但內(nèi)容始終是iOS的核心。 這里有一些方法可以確保你的設(shè)計既可以提升功能體驗,,又可以關(guān)注內(nèi)容本身,。 充分利用整個屏幕。系統(tǒng)天氣應(yīng)用是這個方法的絕佳范例:用漂亮的全屏天氣圖片呈現(xiàn)現(xiàn)在的天氣,,直觀地向用戶傳遞了最重要的信息,,同時也留出空間呈現(xiàn)了每個時段的天氣數(shù)據(jù),。
重新考慮(盡量減少)擬物化設(shè)計的使用。遮罩,、漸變和陰影有時會讓UI元素顯得很厚重,,導(dǎo)致影響到了對內(nèi)容的關(guān)注。相反,,應(yīng)該以內(nèi)容為核心,,讓用戶界面成為內(nèi)容的支撐。
用半透明 UI 元素樣式來暗示背后的內(nèi)容,。 半透明的控件元素(比如控制中心)可以提供了上下文的使用場景,幫助用戶看到更多可用的內(nèi)容,,并可以起到短暫的提示作用,。在iOS中,半透明的控件元素只讓它遮擋住的地方變得模糊——看上去像蒙著一層米紙——它并沒有遮擋屏幕剩余的部分,。
1.1.2 保證清晰(Provide Clarity)確保你的應(yīng)用始終是以內(nèi)容為核心的另一個方法是保證清晰度,。這里有幾種方法可以讓最重要的內(nèi)容和功能清晰可見,且易于交互,。 使用大量留白,。留白可以使重要的內(nèi)容和功能更加醒目、更易理解,。留白還可以傳達一種平靜和安寧的心理感受,,它可以使一個應(yīng)用看起來更加聚焦和高效。
讓顏色簡化 UI ,。 使用一個主題色——比如Notes中用了黃色——高亮了重要區(qū)塊的信息并巧妙地用樣式暗示可交互性,。同時,也讓應(yīng)用有了一致的視覺主題,。內(nèi)置的應(yīng)用使用了同系列的系統(tǒng)顏色,,這樣一來,無論在深色或淺色背景上看起來都很干凈,純粹,。
通過使用系統(tǒng)字體確保易讀性,。iOS的系統(tǒng)字體(San Francisco)使用動態(tài)類型(Dynamic Type)來自動調(diào)整字間距和行間距,使文本在任何尺寸大小下都清晰易讀,。無論你是使用系統(tǒng)字體還是自定義字體,,一定要采用動態(tài)類型,這樣一來當(dāng)用戶選擇不同字體尺寸時,,你的應(yīng)用才可以及時做出響應(yīng)。
使用無邊框的按鈕,。默認(rèn)情況下,,所有的欄(bar)上的按鈕都是無邊框的。在內(nèi)容區(qū)域,,通過文案,、顏色以及操作指引標(biāo)題來表明該無邊框按鈕的可交互性。當(dāng)它被激活時,,按鈕可以顯示較窄的邊框或淺色背景作為操作響應(yīng),。
1.1.3 用深度層次來進行交流(Use Depth to Communicate)iOS經(jīng)常在不同的視圖層級上展現(xiàn)內(nèi)容,用以表達層次結(jié)構(gòu)和位置,,這樣可以幫助用戶了解屏幕上對象之間的關(guān)系,。 對于支持3D觸控的設(shè)備,輕壓(Peek),、重壓(Pop),,以及快捷操作(Quick Actions)能讓用戶在不離開當(dāng)前界面的情景下預(yù)覽其他重要內(nèi)容。
通過使用一個在主屏幕上方的半透明背景浮層,,這樣文件夾就能清楚地把內(nèi)容和屏幕上其他內(nèi)容區(qū)分開來,。
如圖所示,備忘錄(Reminders)以不同的層級展示內(nèi)容條目,。用戶在使用備忘錄里的某個條目時,,其他條目會被集中收起在屏幕下方。
日歷具有較深的層級,,當(dāng)用戶在翻閱年,、月、日時,,增強的轉(zhuǎn)場動畫效果給用戶一種層級縱深感,。在滾動年份視圖時,用戶可以即時看到今天的日期以及其他日歷任務(wù),。
當(dāng)用戶選擇了某個月份,,年份視圖會局部放大該月份,過渡到月份視圖。今天的日期依然處于高亮狀態(tài),,年份會顯示在返回按鈕處,,這樣用戶可以清楚地知道他們在哪兒,他們從哪里進來以及如何返回,。
類似的過渡動畫也出現(xiàn)在用戶選擇某個日期時:月份視圖從所選位置分開,,將所在的周日期推向內(nèi)容區(qū)頂端并顯示以小時為單位的當(dāng)天時間軸視圖。這些交互動畫增強了年,、月,、日之間的層級關(guān)系以及用戶的感知。
1.2 iOS應(yīng)用解析(iOS App Anatomy)幾乎所有的iOS應(yīng)用都應(yīng)用了UIKit framework中定義的組件,。了解這些基本組件的名稱,、作用和功能可以幫助你在應(yīng)用的界面設(shè)計過程中做出更好的決策。
UIKit提供的UI組件可以大致分為以下4種類型:
UIKit除了定義UI組件元素,,還定義對象如何實現(xiàn)功能,,例如手勢識別、繪圖,、輔助功能和打印支持,。 從編程的角度來看,UI組件元素其實是視圖的子類,,因為它們繼承了UIView,。視圖能繪制屏幕內(nèi)容并知道用戶何時在其范圍內(nèi)觸屏。視圖的所有類型有:控件(比如按鈕和滑塊),、內(nèi)容視圖(比如集合視圖和表格視圖),,以及臨時視圖(如警告提示和動作菜單)。 要在應(yīng)用中管理一組或者一系列的視圖,,通常需要使用視圖控制器,。它能協(xié)調(diào)視圖的內(nèi)容顯示,實現(xiàn)與用戶交互的功能并能在不同屏幕內(nèi)容之間切換,。比如,,“設(shè)置”使用了一個導(dǎo)航控制器來展示其視圖層級,。 這里有一個關(guān)于視圖與視圖控制器如何結(jié)合并呈現(xiàn)iOS應(yīng)用的UI的例子,如圖,。
盡管開發(fā)者認(rèn)為真正起到作用的是視圖和視圖控制器,,但一般用戶感知到的iOS應(yīng)用是不同屏幕內(nèi)容的集合。從這個角度來看,,在應(yīng)用里,,屏幕內(nèi)容一般對應(yīng)于一個獨特的視覺狀態(tài)或者模式。 注:一個iOS應(yīng)用程序包含一個窗口,。但是,,不同于計算機程序中的窗口,iOS窗口沒有可見的部分并且不能在屏幕上被移動到另一個位置,。很多iOS應(yīng)用程序只有一個窗口,;可以支持外部顯示設(shè)備器的應(yīng)用程序可以有不止一個窗口。 在 iOS Human Interface Guidelines 中,,屏幕( screen) 這個詞和大部分用戶理解的一樣。作為一個開發(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)和自動布局(Auto Layout)可以通過定義屏幕的布局、視圖控制器和視圖在環(huán)境變化時候應(yīng)該怎么適應(yīng)來幫助你實現(xiàn)這個愿望,。(顯示環(huán)境[display environment]的概念指的是設(shè)備的整個屏幕或者其中一部分,,比如彈出框的區(qū)域或者iPad分屏視圖中其中一側(cè)的區(qū)域。) iOS在特征集合( trait collection) 的定義中包含了顯示環(huán)境的概念,,特征集合囊括了尺寸類別(size class),,顯示比例(display scale)和用戶界面語言(user interface idiom)。你可以使用一個特征集合讓你的視圖和視圖控制器響應(yīng)顯示環(huán)境的變化,。 iOS定義了兩個尺寸類別(size class),,常規(guī)的(regular)和壓縮的(compact)。常規(guī)尺寸與拓展的空間緊密相關(guān),,壓縮尺寸與約束的空間相關(guān),。想要定義一種顯示環(huán)境,你需要定義一種橫屏尺寸類別,,與一種豎屏尺寸類別,。如你所想,一個iOS設(shè)備在豎屏模式可以使用一套類別,,而橫屏模式下可以使用另一套類別,。 iOS能隨著尺寸類別和顯示環(huán)境變化而自動生成不同布局。舉個例子,當(dāng)垂直尺寸從壓縮變?yōu)槌R?guī)時,,導(dǎo)航欄和工具欄會自動變高,。 當(dāng)你靠尺寸類別來驅(qū)動布局變化時,你的應(yīng)用在任何顯示環(huán)境時都能顯示得很好,。關(guān)于如何在Interface Builder中更好的使用尺寸類別,,你可以查閱 Size Classes Design Help . 注:在一種尺寸類別中,持續(xù)使用Auto Layout進行小的布局調(diào)整,,比如拉伸或壓縮內(nèi)容,。更多Auto Layout,參看 Auto Layout Guide . 下面的實例可以幫助你形象展現(xiàn)尺寸類型如何適配不同設(shè)備的顯示環(huán)境,。例如:iPad(包括iPad Pro)在長寬和橫屏豎屏?xí)r都使用常規(guī)尺寸類型,。換句話說,iPad顯示環(huán)境一直處于垂直和水平的常規(guī)狀態(tài),。
注:合格的iPad型號支持多任務(wù),,你的應(yīng)用可能需要與其他應(yīng)用共享同一個屏幕。確保使用Auto Layout,,這樣你可以在用戶使用多任務(wù)功能時響應(yīng)他,,比如 分屏模式(Split View)和多任務(wù)分屏模式(Slide Over)。 除了使用Auto Layout,,當(dāng)你在iPad Pro上展示可讀性的內(nèi)容時,,依靠UIView的 readableContentGuide 屬性是非常重要的,這樣可以擁有讓讀者舒服的邊距,。 iPhone的顯示環(huán)境可根據(jù)不同的設(shè)備和不同的握持方向而改變,。 豎屏?xí)r,iPhone6 Plus使用的是壓縮寬度和常規(guī)高度類型,。
橫屏?xí)r,,iPhone6 Plus使用的是常規(guī)寬度和壓縮高度類型。
其他iPhone型號,,包括iPhone6使用相同的尺寸類型設(shè)置,。 豎屏?xí)r,iPhone 6,,iPhone 5 和iPhone 4S使用的是壓縮寬度和常規(guī)高度,。
橫屏?xí)r,這些設(shè)備在寬高上使用的都是壓縮類,。
1.3.2 在不同環(huán)境提供良好體驗(Provide a Great Experience in Each Environment)當(dāng)你使用自適應(yīng)來開發(fā)UI時,,你可以保證UI跟隨顯示環(huán)境變化而適當(dāng)?shù)仨憫?yīng)。遵照這些指南,,你可以給用戶良好的設(shè)備響應(yīng)體驗,。 在所有環(huán)境下都保持對主體內(nèi)容的專注,。這是最高優(yōu)先級。人們使用應(yīng)用時,,瀏覽感興趣的內(nèi)容并與之發(fā)生互動,。隨著環(huán)境變化改變專注點會讓用戶感覺到迷失方向,讓他們感覺對應(yīng)用失去控制,。 避免布局上不必要的變化,。在所有環(huán)境中保持一致的使用體驗,能讓人們在旋轉(zhuǎn)設(shè)備或在不同設(shè)備上運行你的應(yīng)用時維持穩(wěn)定的使用模式,。例如,,如果你在水平的常規(guī)模式下使用了網(wǎng)格來顯示圖像,那么無需在壓縮模式下使用列表來展示同樣的內(nèi)容,,雖然你可能調(diào)整了網(wǎng)格的尺寸,。 如果你的應(yīng)用只在一個方向上運行,那么請直接一點,。人們希望在各種握持方式下都可以使用你的應(yīng)用,,能滿足這個期待是最好的。但是,,如果你的應(yīng)用只在一個方向下運行,,那么你應(yīng)當(dāng)注意:
如果你的應(yīng)用將設(shè)備方向翻轉(zhuǎn)視為用戶輸入(的一種指令),,那么就按照程序設(shè)定的方式來響應(yīng)設(shè)備翻轉(zhuǎn)。舉個例子,,一個游戲讓用戶利用設(shè)備翻轉(zhuǎn)來移動游戲中的部件,,那么這個游戲應(yīng)用本身(的UI)不能對翻轉(zhuǎn)屏幕產(chǎn)生響應(yīng)。在這種情況下,,你必須關(guān)聯(lián)兩個需要變化的方向,,并且允許人們在這兩個方向切換直到他們開始(了解并執(zhí)行)應(yīng)用的主體任務(wù)。一旦人們開始執(zhí)行主要任務(wù),,那就開始按程序設(shè)定的那樣來響應(yīng)設(shè)備的動作,。 1.3.3 使用布局來溝通(Use Layout to Communicate)布局包含的不僅僅是一個應(yīng)用屏幕上的UI元素外觀,。你的布局,應(yīng)該告訴用戶什么是最重要的,,他們的選擇是什么,,以及事物是如何關(guān)聯(lián)起來的。 強調(diào)重要內(nèi)容或功能,,讓用戶容易集中注意在主要任務(wù)上,。有幾個比較好的辦法是在屏幕上半部分放置主要內(nèi)容——遵循從左到右的習(xí)慣——從靠近左側(cè)的屏幕開始:
使用不同的視覺化重量和平衡來告訴用戶當(dāng)前屏顯元素的主次關(guān)系。大型控件吸引眼球,,比小的控件更容易在出現(xiàn)時被注意到,。而且大型控件也更容易被用戶點擊,這讓它們在應(yīng)用中尤其有用——就像電話和時鐘(上面的按鈕)那樣——能讓用戶經(jīng)常在容易分心的環(huán)境下仍然保持正常使用,。
使用對齊來讓閱讀更舒緩,,讓分組和層次之間更有秩序。對齊讓應(yīng)用看起來整潔而有序,,也讓用戶在滑動整屏內(nèi)容時更容易定位和專注于重要信息,。不同信息組的縮進與對齊讓它們之間的關(guān)聯(lián)更清晰,也讓用戶更容易找到某個控件,。 確保用戶在內(nèi)容處于默認(rèn)尺寸時便可清楚明白它的主要內(nèi)容與含義,。例如,用戶應(yīng)當(dāng)無需水平滾動就能看到重要的文本,,或不用放大就可以看到主體圖像,。 準(zhǔn)備好改變字體大小。用戶期望大多數(shù)應(yīng)用都可以響應(yīng)他們在iOS的設(shè)置中設(shè)定的字體大小,。為了適應(yīng)一些文本大小的變化,,你也許需要調(diào)整布局;想要得到更多文本顯示相關(guān)的信息,,請查閱下文“顏色與字體”中相關(guān)的內(nèi)容,。 盡量避免 UI 上不一致的表現(xiàn)。 在一般情況下,,有著相似功能的控件看起來也應(yīng)該類似,。用戶常常認(rèn)為他們看到的不同總有原因,而且他們傾向于花時間去嘗試(譯者按:因此為了避免用戶做無用的嘗試,,建議類似的功能外觀都保持一樣,。) 給每個互動的元素充足的空間,從而讓用戶容易操作這些內(nèi)容和控件,。常用的點按類控件的大小是44 x 44點(points),。
1.4 啟動與停止(Starting and Stopping)1.4.1 即時啟動(Start Instantly)我們通常認(rèn)為用戶不會花超過一兩分鐘去評價一款新應(yīng)用。當(dāng)你可以最大程度地利用這段極短的時間,,即時呈現(xiàn)對用戶有幫助的內(nèi)容時,,你就能夠激發(fā)新用戶的興趣并給所有用戶一種極棒的體驗,。
重要:不要在安裝過程結(jié)束后告訴用戶需要重啟設(shè)備,。重啟需要花費時間,同時也會讓人覺得你的應(yīng)用不可靠且很難使用。 如果你的應(yīng)用有內(nèi)存使用或其它問題,,導(dǎo)致不重啟就無法流暢運行,,你必須聲明這些問題,。想要了解如何開發(fā)一款性能良好的應(yīng)用,,請參閱 Use Memory Efficiently . 盡可能避免使用閃屏或者其他啟動體驗方式。用戶能夠在啟動應(yīng)用后立即開始使用是最好不過的,。 盡可能地,,避免讓用戶做過多設(shè)置。而應(yīng)該如此:
盡可能讓用戶晚一點再登錄,。最理想的狀態(tài)是,,用戶在無需登錄的情況下就能盡量多地瀏覽內(nèi)容并使用部分功能。例如,,App Store會在用戶確定進行購買商品時,,才要求用戶進行登錄。對于那些強制用戶登錄后才能進行一切有用操作的應(yīng)用,,用戶往往會直接放棄,。 如果你的應(yīng)用必須先登錄后使用,那么你應(yīng)該在登錄頁面有一些簡短的文字,,來描述為什么必須先登錄,,以及這樣做會給用戶帶來什么好處,。 謹(jǐn)慎使用新手引導(dǎo)(介紹應(yīng)用的功能和如何進行操作) 。 在考慮新手引導(dǎo)之前,,你應(yīng)該努力地完善你的應(yīng)用,,盡可能使應(yīng)用的功能直觀和易于尋找。 其實,,好的應(yīng)用不需要新手引導(dǎo) ,。如果你確實覺得需要新手引導(dǎo),那么請參考如下的建議,,設(shè)計一個簡潔,、有針對性并且不妨礙用戶的新手引導(dǎo)。
不要太早要求用戶去給你的應(yīng)用評分。過早要求用戶進行評分可能會適得其反,。如果你想獲得有價值的反饋和評論,,在邀請用戶評論之前,,請給他們一點時間來使用你的應(yīng)用,并對你的應(yīng)用形成印象,。例如,,你可以等用戶訪問了一定數(shù)量的頁面或完成了一定數(shù)量的任務(wù)之后,再邀請他們進行評價,。 一般建議按照屏幕默認(rèn)的定向方式啟動你的應(yīng)用,。盡管如此,如果你的應(yīng)用只有一種屏幕方向,,那么就始終以這個方向啟動,,讓用戶在他們自己需要時再改變設(shè)備方向。例如,,一個游戲或者媒體觀看應(yīng)用只在橫屏模式下運行,,那么就應(yīng)該以橫屏模式啟動,即使設(shè)備當(dāng)前處于豎屏模式,。這樣的話,,如果用戶在豎屏模式下打開應(yīng)用,他們也知道應(yīng)該把設(shè)備轉(zhuǎn)成橫屏來進行使用,。
注:最好讓橫屏應(yīng)用支持兩種方向的橫屏,,即home鍵在左或在右方都支持。如果設(shè)備當(dāng)前已經(jīng)處于橫向狀態(tài),,那么就按照當(dāng)前狀態(tài)啟動應(yīng)用,,除非你有充分的理由不這么做。其他情況時,,可以考慮按home鍵處于右側(cè)的方式啟動應(yīng)用,。(想要了解更多關(guān)于支持不同設(shè)備方向的內(nèi)容,請參閱前文中Adaptivity and Layout相關(guān)章節(jié),。) 提供一張與應(yīng)用首頁看上去一樣的閃屏,。iOS會在啟動應(yīng)用時調(diào)用這張圖,這樣可以讓用戶覺得啟動速度很快,,同時,,也可以讓你的應(yīng)用有足夠的時間去加載內(nèi)容。具體如何制作閃屏,,請查閱Launch Files。 如果可能,,不要讓用戶在初次啟動應(yīng)用時閱讀免責(zé)聲明或者確認(rèn)用戶協(xié)議,。你可以直接在App Store展示這些內(nèi)容,使用戶在下載前就有所了解,。如果在某些情況下你必須展示這些內(nèi)容,,要確保它們與界面保持統(tǒng)一并在產(chǎn)品功能與用戶體驗之間達成平衡,。 在應(yīng)用重啟后,需要恢復(fù)到用戶退出使用時的狀態(tài),,讓他們可以從中斷之處繼續(xù)使用,。無需讓用戶記住是如何回到此狀態(tài)的。了解更多關(guān)于保持和恢復(fù)應(yīng)用狀態(tài)的有效方式,,請查閱Preserving Your App’s Visual Appearance Across Launches,。 1.4.2 時刻準(zhǔn)備好停止(Always Be Prepared to Stop)iOS 應(yīng)用不存在關(guān)閉或退出選項。當(dāng)用戶切換到另一個應(yīng)用,,回到主屏幕或者將設(shè)備調(diào)至睡眠模式的時候,,其實就是停止了當(dāng)前應(yīng)用的使用。 當(dāng)用戶切換應(yīng)用時,,iOS的多任務(wù)系統(tǒng)會將其放置到后臺并將新應(yīng)用的UI替換上來,。在這種情況下,你必須做到以下幾點: 隨時并盡快保存用戶信息,。因為在后臺的應(yīng)用隨時有可能被終止或退出,。 當(dāng)應(yīng)用停止的時候保存盡可能多的當(dāng)前狀態(tài)的詳細(xì)信息。這樣使用戶可以在回到應(yīng)用時能從中斷之處繼續(xù)使用,。例如,,在使用可滾動的數(shù)據(jù)列表時,退出后保存列表所在的位置,。了解更多關(guān)于保持和恢復(fù)應(yīng)用狀態(tài)的有效方式,,請查閱 Preserving Your App’s Visual Appearance Across Launches . 有些應(yīng)用可能需要一直在后臺運行。例如,,用戶可能希望能在使用一個應(yīng)用的同時還能一直聽歌,,接著又想用另外一個應(yīng)用來檢查代辦項或者玩游戲。關(guān)于如何正確處理多任務(wù),,請查閱 Multitasking . 不要強制讓應(yīng)用退出,。因為這樣會讓用戶誤以為是系統(tǒng)崩潰。如果有問題產(chǎn)生,,需要告訴用戶具體狀況以及如何解決,。以下有兩個建議,取決于出現(xiàn)的問題有多嚴(yán)重,,可以酌情使用: 如果應(yīng)用中所有的功能當(dāng)前都不可用,,那么應(yīng)該顯示一些內(nèi)容來解釋當(dāng)前的情形,并建議用戶如何進行后續(xù)操作,。這部分內(nèi)容給予了用戶以反饋,,使用戶相信你的應(yīng)用現(xiàn)在沒問題。同時這也可以穩(wěn)定用戶情緒,讓他們決定是否要采取糾正措施,,繼續(xù)使用應(yīng)用,,還是切換到另一個應(yīng)用。
如果只有部分功能不可用,,那么只要當(dāng)用戶使用這些功能時顯示提示即可,。其他情況下,用戶就應(yīng)該能正常使用應(yīng)用的其他功能,。如果你決定使用警告框來進行提示,,請確保只在用戶嘗試使用不可用的功能時再顯示。
1.5 導(dǎo)航(Navigation)除非導(dǎo)航設(shè)計不合理,,不然用戶應(yīng)該明顯察覺不到應(yīng)用中的導(dǎo)航體驗,。導(dǎo)航設(shè)計應(yīng)該能夠支撐你應(yīng)用結(jié)構(gòu)和目的卻又不分散用戶注意力。廣義來說,,導(dǎo)航主要有以下幾種類型,,每個導(dǎo)航都有其適應(yīng)的應(yīng)用結(jié)構(gòu):
在有層級結(jié)構(gòu)的應(yīng)用中,用戶在每個層級中都要選擇一項,,直到到達目的層級,。如果要切換到另一個目的層級,用戶必須回退一些層級,,或者直接回到初始層級再次選擇,。系統(tǒng)設(shè)置和郵箱應(yīng)用在這方面是很好示范,可以參考他們,。
譯者注:以上為視頻截圖,,完整視頻可 點擊觀看 。 在扁平信息架構(gòu)的應(yīng)用中,,用戶可以從首頁目錄直接切換到另一個,,因為所有的分類都可以從主屏直接訪問。音樂和App Store是兩個使用扁平結(jié)構(gòu)的好例子,。
譯者注:以上為視頻截圖,,完整視頻可 點擊觀看 。 在內(nèi)容或體驗驅(qū)動的信息架構(gòu)應(yīng)用中,,導(dǎo)航也會根據(jù)內(nèi)容或體驗來設(shè)計,。例如,在閱讀一本電子書時,,用戶會一頁接一頁的進行閱讀,,或者直接從目錄中選中某一個指定的頁碼;同樣,,在游戲中導(dǎo)航也是體驗的重要組成部分,。
譯者注:以上為視頻截圖,,完整視頻可 點擊觀看 。 在某些情況下,,在一個應(yīng)用中結(jié)合多種導(dǎo)航類型會有很好的效果。例如,,對于扁平信息結(jié)構(gòu)中某一分類下的內(nèi)容,,用分層導(dǎo)航的方式來顯示可能會更好。 應(yīng)該讓用戶時刻清楚自己當(dāng)前在應(yīng)用中所處的位置,,及如何前往目的頁面,。無論使用哪種適合你的應(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)用。游戲或者其他體驗驅(qū)動的應(yīng)用通常需要一些自定義的元素和行為,。 使用導(dǎo)航欄(Navigation Bar)幫助用戶輕松訪問分層內(nèi)容,。導(dǎo)航欄的標(biāo)題可以顯示用戶當(dāng)前所處的層級,而后退按鈕可以回到上一層級,。想要了解更多內(nèi)容,,請查看 Navigation Bar . 使用標(biāo)簽欄(Tab Bar)顯示同類型的內(nèi)容或功能。標(biāo)簽欄很適合于扁平信息結(jié)構(gòu),,可以讓用戶在分類之間隨意切換,,而不用在意當(dāng)前所處的位置。想要了解更多內(nèi)容,,請查看 Tab Bar . 在應(yīng)用中,,如果每屏顯示的都是同類項或同類頁,可以使用頁面控件(Page Control),。頁面控件的優(yōu)點是可以直觀地告訴用戶有多少個項目或頁面,,以及當(dāng)前所處位置。想要了解更多內(nèi)容,,請查看 Page Control ,。 一般來說,最好能給用戶提供到達每一屏的唯一路徑,。如果某屏內(nèi)容用戶需要在不同場景下查看,,可以考慮使用臨時視圖,例如模態(tài)視圖,、動作菜單或警告框,。想要了解更多,,請查看 Modal View 、 Action Sheet 和 Alert ,。 UIKit同時還提供了以下相關(guān)控件:
( 譯者注: 上文提到的Navigation Bar, Tab Bar, Page Control, Modal View, Action Sheet, Alert, Segmented Control和Toolbar均處在iOS Human Interface Guidelines的第4章 UI Elements部分,,翻譯將在后續(xù)更新中放出,,煩請各位耐心等候。若有需要,,亦可先參考先前已翻譯的iOS7 UI Elements章節(jié): 上 ,, 下 。) 1.6 模態(tài)情境(Modal Contexts)模態(tài)是一個承載某些連貫操作或內(nèi)容的優(yōu)缺點并存的模式,。它可以給用戶提供一種不脫離主任務(wù)的方式去完成一個任務(wù)或者獲得信息,,但是也會臨時性的阻止用戶對應(yīng)用的其他部分進行交互操作。
理想情況下,,用戶可以與iOS 應(yīng)用進行一種非線性的交互,,所以,盡可能的減少你應(yīng)用中的模態(tài)體驗是最好的,。通常情況,,僅在以下情境可以考慮使用模態(tài):
保證模態(tài)任務(wù)簡單,、簡短和高度聚焦,。你肯定不希望用戶使用模態(tài)視圖時像使用應(yīng)用中的一個mini應(yīng)用一樣。如果子任務(wù)過于復(fù)雜,,用戶會在進入模態(tài)情境時忽略了主要任務(wù),。在設(shè)計一個涉及視覺層次的模態(tài)任務(wù)時特別要考慮這一點,因為用戶有可能迷失并且忘記如何回到之前的操作中去,。如果一個模態(tài)任務(wù)必須包含不同視圖的子任務(wù),,確保給用戶一個獨立、清晰的導(dǎo)航路徑,,并避免迂回,。更多關(guān)于模態(tài)試圖的信息請參考 Modal View . 始終提供明顯、安全的退出模態(tài)任務(wù)的途徑,。確保用戶在退出模態(tài)視圖時可以預(yù)期操作的結(jié)果,。 一個任務(wù)需要多層級的模態(tài)視圖時,,確保用戶理解點擊非最高層級下的完成按鈕的結(jié)果。點擊一個低層級視圖上的完成按鈕是完成這個視圖中任務(wù)的一部分,,還是整個任務(wù),。因為有可能存在這種困惑,所以要盡可能避免在下級視圖中添加完成按鈕,。 保證提醒對話框的內(nèi)容都是必要且可操作的,。提醒對話框會打斷用戶的體驗并且要點擊才會消失,所以要讓用戶感到提醒信息是有用的,,打斷是有價值的。想要了解更多請參考 Alert . ( 譯者注: 上文提到的Modal View與Alert均處在iOS Human Interface Guidelines的第4章 UI Elements部分,,翻譯將在后續(xù)更新中放出,,煩請各位耐心等候。若有需要,,亦可先參考先前已翻譯的iOS7 UI Elements章節(jié): 上 ,, 下 。) 尊重用戶關(guān)于接收通知的偏好設(shè)置,。用戶會設(shè)置接收應(yīng)用通知的形式,,確保遵重用戶的喜好設(shè)置,否則可能會觸怒用戶,,導(dǎo)致其關(guān)閉應(yīng)用中所有的推送通知,。 1.7 交互性與反饋(Interactivity and Feedback)1.7.1 可交互元素吸引用戶點擊(Interactive Elements Invite Touch)為了暗示交互性,設(shè)計時會使用很多線索,,包括點擊的反饋,、顏色、位置,、上下文,、表意明確的圖標(biāo)和標(biāo)簽等。并不需要過于修飾元素來向用戶展示可交互性,。 在支持3D Touch的設(shè)備上,,當(dāng)用戶按壓主屏上的圖標(biāo)時,背景會虛化以此來暗示可以進行更多功能的選擇,。
一個關(guān)鍵的顏色可以給用戶提供很強的視覺指引,,尤其是沒有冗余的其它顏色時。為了對比,,使用藍色來標(biāo)記可交互的元素,,同時能提供統(tǒng)一的、易識別的視覺風(fēng)格,。
返回按鈕使用多個線索指明其可交互并傳達其功能:它出現(xiàn)在導(dǎo)航中,,顯示了一個指向后方的圖標(biāo),,使用了關(guān)鍵色,并且顯示了上一級頁面的標(biāo)題,。
一個圖標(biāo)或者標(biāo)題提供了清晰的名稱指引用戶點擊它,。例如,地圖中的標(biāo)題“Flyover Tour”,,“Directions to Here”,,清晰的說明了用戶可做的操作。結(jié)合關(guān)鍵色,,就可以省去按鈕邊界或其他多余的修飾,。
在內(nèi)容區(qū)域,必要時可以給按鈕添加邊界或背景,。位于欄(Bar),、動作列表(Action Sheet)和警告框(Alert)中的按鈕可以不需要邊界,因為用戶知道在這種區(qū)域中大多數(shù)選項是可交互的,。但是在內(nèi)容區(qū)域,,有必要使用邊界或背景將按鈕從其他內(nèi)容中區(qū)分出來。例如,,音樂,,時鐘,照片,,App Store在一些特別的場景中使用這種按鈕,。 照片管理中給分享按鈕增加了邊框,從其他解釋性文本中區(qū)分出來,。
時鐘在秒表和計時頁面中給按鈕增加背景來強調(diào)開始和暫停按鈕,,并且使按鈕在易分散注意力的內(nèi)容中更容易點擊。
應(yīng)用商店中使用有邊界的按鈕,,將按鈕和整個內(nèi)容條區(qū)分開來,,點擊整條內(nèi)容查看詳細(xì)信息,點擊按鈕進行下載安裝,。
1.7.2 用戶所知道的標(biāo)準(zhǔn)手勢(Users Know the Standard Gestures)用戶使用點擊,、拖拽、捏合等手勢與應(yīng)用和他們的IOS設(shè)備進行交互,。使用手勢拉近了用戶和設(shè)備之間的距離,,并且增強了直接操縱感。用戶通常期待手勢在不同應(yīng)用之間都是通用的,。 用戶在使用3D Touch時不需要學(xué)習(xí)額外的手勢操作,。當(dāng)用戶輕按屏幕并得到反饋時,很容易就能發(fā)現(xiàn)3D Touch提供的額外的交互方式,。
除了用戶熟悉的標(biāo)準(zhǔn)手勢,,iOS還定義了一些系統(tǒng)范圍內(nèi)的操作,,例如呼出控制中心(Control Center)或消息中心(Notification Center)。用戶可以在任意應(yīng)用下都使用這些手勢,。 不要給標(biāo)準(zhǔn)手勢賦予不同的行為,。除非你的應(yīng)用是游戲,否則重新定義標(biāo)準(zhǔn)手勢會使用戶迷惑,,且增加使用難度,。 不要創(chuàng)建和標(biāo)準(zhǔn)手勢功能相似的手勢操作。用戶已經(jīng)習(xí)慣了標(biāo)準(zhǔn)手勢的行為,,沒有必要讓用戶額外學(xué)習(xí)不同的操作手勢來達到同樣的操作結(jié)果,。 可以用復(fù)雜手勢作為完成某任務(wù)的快捷方式,但不能是唯一觸達方式,。最好給用戶提供一些簡單,,直接的方式完成某操作,即使這種方法需要他們額外地多點擊一到兩次,。簡單的手勢能讓用戶集中于當(dāng)前的體驗和內(nèi)容,而不是交互操作本身,。 除非是游戲,,否則避免定義新的手勢。在游戲或其他沉浸式的應(yīng)用中,,操作手勢也是有趣體驗的一部分,。但是在普通應(yīng)用中,幫助用戶達成目標(biāo)要比操作本身重要的多,,所以最好使用標(biāo)準(zhǔn)手勢,,盡量避免讓用戶去發(fā)覺和記憶新的操作。 在特定的環(huán)境中,,可以考慮使用多指操作,。雖然復(fù)雜的操作并不一定適用于所有應(yīng)用,但對用戶會花大量時間使用的應(yīng)用來說可以豐富體驗,,例如游戲或創(chuàng)建內(nèi)容環(huán)境,。但因為非標(biāo)準(zhǔn)手勢可發(fā)現(xiàn)性差,要盡量少用,,并且不要讓這類手勢成為完成任務(wù)的唯一方式,。 1.7.3 反饋有助于理解(Feedback Aids Understanding)反饋幫助用戶了解應(yīng)用當(dāng)前在做什么,發(fā)現(xiàn)接下來可以做什么以及理解他們動作產(chǎn)生的結(jié)果,。UIKit的操作和視圖提供了很多反饋類型,。 盡可能將狀態(tài)或其他的反饋信息整合到UI中。用戶不進行操作或不跳出當(dāng)前內(nèi)容就能獲得需要的信息是最好的,。例如,,郵箱將當(dāng)前的狀態(tài)顯示在不影響當(dāng)前內(nèi)容的工具欄上,。
避免顯示不必要的提醒對話框。對話框是很強的反饋機制,,只有在傳遞非常重要,,且可操作的信息時才需要使用它。如果用戶??吹胶芏鄾]有重要信息的對話框,,他們很快就會忽略所有對話框提醒。想要了解更多信息,,請參考 Alert .( 譯者注: Alert處在iOS Human Interface Guidelines的第4章 UI Elements部分,,翻譯將在后續(xù)更新中放出,煩請各位耐心等候,。若有需要,,亦可先參考先前已翻譯的iOS7 UI Elements章節(jié): 下 。) 1.7.4 輸入信息的方式要簡單(Inputting Information Should Be Easy)不管用戶是點擊控件還是使用鍵盤,,輸入信息都會花費時間和精力,。如果在發(fā)揮有用的效用前就讓用戶輸入大量信息會減弱用戶繼續(xù)使用的欲望。 讓用戶更容易的進行選擇,。例如,,使用選擇器或者表格代替純文本,因為大部分用戶覺得從列表中進行選擇要比打字容易的多,。
適時地從iOS中獲取信息,。設(shè)備上存儲了大量的用戶信息??梢缘脑?,不要讓用戶提供你可以輕易找到的信息,例如聯(lián)系人或日歷信息,。 提供有用的反饋來平衡用戶的輸入,。在使用應(yīng)用的過程中,付出和回報的概念可以幫助用戶感到進程在被推進,。 1.8 動畫(Animation)細(xì)微,、精美的動畫遍布iOS的用戶界面,他們使應(yīng)用的體驗更具吸引力,,更具動態(tài)性,。適當(dāng)?shù)膭赢嬁梢裕?/p>
(譯者注:以上為視頻截圖,完整視頻請 點擊觀看 ) 謹(jǐn)慎地增加動畫,,特別是在那些無法提供沉浸式體驗的應(yīng)用中,。過多和無理由的動畫會阻礙應(yīng)用的流暢性,降低性能,還會分散用戶在操作中的注意力,。 尤其是要有目的地,,合理地應(yīng)用動效和UIKit中的動態(tài)控件,并確保對結(jié)果進行測試,。合理地使用動效可以提升用戶的理解程度和愉悅感,;應(yīng)用過度使用動效會給用戶帶來迷惑和難以掌控的感覺。 如果可以,,保持自定義動畫和內(nèi)置動畫的一致性,。用戶習(xí)慣于內(nèi)置iOS應(yīng)用使用的精細(xì)動畫。事實上,,用戶傾向于把視圖之間的平滑切換,,對設(shè)備方向改變的流暢相應(yīng)和基于物理的滾動效果看做是iOS體驗的一部分。除非,,你的應(yīng)用要給用戶提供類似游戲應(yīng)用的沉浸式體驗,,這種情況下自定義的動畫可以區(qū)別于內(nèi)置動畫。 使用風(fēng)格類型一致的動畫,。自定義動畫之間也需要保持一致性,,這樣可以讓用戶在使用應(yīng)用以之前建立的經(jīng)驗為基礎(chǔ)。 一般來說,,自定義的動畫要考慮動畫的現(xiàn)實性和可信性,。人們樂意接受自由的藝術(shù)創(chuàng)作,但是當(dāng)動效不合理或者違反物理學(xué)時,,用戶會感到困惑,。例如,,當(dāng)你從屏幕頂部下滑拖出一個視圖的時候,,你也要上滑將它收起,因為這么做可以幫助用戶記住這個視圖從何而來,。如果你下滑到屏幕底部關(guān)閉這個視圖,,用戶關(guān)于從屏幕上方呼起的心理模型就會被打破。 1.9 品牌推廣(Branding)成功的品牌推廣不僅僅包括在應(yīng)用中添加品牌元素,。優(yōu)秀的應(yīng)用應(yīng)該通過創(chuàng)建獨特的外觀和感覺來為用戶提供愉悅,、難忘的體驗。 在iOS系統(tǒng)之下可以很容易地使用自定義的圖標(biāo),、顏色和字體來創(chuàng)建區(qū)別于其他應(yīng)用的UI,。當(dāng)你進行這些元素的設(shè)計時,牢記以下兩點:
當(dāng)你需要讓用戶意識到你的品牌時,你應(yīng)該遵循以下幾點: 以精致優(yōu)雅不唐突的方式植入品牌元素,。用戶使用你的應(yīng)用來完成事務(wù)或者進行娛樂,,他們不希望被強迫著去觀看廣告。為了獲得最好的用戶體驗,,你可以通過字體,、顏色和圖像的設(shè)計來潛移默化地地提醒用戶你的品牌身份。
避免遠離用戶關(guān)心的內(nèi)容,。不要像上圖中的反例那樣將僅有品牌意義的內(nèi)容放在屏幕頂部二級欄上持續(xù)展示,,使正文內(nèi)容空間被壓縮,而是考慮以其他低侵入性的方法無處不在地展示品牌,,如使用自定義顏色,、字體,或巧妙地定制屏幕的背景,。 抵抗住誘惑,,不要把你的 logo 貫穿整個應(yīng)用。 移動設(shè)備的屏幕多數(shù)相當(dāng)小,,logo的每一次出現(xiàn)都會占據(jù)空間,,從而將用戶與他們想看的內(nèi)容隔離開。而且,,在應(yīng)用中顯示logo并不能像在網(wǎng)頁中顯示logo那樣達到相同的目的:對于用戶來說通常會很容易在不知道網(wǎng)頁所屬的情況下訪問一個網(wǎng)頁,,但卻極少有用戶會在完全不看一個iOS系統(tǒng)中的應(yīng)用圖標(biāo)的情況下就打開它。 1.10 顏色與字體(Color and Typography)1.10.1 色彩有助于增進溝通(Color Enhances Communication)在iOS系統(tǒng)中,,顏色會用于表明交互,,傳遞活性以及提供視覺連續(xù)性。內(nèi)置的應(yīng)用程序選擇使用那些看起來更具個性的,、純粹,、干凈的顏色,并輔以或亮或暗的背景組合,。
如果你要創(chuàng)建多樣的自定義顏色,,要確保它們能夠和諧共存。例如,如果你的應(yīng)用的基本風(fēng)格是柔和的色調(diào),,你就應(yīng)該創(chuàng)建一個協(xié)調(diào)的柔和色調(diào)的色板用于整個應(yīng)用,。 注意在不同情境下的顏色對比。例如,,如果在導(dǎo)航欄的背景與欄按鈕標(biāo)題之間沒有足夠的對比,,按鈕就會很難被用戶看到。一個快速但不嚴(yán)謹(jǐn)?shù)姆椒ㄊ峭ㄟ^將設(shè)備置于不同的光照環(huán)境之中(包括晴朗的室外)來測試設(shè)備上的顏色是否具有足夠的對比度,。 雖然在設(shè)備上查看你的應(yīng)用能夠在一定程度上幫助你找到需要調(diào)整的地方,,但這仍代替不了能產(chǎn)生可靠結(jié)果的更科學(xué)客觀的方法。這種方法涉及到判定前景色和背景色的亮度值是否符合一定的比率,。這個比率值可以通過在線對比度計算器或者根據(jù)WCAG2.0標(biāo)準(zhǔn)中提供的公式自己計算獲得,。你應(yīng)用中理想的顏色對比度應(yīng)該是4.5:1或更高。 當(dāng)你使用自定義的欄顏色時,,著重考慮半透明的欄和應(yīng)用內(nèi)容,。當(dāng)你需要創(chuàng)建能匹配特別顏色的欄顏色時(比如一個已有品牌中的顏色),可能在你獲得你想要的結(jié)果之前,,你需要用各種顏色進行實驗,。欄的顯示將會同時受到iOS系統(tǒng)所提供的半透明欄與藏在欄后面的應(yīng)用內(nèi)容的呈現(xiàn)所影響。 API 注: 使用淺色(tintColor)的屬性值給予欄按鈕顏色,,使用欄淺色(barTintColor)的屬性值為欄本身賦色,。欲了解更多關(guān)于欄屬性的內(nèi)容,可參見 UINavigationBar Class Reference ,,, UI TabBar Class Reference ,, UIToolbar Class Reference 和 UISearchBar Class Reference . 注意顏色的盲區(qū)。多數(shù)色盲的人很難區(qū)分紅色與綠色,。需要對你的應(yīng)用進行測試以確保在其中你沒有將紅色與綠色作為區(qū)分兩個不同狀態(tài)或值的唯一方式,,一些圖像編輯軟件或工具能夠有效的幫你驗證顏色的盲區(qū)。通常意義來說,,使用多種方式來表征原色的交互性是非常好的(需要了解更多關(guān)于在iOS系統(tǒng)中表征交互性的信息,,請參閱 Interactive Elements Invite Touch ) ,。 考慮選擇一種基準(zhǔn)色顏色來表征交互性與狀態(tài),。內(nèi)置的應(yīng)用里的基準(zhǔn)色包括比如備忘錄中的黃色,和日歷中的紅色等等,。如果你定義一種用于表征交互和狀態(tài)的基準(zhǔn)色,,要確保你的應(yīng)用中的其他顏色不會與它發(fā)生沖突。 避免給可交互和不可交互的元素使用相同的顏色,。色彩是表明UI元素交互屬性的方式之一,。如果可交互和不可交互的元素使用相同的顏色,用戶將會難以判斷哪些區(qū)域是可點的。 色彩可以向用戶傳達信息,,但不一定會以你希望的方式,。每個人眼中的色彩是不一樣的,不同的文化為色彩賦予的意義也是不相同的,?;〞r間來研究如何使用色彩才可能會被其他國家或者文化接受。你要盡可能確定應(yīng)用中運用的色彩向用戶傳達了恰當(dāng)?shù)男畔ⅰ? 大多數(shù)情況下,,不能讓顏色喧賓奪主,,讓用戶分心。除非色彩是應(yīng)用的目的和本質(zhì)所在,,通常情況下色彩應(yīng)該用來從細(xì)微細(xì)節(jié)之處提升用戶體驗,。 1.10.2 優(yōu)秀的排版提供清晰的傳達(Great Typography Enables Clear Communication)Apple為全平臺設(shè)計了San Francisco字體以提供一種優(yōu)雅的、一致的排版方式和閱讀體驗,。在iOS 9及未來的版本中,,San Francisco 是系統(tǒng)字體。 San Francisco搭配Dynamic Type,,可以為您提供:
下載San Francisco可訪問 https://developer.apple.com/fonts/. (注意:iOS9中的San Francisco字體取名為SF-UI),。當(dāng)你在你的app中采用San Francisco時,你可以調(diào)整模擬器>設(shè)置中的值來測試在不同尺寸下你的app的文本,。 注:如果你是用自定義字體,,你仍然可以采用Dynamic Type或根據(jù)系統(tǒng)的字號設(shè)置來規(guī)劃字體范圍。當(dāng)用戶改變設(shè)置時,,你的應(yīng)用也必須響應(yīng)式的配合,。如需了解如何使用文字樣式并確保當(dāng)用戶改變文字型號設(shè)置時你的應(yīng)用能夠獲取通知,可以參考 Text Styles . San Francisco 有兩類尺寸: 文本模式(Text)和 展示模式(Display),。 文本模式適用于小于20點(points)的尺寸,,展示模式適用于大于20點(points)的尺寸。當(dāng)你在你的app中使用San Francisco時,,iOS會自動在適當(dāng)?shù)臅r機在文本模式和展示模式中切換,。 注:如果你使用應(yīng)用程序如Sketch或Photoshop來生成你的設(shè)計,,那么當(dāng)你設(shè)置的字體不小于20點的時候,你需要切換到展示模式,。iOS會根據(jù)字體大小為San Francisco自動調(diào)整字間距,。(字間距是以用作于修改文字間距)。表格10-1 和 10-2分別是文本模式(Text)和展示模式(Display) 在不同字號下的間距值,。
為了突出某些文字或者為了在內(nèi)容塊之間建立視覺關(guān)聯(lián),,你可以依賴由Dynamic Type支持的語義化樣式,如標(biāo)題,、正文,,你也可以指定字體權(quán)重,如細(xì)體或者半粗,。使用 Dynamic Type樣式使得你的內(nèi)容能更好地表達含義,,但如果你想要對你的設(shè)計有更好的把控能力,你可以對特定的文字設(shè)置特定的權(quán)重,。(想要了解更多關(guān)于調(diào)整字體權(quán)重,, 可以參閱 UIFont Class Reference .) 例如,你可能想要增加某些文字的權(quán)重,,來幫助用戶可視化你的內(nèi)容的層次結(jié)構(gòu),,或者把用戶的注意力吸引到特定的詞或短語。另外,,你可以通過增加較小文字的權(quán)重和減小較大文字的權(quán)重,,在多個不同字號的、相鄰的標(biāo)簽中建立視覺凝聚,。字體權(quán)重在內(nèi)容的整體風(fēng)格和表達中有重要影響,,因此你可以選擇特定的權(quán)重來達到設(shè)計目的。 文本尺寸的響應(yīng)式變化需要優(yōu)先考慮內(nèi)容,。并不是所有的內(nèi)容對于用戶都是同等重要的,。當(dāng)用戶選擇更大的文本尺寸時,他們是想要使他們關(guān)注的內(nèi)容更容易閱讀,;他們并不總是想要屏幕上的每個單詞都更大,。 例如,當(dāng)用戶選擇具備更大易用性的文本尺寸時,,郵件將會以更大的尺寸顯示郵件的主題和內(nèi)容,,而對于那些沒那么重要的信息——如時間和收件人——則采用較小的尺寸。
確保一個自定義字體在不同尺寸下的所有類型都具備可讀性,。實現(xiàn)這一效果的方法之一是效仿在不同的文本尺寸下iOS系統(tǒng)呈現(xiàn)字體樣式的一些方法,。例如:
通常情況下,,應(yīng)用中整體應(yīng)該使用單一字體。多種字體的混雜會使你的應(yīng)用看上去支離破碎和草率,。相反,,使用一種字體和少數(shù)樣式。根據(jù)語義用途,,使用 UIFont 類的API來定義不同文本區(qū)域的樣式,,比如正文或者標(biāo)題。
1.11 圖標(biāo)和圖形(Icons and Graphics)1.11.1 應(yīng)用圖標(biāo)(The App Icon)每個應(yīng)用都需要一個漂亮的圖標(biāo),。用戶常常會在看到應(yīng)用圖標(biāo)的時候便建立起對應(yīng)用的第一印象,,并以此評判應(yīng)用的品質(zhì)、作用以及可靠性,。 以下幾點是你在設(shè)計應(yīng)用圖標(biāo)時應(yīng)當(dāng)記住的,。當(dāng)你確定要開始設(shè)計時,請參考 App Icon 來獲取更詳細(xì)的設(shè)計規(guī)格與指導(dǎo),。(譯者注:App Icon處在iOS Human Interface Guidelines的Icon and Image Design部分,,翻譯將在后續(xù)更新中放出,煩請各位耐心等候,。)
1.11.2 小圖標(biāo)(Small Icons)iOS提供了一系列小的icon,,用以代表各種常見任務(wù)與操作,,它們常用在標(biāo)簽欄(Tab Bar)、工具欄(Toolbars)與導(dǎo)航欄(Navigation Bar)中,。用戶通常都已經(jīng)了解這些內(nèi)置圖標(biāo)的含義了,,因此可以盡可能的多使用它們。
如果需要自定義動作或者內(nèi)容,,你也可以設(shè)計自定義圖標(biāo),。設(shè)計這些小的線性圖標(biāo)與設(shè)計應(yīng)用圖標(biāo)有很大的區(qū)別,請參考 Bar Button Icons 來了解更多內(nèi)容,。( 譯者注: Bar Button Icons章節(jié)處在iOS Human Interface Guidelines的Icon and Image Design部分,,翻譯將在后續(xù)更新中放出,煩請各位耐心等候,。) 請注意,,你有時候也可以用文字來代替工具欄和導(dǎo)航欄的圖標(biāo)。 就像iOS的日歷里面,,工具欄上便是使用”今天”,”日歷”和”收件箱”來代替圖標(biāo)進行表意的,。
想要決定在工具欄和導(dǎo)航欄中到底是用圖標(biāo)還是文字,可以優(yōu)先考慮一屏中最多會同時出現(xiàn)多少個圖標(biāo),。同一屏幕中圖標(biāo)的數(shù)量過多可能會讓整個應(yīng)用看起來難以理解,。使用圖標(biāo)還是文字還取決于屏幕方向是橫向還是縱向,因為水平視圖下通常會擁有更多的空間,,可以承載更多的文字,。 1.11.3 圖形(Graphics)iOS應(yīng)用大多數(shù)圖形豐富。無論是你需要展示用戶的照片,,還是需要創(chuàng)建自定義圖片,,以下這些需求都應(yīng)該遵守:
不要使用從蘋果系列產(chǎn)品中復(fù)制的圖形,。這些圖形均受版權(quán)保護,,而且產(chǎn)品的設(shè)計可能會頻繁改變。 不要將蘋果的應(yīng)用圖標(biāo),,圖像或者截圖用于你的設(shè)計中,。所有蘋果的設(shè)計均受版權(quán)保護并且不允許出現(xiàn)在你的UI中,除非它們是由系統(tǒng)直接提供的,。 1.12 術(shù)語和措辭(Terminology and Wording)你在應(yīng)用中呈現(xiàn)的每一個字都是與用戶進行對話的一部分,。把握這樣的對話機會,為你的用戶提供清晰的表意與愉悅的體驗,。 設(shè)置是面向全體用戶的一個基礎(chǔ)應(yīng)用,,因此它使用了簡明扼要的語言來描述用戶可以進行的操作。舉個例子,,設(shè)置→勿擾模式(Do Not Disturb)就沒有使用難以理解的復(fù)雜技術(shù)術(shù)語,,而是用了簡單的語言,給用戶描述了里頭的一系列操作,。
保證你使用的術(shù)語是用戶能理解的,。根據(jù)你對用戶群的理解來決定在應(yīng)用中使用什么樣的詞匯。舉個例子,,在一款針對小白用戶的應(yīng)用中使用技術(shù)術(shù)語是不合適的,,但對于針對高端用戶的應(yīng)用來說,使用技術(shù)術(shù)語是很自然的事情,。 使用非正式的友好語氣,,但不需要太過卑微。避免太正式太僵化,,或者太過嘻嘻哈哈,,傲慢無禮。請記住,,用戶可能會反復(fù)閱讀這些文本,,因此有些起初看上去很俏皮的語句,多看幾次之后可能會顯得煩人,。 像新聞編輯一般遣詞造句,,避免不必要的冗余語句。當(dāng)你的文案足夠簡明扼要,,用戶就可以很輕松地閱讀和理解它,。確定最重要的信息,,精煉它并且突出它,讓用戶不需要讀一大段文字才能了解他們在找什么,,以及下一步要做什么,。 給控件加上短標(biāo)簽或者容易理解的圖標(biāo)。讓用戶只掃一眼就能知道這個控件是干什么的,。 描述時間時要注意準(zhǔn)確性,。今天和明天這些詞匯確實顯得比較友好,但有時候會讓用戶費解,,因為你可能沒有辦法確定用戶當(dāng)前的時區(qū)和時間,。舉個例子,假如有一項活動會在半夜12點前開始,,對于在同一個時區(qū)的用戶而言,,這個活動是在今天開始的,但對于那些在早一點的時區(qū)里的用戶而言,,這個活動在昨天就已經(jīng)開始了,。 為你的應(yīng)用寫一則漂亮的App Store描述,最大程度地把握住這個與潛在用戶溝通的絕佳機會,。除了準(zhǔn)確描述你的應(yīng)用,、強調(diào)應(yīng)用的品質(zhì)與亮點以外,你還需要:
1.13 與iOS的整合(Integrating with iOS)與iOS整合,指的是在當(dāng)前平臺上給用戶提供一種舒適的,、賓至如歸般的體驗,,當(dāng)然這并不意味著我們要把每一個應(yīng)用做的和內(nèi)置應(yīng)用一模一樣。 最好的與iOS整合的方式便是深刻地了解iOS的主題與核心——這一部分在上文為iOS而設(shè)計(Designing for iOS)部分中已有詳細(xì)描述,,并尋求出如何在你的應(yīng)用中融合與表達這種主題,。當(dāng)你這么做的時候,遵循本章中的指引可以幫助你為你的用戶提供他們想要的體驗。 1.13.1 正確使用標(biāo)準(zhǔn)UI元素(Use Standard UI Elements Correctly)盡可能使用UIkit提供的標(biāo)準(zhǔn)UI元素是一個好主意,。多使用標(biāo)準(zhǔn)元素而非自定義元素,,你與你的用戶都將受益:
想要充分地利用標(biāo)準(zhǔn)UI元素的優(yōu)點,,有一些關(guān)鍵點需要特別注意: 嚴(yán)格遵循每個 UI 元素的設(shè)計規(guī)范,。 當(dāng)你應(yīng)用中的UI元素的外觀與功能都是用戶所熟悉的,,他們可以很容易地根據(jù)先前的經(jīng)驗來使用他們,進而更好地使用你的應(yīng)用,。你可以從這些章節(jié)中找到各種UI元素的設(shè)計規(guī)范: Bars , Content Views , Controls , Temporary Views . (譯者注:上文提到的章節(jié)均處在iOS Human Interface Guidelines的第4章,,翻譯將在后續(xù)更新中放出,煩請各位耐心等候,。若有需要,,亦可先參考先前已翻譯的iOS7 UI Elements章節(jié): 上 , 下 ,。) 不要混用不同版本的 iOS 里的 UI 元素,。 你一定不希望讓用戶覺得你的UI元素來自于與當(dāng)前用戶的設(shè)備版本不同的iOS系統(tǒng)。 大體來說,,請避免創(chuàng)造自定義 UI 元素來表現(xiàn)標(biāo)準(zhǔn)交互行為,。 先問問你自己為什么一定要創(chuàng)建一個與標(biāo)準(zhǔn)UI元素行為完全相同的自定義元素。如果你只是想改變標(biāo)準(zhǔn)UI元素的外觀,,可以考慮使用UIKit外觀定制API(UIKit appearance customization APIs),,或者給元素填充別的顏色。如果你需要定義一個與標(biāo)準(zhǔn)控件稍有不同的行為,,請確保你在改變了這個UI元素的屬性和行為之后,,這個元素仍然能完成你所希望的操作。如果你需要完全自定義一個行為,,最好是設(shè)計一個與標(biāo)準(zhǔn)元素完全不相像的自定義元素,。 提示:Interface Builder讓獲取標(biāo)準(zhǔn)UI元素,使用外觀定制API(the appearance customization APIs),,獲取屬性,,以及在你的應(yīng)用里使用自定義和系統(tǒng)自帶圖標(biāo)變得很簡單。想要了解更多Interface Builder的內(nèi)容,請參閱 Xcode Overview . 不要用系統(tǒng)自帶的按鈕和圖標(biāo)表達其他含義,。iOS提供了多種可用的按鈕和圖標(biāo),。請確認(rèn)你了解它們的準(zhǔn)確表意;不要單純憑借你看到這些圖標(biāo)樣式的猜測和理解來解讀和使用它們,。(你可以在 Toolbar and Navigation Bar Buttons 和 Tab Bar Icons 中了解到這些按鈕和圖標(biāo)的準(zhǔn)確含義,。) 如果你所需要的功能無法用系統(tǒng)提供的按鈕和圖標(biāo)來表現(xiàn),你也可以設(shè)計自定義按鈕,。自定義按鈕的設(shè)計可以參考 Bar Button Icons . (譯者注:上文提到的章節(jié)均處在iOS Human Interface Guidelines的第4章,,翻譯將在后續(xù)更新中放出,煩請各位耐心等候,。若有需要,,亦可先參考先前已翻譯的iOS7 UI Elements章節(jié): 上 , 下 ,。) 如果你的 app 是沉浸式體驗,,那么創(chuàng)造全新的自定義 UI 是合理的。 因為你在創(chuàng)造一個統(tǒng)一的體驗環(huán)境,,讓用戶在其中能夠有所期待并探索如何控制應(yīng)用,。 1.13.2 弱化文件和文檔處理(Downplay File and Document Handing)iOS應(yīng)用可以幫助用戶創(chuàng)建和處理文件,但這并不意味著用戶需要過分考慮iOS設(shè)備的文件系統(tǒng)如何運作,。 如果你的應(yīng)用中支持用戶創(chuàng)建和編輯文檔,,那么提供一個清晰的圖形庫視圖(document library view)讓用戶能夠方便地打開或者新建文檔是一個好的做法。理想狀況下,,這樣的圖形庫視圖擁有以下特征:
舉個例子,Pages的圖形庫視圖里面,,既展示了用戶已存在的文檔,,也加入了便捷的新建文檔操作。
提示:你可以使用Quick Look Preview功能來讓用戶預(yù)覽你的應(yīng)用中的文件,,哪怕你的應(yīng)用不能打開這些文件,。想要了解如何在你的應(yīng)用中提供這個功能,請參閱 Quick Look . 如果你的應(yīng)用允許用戶使用在其他應(yīng)用中創(chuàng)建的文檔,你可以通過模態(tài)文檔選擇視圖控制器(modal document picker view controller)來幫助用戶觸達它們,。這個控制器可以提取用戶在iCloud中的文檔,,還可以通過文檔提供者擴展(Document Provider extensions)來提取在其它應(yīng)用中創(chuàng)建和儲存的文件。想要了解更多文檔提供者擴展的內(nèi)容,,可以參考 Document Provider Extensions ; 想要了解更多文檔提取視圖控制器,,請參考 Document Picker Programming Guide . 給用戶足夠的信心,讓他們相信除非主動取消或者刪除,,他們的成果會被隨時妥善保存 ,。 如果你的應(yīng)用幫助用戶創(chuàng)建于管理文檔,不能要求用戶每次都能及時保存,。無論是打開另一個文檔或切換應(yīng)用的時候,,iOS應(yīng)用都應(yīng)當(dāng)承擔(dān)起幫助用戶保存輸入內(nèi)容的責(zé)任。 如果你的應(yīng)用的主要功能不是創(chuàng)造內(nèi)容,,但又允許用戶查看或編輯信息,,這種情況下你需要詢問用戶是否要保存修改。在這種場景下,,比較好的做法是提供“編輯”按鈕,,點擊后進入編輯狀態(tài),,同時編輯按鈕變成“保存”和“取消”按鈕,,這種變化可以提示用戶當(dāng)前處于編輯模式?!氨4妗笨梢员A粜薷膬?nèi)容,,“取消”則退出編輯模式。 1.13.3 必要時提供可配置選項(Be Configurable If Necessary)某些應(yīng)用需要用戶手動安裝或設(shè)置選項,,但是大部分應(yīng)用不需要如此,。一個好的應(yīng)用可以讓大部分用戶快速上手,并通過主界面給用戶提供便捷的調(diào)整體驗的方式,。 當(dāng)你的應(yīng)用在默認(rèn)狀態(tài)下就能滿足大部分用戶的期望,,用戶對設(shè)置的需求就減少了。如果你需要儲存用戶的基本資料,,可以優(yōu)先向系統(tǒng)請求和拉取相關(guān)信息,,而不是上來就讓用戶自己填寫它。如果你一定要提供用戶鮮少用到的設(shè)置項,,請參考 App Programming Guide for iOS 中的 The Setting Bundle 部分來了解如何在代碼中定義它們,。 盡可能在主UI中提供設(shè)置選項。如果這個設(shè)置項代表著用戶一個基本任務(wù),,又或者用戶在進行主線任務(wù)時有可能頻繁改變設(shè)置,,那么將設(shè)置項放在主UI中會很方便。如果用戶只是偶爾才會用到設(shè)置項,那么可以將其放在獨立的視圖中,。 如果應(yīng)用內(nèi)相關(guān)設(shè)置需要在系統(tǒng)設(shè)置中改變,,幫助用戶直接訪問系統(tǒng)設(shè)置。尤其是,,如果你要用一段文字來描述如何改變這個設(shè)置,,比如“設(shè)置>隱私>定位服務(wù)”,倒不如直接放置一個按鈕,,點擊后即可到達設(shè)置中的定位服務(wù),。想要了解如何實現(xiàn),請參考 Settings Launch URL . 1.13.4 充分利用iOS技術(shù)(Take Advantage of iOS Technologies)iOS提供了豐富的技術(shù)方式來支持用戶完成他們所期望的各種任務(wù)和場景,。這意味著在絕大多數(shù)情況下,,將系統(tǒng)提供的技術(shù)整合到你的應(yīng)用中,往往比自定義一種新的技術(shù)更為可靠,。 某些iOS技術(shù),,比如多任務(wù)并行( Multitasking )與語音向?qū)? VoiceOver )等等,是所有應(yīng)用都應(yīng)該包含的系統(tǒng)級特性,。而另外一些技術(shù)是否整合到應(yīng)用中,,則取決于應(yīng)用本身的功能性。比如處理門票和禮品卡的應(yīng)用( Wallet )支持用戶在應(yīng)用內(nèi)內(nèi)購( In-App Purchase ),,展示應(yīng)用內(nèi)置廣告( iAd Rich Media Ads )則可以整合 Game Center ,,同時支持 iCloud . 本章英文原文訪問地址: iOS Human Interface Guidelines 本章中文翻譯PDF下載: 點此下載 第五章 |
|