手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

實戰(zhàn)!Material Design的一次設計探索(翻譯)

2015-4-8    藍藍設計的小編

  

藍藍設計www.88yangsc.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

每一個扁平化界面設計,都是我們的心靈碰撞致力于最棒的 metro ui 設計

來源:http://www.zcool.com.cn/article/ZMTQ3MTI0.html#

 如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

【譯者注】作為一個移動界面設計師,如果你已經(jīng)細細讀過Material Design的設計指引,那么這篇文章是一篇很好的設計案例。如果你還沒有讀過,那這篇文章一定是個最容易最生動的起點,以小窺大得幫助你進入Material Design的世界。


  大家知道,google最近發(fā)布了Android的Lollipop系統(tǒng),系統(tǒng)的一個重大改動是引入了一種新的視覺語言:Material Design。隨著新系統(tǒng)的發(fā)布,安卓也發(fā)布了一個跨平臺的視覺、動效、交互設計的全面指引。10月7日,Google的Material Design體驗團隊組織了一個workshop,跟第三方app團隊分享了一些設計見解和小技巧,來指導他們在Android平臺的設計。

  在我看來,Android的這次改進,是在對的方向上又邁進了實實在在的一步。這個新系統(tǒng)目前已經(jīng)擁有足夠的一致性和靈活性,足以兼容任何新app的設計。所以呢,我在回來之后也重新回到我feedly的設計稿,嘗試將feedly的界面根據(jù)Material Design的設計指引,做一次重新設計的嘗試。

  這次嘗試,我的主要目的是創(chuàng)造一個完全根據(jù)Google的Material Design原則優(yōu)化的全新版本。這個版本可以指引設計團隊的未來設計。同時,我們還可以選用其中的一些設計點,立即落地并發(fā)布在以后的版本中。這次嘗試的第二個目的,是為feedly獲得一些用戶反饋。所以如果你有任何建議,請留下些評論。

  這篇文章里,不僅有這次重新設計的結果,也講述了過程中的設計思考。

  好了,進入正題,讓我們馬上開始Material Design的探索。

總覽

  在這次重新設計中,我著重設計feedly的幾個主要界面。下圖是設計前(上排)和設計后(下排)的對比圖。




  Material Design的設計指引要是全面描述的話,會太繁雜。所以在這里我提取出四個核心設計要點,這四個核心要點也是我用來重新設計的主要依據(jù)。


一、有形的界面(Tangible Interfaces)

  Material Design 設計原則

“在material design中,app里的每個像素都被呈現(xiàn)在一張紙(a sheet of paper)上。這張紙有單一的背景顏色,并且根據(jù)不同的環(huán)境可以被隨意縮放。一個典型的界面排版,可能由好幾張不同大小的紙張的重疊構成?!?/p>


設計原則在feedly的運用

  Feedly原有的界面已經(jīng)在運用類似的紙張隱喻,我們的主要設計元素是一疊疊的卡片,每個卡片上都有文章列表或文章。上滑卡片,下一張卡片就會被顯示出來。這種隱喻正好和Material Design可以完美契合。

Feedly的導航位于左側的面板上,面板可以被滑出,蓋在那疊卡片上。Feedly的“發(fā)現(xiàn)”界面也是同樣邏輯,只是位于右側。



二、讓設計更像印刷品


Material Design 設計原則

“印刷品設計的基本元素包括字體排印、網(wǎng)格、間隙、尺寸、顏色和圖像的運用方式。這些元素的意義遠不僅僅是好看而已,他們一起能創(chuàng)造層次、制造意義及帶來視覺焦點?!?/p>

設計原則在feedly的運用


8點網(wǎng)格

Google提供了一些很好的資源,來幫助設計師在設計app的時候,能以一種保有一致性的方式來縮放和安排視覺元素。但是你仍然需要了解這背后的總體網(wǎng)格系統(tǒng)。雖然這是一個8點的網(wǎng)格系統(tǒng),Android常常將邊距設置為16點。除了在各個界面貫徹網(wǎng)格系統(tǒng),我還將我們的雜志視圖頁面邊距設置成了16點(2×8)寬,將縮略圖設置為96點(12×8)寬。




顏色和圖像

  Google推薦在工具欄和狀態(tài)欄使用app的主色(主色一般是品牌的主色調(diào))。但因為feedly是一個閱讀應用,如果在這些區(qū)域運用我們的亮綠色,會對視線造成強烈的干擾,打擾用戶對實際內(nèi)容的閱讀。因此,我選擇在這些區(qū)域運用淺灰色,減少對內(nèi)容的打擾。

  在左邊欄中,我設計了一個運用亮綠主色的頂欄,頂欄用來突出顯示當日的熱點話題。這種方式即強調(diào)了關鍵信息,又變現(xiàn)了品牌色,我對這種方式還比較滿意。

  圖像也是設計中非常重要的元素。在雜志視圖中,我用了全出血尺寸的圖像來呈現(xiàn)需要深度閱讀的文章。在發(fā)現(xiàn)界面中選中某話題時,也運用了全出血的圖片作為界面頭部。



三、有意義的轉場


  Material Design 設計原則

“有時候,用戶會搞不清楚需要關注界面的哪部分,或在一個元素從A位置變換到B位置的時候感到迷惑。通過經(jīng)過精心編排的動效設計,可以在app使用過程中有效地引導用戶的注意力和視覺焦點,避免當布局變化或元素重新排布時引起的迷惑,同時提升整體的體驗美感。動效設計應該滿足功能性的目標,不僅僅是炫技。”

設計原則在feedly的運用

  打開文章和關閉文章,是feedly中最重要的轉場。在這個過程中,用戶在文章的列表和整篇文章內(nèi)容中切換。制作這個轉場動效時,我參考了Material Design設計原則中推薦的3個主要設計指引。


表面的反饋

  當用戶點擊文章預覽時,我運用了點擊波紋效果來提供即時反饋。波紋效果會擴大充滿整個文章預覽元素。同樣,當用戶關閉文章時,點擊波紋效果也會在頂欄中出現(xiàn)。


視覺連續(xù)

  在雜志視圖中的預覽圖片,會在界面轉換到文章視圖的過程中放大,并移動到相應的位置。通過這樣的轉場,用戶能完美感知到他所點擊的元素和最終界面元素之間的關系。但這其中有一個挑戰(zhàn):有時在預覽視圖中的圖片并不出現(xiàn)在文章的首屏,而是好幾屏之后才會看到。這時,我們不得不在轉場時將文章內(nèi)容漸顯,而將縮略圖漸隱來過渡。


有形的表面

這很可能是Material Design中最重要的要素。根據(jù)設計指引,我們需要將內(nèi)容處理為像打印在有形表面上一般。當用戶點擊了列表中的文章預覽區(qū)域時,這個模塊會向上升起,創(chuàng)造出屬于這篇文章的一個新的平面。同時考慮到視覺的連續(xù),這個新平面會放大,使其成為界面中最主要的一個面。在這個過程中,文章的內(nèi)容也漸顯出現(xiàn)。


綜合這些設計指引,我們得到的最終動效是:




根據(jù)相同的方式,我還設計了在發(fā)現(xiàn)面板中選中某個話題的動效:


四、自適應設計


Material Design 設計原則

“Material Design的最后一個核心理念,是創(chuàng)造出一個自適應的設計,他能適用在從小手表到大電視的任何尺寸的平臺上。一個自適應的設計,實際上是在同一個底層結構的體系中,演變出適應于不同尺寸界面的設計。在每一種設計中,尺寸和交互方式用最適合這個尺寸界面的方式展現(xiàn);但在顏色、圖標語言、層級和空間關系上卻保持不變。Material Design通過提供靈活的元素和樣式,幫助你搭建可自適應的界面?!?/p>

設計原則在feedly的運用

  從第一版開始,feedly就已經(jīng)是一個可自適應的應用。自適應時,最主要需要考慮的元素就是用來呈現(xiàn)文章的卡片??紤]如何將這些卡片排布在雜志視圖中,是一件很有意思也很有挑戰(zhàn)的事情。正如你在下圖看到的,不同尺寸的屏幕采用了不同的、但都很有趣的布局。



分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://www.88yangsc.com

存檔