要想發(fā)布一款能夠位于App Store排行榜之首的產(chǎn)品，產(chǎn)品在質(zhì)量和功能上的高標(biāo)準(zhǔn)表現(xiàn)是必不可少的，而為了達(dá)到這種高度，我們應(yīng)該如何做呢？本文主要講述的是 iOS 12 界面交互設(shè)計(jì)指南中的視圖部分，一起來看看~

一、功能表單

功能表單是響應(yīng)于控件或動作而出現(xiàn)的一種特定的警報(bào)樣式，其提供一組與當(dāng)前上下文相關(guān)的兩個(gè)或多個(gè)選擇。使用功能表單讓人們開始一個(gè)任務(wù)，或者用戶在進(jìn)行潛在破壞性操作之前請求確認(rèn)。在較小的屏幕上，功能表單從屏幕底部滑出。在更大的屏幕上，一個(gè)功能表單一般都以彈出的形式立即出現(xiàn)。

如果能夠增加功能表單的清晰度那么可以提供一個(gè)取消按鈕，當(dāng)用戶準(zhǔn)備放棄一個(gè)任務(wù)時(shí)取消按鈕可以增加用戶的操作信息，取消按鈕應(yīng)該總是包含在屏幕底部的功能表單中。

將有破壞性的選項(xiàng)進(jìn)行突出，使用紅色按鈕執(zhí)行破壞性或危險(xiǎn)的動作，并在動作表的頂部顯示這些按鈕。

避免在功能表單中啟用滾動展示。如果功能表單有太多選項(xiàng)，用戶必須進(jìn)行滾動以查看所有選項(xiàng)。但滾動需要額外的時(shí)間來作出選擇，而且很難做到不經(jīng)意間點(diǎn)擊按鈕。

二、活動視圖

活動視圖在當(dāng)前上下文中，活動便是一項(xiàng)任務(wù)，如復(fù)制、收藏或查找。一旦啟動，活動可以立即執(zhí)行任務(wù)，或在繼續(xù)之前請求更多信息?；顒佑苫顒右晥D管理，它表現(xiàn)為一個(gè)圖標(biāo)或彈出視圖，具體則取決于當(dāng)前設(shè)備和當(dāng)前定位?；顒颖挥脕硖峁┙o用戶去操作應(yīng)用執(zhí)行一些自定義的服務(wù)或任務(wù)。

系統(tǒng)提供了大量的內(nèi)置活動，包括打印、推特、消息和播放等，這些任務(wù)總是出現(xiàn)在活動視圖第一列且不能被重新排序，您不需要再創(chuàng)建自定義活動來執(zhí)行這些內(nèi)置任務(wù)，活動視圖還可以顯示來自其他應(yīng)用程序的共享和擴(kuò)展的動作等。

（1）設(shè)計(jì)簡單的模板圖像來展示定制化活動

模板圖像使用mask來創(chuàng)建圖標(biāo)，使用黑色和白色與適當(dāng)?shù)耐该鞫群涂逛忼X性，但不包括陰影，模板圖像應(yīng)集中在約70px×70px的面積中。

（2）使用簡單的活動標(biāo)題來描述你的任務(wù)

標(biāo)題顯示在活動視圖的圖標(biāo)下面，短標(biāo)題最好。當(dāng)一個(gè)標(biāo)題太長，iOS會先縮小文本，然后如果標(biāo)題還是太長則直接截?cái)嗨?。一般來說，應(yīng)該避免在標(biāo)題中包含您的公司或產(chǎn)品名稱。

（3）確保活動適合當(dāng)前上下文

雖然系統(tǒng)提供的任務(wù)不能被重排序，可如果他們不適用于你的應(yīng)用程序你可以對其進(jìn)行屏蔽。例如：為了防止人們打印圖像，可以屏蔽打印活動，您還可以定義在給定的時(shí)間內(nèi)顯示哪些自定義任務(wù)。

（4）使用功能按鈕顯示活動視圖

當(dāng)人們點(diǎn)擊功能按鈕時(shí)，人們習(xí)慣于訪問系統(tǒng)提供的活動，所以需要避免提供一個(gè)替代的方法來做同樣的事情。

三、警告框

警告主要用來傳遞應(yīng)用程序或設(shè)備狀態(tài)相關(guān)的重要信息，并經(jīng)常請求反饋。警告由標(biāo)題、可選消息、一個(gè)或多個(gè)按鈕和可選的文本字段組成，用于收集用戶的信息輸入。除了這些可配置元素之外，警告框的可視化外觀是固定的，不能自定義。

（1）減少警告框的使用

警告框會破壞用戶體驗(yàn)，其應(yīng)該只在重要的情況下使用，如確認(rèn)購買可能會產(chǎn)生破壞性行為的操作（如：刪除），或通知人們有關(guān)問題。警告框比較少的出現(xiàn)頻率有助于確保人們認(rèn)真對待他們，所以確保每個(gè)警告都是在提供關(guān)鍵的信息和進(jìn)行有用的選擇。

（2）在兩個(gè)方向都要測試警告框的外觀

一個(gè)警告框可能會在橫屏和豎屏情況下顯示有所不同，優(yōu)化警告文本，使其在任何方向都可以很容易閱讀，而且無需滾動。

警告標(biāo)題和信息

（1）盡可能寫一些短小的、描述性比較強(qiáng)的多文本警告標(biāo)題

屏幕上需要閱讀的文字應(yīng)該越少越好，可以嘗試編寫一個(gè)標(biāo)題并且避免添加額外的信息。因?yàn)閱巫謽?biāo)題很少會提供有用的信息，所以可以考慮以問問題或使用短句的方式，盡可能的將標(biāo)題保留在同一行上。通過大小寫及標(biāo)點(diǎn)符號來共同完成文本語句，而且需要注意不要在句子中間使用結(jié)束標(biāo)點(diǎn)符號。

（2）如果你必須提供信息，盡可能寫簡短完整的句子

盡量保持消息足夠短，盡量保持在一兩行之內(nèi)避免滾動，注意語句大小寫及標(biāo)點(diǎn)符號。

（3）避免使用帶有指責(zé)、批判、或侮辱性的詞語

人們知道警告會告訴他們問題的緊急和危險(xiǎn)情況，所以依然要使用友好的語氣，因?yàn)橹苯诱娴膽B(tài)度要比消極負(fù)面的態(tài)度有效果的多。避免使用代詞，如你，你，我，和我的等，它有時(shí)會比較容易被誤解為侮辱或不尊重。

（4）避免去解釋警告按鈕的作用

如果的的警告文本和按鈕標(biāo)題是明確的，那么就不需要去解釋按鈕是做什么的。除非在極少的情況下，必須提供指導(dǎo)，那么可以使用“點(diǎn)擊”這個(gè)詞，在引用按鈕時(shí)保持大寫，不要在引號中包含按鈕標(biāo)題。

警告按鈕

（1）使用雙警告按鈕

雙警告按鈕給予了用戶一個(gè)比較容易的雙選項(xiàng)選擇方式，單按鈕通常只是給予信息，但對于當(dāng)前情況的掌握程度比較低。而三個(gè)或四個(gè)以上的按鈕會造成選擇的復(fù)雜性且有可能會導(dǎo)致滾屏，是一種非常不友好的用戶體驗(yàn)。如果你發(fā)現(xiàn)你可能需要使用超過兩個(gè)選項(xiàng)，可以考慮使用活動圖表的形式。

（2）給予警告按鈕簡明合適的標(biāo)題

比較好的標(biāo)題應(yīng)該包含一個(gè)到兩個(gè)詞語，用以描述點(diǎn)擊選擇此按鈕的結(jié)果。對于所有的按鈕標(biāo)題，使用標(biāo)題樣式的文字且不需要標(biāo)點(diǎn)符號。盡可能的使用與警告標(biāo)題以及內(nèi)容直接相關(guān)的動詞以及動詞短語，例如：查看全部，回復(fù)或者忽略。使用好的（OK）來進(jìn)行簡單的秒殺，避免使用是（Yes）和不是（No）。

（3）將按鈕放置于用戶所期望其出現(xiàn)的地方

一般來說，用戶最喜歡點(diǎn)擊的地方應(yīng)該在右側(cè)，所以取消按鈕經(jīng)常放置在左側(cè)。

（4）準(zhǔn)確合適的標(biāo)識取消按鈕

一個(gè)警告的取消按鈕應(yīng)該一直被標(biāo)識為取消。

（5）定義破壞性按鈕

如果一個(gè)按鈕的操作會引起破壞性的結(jié)果，如刪除內(nèi)容，那么應(yīng)該設(shè)置該按鈕為破壞性這樣以便于系統(tǒng)為其設(shè)置特殊的格式。另外，提供一個(gè)取消按鈕這樣用戶可以安全的退出這種破壞性操作，通過加粗取消按鈕的方式來設(shè)置其為默認(rèn)按鈕。

（6）允許用戶使用Home鍵取消警告框

提供通過使用Home鍵的方式退出警告的方式，其效果應(yīng)該同點(diǎn)擊取消按鈕的效果一樣，即警告框應(yīng)該在不進(jìn)行任何操作行為的前提下消失。所以如果你的警告框不存在取消按鈕，可以考慮在代碼中加入Home鍵代替取消按鈕的邏輯。

四、集合

一個(gè)集合主要用來管理一系列有序的內(nèi)容集，如一組照片，并以可定制和高度可視化的布局呈現(xiàn)它。因?yàn)榧蠜]有強(qiáng)制執(zhí)行嚴(yán)格的線性格式，所以它特別適合顯示大小不同的項(xiàng)。

一般來說，集合非常適合顯示基于圖像的內(nèi)容，背景和其他裝飾性視圖可以選擇性地呈現(xiàn)，用以直觀地區(qū)分項(xiàng)目的子集。

集合支持交互性和動畫。默認(rèn)情況下，您可以點(diǎn)擊進(jìn)行選擇、觸摸和按住進(jìn)行編輯，滑動進(jìn)行滾動。如果應(yīng)用程序需要它，可以添加更多的手勢來執(zhí)行自定義操作。在一個(gè)集合內(nèi)，動畫可以在條目被插入，刪除或重新排序時(shí)呈現(xiàn)，并且自定義動畫也是被支持的。

（1）在標(biāo)準(zhǔn)行或網(wǎng)格布局足夠使用時(shí)，避免去創(chuàng)建一個(gè)新的設(shè)計(jì)方式

集合應(yīng)該增強(qiáng)用戶體驗(yàn)，而不應(yīng)該成為被關(guān)注的中心。集合應(yīng)該更便于用戶去選擇項(xiàng)目，因?yàn)槿绻愫茈y在你的集合中去找到一個(gè)條目時(shí)，用戶會在得到其想要的內(nèi)容之前便會感到沮喪并且失去興趣。在實(shí)際內(nèi)容周圍使用適當(dāng)?shù)奶畛?，以保持布局整齊并防止內(nèi)容重疊。

（2）考慮使用表而不是集合來展示文本信息

在一個(gè)可滾動列表中去顯示文本信息，通常是最簡單和有效的。

（3）小心的進(jìn)行動態(tài)布局變更

集合的布局可以隨時(shí)更改。如果應(yīng)用動態(tài)地更改布局，而此時(shí)用戶正在進(jìn)行查看且與之交互，那么請確保應(yīng)用的布局更改是有意義的，并且是很容易跟蹤的。無意的布局變化，可能會使你的應(yīng)用程序看起來不可預(yù)測和難以使用。如果由于布局的改變而丟失了上下文，用戶便可能會覺得應(yīng)用不在受其控制了。

五、圖像視圖

圖像視圖主要為用來在透明或不透明的背景下，顯示單個(gè)圖像或動態(tài)圖像。在圖像視圖中，圖像可以被拉伸、縮放、調(diào)整大小或固定到特定位置。圖像視圖是一種默認(rèn)的，且非交互式的視圖呈現(xiàn)方式。

如果可能的話，確保動態(tài)圖像序列中的所有圖像大小都是一致的。

理想情況下，圖像應(yīng)該做到預(yù)調(diào)節(jié)以適應(yīng)視圖的顯示從而使系統(tǒng)不需要做任何的縮放。因?yàn)槿绻到y(tǒng)必須要執(zhí)行縮放操作，那么一定是當(dāng)所有圖像的大小和形狀都相同時(shí)，才最容易達(dá)到期望一致的結(jié)果。

六、地圖視圖

地圖視圖允許你在應(yīng)用內(nèi)顯示地理信息，且可以支持系統(tǒng)自帶地圖應(yīng)用所提供的大部分功能。一個(gè)地圖視圖可以被設(shè)置去顯示一個(gè)標(biāo)準(zhǔn)的地圖或衛(wèi)星圖像，或者二者兼?zhèn)?。它可以包含位置指針以及覆蓋面積，且可以支持放大及縮小。如果你的應(yīng)用支持導(dǎo)航，例如：一個(gè)導(dǎo)航應(yīng)用，那么你完全可以使用地圖視圖去顯示航向。

一般來說，保持地圖的交互屬性。用戶會很習(xí)慣的去使用手勢操作與地圖進(jìn)行交互，而且會期望可以使用類型的操作形式進(jìn)行交互。

使用標(biāo)準(zhǔn)的位置指針顏色。一個(gè)位置指針定義了你的地圖中一個(gè)點(diǎn)的意義，用戶對于地圖中標(biāo)準(zhǔn)的位置指針顏色已經(jīng)很熟悉了。所以應(yīng)該避免使用同標(biāo)準(zhǔn)位置指針顏色不同的顏色。一般來講，紅色代表終點(diǎn)，綠色代表起點(diǎn)，粉色則代表用戶當(dāng)前具體位置。

七、頁面視圖

頁面視圖控制器提供了一種可以在內(nèi)容頁之間實(shí)現(xiàn)線性導(dǎo)航的方法，例如在文檔、書籍、記事本或日歷中。一個(gè)頁面視圖控制器可以使用兩種樣式中的任意一種，來管理導(dǎo)航滾動或卷頁期間頁面之間的轉(zhuǎn)換。一個(gè)滾動的過渡沒有特定的外觀，而只是流暢的將頁面從一個(gè)滾動到下一個(gè)。而頁卷轉(zhuǎn)換效果則使頁面在瀏覽屏幕時(shí)進(jìn)行卷曲以期達(dá)到物理中的翻書效果。

如果合適的話，盡可能實(shí)現(xiàn)一種非線性導(dǎo)航的方法。當(dāng)一個(gè)頁面視圖控制器在使用時(shí)，頁面只能順序跳轉(zhuǎn)而不能在非相鄰頁面之間直接進(jìn)行跳轉(zhuǎn)。如果用戶可能需要在應(yīng)用程序中訪問頁面視圖外的其它頁面，那么可以通過使用此功能提供的自定義控件來進(jìn)行實(shí)現(xiàn)。

八、浮層

浮層通常是當(dāng)用戶點(diǎn)擊屏幕上某個(gè)內(nèi)容的控制點(diǎn)或區(qū)域時(shí)，在其上方出現(xiàn)的瞬態(tài)視圖。通常，一個(gè)浮層包括一個(gè)指向其所出現(xiàn)的位置，浮層分為模態(tài)和非模態(tài)。一個(gè)非模態(tài)浮層主要通過點(diǎn)擊屏幕上其它非浮層區(qū)域進(jìn)行返回，模態(tài)浮層則是通過點(diǎn)擊浮層中的取消或其它按鈕進(jìn)行返回。

浮層比較適合出現(xiàn)在大屏幕中，其可以包含各種元素，包括導(dǎo)航欄、工具欄、標(biāo)簽欄、表、收藏、圖片、地圖和自定義視圖等。當(dāng)浮層是可見狀態(tài)時(shí)，其它視圖中的交互行為便會被禁止。使用浮層所顯示的內(nèi)容要與當(dāng)前頁面中的內(nèi)容關(guān)聯(lián)，例如：許多iPad應(yīng)用程序，當(dāng)你點(diǎn)擊分享按鈕時(shí)便會彈出一個(gè)分享浮層。

（1）避免在iPhone中使用浮層

一般來說，浮出層應(yīng)該在iPad應(yīng)用程序中使用，在iPhone的應(yīng)用程序，一般會利用當(dāng)前屏幕中所有可用的空間以一個(gè)全屏模態(tài)視圖來呈現(xiàn)信息，而不是在一個(gè)浮層中。有關(guān)指導(dǎo)，請參見模態(tài)。

（2）使用關(guān)閉按鈕進(jìn)行確認(rèn)和指導(dǎo)

一個(gè)關(guān)閉按鈕，如取消或完成，如果其意義都是明確的，即使其即可能包含保持也可能不包含保存但都值得被保留。在一般情況下，當(dāng)其沒有在存在的必要時(shí)浮層應(yīng)該被自動關(guān)閉。在大多數(shù)情況下，浮層應(yīng)該在用戶點(diǎn)擊關(guān)閉或浮層外的其它區(qū)域時(shí)進(jìn)行關(guān)閉。如果可以有多個(gè)選擇，浮層應(yīng)該保持打開狀態(tài)直到有人有意識的對其進(jìn)行關(guān)閉。

（3）總是在浮層自動關(guān)閉時(shí)進(jìn)行當(dāng)前任務(wù)的保存

通過點(diǎn)擊屏幕中非浮層區(qū)域去關(guān)閉一個(gè)非模態(tài)浮層是很容易的，僅在用戶明確的點(diǎn)擊取消時(shí)才取消當(dāng)前工作的保存。

（4）浮層應(yīng)該顯示在適當(dāng)?shù)奈恢蒙?/strong>