編者按：最近發現挺多好網站，挑選了幾個好用的，幫不熟悉色彩的設計師搞定Material配色，給設計師提供網頁元素組件的排版靈感，還有輕易制作Bootstrap模板并輸出HTML格式的神站，全都有各自的用處，而且都是在線的，很方便，來自取咯。

一、Material Design專用在線配色工具

2015年安卓系統的Material Design UI設計風格將會流行起來，目前已經有不少APP應用嘗試這類風格的設計，如果你也想開始制作Material風格的APP，那就別錯過今天分享的 Material Palette?配色工具，它可以讓你輕松搭配出好看的Material風格顏色。

Materialpalette?——?Material配色工具

Materialup?——?Material設計靈感：

Material Design 相關好文：

1. 《超全面總結！深聊MATERIAL DESIGN引領的設計趨勢》
2. 《學霸的自學筆記！Material Design設計規范學習心得》
3. 《該跟上潮流了！一大波優質的MATERIAL DESIGN資源免費下載》

Material Palette主要特色是可以讓用戶一邊選擇顏色同時還能實時預覽效果圖，并且用戶只需要選擇1個或2個顏色后系統會自己匹配出一組APP UI 配色方案。

嗯，總體看起來很不錯的樣子：）

彩蛋： 界面右上角有個Material Design靈感的鏈接，里面有不少想著的案例，大家可以去哪里獲取靈感！

好了，有新的Android界面設計么，有沒有想立即設計一個Material風格的沖動？趕快嘗試下這個在線配色工具吧！

二、解決設計網頁各種組件元素煩惱

在網頁設計中我們經常會設計一些組件元素，比如注冊表單、按鈕、Tab選項卡、網站導航等等，雖然是小元素，但有時候卻想不到要怎么排版、設計才好，沒關系，今天小編分享一個網站給你們，里面有很多小組件收集，大部分都是精致漂亮的，真的可以給你帶來靈感呦！

Calltoidea

Call to idea已經很好的幫我把網站制作需要的組件羅列出來，展示方式也十分友好。

其中常用設計元素分有19個分類，排版布局有6個分類，實用工具有4個分類。目前收集的作品并不太多，但里面的卻是流行的設計，值得我們參考學習。

友好的分類列表。

Tab選項卡設計

布局排版案例

品牌配色

更多漂亮的網頁組件請進Call to idea網站瀏覽。

三、輕易制作Bootstrap模板并輸出HTML格式

lollyt?—— 在線制作模板

ollytin是一個專門制作Bootstrap 3模板的在線工具，有了它，用戶不需要懂HTML代碼和CSS樣式就能制作一個流行的網站出來。

你可以在幾分鐘內出一個BS模板，并且是HTML網頁格式，最終用戶只需要替換上自己的圖像和文字即可。

lollytin教程

通過lollytin來做BS模板很簡單的，就像積木一樣，我們來看看它的制作界面，如下圖：

面板（左）：組件，即模塊元素

面板（右）：頁面布局

圖標（左）：組件類別

圖標（右）：導出HTML格式（第一個是導出HTML文件，第二個是Bootstrap的文件，解壓后將剛導出的HTML文件移至目錄即可）

Tips: 使用時右側面板有個關閉按鈕“X”，用于移除組件。

【優設人氣最高的酷站推薦】

Top 1：幫你快速找到能過稿的免費高清大圖！
《免費高清！10個無版權限制的大圖特供網站》

Top 2：我保證你會收藏起來！
《令人震驚！還有比這個無縫紋理背景資源站更帥的么》

Top 3：全是高手的配色技巧呦！
《不會配色？來這40個色彩超贊的網頁看看》

原文地址：shejidaren

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量88萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
官方微信：想在手機上、被窩里獲取設計教程和各種意想不到的"福利"嗎？添加優設哥微信號：youshege