設(shè)計(jì)神器三劍客！有哪些網(wǎng)站能幫你在線(xiàn)搞定設(shè)計(jì)？

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

一、MaterialDesign專(zhuān)用在線(xiàn)配色工具

2015年安卓系統(tǒng)的MaterialDesignUI設(shè)計(jì)風(fēng)格將會(huì)流行起來(lái)，目前已經(jīng)有不少APP應(yīng)用嘗試這類(lèi)風(fēng)格的設(shè)計(jì)，如果你也想開(kāi)始制作Material風(fēng)格的APP，那就別錯(cuò)過(guò)今天分享的MaterialPalette配色工具，它可以讓你輕松搭配出好看的Material風(fēng)格顏色。

Materialpalette——Material配色工具

Materialup——Material設(shè)計(jì)靈感：

MaterialDesign相關(guān)好文：

《超全面總結(jié)！深聊MATERIALDESIGN引領(lǐng)的設(shè)計(jì)趨勢(shì)》

《學(xué)霸的自學(xué)筆記！MaterialDesign設(shè)計(jì)規(guī)范學(xué)習(xí)心得》

《該跟上潮流了！一大波優(yōu)質(zhì)的MATERIALDESIGN資源免費(fèi)下載》

MaterialPalette主要特色是可以讓用戶(hù)一邊選擇顏色同時(shí)還能實(shí)時(shí)預(yù)覽效果圖，并且用戶(hù)只需要選擇1個(gè)或2個(gè)顏色后系統(tǒng)會(huì)自己匹配出一組APPUI配色方案。

嗯，總體看起來(lái)很不錯(cuò)的樣子：)

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

好了，有新的Android界面設(shè)計(jì)么，有沒(méi)有想立即設(shè)計(jì)一個(gè)Material風(fēng)格的沖動(dòng)？趕快嘗試下這個(gè)在線(xiàn)配色工具吧！

二、解決設(shè)計(jì)網(wǎng)頁(yè)各種組件元素?zé)?

在網(wǎng)頁(yè)設(shè)計(jì)中我們經(jīng)常會(huì)設(shè)計(jì)一些組件元素，比如注冊(cè)表單、按鈕、Tab選項(xiàng)卡、網(wǎng)站導(dǎo)航等等，雖然是小元素，但有時(shí)候卻想不到要怎么排版、設(shè)計(jì)才好，沒(méi)關(guān)系，今天小編分享一個(gè)網(wǎng)站給你們，里面有很多小組件收集，大部分都是精致漂亮的，真的可以給你帶來(lái)靈感呦！

Calltoidea

Calltoidea已經(jīng)很好的幫我把網(wǎng)站制作需要的組件羅列出來(lái)，展示方式也十分友好。

其中常用設(shè)計(jì)元素分有19個(gè)分類(lèi)，排版布局有6個(gè)分類(lèi)，實(shí)用工具有4個(gè)分類(lèi)。目前收集的作品并不太多，但里面的卻是流行的設(shè)計(jì)，值得我們參考學(xué)習(xí)。

友好的分類(lèi)列表。

Tab選項(xiàng)卡設(shè)計(jì)

布局排版案例

品牌配色

更多漂亮的網(wǎng)頁(yè)組件請(qǐng)進(jìn)Calltoidea網(wǎng)站瀏覽。

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

lollyt——在線(xiàn)制作模板

ollytin是一個(gè)專(zhuān)門(mén)制作Bootstrap3模板的在線(xiàn)工具，有了它，用戶(hù)不需要懂HTML代碼和CSS樣式就能制作一個(gè)流行的網(wǎng)站出來(lái)。

你可以在幾分鐘內(nèi)出一個(gè)BS模板，并且是HTML網(wǎng)頁(yè)格式，最終用戶(hù)只需要替換上自己的圖像和文字即可。

lollytin教程

通過(guò)lollytin來(lái)做BS模板很簡(jiǎn)單的，就像積木一樣，我們來(lái)看看它的制作界面，如下圖：

面板(左)：組件，即模塊元素

面板(右)：頁(yè)面布局

圖標(biāo)(左)：組件類(lèi)別

圖標(biāo)(右)：導(dǎo)出HTML格式(第一個(gè)是導(dǎo)出HTML文件，第二個(gè)是Bootstrap的文件，解壓后將剛導(dǎo)出的HTML文件移至目錄即可)

Tips:使用時(shí)右側(cè)面板有個(gè)關(guān)閉按鈕“X”，用于移除組件。

【優(yōu)設(shè)人氣最高的酷站推薦】

Top1：幫你快速找到能過(guò)稿的免費(fèi)高清大圖！

《免費(fèi)高清！10個(gè)無(wú)版權(quán)限制的大圖特供網(wǎng)站》

Top2：我保證你會(huì)收藏起來(lái)！

《令人震驚！還有比這個(gè)無(wú)縫紋理背景資源站更帥的么》

Top3：全是高手的配色技巧呦！

《不會(huì)配色？來(lái)這40個(gè)色彩超贊的網(wǎng)頁(yè)看看》

原文地址：shejidaren