今天這篇長文讓人激動(dòng)到手發(fā)抖，騰訊譯者糖箔糊的心血譯作，整篇2萬多字，源自官方超詳細(xì)的IOS 8人機(jī)界面指南，非常用心的作品，文字到位，邏輯清晰，保證任何一個(gè)細(xì)節(jié)讀起來都能明白曉暢，趁著IOS 8 剛剛發(fā)布，趕緊提前學(xué)起來，千萬記得收藏呦!

　　小技巧：Word 2013會(huì)自動(dòng)檢測目錄，閱讀模式下學(xué)習(xí)非常方便!

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

　　iOS 的革新關(guān)鍵詞如下：

　　遵從 ：UI能夠更好地幫助用戶理解內(nèi)容并與之互動(dòng)，但卻不會(huì)分散用戶對內(nèi)容本身的注意力。

　　清晰 ：各種大小的文字應(yīng)該易讀，圖標(biāo)應(yīng)該醒目，去除多余的修飾，突出重點(diǎn)，很好地突顯了設(shè)計(jì)理念。

　　深度 ：視覺的層次和生動(dòng)的交互動(dòng)作會(huì)賦予UI新的活力，不但幫助用戶更好理解新UI的操作并讓用戶在使用過程中感到驚喜。

　　無論你是重新設(shè)計(jì)一個(gè)現(xiàn)有的應(yīng)用或是重新開發(fā)一個(gè)，請嘗試下列方法：

　　首先，去除了UI元素，讓應(yīng)用的核心功能呈現(xiàn)得更加直接并強(qiáng)調(diào)其相關(guān)性。

　　其次，直接使用iOS的系統(tǒng)主題讓其成為應(yīng)用的UI，這樣能給用戶統(tǒng)一的視覺感受。

　　最后，保證你設(shè)計(jì)的UI可以適應(yīng)各種設(shè)備和不同操作模式，這樣用戶可以在不同場景下舒適地享用你的應(yīng)用。

　　在整個(gè)設(shè)計(jì)過程中，時(shí)刻準(zhǔn)備著推翻先例，假設(shè)問題，并以重點(diǎn)內(nèi)容和功能(為目標(biāo))來驅(qū)動(dòng)每個(gè)細(xì)節(jié)設(shè)計(jì)。

　　1.1.1 以內(nèi)容為核心（Defer to Content）

　　雖然明快美觀的UI和流暢的動(dòng)態(tài)效果是iOS體驗(yàn)的亮點(diǎn)，但內(nèi)容始終是iOS的核心。

　　這里有一些方法，以確保你的設(shè)計(jì)能夠提升你的應(yīng)用功能體驗(yàn)并關(guān)注內(nèi)容本身。

　　充分利用整個(gè)屏幕

　　天氣應(yīng)用是最好的例子：漂亮的天氣圖片充滿全屏，呈現(xiàn)用戶所在地當(dāng)前天氣情況這最重要的信息，同時(shí)也留出空間呈現(xiàn)了每個(gè)時(shí)段的氣溫?cái)?shù)據(jù)。

　　盡量減少視覺修飾和擬物化設(shè)計(jì)的使用

　　 UI面板、漸變和陰影有時(shí)會(huì)讓UI元素顯得很厚重，致使搶了內(nèi)容的風(fēng)頭。應(yīng)該以內(nèi)容為核心，讓UI成為內(nèi)容的支撐。

　　嘗試使用半透明底板

　　半透明的控件——比如控制中心——關(guān)聯(lián)了使用場景，幫助用戶看到更多可用的內(nèi)容，并可以起到短暫的提示作用。在iOS中，透明的控件只讓它遮擋住的地方變得模糊——看上去像蒙著一層米紙一樣——它并沒有遮擋屏幕剩余的部分。

　　1.1.2 保證清晰度（Provide Clarity）

　　保證清晰度是另一個(gè)方法，以確保你的應(yīng)用中內(nèi)容始終是核心。以下是幾種方法，讓最重要的內(nèi)容和功能清晰，易于交互。

　　使用大量留白

　　留白讓重要內(nèi)容和功能顯得更加醒目。此外，留白可以傳達(dá)一種平靜和安寧的視覺感受，它可以使一個(gè)應(yīng)用看起來更加聚焦和高效。

　　讓顏色簡化UI

　　一個(gè)主題色——比如在記事本中使用的黃色——讓重要區(qū)域更加醒目并巧妙地表示交互性。這同時(shí)也給了一個(gè)應(yīng)用一個(gè)統(tǒng)一的視覺主題。內(nèi)置應(yīng)用使用家族化的系統(tǒng)顏色，無論在深色和淺色背景上看起來都干凈，純粹。

　　通過使用系統(tǒng)字體確保易讀性

　　iOS的系統(tǒng)字體自動(dòng)調(diào)整行間距和行的高度，使閱讀時(shí)文本清晰易讀，無論何種大小的字號都表現(xiàn)良好。無論你是使用系統(tǒng)或是自定義字體，務(wù)必使用動(dòng)態(tài)型，這樣你的應(yīng)用可以在用戶選擇不同字號時(shí)做出應(yīng)對。

　　使用無邊框的按鈕

　　默認(rèn)情況下，所有bar上的按鈕都是無邊框的。在內(nèi)容區(qū)域，無邊框按鈕以文案、顏色以及操作指引標(biāo)題來表明按鈕功能。當(dāng)按鈕被激活時(shí)，該按鈕呈現(xiàn)高亮的淺色狀態(tài)來作為操作響應(yīng)。

　　1.1.3 用深度來體現(xiàn)層次（Use Depth to Communicate）

　　iOS經(jīng)常在不同的層級上展現(xiàn)內(nèi)容，用以表達(dá)分組和位置，并幫助用戶了解在屏幕上的對象之間的關(guān)系。

　　通過使用一個(gè)在主屏幕上方的半透明背景浮層來區(qū)分文件夾和其余部分的內(nèi)容。

　　備忘錄以不同的層級展示，如插圖所示。用戶在使用備忘錄里的某個(gè)條目時(shí)，其他的條目被收起在屏幕下方(譯者按：其實(shí)這個(gè)視覺提示使用起來很隱晦)。

　　日歷有較深的層級，當(dāng)他們在翻閱年、月、日的時(shí)候，以及增強(qiáng)的交互動(dòng)畫給用戶一種層級縱深感(循序切換的層次，從年到月到日)。在滾動(dòng)年份視圖時(shí)，用戶可以即時(shí)看到今天的日期以及其他日歷任務(wù)。當(dāng)用戶處于月份視圖時(shí)，點(diǎn)擊年份視圖按鈕，月份會(huì)縮小至年份視圖中的所處位置。

　　今天的日期依然處于高亮狀態(tài)，年份出現(xiàn)在返回按鈕處，這樣用戶可以清楚地知道他們在哪兒，他們從哪里進(jìn)來并且知道如何返回。

　　類似的過渡動(dòng)畫出現(xiàn)在用戶選擇一個(gè)日期時(shí)：月份視圖從所選位置分開，將當(dāng)前的周日期推向屏幕頂端并翻轉(zhuǎn)出以小時(shí)為單位的當(dāng)天時(shí)間視圖。這些動(dòng)畫加強(qiáng)了日歷上年月日之間的關(guān)系的感知度。

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

　　幾乎所有的iOS 應(yīng)用都應(yīng)用了UIKit framework中定義的組件。了解這些組件的名字，作用和構(gòu)成能夠幫助你設(shè)計(jì)應(yīng)用過程中做出更好的決定。

　　UIKit提供的UI組件大致分成以下4種大類：

　　Bars ： 包含了導(dǎo)航信息，告訴用戶他們所在的位置并包含了一些能幫助用戶瀏覽或啟動(dòng)某些操作的控制按鈕。

　　內(nèi)容視圖： 包含了應(yīng)用的主體內(nèi)容以及某些操作行為，比如滾動(dòng)、插入、刪除、排序等等。

　　控制按鈕： 展示信息或者控制動(dòng)作。

　　臨時(shí)視圖： 短時(shí)間出現(xiàn)，給用戶重要信息或者額外的選擇或者其他功能。

　　除了定義UI組件，UIKit也定義對象實(shí)現(xiàn)的功能，例如手勢識(shí)別、繪圖、輔助功能和打印支持。

　　從編程的角度來說，UI組件被認(rèn)為是不同類別的視圖，因?yàn)樗麄儚腢IView得到繼承。視圖能繪制屏幕內(nèi)容并且知道用戶何時(shí)觸摸了屏幕。視圖的所有類型有：控件(比如按鈕和滑塊)，內(nèi)容視圖(比如集合視圖和表格視圖)，以及臨時(shí)視圖(如警告提示和動(dòng)作菜單)。

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

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

　　雖然開發(fā)者認(rèn)為真正起到作用的是視圖和視圖控制器，但一般用戶感知到的iOS應(yīng)用是不同屏幕內(nèi)容的集合。從這個(gè)角度來看，在應(yīng)用里，屏幕內(nèi)容一般對應(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ā)

　　人們通常想隨心所欲地使用自己喜歡的應(yīng)用程序。在iOS 8及未來的版本中，你可以使用不同分辨率和自動(dòng)布局來幫助你定義屏幕布局視圖，視圖控制器以及需要隨顯示環(huán)境改變的視圖(顯示環(huán)境display environment的概念指的是設(shè)備的整個(gè)屏幕或者其中一部分，比如一個(gè)跳出菜單區(qū)域或一個(gè)分視圖控制器的主視圖部分)。

　　iOS定義了兩個(gè)尺寸類別(size class)，常規(guī)的(regular)和壓縮的(compact)。常規(guī)尺寸有著較易拓展的空間，而壓縮尺寸約束了空間的使用。想要定義一種顯示環(huán)境，你需要定義橫縱尺寸類型。如你所想，iOS設(shè)備可以有橫屏豎屏兩種不同的使用模式。

　　iOS能隨著顯示環(huán)境和尺寸類別變化而自動(dòng)生成不同布局。舉個(gè)例子，當(dāng)垂直尺寸從壓縮變?yōu)槌Ｒ?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)容。

　　下面的實(shí)例可以幫助你理解尺寸類型是如何適配不同設(shè)備的顯示環(huán)境。例如：iPad在長寬和橫屏豎屏?xí)r都使用常規(guī)尺寸類型。換句話說，iPad顯示環(huán)境一直處于垂直和水平的常規(guī)狀態(tài)。

　　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)境提供良好體驗(yàn)

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

　　在所有環(huán)境下都保持對主體內(nèi)容的專注

　　這是最高優(yōu)先級。人們使用應(yīng)用時(shí)，與感興趣的內(nèi)容發(fā)生互動(dòng)。當(dāng)使用環(huán)境變化的同時(shí)，改變專注點(diǎn)會(huì)讓用戶感覺到迷失方向，喪失了對應(yīng)用的控制。

　　避免布局上不必要的變化

　　在所有環(huán)境中類似的使用體驗(yàn)讓人們在旋轉(zhuǎn)設(shè)備或在不同設(shè)備上運(yùn)行你的應(yīng)用時(shí)維持使用模式。例如，如果你使用一個(gè)網(wǎng)格在水平的常規(guī)模式下顯示圖像，你無需在一個(gè)列表中展示與壓縮模式下相同信息，雖然你可能調(diào)整了網(wǎng)格的尺寸。

　　如果你的應(yīng)用 只在一個(gè)方向上運(yùn)行，那么請直接一點(diǎn)

　　人們希望在各種握持方式下都可以使用你的應(yīng)用，能滿足這個(gè)期待是最好的。但是，如果你的應(yīng)用只在一個(gè)方向下運(yùn)行，那么以下幾點(diǎn)請務(wù)必注意：

　　避免提示人們旋轉(zhuǎn)設(shè)備的提示UI出現(xiàn)。讓應(yīng)用清晰地運(yùn)行在支持的方向下，讓用戶明白應(yīng)該旋轉(zhuǎn)設(shè)備，而不是添加不必要的引導(dǎo)性混亂。

　　支持同一個(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)不能對翻轉(zhuǎn)屏幕產(chǎn)生響應(yīng)。在這種情況下，你必須關(guān)聯(lián)兩個(gè)需要變化的方向，并且允許人們在這兩個(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)起來的。

　　提升重要內(nèi)容或功能，讓用戶容易集中注意在主要任務(wù)上

　　有幾個(gè)比較好的辦法是在屏幕上半部分放置主要內(nèi)容，以從左到右的習(xí)慣，從靠近左側(cè)的屏幕開始。

　　使用視覺化的重量和平衡向用戶展示相關(guān)的屏顯重要元素

　　大型控件吸引眼球，而比小的控件更容易在出現(xiàn)時(shí)被注意到。而且大型控件也更容易被用戶點(diǎn)擊，這讓它們在應(yīng)用中更加有用——就像電話和時(shí)鐘(上面的按鈕)——用戶經(jīng)常在容易分心的環(huán)境中能(正常)使用它們。

　　使用對齊來讓閱讀更舒緩，讓分組和層次之間更有秩序

　　對齊讓應(yīng)用看起來整潔而有序，也讓用戶在專注于屏幕時(shí)更有空間，從而專注于重要信息。不同信息組的縮進(jìn)與對齊讓它們之間的關(guān)聯(lián)更清晰，也讓用戶更容易找到某個(gè)控件。

　　確保用戶能明白處于默認(rèn)尺寸的首要內(nèi)容的含義

　　例如，用戶無需水平滾動(dòng)就能看到重要的文本，或不用放大就可以看到主體圖像。

　　準(zhǔn)備好改變字體大小

　　用戶期望大多數(shù)應(yīng)用能有設(shè)置字號大小的功能。為了適應(yīng)一些文本大小的變化，你也許需要調(diào)整布局;想要得到更多文本顯示相關(guān)的信息，你可以查閱章節(jié)Text Should Always Be Legible.

　　盡量避免UI 上不一致的表現(xiàn)

　　在一般情況下，有著相似功能的控件看起來也應(yīng)該類似。用戶常常認(rèn)為他們看到的不同總有原因，而且他們傾向于花時(shí)間去嘗試(譯者按：因此為了避免用戶做無用的嘗試所以建議類似功能外觀一樣)。

　　給每個(gè)互動(dòng)的元素充足的空間，從而讓用戶容易操作這些內(nèi)容和控件

　　常用的點(diǎn)按類控件的大小是44 x 44點(diǎn)(points)。