国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

大家好, 這是久違了的 Android Design in Action 欄目. 本期 Android Design in Action 介紹的是如何更好的, 合理的展現(xiàn)一個集合 (Collection).

首先, 我們明確一下概念:?什么是集合??集合就是一組物體. 對于 Android 應(yīng)用而言, 基本上集合就意味著一個列表的項目, 比如最常見的書單和購物清單, 等等.

說道集合, 我想大家都應(yīng)該對上面的三種表現(xiàn)方法不陌生吧, 他們分別代表了最常見的基本布局 —— 列表, 網(wǎng)格與 viewpager. 這期 Android Design 我們將著重研究前兩種.

我們將從兩個方面入手進行討論 —— 集合的使用與集合的變更. 其中, 集合的使用又包含了提純內(nèi)容與響應(yīng)式布局, 變更包括了添加/消除, 重排序與物件操作.

集合的使用

提純內(nèi)容

對于一個集合而言, 這些操作是非常重要的: 快速卷動, 首標, 改變視圖與排序:

在左邊的聯(lián)系人應(yīng)用中, 每個字母都被歸納為一個分段, 每個分段都有一個置頂首標. 帶有首字母索引的快速卷動與置頂首標可以幫助用戶更快的進行模糊的范圍查看. 而在卷動時, 首標保持在列表的頂端, 同時 Indexed Scroll 也會提示當前的首字母;

中間的圖庫應(yīng)用中, 為了讓用戶方便的以不同方式查看縮略圖, 圖庫在 Action Bar 上提供了一個切換視圖的下拉菜單. 另外, 你可以注意到, 在當前文件夾的名字下方, 用小一號的字體標識了當前的視圖模式, 這也是一種不錯的提示方式;

右邊的第三方應(yīng)用中, 它采用了一個 Action Bar 圖標附加下拉菜單提供了變更排序方式的功能. 對于 Android 而言, 這些都是很基本而常見的提純內(nèi)容的方式與行為.

接下來要講到的操作, 就是真正的”提純”操作了. 這些提純操作直接影響到項目, 會使屏幕中顯示的項目減少, 精煉. 他們更像是過濾器.

最常見的項目提純操作就是標準的搜索功能了. 他能直接顯示出與用戶輸入相符的項目. 比如在聯(lián)系人中, 搜索能直接顯示出你搜索的聯(lián)系人. 當你有很大的項目總量時, 搜索能提供非常不錯的效果;

第二種項目提純操作是集合過濾器. 作為例子的 Pocket 提供了這樣的過濾功能, 它能讓列表中只剩下某種類型的項目, 比如文章, 視頻或者圖片. 值得注意的是, 過濾器作為一個”操作”被放置在 Action Bar 中, 但是它同時又提供了下拉菜單, 所以具有一個 Spinner 的標識符 (右下箭頭) (就像圖庫等應(yīng)用的分享操作一樣);

最后一種, 也是我最喜歡的一種, 是過濾器 Drawer. 當你采用了左側(cè) Drawer 來提供應(yīng)用內(nèi)導(dǎo)航的時候, 有沒有思考一下, 右側(cè)是不是也能放一個 Drawer, 這個 Drawer 又能干些什么呢? 對于一個集合而言, 右側(cè) Drawer 作為過濾器的好處是顯而易見的. 這個過濾器能夠讓用戶在設(shè)置過濾閾值的時候?qū)崟r預(yù)覽到結(jié)果, 對于用戶體驗而言是很大的改進. 另外, Drawer 也可以通過從右側(cè)邊緣劃入的手勢展開, 非常便利. 有一個需要注意的地方是, 如果你要在 Drawer 中使用示意圖中那樣的滑塊選擇器, 請一定要小心不要讓左右拉動滑塊的操作和對 Drawer 的操作產(chǎn)生沖突 —— 如果你用過 Feedly (版本 17) 的那個腦殘 Drawer, 你就會明白為什么我要特地強調(diào)這一點了.

關(guān)于右側(cè) Drawer 還有一點需要注意的是, 在 Android Design 中, 導(dǎo)航用的 Drawer 是放在左邊的. 不要把導(dǎo)航 Drawer 放在右側(cè). 右側(cè) Drawer 的定制性更強, 可以變成你需要的任何東西.

響應(yīng)式布局

當我們談?wù)摷系臅r候, 我們很難想象一個集合會以某一種固定的形式出現(xiàn)在你的面前. 各式各樣的集合會以不同的大小不同的形狀顯示在不同的設(shè)別上. 就以列表做例子, 列表在小屏幕上是個不錯的選擇, 但是當你在一臺大屏幕設(shè)備上橫屏查看一個被放大的列表, 那么體驗就必然是很差勁的了 —— 空間被浪費了, 信息顯示也太多了.

于是, 怎么解決這個問題呢?

最簡單的辦法就是, 把列表變成一個框格. 對于開發(fā)而言, 列表和框格都不是很有難度的東西. 只要為不同的屏幕提供不同的布局, 就可以很輕松的解決很多問題. 尤其好用的場景是, 當你的列表是由圖片和標題文字組成的時候.

第二個方法就是把框格中的內(nèi)容交錯排布. 我們稱之為錯落集合. 這就比單純的從列表變?yōu)榭蚋褚獊淼酶呒壛? 這么做會讓你的集合變得更漂亮. 同時, 你也可以給不同的項目以不同的權(quán)重, 讓用戶注意到這些項目中更值得注意的東西.

如果你巧妙的將列表, 框格和錯落集合搭配使用, 你就既能得到更多的展示空間, 又能擁有極佳的排版效果. 這方面的例子就是?Pocket. Pocket 在不同的屏幕上采用了不同的布局方式: 在小屏幕上采用常規(guī)的帶圖列表, 7″ 平板上使用框格布局, 更大的平板上則采用錯落集合. 通過這種方式, 他們避免了很多應(yīng)用在平板上有過大的留白的問題 (以前的 ADiA 上反而是建議留白…?Pattrn?就是采用了留白的例子).

當你考慮”在不同的設(shè)備上顯示內(nèi)容”這么個問題的時候, 不妨跳出以往的框架, 考慮響應(yīng)式布局. 最簡單的辦法, 就是在大屏幕上采用”列表|詳細”布局. 這樣, 你就可以依然采用小屏幕上采用的列表布局, 同時能夠在大屏幕上取得不錯的顯示效果.

當你需要不同大小的圖片的時候, 中心裁切會幫你大忙. 在犧牲掉一部分圖片的前提下保持原圖片的比例, 中心裁切可以幫助你很容易的制作框格視圖和錯落布局中使用的圖片. 關(guān)于圖片的詳情, 我們會在以后的文章中介紹.

提到排版布局, 不得不提到最近非常流行的一種設(shè)計風格, Google 將其稱之為”由內(nèi)而外式設(shè)計”. 所謂的由內(nèi)而外的設(shè)計, 就是把內(nèi)容放在最優(yōu)先, 把你想要展示的內(nèi)容放在最顯眼的位置, 而不是從一個空白畫布和網(wǎng)格開始, 生硬的往里面填東西. 而這種設(shè)計風格的最直觀的體現(xiàn), 就是卡片 —— 內(nèi)容塊.

當我們開始考慮展示內(nèi)容的時候, 我們會注意到內(nèi)容有不同的形式. 相應(yīng)的, 我們也應(yīng)該選擇不同的展示方式. 就卡片而言, 我們可以采用大卡片, 中卡片或者小卡片, 豎排的卡片或者橫排的卡片. 這些卡片都代表著不同的內(nèi)容. 當你確定了你將要采用哪些卡片 (展示方式) 之后, 你就可以開始把這些卡片放到屏幕上了 —— 在 Photoshop 中新建畫布, 開始工作.

多放幾個這樣的卡片, 你就做出了一個最基本的集簇.

在你做出了一個基本集簇之后, 你就可以在這個基本集簇上進行擴展了. 剛才做的不同大小的卡片這時候便派上了用場, 利用不同大小或者橫豎的卡片來替換原本全部是大號的卡片, 能夠起到區(qū)分優(yōu)先級與合理利用空間的作用.

當這些集簇在設(shè)備上顯示的時候, 你就需要意識到, 不是每個設(shè)備都能完整的顯示一個集簇. 而集簇的排布方式同時也應(yīng)該順應(yīng)頁面的卷動方式 —— 假設(shè)這里采用的是縱向卷動, 那么也許使用更多橫向的卡片會更加合適.

在更大的設(shè)備上, 集簇能夠被完整的顯示, 這時候更重要的就是如何排布他們才能制造更佳的視覺效果了.

綜上, 所謂的從內(nèi)而外式設(shè)計, 就是從最小的控件開始, 以展示信息為優(yōu)先, 一步步向外擴展, 最后構(gòu)建出一個合理的框架, 而不是先搭建框架, 然后再一步步向里面填入內(nèi)容.

舉個例子, 這是 Play Store 中的電影卡片. 對于一部電影, 最重要的展示信息就是海報, 標題, 價格與簡介. 于是我們制作了三種不同尺寸的卡片, 每一種都能充分的展示前述的四種信息.

之后需要做的, 就是在不同的設(shè)備上顯示合適尺寸的卡片了. 當然, 也許你會希望一次性顯示很多個項目, 那么只要合理的將卡片整理組合成集簇即可.

合集的變更

有的時候, 用戶可以向集合中添加項目, 也可以刪除它們; 這些項目或許可以被移動, 被操作. 那么如何使這些集合上的變更行為變得更為友好呢?

增刪項目

對于一個可以被用戶變更集合而言, 添加和移除項目是最為基礎(chǔ)的操作.

往集合中添加項目的方法有很多, 一般情況下, 最常見的方式就是在 Action Bar 上提供一個”新建/添加”功能鍵. 比如說, 在上圖左的聯(lián)系人應(yīng)用中, 這樣的按鈕讓用戶創(chuàng)建一個新的聯(lián)系人/聯(lián)系人組;

不過這么簡單粗暴的添加新項目方式顯然不是我們所推薦的. 很多時候, 我們都被一種想法束縛: 添加作為一個動作/操作, 應(yīng)該位于 Action Bar 中. 不過, 我認為不妨換個思路來看看. 比起用一個專門的按鈕來提供新增功能, 不如試試行內(nèi)式/嵌入式的新建方式. 比如, 圖中的 Play Music 在電臺列表的頂端提供了新建電臺的按鈕, 而 Keep 則做的更好, 它在列表的末尾提供了一個顏色略淺一些的”新建項目”來告訴用戶”這并不是一個項目, 而是類似幽靈的存在”, 而當用戶點擊這個項目的時候, 就相當于激活了這個項目, 讓它從幽靈變成實體. 可以看出, 行內(nèi)式/嵌入式的添加功能可以更好的與已有項目融為一體;

還有一種不錯的添加方式是空白狀態(tài). 當用戶第一次安裝/開啟應(yīng)用時, 他們面對的很有可能是一個空白的頁面. 那么, 比起冷冰冰的告訴用戶”這里沒有內(nèi)容”, 為什么不利用空白狀態(tài), 提示用戶自己創(chuàng)建內(nèi)容以作為新建項目的指示呢? 在圖中的 Keep 中, 內(nèi)容區(qū)域的那個 Create a reminder 就是一個巨大的按鈕, 用戶觸摸這個區(qū)域, 就會進入新建提醒的界面. 這個方式對于大部分用戶自建內(nèi)容的列表都適用.

當你沒法在 Android Design 給出的標準圖標中找到你需要的圖標時, 那么就得考慮自己制作新圖標了. 制作 Action Bar 圖標有一種普遍的規(guī)則, 就像制造一個新的單詞一樣. 我們把圖標本身視為詞根 —— 比如添加群組中的群組 (三個小人) —— 把操作視為后綴 —— 比如添加群組中的添加 (加號) —— 這么一來, 一個圖標就做完了~

就像這樣, 很簡單吧? 這些圖標, 基本上都能讓人一看便明白他們的含義 (除了倒數(shù)第二個… 我可不覺得倒數(shù)第二個能夠一眼看懂… ).

用戶既然能夠添加項目, 那么自然也要能移除他們.

首先要提到的是位于項目上的項目 Action Overflow. 這三個小點里可以放下各種針對單個項目的操作. 有一點需要注意的是, 這三個小點雖然看起來非常小, 但是他們的觸發(fā)區(qū)域依然要有 48dp x 48dp 大, 甚至可以做得更大, 讓整個項目的右下角都成為可觸發(fā)區(qū)域. 當用戶點擊這三個點之后, 一個 Overflow 菜單就會出現(xiàn). 在 Play Music 中, 當你點擊三個小點的時候, 就會出現(xiàn)刪除操作的選項;

另外一種比較傳統(tǒng)的方式就是采用 Contextual Action Bar. 舉個例子, 在圖庫應(yīng)用中, 當你長按選中某張圖片的時候, Contextual Action Bar 便會出現(xiàn), 提供了全選, 分享和刪除等操作. 不過, 還記得我在上一篇文章里是怎么說 Contextual Action Bar 的嗎? 可見性不足. Contextual Action Bar 需要通過長按來喚出, 很多時候存在著可見性不足的問題. 所以在你打算采用這種方法之前, 最好再考慮考慮;

第三種移除項目的方式, 就是隨著 Android 4.0 一起亮相 (實際上 webOS 啥上早就有了…) 的滑動刪除/滑動忽略. 這種方案在縱向/橫向列表上的效果最佳. 當用戶開始向左/右或上/下 (取決于列表卷動方向) 滑動某個項目時, 項目會變成半透明并且漸隱. 而且, 這個手勢還可以和滑入/下滑動畫結(jié)合使用 —— 當用戶滑動消除某一項目之后, 原本在項目前后/左右的項目滑動填補到它原本的位置上, 以消除生硬感, 同時傳遞出這個項目已經(jīng)從列表中移除的信息.

在這里我必須再強調(diào)一遍, 雖然我們很喜歡滑動消除這個手勢, 但是這個手勢的可見性太低了. 請務(wù)必提供可以通過單擊完成的移除操作以提高可見性. 正面例子可以參考 Gmail (單擊頭像選取信息, 出現(xiàn) Contextual Action Bar). 另外, 為了讓用戶意識到滑動刪除的存在, 你可以在列表上使用”滑入”的動畫.

重排項目

除了增刪項目, 用戶也許還會希望自己重新排列表單的順序. 這對于用戶的個性化需求而言是十分重要的. 舉個最簡單的例子, 用戶非常需要對一系列的”任務(wù)”進行重新排序.

最簡單直接的方式就是提供一個拖動把手. Android 上標準的拖動把手是三道短橫線 (實際上 Roman Nurik 也說這三道短橫線就是縮小版的 Drawer 提示… 所以我們也叫它 Slider 滑塊),

當然, 你也可以使用自己的樣式, 比如兩列小方塊之類的, 讓人覺得摩擦力很大的圖示. 右邊的DashClock?中采用的圖示就是一種被稱為”輪轍”的指示, 算是一種前段時間廣為流傳的指示方式;

在左邊兩個圖示里, Google Keep 和 Play Music 都采用了標準的把手. 當用戶按下這個把手的時候, 當前的項目便會略微浮起和/或高亮, 給用戶以”這個項目被提起來了”的反饋. 很重要的一點是, 當你的應(yīng)用中, 列表頁左側(cè)是 Drawer 觸發(fā)區(qū)時, 如何才能確定觸發(fā) Drawer 和移動項目的操作不沖突? 這個時候, 你應(yīng)該先想想, 在這個地方, 究竟是重排項目更為重要, 還是導(dǎo)航 Drawer 更為重要? 如果是重排項目更重要, 那么你大可以把拖動把手放在項目的右側(cè), 或者告訴用戶”按住圖片可以拖動項目”, 或者采用之后介紹的長按拖動方式. 另外, 這個把手雖然看起來很小, 但是它的實際操作區(qū)域必須大于 48dp —— 甚至我建議開發(fā)者們應(yīng)該把操作區(qū)域擴展到整個列表項那么高, 只留 8dp 上下間距;

在 Google Keep 中, 我們還是用了另外一種方式來移動項目, 那就是長按拖動. 實際上, 在 Android 系統(tǒng)原本的邏輯中, 重排就是通過長按后拖動來進行的, 比如主屏圖標的重排. 當你在 Keep 中拖動一個項目的時候, 你會看到項目變成半透明狀跟隨你的手指移動, 而在框格中則有一個和項目一樣大的方框提示了當你松開手指之后項目會落下的區(qū)域. 同時, 其他項目也會隨著當前項目位置的變化而改變位置. 但是這種排序方式的壞處依然是可見性不足. 這點很難通過直觀的方式提示, 除了在用戶第一次使用的時候進行文字提示.

另外, 很重要的一點是, 請務(wù)對用戶的拖放操作進行恰當?shù)姆答? 就像前面提到的, 讓項目”飛離”原先的高度, 高亮項目, 或者讓項目變成虛影, 都是很好的提示方式. 還記得 Android Design 的精髓么?擬真. 在現(xiàn)實中, 我們重排東西的時候, 都會把一個東西拿起, 移動到需要的位置之后, 放下. 請把同樣的操作反饋在應(yīng)用中顯示出來.

項目操作

我想我在上一篇文章中似乎已經(jīng)吐槽過 Android 這混亂的上下文菜單了. 通常情況下, 點擊項目本身會帶你進入項目詳情的界面, 或者執(zhí)行一級操作. 那么如果這個項目還附有次級操作呢?

首先依然是項目 Action Overflow. 這個菜單里能放的東西很多, 不單單是刪除, 在 Play Store 里你還可以直接安裝一個應(yīng)用;

其次依然是 Contextual Action Bar. 和 上下文 Action Overflow 一樣, 在 Contextual Action Bar 中可以放各種各樣的操作. 甚至很多需要進入詳情界面才能執(zhí)行的操作都可以放在 Contextual Action Bar 上. 當然, Contextual Action Bar 還有一個好處就是他能夠同時操作多個項目. 換句話說, 如果你想讓用戶同時操作多個項目, 那就只能選擇 Contextual Action Bar 了. 批量操作的效率是絕對高過另外兩種方式的;

還有一種很普遍的方式是在項目的右側(cè)放一個 Borderless Button 以提供一個最重要的次級操作. 這種方式的好處就是它是行內(nèi)/嵌入式的, 關(guān)聯(lián)性最高, 可見性也很強. 不足之處就是只能放一個操作, 而且不能批量操作. 需要注意的是, 如果你需要采用這種形式的按鈕, 請務(wù)必添加分隔線讓用戶明白, 這個項目上有兩個不同的操作區(qū)域. 另外, 這個按鈕整列都是可觸摸的區(qū)域. 另外需要注意的就是觸摸反饋. 理論上來說, 觸摸項目的話, 應(yīng)該讓整行都發(fā)光, 而觸摸右側(cè)按鈕時應(yīng)該只讓按鈕區(qū)域發(fā)光. 這里有個很好的例子, 就是在聯(lián)系人應(yīng)用中的電話號碼項目. 每個號碼的右側(cè)都有一個短信圖標, 這就是電話號碼的次級操作了.

看到這里, 關(guān)于集合的內(nèi)容就都講完了. 再次大力感謝 Android Developers Relation Team 的?+Roman Nurik, 和?+Nick Butcher的?Android Design in Action?活動. 另外, 這期的題圖依然是又結(jié)畫的, 再次感謝~ 不久之后的下期節(jié)目再見~

EOF