設計神器三劍客！有哪些網站能幫你線上搞定設計？

編者按：最近發現挺多好網站，挑選了幾個好用的，幫不熟悉色彩的設計師搞定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