Creative Vision

安卓系統(tǒng)、系統(tǒng)應(yīng)用、谷歌核心應(yīng)用，包括安卓開發(fā)者，都應(yīng)牢記以下總體目標(biāo)：

• Enchant me：多層次的優(yōu)美，流暢清晰的動畫、松脆有意義的布局和排版、連圖標(biāo)都是一種藝術(shù)；應(yīng)結(jié)合優(yōu)美、簡潔、功能目標(biāo)，創(chuàng)造出使用簡易但功能強(qiáng)大的APP；
• Simplify my life：突出重點(diǎn)，簡化操作；
• Make me amazing：用新鮮技術(shù)打動用戶，既簡潔又優(yōu)雅；

Android Design Principles

• Enchant Me
  • Delight me in surprising ways：漂亮的界面、精心設(shè)計的動畫、適時的音效...
  • Real objects are more fun than buttons and menus：讓用戶可以直接接觸、操作APP內(nèi)的事物
  • Let me make it mine：除了提供有價值、優(yōu)美的默認(rèn)外觀/設(shè)置外，也適當(dāng)提供自定義途徑，當(dāng)然，不能妨礙主要的功能
  • Get to know me：記住用戶的操作/設(shè)置/選擇，盡量避免用戶重復(fù)同樣的選擇，將以前的選擇放在快捷的位置
• Simplify My Life
  • Keep it brief：內(nèi)容描述盡量用短句，可讀性才強(qiáng)
  • Pictures are faster than words：圖片更能吸引注意力，以及表達(dá)內(nèi)容
  • Decide for me but let me have the final say：盡最大努力猜測用戶要執(zhí)行的操作，先設(shè)置為默認(rèn)值，而不是詢問用戶是否使用之；但要提供方便的取消功能，讓用戶擁有最終決定權(quán)
  • Only show what I need when I need it：將內(nèi)容分割為小塊，方便接收；隱藏不重要的信息
  • I should always know where I am：不同界面有明顯區(qū)別，完善的導(dǎo)航，用動畫暗示不同界面的關(guān)系，為執(zhí)行中的任務(wù)提供反饋
  • Never lose my stuff：記住用戶的設(shè)置/創(chuàng)造，并能輕易訪問，在不同設(shè)備之間提供同步功能
  • If it looks the same, it should act the same：將功能的區(qū)別在視覺上明顯體現(xiàn)出來，不要使用“模式設(shè)置”
  • Only interrupt me if it's important：只在重要的時候提醒/打斷用戶
• Make Me Amazing
  • Give me tricks that work everywhere：使用一些通用的快捷操作/手勢/標(biāo)志
  • It's not my fault：當(dāng)用戶操作不當(dāng)時，提醒需要溫和、易懂，掩蓋技術(shù)細(xì)節(jié)，能自動修正就是最好的
  • Sprinkle encouragement：將復(fù)雜操作拆分為簡單的小任務(wù)，即便作用細(xì)微，也要為操作提供反饋
  • Do the heavy lifting for me：讓新手用得像專家一樣
  • Make important things fast：將最主要的功能放置在最突出的位置

Material disign principles

• Material is the metaphor：給用戶真實事物的感受，真實觸感、紙與墨、貼近真實物理規(guī)律、光影、表面、移動、相互關(guān)系等，都是真實世界的暗示；
• Bold, graphic, intentional
  The foundational elements of print-based design—typography, grids, space, scale, color, and use of imagery—guide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience.
  An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.
• Motion provides meaning：移動用來聚焦注意力、保持一致性；反饋很微妙；轉(zhuǎn)變動畫很有效；

What is material?

• Environment
  • 模擬3D世界，引入z坐標(biāo)；
  • 模擬光影，結(jié)合key light和ambient light投射出的陰影；
• Material properties
  • 物理屬性
    • 只有寬高（xy）可以改變，厚度（z）固定為1dp；
    • 陰影體現(xiàn)的是元素的海拔高度（z），而不是顏色的變化；
    • 內(nèi)容是顯示在物質(zhì)上的，而不是增加了物質(zhì)的厚度；
    • 內(nèi)容的行為獨(dú)立于物質(zhì)，但是受限于物質(zhì)的邊界；
    • 物質(zhì)是實心的，輸入事件（點(diǎn)擊等）不能在物質(zhì)之間傳遞，只能在最上層的物質(zhì)上響應(yīng)；
    • 多個物質(zhì)元素不能同時在同一高度，要用陰影區(qū)分出它們的不同高度；
    • 物質(zhì)不可穿過，改變高度時，不能穿過另一個物質(zhì)；
  • 改變物質(zhì)
    • 物質(zhì)可以改變形狀
    • 物質(zhì)的變化都局限于其平面內(nèi)
    • 物質(zhì)不能折疊或者彎曲
    • 多個物質(zhì)元素可以合并為同一個，只要在同一高度
    • 物質(zhì)拆分、跨高度移動之后，又可以合并成一個
  • 物質(zhì)的移動
    • 物質(zhì)可以自發(fā)創(chuàng)建或銷毀
    • 物質(zhì)可以沿著任意軸移動
    • 沿著z軸移動通常暗示著和用戶的交互
• Objects in 3D space
  Material design中的元素和真實世界中的事物類似，可以疊起來，可以依附，但不能穿過，能投射陰影、反射光線；
  • 高度（Elevation）
    • 單位是dp，子元素的高度值是相對于父元素的，因為元素都是1dp厚，所以高度值是兩個元素的頂部的距離；
    • 元素?fù)碛心J(rèn)的高度，App bar: 4dp，F(xiàn)loating Action Button: 6dp，Card: 2dp；
    • 默認(rèn)高度不會改變，當(dāng)改變一個元素的高度之后，應(yīng)該盡快回到默認(rèn)高度；
    • 同類元素的默認(rèn)高度，在不同應(yīng)用之間應(yīng)該保持一致；但是在不同平臺上可能不一致；
    • 響應(yīng)式高度，改變高度以響應(yīng)用戶的輸入（普通、聚焦、按下等），或者系統(tǒng)事件；
    • 動態(tài)高度變化，相對于默認(rèn)高度，當(dāng)需要響應(yīng)時，變化一個偏移量，事件結(jié)束后回到默認(rèn)高度；
    • 不同的陰影用來暗示不同的功能、區(qū)分不同的元素；
    • 陰影的變化可以用來暗示元素移動的方向；
  • Object relationships
    • 元素之間的關(guān)系：父子關(guān)系；
    • 每個元素有一個父元素（系統(tǒng)，或者其他元素），每個元素可以有多個子元素；
    • 子元素從父元素繼承屬性，兄弟之間繼承的屬性是相同的；

Animation

• Authentic motion 動效可以用來表示元素之間的空間關(guān)系，功能，表現(xiàn)其優(yōu)美與流暢。
  • Mass and weight 動效的開始、結(jié)束、改變方向，都應(yīng)該和真實世界一樣，需要一個過程；
    • 加速、減速過程要自然，最好用平滑的（加速度的變化是均勻的）、對稱的加速減速過程；
    • 進(jìn)入和離開時的加速度，要能反映出元素的意圖，例如：減速就暗示著會停下來；移動的速度、方向變化，會引起用戶的注意，要考慮在動效的過程中，哪一部分應(yīng)該引起用戶最大的注意力；
    • 不同大小的元素，加速度理應(yīng)不一樣，小的元素加速度應(yīng)大一些；盡量使用curved motion；
• Responsive interaction
  • 用戶輸入：點(diǎn)擊、拖拽、聲音、鼠標(biāo)、鍵盤等，都應(yīng)給出視覺上的響應(yīng)；
  • Surface reaction：使用ripple API，僅僅產(chǎn)生view表面的視覺變化；
  • Material response：響應(yīng)的動畫要和觸點(diǎn)有聯(lián)系，如：動畫的起止點(diǎn)都在觸點(diǎn)處；產(chǎn)生和消失用大小動畫；點(diǎn)擊態(tài)高度增加；
  • Radial action：點(diǎn)擊事件需要有視覺反饋；點(diǎn)擊觸發(fā)的動畫要和點(diǎn)擊有聯(lián)系，例如動畫的起止點(diǎn)都在觸點(diǎn)處；
• Meaningful transitions
  好的動效設(shè)計，可以有效幫助用戶理解場景的切換、界面內(nèi)元素的布局與變化、界面內(nèi)元素的層級關(guān)系；
  • Visual continuity
    有助于引導(dǎo)用戶的注意力；涉及到的元素：將進(jìn)入場景的元素、將退出場景的元素、不同場景間共享的元素；相關(guān)閱讀：自定義Activity的切換動畫；當(dāng)設(shè)計動效時，需要考慮：引導(dǎo)用戶的注意力、通過顏色和共享元素把動效在視覺上關(guān)聯(lián)起來、精確地使用動效；
  • Hierarchical timing
    合理設(shè)計動效中元素之間的移動順序、時間序列，要突出最重要的元素；
  • Consistent choreography
    合理設(shè)計移動的路徑；相關(guān)閱讀：Use curved motion；
    最佳實踐
    • 盡量避免線性空間路徑，除非它就是需要這種限制；
    • 在不同的場景切換間，保持元素移動方向、路徑的連貫性；避免沖突、交錯的移動路徑；
    • 元素移動時，它們處于哪一高度？為何這樣設(shè)計？
    • 如果把每個元素的軌跡記錄下來，形成的圖像是否優(yōu)美？是否清晰？
    • 使用連貫一致的進(jìn)入、離開動效，強(qiáng)調(diào)元素之間的空間關(guān)系；
• Delightful details

Style

Layout

Components

Patterns

Usability

Resources