本文是iOS 12 人機(jī)交互指南系列篇的總結(jié)篇，一起來看看~

• 2018年6月5日，蘋果在美國圣何塞舉辦的2018蘋果全球開發(fā)者大會（WWDC2018）上，發(fā)布了iOS12系統(tǒng)。
• 2018年9月18日，蘋果正式向用戶推送iOS12正式版系統(tǒng)更新。
• 2018年10月31日，iOS12界面交互設(shè)計(jì)規(guī)范指南（英文記iOS Human Interface Guidelines）翻譯完成。

iOS界面交互設(shè)計(jì)規(guī)范指南，整體按主題共劃分為10個(gè)章節(jié)，每個(gè)章節(jié)下又細(xì)分不同小節(jié)；不同章節(jié)側(cè)重點(diǎn)自然是迥異，斯認(rèn)為所面向讀者身份也有偏重。

如：第二章所描述的APP整體架構(gòu)，產(chǎn)品經(jīng)理便可做深入研究；而第三章的交互模塊，當(dāng)屬交互設(shè)計(jì)師領(lǐng)域范疇；第五章的視覺設(shè)計(jì)及第六章的圖標(biāo)圖像，則非常標(biāo)準(zhǔn)化的闡述了像素級的設(shè)計(jì)規(guī)則，UI設(shè)計(jì)師可奉為圭臬。

以下一一道來：

第一章：主題與基本界面元素

蘋果官方直接以iOS命名，用兩篇文章為iOS整體設(shè)計(jì)風(fēng)格及設(shè)計(jì)原則定下了基調(diào)。其中主題一文，可概括為三大設(shè)計(jì)原則和六大基本特性。

三大設(shè)計(jì)原則有：清晰、遵從和深度。

• 所謂清晰，意味著所有表現(xiàn)層面的文本、圖標(biāo)、圖像等均是清晰易懂的，且應(yīng)該是本著功能驅(qū)動設(shè)計(jì)的原則，最終能達(dá)到可以巧妙的突出重點(diǎn)內(nèi)容且表達(dá)其不同的可交互性。
• 而遵從，更強(qiáng)調(diào)的是通過干凈美觀的界面和清晰流暢的動態(tài)效果，去幫助用戶更好的理解界面內(nèi)容并與之進(jìn)行交互。
• 最后所謂的深度，其實(shí)想表達(dá)的一方面是單頁面中視覺層面的層級，另一方面則是整體應(yīng)用不同頁面間的交互層面上的層級。

相較于三大設(shè)計(jì)原則，六大基本特性則更具像化。文中分別從美學(xué)完整性、直接操作性、隱喻性、一致性、反饋性和用戶控制性進(jìn)行了描述。

• 其中美學(xué)完整性，代表了一款應(yīng)用的視覺表現(xiàn)和交互行為與其功能整合的優(yōu)良程度，如：功能性應(yīng)用比較適合通過標(biāo)準(zhǔn)化的控件和可預(yù)知的交互行為，來保持用戶的專注性；而反之，游戲類應(yīng)用則需要利用更加吸引人的視覺表現(xiàn)，來鼓勵用戶深入探索的同時(shí)，為其帶來無窮的樂趣和刺激。
• 直接操作性，以微信搖一搖為例，講述了通過包括旋轉(zhuǎn)屏幕或手勢控制等方式直接對屏幕上的對象進(jìn)行交互，會更有助于用戶理解從而提升用戶的參與度。
• 隱喻性，以控制開關(guān)為例，通過隱喻用戶在現(xiàn)實(shí)中的交互方式，能夠使用戶更快的學(xué)會使用應(yīng)用。
• 一致性更為容易理解，一致的界面元素，風(fēng)格統(tǒng)一的圖標(biāo)，標(biāo)準(zhǔn)的字體樣式級一致的文字描述。
• 反饋性，拿進(jìn)度條為例，旨在表明應(yīng)用應(yīng)該對用戶的每個(gè)交互行為都提供明確的反饋。
• 最后用戶控制性，也是蘋果比較注重的，其實(shí)側(cè)面體現(xiàn)了蘋果對于用戶的尊重，一定不能剝奪用戶的控制權(quán)，但可以通過建議或警告的方式對用戶進(jìn)行引導(dǎo)。

相較于上篇文章，基本界面元素一文則要簡單具體許多，三大基本的界面元素，構(gòu)成了一個(gè)應(yīng)用表現(xiàn)層面的所有。

欄、導(dǎo)航欄、搜索欄、狀態(tài)欄、標(biāo)簽欄、工具欄，第七章有分別的詳細(xì)描述；視圖、警告框、圖像、頁面等等均為視圖，第八章詳細(xì)記載；控件、按鈕、進(jìn)度條、篩選框等等即為控件，詳見下文第九章節(jié)。

以上，算是比較詳細(xì)的對第一章節(jié)進(jìn)行了介紹，推薦包括產(chǎn)品經(jīng)理，交互設(shè)計(jì)師，UI設(shè)計(jì)師甚至是iOS開發(fā)工程師在內(nèi)的人員均能牢記在心。

第二章：APP結(jié)構(gòu)

有輔助功能，加載，特殊情境狀態(tài)，導(dǎo)航，應(yīng)用啟動，請求許可及設(shè)置七篇文章；整體主要講述了APP整體性結(jié)構(gòu)功能，如清晰明確告訴用戶當(dāng)前所處應(yīng)用位置的導(dǎo)航，應(yīng)用首次啟動的啟動體驗(yàn)，輕松有趣的加載狀態(tài)，應(yīng)用權(quán)限的請求許可，甚至是針對殘障人士的輔助性功能。

第三章：交互

內(nèi)容章節(jié)比較多，共有3D觸摸、音頻、身份認(rèn)證、數(shù)據(jù)輸入、拖拽、反饋、文件處理、手勢操作、近場通信及撤銷重做。建議此部分可以有目的性的側(cè)重摘選相關(guān)章節(jié)進(jìn)行閱讀，如：拖拽、反饋、數(shù)據(jù)輸入等比較常用，剩余部分可通讀后于后期有具體需求時(shí)再做翻閱即可。

第四章：系統(tǒng)功能

顧名思義偏重講述的即為系統(tǒng)功能，共計(jì)有虛擬現(xiàn)實(shí)、多任務(wù)、通知、打印、快速查看、評分評論、截屏、電視八個(gè)章節(jié)，推薦只需關(guān)注通知及評分評論兩個(gè)章節(jié)即可。

第五章：視覺設(shè)計(jì)

強(qiáng)烈建議UI設(shè)計(jì)師熟讀爛記，七篇文章，從頁面適配及布局、動畫、品宣、顏色、術(shù)語、字體到視頻。均非常具體的在視覺設(shè)計(jì)層面進(jìn)行了詳細(xì)的描述，其中更是有像素級別的明確設(shè)計(jì)規(guī)范。另外值得一提的是第一個(gè)頁面適配及布局小節(jié)，建議iOS開發(fā)工程師也可做閱讀，一定會有所收獲。

第六章：圖像圖標(biāo)

整個(gè)章節(jié)分別從圖像大小和分辨率、應(yīng)用圖標(biāo)、自定義圖標(biāo)、啟動頁以及系統(tǒng)圖標(biāo)五篇文章，詳細(xì)具體的闡述了整個(gè)設(shè)計(jì)規(guī)范中圖標(biāo)圖像等像素級別的設(shè)計(jì)要求。而值得注意的是，蘋果官方將啟動頁一文也放置于此章節(jié)中，并且著重對作為應(yīng)用剛開始啟動至首屏間承載過渡功能的啟動頁進(jìn)行了說明。

說到此處，有必要統(tǒng)一下叫法，目前行業(yè)內(nèi)比較通用的幾個(gè)頁面有引導(dǎo)頁、啟動頁以及廣告頁。

• 首先所謂引導(dǎo)頁，是指在應(yīng)用首次被安裝打開后，用以對應(yīng)用進(jìn)行介紹以及對用戶進(jìn)行引導(dǎo)的一系列頁面，頁面數(shù)量2到5頁不等，僅出現(xiàn)一次。
• 而啟動頁，是指應(yīng)用沒次啟動時(shí)，自開始啟動至屏幕首頁顯示時(shí)的過渡頁面，蘋果對于此頁面的定義更傾向于過渡性質(zhì)的頁面。
• 而行業(yè)內(nèi)所謂的廣告頁，則賦予了啟動頁另一個(gè)身份?？偟膩砜矗瑥V告頁即為啟動頁，區(qū)別只在于廣告頁承載了啟動頁所不具備的廣告而告之的特性。

第七章：欄

應(yīng)用三大基本界面元素之一，對于欄的統(tǒng)一定義值得明確提出，導(dǎo)航欄、搜索欄、狀態(tài)欄、標(biāo)簽欄、工具欄；此為蘋果官方所定義的五大欄的概念。而行業(yè)內(nèi)除去此五類所述欄的概念，均為憑自身理解所引入的概念，建議以上述蘋果官方定義為準(zhǔn)。

• 其中導(dǎo)航欄，一定是位于屏幕上方，狀態(tài)欄之下的，其主要作用在于實(shí)現(xiàn)一系列有層級的應(yīng)用頁面間的導(dǎo)航。
• 搜索欄，僅應(yīng)用于系統(tǒng)內(nèi)搜索之用。
• 狀態(tài)欄，出現(xiàn)在屏幕最頂端，可供發(fā)揮的空間不大。
• 標(biāo)簽欄，屬最常用的位于屏幕下方的用以劃分應(yīng)用模塊以及提供應(yīng)用在不同部分間快速切換的途徑。
• 工具欄，同樣處于屏幕底部，但區(qū)別于操作欄的是，工具欄僅用于對當(dāng)前視圖的操作提供相應(yīng)的入口。

第八章：視圖

應(yīng)用三大基本界面元素之一，也是所承載內(nèi)容最多的元素，基本可以理解為應(yīng)用所有表現(xiàn)層面的內(nèi)容均以不同形式的視圖加以呈現(xiàn)。視圖章節(jié)內(nèi)容豐富，共計(jì)包含功能表單、活動視圖、警告框、集合、圖像視圖、地圖視圖、頁面、浮層、滾動視圖、分列視圖、表格視圖、文本視圖以及網(wǎng)頁視圖在內(nèi)的十三個(gè)視圖。

各篇文章分別以不同形式的視圖，闡述了對于不同類型內(nèi)容所應(yīng)使用的適合的視圖，以及具體的使用方式和事項(xiàng)。此處建議包括產(chǎn)品經(jīng)理，甚至是iOS開發(fā)工程師在內(nèi)的各相關(guān)角色人員，均能細(xì)細(xì)品味。

第九章：控件

三大基本界面元素的最后一個(gè)，可以理解為控件是構(gòu)成應(yīng)用的各種細(xì)小零部件。如按鈕、編輯菜單、標(biāo)簽、頁面控件、篩選框、進(jìn)度指示器。刷新控件、分段控件、滑動條、調(diào)數(shù)器、開關(guān)、文本輸入框；文章囊括了所有應(yīng)用程序設(shè)計(jì)，以及開發(fā)的過程中所應(yīng)用到的控件。

整體文章可從兩個(gè)層面理解：

• 一個(gè)層面當(dāng)屬如何使用適合的控件去表述適合的內(nèi)容；
• 另一個(gè)層面為如何正確標(biāo)準(zhǔn)的使用具體的控件體現(xiàn)對應(yīng)的內(nèi)容。

第十章：擴(kuò)展功能

相較于前九章，第十章更多的講述的是整體iOS系統(tǒng)層面不同應(yīng)用間的交互及擴(kuò)展。應(yīng)用程度較低，可做簡要查看。

以上，便是iOS12交互設(shè)計(jì)規(guī)范的全部內(nèi)容；本不是細(xì)膩之人，也非設(shè)計(jì)師之行列。權(quán)當(dāng)拋磚引玉，歡迎反饋交流。

最后以個(gè)人產(chǎn)品生涯奉之圭臬的一句話結(jié)束此文，我心有猛虎，細(xì)嗅薔薇。