鍍金池/ 教程/ iOS/ 3D 觸摸
錢包
iCloud
控件
適應(yīng)性和布局
編輯菜單(Edit Menu)
從概念到產(chǎn)品
啟動與停止
3D 觸摸
VoiceOver
Live Photos
HomeKit
臨時視圖
游戲中心(Game Center)
快速查看(Quick Look)
交互性與反饋
與 iOS 的整合
鍵盤和輸入頁面(Keyboards and Input Views)
iAd 富媒體廣告(iAd Rich Media Ads)
術(shù)語和措辭
HealthKit
案例學(xué)習(xí):從桌面到 iOS
導(dǎo)航
撤銷與重做(Undo and Redo)
研究型應(yīng)用程序
社交媒體
蘋果的移動支付平臺
圖標(biāo)和圖形
iOS 應(yīng)用解析
為 iOS 而設(shè)計
路線選擇(Routing)
設(shè)計原則
應(yīng)用內(nèi)購買服務(wù)(In-App Purchase)
品牌推廣
動畫
聲音(Sound)
多任務(wù)處理
內(nèi)容視圖
應(yīng)用擴展
通知
訪問用戶數(shù)據(jù)(Accessing User Data)
無線打印 (AirPrint)
模態(tài)情境
顏色與字體

3D 觸摸

3D Touch 給 iOS 9 用戶提供了一個新的交互維度。在所支持 3DTouch 的設(shè)備上,人們可以通過按壓應(yīng)用的圖標(biāo)去快速選擇應(yīng)用定制的操作。在應(yīng)用內(nèi),人們可以使用多種按壓操作去獲取一個項目的預(yù)覽,可以在獨立的視圖里打開一個項獲取相關(guān)操作。(了解更多在你的代碼中如何添加 3D Touch 支持,參閱 Adopting 3D Touch on iPhone.)

輕壓和重壓

輕壓讓用戶可以在不離開他們當(dāng)前環(huán)境的情況下預(yù)覽一個項和執(zhí)行相關(guān)操作。支持輕壓的該項會在輕壓后給出一個小矩形視圖作為反饋。

在 Safari 中的一個輕壓視圖

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/54.jpg" alt="" />

在 Safari 輕壓中的快速操作

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/55.jpg" alt="" />

輕壓(Peek):

  • 當(dāng)用戶按壓在一個支持輕壓的項上時出現(xiàn)輕壓,用戶手指抬起后會消失
  • 當(dāng)用戶在輕壓視圖下再更加重一點的按壓稱之為重壓,重壓可以查看該項的詳細視圖
  • 當(dāng)用戶在輕壓視圖中向上滑動,可以提供與該項相關(guān)的快速操作 當(dāng)用戶輕輕按壓在屏幕,支持輕壓的這個項會展示一個你提供的矩形視圖,示意可以進行下一步交互操作。那個視圖應(yīng)該夠大,這樣才能讓用戶手指不會混淆內(nèi)容,這個視圖應(yīng)該足夠細節(jié),這樣可以讓用戶選擇是否去更加重一點按壓從而轉(zhuǎn)換到輕壓視圖。

重要

你在應(yīng)用中始終如一提供輕壓和重壓的體驗是至關(guān)重要的。如果你在有些地方支持輕壓和重壓,在某些地方不支持,用戶有可能認為你的應(yīng)用或者他們的設(shè)備出現(xiàn)了問題。

使用輕壓去為該項提供一個生動的,內(nèi)容豐富的預(yù)覽。當(dāng)輕壓能夠給用戶提供關(guān)于該項的足夠信息,從而幫助他們擴展當(dāng)前的任務(wù),這樣做是最好的。例如,在用戶決定好是在 Safari 中打開信息中的網(wǎng)頁還是分享這個鏈接給朋友之前,用戶可以使用輕壓預(yù)覽信息中 URL 的頁面。在表單視圖中,輕壓可以給用戶提供一個行項的詳細內(nèi)容。

為每個輕壓提供重壓。雖然一個輕壓可以提供給用戶所需要的大部分信息,但是你應(yīng)該可以讓用戶過渡到重壓,從而讓用戶放開當(dāng)前正在進行的任務(wù),轉(zhuǎn)移專注力到該項上來。重壓的內(nèi)容應(yīng)該與用戶點擊該項后的內(nèi)容一致。

不要為同樣一個項授予輕壓和編輯菜單(Edit menu)兩個功能。當(dāng)同一個項的這兩個功能都啟用的時會很混亂。(獲取更多編輯菜單信息,參看 Edit Menu.)

在輕壓操作里,避免展現(xiàn)類似按鈕的界面元素。如果用戶抬起手指去點擊像按鈕的元素,輕壓會消失。

如果可能,提供輕壓快捷操作。 在輕壓里,用戶可以向上滑動去顯示該項的相關(guān)操作。例如,Mail 里的輕壓快捷操作包括回復(fù)全部,轉(zhuǎn)發(fā)和刪除信息。并不是每個輕壓都需要快捷操作,但是如果你已經(jīng)為該項提供定制的點擊并長按的操作,那么最好在輕壓里提供相同的操作從而替代點擊并長按操作。(注意在網(wǎng)頁視圖中,輕壓快速操作是自動提供的。)

不要將輕壓作為唯一開啟該項的指定操作的方式。不是每一個設(shè)備都支持輕壓和重壓,一些用戶可能選擇關(guān)掉 3D Touch, 因此在你的應(yīng)用中去尋找其他方式實現(xiàn)輕壓的功能是非常重要的。當(dāng)你的應(yīng)用在較舊的設(shè)備上運行時,可以把輕壓的快捷操作映射到一個視圖里,讓用戶通過點擊并長按獲得。

主屏幕快捷操作

主屏幕快捷操作可以在主屏幕給用戶呈現(xiàn)方便的、有用的、應(yīng)用特定的操作。

Camara 的主屏幕快捷操作

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/56.jpg" alt="" />

Mail 的主屏幕快捷操作

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/57.jpg" alt="" />

主屏幕快捷操作:

  • 當(dāng)用戶在主屏幕采用比點擊且長按更重的按壓,按壓在應(yīng)用圖片上時,出現(xiàn)屏幕快捷操作
  • 它會顯示一個你提供的短標(biāo)題,一個圖標(biāo)和可選的副標(biāo)題
  • 它不支持其他定制的內(nèi)容
  • 它可以隨著你應(yīng)用的更新,更新顯示的信息

使用主屏幕快捷操作去開啟引人注目的、高價值的任務(wù)。例如,Maps 可以讓用戶不需要打開 Maps,通過在當(dāng)前位置附近搜索就可以獲得回家的方向。一個應(yīng)用至少需要把一個有用的任務(wù)放在主屏幕快捷操作里;你可以提供最多四個快捷操作。

避免使用主屏幕快捷操作去減少應(yīng)用里導(dǎo)航的內(nèi)容。如果用戶訪問你應(yīng)用的重要區(qū)域非常困難和耗時,那么首先去修改你的應(yīng)用的導(dǎo)航,這樣做是可以讓所有用戶都獲益的。接著,可以去為有用的深層次鏈接提供主屏幕快捷操作,從而開啟這些有用的、創(chuàng)造性的任務(wù)。

不要把主屏幕快捷操作作為通知用戶的一種方式。iOS 用戶期望以其他方式接收應(yīng)用中的信息(更多信息參看 Notifications)。

為主屏快捷操作提供一個簡潔的標(biāo)題(可有副標(biāo)題)和一個模板的圖標(biāo)。標(biāo)題應(yīng)該直接傳達這個操作的結(jié)果;例如,“回家的方向”,“新建聯(lián)系人”,和“新建信息”。你也可以提供一個副標(biāo)題給用戶更多上下文信息。例如,Mail 使用一個副標(biāo)題在主屏快捷操作的重要位置去告訴用戶有未讀信息。 不要把你的應(yīng)用名字或者無關(guān)的信息放在標(biāo)題和副標(biāo)題里,同時要考慮到使用本地化的用語。

保持標(biāo)題的簡潔不會被切斷從而幫助用戶快速理解操作是非常重要的。如果你提供的副標(biāo)題一行顯示不全,系統(tǒng)會截斷;如果你沒有副標(biāo)題,系統(tǒng)會把一行展示不完全的長標(biāo)題以兩行展現(xiàn)。

你可以從很多系統(tǒng)提供的模板圖標(biāo)中選擇圖標(biāo),你也可以創(chuàng)作定制的模板圖標(biāo)。更多關(guān)于圖標(biāo)尺寸、內(nèi)邊距和定位的詳細引導(dǎo)信息,可以下載主屏快速操圖標(biāo)模板 https://developer.apple.com/design/downloads/Quick-Action-Guides.zip。更多關(guān)于設(shè)計模板圖標(biāo)的信息,參看 Template Icons。

系統(tǒng)會自動安排圖標(biāo)在快速操作列表中的位置是在左側(cè)或者在右側(cè),這依賴于你的應(yīng)用的圖標(biāo)在用戶主屏幕的位置。(摒除圖標(biāo)在列表中的位置,在自左向右的語言中文字總是左對齊。)這里有主屏快捷操作的多種展現(xiàn)方式的例子。

http://wiki.jikexueyuan.com/project/ios-9-human-computer-interface-guidelines/images/58.jpg" alt="" />