IOS 人機互動指南

IOS 人機介面互動指南

UI設計基礎
1.1design for IOS
1.1.1 設計跟隨內容 (Defer to Content)
充分利用整個螢幕
重新考慮(儘量減少)擬物化設計的使用
用半透明UI元素樣式來暗示背後的內容
1.1.2保證清晰(Provide Clarity)
讓顏色簡化UI
通過使用系統字型確保易讀性
使用大量留白
使用無邊框的按鈕
1.1.3 用深度層次來進行交流(Use Depth to Communicate)
三大原則: 
1>遵從(Deference):UI應該有助於使用者更好地理解內容並與之互動,並且不會分散使用者對內容本身的注意力。
2>清晰(Clarity):各種尺寸的文字清晰易讀;圖示應該精確醒目,去除多餘的修飾,突出重點,以功能驅動設計。
3>深度(Depth):視覺的層次感和生動的互動動畫會賦予UI新的活力,有助於使用者更好地理解並讓使用者在使用過程中感到愉悅。
1.2 iOS應用解析(iOS App Anatomy)
幾乎所有的iOS應用都應用了UIKit framework中定義的元件。瞭解這些基本元件的名稱、作用和功能可以幫助你在應用的介面設計過程中做出更好的決策。UIKit提供的UI元件可以大致分為以下4種型別:
1.欄(Bars):包含了上下文資訊來指引使用者他們所在的位置,以及控制元件來幫助使用者導航或執行操作。
2.內容檢視(Content Views):包含了應用的具體內容以及某些操作行為,比如滾動、插入、刪除、排序等等。
3.控制元件(Controls):用於執行操作或展示資訊。
4.臨時檢視(Temporary Views):短暫出現給予使用者重要資訊或提供更多的選擇和功能。

1.3 適應性和佈局(Adaptivity and Layout)

1.3.1 為自適應而開發(Build In Adaptivity)
1.3.2 在不同環境提供良好體驗(Provide a Great Experience in Each Environment)
在所有環境下都保持對主體內容的專注。
避免佈局上不必要的變化。
如果你的應用只在一個方向上執行,那麼請直接一點。
1.3.3 使用佈局來溝通(Use Layout to Communicate)
強調重要內容或功能,讓使用者容易集中注意在主要任務上
使用不同的視覺化重量和平衡來告訴使用者當前屏顯元素的主次關係
使用對齊來讓閱讀更舒緩,讓分組和層次之間更有秩序
確保使用者在內容處於預設尺寸時便可清楚明白它的主要內容與含義。
準備好改變字型大小。
儘量避免UI上不一致的表現
給每個互動的元素充足的空間
1.4 啟動與停止(Starting and Stopping)
1.4.1 即時啟動(Start Instantly)
儘可能地,避免讓使用者做過多設定
聚焦在80%目標使用者的需求上
儘可能用其他方式獲取更多的使用者資訊
如果你必須要求使用者設定使用者資訊,在你的應用中直接提示使用者輸入
儘可能讓使用者晚一點再登入
謹慎使用新手引導,好的應用不需要新手引導
只提供開始使用應用所必需的資訊
使用動畫和可互動的方式來吸引使用者,並讓使用者通過實際操作來學習如何使用
能夠讓使用者很容易地取消或者跳過新手引導。
不要太早要求使用者去給你的應用評分
一般建議按照螢幕預設的定向方式啟動你的應用。
提供一張與應用首頁看上去一樣的閃屏
如果可能,不要讓使用者在初次啟動應用時閱讀免責宣告或者確認使用者協議
1.4.2 時刻準備好停止(Always Be Prepared to Stop)
iOS 應用不存在關閉或退出選項
隨時並儘快儲存使用者資訊
當應用停止的時候儲存儘可能多的當前狀態的詳細資訊
不要強制讓應用退出。
如果應用中所有的功能當前都不可用,那麼應該顯示一些內容來解釋當前的情形,並建議使用者如何進行後續操作
如果只有部分功能不可用,那麼只要當使用者使用這些功能時顯示提示即可。
1.5 導航(Navigation)
分層
扁平
內容或體驗驅動
應該讓使用者時刻清楚自己當前在應用中所處的位置,及如何前往目的頁面
使用導航欄(Navigation Bar)幫助使用者輕鬆訪問分層內容
使用標籤欄(Tab Bar)顯示同型別的內容或功能。
在應用中,如果每屏顯示的都是同類項或同類頁,可以使用頁面控制元件(Page Control)。
一般來說,最好能給使用者提供到達每一屏的唯一路徑。
如果某屏內容使用者需要在不同場景下檢視,可以考慮使用臨時檢視,例如模態檢視、動作選單或警告框。想要了解更多
1.6 模態情境(Modal Contexts)
必須引起使用者關注的時候,一個獨立的任務需要完成或者很明確需要被放棄,為了避免在模稜兩可的狀態下遺漏使用者資訊的時候
保證模態任務簡單、簡短和高度聚焦。
始終提供明顯、安全的退出模態任務的途徑
一個任務需要多層級的模態檢視時
保證提醒對話方塊的內容都是必要且可操作的
尊重使用者關於接收通知的偏好設定
1.7 互動性與反饋(Interactivity and Feedback)
1.7.1 可互動元素吸引使用者點選(Interactive Elements Invite Touch)
在內容區域,必要時可以給按鈕新增邊界或背景
為了暗示互動性,設計時會使用很多線索,包括點選的反饋、顏色、位置、上下文、表意明確的圖示和標籤等。並不需要過於修飾元素來向使用者展示可互動性。
1.7.2 使用者所知道的標準手勢(Users Know the Standard Gestures)
不要給標準手勢賦予不同的行為
不要建立和標準手勢功能相似的手勢操作
可以用複雜手勢作為完成某任務的快捷方式,但不能是唯一觸達方式
除非是遊戲,否則避免定義新的手勢
在特定的環境中,可以考慮使用多指操作
1.7.3 反饋有助於理解(Feedback Aids Understanding)
儘可能將狀態或其他的反饋資訊整合到UI中。
避免顯示不必要的提醒對話方塊
讓使用者更容易的進行選擇
適時地從iOS中獲取資訊
提供有用的反饋來平衡使用者的輸入
1.8 動畫(Animation)
細微、精美的動畫遍佈iOS的使用者介面,他們使應用的體驗更具吸引力,更具動態性
1.9 品牌推廣(Branding)
以精緻優雅不唐突的方式植入品牌元素
避免遠離使用者關心的內容
抵抗住誘惑,不要把你的logo貫穿整個應用
1.10 顏色與字型(Color and Typography)
1.10.1 色彩有助於增進溝通(Color Enhances Communication)
如果你要建立多樣的自定義顏色,要確保它們能夠和諧共存
注意在不同情境下的顏色對比
當你使用自定義的欄顏色時,著重考慮半透明的欄和應用內容
注意顏色的盲區
考慮選擇一種基準色顏色來表徵互動性與狀態。
避免給可互動和不可互動的元素使用相同的顏色。
色彩可以向使用者傳達資訊,但不一定會以你希望的方式。
大多數情況下,不能讓顏色喧賓奪主,讓使用者分心。
1.10.2 優秀的排版提供清晰的傳達(Great Typography Enables Clear Communication)
文字尺寸的響應式變化需要優先考慮內容。
確保一個自定義字型在不同尺寸下的所有型別都具備可讀性
通常情況下,應用中整體應該使用單一字型
1.11 圖示和圖形(Icons and Graphics)
1.11.1 應用圖示(The App Icon)
1.11.2 小圖示(Small Icons)
1.11.3 圖形(Graphics)
支援Retina顯示屏
顯示照片或圖片時請使用原始尺寸,並不要將它拉伸到大於100%
不要使用從蘋果系列產品中複製的圖形
不要將蘋果的應用圖示,影象或者截圖用於你的設計中
1.12 術語和措辭(Terminology and Wording)
保證你使用的術語是使用者能理解的
使用非正式的友好語氣,但不需要太過卑微
像新聞編輯一般遣詞造句,避免不必要的冗餘語句
給控制元件加上短標籤或者容易理解的圖示
描述時間時要注意準確性
為你的應用寫一則漂亮的App Store描述,最大程度地把握住這個與潛在使用者溝通的絕佳機會
修正所有的拼寫、語法與標點符號錯誤
儘量少用全大寫的詞彙
可以描述bug修復情況
設計策略
2.1 設計原則(Design Principles)
2.1.1 美學完整性(Aesthetic Integrity)
2.1.2 一致性(Consistency)
2.1.3 直接操作(Direct Manipulation)
2.1.4 反饋(Feedback)
2.1.5 隱喻(Metaphors)
移動分層檢視來顯示被遮擋的內容
拖曳、輕掃和滑動遊戲中的物件
點選開關,滑動滑塊,轉動選擇器
輕掃來翻閱書本或雜誌
2.1.6 使用者控制(User Control)
2.2 從概念到產品(From Concept to Product)
2.2.1 定義應用(Define Your App)
1.列出所有你認為使用者可能喜歡的功能
2.確定目標使用者
3.根據目標使用者過濾功能清單
4.不止於此
當你想要新增一個功能時
當你考慮使用者介面的外觀和操作時
當你考慮應該使用怎樣的措辭時
2.2.2 為任務量身訂製介面(Tailor Customization to the Task)
2.2.3 原型 & 迭代(Prototype & Iterate)
2.3 案例學習:從桌面到iOS(Case Study: From Desktop to iOS)
IOS技術
3.1 3D觸控(3D Touch)
3.1.1 輕壓和重壓(Peek and Pop)
3.1.2 主螢幕快捷操作(Home Screen Quick Actions)
3.2 Live Photos
在不支援Live Photo的環境中,把Live Photo像傳統照片一樣展示
不要分開展現Live Photo的附加畫面和聲音
確保使用者可以區分Live Photo 和傳統靜止圖片
把使用者所做的調整應用到Live Photo的所有幀中
3.3 錢包(Wallet)
3.4 蘋果的移動支付平臺(Apple Pay)
3.5 研究型應用程式(Research Apps)
3.6  應用擴充套件(App Extensions)
3.6.1 今天部件(Today Widgets)
3.6.2 分享和動作擴充套件(Share and Action Extensions)
3.6.3 圖片編輯擴充套件(Photo Editing Extensions)
3.6.4 文件提供者擴充套件(Document Provider Extensions)
3.6.5 自定義輸入法(Custom Keyboards)
3.7  HomeKit
3.8 多工處理(Multitasking)
準備好被打斷,並恢復
確保你的UI可以處理兩倍高度的狀態列
準備好暫停需要人們注意或主動參與的活動
確保音訊行為合適
適度使用本地通知
必要時,在後臺完成使用者的任務
3.9 通知(Notifications)
3.10 社交媒體(Social Media)
3.11 iCloud
3.12 HealthKit
3.13 應用內購買服務(In-App Purchase)
3.14 遊戲中心(Game Center)
3.15 iAd富媒體廣告(iAd Rich Media Ads)
3.16 無線列印 (AirPrint)
3.17 訪問使用者資料(Accessing User Data)
確保使使用者理解分享私人資料的原因
應用需要個人資訊的原因不明顯時向使用者做出解釋
只有當你的應用沒有使用者資料就無法提供基礎服務時,才在一開始就徵求使用者的許可
避免在使用者選擇需要資料的功能之前呼叫觸發提醒框的程式
檢查位置服務的設定來避免觸發沒必要的提醒
3.18 快速檢視(Quick Look)
3.19 聲音(Sound)
3.20 VoiceOver
3.21 路線選擇(Routing)
3.22 編輯選單(Edit Menu)
3.23 撤銷與重做(Undo and Redo)
3.24 鍵盤和輸入頁面(Keyboards and Input Views)
UI 元素
4.1 欄
4.1.1 狀態列
4.1.2 導航欄
4.1.3 工具欄
4.1.4 工具欄與導航標準按鈕
4.1.5 標籤欄
4.1.6 標籤欄標準圖示
4.1.7 搜尋欄
4.2 內容檢視
4.2.1 活動
4.2.2 活動檢視控制器
4.2.3 集合檢視
4.2.4 容器檢視控制器
4.2.5 圖片檢視
4.2.6 地圖檢視
4.2.7 頁面檢視控制器
4.2.8 浮出層,UIPopoverPresentationController
4.2.9 滾動檢視(Scroll View)
4.2.10 分欄檢視控制器
4.2.11 表格檢視
4.2.12 文字檢視
4.2.13 網路檢視
4.3 控制元件
4.3.1 活動指示器
4.3.2 新增聯絡人按鈕
4.3.3 日期時間選擇器
4.3.4 詳情展開按鈕
4.3.5 資訊按鈕
4.3.6 標籤
4.3.7 網路活動指示器
4.3.8 頁面控制元件
4.3.9 選擇器
4.3.10 進度檢視
4.3.11 重新整理控制元件
4.3.12圓角矩形按鈕
4.3.13 分段控制元件
4.3.14 滑塊
4.3.15 步進器
4.3.16 開關按鈕
4.3.17 系統按鈕
4.3.18文字框
4.4臨時檢視
4.4.1 警告框
4.4.2 操作列表

4.4.3模態檢視