wordpress Windows 开源 Python 程序员 google java 云计算 Firefox shell mysql 编程 微软 Ubuntu nginx php centos apache Android linux

《iOS應用軟件設計之道》—— 3.1 流向:從一個畫面到另一個畫面

3.1 流向:從一個畫面到另一個畫面

簡單地說,線框圖的主要困難在於指出如何將功能清單以一系列的二維畫面表達出來。困難的一部分是提供畫面間的流向,讓用戶感到合理、易於使用。下面看一些構建聰明的流向方案,可供采用。

3.1.1 導航控制器

導航控制器是iOS上最常見的畫面切換方法(參看圖3.1示例)。位於畫面頂端的流向條指示出當前位置,並包含一個回退按鈕。內容區的右向箭頭提供沿層次結構向下的方法。這種組織方式使任意數目的分支路徑成為可能,而且回到頂層的方法也是統一的。用戶在這種流向方案中,可以垂直滾動長長的信息畫面,水平方向則在畫面層次結構中穿梭。導航控制器只適合有限數目的層次結構。倘若你的層次結構需要用戶在四五個層次間變換畫面,就可能需要將其平整化。(參看第12章,該章解釋如何將界面的層次結構扁平化。)


screenshot

iOS用戶都很熟悉導航控制器。它們可以追溯到2001年,最早的iPod上就用到了導航控制器。iPod采用旋轉輪子來選擇一行內容。在iOS中,導航控制器始終是最可靠、可預見來呈現樹狀層次結構的信息的方法。用戶理所當然地接受這種方法,因為許多iOS應用軟件都在屏幕的頂部提供了導航條,這是用戶判斷自己正處於哪個畫面、如何回到某一畫面的首要位置。是的,導航控制器就是在iOS應用軟件中指引你去處的實用方法,你用它很少會出錯。
大部分導航控制器采用標準的表格視圖(本章稍後會說明)列出各畫面的選項。但這不是可以嘗試的唯一方法(參看圖3.2的其他方法示例)。下面是創建導航控制器經驗的僅有的幾條嚴格規則。
screenshot

向下一層的操作涉及觸摸某組件,該組件要麽帶一個右向箭頭,要麽顯示的內容明顯是用戶想要切換到的畫面提示。
在畫面左上角應該有明確的回退按鈕,標識有你回到的那個畫面的名字(而非只有“回退”詞語)。
在畫面間切換時,應使用水平的滑動動畫,向左滑動表示進入下級畫面;向右表示回到上一級畫面。
只要你遵循這些指導原則,用戶就會有舒適、熟悉的流向體驗。在此思路下,可以有些不同於普通表格視圖的呈現方式。
地圖,用戶可以觸摸某處來開啟一個標簽,然後點擊呈現按鈕(帶有箭頭狀標記)以切換至細節畫面。iPhone上的Maps應用軟件就是個明顯的例子,因為地圖在顯示地理信息方面,是個比列表恰當得多的方法。
一組富有表現力的大幅圖片,特別是通過圖片而非文字來標識你的條目時。這是個不用右箭頭標記的特例,因為它們會破壞每個圖標的表現。Podcasts的封面視圖就是個例子,人們對色彩絢麗的封面圖片的反應和情感比一組標題清單更強烈。
一組精心布置的內容預覽圖。對於專註某類內容的應用軟件,這個方法更富有表現力,比一組標題清單更招人喜愛。Instapaper應用軟件提供了網站各篇文章的條理性預覽,幫你決定閱讀哪篇。

3.1.2 分割視圖

分割視圖只在iPad上使用,它提供了同時呈現流向和內容的方法,有助於將流向的層次結構扁平化。iPad上大多數有分支的層次結構應用軟件都采用分割視圖,而且工作得很好。兩側內容的聯系簡單明了:左邊面板裏所選擇的條目,會在右邊面板裏顯示其詳細內容。無論哪一邊,都可以有帶水平流向的導航控制器,但都沒有導航功能。(是的,確實沒有。人們已經試過了,這樣會導致混亂的結果。)這意味著你有兩個選項,在分割視圖裏延伸導航功能(參看圖3.3有關這兩種方法的說明)。

screenshot

一個類似於Settings應用軟件,其側邊欄一直顯示頂層,內容區可以導航。這樣,它可以在大量的頂層條目間跳轉,如果必要,右側區域將顯示具體的條目內容。
另一種選項類似mail應用軟件,側邊欄可以導航,內容區總是顯示左邊側邊欄所選的條目內容。當你在右側要顯示定義明晰、內容一貫的內容,例如電子郵件時,這是個好方法。人們可以在其信箱結構中切換,只要他們觸摸某封郵件,右邊區域就能更新,顯示郵件的內容。
在采用分割視圖時要記住,你需要決定在垂直放置模式下發生什麽:要麽仍顯示分割視圖,要麽隱藏側邊欄,在觸摸左上角的按鈕時再調出側邊欄。在你采用剛才提到的Settings風格導航方式時,很容易得出答案:始終保持側邊欄可見。左上角的回退按鈕意味著你沒有地方放置側邊欄切換按鈕。(有些應用軟件,如Facebook,還是設法做到了。它隱藏了側邊欄,但在非頂層的其他層次,側邊欄總是無效的。)
而對於Mail風格的應用軟件,答案取決於時刻顯示側邊欄與用戶多大程度上想專註於內容區孰輕孰重。在Mail應用軟件裏,垂直放置模式是隱藏側邊欄的,因為用戶希望有個較大尺寸的消息顯示區域(參看圖3.4對這些選項的說明)。
screenshot

3.1.3 頁簽

頁簽條提供了在畫面底部呈現頂層導航的方式。對於需要快速訪問若幹頂層畫面的應用軟件,這是個理想的辦法。經典的例子就是iPhone上的Music應用軟件,它提供了藝術家、播放清單和音樂本等頁簽。聽音樂的人可能想快速跳轉到某個類別,然後定位到他們感興趣的內容上。頁簽條意味著即使他們已經離“藝術家”頂層好幾層,仍然可以通過即刻觸摸“專輯”頁簽,而在“專輯”層次結構中導航(他們也可以觸摸已選頁簽,回到頂層,再這麽做)。若采用頁簽條,應在整個應用軟件中提供頂層導航。頁簽視圖可以包含導航控制器,而不是其他一些辦法。
采用頁簽視圖將是個大的抉擇,因為頁簽條對使用該應用軟件的人,在大部分時間甚至整個時間都是可見的。你只能一次提供4~5個頂層類別。如果超過5個,用戶就要費心去想他最常用的是哪個,其他類別只好隱藏到“更多”頁簽內。即使你目前只有幾個頁簽,日後還要添加幾個頁簽,這個問題還會困擾你。除非你的應用軟件強烈受益於這種“馬上能到頂層”的導航方式,否則還是考慮換個一般的導航控制器吧。
除了那些專門任務(簡單地說,就是模態視圖)對應的專門畫面,每個畫面都需要劃出49點高的區域給暗黑色條(即使你想把它著色成別的顏色,仍應將此區域定義為較深色)。與只有較少組件的工具欄相比,頁簽條的尺寸、顏色和高亮效果應當在畫面的視覺組成方面起中心作用。這樣會加強頁簽條的角色意義,即在整個應用軟件中起頂層導航作用,讓用戶只需觸摸一次就能切換到層次結構中的不同分支。

3.1.4 分段控件作為頁簽

你可能經常需要對同樣的信息提供不同的視圖,或者同一畫面提供不同變體。也許將這些選項組織成類似頁簽的分段控件,而提供開關來切換它們。由頁簽條控制整個應用軟件,從一個頂層條目跳轉到其他頂層條目,但這種輕量級頁簽風格(稱為分段控件的頁簽)只對當前畫面的內容或呈現有影響。因此,你可以提供一個畫面的兩到三種風格。如果你通過浮動框來快速訪問一個以上的控件集合,這樣的分段控件也許正合適。iWork應用軟件在其檢查器浮動框裏充分利用了這個技巧。
不要太依賴這個技巧。當導航方案來回在導航控制器中水平滑動切換,又在分段控件的頁簽之間來回切換時,會讓人感覺隨意和糊塗。

3.1.5 多種個性

有個辦法可以優雅地把幾種完全不同的界面和導航結構融合到一個應用軟件裏。觸摸一個按鈕(通常位於屏幕左上角),整個界面就變成了新的界面,有時還帶有自己的導航方式。最傑出的例子是iBooks應用軟件,它有著全面的書店購物體驗以及閱讀體驗,並在這兩種體驗之間通過三維方式過渡。這種宏大而炫目的動畫,讓人感覺似乎是在進行重要的導航跳轉——“去書店”——而不是啟動另一個應用軟件。在買書的過程中,書翻回到書架時會在半空中盤旋,在邏輯上把兩邊關聯起來。這是個相當少見的方案,只有在確實需要時才這麽用。但在你需要把兩種相似而又截然不同的界面關聯到一起時,這種方案才是無價之寶。

3.1.6 模態視圖

當特定任務不太適合一般的導航層次結構時,可以使用模態視圖來應對。在打開模態視圖時,應用軟件的正常導航和功能暫時失效,應用軟件處於一個特定的“模式”,這就是其名稱的由來。典型的例子就是Mail應用軟件的編寫消息界面。這種模式隨處可用,與你處於層次結構的什麽地方毫無關系,所以它能即時將你帶出層次結構,以處理編寫消息的操作。然後再把你帶回原先所在的地方。
在iPad上,有若幹個選擇來呈現模態視圖(如圖3.5所示),每個方式都有自己的特色。
全屏:iPad屏幕相當大,所以全屏的模態視圖大有可為。當用戶要花費大量時間在此模式上,而可以忘卻主應用軟件時,這個選項很合適。全屏模態視圖占據整個設備的屏幕,它給人的感覺是應用軟件裏嵌套的應用軟件,專屬於某個特定的任務,嵌入Twitter應用軟件裏的網頁瀏覽器就是個例子。你可以很順暢地打開某人推送的某個鏈接,花上45分鐘來閱讀某篇有趣的文章,或者觀看視頻。這種體驗需要用到整個屏幕,其他應用軟件在後臺運行,而不會占據屏幕的任何部分。


screenshot

頁框欄:這是全屏風格的弱化,頁框欄有著有限的寬度。在垂直放置模式下,它看似全屏模態視圖,占滿全屏的768點寬度;但在水平放置模式下,它仍然只有768點寬度,讓其下面的界面可見但是灰的。Mail應用軟件的編寫郵件界面采用了這種方式。其體驗很類似於全屏風格。用戶能容易地花費大量時間和精力寫個郵件,所以應該有個安靜、專門的空間來做這件事。但它與全屏風格有個關鍵的區別:頁單不會讓其界面太寬。1024點寬度的編寫郵件區域會導致相當長的文本行,是排版方面很典型的失誤。眼睛從一行末尾移動到下一行開頭要走的距離太長,導致閱讀錯誤、認知疲勞(參看第4章有關排版的話題)。
表單欄:這是頁單風格的弱化。表單只占據540 × 620點的區域,在屏幕中間懸浮著,界面的其他部分則被灰掉。它不能脫離應用軟件的情境太遠,因此更加輕量。對於需要一些空間但只占用片刻的任務,如對某個網頁業務輸入信用賬號、導出文檔或者改變應用軟件整體範圍的設置,這個方法很有用。
當前情境:有時你需要在現有視圖裏呈現一個模式,例如,浮動框或分割視圖裏的一側。也許你想在內容窗格正顯示內容時,允許用戶訪問側邊欄;或者需要突破浮動框的導航層次結構,以執行某個特定任務。不應總用這種風格的模態視圖,但你在特殊情況下采用它將是件好事。
浮動欄(作為模態視圖的替代方案):浮動框往往不是模態視圖,但可利用它以輕量方式實現某個模態視圖。如果你在考慮模態視圖,不妨自問浮動框會不會更好。浮動框讓用戶更貼近情境,而不是將他們的操作與情境分割開。(若你想讓浮動框感覺更像模態視圖,則可以賦予它“取消”和“完成”按鈕,並且不允許點擊別的地方來關閉此浮動框。但這種設計已經不符合潮流了。)因此如果手頭的任務關系到屏幕上的現有界面,而不需要模態視圖那麽大的空間,就嘗試用浮動框吧。
在iPhone上,模態視圖就更簡化了:它們總是全屏的,因為沒必要再小了(盡管部分卷曲(partial curl)過渡風格會留下現有空間的大部分區域)。大部分時間你都應用直截了當的垂直過渡,即將模態視圖從屏幕底部滑動上來,在任務完成後將其滑走。要註意,過渡過程並未將上個屏幕推走,就像水平導航做的一樣,而是將其蓋住,因此在此模式完結後它仍應在原位置。用戶對那種類型的過渡會認識、理解成正常導航操作的臨時偏離。其他過渡也許會讓用戶猜想,他們是不是轉到了應用軟件的其他地方。請參看第6章,了解更多關於過渡的知識。

3.1.7 浮動框

浮動框是iPad上特定的小組件,乍看起來並不起眼,但作用非凡。它是個矩形的小窗口,指向調用它的對象。但低劣的浮動框會使iPad體驗變得煩瑣,因為有若幹個微妙的理由。
在桌面上你不需要像窗口那樣應對它。它無法移動,通常也只有需要的那麽大。
它在你需要的時機和位置出現。
只要你完成對它的操作,它會立即消失,要麽因為你走完了其微小的工作流,要麽你決定不再用它而將它點走。
它通常讓你仍處於相關界面的情境裏,浮動框的出現不會太幹擾你打開前的思緒。
它假定你在實時編輯,並想保存操作,除非手工取消或撤銷。點擊浮動框讓其消失並不會讓你放棄掌控。
所有這些功能組合起來,說明采用浮動框是種輕量級的做法。因此,界面可以設計得更“平靜”。可以容易地調出、使用某功能,並在用不到時不理它,無需時時都在屏幕上擺放著,所以你會很愜意地采用浮動框(第14章講述有關平靜界面的詳細內容)。
另一個關於浮動框的令人興奮之處在於,它們能夠包含自己的畫面和導航層次結構,與主應用軟件的流向截然相反。你可以將浮動框想象成iPad屏幕上小小的iPhone。這個iPhone有它自己的迷你應用軟件,處理大型應用軟件的某個方面。浮動框導航可以采用導航控制器、分段控件頁簽和模態視圖。

3.1.8 導航定制

迄今為止,我們已經查看了iOS提供的標準導航方式。倘若你有軟件工程的資源來任意支配,則你可以創建所設想的幾乎任何導航方案。但要謹慎。許多滿足特定需求的應用軟件會以聰明、原創的方式呈現某種體驗,但不是所有的應用軟件都有這種特定的需求。對原本用常規方法就能解決的問題,采取出乎意料的設計會適得其反。為了讓自己的應用軟件標新立異,而想使用某種聰明、獨特的導航方案,則要謹慎(參看第14章關於獨特設計的建議)。

 

3260418f1492cc261b549cff232b71057adba43f

在構思新導航方案時,一定要記住最重要的事情,就是它們要讓人感覺空間上有一貫性。常規的導航控制器在用戶看來輕車熟路,因為它們很容易就能勾勒出如何實現的地圖(這經常稱為意識模型)。更深的層次位於右邊,較高層次則留在左邊。模態視圖可從屏幕外滑入,在不需要時滑出屏幕。在iBooks應用軟件中,觸摸書架上的某本書可以讓它面向讀者放大,並打開書本;iWork應用軟件呈現類似的體驗,在點擊某個文檔時,會把這個文檔放大顯示,編輯完後再縮小到原始狀態。GarageBand做得更形象,它啟動時是同樣的文檔方格,但添加了各種各樣的樂器,還有垂直旋轉效果的音軌概覽。(請參看圖3.6所示的GarageBand導航方案地圖。)
即使用戶從來不有意識地考慮應用軟件的意識地圖,但若違反了這個意識地圖,用戶就會耽誤時間。所以在屏幕畫面變化時,要使用順暢、可感知的過渡,特別是變化很大時。導航空間表現得越簡單,就越容易讓用戶感到穩定而有連
貫性。

延伸阅读

    评论