應用程式結構
應用程式有許多種布局變化來滿足不同的需求。例如:
l 像計算機或相機的應用程式,是建立在一個螢幕裡只處理一個單一的核心功能。
l 像電話應用程式,是在幾個不同活動之間切換,它沒有更深的導航。
l 像Gmail或商店應用程式,有比較深的視圖導航,並每個視圖有一些資料。
應用程式的結構很大程度上取決於想展現給使用者的表面內容和任務。
一般結構
一個典型的Android應用程式是由頂層到詳細內容視圖或編輯檢視組成的。如果導航階層比較深而且複雜,使用目錄檢視串連頂層和細節視圖。
頂層視圖
的頂層應用程式通常由不同的意見,您的應用程式支援。的意見相同的資料或顯示不同的表述,您的應用程式暴露一個完全不同的功能方面。
應用程式的頂層通常包括其所支援的不同視圖。視圖既可以把相同資料用不同方式展示,又可以展現應用程式的不同功能。
目錄檢視
目錄檢視可以更深入下層資料。
詳細視圖/編輯檢視
詳細內容/編輯檢視是展現或建立資料。
頂層視圖
你的啟動螢幕的布局要特別注意。這是使用者啟動您應用程式看到的第一個畫面後,因此它應該是對新使用者和老使用者都具有同樣的體驗。
問問你自己:“什麼是典型使用者最有可能在應用程式想要做的”,並據此構建第一螢幕的體驗。
把內容向前
很多應用程式的核心都是內容的展現。避免只在介面上出現導航,要讓使用者在你的第一畫面中快速獲得他們想要的內容。第一屏要選擇具有視覺吸引力、適當的內容類型和螢幕大小的布局。
是Google商店應用程式的第一個介面,從第一個介面可以導航到應用程式,音樂,書籍,電影和遊戲的商店。這個介面也提供量身定製的推介和促銷活動,這些表面的內容豐富了使用者感興趣的體驗。從上面的搜尋操作欄很容易進行搜尋操作。
把導航和操作設定在動作欄上
在您的應用程式的所有螢幕顯示的動作欄要提供一致的導航和介面的主要的動作。
在頂層視圖要對動作欄做如下特別考慮:
l 使用動作欄顯示應用程式的表徵圖或標題。
l 如果應用程式頂層視圖包含多個視圖,或是經常要在不同使用者帳戶之間進行切換,為了確保使用者在不同視圖或不同帳號間導航容易,在動作欄增加視圖控制項。
l 如果您的應用程式可以讓人們建立內容,從頂層就有建立內容的入口。
l 如果內容是可搜尋的,動作欄中要包含 “搜尋”動作,使使用者可以穿過導航階層進行搜尋。
是電子郵件的應用,這是一個一個高效的、易用的、高密度資料列表應用。導航可以支援不同賬戶和最近訪問的標籤之間切換。在底部分割動作欄中可以建立一個新的郵件或搜尋。
為應用程式建立唯一的標識
為您的應用程式建立一個唯一的標識重要性高於動作欄。應用程式要通過資料相片順序,以及使用者如何與它進行互動通訊來建立比較獨特標識。特別是對於富媒體應用,要努力創造獨特的布局來展示你的資料,這將比千篇一律的簡單列表視圖要重要的多。
是3D 旋轉木馬式的封面來展示音樂,這是這個應用程式的一個獨特的標識。預設在最近試聽中展示使用者最後聽過的一些歌曲。
目錄檢視
一般而言對於深層次的以資料為主應用程式,並且資料是可以查看和管理的,一般是通過組織目錄檢視與詳細視圖的層級,來使你的應用程式層序變得沒那麼深的層次,使使用者感覺導航最小化。
即使從頂層視圖到細節視圖的垂直導航步驟通常取決於應用程式的內容結構,但還是有幾種方法可以減少視圖之間繁重的導航。
類別選項卡和資料顯示選項卡的組合使用
如果對類別熟悉或類別的數量不多將是非常成功的。它具優勢是除去了一級繼承關係,並且還保持在使用者關心的核心。豐富的資料類別之間的橫嚮導航會給你一種休閑的瀏覽體驗,而不會感覺是一個明確的導航步驟。
如果分類是熟悉的、可預測的或密切相關的,使用滾動標籤(如並非所有的項目同時顯示)。水平滾動標籤的數量要保持在一個可控範圍內,以減少航行的困難。經驗法則:不超過5-7標籤。
是Google商店應用程式,使用了標籤顯示類別選擇和類別內容。類別之間的導航可以左/右滑動。
選項卡類別如果沒有密切的關係,贊同固定標籤,同時所有類別都顯示出來,不要通過滑動。
是YouTube使用固定標籤切換,這些標籤都是相對無關的功能區之間進行切換。
允許貫穿層次
利用的捷徑使使用者能夠更快的到達自己的目標。為了讓使用者可以從頂層調用列表或網格視圖裡的資料項目的操作,在列表視圖上使用下拉式功能表直接進入資料項目操作。這可以讓使用者不用導航很深的層次就可以直接調用深層的操作動作。
是音樂應用程式,使用者可以在分類別檢視中(冊頁)對一個資料項目(歌曲)採取行動,,從而無需到瀏覽歌曲的詳細資料檢視。
適用多個資料項目
儘管目錄檢視主要是用來引導使用者到詳細內容視圖,但要記住,經常也對資料集進行操作。
例如,如果你允許詳細視圖中刪除一個項目,你也應該允許使用者在分類別檢視中刪除多重專案。分析哪些詳細視圖操作要適用於集合項目。然後,使用允許多選擇,應用這些動作到多重專案類別視圖。
詳細視圖/編輯檢視
詳細視圖允許您查看和操作資料。詳細視圖中的布局取決於所顯示的資料類型,因此在不同的應用程式中會有很大的不同。
布局
考慮到使用者會在詳細視圖中執行的操作來安排相應的布局。
應用程式的詳細視圖的目的是為了展現的通訊錄的選項。列表視圖可以高效地瀏覽和快速存取電話號碼、電子郵件地址和其他資訊。把電話和簡訊用一個分割線切分並組合在一起。
熄燈模式
像媒體和遊戲的沈浸式內容,給使用者最佳的體驗是全屏無幹擾的。但是,這並不意味著你不能還提供其它的動作,像共用,評論,搜尋。如果在一定短的時間內使用者沒有和內容作任何互動,動作欄和所有的系統UI自動消失,使使用者可以很好瀏覽內容。我們把這種叫熄燈模式。如果使用者要做一些操作,他可以觸控螢幕幕上,退出無人熄燈模式,而出現動作欄。
是Google圖書的詳細視圖是熄燈模式的最好體驗,通過熄燈模式和頁面翻轉動畫來讀取實際內容。
確保詳細視圖之間的導航高效
如果使用者想看看在序列中的多重專案,使項目內的詳細視圖之間可以進行導航。使用刷卡試圖或其他技術,如縮圖視圖控制項,實現這一目標。
Gmail使用刷卡視圖從一個詳細視圖到另一個詳細視圖。
除了支援滑動手勢讓頁面左右移動,也可以為雜誌提供一個縮圖視圖控制項,可以讓使用者快速跳轉到特定的頁面。
作者:Bruce Lee
出處:http://www.cnblogs.com/BruceLee521
本博原創文章著作權歸部落格園和本人共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出作者名稱和原文串連,否則保留追究法律責任的權利。