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

主題（Themes）

1. iOS設計主題

作為一個app設計師（其實我是一只產(chǎn)品狗），其實便意味著你將有機會去設計發(fā)布一款能夠位于App Store排行榜之首的驚世駭俗之產(chǎn)品。而為了達到這個高度，你的產(chǎn)品在質(zhì)量和功能上的高標準表現(xiàn)是必不可少的。（我理解的原文中app designer其實正是產(chǎn)品狗一職而非傳統(tǒng)意義上的UI設計師，正所謂成也蕭何敗也蕭何，固此文別稱《產(chǎn)品狗的iOS指南》也不枉為過）。

iOS平臺不同于其它平臺的三大基本原則：

• 清晰（Clarity）：縱觀整個iOS系統(tǒng)，清晰意味著，每種尺寸下的文本都應該是易讀的，所有圖標都應該是精確易懂的，每一個裝飾都應該是精心恰當?shù)?，而且應該本著功能?qū)動設計的原則。利用留白，顏色，字體，圖像以及其它界面元素來共同巧妙的突出重點內(nèi)容且表達其不同的可交互性。
• 遵從（Deference）：干凈美觀的界面和清晰流暢的動態(tài)效果有助于用戶去理解界面內(nèi)容并與之進行交互，從而避免給用戶帶來干擾。而如果當前的內(nèi)容占據(jù)了整個屏幕時，可以利用半透明以及模糊處理等方式來暗示用戶其更多內(nèi)容的存在。盡可能少的使用邊框，漸變以及陰影可以讓界面更輕，從而突出更多的內(nèi)容。
• 深度（Depth）：鮮明的視覺層級以及生動的動態(tài)效果可以對界面有更深層次的表達，賦予了界面活力也更有助于用戶去理解。易于發(fā)現(xiàn)且易于觸發(fā)的界面元素能夠提升用戶的體驗愉悅感，而用戶在成功觸發(fā)相應功能或獲得更多內(nèi)容的同時，也掌握了當前所在位置的由始至終（可以理解為PC端的面包屑）。因此當用戶在瀏覽內(nèi)容的同時，流暢的過渡其實便體現(xiàn)出了一種縱深感。

2. 設計原則

為了最大化產(chǎn)品的影響力及達到以上目標，以下的原則更是需要你在產(chǎn)品定義及設計時牢記于心的：

（1）美學完整性（Aesthetic Integrity）

美學完整性代表了一款應用的視覺表現(xiàn)和交互行為與其功能整合的優(yōu)良程度。例如：如果一款應用的目的是幫助用戶去完成一項非常重要的任務，那么我們就應該使用不易察覺且不會太引人注目的圖形，或使用一些標準化的控件以及可預知的交互行為來保持用戶的專注性。

反而言之，對于一款沉浸式體驗應用（如游戲），我們就需要利用更加吸引人的視覺表現(xiàn)，去鼓勵用戶深入探索的同時為其帶來無窮的樂趣和刺激。

（2）一致性（Consistency）

一致性代表了一款應用需要貫徹相同標準和規(guī)范的原則，使用系統(tǒng)提供的界面元素，風格統(tǒng)一的圖標，標準的字體樣式以及一致的措辭。同時應用所包含的特征和交互行為，應該是符合用戶心理預期的。

（3）直接操作性（Direct Manipulation）

直接對屏幕上的對象（而非通過一堆控件）進行交互，有助于用戶理解從而提升用戶的參與度。這里的直接操作指的是包括旋轉(zhuǎn)屏幕或手勢控制等操作，通過此類交互用戶的交互行為能夠得到及時可視的反饋。

（4）反饋性（Feedback）

反饋可以認證交互行為，呈現(xiàn)結果，通知用戶。iOS系統(tǒng)自帶的應該對用戶的每個行為都提供了明確的反饋，如：可交互的元素被點擊時的臨時高亮，進度指示器（進度條、緩沖條等）顯示任務需要進展的時間及當前的進度，聲音和動態(tài)效果則更是加強了對行為結果的提示。

（5）隱喻性（Metaphors）

當一款應用的虛擬對象和交互行為能夠與用戶所熟悉的體驗相似時（無論這種體驗是來源于現(xiàn)實生活亦或是數(shù)字世界），用戶就更夠更快的學會使用這款應用。

隱喻能夠在iOS中起到作用的原因是用戶可以與屏幕進行物理上的交互，如：用戶可以通過將視圖引出屏幕來顯示下方的內(nèi)容，通過拖拽（drag）、滑動（swipe）對象、撥動（toggle）開關、移動（move）滑塊、滾動（scroll）選擇器，甚至通過輕掃（flick）來翻閱書籍和雜志。

（4）用戶控制性（User Control）

在iOS內(nèi)部，應該是用戶（而非應用）在控制。應用可以對一系列的用戶行為提供建議，或?qū)赡茉斐傻膰乐睾蠊男袨榘l(fā)出警告，但絕不應該替用戶做決定。而好的應用，會在用戶主導和避免不想要的結果中找到平衡。

為了讓用戶感覺到是他們在控制應用，應該使用用戶熟悉且可預知的交互元素，讓用戶二次確定其有破壞性的行為，并且允許即使在運行中的操作也能夠被輕易取消。

基本界面元素（Interface Essentials）

大部分的iOS應用使用UIKit中的部件來定義一個基本的界面元素框架，而這個框架不僅讓各個應用在保持視覺上的一致的同時，也給予了其高度化的個性定制空間。

UIKit部件是靈活的、常見的，可配置性極高的，它能夠支持你去設計一個能夠在任何iOS設備中都表現(xiàn)出高水準的應用，而且能夠使其隨著系統(tǒng)發(fā)布新版本的同時而自動更新。

以下便是UIKit中三大基本界面元素：

（1）欄（Bars）

欄可以告知用戶其當前所在應用中的具體位置，提供導航，還有可能包含按鈕或其他可以用來觸發(fā)功能或交流的元素。

（2）視圖（Views）

視圖包含了用戶所最關注的內(nèi)容，如文本，動畫及一些交互元素。而視圖更是支持滾動，插入，刪除及排列等行為方式。

（3）控件（Controls）

控件用于觸發(fā)功能及傳遞信息，像按鈕、開關、輸入框、進度條等便是極典型的控件。

為了進一步的定義iOS界面，UIKit定義了你的應用所能用到的功能。通過這個框架，你的應用可以對觸屏上的手勢操作做出響應，還可以包含一些，例如：繪畫、輔助、打印等功能。

UIKit同其它部件框架一樣緊密相連，如：Apple Pay、HealthKit、ResearchKit等，來幫助你設計出一個強大的應用。

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

題圖作者提供