[譯]《iOS Human Interface Guidelines》——Interactivity and Feedback

交互式的元素會引導(dǎo)觸摸

為了顯示交互如迟,安裝的app使用了一系列的提示收毫,包括按壓的相應(yīng)、顏色氓涣、位置牛哺、環(huán)境和有意義的圖標(biāo)及標(biāo)簽。用戶很少需要額外的裝飾來告訴他們屏幕上的一個元素是可交互的或者說明它會做什么劳吠。

image

在一個支持3D Touch的設(shè)備上引润,當(dāng)用戶按壓主屏幕上的一個圖標(biāo)時,他們看到的背景模糊表示了有更多的功能是可獲取的痒玩。

image

一個主顏色給用戶一種很強的可交互的視覺暗示淳附,特別是在那些不使用豐富的其他顏色的app中。在通訊錄中蠢古,藍(lán)色標(biāo)志了可交互元素奴曙,并給app一種統(tǒng)一的,可辨識的視覺主題草讶。

image

這個返回按鈕使用了很多的提示來表示它的可交互性洽糟,并傳達(dá)它的功能:它在導(dǎo)航欄中出現(xiàn),它顯示了一個返回的V形標(biāo)記堕战,它典型地使用了一個主顏色坤溃,并且它顯示了一個標(biāo)題來描述上一個屏幕。

image

一個提供了明確的動作響應(yīng)的圖標(biāo)或標(biāo)題會吸引用戶來點擊嘱丢。比如說薪介,地圖中的標(biāo)題,例如“Flyover Tour”和“Directions to Here”明確的描述了用戶會執(zhí)行的動作越驻。結(jié)合一個主顏色汁政,可執(zhí)行的標(biāo)題會使用按鈕邊界或其他多余的裝飾道偷。

在一個內(nèi)容區(qū)域,只在需要時添加按鈕邊界或者背景记劈。在bars勺鸦、action sheets和alerts中,因為用戶知道這些區(qū)域中的大部分元素都是可以交互的目木,所以不需要邊界祝旷。另一方面,在一個內(nèi)容區(qū)域中的按鈕就需要一個邊界或者背景來區(qū)分它和內(nèi)容的其他區(qū)域嘶窄。比如說,音樂距贷、時鐘柄冲、照片和App Store就在一些特殊的環(huán)境下使用這樣的按鈕。

image

照片使用了按鈕邊框來區(qū)分Start Sharing按鈕和它上面的解釋文字忠蝗。

image

時鐘在計時器和Timer屏幕中使用了按鈕背景來將人們的注意力吸引到Start和Pause按鈕上现横,使人們即使周圍的環(huán)境很分散注意力也能容易的點擊到按鈕。

image

App Store在列表行中使用按鈕邊框來強調(diào)點擊行獲取更多信息和點擊按鈕來開始(或安裝)一個購買的區(qū)別阁最。

用戶知道標(biāo)準(zhǔn)的手勢

用戶使用手勢——例如點擊戒祠、拖拽和收縮——去和apps以及iOS設(shè)備交互。使用手勢給了人們一個和設(shè)備的近距離溝通速种,并且加強了對屏幕上物體的直接操縱感姜盈。人們希望他們使用的所有app中手勢都是同樣工作的。

人們不需要為了使用3D Touch而學(xué)習(xí)新的手勢配阵。當(dāng)人們輕按屏幕得到響應(yīng)的時候馏颂,會很快發(fā)現(xiàn)3D Touch帶來的新的交互維度。

image

Tap(點擊):按或選擇一個控制器或元素

image

Drag(拖拽):去滾動或搖——即左右搖擺棋傍。

image

Flick(輕彈):快速的滾動或搖救拉。

image

Swipe(滑動):用一個手指,來回到上一個界面瘫拣,或在一個分裂視圖控制器中顯示一個隱藏的界面亿絮,或者是顯示列表行中的刪除按鈕。使用peek麸拄,滑動可以顯示快速響應(yīng)的內(nèi)容(查看3D Touch來獲取更多信息)派昧。

使用四個手指,在iPad上切換app感帅。

image

Double tap(雙擊):放大并居中內(nèi)容中的一塊區(qū)域或圖片斗锭。

如果已經(jīng)放大了,則是縮小失球。

image

Pinch(捏):外捏來放大岖是;內(nèi)捏來縮小帮毁。

image

Touch and hold(觸摸并保持):在可編輯或可選擇的文本區(qū)域,展示一個光標(biāo)位置的放大的視圖豺撑。

image

Shake(搖晃):來開始一個撤銷或重復(fù)的動作烈疚。

除了用戶知道的標(biāo)準(zhǔn)手勢,iOS還定義了一些喚起全系統(tǒng)動作的手勢聪轿,比如顯示控制中心或通知中心爷肝。無論人們使用什么app,都依賴于這些手勢去操作陆错。

不要給標(biāo)準(zhǔn)手勢關(guān)聯(lián)不同的動作灯抛。除非你的app是一個游戲,重定義一個標(biāo)準(zhǔn)手勢的意義會使你的用戶感到困惑并使你的app變得難用音瓷。

不要自定義會調(diào)用標(biāo)準(zhǔn)手勢相同動作的手勢对嚼。人們習(xí)慣標(biāo)準(zhǔn)手勢的行為,而且他們并不會對學(xué)習(xí)不同的方式來做同樣的事情感到感謝绳慎。

使用復(fù)雜的手勢作為加快任務(wù)的快捷方式纵竖,而不是完成它的唯一方式。盡可能地給用戶一個簡單杏愤、直接的方式來完成動作靡砌,即使這需要額外的一兩次點擊。簡單的手勢讓用戶集中在體驗和內(nèi)容上珊楼,而不是交互通殃。

一般來說,不要定義新的手勢亥曹,除非你的app是個游戲邓了。在游戲或其他沉浸式app中,自定義的手勢會變成有趣體驗的一部分媳瞪。但對于一些幫助用戶做一些對他們來說重要的事情的時候骗炉,最好使用標(biāo)準(zhǔn)手勢,因為用戶不需要努力去發(fā)現(xiàn)或記住他們蛇受。

在一個合理的環(huán)境下句葵,考慮使用多觸點的手勢。盡管復(fù)雜的手勢在每一個app中都不被期待兢仰,它們卻可以豐富app的體驗乍丈,使人們在其中度過大量的時間,比如在游戲或創(chuàng)造內(nèi)容的環(huán)境下把将。永遠(yuǎn)記住轻专,非標(biāo)準(zhǔn)手勢不是可發(fā)現(xiàn)的,并且應(yīng)該稀少察蹲,如果有请垛,那么就要是完成動作的唯一方式催训。

反饋幫助理解

反饋幫助人們知道一個app正在干什么,發(fā)現(xiàn)他們接下來可以做什么宗收,并理解他們動作的結(jié)果漫拭。UIKit的控制器和視圖提供了很多種反饋。

盡可能地整體化常規(guī)的和其他相關(guān)的反饋信息到你的UI中混稽。最好用戶可以不需要動作就獲取這種類型的信息采驻,并且不會被他們的內(nèi)容迷惑。比如說匈勋,郵件在工具欄顯示了當(dāng)前信箱的狀態(tài)礼旅,這樣就不會和用戶的內(nèi)容競爭。

image

避免不必要的警告框洽洁。警告框是一種很有力的反饋機制各淀,但它只應(yīng)該用于顯示重要的——并且情理上可交互的——信息。如果用戶看到了太多包含不重要信息的警告框诡挂,他們很快會變得忽略所有的警告框。查看Alert學(xué)習(xí)更過關(guān)于警告框的使用临谱。

輸入信息應(yīng)該簡單

不論用戶是點擊控制器還是使用鍵盤璃俗,輸入信息都花費時間和注意力。當(dāng)一個app在展現(xiàn)有用的內(nèi)容之前因為要求太多用戶輸入使人們進(jìn)度變慢悉默,人們會對使用它變得氣餒城豁。

讓用戶做選擇變得簡單。比如說抄课,你可以使用一個選擇器或列表代替文本框唱星,因為大多數(shù)用戶認(rèn)為從列表中選擇一個元素比輸入文字要容易。

image

合適的從iOS獲取信息跟磨。用戶在他們的設(shè)備中存儲了大量的信息间聊。可以的話抵拘,不要強制用戶給你一些你可以很容易自己找到的信息哎榴,比如他們的聯(lián)系人或日歷信息。

通過給用戶一些有用的內(nèi)容來平衡輸入的請求僵蛛。給予和獲取的感受幫助人們感覺他們在你的app中正在前進(jìn)尚蝌。

本文翻譯自蘋果官方開發(fā)文檔

查看完整合集


查看作者首頁

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市充尉,隨后出現(xiàn)的幾起案子飘言,更是在濱河造成了極大的恐慌,老刑警劉巖驼侠,帶你破解...
    沈念sama閱讀 218,451評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件姿鸿,死亡現(xiàn)場離奇詭異谆吴,居然都是意外死亡哈误,警方通過查閱死者的電腦和手機腐宋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,172評論 3 394
  • 文/潘曉璐 我一進(jìn)店門书幕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來较锡,“玉大人盗迟,你說我怎么就攤上這事透典∈驴蓿” “怎么了扯键?”我有些...
    開封第一講書人閱讀 164,782評論 0 354
  • 文/不壞的土叔 我叫張陵苫拍,是天一觀的道長芜繁。 經(jīng)常有香客問我,道長绒极,這世上最難降的妖魔是什么骏令? 我笑而不...
    開封第一講書人閱讀 58,709評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮垄提,結(jié)果婚禮上榔袋,老公的妹妹穿的比我還像新娘。我一直安慰自己铡俐,他們只是感情好凰兑,可當(dāng)我...
    茶點故事閱讀 67,733評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著审丘,像睡著了一般吏够。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上滩报,一...
    開封第一講書人閱讀 51,578評論 1 305
  • 那天锅知,我揣著相機與錄音,去河邊找鬼脓钾。 笑死售睹,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的可训。 我是一名探鬼主播侣姆,決...
    沈念sama閱讀 40,320評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼沉噩!你這毒婦竟也來了捺宗?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,241評論 0 276
  • 序言:老撾萬榮一對情侶失蹤川蒙,失蹤者是張志新(化名)和其女友劉穎蚜厉,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體畜眨,經(jīng)...
    沈念sama閱讀 45,686評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡昼牛,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,878評論 3 336
  • 正文 我和宋清朗相戀三年术瓮,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片贰健。...
    茶點故事閱讀 39,992評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡胞四,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出伶椿,到底是詐尸還是另有隱情辜伟,我是刑警寧澤,帶...
    沈念sama閱讀 35,715評論 5 346
  • 正文 年R本政府宣布脊另,位于F島的核電站导狡,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏偎痛。R本人自食惡果不足惜旱捧,卻給世界環(huán)境...
    茶點故事閱讀 41,336評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望踩麦。 院中可真熱鬧枚赡,春花似錦、人聲如沸谓谦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,912評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽茁计。三九已至,卻和暖如春谓松,著一層夾襖步出監(jiān)牢的瞬間星压,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,040評論 1 270
  • 我被黑心中介騙來泰國打工鬼譬, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留娜膘,地道東北人。 一個月前我還...
    沈念sama閱讀 48,173評論 3 370
  • 正文 我出身青樓优质,卻偏偏與公主長得像竣贪,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子巩螃,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,947評論 2 355

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

  • iOS 9設(shè)計規(guī)范 中文版 完整版譯者注:本文譯自蘋果官方人機界面指南 iOS Human Interface G...
    海寧Hennie閱讀 13,281評論 2 60
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,144評論 25 707
  • 上周演怎,微信朋友圈一度被一條“溫暖”的信息刷屏。往潮芊Γ看到愛心接力爷耀,內(nèi)心都充滿了“人間自有真情在”的感動,可這次的這份...
    晚安晴天閱讀 232評論 0 0
  • 醒來第一眼看到陽光透過窗簾射進(jìn)屋內(nèi)拍皮,那光柔柔暖暖的歹叮。 哈跑杭,陽光普照,一定是個好天氣咆耿! 我這樣想著德谅,習(xí)慣了第一時間拿...
    驚鴻獨舞閱讀 520評論 13 25