UI/UX 资源总会(section 2)

icon,stock image,色彩搭配和accessibility 的颜色检查。

我收集和整理了一些常用的资源网站,设计无外乎是灵感+经验。

总览:inspiration 汇总,pattern,好的blog,图标集合,图片集合,色彩搭配,工具集合。第一部分主要是前三个内容。这里是section 2 会包含剩下的部分(图标,stock image,色彩搭配和accessibility 的颜色检查。)section 3 则是一些常用的工具合集。

一、图标
1. Flaticon(www.flaticon.com/)
本人最常用的icon 搜索,资源有限,但是好在方便,有svg格式方便使用。

UI/UX 资源总会(section 2)_第1张图片

2. Icon store (https://iconstore.co/)
也是免费的icon资源,都是打包的类型,有非常不错的categories,可以批量一起下载。

UI/UX 资源总会(section 2)_第2张图片

3. 阿里巴巴矢量图标库 icon font (www.iconfont.cn)
阿里巴巴的图标汇集地,缺点是分类不是很好,但是内容很多,可以搜索关键词慢慢找。

UI/UX 资源总会(section 2)_第3张图片

4. 365cons(www.365cons.com)
一个人每天更新自己上传的svg 等格式,精美的icon,如果实在是资源枯竭,可以来这里找到很有创意的icon。


UI/UX 资源总会(section 2)_第4张图片

5. Material Design的纯色font icon,适用于网页编写。

Material design icons (by google)(https://material.io/icons/)

UI/UX 资源总会(section 2)_第5张图片

Material Design Iconic Font (http://zavoloklom.github.io/material-design-iconic-font/)

UI/UX 资源总会(section 2)_第6张图片

6. the noun project icon https://thenounproject.com
全面汇集了各种风格的icon,但是需要购买,每个月几块钱。


UI/UX 资源总会(section 2)_第7张图片

二、矢量图片库
在做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 下载。

UI/UX 资源总会(section 2)_第8张图片

2. Vector me (http://vector.me/)
上万个免费的vector image 可供下载,需要自己认真的挑选。还有logo等资源下载。

3. Vecteezy (www.vecteezy.com)
所有的vector image都是免费的!有图片类,纹理,background,icon,和各种不同内容的分类。

UI/UX 资源总会(section 2)_第9张图片

4. Vexel (www.vexels.com)
可以按照所需要的图片的类型进行分类检索,例如vector,png等,还特别标注了可以进行编辑的图片,资源的内容还是可以的。

UI/UX 资源总会(section 2)_第10张图片

5. Adobe Stock (https://stock.adobe.com/)
adobe 的图片库,云集了大量的各种类型的图片(png,vector,illustraotor)优点是量大,缺点是必须用公司的购买的license才可以使用。

6. Depositphotos (https://depositphotos.com/)
另一个需要收费才能下载资源的海量图片库,有stock image,vector,png等等,内容丰富,但是必须付钱。

三、stock image
这一分类下有大量的图片库,通常在做portfolio的时候,能让作品集大大增色。公司用途的话注意版权的使用。
1. Pexel (https://www.pexels.com/)
很不错的免费高清图片库,有搜索功能。

UI/UX 资源总会(section 2)_第11张图片

2. Unsplash(https://unsplash.com/)
同样也是最常用到的免费高清图片库,也有不错的搜索功能。

UI/UX 资源总会(section 2)_第12张图片

3. Flickr (https://www.flickr.com/)
Yahoo旗下的免费的图片资源库,海量图片,高清大图。

4. Finda(http://finda.photo/)
该网从各大图片网站站收集了优秀的图片,同事全部免费。10000 completely free stockphotosfrom Unsplash, Jay Mantri, and many more, to use for any purpose.最棒的是有按照颜色进行搜索的功能,大大提升了效率。

5. Stocksnap (https://stocksnap.io/)
同样免费的海量图片库,有搜索功能。

6. PixelSquid
第个神器叫PixelSquid是一个3D素材网站。
它提供的素材都是已经去除背景的,这样,设计师可以直接使用上面的素材,减少了抠图的时间。

而且,PixelSquid的素材能在线上即时360 度旋转,让使用者选择自己最合适的物件角度,然后下载保存素材图档并使用。


UI/UX 资源总会(section 2)_第13张图片

7. Picjumbo(https://picjumbo.com/)
免费高清大图网站,但是有些图片仅限于premium高级会员。

8. Illusion (http://illusion.scene360.com/)
提供富有意境美的摄影作品

UI/UX 资源总会(section 2)_第14张图片

9. Free Images - Pixabay (https://pixabay.com/)
这个网站真是配图的好去处,不仅图片质量高,还支持中文,更关键的一点是还免费,无版权。

UI/UX 资源总会(section 2)_第15张图片

10. 图⽚GraphicFuel http://www.graphicsfuel.com

各个专业图⽚都有,质量很⾼的图⽚⽹站

UI/UX 资源总会(section 2)_第16张图片


10. Fontex (http://www.fontex.org)
提供多样的英文字体,可免费下载

UI/UX 资源总会(section 2)_第17张图片

11. 最美的英⽂排版  http://hellohappy.org/beautiful-web-type/

和谐的各种字体搭配和排布,作品集排版时看它⼀定超有⽤


UI/UX 资源总会(section 2)_第18张图片


四、特殊的图片集
下面罗列的图片库,是一些很有特色的图片收集网站。
1. pngimg(http://pngimg.com/)
专门用户png图片的网站,有很多不同的分类,对于做infographic 和portfolio是很不错的选择。

UI/UX 资源总会(section 2)_第19张图片

2. FoodiesFeed (https://foodiesfeed.com/)
都是高清美食的图片,用来做美食类型的app web再好不过了。

UI/UX 资源总会(section 2)_第20张图片

3. deviantart (http://www.deviantart.com/)
免费的Illustraor 卡通类型的图片库,都是厉害的设计师交流平台。


四、配色网站
我是配色困难户,有了配色网站的帮助,可以解决很多难看的配色问题。通常to B的产品不太会用到,而自己的portfolio,poster和网页设计很有必要。

1. ColRd  http://colrd.com
找到颜⾊,也能找到配⾊图⽚,作品集的好帮⼿


UI/UX 资源总会(section 2)_第21张图片

2. itmeo (https://webgradients.com/)
渐变配色的调色板

UI/UX 资源总会(section 2)_第22张图片
(

3. UI Gradients (https://uigradients.com/#Hersheys)
好的渐变配色网站。

UI/UX 资源总会(section 2)_第23张图片

4. LOLColors (https://www.webdesignrankings.com/resources/lolcolors/)
丰富的色彩搭配组合,有一个主题色,可以选择很多附属配色。

UI/UX 资源总会(section 2)_第24张图片

5. Design Seeds (https://www.design-seeds.com/)
通过好看的图片来获取色彩搭配的灵感,帮助站到合适的bg-color,main color 和supportive colors。

UI/UX 资源总会(section 2)_第25张图片

6. Color Drop (https://colordrop.io/)
配色网站,给出了一系列比较成功的色彩搭配,但是并没有分清楚主次颜色。

UI/UX 资源总会(section 2)_第26张图片

7. Paletton(http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF)
在中间选中一个颜色,立即能给出这个颜色比较不错的衍生色。适合单一hue的配色。

UI/UX 资源总会(section 2)_第27张图片

8. Adobe Color CC(https://color.adobe.com/zh/explore/?filter=most-popular&time=all)

Adobe的配色网站,可以选择最受欢迎的pallet,但是主次颜色需要自己分析。

UI/UX 资源总会(section 2)_第28张图片

从现有图像中创建配色方案:

UI/UX 资源总会(section 2)_第29张图片

或者在 Kuler 社区中发现颜色组合:

UI/UX 资源总会(section 2)_第30张图片

8.Color Farm (http://thestocks.im/?ref=flatuicolors.com#)

也是通过好看的图片提取关键颜色的。

UI/UX 资源总会(section 2)_第31张图片

这个网页还汇集了很多其他的色彩搭配资源,例如:material color可以选择不同的level

UI/UX 资源总会(section 2)_第32张图片


9. flat ui color picker (http://www.flatuicolorpicker.com/category/purple)

单独的某个颜色的配色网页,只能给出一个主色调的几个不同的色域。

UI/UX 资源总会(section 2)_第33张图片

10. Flat Colors(http://flatcolors.net/palettes.php)
不单单有配色方案,也有不同色彩色选择。

UI/UX 资源总会(section 2)_第34张图片

11、 Github 的配色方案(https://yeun.github.io/open-color/)
给出不同色颜色下,color level 不同时候的效果,适用于单一色彩色网页。

UI/UX 资源总会(section 2)_第35张图片

12. neilorangepeel(http://colours.neilorangepeel.com/)
也是以一个色彩做主,其他的level显示的色彩网站。

UI/UX 资源总会(section 2)_第36张图片

13. Behance
著名设计社区 Behance 有许多有创意的优秀作品,你只需要按颜色进行筛选,就可以发现非常新鲜有趣而又质量上乘的作品。

UI/UX 资源总会(section 2)_第37张图片

14. Dribbble Colors

Dribbble 是发现用户界面灵感的最佳选择之一,当您想对其他设计师使用的特定颜色进行视觉研究时,请转到dribbble.com/colors并选择所需的颜色。

UI/UX 资源总会(section 2)_第38张图片
您还可以指定包含所选颜色的最小百分比(例如 30% 的蓝色)。

15. Color Claim http://www.vanschneider.com/colors/

这个是设计师Van Schenider的个人网站,他收集了自己喜欢的配色方案,可以下载模板。

UI/UX 资源总会(section 2)_第39张图片

16. Designspiration

当你对颜色组合有个初步的想法,但是又苦于没有现成的例子让你看看效果,它就是一个趁手的工具了。Designspiration可以选择最多五种颜色,以此为您搜索符合您查询的图像。

UI/UX 资源总会(section 2)_第40张图片

17. Material Design Color Tool
你可以用这个工具去创建,分享和应用你的新设计,同时也可以测量颜色组合。

UI/UX 资源总会(section 2)_第41张图片

18. http://Coolors.co

Coolors 可以简单地锁定选定的颜色,然后按空格键生成调色板。同时允许用户上传图像,并以此为基准制作一个调色板。

UI/UX 资源总会(section 2)_第42张图片
使用此工具上传图像并从中调出调色板。
UI/UX 资源总会(section 2)_第43张图片

配色可行性

视力缺陷其实并不是少数,比我们想象的要多很多。全球 2.85 亿人视力受损,因此为这部分人群提供有效的配色方案应该被考虑到。

19. WebAIM Color Contrast Checker

有些颜色彼此之间相近,也有些颜色会相互冲突。条件允许的话最好进行 AA 测试,在使用文本的时候,应该检查一下颜色的对比度之类的。可以通过WebAIM Color Contrast Checker工具来测试颜色组合。


UI/UX 资源总会(section 2)_第44张图片

20. Coolors

色盲测试:

UI/UX 资源总会(section 2)_第45张图片

将模式状态改为「测试模式」

UI/UX 资源总会(section 2)_第46张图片

然后你就会看到色弱用户眼中看到的色彩

UI/UX 资源总会(section 2)_第47张图片

3. NoCoffee Vision Simulator for Chrome
NoCoffee Vision Simulator 可用于模拟 Chrome 浏览器中可查看的任何页面上的色差缺陷和低视力条件。例如,设置「deuteranopia」后您可以在灰度模式下查看网页。

UI/UX 资源总会(section 2)_第48张图片

你可能感兴趣的:(UI/UX 资源总会(section 2))