iOS7界面設(shè)計(jì)規(guī)范(13) - UI基礎(chǔ) - 與iOS的系統(tǒng)整合

2013-07-03 17:29:32來源:Be For Web作者:

突然就到了周日傍晚。你永遠(yuǎn)不會(huì)知道自己的生活在接下來的一周當(dāng)中能夠發(fā)生多少變化;各種不可預(yù)知性所帶來的更多是快感還是焦慮與不安,冷暖自知。相比之下,白天工作當(dāng)中那些需求列表與排期文檔就顯得那么可愛了,

突然就到了周日傍晚。你永遠(yuǎn)不會(huì)知道自己的生活在接下來的一周當(dāng)中能夠發(fā)生多少變化;各種不可預(yù)知性所帶來的更多是快感還是焦慮與不安,冷暖自知。相比之下,白天工作當(dāng)中那些需求列表與排期文檔就顯得那么可愛了,哪怕有各種臨時(shí)任務(wù)或需求變更,也最多只是讓人在身體上疲勞一些而已。但有些事就遠(yuǎn)沒這么簡(jiǎn)單了。

無名無狀的話說到這里。今天的這篇更新是iOS7界面設(shè)計(jì)規(guī)范預(yù)發(fā)布版本第一章的最后一個(gè)小節(jié)了;我這邊的漢化工程暫時(shí)告一段落。正如之前提到的,接下來會(huì)有我現(xiàn)在的一些同事參與進(jìn)來,大家一起貢獻(xiàn)更多的力量。屆時(shí),相關(guān)內(nèi)容可能會(huì)首發(fā)到團(tuán)隊(duì)博客當(dāng)中。那,眼下先感謝各位最近兩周的鼓勵(lì)與支持唄;從下周開始,沒有意外的話,Beforweb會(huì)繼續(xù)回到各種UX文章的更新上來。

重要:這是針對(duì)于正在開發(fā)中的API或技術(shù)的預(yù)備文檔(預(yù)發(fā)布版本)。雖然該文檔在技術(shù)精確度上經(jīng)過了嚴(yán)格的審核,但并非最終版本,僅供蘋果開發(fā)者計(jì)劃的注冊(cè)會(huì)員使用。蘋果提供這份機(jī)要文檔的目的,是幫助你按照文中描述的方式對(duì)技術(shù)的選擇及界面的設(shè)計(jì)開發(fā)進(jìn)行規(guī)劃。這些信息有可能發(fā)生變化,屆時(shí),你的設(shè)計(jì)開發(fā)方式需要基于最終版本的操作系統(tǒng)及文檔進(jìn)行相應(yīng)的調(diào)整和測(cè)試。該文檔或許會(huì)隨著API或相關(guān)技術(shù)在未來的發(fā)展而進(jìn)行更新。

譯文最后更新時(shí)間:2013-06-30

使用標(biāo)準(zhǔn)UI元素

盡可能使用UIKit框架定義的各種標(biāo)準(zhǔn)UI元素。使用標(biāo)準(zhǔn)UI控件而非自定義元素,你和你的用戶都會(huì)受益:

  • 如果iOS本身經(jīng)過重新設(shè)計(jì),那么標(biāo)準(zhǔn)的UI元素在系統(tǒng)更新時(shí)可以隨之自動(dòng)更新,而自定義的UI元素不會(huì)。
  • 人們會(huì)立刻了解怎樣使用你的應(yīng)用,因?yàn)樗麄円呀?jīng)習(xí)慣于標(biāo)準(zhǔn)的UI元素。

為了充分發(fā)揮系統(tǒng)標(biāo)準(zhǔn)UI元素的價(jià)值,你必須:

在使用任何一個(gè)標(biāo)準(zhǔn)UI元素的時(shí)候都要依照設(shè)計(jì)規(guī)范的指導(dǎo)。當(dāng)一個(gè)UI元素?zé)o論看上去還是用起來都符合用戶的期待時(shí),他們就可以依靠已有的經(jīng)驗(yàn)來更快更容易的使用你的應(yīng)用了。你可以在UI元素一章中找到各類UI元素的規(guī)范。

通常,不要為標(biāo)準(zhǔn)的交互行為創(chuàng)建自定義UI控件。首先問問自己,為什么要?jiǎng)?chuàng)建一個(gè)行為方式與標(biāo)準(zhǔn)UI控件完全相同的自定義控件?如果你只是想要一種訂制化的外觀,可以考慮通過UIKit框架當(dāng)中用來訂制外觀的API來改變標(biāo)準(zhǔn)UI元素的樣式,或是改變?cè)氐呐渖L(fēng)格。如果你想得到的行為與標(biāo)準(zhǔn)控件的行為有些許區(qū)別,那么首先要確認(rèn)能否通過屬性的調(diào)整來使標(biāo)準(zhǔn)元素完成同樣的目標(biāo)。如果你需要的是徹頭徹尾的訂制化交互行為,那么在設(shè)計(jì)自定義控件的時(shí)候,要確保它看上去不會(huì)與標(biāo)準(zhǔn)控件相似。

技巧:Interface Builder可以幫你很輕松的創(chuàng)建標(biāo)準(zhǔn)UI元素、使用訂制外觀的API、設(shè)置外觀屬性、向控件中添加系統(tǒng)預(yù)設(shè)或自定義圖標(biāo)等等?梢詤⒖糥code用戶指南了解更多詳情。

不要為系統(tǒng)預(yù)設(shè)的按鈕和圖標(biāo)賦予其他的含義。iOS提供了很多按鈕與圖標(biāo),你要讀懂相關(guān)的文檔,了解這些按鈕與圖標(biāo)在語義上的含義,不要單純依靠自己對(duì)它們外觀的理解。如果你發(fā)現(xiàn)預(yù)設(shè)的按鈕或圖標(biāo)無法準(zhǔn)確的代表你想要表達(dá)的功能含義,那么可以自己創(chuàng)建。你可以在欄按鈕圖標(biāo)一節(jié)當(dāng)中找到相關(guān)規(guī)范,幫你更好的設(shè)計(jì)自定義圖標(biāo)。

如果你的應(yīng)用可以帶來沉浸型的體驗(yàn),那么打造完全自定義的控件是合理的做法。因?yàn)槟阍趧?chuàng)建一種獨(dú)特的體驗(yàn)環(huán)境,對(duì)于用戶來說,探索與該環(huán)境進(jìn)行互動(dòng)的方式也是他們所期待的體驗(yàn)之一。

對(duì)橫豎屏切換的響應(yīng)

人們通常會(huì)希望能夠在任何定向方式下使用iOS設(shè)備,所以最好讓你的應(yīng)用可以在這些情況下做出恰當(dāng)?shù)捻憫?yīng)。

讓用戶在橫豎屏狀態(tài)下都能聚焦于最重要的內(nèi)容。這個(gè)目標(biāo)具有最高優(yōu)先級(jí)。人們需要在應(yīng)用當(dāng)中查看他們所關(guān)注的內(nèi)容,并與之交互;如果橫豎屏切換會(huì)使用戶失掉焦點(diǎn),他們便會(huì)感到迷失,并覺得喪失了對(duì)應(yīng)用的控制權(quán)。

通常,要讓應(yīng)用能夠運(yùn)行在各種定向模式當(dāng)中。人們可能會(huì)期望在任何定向方式下使用你的應(yīng)用,能滿足他們的期望是最好的。特別是iPad用戶,他們會(huì)希望你的應(yīng)用能夠運(yùn)行在他們當(dāng)前所使用的任何持機(jī)方式下。當(dāng)然,有些應(yīng)用確實(shí)只能運(yùn)行在豎屏或橫屏當(dāng)中;如果你的應(yīng)用是這樣,那么你應(yīng)該參考以下幾點(diǎn)原則:

  • 應(yīng)用在啟動(dòng)時(shí)只按照默認(rèn)支持的定向方式進(jìn)行加載,忽略當(dāng)前設(shè)備的屏幕方向。如果一款游戲或媒體瀏覽類型的應(yīng)用只能運(yùn)行在橫屏下,那么就直接以橫屏模式啟動(dòng),即使設(shè)備本身是處于豎屏狀態(tài)的;這種時(shí)候人們會(huì)明白需要調(diào)轉(zhuǎn)屏幕才能正常瀏覽內(nèi)容。
  • 避免在界面中通過UI元素提示人們調(diào)轉(zhuǎn)設(shè)備屏幕。直接按照默認(rèn)支持的定向方式啟動(dòng)應(yīng)用,這就已經(jīng)清楚的告訴用戶需要旋轉(zhuǎn)設(shè)備了,不需要再增加多余的UI元素進(jìn)行引導(dǎo)。
  • 同時(shí)支持兩種子狀態(tài)。譬如,如果你的應(yīng)用只能運(yùn)行在橫屏當(dāng)中,那么無論當(dāng)前橫屏的方式是Home鍵在左手邊還是右手邊,人們都可以正常使用;如果人們?cè)谑褂眠^程中將設(shè)備調(diào)轉(zhuǎn)180度,那么應(yīng)用最好也可以進(jìn)行響應(yīng),自動(dòng)調(diào)轉(zhuǎn)180度。

如果對(duì)于你的應(yīng)用來說,調(diào)轉(zhuǎn)屏幕方向是用戶輸入方式的一部分,那么你可以通過特定的方式進(jìn)行訂制化的處理。例如,在一款游戲當(dāng)中,人們需要通過旋轉(zhuǎn)屏幕來產(chǎn)生相應(yīng)的行為,那么游戲本身就不可以再響應(yīng)橫豎屏切換的規(guī)則了。這種情況下,你可以允許用戶在進(jìn)入主線流程之前仍然能夠切換子狀態(tài)(Home鍵在左手邊或右手邊),而一旦進(jìn)入主線流程,那么旋轉(zhuǎn)屏幕就只能用來觸發(fā)游戲當(dāng)中的特定行為。

在iPhone上,判斷用戶在調(diào)轉(zhuǎn)屏幕方向時(shí)的需求所在,并進(jìn)行響應(yīng)。人們從豎屏切換到橫屏?xí)r,通常是因?yàn)橄胍?ldquo;看到更多”。如果你只是簡(jiǎn)單的將內(nèi)容尺寸放大,那么未必能滿足用戶的期望。試著調(diào)整每一行文字顯示的字?jǐn)?shù),如果需要,甚至是重新調(diào)整UI布局,使其能夠呈現(xiàn)更多的內(nèi)容。

在iPad上,盡量支持所有的定向方式,滿足用戶的期望。由于iPad自身屏幕規(guī)格較大,所以上一條中提到的“用戶旋轉(zhuǎn)屏幕以便看到更多”的需求是相對(duì)較弱的。相比于iPhone,人們不太關(guān)注于iPad的設(shè)備框架限制,以及Home鍵的位置,所以在很多時(shí)候,人們不會(huì)將iPad看做一種有默認(rèn)定向方式的設(shè)備。如果可以,盡量讓人們?cè)谌魏纬謾C(jī)狀態(tài)下都能在iPad中與你的應(yīng)用進(jìn)行互動(dòng)。

在為iPad應(yīng)用設(shè)計(jì)橫豎屏響應(yīng)規(guī)則的時(shí)候,遵守以下幾點(diǎn)規(guī)范:

  • 考慮改變輔助信息或功能的展示方式。雖然你必須確保重要內(nèi)容始終能夠獲取用戶注意力的焦點(diǎn),但對(duì)于次要信息或功能,可以考慮隨著橫豎屏切換而改變呈現(xiàn)方式。以iPad內(nèi)置的郵件應(yīng)用為例,賬戶和郵箱列表就屬于次要信息(當(dāng)前選中郵件的詳情是主要內(nèi)容)。在橫屏?xí)r,次要信息被放置在左側(cè)面板中,而豎屏?xí)r,則是呈現(xiàn)在彈出面板里的。對(duì)于某些游戲,在橫屏狀態(tài)時(shí)的界面邊界到了豎屏當(dāng)中也許需要進(jìn)行重繪,這就有可能導(dǎo)致邊界上下留出額外的空余空間。這種情況下,可以考慮在這些空余空間當(dāng)中展示一些游戲輔助信息或?qū)ο蟆?/li>
  • 避免無意義的布局變化。盡量在所有定向方式下都提供具有一致性的體驗(yàn)。具有相似性的體驗(yàn)可以讓用戶通過已經(jīng)掌握的使用模式在橫豎屏當(dāng)中輕松操作。如果你的iPad應(yīng)用會(huì)在橫屏?xí)r以網(wǎng)格的形式展示圖片,那么在豎屏?xí)r,就沒有必要一定更改為列表形式。
  • 如果可能,在切換橫豎屏?xí)r盡量避免對(duì)信息內(nèi)容樣式的重新定義。盡量保持內(nèi)容具有相似的格式樣式,特別是對(duì)于文字內(nèi)容來說,不要讓用戶因?yàn)榍袚Q橫豎屏所導(dǎo)致的版式變化而無法找到之前閱讀到的地方。如果有些內(nèi)容樣式必須發(fā)生變化,那么要通過動(dòng)畫過渡效果來幫助人們更好的跟隨這些變化。例如,當(dāng)橫豎屏切換時(shí),內(nèi)容當(dāng)中必須增加或減少一行文字,那么可以考慮在增加和減少的過程里使用漸入和淡出的動(dòng)畫效果。為了讓自己設(shè)計(jì)出更好的橫豎屏切換方案,可以想象一下,如果你是在現(xiàn)實(shí)世界當(dāng)中與這些內(nèi)容進(jìn)行物理性的互動(dòng),那么它們有可能表現(xiàn)出怎樣的行為規(guī)律。
  • 為橫豎屏各提供一張單獨(dú)的啟動(dòng)圖片。這樣,無論人們?cè)谀欠N持機(jī)方式下打開應(yīng)用,都可以感受到平滑的啟動(dòng)體驗(yàn)。與iPhone當(dāng)中的系統(tǒng)首屏不同,iPad的系統(tǒng)首屏是支持橫豎屏切換的,人們有可能在任何方式下退出前面一個(gè)應(yīng)用,并繼續(xù)打開你的應(yīng)用。

弱化文件和文檔的處理過程

iOS可以幫助人們創(chuàng)建和管理文件,但這不意味著人們?cè)谑褂胕OS設(shè)備時(shí)必須思考文件系統(tǒng)方面的問題。

在iOS當(dāng)中,不存在類似OS X系統(tǒng)中的Finder這樣的應(yīng)用,用戶也不應(yīng)該被要求與文件直接打交道,特別是不該去面對(duì)任何會(huì)讓他們聯(lián)想到文件源數(shù)據(jù)或存儲(chǔ)位置一類信息的東西,例如:

  • 確認(rèn)打開或保存文件的對(duì)話框。
  • 關(guān)于文件訪問權(quán)限的信息。

盡量讓人們?cè)诓恍枰蜷_桌面端iTunes的情況下管理各種文檔。考慮使用iCloud來幫助用戶訪問他們?cè)诓煌O(shè)備上的內(nèi)容。要為用戶提供更好的iCould體驗(yàn),可以參考iCould一節(jié)。

如果你的應(yīng)用提供創(chuàng)建及編輯文檔的功能,那么可以嘗試提供某種“文檔選擇器”,幫助用戶打開已有文檔或創(chuàng)建新文檔。理想情況下,這樣的文檔選擇器應(yīng)該:

  • 具有高度的圖形化外觀。讓人們可以輕松的通過圖形化的界面外觀來識(shí)別出他們想要的文檔。
  • 讓人們使用最少量的手勢(shì)來完成目標(biāo)操作。例如,通過封面流或網(wǎng)格的形式組織文檔,讓用戶通過滑動(dòng)手勢(shì)進(jìn)行瀏覽,并通過點(diǎn)擊來打開。
  • 提供新建文檔的功能。不要讓用戶必須到其他地方創(chuàng)建新文檔,而是直接在文檔選擇器當(dāng)中點(diǎn)擊文檔圖形上的某種默認(rèn)占位圖片來直接創(chuàng)建。

提示:你可以使用Quick Look預(yù)覽功能讓用戶在你的應(yīng)用中對(duì)文檔進(jìn)行預(yù)覽,即使你的應(yīng)用并不支持這類文檔的打開操作。參考Quick Look一節(jié)了解更多。

給用戶一種安全感,讓他們知道自己的工作成果始終會(huì)被保存,除非他們主動(dòng)取消保存或進(jìn)行刪除。如果你的應(yīng)用提供創(chuàng)建及編輯文檔的功能,要確保這些數(shù)據(jù)無需用戶手動(dòng)執(zhí)行也可以得到保存。iOS應(yīng)用應(yīng)該承擔(dān)起幫助用戶保存輸入內(nèi)容的責(zé)任,無論是他們?cè)诋?dāng)前文檔仍然處于打開狀態(tài)的時(shí)候去查看另外一個(gè)文檔還是切換到其他應(yīng)用。

不過,如果你的應(yīng)用的主要功能并不是創(chuàng)造內(nèi)容,但你需要讓人們可以在查看信息與編輯信息在兩種模式間進(jìn)行切換,那么在這種情況下你可以提醒用戶對(duì)信息變更進(jìn)行保存。通常,可以在查看信息的視圖界面中提供“編輯”按鈕,當(dāng)用戶點(diǎn)擊了這個(gè)按鈕之后,就會(huì)進(jìn)入編輯狀態(tài),同時(shí)原來的“編輯”按鈕變?yōu)?ldquo;保存”和“取消”這兩個(gè)按鈕。這種變化可以提醒人們,他們現(xiàn)在正處于編輯模式,可能需要執(zhí)行保存操作,而“取消”按鈕則為他們提供了在不保存變更的情況下直接退出編輯模式的出口。

必要的時(shí)候提供設(shè)置方式

有些應(yīng)用可能需要向用戶提供安裝或設(shè)置選項(xiàng),不過多數(shù)應(yīng)用是不需要的,或是可以推遲必須進(jìn)行設(shè)置的環(huán)節(jié)。成功的應(yīng)用可以讓多數(shù)用戶立刻上手使用,而且會(huì)在UI當(dāng)中提供一些可以調(diào)整體驗(yàn)?zāi)J降姆椒ā?/p>

盡量避免將用戶打發(fā)到系統(tǒng)的“設(shè)置”當(dāng)中進(jìn)行操作。要記得,用戶必須首先離開你的應(yīng)用才能進(jìn)入系統(tǒng)的設(shè)置,你不會(huì)希望鼓勵(lì)用戶這樣做的。

如果你能按照目標(biāo)用戶群當(dāng)中大多數(shù)用戶的期望來設(shè)計(jì)產(chǎn)品,就可以減少這種設(shè)置方面的需求。如果你需要用戶的某些信息,可以首先試著從系統(tǒng)當(dāng)中存儲(chǔ)的用戶信息當(dāng)中進(jìn)行查詢,而不是讓用戶再次進(jìn)行輸入。如果你決定必須在應(yīng)用中提供設(shè)置功能,可以參考iOS應(yīng)用編程指南當(dāng)中的“The Settings Bundle”一節(jié)了解更多信息。

如果有必要,讓用戶盡量在你的應(yīng)用內(nèi)部進(jìn)行設(shè)置。在應(yīng)用內(nèi)提供設(shè)置選項(xiàng),可以讓相應(yīng)的變更可以直接體現(xiàn)出來,讓用戶即時(shí)的看到變更結(jié)果,而無需在你的應(yīng)用與iOS的“設(shè)置”之間進(jìn)行切換。

如果需要,盡量在應(yīng)用的主界面中提供設(shè)置選項(xiàng)。特別是當(dāng)設(shè)置選項(xiàng)對(duì)應(yīng)著應(yīng)用的主要任務(wù),或是用戶可能頻繁的變更設(shè)置的時(shí)候,最好將相關(guān)的設(shè)置選項(xiàng)直接放置在主界面當(dāng)中。如果你要提供的設(shè)置功能對(duì)用戶來說只是偶爾才會(huì)用到,那么就盡量將它們放在單獨(dú)的界面當(dāng)中。

贊助商鏈接: