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

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

概論(Overview):

1.設(shè)計(jì)原則:

作為一名移動(dòng)端軟件設(shè)計(jì)師届案,意味著有機(jī)會推出一款可以榮登蘋果商店榜首的超凡產(chǎn)品庵楷,為了實(shí)現(xiàn)這個(gè)目標(biāo),必須在質(zhì)量和功能上都達(dá)到高標(biāo)準(zhǔn)。

清晰(Clarity):整個(gè)系統(tǒng)中尽纽,每個(gè)尺寸的文字都應(yīng)該是清晰易讀咐蚯,每個(gè)圖標(biāo)都應(yīng)該明確易懂,每個(gè)修飾恰當(dāng)且微妙弄贿,聚焦于功能來驅(qū)動(dòng)設(shè)計(jì)春锋。留白、色彩差凹、文字期奔、圖形以及其他的界面元素巧妙地突出重點(diǎn)內(nèi)容并表達(dá)交互性。

參考(Deference):流暢界面的動(dòng)效和清爽美觀的界面有助于用戶理解內(nèi)容并與之進(jìn)行交互危尿,而不會受到干擾呐萌。一般內(nèi)容占據(jù)整屏的時(shí)候,半透明和模糊處理暗示有更多其他內(nèi)容谊娇。減少邊框肺孤、漸變、陰影的使用可以保持界面的輕量簡潔济欢,從而突出內(nèi)容赠堵。

深度(Depth):清晰分明的視覺層次和生動(dòng)的動(dòng)畫效果表現(xiàn)了層次結(jié)構(gòu),賦予活力并有助于理解法褥。易于發(fā)現(xiàn)并可觸發(fā)的設(shè)計(jì)元素可以提升體驗(yàn)的愉悅感茫叭,并且使用戶在觸發(fā)功能或者加載更多內(nèi)容時(shí)理解前后關(guān)系。當(dāng)用戶瀏覽內(nèi)容時(shí)挖胃,流暢的過渡提供一種縱深感杂靶。

要想最大程度的擴(kuò)大影響力與涉及范圍,在設(shè)計(jì)你獨(dú)特的應(yīng)用時(shí)酱鸭,需要將以下原則謹(jǐn)記在心。

美學(xué)完整性(Aesthetic Integrity):美學(xué)完整性代表了一款應(yīng)用視覺垛吗、交互與其功能整合的完善程度凹髓。例如一款協(xié)助用戶完成重要人物的應(yīng)用,可以通過不引人注目的圖形怯屉,標(biāo)準(zhǔn)化的控件和可預(yù)見性的交互使用戶保持專注蔚舀。而沉浸式的應(yīng)用(immersive app),例如游戲锨络,需要提供具有吸引力的視覺赌躺,在鼓勵(lì)用戶探索的同時(shí)帶來無限的樂趣與刺激。

一致性(Consistency):一款具有一致性的應(yīng)用羡儿,擁有貫穿相同的標(biāo)準(zhǔn)與規(guī)范:使用系統(tǒng)提供的界面元素礼患、風(fēng)格統(tǒng)一(眾所周知)的圖標(biāo)、標(biāo)準(zhǔn)化的文字樣式和一致的措辭,應(yīng)用包含的特征與交互是符合用戶心里預(yù)期的缅叠。

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

反饋(Feedback):反饋響應(yīng)動(dòng)作,呈現(xiàn)結(jié)果并通知用戶领曼。蘋果自帶的應(yīng)用為用戶的每個(gè)行為提供反饋鸥鹉。被點(diǎn)擊時(shí),界面元素被短暫高亮(highlighted)庶骄,進(jìn)度指示器(progress indicator)指示耗時(shí)操作的進(jìn)程毁渗,動(dòng)效和聲效幫助提示行為結(jié)果。

隱喻(Metaphors):當(dāng)一款應(yīng)用的虛擬對象和動(dòng)作與用戶所熟悉的體驗(yàn)相似(無論是來源于現(xiàn)實(shí)生活還是數(shù)字世界)瓢姻,會使用戶更快速地學(xué)習(xí)祝蝠。隱喻在iOS系統(tǒng)中起到很好的作用是因?yàn)橛脩襞c屏幕的物理交互。她們將視圖移出屏幕來顯示接下來的內(nèi)容幻碱,他們拖拉(drag)和滑動(dòng)(swipe)對象绎狭,撥動(dòng)(toggle)開關(guān),移動(dòng)滑塊(move sliders)褥傍,滾動(dòng)(scroll)數(shù)值選擇器(picker values)儡嘶。她們甚至通過輕掃(flick)翻閱書籍和雜志。

用戶控制(User Control):用戶控制(而不是應(yīng)用控制)貫穿于iOS系統(tǒng)中恍风,一個(gè)應(yīng)用可以提示一系列的動(dòng)作或者警告有嚴(yán)重后果的行為蹦狂,但讓應(yīng)用替代用戶作決策者是錯(cuò)誤的行為。最好的應(yīng)用應(yīng)該在用戶主導(dǎo)(enabling users)與避免不期待結(jié)果中尋找平衡朋贬。應(yīng)用可以通過使用熟悉并可預(yù)知的交互元素凯楔、向用戶二次求證破壞行為、在運(yùn)行中可輕易被取消操作讓用戶感知他們才是控制者锦募。

2.iOS10更新內(nèi)容

在iOS10上你可以創(chuàng)造出前所未有更強(qiáng)大的應(yīng)用


3.界面基本元素

大多數(shù)iOS應(yīng)用使用來自UI組件(UIKit)中的構(gòu)件摆屯,UIKit是定義了界面的基本元素的編程框架。這個(gè)框架讓應(yīng)用在系統(tǒng)中保持視覺上的一致性糠亩,同時(shí)還提供了高度的個(gè)性化(customization)虐骑,UIKit是靈活且用戶所熟悉的。UIKit具有適配性赎线,讓你可以設(shè)計(jì)一個(gè)在任何iOS設(shè)備上都看上去很棒的應(yīng)用廷没。當(dāng)系統(tǒng)發(fā)布新版本(The system introduces appearance changes)時(shí)UIKit會自動(dòng)更新,由UIKit提供的界面元素可以分為以下三類:

欄(Bar):提示用戶其所位于應(yīng)用的位置垂寥,提供導(dǎo)航(navigation)颠黎,欄中可能包含按鈕或者是其他用來觸發(fā)功能(initiating actions)另锋、交流信息的元素。

視圖(View):包含用戶在你的應(yīng)用中所看到最主要的內(nèi)容盏缤。例如:文字砰蠢、圖片、動(dòng)效和其他交互元素唉铜,視圖中也可以進(jìn)行例如:滾動(dòng)台舱、插入、刪去潭流、排序等行為竞惋。

控件(Controls):觸發(fā)功能,傳遞信息灰嫉。典型的控件包含:按鈕拆宛、開關(guān)、輸入框讼撒、進(jìn)度指示器浑厚。

為了進(jìn)一步(in addition to)定義iOS應(yīng)用界面,UIKit還定義了應(yīng)用所可以引用的功能根盒。例如:通過這個(gè)控件钳幅,你的應(yīng)用可以對觸摸屏上的手勢進(jìn)行響應(yīng),并且可以實(shí)現(xiàn)如繪畫炎滞、輔助(accessibility)敢艰、打印功能。

iOS也與其他編程框架和技術(shù)緊密結(jié)合册赛,例如蘋果支付(Apple Pay)钠导、健康組件(HealthKit)和ResearchKit, 讓你可以設(shè)計(jì)出一個(gè)強(qiáng)大到不可思議的應(yīng)用牵祟。

交互(Interaction):

1.3D觸摸(3D Touch):

3D Touch為觸碰式交互增加了一個(gè)維度(touch-based interaction)攀涵,可以通過對觸摸屏幕施加不同級別的壓力來實(shí)現(xiàn)更多的功能。應(yīng)用可以通過展現(xiàn)菜單谎替,顯示更多內(nèi)容或者播放動(dòng)畫來響應(yīng)扼睬。用戶不需要為了實(shí)現(xiàn)3D Touch交互而學(xué)習(xí)更多的手勢湃望,當(dāng)他們輕觸觸摸屏并得到響應(yīng)時(shí),會立刻發(fā)現(xiàn)這一新增的交互維度痰驱。

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

在主屏幕上按壓支持3D Touch的應(yīng)用圖標(biāo)會觸發(fā)相應(yīng)的操作視圖(displays an action view)。該視圖讓你可以快速執(zhí)行應(yīng)用常用的任務(wù)或者瀏覽有趣的信息瞳浦。例如日歷担映,提供了創(chuàng)建事項(xiàng)的快捷操作(shortcut),也可以顯示你的日程表中下一個(gè)事項(xiàng)叫潦,了解更多設(shè)計(jì)指南蝇完,請瀏覽Home Screen和Widgets。

5.數(shù)據(jù)輸入(Data Entry):

無論是點(diǎn)擊界面元素還是使用鍵盤,輸入信息都會是一個(gè)繁瑣冗長的過程短蜕。如果在做任何有用的事情之前應(yīng)用要求用戶做一連串的輸入氢架,進(jìn)而拖緩了進(jìn)程,用戶將很快感到氣餒朋魔,甚至可能徹底放棄應(yīng)用岖研。

盡可能展示選項(xiàng):使數(shù)據(jù)輸入更加高效。用選擇器(Picker)或者列表(Table)代替輸入框警检,從有預(yù)設(shè)選項(xiàng)的列表中選擇比輸入文字簡單孙援。

盡可能從系統(tǒng)中獲取信息:不要強(qiáng)迫用戶提供可以自動(dòng)獲取或者在用戶的許可下就可以收集的信息,比如聯(lián)系人或是日歷信息扇雕。

提供合理的默認(rèn)值(Default Values):盡可能預(yù)填最可能的值拓售。提供合理的默認(rèn)值可以縮短決策時(shí)間,加快進(jìn)程镶奉。

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

動(dòng)態(tài)檢驗(yàn)輸入值:當(dāng)完成一張長表單后卻不得不返回更正錯(cuò)誤會讓用戶感到氣餒。盡可能的在用戶輸入后立刻檢查輸入值移国,讓用戶可以立即更正輸入值吱瘩。

只要求必要信息:只將影響進(jìn)程的信息設(shè)為必填信息。

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

在輸入欄顯示提示以輔助說明:當(dāng)輸入框沒有其他文字時(shí)票摇,可以包含占位符文字—例如"郵件"或"密碼"。當(dāng)占位符文字已經(jīng)足夠時(shí)不要再用單獨(dú)的標(biāo)簽描述輸入框砚蓬。

6.反饋(Feedback)

反饋?zhàn)層脩糁缿?yīng)用在做什么矢门,發(fā)現(xiàn)下一步會做什么,并且理解操作的結(jié)果灰蛙。

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

避免不必要的警告:警告是強(qiáng)有力的反饋機(jī)制叛薯,所以應(yīng)該被用來傳遞重要的浑吟、最好是需要操作的信息。如果用戶看到太多包含無關(guān)緊要信息的警告耗溜,會學(xué)會無視之后的警告组力。了解更多幫助,請參閱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)

當(dāng)用戶創(chuàng)建燎字、查看、操作文件時(shí)不需考慮文件系統(tǒng)城舞。如果你的應(yīng)用運(yùn)行需要文件時(shí)轩触,盡可能降低文件處理。


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.

讓用戶相信除非主動(dòng)取消或刪除

文件會隨時(shí)被保存家夺⊥阎總而言之,不要讓用戶去即時(shí)保存文件拉馋。反之榨为,在文件被打開、關(guān)閉煌茴,或是跳轉(zhuǎn)至其它應(yīng)用時(shí)随闺,應(yīng)該自動(dòng)定時(shí)地替用戶保存文件。但在某些情況蔓腐,比如正在編輯一個(gè)已被創(chuàng)建的文件時(shí)矩乐,保存和取消的選項(xiàng)也是有意義的,因?yàn)樗鼈儙椭_認(rèn)何時(shí)編輯的內(nèi)容應(yīng)該被保存回论。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末散罕,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子傀蓉,更是在濱河造成了極大的恐慌欧漱,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件葬燎,死亡現(xiàn)場離奇詭異误甚,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)谱净,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進(jìn)店門窑邦,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人壕探,你說我怎么就攤上這事奕翔。” “怎么了浩蓉?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵派继,是天一觀的道長。 經(jīng)常有香客問我捻艳,道長驾窟,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任认轨,我火速辦了婚禮绅络,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘嘁字。我一直安慰自己恩急,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布纪蜒。 她就那樣靜靜地躺著衷恭,像睡著了一般。 火紅的嫁衣襯著肌膚如雪纯续。 梳的紋絲不亂的頭發(fā)上随珠,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天,我揣著相機(jī)與錄音猬错,去河邊找鬼窗看。 笑死,一個(gè)胖子當(dāng)著我的面吹牛倦炒,可吹牛的內(nèi)容都是我干的显沈。 我是一名探鬼主播,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼逢唤,長吁一口氣:“原來是場噩夢啊……” “哼拉讯!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起智玻,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤遂唧,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后吊奢,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體盖彭,經(jīng)...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年页滚,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了召边。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,577評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡裹驰,死狀恐怖隧熙,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情幻林,我是刑警寧澤贞盯,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布音念,位于F島的核電站,受9級特大地震影響躏敢,放射性物質(zhì)發(fā)生泄漏闷愤。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一件余、第九天 我趴在偏房一處隱蔽的房頂上張望讥脐。 院中可真熱鬧,春花似錦啼器、人聲如沸旬渠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽告丢。三九已至,卻和暖如春更哄,著一層夾襖步出監(jiān)牢的瞬間芋齿,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工成翩, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留觅捆,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓麻敌,卻偏偏與公主長得像栅炒,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子术羔,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,452評論 2 348

推薦閱讀更多精彩內(nèi)容