icon,stock image,色彩搭配和accessibility 的颜色检查。
我收集和整理了一些常用的资源网站,设计无外乎是灵感+经验。
总览:inspiration 汇总,pattern,好的blog,图标集合,图片集合,色彩搭配,工具集合。第一部分主要是前三个内容。这里是section 2 会包含剩下的部分(图标,stock image,色彩搭配和accessibility 的颜色检查。)section 3 则是一些常用的工具合集。
一、图标
1. Flaticon(www.flaticon.com/)
本人最常用的icon 搜索,资源有限,但是好在方便,有svg格式方便使用。
![](https://img.haomeiwen.com/i4247122/d777e91a8e3c24c8.png)
2. Icon store (https://iconstore.co/)
也是免费的icon资源,都是打包的类型,有非常不错的categories,可以批量一起下载。
![](https://img.haomeiwen.com/i4247122/0f1247bafe1af118.png)
3. 阿里巴巴矢量图标库 icon font (www.iconfont.cn)
阿里巴巴的图标汇集地,缺点是分类不是很好,但是内容很多,可以搜索关键词慢慢找。
![](https://img.haomeiwen.com/i4247122/77d09cab251d691c.png)
4. 365cons(www.365cons.com)
一个人每天更新自己上传的svg 等格式,精美的icon,如果实在是资源枯竭,可以来这里找到很有创意的icon。
![](https://img.haomeiwen.com/i4247122/30f491b7ab1a6729.png)
5. Material Design的纯色font icon,适用于网页编写。
Material design icons (by google)(https://material.io/icons/)
![](https://img.haomeiwen.com/i4247122/47538b12d30c49f1.png)
Material Design Iconic Font (http://zavoloklom.github.io/material-design-iconic-font/)
![](https://img.haomeiwen.com/i4247122/72e60c0bc7adffcd.png)
6. the noun project icon https://thenounproject.com
全面汇集了各种风格的icon,但是需要购买,每个月几块钱。
![](https://img.haomeiwen.com/i4247122/b22df94613d9e0ab.png)
二、矢量图片库
在做poster,infographic 和作品集的时候,好的illustrator 、 vector image 会让你的成品大大增色,尤其是infographic,如果不借助矢量图片库,从头开始画就会大大降低效率,也会没有太多好的灵感。
1. Freepik (www.Freepik.comhttp://www.fontex.org
非常好的资源下载地,有大量的svg vector 图片下载,ai格式的图片可以先用illustrator打开,然后在copy到sketch中。除了vector 图片,还有很多好的icon 和png 格式的stock image 下载。
![](https://img.haomeiwen.com/i4247122/e3a557b42e4e583d.png)
2. Vector me (http://vector.me/)
上万个免费的vector image 可供下载,需要自己认真的挑选。还有logo等资源下载。
![](https://img.haomeiwen.com/i4247122/5392a5b587ac80bc.png)
3. Vecteezy (www.vecteezy.com)
所有的vector image都是免费的!有图片类,纹理,background,icon,和各种不同内容的分类。
![](https://img.haomeiwen.com/i4247122/38db2b59ea482106.png)
4. Vexel (www.vexels.com)
可以按照所需要的图片的类型进行分类检索,例如vector,png等,还特别标注了可以进行编辑的图片,资源的内容还是可以的。
![](https://img.haomeiwen.com/i4247122/98f08ece7a77c173.png)
5. Adobe Stock (https://stock.adobe.com/)
adobe 的图片库,云集了大量的各种类型的图片(png,vector,illustraotor)优点是量大,缺点是必须用公司的购买的license才可以使用。
![](https://img.haomeiwen.com/i4247122/34dc7cc89186a2b1.png)
6. Depositphotos (https://depositphotos.com/)
另一个需要收费才能下载资源的海量图片库,有stock image,vector,png等等,内容丰富,但是必须付钱。
![](https://img.haomeiwen.com/i4247122/c30c5a928e4d93fd.png)
三、stock image
这一分类下有大量的图片库,通常在做portfolio的时候,能让作品集大大增色。公司用途的话注意版权的使用。
1. Pexel (https://www.pexels.com/)
很不错的免费高清图片库,有搜索功能。
![](https://img.haomeiwen.com/i4247122/064a076b3d0eb832.png)
2. Unsplash(https://unsplash.com/)
同样也是最常用到的免费高清图片库,也有不错的搜索功能。
![](https://img.haomeiwen.com/i4247122/78e17c269f1f0324.png)
3. Flickr (https://www.flickr.com/)
Yahoo旗下的免费的图片资源库,海量图片,高清大图。
![](https://img.haomeiwen.com/i4247122/559a94882e958707.png)
4. Finda(http://finda.photo/)
该网从各大图片网站站收集了优秀的图片,同事全部免费。10000 completely free stockphotosfrom Unsplash, Jay Mantri, and many more, to use for any purpose.最棒的是有按照颜色进行搜索的功能,大大提升了效率。
![](https://img.haomeiwen.com/i4247122/b7a9d945eb5557ac.png)
5. Stocksnap (https://stocksnap.io/)
同样免费的海量图片库,有搜索功能。
![](https://img.haomeiwen.com/i4247122/e15a6a1ba608fd1c.png)
6. PixelSquid
第个神器叫PixelSquid,是一个3D素材网站。
它提供的素材都是已经去除背景的,这样,设计师可以直接使用上面的素材,减少了抠图的时间。
而且,PixelSquid的素材能在线上即时360 度旋转,让使用者选择自己最合适的物件角度,然后下载保存素材图档并使用。
![](https://img.haomeiwen.com/i4247122/f1930ad5688a0eb9.png)
7. Picjumbo(https://picjumbo.com/)
免费高清大图网站,但是有些图片仅限于premium高级会员。
![](https://img.haomeiwen.com/i4247122/1d1a7bff93f93f12.png)
8. Illusion (http://illusion.scene360.com/)
提供富有意境美的摄影作品
![](https://img.haomeiwen.com/i4247122/8ccbab14c378e251.png)
9. Free Images - Pixabay (https://pixabay.com/)
这个网站真是配图的好去处,不仅图片质量高,还支持中文,更关键的一点是还免费,无版权。
![](https://img.haomeiwen.com/i4247122/68c8c7f41a44aa4d.png)
10. 图⽚GraphicFuel http://www.graphicsfuel.com
各个专业图⽚都有,质量很⾼的图⽚⽹站
![](https://img.haomeiwen.com/i4247122/f03834fef6ed5f71.png)
10. Fontex (http://www.fontex.org)
提供多样的英文字体,可免费下载
![](https://img.haomeiwen.com/i4247122/cf3d6e530dba6b8b.png)
11. 最美的英⽂排版 http://hellohappy.org/beautiful-web-type/
和谐的各种字体搭配和排布,作品集排版时看它⼀定超有⽤
![](https://img.haomeiwen.com/i4247122/75d59de28f727c02.png)
四、特殊的图片集
下面罗列的图片库,是一些很有特色的图片收集网站。
1. pngimg(http://pngimg.com/)
专门用户png图片的网站,有很多不同的分类,对于做infographic 和portfolio是很不错的选择。
![](https://img.haomeiwen.com/i4247122/a5252fd3da80f043.png)
2. FoodiesFeed (https://foodiesfeed.com/)
都是高清美食的图片,用来做美食类型的app web再好不过了。
![](https://img.haomeiwen.com/i4247122/3bf223845f58ae7d.png)
3. deviantart (http://www.deviantart.com/)
免费的Illustraor 卡通类型的图片库,都是厉害的设计师交流平台。
![](https://img.haomeiwen.com/i4247122/cf297f426ab579dd.png)
四、配色网站
我是配色困难户,有了配色网站的帮助,可以解决很多难看的配色问题。通常to B的产品不太会用到,而自己的portfolio,poster和网页设计很有必要。
1. ColRd http://colrd.com
找到颜⾊,也能找到配⾊图⽚,作品集的好帮⼿
![](https://img.haomeiwen.com/i4247122/ffda6920f3979674.png)
2. itmeo (https://webgradients.com/)
渐变配色的调色板
![](https://img.haomeiwen.com/i4247122/077922ee71f68c40.png)
3. UI Gradients (https://uigradients.com/#Hersheys)
好的渐变配色网站。
![](https://img.haomeiwen.com/i4247122/39711bf3a5c2ab76.png)
4. LOLColors (https://www.webdesignrankings.com/resources/lolcolors/)
丰富的色彩搭配组合,有一个主题色,可以选择很多附属配色。
![](https://img.haomeiwen.com/i4247122/af85349751466924.png)
5. Design Seeds (https://www.design-seeds.com/)
通过好看的图片来获取色彩搭配的灵感,帮助站到合适的bg-color,main color 和supportive colors。
![](https://img.haomeiwen.com/i4247122/e2fdf39721703bf9.png)
6. Color Drop (https://colordrop.io/)
配色网站,给出了一系列比较成功的色彩搭配,但是并没有分清楚主次颜色。
![](https://img.haomeiwen.com/i4247122/7734c6eefc80e755.png)
7. Paletton(http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF)
在中间选中一个颜色,立即能给出这个颜色比较不错的衍生色。适合单一hue的配色。
![](https://img.haomeiwen.com/i4247122/755c5e0ad0789831.png)
8. Adobe Color CC(https://color.adobe.com/zh/explore/?filter=most-popular&time=all)
Adobe的配色网站,可以选择最受欢迎的pallet,但是主次颜色需要自己分析。
![](https://img.haomeiwen.com/i4247122/6d71498b2ec0b20d.png)
从现有图像中创建配色方案:
![](https://img.haomeiwen.com/i4247122/7b741791de0bb5c0.png)
或者在 Kuler 社区中发现颜色组合:
![](https://img.haomeiwen.com/i4247122/0ef0117f39b8e788.png)
8.Color Farm (http://thestocks.im/?ref=flatuicolors.com#)
也是通过好看的图片提取关键颜色的。
![](https://img.haomeiwen.com/i4247122/3b87a0b076fba618.png)
这个网页还汇集了很多其他的色彩搭配资源,例如:material color可以选择不同的level
![](https://img.haomeiwen.com/i4247122/6dd28e96c24ced9c.png)
9. flat ui color picker (http://www.flatuicolorpicker.com/category/purple)
单独的某个颜色的配色网页,只能给出一个主色调的几个不同的色域。
![](https://img.haomeiwen.com/i4247122/5dade38a2dd49e01.png)
10. Flat Colors(http://flatcolors.net/palettes.php)
不单单有配色方案,也有不同色彩色选择。
![](https://img.haomeiwen.com/i4247122/6e4a8bdd2f1d84e7.png)
11、 Github 的配色方案(https://yeun.github.io/open-color/)
给出不同色颜色下,color level 不同时候的效果,适用于单一色彩色网页。
![](https://img.haomeiwen.com/i4247122/5a2a9e1d1e83d0cc.png)
12. neilorangepeel(http://colours.neilorangepeel.com/)
也是以一个色彩做主,其他的level显示的色彩网站。
![](https://img.haomeiwen.com/i4247122/4ee3670a13b06489.png)
13. Behance
著名设计社区 Behance 有许多有创意的优秀作品,你只需要按颜色进行筛选,就可以发现非常新鲜有趣而又质量上乘的作品。
![](https://img.haomeiwen.com/i4247122/ca39ea926064cedc.png)
14. Dribbble Colors
Dribbble 是发现用户界面灵感的最佳选择之一,当您想对其他设计师使用的特定颜色进行视觉研究时,请转到dribbble.com/colors并选择所需的颜色。
![](https://img.haomeiwen.com/i4247122/aa944f249c99923f.png)
15. Color Claim (http://www.vanschneider.com/colors/)
这个是设计师Van Schenider的个人网站,他收集了自己喜欢的配色方案,可以下载模板。
![](https://img.haomeiwen.com/i4247122/3e98a15536dc6623.png)
16. Designspiration
当你对颜色组合有个初步的想法,但是又苦于没有现成的例子让你看看效果,它就是一个趁手的工具了。Designspiration可以选择最多五种颜色,以此为您搜索符合您查询的图像。
![](https://img.haomeiwen.com/i4247122/1368baa06e34d410.png)
17. Material Design Color Tool
你可以用这个工具去创建,分享和应用你的新设计,同时也可以测量颜色组合。
![](https://img.haomeiwen.com/i4247122/57ba18298d0526c3.png)
Coolors 可以简单地锁定选定的颜色,然后按空格键生成调色板。同时允许用户上传图像,并以此为基准制作一个调色板。
![](https://img.haomeiwen.com/i4247122/133fd8f804ce9e48.png)
![](https://img.haomeiwen.com/i4247122/2c03454f6ae52b86.png)
配色可行性
视力缺陷其实并不是少数,比我们想象的要多很多。全球 2.85 亿人视力受损,因此为这部分人群提供有效的配色方案应该被考虑到。
19. WebAIM Color Contrast Checker
有些颜色彼此之间相近,也有些颜色会相互冲突。条件允许的话最好进行 AA 测试,在使用文本的时候,应该检查一下颜色的对比度之类的。可以通过WebAIM Color Contrast Checker工具来测试颜色组合。
![](https://img.haomeiwen.com/i4247122/9fb10af91224004a.png)
20. Coolors
色盲测试:
![](https://img.haomeiwen.com/i4247122/9c12509b65ce8407.png)
将模式状态改为「测试模式」
![](https://img.haomeiwen.com/i4247122/636c642078d1816f.png)
然后你就会看到色弱用户眼中看到的色彩
![](https://img.haomeiwen.com/i4247122/150f5d097d4def7a.png)
3. NoCoffee Vision Simulator for Chrome
NoCoffee Vision Simulator 可用于模拟 Chrome 浏览器中可查看的任何页面上的色差缺陷和低视力条件。例如,设置「deuteranopia」后您可以在灰度模式下查看网页。
![](https://img.haomeiwen.com/i4247122/2808dc53bae4e02f.png)
网友评论