iOS 7 App交互設(shè)計(jì)指南-UI Elements-Bars
可以說智能手機(jī)領(lǐng)域是蘋果開創(chuàng)并引領(lǐng),他們?yōu)閕Phone制定的交互與設(shè)計(jì)為其它智能機(jī)所沿用。蘋果起草的面向App開發(fā)者的交互指南同樣可以做為整個行業(yè)的規(guī)范,相信不久后Android App的設(shè)計(jì)也逐漸會向蘋果的扁平化改變——我們一直在按照蘋果的風(fēng)格來做Android不是嗎?
狀態(tài)欄(The Status Bar)
狀態(tài)欄展示了一些與設(shè)備相關(guān)的重要信息,以及當(dāng)前的環(huán)境。
?
外觀和行為
狀態(tài)欄是透明的。不管設(shè)備處于什么方向,狀態(tài)欄總是在屏幕的上邊緣,并且包含了用戶所需信息,比如網(wǎng)絡(luò)連接、時間和電視電量等。
?
使用指南
雖然你不會像使用其他UI元素那樣使用狀態(tài)欄,但理解它在你app中的功能非常重要。
?
隱藏狀態(tài)欄之前要三思。由于狀態(tài)欄是透明的,所以通常并不需要隱藏它。永久性地隱藏狀態(tài)欄意味著用戶必須離開你的app才能查看時間,或者了解網(wǎng)絡(luò)連接情況。
?
考慮隱藏狀態(tài)欄—以及其他app UI,當(dāng)用戶正在興致勃勃地全屏觀看視頻的時候。如果你有隱藏狀態(tài)欄的需要,要保證用戶點(diǎn)擊屏幕就能找回狀態(tài)欄和適當(dāng)?shù)腢I元素。避免使用自定義手勢來重新展示狀態(tài)欄,因?yàn)橛脩舨幌矚g探索并記住這些手勢,除非你有足夠充分的理由。
?
不要創(chuàng)建自定義狀態(tài)欄。用戶依賴于系統(tǒng)提供的一致性的狀態(tài)欄。雖然你可能在app中隱藏狀態(tài)欄,但也并不推薦使用自定義UI來代替系統(tǒng)提供的狀態(tài)欄。
?
為你的app選擇適合狀態(tài)欄內(nèi)容的顏色。系統(tǒng)默認(rèn)的狀態(tài)欄是黑色的,適合淺色的app內(nèi)容。顏色比較亮的狀態(tài)欄適合深色的app內(nèi)容。
?
盡可能不要在狀態(tài)欄下方放置讓用戶分心的內(nèi)容。尤其是,你不想暗示用戶應(yīng)該點(diǎn)擊狀態(tài)欄訪問內(nèi)容,或者激活app中的控件。
?
如果合適,顯示網(wǎng)絡(luò)活動指示器。網(wǎng)絡(luò)活動指示器可以出現(xiàn)在狀態(tài)欄上,用來向用戶展示網(wǎng)絡(luò)訪問正在發(fā)生。想了解如何在代碼中實(shí)現(xiàn)這個指示器,可以查看“
Network Activity Indicator”。
?
?
導(dǎo)航欄(Navigation Bar)
導(dǎo)航條能夠?qū)崿F(xiàn)不同信息層級間的導(dǎo)航,并能管理屏幕上的內(nèi)容。
?
?
?
外觀和行為
導(dǎo)航欄位于app屏幕的上方邊緣,導(dǎo)航欄之下。導(dǎo)航欄通常會居中排版展示當(dāng)前屏幕或者視圖的標(biāo)題。當(dāng)用戶在層級信息間來回瀏覽時,他們可以點(diǎn)擊返回按鈕或者輕掃設(shè)備邊緣返回上一個屏幕。另外,用戶可以點(diǎn)擊導(dǎo)航欄上的內(nèi)容特定控件來管理屏幕內(nèi)容。
?
導(dǎo)航欄是半透明的,欄中所有的控件都是無邊界的。
?
在iPhone上,導(dǎo)航欄經(jīng)常展示了整個屏幕的寬度,改變設(shè)備的持有方向可自動改變導(dǎo)航欄的高度。在iPad上,導(dǎo)航欄的高度不會按比例更改。
?
在iPad上,導(dǎo)航欄可以在某個視圖中展示,比如split?view的某個窗格,而不會貫通整個屏幕。
?
使用指南
導(dǎo)航欄可以用來在不同的視圖中導(dǎo)航,或者提供一些控件來管理視圖中的項(xiàng)目。
?
將當(dāng)前視圖的標(biāo)題作為導(dǎo)航欄的標(biāo)題。當(dāng)用戶瀏覽到新的信息層級中時,會發(fā)生兩件事:
1.圖像標(biāo)題變?yōu)樾聦蛹壍臉?biāo)題。
2.返回按鈕應(yīng)該出現(xiàn)在標(biāo)題的左邊,并且按鈕應(yīng)該展示上一個信息層級的標(biāo)題。
?
確保導(dǎo)航欄中的文字易讀。系統(tǒng)字體提供了最大的可讀性,不過你可以指定不同的字體,如果合適的話。
?
考慮在app的頂層的導(dǎo)航欄中放置一個分段控件。這么做有利于讓你的信息層級扁平化,可以讓用戶更容易發(fā)現(xiàn)他們要找的東西。如果你在導(dǎo)航欄中使用了分段控件,要確保選擇了正確的返回按鈕標(biāo)題。(更多使用指南,可參看“
Segmented Control”)。
?
避免額外的控件讓導(dǎo)航欄變得擁擠,即使看起來還有充足的空間。一般來說,一個導(dǎo)航欄最多包括當(dāng)前視圖標(biāo)題、返回按鈕以及一個用來管理視圖內(nèi)容的控件。相反,如果你在導(dǎo)航欄中使用了分段控件,那么導(dǎo)航欄不能展示標(biāo)題了,也不應(yīng)該再包含分段控件以外的任何控件。
?
要確保文本標(biāo)題按鈕有足夠的空間。導(dǎo)航欄中,如果左邊和右邊多個按鈕項(xiàng)目之間沒有足夠的空間,那么文本標(biāo)題就會擁擠到一起,很難讓人區(qū)分開。如果導(dǎo)航欄中的按鈕標(biāo)題看起來太接近,那可以用UIBarButtonSystemItemFixedSpace在它們中間添加適當(dāng)?shù)目臻g。(學(xué)習(xí)更多關(guān)于這個內(nèi)容的常量,可參看“
UIBarButtonItem Class Reference”)
?
根據(jù)文檔意義來使用系統(tǒng)提供的按鈕。更多信息可參看Toolbar and Navigation Bar Buttons。如果決定創(chuàng)建自己的導(dǎo)航欄控件,可參看“
Bar Button?Icons”。
?
如果合適,定制導(dǎo)航欄的外觀以配合app的外觀。比如,你可以提供一個自定義背景圖片或者給導(dǎo)航欄指定顏色和透明度。某些情況下,使用一個可縮放圖片是個不錯的選擇。關(guān)于“創(chuàng)建可縮放圖像”相關(guān)內(nèi)容,可查看“Creating Resizable Images”。注意要為iOS 7 app提供一個高度合適的背景圖片。了解更多信息,可在“iOS 7 UI Transition Guide(
中文版)(
英文版)”中查看“
Navigation Bar”這一節(jié)。
?
確定自定義導(dǎo)航欄的外觀和你app的外觀、風(fēng)格一致。比如,不要把一個不透明的導(dǎo)航欄和一個半透明的工具欄組合在一起。當(dāng)設(shè)備處于同一方向(橫屏或者豎屏)時,避免改變不同屏幕上導(dǎo)航欄的圖片、顏色或透明度。
?
要確保自定義返回按鈕看起來像返回按鈕。用戶知道標(biāo)準(zhǔn)的返回按鈕可以讓他們回到上一層級信息中。如果你決定用自定義圖片取代系統(tǒng)提供的,要確保你也提供了的自定義mask image。iOS 7可用它來讓按鈕標(biāo)題在轉(zhuǎn)場過程中顯露出來,或者消失。?
?
在iPhone上,將設(shè)備持有方向改變時導(dǎo)航欄高度的自動變化考慮進(jìn)去。特別的,確保自定義導(dǎo)航欄圖標(biāo)和橫屏?xí)r的稍窄一點(diǎn)的導(dǎo)航欄也很配。不要用編程的方式指定航欄的高度;你應(yīng)該充分使用
UIBarMetrics常量來保證你的內(nèi)容非常“合身”。
?
?
工具欄(Toolbar)
工具欄中的控件可以執(zhí)行跟屏幕或視圖上對象相關(guān)的動作。
?
?
?
外觀和行為
在iPhone上,工具欄總是出現(xiàn)在屏幕或視圖的底部邊緣,但在iPad上,它可以出現(xiàn)在上邊緣。 ?
?
工具欄是半透明的,工具欄上的項(xiàng)目間距均等地有序排列著。工具欄項(xiàng)目的精確設(shè)置可以根據(jù)不同視圖而有所不同,因?yàn)檫@些項(xiàng)目要針對當(dāng)前視圖的下下文來決定。
?
在iPhone上,設(shè)備從豎屏改為橫屏?xí)r,可自動改變工具欄的高度。在iPad上面,工具欄的高度不會因旋轉(zhuǎn)設(shè)備持有方向而改變。
?
使用指南
使用工具欄來提供一系列用戶可以在當(dāng)前環(huán)境中采取的行動。?
?
使用工具欄給用戶提供可以在當(dāng)前上下文環(huán)境中使用的指令。一個替代選擇是在工具欄上放置分段控件,從而方便用戶從不同視角訪問app的數(shù)據(jù)和應(yīng)用的不同模式(可查看“
Segmented Control”了解使用指南)。
?
如果你需要在工具欄上展示3個以上的項(xiàng)目,可使用圖標(biāo)。由于文本標(biāo)題按鈕比圖標(biāo)占用了更多空間,所以使用圖標(biāo)可以阻止標(biāo)題擁擠到一處。
?
確保文本標(biāo)題按鈕有足夠的空間。如果工具欄中的圖標(biāo)間沒有足夠的空間,文本標(biāo)題就會擠到一塊兒,用戶很難把它們區(qū)分開來。如果工具欄中的按鈕標(biāo)題看起來太接近,那可以用UIBarButtonSystemItemFixedSpace在它們中間添加適當(dāng)?shù)目臻g。(更多關(guān)于這個常量的內(nèi)容,可參看“
UIBarButtonItem Class Reference”)
?
?
在iPhone上,為因設(shè)備方向旋轉(zhuǎn)而產(chǎn)生的工具欄高度變化做好準(zhǔn)備。尤其是要確保你的自定義工具欄圖標(biāo)可以很好的適應(yīng)設(shè)備橫屏模式下較細(xì)的bar。不要以編程方式指定工具欄的高度,相反要充分使用UIBarMetrics常量來確定內(nèi)容適配得當(dāng)。
?
工具欄和導(dǎo)航欄按鈕(Toolbar and Navigation Bar Buttons)
iOS提供了許多用戶在工具欄和導(dǎo)航欄中看到的標(biāo)準(zhǔn)按鈕。
?
?
重要:跟所有標(biāo)準(zhǔn)按鈕和圖標(biāo)一樣,有必要根據(jù)其文檔意義來使用工具欄圖標(biāo)和導(dǎo)航欄圖標(biāo)。尤其是,注意根據(jù)語義意義來使用按鈕,而不是根據(jù)其外觀。即便關(guān)聯(lián)特定意義的按鈕改變了外觀,app的UI仍然有意義。
?
?
?
你也可以在工具欄中使用系統(tǒng)提供的Info按鈕:
?
標(biāo)簽欄(Tab Bar)
標(biāo)簽欄可以讓用戶在不容子任務(wù)、視圖以及模式中進(jìn)行切換。
?
外觀和行為
標(biāo)簽欄被置于屏幕的底部邊緣,并且應(yīng)該能在app的任何位置都能訪問到。標(biāo)簽欄是半透明的,并在標(biāo)簽上展示文本和按鈕,所有標(biāo)簽都是等距的。當(dāng)用戶選中一個標(biāo)簽,圖標(biāo)就會適當(dāng)?shù)母吡痢?/div>
?
在iPhone上,標(biāo)簽欄一次最多只能顯示5個標(biāo)簽;如果應(yīng)用有更多標(biāo)簽,那么標(biāo)簽欄會顯示其中四個,其余的會以列表形式出現(xiàn)在“更多”標(biāo)簽里面。
?
在iPad上,標(biāo)簽欄可以展示超過5個的標(biāo)簽。
?
一個標(biāo)簽可以展示徽標(biāo)。徽標(biāo)是一個紅色圓圈,包含白色文本,或者一個數(shù)字,或者感嘆號。用以傳達(dá)app特有的信息。
?
標(biāo)簽欄的高度不會因設(shè)備方向更改而改變。
?
使用指南
標(biāo)簽欄允許用戶從不同視圖訪問app的數(shù)據(jù)集或者跟app整個功能相關(guān)的子任務(wù)。當(dāng)你使用標(biāo)簽欄時需遵循以下指南:
?
不要將標(biāo)簽條用于控制屏幕內(nèi)的元素。如果需要這么做,請使用工具條。
?
不要使用標(biāo)簽欄為用戶提供可作用于當(dāng)前模式或者屏幕中元素的控件。如果你需要為用戶提供控件,可以用工具欄代替(使用指南可參看“Toolbar”)。
?
一般來說,使用標(biāo)簽欄來組織應(yīng)用層次信息。標(biāo)簽欄適合在應(yīng)用主界面中使用,可以很好地將你的信息層次扁平化,并且可以讓用戶在同一時間訪問幾個同級信息類別或者模式。
?
不要移除功能不可用的標(biāo)簽。如果標(biāo)簽在當(dāng)前上下文環(huán)境中不可用,那么展示一個禁用標(biāo)簽要好過移除標(biāo)簽。在某些情況下,如果你移除了標(biāo)簽,會讓用戶覺得app的UI不穩(wěn)定,不可預(yù)測。最好的方法是確保所有的標(biāo)簽都是可用的,但要解釋為什么有些標(biāo)簽是不可用的。比如,如果用戶的iOS設(shè)備上沒有任何歌曲,那么音樂app中的歌曲標(biāo)簽可用一個屏幕來解釋如何下載歌曲。
?
考慮為標(biāo)簽圖標(biāo)添上一個不顯眼的小徽標(biāo)來傳達(dá)信息。你可以在標(biāo)簽欄的圖標(biāo)上展示一個徽標(biāo)來指示與視圖或者模式相關(guān)的新信息。
?
根據(jù)文檔意義使用系統(tǒng)提供的標(biāo)簽欄圖標(biāo)。更多信息可查看“Tab Bar Icons”。如果你決定創(chuàng)建自己的標(biāo)簽欄圖標(biāo),可以參看“Bar Button?Icons(
中文?
英文)”。
?
如果合適,可以自定義標(biāo)簽欄的外觀。比如,你可以為標(biāo)簽欄和標(biāo)簽欄圖標(biāo)提供一個自定義的顏色,只要圖標(biāo)是系統(tǒng)提供的或者是自定義的模板圖片。你也可以為標(biāo)簽欄提供一個背景圖片(注意最好提供一個可縮放的背景圖片。了解更多關(guān)于“創(chuàng)建可縮放背景圖片”,可以參看“Creating Resizable Images”
中文?
英文)
?