iOS 7人機(jī)交互指南-UI設(shè)計(jì)基礎(chǔ):整合iOS系統(tǒng)
使用標(biāo)準(zhǔn)的UI元素
盡可能使用UIKit框架提供的標(biāo)準(zhǔn)UI元素,這樣用戶和開(kāi)發(fā)者都能從中獲益:
對(duì)開(kāi)發(fā)者而言,如果iOS進(jìn)行了重新設(shè)計(jì),那么標(biāo)準(zhǔn)的UI元素能夠在系統(tǒng)更新時(shí)自行更新,而自定義的元素則不會(huì)。
對(duì)用戶而言,標(biāo)準(zhǔn)的UI元素會(huì)讓他們覺(jué)得很舒服,這樣他們可以立即理解如何在應(yīng)用中使用這些標(biāo)準(zhǔn)的UI元素。
為了好好利用這些標(biāo)準(zhǔn)的UI元素,需注意以下至關(guān)重要的幾點(diǎn):
遵循每個(gè)UI元素的使用指南。當(dāng)UI元素的外觀、運(yùn)行方式和用戶期望的一樣時(shí),他們可依據(jù)此前的經(jīng)驗(yàn)在你的app使用這些元素。你可以在Bars,Content Views, Controls以及Temporary Views中找到UI元素使用指南。
一般來(lái)說(shuō),不要使用自定義UI控件來(lái)執(zhí)行一個(gè)標(biāo)準(zhǔn)的交互操作。首先,要問(wèn)問(wèn)自己為什么要?jiǎng)?chuàng)建一個(gè)交互行為方 式與標(biāo)準(zhǔn)元素一致的自定義UI元素。如果你僅僅是想要一個(gè)自定義的外觀,那可以考慮通過(guò)使用UIKit框架的外觀自定義API來(lái)改變標(biāo)準(zhǔn)UI元素的外觀, 或者改變?cè)氐纳{(diào)。如果你想要一個(gè)略有不同的UI控件交互行為,那首先要確保通過(guò)對(duì)標(biāo)準(zhǔn)元素的調(diào)整可以達(dá)到你想要的效果。如果你想要一個(gè)完完全全的自定 義UI,那么***是設(shè)計(jì)一個(gè)和標(biāo)準(zhǔn)元素看起來(lái)很不一樣的自定義元素。
TIP:Interface Builder可以幫你簡(jiǎn)單地創(chuàng)建標(biāo)準(zhǔn)的UI元素,使用外觀自定義API,設(shè)置屬性,并在控件中添加自定義圖標(biāo)或者系統(tǒng)提供的圖標(biāo)。關(guān)于Interface Builder更多詳情,可以查看Xcode 用戶指南。
不要使用系統(tǒng)定義的按鈕和圖標(biāo)來(lái)表達(dá)其他一些含義。你可以在應(yīng)用中使用iOS 提供的按鈕和圖標(biāo)。要確保你已理解了相關(guān)文檔,理解了按鈕和圖標(biāo)使用的語(yǔ)義環(huán)境,不要簡(jiǎn)單依賴(lài)你對(duì)按鈕和圖標(biāo)外觀的理解和看法。
如果系統(tǒng)沒(méi)有提供適當(dāng)?shù)陌粹o或者圖標(biāo)來(lái)準(zhǔn)確地傳達(dá)app的功能,那么你可以自行創(chuàng)建一個(gè)。Bar Button Icons這一章節(jié)可以幫你更好地設(shè)計(jì)自定義圖標(biāo)。
如果你的app能提供沉浸式的任務(wù)或體驗(yàn),那么創(chuàng)建完全自定義的控件就可能是合理的做法。因?yàn)槟阏趧?chuàng)建一種***的環(huán)境,并且知道如何在這類(lèi)app中管理用戶體驗(yàn)所期待的環(huán)境。
對(duì)設(shè)備使用方向(橫屏和豎屏)做出相應(yīng)
用戶一般期望在橫屏和豎屏模式下都能使用設(shè)備,所以你的app***能做出響應(yīng)。
不管設(shè)備處于什么方向,首先都要維持對(duì)主要內(nèi)容的聚焦和關(guān)注。用戶使用你的app來(lái)瀏覽他們關(guān)心的內(nèi)容或者與內(nèi)容進(jìn)行交互。移動(dòng)設(shè)備旋轉(zhuǎn)后,改變用戶的視覺(jué)焦點(diǎn)可能會(huì)讓他們倍感迷惑,并產(chǎn)生對(duì)app失控的感覺(jué)。
一般情況下,要讓app支持橫屏和豎屏兩種模式。用戶期望在任何模式下都能使用你的app,***能滿足用戶的要求,尤其是iPad用戶。不過(guò),也有一些app只有橫屏或豎屏運(yùn)行方式。如果你的app只能在一個(gè)方向(橫屏或豎屏)運(yùn)行,你應(yīng)該:
1.不管設(shè)備處于橫屏模式還是豎屏模式,都要以應(yīng)用支持的方向啟動(dòng)。比如,如果游戲app或者視頻觀看類(lèi)app只能以橫屏模式運(yùn)行,以橫屏模式啟動(dòng)app是合乎情理的,即便當(dāng)前設(shè)備處于豎屏模式。這樣即便用戶以豎屏模式啟動(dòng)app,他們也知道把設(shè)備旋轉(zhuǎn)至橫屏模式。
2.避免用UI元素告知用戶需旋轉(zhuǎn)設(shè)備。以app支持的方向運(yùn)行已經(jīng)清楚地告訴用戶需要旋轉(zhuǎn)設(shè)備,不需要增加多余雜亂的UI元素。
3.支持橫屏和豎屏兩種模式。比如,如果app僅支持橫屏模式,不管Home鍵在左還是在右,用戶應(yīng)該都會(huì)使用它。如果用戶把設(shè)備旋轉(zhuǎn)180度,那么app***也能作出旋轉(zhuǎn)180度的響應(yīng)。
如果旋轉(zhuǎn)設(shè)備持有方向是用戶“輸入”(或者行為輸入)的一部分,那么你可以以APP獨(dú)有的方式處理。比如, 一款游戲可以讓用戶通過(guò)旋轉(zhuǎn)設(shè)備來(lái)移動(dòng)游戲塊,那么這款游戲就不能再對(duì)設(shè)備方向旋轉(zhuǎn)進(jìn)行相應(yīng)。這種情況下,在用戶進(jìn)入游戲的主任務(wù)之前,你的游戲應(yīng)當(dāng)支持 橫屏和豎屏兩種模式,允許用戶在兩者之間進(jìn)行選擇。在用戶開(kāi)始應(yīng)用的主任務(wù)后,你可以以app“特有”的方式來(lái)相應(yīng)設(shè)備方向的更改(此處特有的方式指的是 旋轉(zhuǎn)設(shè)備來(lái)進(jìn)行特定的游戲操作)。
在iPhone上,對(duì)設(shè)備方向更改進(jìn)行相應(yīng)的同時(shí)也要預(yù)測(cè)用戶的需求所在。用戶從豎屏模式旋轉(zhuǎn)為橫屏模式,通常是想要查看“更多內(nèi)容”。僅按比例縮放內(nèi)容會(huì)難以滿足用戶心理期望。相反應(yīng)該重新設(shè)計(jì)文本的行數(shù),需要的話,也得更改一些UI元素的布局,這樣用戶才能在屏幕上看到更多內(nèi)容。
在iPad上,app要盡量支持所有的方向,努力滿足用戶的需求。iPad更大的屏幕降低了用戶旋轉(zhuǎn)設(shè)備以 “查看更多”內(nèi)容的欲望。用戶并不十分關(guān)心設(shè)備的框架或者Home鍵的位置,因此他們不認(rèn)為設(shè)備應(yīng)該有一個(gè)默認(rèn)的方向。不管設(shè)備處于什么方向,你的app 應(yīng)該能為用戶提供良好的用戶體驗(yàn),應(yīng)該盡可能地鼓勵(lì)用戶從不同方向(橫屏或豎屏)與iPad進(jìn)行交互。
以下是iPad app設(shè)計(jì)相關(guān)的幾點(diǎn)規(guī)范:
1.考慮設(shè)備方向改變時(shí)如何展示輔助信息和功能。雖然重要內(nèi)容是視覺(jué)的焦點(diǎn),但你也可以通過(guò)對(duì)設(shè)備方向更改的響應(yīng)來(lái)展示次要功能和內(nèi)容。
比如iPad上的Mail應(yīng)用,賬戶和郵箱列表屬于次要內(nèi)容(選中信息是主要內(nèi)容)。橫屏模式下,次要內(nèi)容展示在左側(cè)面板;而豎屏模式下,次要內(nèi)容展現(xiàn)在彈出面板中。
還有個(gè)例子,一款iPad游戲以橫屏模式展示了一個(gè)矩形游戲棋盤(pán)。在豎屏模式下,棋盤(pán)頂部和底部多出了一些空間,那么這款游戲就需要重新設(shè)計(jì)以適應(yīng)豎屏顯示模式。不是簡(jiǎn)單地拉伸棋盤(pán),而要展現(xiàn)補(bǔ)充信息來(lái)填充額外的空間。
2.避免無(wú)端地改變布局。如果可能的話,不管設(shè) 備處于橫屏模式還是豎屏模式,都要為用戶提供始終如一的用戶體驗(yàn)。這樣當(dāng)設(shè)備旋轉(zhuǎn)時(shí),相似的使用體驗(yàn)可以讓用戶維持一貫的使用模式。比如,你的iPad app在橫屏模式下以網(wǎng)格的形式展示圖片,那么在豎屏模式下,就沒(méi)必要以列表的形式展示相同的信息。
3.可能的話,在設(shè)備方向旋轉(zhuǎn)的情況下,盡量避免重新定義信息內(nèi)容和重新設(shè)計(jì)文本。不管設(shè)備處于什么方向,應(yīng)用都應(yīng)該維持相似的信息格式。如果用戶在閱讀文本,他們旋轉(zhuǎn)設(shè)備后,要避免用戶因離開(kāi)原先閱讀的位置而感到迷惑。如果應(yīng)用內(nèi)容格式 更改是不可避免的,要用動(dòng)畫(huà)來(lái)幫助用戶明白其中的改變。比如設(shè)備在橫屏和豎屏模式之間進(jìn)行了切換,你必須增加或者刪除一些文字,這時(shí)候你可以考慮使用淡入 和淡出的動(dòng)畫(huà)效果。為了設(shè)計(jì)出適當(dāng)?shù)臋M屏豎屏方案,你可以思考下,在現(xiàn)實(shí)世界中你期望如何與內(nèi)容進(jìn)行物理性的交互。
4.為app橫屏和豎屏模式各自設(shè)計(jì)一個(gè)***的啟動(dòng)頁(yè)。不管當(dāng)前設(shè)備處于什么方向,一個(gè)平滑運(yùn)行的***的啟動(dòng)頁(yè)可以讓用戶忽略設(shè)備當(dāng)前的方向。與iPhone主屏形成了一個(gè)對(duì)比,iPad主屏支持橫屏和豎屏兩個(gè)模式,所以如果用戶剛從其他app中退出來(lái),那么他會(huì)喜歡以上個(gè)app的使用方式啟動(dòng)你的app。
弱化對(duì)文件和文檔的處理
iOS app可幫用戶創(chuàng)建和管理文件,但這并不意味著用戶不得不考慮iOS 設(shè)備上的文件系統(tǒng)。
在iOS app中,沒(méi)有一個(gè)類(lèi)似OS X系統(tǒng)中的Finder,用戶不應(yīng)該被要求與文件進(jìn)行交互,不應(yīng)該面對(duì)任何讓他們想到文件元數(shù)據(jù)或者儲(chǔ)存位置之類(lèi)的信息。比如:
1.一個(gè)會(huì)暴露文件層級(jí)的打開(kāi)或保存文件的對(duì)話框。
2.關(guān)于文件權(quán)限狀態(tài)的信息
盡量允許用戶在不需要打開(kāi)電腦iTunes的情況下管理文檔。考慮使用iCloud來(lái)幫助用戶訪問(wèn)他們所有設(shè)備上的內(nèi)容。App如何為用戶提供優(yōu)秀的iCould體驗(yàn)?可參考iCould一節(jié)。
如果你的應(yīng)用幫助用戶創(chuàng)建和編輯文檔,那么可以嘗試提供某種文檔選擇器,來(lái)幫用戶打開(kāi)現(xiàn)有文檔或創(chuàng)建新文檔。理想情況下,文檔選擇器應(yīng)該:
1.具有高質(zhì)量的圖形外觀。用戶應(yīng)該可以簡(jiǎn)單地通過(guò)屏幕上文檔的可視化形式來(lái)識(shí)別出他們想要的文檔。
2.讓用戶使用最少的手勢(shì)來(lái)做他們想做的。比如用戶可能通過(guò)橫屏滾動(dòng)或者網(wǎng)格的形式來(lái)操作文檔,并通過(guò)點(diǎn)擊來(lái)打開(kāi)文檔。
3.提供新建文檔動(dòng)能。文檔選擇器允許用戶點(diǎn)擊圖片占位符來(lái)創(chuàng)建新文檔,而不是讓用戶去某個(gè)地方創(chuàng)建新文檔。
TIP:你可以使用Quick Look預(yù)覽功能讓用戶在你的應(yīng)用中預(yù)覽文檔,即便你的app不支持打開(kāi)文檔。如何在應(yīng)用中提供該功能呢?可參考Quick Look一節(jié)。
給用戶一種安全感,讓他們知道自己的工作進(jìn)程始終會(huì)被保存,除非他們準(zhǔn)確地執(zhí)行取消或者刪除。如果你的應(yīng)用為用戶提供創(chuàng)建和編輯文檔的功能,要讓用戶知道無(wú)需他們自己動(dòng)手執(zhí)行保存。iOS app應(yīng)該承擔(dān)保存用戶輸入內(nèi)容的責(zé)任,無(wú)論是在他們打開(kāi)一個(gè)不同的文檔時(shí),或者與其他app進(jìn)行切換時(shí),app都能保存他們的輸入內(nèi)容。
如果你應(yīng)用的主要功能不是創(chuàng)造內(nèi)容,但你允許用戶在查看信息與編輯信息之間進(jìn)行切換,那么這時(shí)候你可以要求用戶對(duì)信息變更進(jìn)行保存。
這種情況下,在展示信息的視圖中提供一個(gè)編輯按鈕。當(dāng)用戶點(diǎn)擊編輯按鈕進(jìn)入編輯狀態(tài)后,你可以使用一個(gè)保存按鈕來(lái)替代編輯按鈕,并增加一個(gè)取消 按鈕。編輯按鈕的變化可以提醒用戶處于編輯狀態(tài),可能需要對(duì)內(nèi)容進(jìn)行保存,而取消按鈕則為用戶提供了不保存內(nèi)容變更的情況下推出編輯狀態(tài)的選擇。
這種變化可以提醒人們,他們現(xiàn)在正處于編輯模式,可能需要執(zhí)行保存操作,而“取消”按鈕則為他們提供了在不保存變更的情況下直接退出編輯模式的出口。
如果需要,可提供app的設(shè)置選項(xiàng)
有些app可能需要為用戶提供配置或設(shè)置的選項(xiàng),但是大多數(shù)app不需要這樣的設(shè)計(jì),或者可以延遲對(duì)這個(gè)環(huán)節(jié)的設(shè)置。成功的app可以讓用戶快速上手,或者在主要的UI中提供一些可調(diào)整的方法。
可能的話,避免把用戶引導(dǎo)至“設(shè)置”需求中。很重要的一點(diǎn),用戶必須首先離開(kāi)你額應(yīng)用才能打開(kāi)“Settings app”,你也不想鼓勵(lì)用戶這么做。
當(dāng)你能按照大多數(shù)用戶期望的那樣來(lái)設(shè)計(jì)app,你也就降低了用戶設(shè)置app的需求。如果你需要用戶的某些信息,可先查詢(xún)系統(tǒng)儲(chǔ)存的用戶信息,而不是首先要求用戶為你提供。如果你確定你必須在iOS app中提供相關(guān)設(shè)置,可查看iOS app編程指南的“The Settings Bundle”一節(jié)。
如果需要,盡量讓用戶在你的app中進(jìn)行操作。在app中集成配置選項(xiàng)可以讓變化同步表現(xiàn)出來(lái),這樣用戶不需要離開(kāi)你的app就能進(jìn)行相關(guān)設(shè)置。
如果需要,盡量在主要的UI中提供設(shè)置選項(xiàng)。如果主要UI代表著主要任務(wù),或者是用戶可能會(huì)頻繁地更改設(shè)置,這些情況下,把設(shè)置選項(xiàng)放在主要UI中就非常有意義了。如果用戶只是偶爾改變下app的設(shè)置,那就把它們放在單獨(dú)的視圖中。