中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

正文前

從Anroid 4.x開始的Android Design到現(xiàn)在的Material Design（原質設計），Android的設計語言再上升新高度。官方設計規(guī)范更細致，透徹地詮釋如何把設計規(guī)范融入品牌App的產(chǎn)品、設計、開發(fā)，我們更應注重平臺差異化，做出更適合用戶使用的Android App。

正文闡述Feedly（one of most popular feed readers）的設計聯(lián)合創(chuàng)始人Arthur Bodolec如何把Material Design融入Feedly的探索和領悟。

Arthur Bodolec

開始

Google 前不久正式推出Android Lollipop（5.0）,介紹了其一些重大的變化及一個名為Material Design的全新視覺設計語言。隨著這個新的系統(tǒng)，Android正帶來一個包含視覺、動畫效果和交互設計，并支持多平臺和設備的綜合規(guī)范。

在10月7日（2014年），我（Arthur Bodolec）參加了由Google主辦的研討會，Material Design用戶體驗團隊分享了這種設計語言在Android設計的深層次見解，并指點如何運用其在第三方App中。

我堅信這新的Android App設計方式會是一條正確設計道路。Material Design 架構有著高度一致性和靈活變化性，足以使自身融入任何App的設計。這就是我根據(jù)Material Design準則重新設計Feedly的原因。

這次探索之旅主要目標是創(chuàng)造一個全新的、融合Material Design而全面提升的Feedly，這會引導著我們團隊未來版本設計走向。在接下來數(shù)月中，我們將從Material Design中獲取靈感，并融入在我們新Feedly中。

第二個目標是從Feedly社區(qū)獲取用戶反饋。所以你們有任何意見的話，要立刻反饋給我們！

文章中，我不僅分享了這次設計的成果，而且還有一些我設計過程中的所思所感。

好啦，不再說太多，是時候深入Material Design！

概覽

在這次新設計，我負責Feedly主要的移動界面。以下是Feedly Android版之前和之后新設計的對比展示。

Material Design化

Material Design官方規(guī)范是很值得去細讀，但在Google的探討會上強調了4個核心準則，我將其運用在這次新設計歷程。

可觸用層面

Material Design準則

在Material Design里，每一個像素點都是由App在一個頁面上刻畫出來的。頁面有一個平滑背景顏色并可以作用于各種目的。一個典型的布局就是由多層頁面組成的。

準則融入Feedly

Feedly一致沿用著與整個App架構完美結合的隱喻感。它移動體驗的主要元素是一疊承載著文章的卡片。你可以向上滑動每張卡片切換展示文章內(nèi)容。

Feedly采用抽屜式交互（Drawer），在主頁面左側劃出導航面板，覆蓋在內(nèi)容卡片上面。同樣，從右側劃出搜索面板，你就可以去發(fā)現(xiàn)新的信息源。

多層級元素

左右側滑面板

印刷形態(tài)設計

Material Design 準則

新的視覺語言，在基礎元素的處理上，借鑒了傳統(tǒng)的印刷形態(tài)設計——排版、網(wǎng)格、空間、比例、配色、圖像運用等平面設計規(guī)范。在這些設計基礎下功夫，不但可以愉悅用戶，而且能夠構建出視覺層級、視覺意義以及視覺焦點。

準則融入Feedly

8dp 網(wǎng)格

Google為設計師提供了優(yōu)秀的設計資源，幫助他們調整App主要元素的大小和位置，讓App保持一致性；不過，你最好要理解整個網(wǎng)格架構系統(tǒng)。盡管采用8dp平方基準線網(wǎng)格，但在大多數(shù)時候，Android實際采用16dp作為邊緣間距。除了我們的邊緣抽屜式交互遵循以上規(guī)范外，我還把我們的雜志式視圖邊緣統(tǒng)一調整為16dp等一系列一致性設計。這些雜志式縮略圖為96px寬（12×8）。

網(wǎng)格基準線規(guī)范

色彩&圖像

Google推薦把你的品牌色作為App第一色彩用在操作欄和狀態(tài)欄上。由于Feedly是一款閱讀式App，如果使用我們明亮的綠色在這兩欄的話，將會十分打擾你們閱讀內(nèi)容。所以我選擇淡灰色去設計成一個較少打擾的操作欄。

在左邊的抽屜式交互，我采用了我們品牌色突出每天的熱門話題，這種設計方式是很贊的。

圖像是灰常灰常之重要。在雜志式視圖，我采用了鋪滿全局的圖片樣式，表達熱門評論的文章，還用在搜索面板的已選擇話題頂部。

品牌色運營 & 圖像化展示

有意義的轉場動畫

Material Design 準則

對于普通用戶來說，是關注一個應用本身、還是關注這個應用的元素從A點到B點轉變的過程，這種選擇往往有些難。謹慎編排的動畫可以在有多步操作的過程中有效地引導用戶的注意力，同時避免在版面變化或元素重組時造成困惑，及提高用戶體驗的整體美感。動畫式設計不僅應當優(yōu)美，更應當服務于功能。

準則融入Feedly

使用Feedly，打開或關閉一篇文章時會出現(xiàn)最重要的轉場動畫—從文章列表進入到單個文章整個內(nèi)容的過程。為了幫助創(chuàng)造這個轉場動畫，我遵循Material Design規(guī)范推薦的3個主要設計準則。

表層響應

當用戶觸摸文章預覽區(qū)時，我使用了觸控漣漪效果（類似于水波紋擴散的視覺效果）給他傳達即時交互反饋。觸控漣漪效果會覆蓋整個文章預覽區(qū)元素。

同樣，當用戶關閉文章時，觸控漣漪效果也出現(xiàn)在操作欄上（左上角箭頭icon）。

視覺延續(xù)性

當你點擊文章預覽區(qū)進入其中一篇文章時，文章的縮略圖片會按比例放大并移動到正文內(nèi)容區(qū)的正確位置展示。這保證了用戶能很好地理解觸摸的元素與最終所展示元素的關系。但有個難題，在一些情況下，文章的縮略圖片在正文部分段落后才出現(xiàn)。就這樣，當你不向下滑動正文時，圖片是不會展示在頁面上的。在這些情況下，當進入正文時，我們不得不展示正文內(nèi)容，圖片稍微隱藏處理。

可觸用層面

這可能是Material Design最重要的一個方面。在這準則下，我們想展示內(nèi)容是如何刻印上可觸用層面的。當用戶點擊文章預覽區(qū)時，我們會把點擊區(qū)域板塊升級作為一個層面，然后遵循著視覺延續(xù)性準則，我們把升起的層面按手機屏幕比例擴大作為整個頁面，文章正文就以淡入的效果展現(xiàn)出來。

把以上準則結合起來融入設計后，以下為最終動畫效果：

原文的動畫（有少量的過渡不流暢）

來自Google 動畫設計師John Schlemmer再優(yōu)化效果

在搜索面板選擇話題的動畫效果也采用同樣的設計準則。

選擇話題動畫（感覺還差點小細節(jié)）

自適應設計（響應式設計）

Material Design準則

Material最終核心概念是創(chuàng)造一個自適應設計，從手表到大型電視等不同設備，它可以

根據(jù)大小尺寸和形狀自適應設計樣式。自適應設計技術給我們認識到這樣一個憧憬–相同的底層系統(tǒng)架構，可以在不同設備呈現(xiàn)不一樣的視圖樣式。每個視圖樣式和交互都為設備大小尺寸定制和變化適用，而顏色、圖像、層級以及空間相互關系仍保持不變。Material Design架構提供靈活的組件和模式來幫助你建立一個可衡量的設計方式。

準則融入Feedly

Feedly第一版上線就具備自適應設計的能力。卡片式文章展示是最主要自適應板塊。而最有挑戰(zhàn)性和趣味性之一是不同大小尺寸的雜志式視圖。如下圖所示，每個屏幕的大小尺寸要考慮到不同的和觸目的排列布局。

自適應設計

譯者：孤獨的老米；譯文地址：簡書