Android Design in Action —— 編與集
首先, 我們明確一下概念: 什麼是集合? 集合就是一組物體. 對於 Android 應用而言, 基本上集合就意味着一個列表的項目,
比如最常見的書單和購物清單, 等等.
說道集合, 我想大家都應該對上面的三種表現方法不陌生吧, 他們分別代表了最常見的基本佈局 —— 列表, 網格與 viewpager. 這期 Android Design 我們將着重研究前兩種.
我們將從兩個方面入手進行討論 —— 集合的使用與集合的變更. 其中, 集合的使用又包含了提純內容與響應式佈局, 變更包括了添加/消除, 重排序與物件操作.
集合的使用
提純內容
對於一個集合而言, 這些操作是非常重要的: 快速捲動, 首標, 改變視圖與排序:
在左邊的聯繫人應用中, 每個字母都被歸納爲一個分段, 每個分段都有一個置頂首標. 帶有首字母索引的快速捲動與置頂首標可以幫助用戶更快的進行模糊的範圍查看. 而在捲動時, 首標保持在列表的頂端, 同時 Indexed Scroll 也會提示當前的首字母;
中間的圖庫應用中, 爲了讓用戶方便的以不同方式查看縮略圖, 圖庫在 Action Bar 上提供了一個切換視圖的下拉菜單. 另外, 你可以注意到, 在當前文件夾的名字下方, 用小一號的字體標識了當前的視圖模式, 這也是一種不錯的提示方式;
右邊的第三方應用中, 它採用了一個 Action Bar 圖標附加下拉菜單提供了變更排序方式的功能. 對於 Android 而言, 這些都是很基本而常見的提純內容的方式與行爲.
接下來要講到的操作, 就是真正的”提純”操作了. 這些提純操作直接影響到項目, 會使屏幕中顯示的項目減少, 精煉. 他們更像是過濾器.
最常見的項目提純操作就是標準的搜索功能了. 他能直接顯示出與用戶輸入相符的項目. 比如在聯繫人中, 搜索能直接顯示出你搜索的聯繫人. 當你有很大的項目總量時, 搜索能提供非常不錯的效果;
第二種項目提純操作是集合過濾器. 作爲例子的 Pocket 提供了這樣的過濾功能, 它能讓列表中只剩下某種類型的項目, 比如文章, 視頻或者圖片. 值得注意的是, 過濾器作爲一個”操作”被放置在 Action Bar 中, 但是它同時又提供了下拉菜單, 所以具有一個 Spinner 的標識符 (右下箭頭) (就像圖庫等應用的分享操作一樣);
最後一種, 也是我最喜歡的一種, 是過濾器 Drawer. 當你採用了左側 Drawer 來提供應用內導航的時候, 有沒有思考一下, 右側是不是也能放一個 Drawer, 這個 Drawer 又能幹些什麼呢? 對於一個集合而言, 右側 Drawer 作爲過濾器的好處是顯而易見的. 這個過濾器能夠讓用戶在設置過濾閾值的時候實時預覽到結果, 對於用戶體驗而言是很大的改進. 另外, Drawer 也可以通過從右側邊緣劃入的手勢展開, 非常便利. 有一個需要注意的地方是, 如果你要在 Drawer 中使用示意圖中那樣的滑塊選擇器, 請一定要小心不要讓左右拉動滑塊的操作和對 Drawer 的操作產生衝突 —— 如果你用過 Feedly (版本 17) 的那個腦殘 Drawer, 你就會明白爲什麼我要特地強調這一點了.
關於右側 Drawer 還有一點需要注意的是, 在 Android Design 中, 導航用的 Drawer 是放在左邊的. 不要把導航 Drawer 放在右側. 右側 Drawer 的定製性更強, 可以變成你需要的任何東西.
響應式佈局
當我們談論集合的時候, 我們很難想象一個集合會以某一種固定的形式出現在你的面前. 各式各樣的集合會以不同的大小不同的形狀顯示在不同的設別上. 就以列表做例子, 列表在小屏幕上是個不錯的選擇, 但是當你在一臺大屏幕設備上橫屏查看一個被放大的列表, 那麼體驗就必然是很差勁的了 —— 空間被浪費了, 信息顯示也太多了.
於是, 怎麼解決這個問題呢?
最簡單的辦法就是, 把列表變成一個框格. 對於開發而言, 列表和框格都不是很有難度的東西. 只要爲不同的屏幕提供不同的佈局, 就可以很輕鬆的解決很多問題. 尤其好用的場景是, 當你的列表是由圖片和標題文字組成的時候.
第二個方法就是把框格中的內容交錯排布. 我們稱之爲錯落集合. 這就比單純的從列表變爲框格要來得更高級了. 這麼做會讓你的集合變得更漂亮. 同時, 你也可以給不同的項目以不同的權重, 讓用戶注意到這些項目中更值得注意的東西.
如果你巧妙的將列表, 框格和錯落集合搭配使用, 你就既能得到更多的展示空間, 又能擁有極佳的排版效果. 這方面的例子就是 Pocket. Pocket 在不同的屏幕上採用了不同的佈局方式: 在小屏幕上採用常規的帶圖列表, 7″ 平板上使用框格佈局,
更大的平板上則採用錯落集合. 通過這種方式, 他們避免了很多應用在平板上有過大的留白的問題 (以前的 ADiA 上反而是建議留白… Pattrn 就是採用了留白的例子).
當你考慮”在不同的設備上顯示內容”這麼個問題的時候, 不妨跳出以往的框架, 考慮響應式佈局. 最簡單的辦法, 就是在大屏幕上採用”列表|詳細”佈局. 這樣, 你就可以依然採用小屏幕上採用的列表佈局, 同時能夠在大屏幕上取得不錯的顯示效果.
當你需要不同大小的圖片的時候, 中心裁切會幫你大忙. 在犧牲掉一部分圖片的前提下保持原圖片的比例, 中心裁切可以幫助你很容易的製作框格視圖和錯落佈局中使用的圖片. 關於圖片的詳情, 我們會在以後的文章中介紹.
提到排版佈局, 不得不提到最近非常流行的一種設計風格, Google 將其稱之爲”由內而外式設計”. 所謂的由內而外的設計, 就是把內容放在最優先, 把你想要展示的內容放在最顯眼的位置, 而不是從一個空白畫布和網格開始, 生硬的往裏面填東西. 而這種設計風格的最直觀的體現, 就是卡片 —— 內容塊.
當我們開始考慮展示內容的時候, 我們會注意到內容有不同的形式. 相應的, 我們也應該選擇不同的展示方式. 就卡片而言, 我們可以採用大卡片, 中卡片或者小卡片, 豎排的卡片或者橫排的卡片. 這些卡片都代表着不同的內容. 當你確定了你將要採用哪些卡片 (展示方式) 之後, 你就可以開始把這些卡片放到屏幕上了 —— 在 Photoshop 中新建畫布, 開始工作.
多放幾個這樣的卡片, 你就做出了一個最基本的集簇.
在你做出了一個基本集簇之後, 你就可以在這個基本集簇上進行擴展了. 剛纔做的不同大小的卡片這時候便派上了用場, 利用不同大小或者橫豎的卡片來替換原本全部是大號的卡片, 能夠起到區分優先級與合理利用空間的作用.
當這些集簇在設備上顯示的時候, 你就需要意識到, 不是每個設備都能完整的顯示一個集簇. 而集簇的排布方式同時也應該順應頁面的捲動方式 —— 假設這裏採用的是縱向捲動, 那麼也許使用更多橫向的卡片會更加合適.
在更大的設備上, 集簇能夠被完整的顯示, 這時候更重要的就是如何排布他們才能製造更佳的視覺效果了.
綜上, 所謂的從內而外式設計, 就是從最小的控件開始, 以展示信息爲優先, 一步步向外擴展, 最後構建出一個合理的框架, 而不是先搭建框架, 然後再一步步向裏面填入內容.
舉個例子, 這是 Play Store 中的電影卡片. 對於一部電影, 最重要的展示信息就是海報, 標題, 價格與簡介. 於是我們製作了三種不同尺寸的卡片, 每一種都能充分的展示前述的四種信息.
之後需要做的, 就是在不同的設備上顯示合適尺寸的卡片了. 當然, 也許你會希望一次性顯示很多個項目, 那麼只要合理的將卡片整理組合成集簇即可.
合集的變更
有的時候, 用戶可以向集合中添加項目, 也可以刪除它們; 這些項目或許可以被移動, 被操作. 那麼如何使這些集合上的變更行爲變得更爲友好呢?
增刪項目
對於一個可以被用戶變更集合而言, 添加和移除項目是最爲基礎的操作.
往集合中添加項目的方法有很多, 一般情況下, 最常見的方式就是在 Action Bar 上提供一個”新建/添加”功能鍵. 比如說, 在上圖左的聯繫人應用中, 這樣的按鈕讓用戶創建一個新的聯繫人/聯繫人組;
不過這麼簡單粗暴的添加新項目方式顯然不是我們所推薦的. 很多時候, 我們都被一種想法束縛: 添加作爲一個動作/操作, 應該位於 Action Bar 中. 不過, 我認爲不妨換個思路來看看. 比起用一個專門的按鈕來提供新增功能, 不如試試行內式/嵌入式的新建方式. 比如, 圖中的 Play Music 在電臺列表的頂端提供了新建電臺的按鈕, 而 Keep 則做的更好, 它在列表的末尾提供了一個顏色略淺一些的”新建項目”來告訴用戶”這並不是一個項目, 而是類似幽靈的存在”, 而當用戶點擊這個項目的時候, 就相當於激活了這個項目, 讓它從幽靈變成實體. 可以看出, 行內式/嵌入式的添加功能可以更好的與已有項目融爲一體;
還有一種不錯的添加方式是空白狀態. 當用戶第一次安裝/開啓應用時, 他們面對的很有可能是一個空白的頁面. 那麼, 比起冷冰冰的告訴用戶”這裏沒有內容”, 爲什麼不利用空白狀態, 提示用戶自己創建內容以作爲新建項目的指示呢? 在圖中的 Keep 中, 內容區域的那個 Create a reminder 就是一個巨大的按鈕, 用戶觸摸這個區域, 就會進入新建提醒的界面. 這個方式對於大部分用戶自建內容的列表都適用.
當你沒法在 Android Design 給出的標準圖標中找到你需要的圖標時, 那麼就得考慮自己製作新圖標了. 製作 Action Bar 圖標有一種普遍的規則, 就像製造一個新的單詞一樣. 我們把圖標本身視爲詞根 —— 比如添加羣組中的羣組 (三個小人) —— 把操作視爲後綴 —— 比如添加羣組中的添加 (加號) —— 這麼一來, 一個圖標就做完了~
就像這樣, 很簡單吧? 這些圖標, 基本上都能讓人一看便明白他們的含義 (除了倒數第二個… 我可不覺得倒數第二個能夠一眼看懂… ).
用戶既然能夠添加項目, 那麼自然也要能移除他們.
首先要提到的是位於項目上的項目 Action Overflow. 這三個小點裏可以放下各種針對單個項目的操作. 有一點需要注意的是, 這三個小點雖然看起來非常小, 但是他們的觸發區域依然要有 48dp x 48dp 大, 甚至可以做得更大, 讓整個項目的右下角都成爲可觸發區域. 當用戶點擊這三個點之後, 一個 Overflow 菜單就會出現. 在 Play Music 中, 當你點擊三個小點的時候, 就會出現刪除操作的選項;
另外一種比較傳統的方式就是採用 Contextual Action Bar. 舉個例子, 在圖庫應用中, 當你長按選中某張圖片的時候, Contextual Action Bar 便會出現, 提供了全選, 分享和刪除等操作. 不過, 還記得我在上一篇文章裏是怎麼說 Contextual Action Bar 的嗎? 可見性不足. Contextual Action Bar 需要通過長按來喚出, 很多時候存在着可見性不足的問題. 所以在你打算採用這種方法之前, 最好再考慮考慮;
第三種移除項目的方式, 就是隨着 Android 4.0 一起亮相 (實際上 webOS 啥上早就有了…) 的滑動刪除/滑動忽略. 這種方案在縱向/橫向列表上的效果最佳. 當用戶開始向左/右或上/下 (取決於列表捲動方向) 滑動某個項目時, 項目會變成半透明並且漸隱. 而且, 這個手勢還可以和滑入/下滑動畫結合使用 —— 當用戶滑動消除某一項目之後, 原本在項目前後/左右的項目滑動填補到它原本的位置上, 以消除生硬感, 同時傳遞出這個項目已經從列表中移除的信息.
在這裏我必須再強調一遍, 雖然我們很喜歡滑動消除這個手勢, 但是這個手勢的可見性太低了. 請務必提供可以通過單擊完成的移除操作以提高可見性. 正面例子可以參考 Gmail (單擊頭像選取信息, 出現 Contextual Action Bar). 另外, 爲了讓用戶意識到滑動刪除的存在, 你可以在列表上使用”滑入”的動畫.
重排項目
除了增刪項目, 用戶也許還會希望自己重新排列表單的順序. 這對於用戶的個性化需求而言是十分重要的. 舉個最簡單的例子, 用戶非常需要對一系列的”任務”進行重新排序.
最簡單直接的方式就是提供一個拖動把手. Android 上標準的拖動把手是三道短橫線 (實際上 Roman Nurik 也說這三道短橫線就是縮小版的 Drawer 提示… 所以我們也叫它 Slider 滑塊),
當然, 你也可以使用自己的樣式, 比如兩列小方塊之類的, 讓人覺得摩擦力很大的圖示. 右邊的DashClock 中採用的圖示就是一種被稱爲”輪轍”的指示, 算是一種前段時間廣爲流傳的指示方式;
在左邊兩個圖示裏, Google Keep 和 Play Music 都採用了標準的把手. 當用戶按下這個把手的時候, 當前的項目便會略微浮起和/或高亮, 給用戶以”這個項目被提起來了”的反饋. 很重要的一點是, 當你的應用中, 列表頁左側是 Drawer 觸發區時, 如何才能確定觸發 Drawer 和移動項目的操作不衝突? 這個時候, 你應該先想想, 在這個地方, 究竟是重排項目更爲重要, 還是導航 Drawer 更爲重要? 如果是重排項目更重要, 那麼你大可以把拖動把手放在項目的右側, 或者告訴用戶”按住圖片可以拖動項目”, 或者採用之後介紹的長按拖動方式. 另外, 這個把手雖然看起來很小, 但是它的實際操作區域必須大於 48dp —— 甚至我建議開發者們應該把操作區域擴展到整個列表項那麼高, 只留 8dp 上下間距;
在 Google Keep 中, 我們還是用了另外一種方式來移動項目, 那就是長按拖動. 實際上, 在 Android 系統原本的邏輯中, 重排就是通過長按後拖動來進行的, 比如主屏圖標的重排. 當你在 Keep 中拖動一個項目的時候, 你會看到項目變成半透明狀跟隨你的手指移動, 而在框格中則有一個和項目一樣大的方框提示了當你鬆開手指之後項目會落下的區域. 同時, 其他項目也會隨着當前項目位置的變化而改變位置. 但是這種排序方式的壞處依然是可見性不足. 這點很難通過直觀的方式提示, 除了在用戶第一次使用的時候進行文字提示.
另外, 很重要的一點是, 請務對用戶的拖放操作進行恰當的反饋. 就像前面提到的, 讓項目”飛離”原先的高度, 高亮項目, 或者讓項目變成虛影, 都是很好的提示方式. 還記得 Android Design 的精髓麼? 擬真. 在現實中, 我們重排東西的時候, 都會把一個東西拿起, 移動到需要的位置之後, 放下. 請把同樣的操作反饋在應用中顯示出來.
項目操作
我想我在上一篇文章中似乎已經吐槽過 Android 這混亂的上下文菜單了. 通常情況下, 點擊項目本身會帶你進入項目詳情的界面, 或者執行一級操作. 那麼如果這個項目還附有次級操作呢?
首先依然是項目 Action Overflow. 這個菜單裏能放的東西很多, 不單單是刪除, 在 Play Store 裏你還可以直接安裝一個應用;
其次依然是 Contextual Action Bar. 和 上下文 Action Overflow 一樣, 在 Contextual Action Bar 中可以放各種各樣的操作. 甚至很多需要進入詳情界面才能執行的操作都可以放在 Contextual Action Bar 上. 當然, Contextual Action Bar 還有一個好處就是他能夠同時操作多個項目. 換句話說, 如果你想讓用戶同時操作多個項目, 那就只能選擇 Contextual Action Bar 了. 批量操作的效率是絕對高過另外兩種方式的;
還有一種很普遍的方式是在項目的右側放一個 Borderless Button 以提供一個最重要的次級操作. 這種方式的好處就是它是行內/嵌入式的, 關聯性最高, 可見性也很強. 不足之處就是隻能放一個操作, 而且不能批量操作. 需要注意的是, 如果你需要採用這種形式的按鈕, 請務必添加分隔線讓用戶明白, 這個項目上有兩個不同的操作區域. 另外, 這個按鈕整列都是可觸摸的區域. 另外需要注意的就是觸摸反饋. 理論上來說, 觸摸項目的話, 應該讓整行都發光, 而觸摸右側按鈕時應該只讓按鈕區域發光. 這裏有個很好的例子, 就是在聯繫人應用中的電話號碼項目. 每個號碼的右側都有一個短信圖標, 這就是電話號碼的次級操作了.