起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識關(guān)于谷歌Material Design：你需要知道的一切
時下，“material design”總被設(shè)計師們頻頻提及。它是谷歌在I/O 2014上發(fā)布的新的設(shè)計語言。
不過，material design不僅是一種新理念，它可能讓設(shè)計師們顛覆性地重新思考網(wǎng)頁設(shè)計或程序設(shè)計。各大網(wǎng)站已開始采用谷歌的material design的文檔資料重新設(shè)計方案。那么，現(xiàn)在讓我們來學習什么是material design，以及想象未來的material design框架吧！
Material Design是什么？
Material Design是由谷歌的設(shè)計團隊創(chuàng)建一種設(shè)計語言，旨在幫助設(shè)計師們創(chuàng)建易用性和實用性較強的網(wǎng)站和應(yīng)用程序。這個概念基于一個不斷更新的公開文檔。該文檔會隨著域界以及技術(shù)更新而更新。 Material Design基于一系列的目標和規(guī)則之下，設(shè)想比實現(xiàn)容易得多。（不過沒關(guān)系，本文的主旨是希望大家在設(shè)計上引發(fā)更多思考，并且不斷改進。） 創(chuàng)建一種新的設(shè)計語言，糅合經(jīng)典設(shè)計原則以及科技創(chuàng)新性與可能性。 創(chuàng)建一個跨平臺和跨設(shè)備尺寸集成系統(tǒng)。移動規(guī)則是基本的，但觸摸、聲音、鼠標、鍵盤都是最佳的輸入方法。 材料即象征：視覺線索必須立足于現(xiàn)實。 醒目、形象、策劃性：基本的設(shè)計原理（字體、網(wǎng)格、空間、尺度、色彩和圖像的使用原則）必須引導視覺效果。 有意義的移動：移動的物體或動作不應(yīng)該干擾用戶體驗，而是保證用戶體驗的連貫性。 Material design的設(shè)計規(guī)范包含很多方面。（其規(guī)范文檔令人嘆為觀止。）它可以細分為大量的具體概念和處理辦法。Google制定出的是一套如何創(chuàng)建動畫，樣式，布局，部件，圖案及可用性的詳細規(guī)范。 這些規(guī)范源于Material design提出的對基本物理特性、形變特征和運動特點的理解。其指導理論是將材料元素置于基于現(xiàn)實的、近似的3D空間內(nèi)。從美學角度來說，Material design介于扁平與擬物之間。 Material design的顏色概念大多借用了扁平設(shè)計的趨勢。它配色大膽明亮。字體排版也跟simple sans serifs字體一樣遵循扁平主題。 根據(jù)Material design的官方文件：“色彩從當代建筑、路標、人行橫道以及運動場館中獲取靈感，由此引發(fā)出大膽的顏色表達激活了色彩，與單調(diào)乏味的周邊環(huán)境形成鮮明的對比。強調(diào)大膽的陰影和高光。引出意想不到且充滿活力的顏色?！?/p>
讓人欣喜的是這個顏色概念對對比色的運用。在每一個案例中，你都可以看到基本設(shè)計理論。谷歌提供一套完整可下載使用的配色作為基準色。這些用色理論基礎(chǔ)得讓人覺得谷歌是否以為設(shè)計師們都忘了配色理論了？ 字體排版指引同樣基礎(chǔ)。Roboto字體是所有應(yīng)用程序的默認字體，也是所有安卓應(yīng)用程序的默認字體——谷歌甚至還提供了字體下載鏈接。 material 設(shè)計項目的基本布局和結(jié)構(gòu)源于印刷品的設(shè)計概念。鼓勵設(shè)計師創(chuàng)建和使用基線網(wǎng)格和數(shù)學結(jié)構(gòu)把控整體的布局。 這個布局進一步劃分為更小的區(qū)域，以正確地布局頁面元素，獲得最優(yōu)的用戶交互體驗。（對于大量的元素如何布局，這里面也是有準則的。） Material design文檔在每一條布局準則下都提供了可下載的安卓模板。最終可能導致的結(jié)局是設(shè)計的模式化或讓app看起來太安卓。對于那些喜歡iOS系統(tǒng)的人們，誰還會喜歡這樣的設(shè)計。 基本元素 material design文檔里的每一種元素都被描述得很詳細，從如何創(chuàng)造它們到放置于屏幕的哪些位置。你簡直難以想象它有多細致。（準確的說這個列表包括19個組件） ? Bottom sheets 底部控件 ? Buttons 按鈕 ? Cards 卡片式 ? Chips 紙夾式 ? Dialogs 對話框 ? Dividers 分隔式 ? Grids 網(wǎng)格線 ? Lists 列表 ? List controls 列表控件 ? Menus 菜單 ? Pickers 選擇器 ? Progress and activity 進度條 ? Sliders 滑塊 ? Snackbars and toasts 快閃條 ? Subheaders 小標題 ? Switches 開關(guān) ? Tabs 選項卡 ? Text fields 輸入框 ? Tooltips 工具提示 喜歡這些控件的設(shè)計師可以下載一個Photoshop的矢量文件，它包含所有元素以及安卓的系統(tǒng)圖標，這個貼片集 附帶各種樣式并遵循文檔建議的網(wǎng)格系統(tǒng)。 可用性和互動性 “一個產(chǎn)品的易用性在于所有人（不論理解能力高低），都能夠瀏覽它，理解它，并能用它來實現(xiàn)他們的目標。因此，一個真正成功的產(chǎn)品應(yīng)該對盡可能廣泛的受眾易用。” Material design文檔通過一個非常有用的方式讓我們對交互性模式，可用性模式，以及可訪問性問題上開了眼界。雖然實際的美觀性對經(jīng)驗豐富的設(shè)計師來講是必不可少的，但可用性和交互性的概念也需要引起重視。 它的交互模式部分特別有用。它詳細介紹了一系列想法，即讓一些元素通用于整個設(shè)計。（試想一下，比如如何輸入時間或日期，或搜索功能怎樣工作。）這些是用戶期望使用到的一些最基礎(chǔ)的工具，并且這些工具如果能以特定的方式為所有用戶們發(fā)揮作用，無疑是有益的。 易用性則是另一個重要問題，material design文檔為易用性提出并提供了更好的選擇。想一下，那些可能沒有辦法通過聲音或顏色與web進行交互的用戶，那些沒有高對比度大屏幕、沒有屏幕只能語音控制、甚至沒有所有這些條件呢？這樣的用戶其實也占了相當大的比例。 正如每一個新趨勢和概念都會引來大批追隨者，已經(jīng)有大量的網(wǎng)址和移動端應(yīng)用在使用Material Design闡述的設(shè)計概念。下面的5個案例正是遵循Material Design的準則設(shè)計的，看看設(shè)計師們是如何應(yīng)用這些概念的。 Runtastic Running and Fitness Google Settings WhatsApp Evil Rabbit Weather Timeline Material Design的概念眾口稱好，界面設(shè)計的標準精準且新奇。但是大多數(shù)富有經(jīng)驗的設(shè)計師可能并不需要這些設(shè)計標準。在設(shè)計標準文件里，幾乎處處有欺騙你去下載的內(nèi)容。引起了大眾的反思，我們真的需要如此多的幫助嗎？ 設(shè)計標準讀起來讓人耳目一新，開闊了我們的新思路，同時也讓我們預(yù)見到未來類似的設(shè)計會在網(wǎng)頁上鋪天蓋地泛濫。然而，盡信書，則不如無書。我們可以在一定程度上運用這些標準，切不可太過于依賴這些標準。設(shè)計，尤其是基于流行趨勢和技術(shù)發(fā)展的設(shè)計，正在以我們所不能想象的速度在快速更替。 Material Design像其他的設(shè)計趨勢、框架和概念一樣，需要你獨立思考，考量它在你的設(shè)計文件中是否有用武之地。現(xiàn)在，你是否已經(jīng)開始應(yīng)用Material Design了嗎？ 來源:ui中國Material design的設(shè)計目標：
Material design的設(shè)計原則：
顏色與字體排版
布局和結(jié)構(gòu)的設(shè)計
Material Design 設(shè)計欣賞
總結(jié)
- 目前還沒評論，等你發(fā)揮！
