編者按:最近發(fā)現(xiàn)挺多好網(wǎng)站,挑選了幾個(gè)好用的,幫不熟悉色彩的設(shè)計(jì)師搞定Material配色,給設(shè)計(jì)師提供網(wǎng)頁(yè)元素組件的排版靈感,還有輕易制作Bootstrap模板并輸出HTML格式的神站,全都有各自的用處,而且都是在線的,很方便,來(lái)自取咯。 一、Material Design專(zhuān)用在線配色工具 2015年安卓系統(tǒng)的Material Design UI設(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ò)今天分享的 Material Palette 配色工具,它可以讓你輕松搭配出好看的Material風(fēng)格顏色。
Materialpalette —— Material配色工具
Materialup —— Material設(shè)計(jì)靈感:

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

嗯,總體看起來(lái)很不錯(cuò)的樣子:) 彩蛋: 界面右上角有個(gè)Material Design靈感的鏈接,里面有不少想著的案例,大家可以去哪里獲取靈感!

好了,有新的Android界面設(shè)計(jì)么,有沒(méi)有想立即設(shè)計(jì)一個(gè)Material風(fēng)格的沖動(dòng)?趕快嘗試下這個(gè)在線配色工具吧! 二、解決設(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 
Call to idea已經(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)Call to idea網(wǎng)站瀏覽。 三、輕易制作Bootstrap模板并輸出HTML格式
lollyt —— 在線制作模板 ollytin是一個(gè)專(zhuān)門(mén)制作Bootstrap 3模板的在線工具,有了它,用戶不需要懂HTML代碼和CSS樣式就能制作一個(gè)流行的網(wǎng)站出來(lái)。 你可以在幾分鐘內(nèi)出一個(gè)BS模板,并且是HTML網(wǎng)頁(yè)格式,最終用戶只需要替換上自己的圖像和文字即可。

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”,用于移除組件。