Google 在去年 Google I/O 大會發表 Material Design 設計規範，也為市場帶來新一波設計風潮，同時確定了 Google 日後的設計方向。在這個設計裡有一個特色是「在大面積色塊使用大膽的配色，利用動畫讓介面更生動活潑」，如果你有注意到近期的應用程式或服務，不難發現許多都使用了 Material Design 手法來重新設計，也試圖在以往我們熟悉的設計中找到一條新的出路。

如果你喜歡 Material Design 設計，想研究一下要怎麼做到類似效果，先前我介紹過 Google 釋出數百個免費 Material Design 圖示，可以免費使用，另外，在本文要介紹的是跟設計息息相關的「配色」，尤其適合對於顏色較不敏感，或者沒有足夠點子的設計師。

Material Palette 是一款提供 Material Design 配色的線上工具，它的用法很簡單，你只要找出想要搭配的兩種顏色，它就會顯示出兩種顏色搭配在一起的效果預覽，並提供你較深或較淺的顏色選項，以及其他你可能會用到的顏色代碼。

網站名稱：Material Palette
網站鏈結：http://www.materialpalette.com/

使用教學

STEP 1

開啟 Material Palette 網站後，任意選擇兩種顏色，它就會自動搭配、並顯示在結果頁面的預覽圖裡（如下圖），這時候你可以判斷看看顏色是不是你喜歡的，或者繼續點選左邊的色塊來選擇其他配色選項。

STEP 2

Material Palette 除了提供顏色的大方向供使用者選擇、測試外，也會提供更深、更淺的顏色組合，以及可以用於文字、圖示、分隔線、主要文字、次要文字等等的配色建議。

STEP 3

如果想保留下當前的調色盤配色組合，點選「Download」後會出現許多格式，包括 CSS、SASS、LESS、SVG、XML、PNG 和 POLYMER。或者可以把它推送到 Twitter。

Material Palette 將設計配色變得更簡單，至少對於像我這種不知道那種顏色要搭配那種顏色的「色盲」來說，利用它也能輕鬆搭配出很 Material Design 感的設計風格。

喜歡免費資源網路社群的文章嗎？歡迎追蹤我們的 Facebook、Twitter 和 Google+，或是透過 Email 訂閱更新。

對於網站管理者來說，時常會遇到要調整網站參數或設定的情況，有時候我們並不知道修改後會不會對網站帶來負面影響，必須藉助一些第三方工具來量化評定分數，至少可以找出怎麼樣才能讓網站變得更快，或是在搜尋引擎獲得更好成效的方法。有一款我個人相當喜愛的 GTmetrix，只要輸入網址，就能檢測出網站的各項得分，協助你最佳化網站。

我在 2010 年曾介紹過 GTmetrix，近期這個網站重新改版，介面導入平面化設計，看起來也更為美觀。GTmetrix 一直是我用來測試網站成效的首選工具，原因在於它整合 Google 旗下的 PageSpeed 以及 Yahoo 使用的 YSlow 評分，這是兩個可能目前最具參考價值的網站評比項目。

不僅如此，GTmetrix 還提供類似於 Pingdom Tools 的瀑布圖（Waterfall）功能，可以找出網頁開啟時載入的各種項目，以及可能帶來延遲、或者無法順利載入的網站元件，對於改善網頁來說是非常好用的工具。

如果你本身是網站管理者，或者想要改善自己網站的各項評比表現，不妨利用 GTmetrix 來協助你，此外，GTmetrix 也允許免費註冊用戶監控（Monitor）網站成效，每日更新，當網站評分下降時，你就能透過 Email 收到通知，讓你隨時都能掌握網站變化。

網站名稱：GTmetrix
網站鏈結：https://gtmetrix.com/

使用教學

STEP 1

要如何檢測你的網站各項評分呢？很簡單，開啟 GTmetrix 網站後，在首頁填入你要檢測的網站網址，然後按下「Analyze」可以開始測試。

STEP 2

GTmetrix 的預設測試節點為加拿大、使用的瀏覽器是 Firefox，檢測的時間很短，通常只要幾秒終究可以得到結果，但有些時候人較多時必須排隊，網站也會提示你目前還要等待幾位使用者才能輪到你，只要把網站開著等候即可。

STEP 3

接下來結果頁面會顯示 PageSpeed、YSlow 的總得分，以及各項評測項目可能的問題，通常我會看 Page Load Time（頁面載入時間），以及下方得分較差的項目，來看看是否有任何可以修正的空間。

當你點選下面的 Recommendation 後，GTmetrix 會顯示可以改善的項目，如果不是很明白它的意思，可以點選「What’s this mean?」按鈕，它會出現更詳細、完整說明。通常只要照著提示的說明做修正，就可以讓網站獲得更好的評分（當然對網站也是正面影響）。

STEP 4

此外，瀑布圖（Waterfall）也是很重要的，點選下方的標籤來切換，可以看到網頁的每個元件載入時間、大小、網址、結果，把滑鼠游標移動到上方，還會顯示更詳細的資訊。在這裡要確認一下網頁是否因為那些元件而拖慢載入時間，又或者有那些項目是 404 錯誤而找不到，記得修正一下發現的問題。

STEP 5

GTmetrix 提供免費、付費方案，註冊帳戶後可以監測最多三個網址，這是我蠻推薦一用的功能，尤其對於時常修改、調整網站的站長來說，GTmetrix 可以為你監控網站的成效變化情形，當發生狀況時就能收到 Email 通知，讓我們知道該檢測一下網站啦！

STEP 6

註冊、登入帳戶後，回到 GTmetrix 重新檢測一下頁面，點選右側的「Monitor」即可將頁面加入監測，不過免費帳戶每天只會檢測一次，雖然時間上的間距可能略長一些，但看在免費方案上我們就不要苛求太多了（如果你需要更多的監控配額、更短的監測時間，可以考慮付費、升級至 GTmetrix PRO 方案）。

STEP 7

順帶一提，GTmetrix 提供全世界多個不同的檢測點，包括美國、香港、英國、印度、澳洲雪梨、巴西和加拿大，也能切換不一樣的檢測瀏覽器，例如：Firefox、Google Chrome ，開啟 Page Settings 有一些設定項目可以調整。

STEP 8

在設定警報通知時，可以選擇要發送警報的條件，例如當 PageSpeed、YSlow 分數低於某個值、網頁大小、元件項目、下載時間等等也都可以成為觸發條件。

喜歡免費資源網路社群的文章嗎？歡迎追蹤我們的 Facebook、Twitter 和 Google+，或是透過 Email 訂閱更新。