IOS.10人機交互指南(自譯)

原文:https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/

概論(Overview):

1.設計原則:

作為一名移動端軟件設計師,意味著有機會推出一款可以榮登蘋果商店榜首的超凡產品,為了實現這個目標,必須在質量和功能上都達到高標準。

清晰(Clarity):整個系統中,每個尺寸的文字都應該是清晰易讀,每個圖標都應該明確易懂,每個修飾恰當且微妙,聚焦于功能來驅動設計。留白、色彩、文字、圖形以及其他的界面元素巧妙地突出重點內容并表達交互性。

參考(Deference):流暢界面的動效和清爽美觀的界面有助于用戶理解內容并與之進行交互,而不會受到干擾。一般內容占據整屏的時候,半透明和模糊處理暗示有更多其他內容。減少邊框、漸變、陰影的使用可以保持界面的輕量簡潔,從而突出內容。

深度(Depth):清晰分明的視覺層次和生動的動畫效果表現了層次結構,賦予活力并有助于理解。易于發現并可觸發的設計元素可以提升體驗的愉悅感,并且使用戶在觸發功能或者加載更多內容時理解前后關系。當用戶瀏覽內容時,流暢的過渡提供一種縱深感。

要想最大程度的擴大影響力與涉及范圍,在設計你獨特的應用時,需要將以下原則謹記在心。

美學完整性(Aesthetic Integrity):美學完整性代表了一款應用視覺、交互與其功能整合的完善程度。例如一款協助用戶完成重要人物的應用,可以通過不引人注目的圖形,標準化的控件和可預見性的交互使用戶保持專注。而沉浸式的應用(immersive app),例如游戲,需要提供具有吸引力的視覺,在鼓勵用戶探索的同時帶來無限的樂趣與刺激。

一致性(Consistency):一款具有一致性的應用,擁有貫穿相同的標準與規范:使用系統提供的界面元素、風格統一(眾所周知)的圖標、標準化的文字樣式和一致的措辭,應用包含的特征與交互是符合用戶心里預期的。

直接操作(Direct Manipulation):屏幕上的直接操作可以提升用戶的參與度(engage)并有助于理解。用戶直接操作包含旋轉設備或者手勢來控制屏幕內容。通過直接操作,用戶的行為可以得到即時可視的反饋(results of their actions)。

反饋(Feedback):反饋響應動作,呈現結果并通知用戶。蘋果自帶的應用為用戶的每個行為提供反饋。被點擊時,界面元素被短暫高亮(highlighted),進度指示器(progress indicator)指示耗時操作的進程,動效和聲效幫助提示行為結果。

隱喻(Metaphors):當一款應用的虛擬對象和動作與用戶所熟悉的體驗相似(無論是來源于現實生活還是數字世界),會使用戶更快速地學習。隱喻在iOS系統中起到很好的作用是因為用戶與屏幕的物理交互。她們將視圖移出屏幕來顯示接下來的內容,他們拖拉(drag)和滑動(swipe)對象,撥動(toggle)開關,移動滑塊(move sliders),滾動(scroll)數值選擇器(picker values)。她們甚至通過輕掃(flick)翻閱書籍和雜志。

用戶控制(User Control):用戶控制(而不是應用控制)貫穿于iOS系統中,一個應用可以提示一系列的動作或者警告有嚴重后果的行為,但讓應用替代用戶作決策者是錯誤的行為。最好的應用應該在用戶主導(enabling users)與避免不期待結果中尋找平衡。應用可以通過使用熟悉并可預知的交互元素、向用戶二次求證破壞行為、在運行中可輕易被取消操作讓用戶感知他們才是控制者。

2.iOS10更新內容

在iOS10上你可以創造出前所未有更強大的應用


3.界面基本元素

大多數iOS應用使用來自UI組件(UIKit)中的構件,UIKit是定義了界面的基本元素的編程框架。這個框架讓應用在系統中保持視覺上的一致性,同時還提供了高度的個性化(customization),UIKit是靈活且用戶所熟悉的。UIKit具有適配性,讓你可以設計一個在任何iOS設備上都看上去很棒的應用。當系統發布新版本(The system introduces appearance changes)時UIKit會自動更新,由UIKit提供的界面元素可以分為以下三類:

欄(Bar):提示用戶其所位于應用的位置,提供導航(navigation),欄中可能包含按鈕或者是其他用來觸發功能(initiating actions)、交流信息的元素。

視圖(View):包含用戶在你的應用中所看到最主要的內容。例如:文字、圖片、動效和其他交互元素,視圖中也可以進行例如:滾動、插入、刪去、排序等行為。

控件(Controls):觸發功能,傳遞信息。典型的控件包含:按鈕、開關、輸入框、進度指示器。

為了進一步(in addition to)定義iOS應用界面,UIKit還定義了應用所可以引用的功能。例如:通過這個控件,你的應用可以對觸摸屏上的手勢進行響應,并且可以實現如繪畫、輔助(accessibility)、打印功能。

iOS也與其他編程框架和技術緊密結合,例如蘋果支付(Apple Pay)、健康組件(HealthKit)和ResearchKit, 讓你可以設計出一個強大到不可思議的應用。

交互(Interaction):

1.3D觸摸(3D Touch):

3D Touch為觸碰式交互增加了一個維度(touch-based interaction),可以通過對觸摸屏幕施加不同級別的壓力來實現更多的功能。應用可以通過展現菜單,顯示更多內容或者播放動畫來響應。用戶不需要為了實現3D Touch交互而學習更多的手勢,當他們輕觸觸摸屏并得到響應時,會立刻發現這一新增的交互維度。

2.主屏交互(Home Screen Interaction):

在主屏幕上按壓支持3D Touch的應用圖標會觸發相應的操作視圖(displays an action view)。該視圖讓你可以快速執行應用常用的任務或者瀏覽有趣的信息。例如日歷,提供了創建事項的快捷操作(shortcut),也可以顯示你的日程表中下一個事項,了解更多設計指南,請瀏覽Home Screen和Widgets。

5.數據輸入(Data Entry):

無論是點擊界面元素還是使用鍵盤,輸入信息都會是一個繁瑣冗長的過程。如果在做任何有用的事情之前應用要求用戶做一連串的輸入,進而拖緩了進程,用戶將很快感到氣餒,甚至可能徹底放棄應用。

盡可能展示選項:使數據輸入更加高效。用選擇器(Picker)或者列表(Table)代替輸入框,從有預設選項的列表中選擇比輸入文字簡單。

盡可能從系統中獲取信息:不要強迫用戶提供可以自動獲取或者在用戶的許可下就可以收集的信息,比如聯系人或是日歷信息。

提供合理的默認值(Default Values):盡可能預填最可能的值。提供合理的默認值可以縮短決策時間,加快進程。

只有在收集完必需信息(Required Values)后才能進行下一步操作:在啟用"下一步"或者"繼續"按鈕前,要確認所有必需輸入框都有值。使用可用的按鈕作為一種視覺提示,表示可以繼續進程。

動態檢驗輸入值:當完成一張長表單后卻不得不返回更正錯誤會讓用戶感到氣餒。盡可能的在用戶輸入后立刻檢查輸入值,讓用戶可以立即更正輸入值。

只要求必要信息:只將影響進程的信息設為必填信息。

簡化值列表導航:尤其是在列表和選擇器中,必需能夠簡單地選擇值。考慮通過將值列表按首字母排序或是其它邏輯排列,從而加快瀏覽和選擇的速度

在輸入欄顯示提示以輔助說明:當輸入框沒有其他文字時,可以包含占位符文字—例如"郵件"或"密碼"。當占位符文字已經足夠時不要再用單獨的標簽描述輸入框。

6.反饋(Feedback)

反饋讓用戶知道應用在做什么,發現下一步會做什么,并且理解操作的結果。

悄悄地在你的界面中整合狀態和其他類型的反饋:理想情況下用戶可以在不做操作或者不被打斷的情況下得到重要信息。例如,郵箱,當用戶在郵箱里瀏覽郵件時狀態信息巧妙地在工具欄上顯示。這個信息不會影響屏幕的主要內容,但可以讓用戶在任何時間一眼就能查看到。

避免不必要的警告:警告是強有力的反饋機制,所以應該被用來傳遞重要的、最好是需要操作的信息。如果用戶看到太多包含無關緊要信息的警告,會學會無視之后的警告。了解更多幫助,請參閱Alerts。


Haptic Feedback

On supported devices, haptics provide a way to physically engage users with tactile feedback that gets attention and reinforces actions. Some system-provided interface elements, such as pickers, switches, and sliders, automatically provide haptic feedback as users interact with them. Your app can also ask the system to generate different types of haptic feedback. iOS manages the strength and behavior of this feedback.

Use haptics judiciously. Overuse can cause confusion and diminish the significance of feedback.

In general, provide haptic feedback in response to user-initiated actions. It’s easy for people to correlate haptics with actions they initiated. Arbitrary feedback can feel disconnected and be misinterpreted.

Don’t redefine feedback types. To ensure a consistent experience, use feedback types as intended. Don’t, for example, use "impact" feedback to notify the user that a task has succeeded. Instead, use the "success" variation of "notification" feedback.

Fine tune your visual experience for haptics. Provide visual and haptic feedback together to create a deeper connection between actions and results. Make sure animations are sharp and precise, to visually match what the user feels.

Don’t rely on a single mode of communication. Not all devices support the full range of haptic feedback, and people can disable the feature entirely in Settings if they choose. In addition, haptic feedback occurs only when the device is active and your app is frontmost. Supplement haptics with visual and audible cues to ensure that important information isn’t missed.

Use haptics when visual feedback may be occluded. Some interactions, such as dragging an object to a location onscreen, are hidden by the user’s finger. Consider generating feedback that lets the user know when they’ve reached a particular location or value.

Prepare the system before initiating feedback. Because there may be some latency involved when providing haptic feedback, it’s best to get the system ready shortly before requesting the feedback. Otherwise, the haptics might come too late and feel disconnected from the user's actions or what they’re seeing on the screen.

Synchronize haptics with accompanying sound. Haptics don’t automatically synchronize with sounds. If you want an accompanying sound, you’re responsible for synchronizing it.

7.文件處理(File Handing)

當用戶創建、查看、操作文件時不需考慮文件系統。如果你的應用運行需要文件時,盡可能降低文件處理。


Instill confidence that work is always preserved unless canceled or deleted. In general, don’t make people explicitly save files. Instead, save changes automatically at regular intervals, when opening and closing files, and when switching to another app. In some cases, such as while editing an existing file, save and cancel options may still make sense for the sake of confirming when the edits are actually captured.

讓用戶相信除非主動取消或刪除

文件會隨時被保存。總而言之,不要讓用戶去即時保存文件。反之,在文件被打開、關閉,或是跳轉至其它應用時,應該自動定時地替用戶保存文件。但在某些情況,比如正在編輯一個已被創建的文件時,保存和取消的選項也是有意義的,因為它們幫助確認何時編輯的內容應該被保存。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,882評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,208評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,746評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,666評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,477評論 6 407
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,960評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,047評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,200評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,726評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,617評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,807評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,327評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,049評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,425評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,674評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,432評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,769評論 2 372

推薦閱讀更多精彩內容