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

• 2018年6月5日，蘋(píng)果在美國(guó)圣何塞舉辦的2018蘋(píng)果全球開(kāi)發(fā)者大會(huì)（WWDC2018）上，發(fā)布了iOS12系統(tǒng)。
• 2018年9月18日，蘋(píng)果正式向用戶(hù)推送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)域范疇；第五章的視覺(jué)設(shè)計(jì)及第六章的圖標(biāo)圖像，則非常標(biāo)準(zhǔn)化的闡述了像素級(jí)的設(shè)計(jì)規(guī)則，UI設(shè)計(jì)師可奉為圭臬。

以下一一道來(lái)：

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

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

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

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

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

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

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

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

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

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

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

第三章：交互

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

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

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

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

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

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

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

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

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

第七章：欄

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

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

第八章：視圖

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

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

第九章：控件

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

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

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

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

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

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

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