內(nèi)容視圖(Content Views)
iOS提供了一些用于定制信息展示方式的視圖模板。每一種視圖方式都有獨(dú)特的屬性和行為方式,使得它非常適于展示某一類型的信息。
浮出層(只限iPad)

浮出層是一種臨時(shí)的視圖方式,可以通過(guò)用戶點(diǎn)擊控件或區(qū)域來(lái)召喚。
外觀和行為 。
浮出層會(huì)懸浮在主屏幕的上面。它還有一個(gè)箭頭,指向觸發(fā)它的控件或區(qū)域。浮出層上可以展示很多物體和視圖,例如:
表格、圖片、地圖、文本、web或者定制的視圖
導(dǎo)航欄、工具欄或tab欄
與當(dāng)前程序展示的內(nèi)容相關(guān)的控件或物體。
在iPad上,操作列表(action sheet)總是以浮出層的形式出現(xiàn)。
指南
你可以這樣使用浮出層:
與選中或成為焦點(diǎn)的的物體相關(guān)的信息或者物品列表
在豎屏模式下,展示原本橫屏模式下的左側(cè)分欄。這樣做時(shí),要找一個(gè)合適的按鈕去召喚它,給按鈕合適的名字,把按鈕放在屏幕頂部的導(dǎo)航欄或者工具欄上。
展示一個(gè)操作列表,里面包含于當(dāng)前屏幕內(nèi)容緊密相關(guān)的一系列選項(xiàng)。
不要提供關(guān)閉浮出層的按鈕。當(dāng)浮出層沒(méi)有繼續(xù)存在的必要時(shí),就應(yīng)該自動(dòng)消失。那么,到哪里才能判斷浮出層還有沒(méi)有利用價(jià)值呢?只要參考以下情況:
如果浮出層只是提供了一些對(duì)主界面有影響的選項(xiàng)或物品,那么,選擇一做完,它就應(yīng)該消失。這種行為與電腦上的“菜單”非常相似。記住,這種行為方式也適用于只顯示了操作列表的浮出層:用戶一點(diǎn)擊列表中的某個(gè)按鈕,浮出層就關(guān)閉。
有時(shí),浮出層在用戶做出選擇后,也不一定要消失。用戶可能想要多選、或者調(diào)整當(dāng)前選擇的屬性。
包含菜單或inspector(檢視窗口?)應(yīng)該在用戶點(diǎn)擊浮出層以外的區(qū)域(包括召喚它的按鈕)時(shí)關(guān)閉。在提供餐單的浮出層中,這種動(dòng)作意味著用戶放棄選擇,所以不要影響主界面。
在展示動(dòng)作列表的窗口里,這個(gè)動(dòng)作意味著“取消”。
如果要在浮出層上執(zhí)行任務(wù),要展示能完結(jié)或取消該任務(wù)并同時(shí)關(guān)閉浮出層的按鈕。一般而言,用于執(zhí)行編輯任務(wù)的浮出層上會(huì)有“完成”和“取消”。這些按鈕提醒用戶當(dāng)前是一個(gè)編輯環(huán)境,可以選擇保留或放棄輸入的信息。當(dāng)用戶點(diǎn)擊任何一個(gè)按鈕時(shí),浮出層都應(yīng)關(guān)閉。
如何合理的話,你也可以在用戶點(diǎn)擊其他區(qū)域時(shí)不關(guān)閉浮出層。若果用戶完成的這個(gè)任務(wù)很重要,這會(huì)是個(gè)好主意。否則,你應(yīng)該在用戶點(diǎn)擊浮層外區(qū)域時(shí)保存用戶輸入的信息,就像用戶點(diǎn)完成后你會(huì)做的那樣。
一般而言,在用戶點(diǎn)擊浮層外區(qū)域時(shí)保存用戶的工作。因?yàn)楦記](méi)有明顯的解散令,用戶可能是不小心碰到了。除非用戶點(diǎn)了取消,你才能舍棄他們的工作。
讓浮出層的箭頭盡量指向喚醒它的元素。這幫助人們記住浮出層是從哪兒冒出來(lái)的,與什么任務(wù)有關(guān)。
確保用戶不用看主界面上被遮住的信息就能完成浮出層里的任務(wù)。浮出層會(huì)遮住它后面的內(nèi)容,而且浮出層不能被拖到其他地方去。
確保同一時(shí)刻屏幕上只有一個(gè)浮出層。不應(yīng)該同時(shí)展示多個(gè)浮出層(或者定制的看起來(lái)或行為像是浮出層的東西)。不要同時(shí)展示級(jí)聯(lián)的或?qū)盈B的浮出層,不要一層套一層。
不要在浮出層上面一層展示模態(tài)視圖。除非是警告框,否則浮出層上面不要再展示東西。
可以的話,允許詠絮關(guān)掉浮出層,然后點(diǎn)一下就打開(kāi)另一個(gè)浮出層。這在基本不同的工具欄按鈕分別激活不同的浮出層時(shí)尤其有效,因?yàn)樗恍枰脩糇鲞^(guò)多的操作。
浮出層避免做得太大。太大的浮出層看起來(lái)像是把整個(gè)屏幕蓋住了。它只要和它包含的內(nèi)容一樣大就好,并且指向激活它的地方。
佳的浮出層寬度應(yīng)該大于320點(diǎn),小于600點(diǎn)。高度沒(méi)有限制,所以你可以用它展示很長(zhǎng)的列表。一般而言,含有任務(wù)或操作列表的浮出層好直接全展示出來(lái),不要讓用戶翻頁(yè)。注意,系統(tǒng)可能會(huì)把高度和寬度調(diào)整到適應(yīng)屏幕的大小。
在浮出層里,建議使用標(biāo)準(zhǔn)控件和視圖。一般而言使用標(biāo)準(zhǔn)控件和視圖的浮出層看起來(lái)會(huì)很棒,也容易理解。
使用定制背景色或紋理時(shí)要留意。確保標(biāo)準(zhǔn)界面元素在你定制的背景上看起來(lái)很棒,容易閱讀。
合適的話,在展示浮出層時(shí)可以動(dòng)態(tài)改變大小。你也許想在展示精簡(jiǎn)信息和擴(kuò)展信息時(shí)改變浮出層的尺寸。真要改的話,可以用動(dòng)畫(huà)。這會(huì)非常合適,因?yàn)樗梢员苊庾層脩粲X(jué)得好像是出現(xiàn)了一個(gè)新的浮出層,把舊的頂?shù)袅恕?
分欄視圖(只限iPad)
分欄視圖要在全屏狀態(tài)下同時(shí)展示并排的兩欄。

外觀和行為
分欄的左半部分在各種角度下都固定寬度320點(diǎn),用戶不能手動(dòng)調(diào)節(jié)分欄比例。
兩欄都可以拿來(lái)展示很多種信息。例如:
表格、圖片、地圖、文本、網(wǎng)頁(yè)或其他定制的視圖
導(dǎo)航欄、工具欄和tab欄
指南
你可以在分欄視圖的左側(cè)展示持久的信息,而在右側(cè)展示子級(jí)細(xì)節(jié)信息。在這種設(shè)計(jì)模式里,用戶在左側(cè)選擇項(xiàng)目,右側(cè)展示與此項(xiàng)目相關(guān)的信息。
一般而言,一個(gè)在橫屏下使用分欄視圖的程序在設(shè)備轉(zhuǎn)成豎屏后,就把左側(cè)分欄的內(nèi)容移到浮出層里。但你也可以不遵從此模式。如果在你的程序里合理的話,可以始終采用分兩欄展示內(nèi)容的方式。
避免右側(cè)分欄比左邊窄。雖然分欄的寬度隨你定,但右側(cè)分欄的寬度少于320點(diǎn)的話看起來(lái)就不太好。
避免兩個(gè)欄里都有導(dǎo)航欄。都有分欄的話就會(huì)讓用戶很難分辨兩欄間的主次從屬關(guān)系。
一般而言,左側(cè)分欄的選中態(tài)要始終展示。這幫助用戶理解左側(cè)分欄項(xiàng)目與右側(cè)內(nèi)容間的關(guān)系。這很重要,因?yàn)橛覀?cè)分欄的內(nèi)容始終在變,但總要保持與左側(cè)分欄選中項(xiàng)目的關(guān)系。
|