編輯導讀：如今，谷歌可以說是科技領域規模最大、最具有影響力的公司之一。正因為如此，它們的數字產品設計會對整個行業產生巨大的影響，成為人們競相模仿的榜樣。在該公司的UI&UX（使用者介面&使用者體驗）設計指南中，設計師們提到了10條原則，不管是iOS還是安卓系統都同樣適用。在這篇文章中，作者從這10條指南出發，加上自己的經驗和相關案例，在設計方面為大家提供一些建議，希望對大家設計產品有幫助。
圖片來自Material
在沒有其他方法的情況下，圖示可以成為理想的指示工具。——《谷歌材料設計指南》
在《Design of Everyday Things》一書中，有“以人為本的設計之父”之稱的唐·諾曼（Don Norman）闡述了他對圖示的理解：圖示就是代表動作、同時可以指示該動作以何種方式完成的元素。在數字產品中，我們很少會出現“左滑-刪除”這樣的文字指示，而是透過左滑的動作引出一個紅色的小垃圾桶來闡明“左滑就會刪除”這樣的設定。
在使用者和產品互動之前，插入動畫效果。——《谷歌材料設計指南》
如果我們希望一款數字產品有著極簡主義外觀，那麼我們可以藉助動畫來達到這一點。在上圖的例子中，最開始畫面中甚至不會出現垃圾桶的圖示。在我們手指滑動後，也就是人機互動的動作產生之後，才會出現這一垃圾桶，同時也會強化“滑動表示刪除”這樣的資訊。動畫效果有效簡化潔面、改善使用者體驗的功能。
2. 有動畫效果的圖示
圖片來自Medium｜製圖Eddy Gann
動畫可以展示圖示所代表的執行動作，從而增加流暢感和愉悅感。在兩個視覺效果之間插入帶有動畫效果的圖示，可以反映這兩個視覺效果之間的關聯。——《谷歌材料設計指南》
在兩個動作之間增加一個過渡的動畫，這個效果我們應該很熟悉。最簡單的例子就是“播放/暫停”按鈕。在點播放後，該圖示變成了暫停按鈕；點下暫停按鈕，該圖示又變成了播放按鈕。這個變化的圖示展示了播放和暫停兩個動作之間的關係。
這只是一個簡單的案例。現在想象一段更加複雜的經驗：比如將某個產品新增到購物車中，購物車圖示會出現裝進貨物的動畫效果；或者想象某一功能無法使用時圖示的彈出效果。
帶動畫效果的圖示本身並不複雜，我們可以在Adobe XD中完成：透過給圖示新增預設效果，或者加入淡入、淡出的效果即可。
動畫效果可以根據需要設計出簡單或複雜的運動軌跡。圖示雖然小，卻是影響使用者體驗非常重要的一環，我們可以透過設計複雜的運動軌跡來強調它的重要性。——《谷歌材料設計指南》
請記住，如果介面上所有的元素和圖示都在動，那麼使用者可能會不知所措。過度使用這一方法反而會削弱你想強調的重點。給圖示新增動畫應該適可而止。
3. 調色盤的生成和使用
調色盤生成工具｜圖片來自Medium
調色盤生成工具（Material’s Palette Generator）可以調出任何你需要的顏色，色相，亮度，色度等都可以透過一系列演算法調節出來，透過演算法調出的色彩實用又美觀。——《谷歌材料設計指南》
如果我們無法使用谷歌的調色盤生成工具，手動調色就會變成一件非常麻煩的事。調色盤生成工具最大的好處就在於它自動給你調出了同一種顏色的不同形態（如藍色從暗到明、從深到淺的形態），你就不需要再對照標準調色盤一點點矯正了。不過即使沒有這樣的自動生成工具，你也應該仔細檢查並矯正自己的調色工具。
4. 顏色- 在考慮如何使用顏色或顏色相關的問題時，指南中還提供了給介面選色相關的技巧和工具。——《谷歌材料設計指南》
- 選擇令人難以忘記的色彩，以增強產品的品牌風格。——《谷歌色彩設計指南》
顏色對於數字產品的重要性，就像是鹽和胡椒粉對吐司的重要性一樣——新增太多了，就蓋過了吐司自身的風味；太少了，味道就會變得寡淡。在選擇配色以求增加品牌視覺效果時，一定要仔細考慮清楚給哪裡新增什麼顏色。
透過有節制地在APP裡新增顏色，你還可以突出相應的內容，如文字、圖片、按鈕等。你可能已經注意到了，Instagram和Twitter上面佈滿了色彩鮮豔的圖片和圖示，與之相對應，它的使用者介面非常簡潔，不會喧賓奪主。
色彩也可以是一種互動元素，要考慮它們在什麼地方互動，希望達到什麼效果。最重要的元素要用最突出的色彩。——《谷歌色彩設計指南》
當一個元素的色彩與周圍環境形成對比時，使用者會更理解它的重要性。我們可以給重要的元素增加“色彩權重”，這個概念是說增加色彩的飽和度，使用更加大膽、更吸引人的色彩，製造視覺衝擊。
另外，我們可以將重要的資訊加粗顯示，讓它在第一時間進入使用者的眼睛。簡單來說，如果一種資訊比另一種資訊更重要，那麼前者就要在色彩和篇幅上勝過後者，好讓使用者直觀地進行區分。
5. 文字型別生成工具
文字型別生成工具｜圖片來自Medium
Google Fonts是谷歌研發的一款文字型別生成工具，可以使用它來調節字型、大小等。您可以根據需要調整和最佳化產品的文字設計。——《谷歌材料設計指南》
字型設計是一門藝術，它不僅關乎選擇某一種具體的字型，更設計如何使用特效、粗細調節、比例調節等，目的是增加介面的可讀性，從而增強產品的實用性。谷歌研發的這款文字型別生成工具為設計師提供了多樣的選擇和排版支援。透過這一款文字型別生成工具，可以節省時間，迅速生成段落、標題、正文、按鈕等。
原文作者：Danny Sapio，原文標題“10 Key Takeaways from Google’s Material Design Guidelines”
譯者：Michiko
本文由 @神譯局 授權釋出於人人都是產品經理，未經作者許可，禁止轉載
題圖來自 Unsplash，基於 CC0 協議