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

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

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

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

以下一一道來：

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

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

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

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

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

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

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

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

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

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

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

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

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

第三章：交互

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

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

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

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

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

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

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

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

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

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

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

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

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

第七章：欄

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

• 其中導(dǎo)航欄，一定是位于屏幕上方，狀態(tài)欄之下的，其主要作用在于實現(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)的入口。

文章詳細(xì)請點擊《iOS 12 人機交互指南（七）：欄（Bars）》。

第八章：視圖

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

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

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

第九章：控件

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

整體文章可從兩個層面理解：

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

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

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

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

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

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

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

相關(guān)閱讀

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

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

iOS 12 人機交互指南（三）：交互（User Interaction）

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

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

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

iOS 12 人機交互指南（七）：欄（Bars）

iOS 12 人機交互指南（八）：視圖（Views）

iOS 12 人機交互指南（九）：控件（Controls）

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

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

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