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格式方便使用。

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

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

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


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

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

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

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


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

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

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

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

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/
很不错的免费高清图片库,有搜索功能。

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

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 度旋转,让使用者选择自己最合适的物件角度,然后下载保存素材图档并使用。


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

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

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

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

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


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

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

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



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

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

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


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

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


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

(

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

14. Dribbble Colors

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

您还可以指定包含所选颜色的最小百分比(例如 30% 的蓝色)。

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

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

16. Designspiration

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

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

18. http://Coolors.co

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

使用此工具上传图像并从中调出调色板。

配色可行性

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

19. WebAIM Color Contrast Checker

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


20. Coolors

色盲测试:

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,214评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,307评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,543评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,221评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,224评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,007评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,313评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,956评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,441评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,685评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,234评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1 261
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2 345

推荐阅读更多精彩内容

  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,399评论 2 45
  • (二)抢号 “爸,我把你下个月的号用同学的身份证号抢了好多!” “紫烟,你又调皮,你抢了号,让人家还怎么看病!”李...
    0c5379fd193e阅读 433评论 2 3
  • 很久以前,在书上读到过这样一段话。 "人生是什么?" "我们生下来,然后又死去。" 十分云淡风清的一句话,淡去了这...
    七粒seven阅读 17,706评论 1 0