本文是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ò)干凈美觀(guān)的界面和清晰流暢的動(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)的人員均能牢記在心。

文章詳細(xì)點(diǎn)擊查看《iOS 12 人機(jī)交互指南（一）：主題與基本界面元素》。

第二章：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ì)殘障人士的輔助性功能。

文章詳細(xì)點(diǎn)擊查看《iOS 12 人機(jī)交互指南（二）：App架構(gòu)（Accessibility）》。

第三章：交互

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

文章詳細(xì)點(diǎn)擊《iOS 12 人機(jī)交互指南（三）：交互（User Interaction）》。

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

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

文章詳細(xì)點(diǎn)擊《iOS 12 人機(jī)交互指南（四）：系統(tǒng)功能（System Capabilities）》。

第五章：視覺(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ì)有所收獲。

文章詳細(xì)點(diǎn)擊《iOS 12 人機(jī)交互指南（五）：視覺(jué)設(shè)計(jì)（Visual Design）》。

第六章：圖像圖標(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è)所不具備的廣告而告之的特性。

文章詳細(xì)點(diǎn)擊《iOS 12 人機(jī)交互指南（六）：圖標(biāo)圖像（Icons and Images）》。

第七章：欄

應(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)的入口。

文章詳細(xì)請(qǐng)點(diǎn)擊《iOS 12 人機(jī)交互指南（七）：欄（Bars）》。

第八章：視圖

應(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ì)品味。

文章詳細(xì)點(diǎn)擊《iOS 12 人機(jī)交互指南（八）：視圖（Views）》。

第九章：控件

三大基本界面元素的最后一個(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)容。

文章詳細(xì)點(diǎn)擊《iOS 12 人機(jī)交互指南（九）：控件（Controls）》。

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

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

文章詳細(xì)點(diǎn)擊《iOS 12 人機(jī)交互指南（十）：擴(kuò)展功能（Extensions）》。

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

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

相關(guān)閱讀

iOS 12 人機(jī)交互指南（一）：主題與基本界面元素

iOS 12 人機(jī)交互指南（二）：App架構(gòu)（Accessibility）

iOS 12 人機(jī)交互指南（三）：交互（User Interaction）

iOS 12 人機(jī)交互指南（四）：系統(tǒng)功能（System Capabilities）

iOS 12 人機(jī)交互指南（五）：視覺(jué)設(shè)計(jì)（Visual Design）

iOS 12 人機(jī)交互指南（六）：圖標(biāo)圖像（Icons and Images）

iOS 12 人機(jī)交互指南（七）：欄（Bars）

iOS 12 人機(jī)交互指南（八）：視圖（Views）

iOS 12 人機(jī)交互指南（九）：控件（Controls）

iOS 12 人機(jī)交互指南（十）：擴(kuò)展功能（Extensions）

本文由 @沸騰 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)源于網(wǎng)絡(luò)