编者按:最近发现挺多好网站,挑选了几个好用的,帮不熟悉色彩的设计师搞定Material配色,给设计师提供网页元素组件的排版灵感,还有轻易制作Bootstrap模板并输出HTML格式的神站,全都有各自的用处,而且都是在线的,很方便,来自取咯。
一、Material Design专用在线配色工具
2015年安卓系统的Material Design UI设计风格将会流行起来,目前已经有不少APP应用尝试这类风格的设计,如果你也想开始制作Material风格的APP,那就别错过今天分享的 Material Palette 配色工具,它可以让你轻松搭配出好看的Material风格颜色。
Materialpalette —— Material配色工具
Materialup —— Material设计灵感:
Material Design 相关好文:
- 《超全面总结!深聊MATERIAL DESIGN引领的设计趋势》
- 《学霸的自学笔记!Material Design设计规范学习心得》
- 《该跟上潮流了!一大波优质的MATERIAL DESIGN资源免费下载》
![Material Design专用在线配色工具](https://i-blog.csdnimg.cn/blog_migrate/8bd3be890d78cc3523844a653a697e53.jpeg)
Material Palette主要特色是可以让用户一边选择颜色同时还能实时预览效果图,并且用户只需要选择1个或2个颜色后系统会自己匹配出一组APP UI 配色方案。
![Material Design 配色](https://i-blog.csdnimg.cn/blog_migrate/0a04c0f6261ffcfe92ea12be47ee27bd.jpeg)
嗯,总体看起来很不错的样子:)
彩蛋: 界面右上角有个Material Design灵感的链接,里面有不少想着的案例,大家可以去哪里获取灵感!
![Material Design 案例](https://i-blog.csdnimg.cn/blog_migrate/e22736c7c63a91b4a8e6800e8b06f771.jpeg)
好了,有新的Android界面设计么,有没有想立即设计一个Material风格的冲动?赶快尝试下这个在线配色工具吧!
二、解决设计网页各种组件元素烦恼
在网页设计中我们经常会设计一些组件元素,比如注册表单、按钮、Tab选项卡、网站导航等等,虽然是小元素,但有时候却想不到要怎么排版、设计才好,没关系,今天小编分享一个网站给你们,里面有很多小组件收集,大部分都是精致漂亮的,真的可以给你带来灵感呦!
Calltoidea
![网页设计灵感](https://i-blog.csdnimg.cn/blog_migrate/bd2b8966ef0ff7854ddfb6618b94660d.jpeg)
Call to idea已经很好的帮我把网站制作需要的组件罗列出来,展示方式也十分友好。
其中常用设计元素分有19个分类,排版布局有6个分类,实用工具有4个分类。目前收集的作品并不太多,但里面的却是流行的设计,值得我们参考学习。
![网页设计灵感](https://i-blog.csdnimg.cn/blog_migrate/cb3d894ce1b50e2fa0d84ccb9219cde1.jpeg)
友好的分类列表。
![网页设计灵感](https://i-blog.csdnimg.cn/blog_migrate/f1140113b43ef44edbe5a89586347034.jpeg)
Tab选项卡设计
![网页设计灵感](https://i-blog.csdnimg.cn/blog_migrate/df368bd3abc76e05b6e38d700b5eadbb.jpeg)
布局排版案例
![网页设计灵感](https://i-blog.csdnimg.cn/blog_migrate/585ac6e27c44abb6e98b211e1a47e3d5.jpeg)
品牌配色
更多漂亮的网页组件请进Call to idea网站浏览。
三、轻易制作Bootstrap模板并输出HTML格式
lollyt —— 在线制作模板
ollytin是一个专门制作Bootstrap 3模板的在线工具,有了它,用户不需要懂HTML代码和CSS样式就能制作一个流行的网站出来。
你可以在几分钟内出一个BS模板,并且是HTML网页格式,最终用户只需要替换上自己的图像和文字即可。
![lollyt bootstarp模板 lollyt bootstarp模板](https://i-blog.csdnimg.cn/blog_migrate/1a1eade836cd484c2961b269622c7900.jpeg)
lollytin教程
通过lollytin来做BS模板很简单的,就像积木一样,我们来看看它的制作界面,如下图:
![lollyt bootstarp模板 lollyt bootstarp模板](https://i-blog.csdnimg.cn/blog_migrate/acde95fbf5d02e9ada3a94f18eeb273c.jpeg)
面板(左):组件,即模块元素
面板(右):页面布局
图标(左):组件类别
图标(右):导出HTML格式(第一个是导出HTML文件,第二个是Bootstrap的文件,解压后将刚导出的HTML文件移至目录即可)
Tips: 使用时右侧面板有个关闭按钮“X”,用于移除组件。
【优设人气最高的酷站推荐】
原文地址:shejidaren