即使已经出现了不少资源整理类文章,但很多设计师在找素材时效率仍不够高。
东百度右花瓣地找安卓控件集合就浪费了大半天时间,关键是还不一定齐全;很好的设计素材却不能同时找到PSD、EPS、PNG版本,只能不停地转换格式……你很忙,效率却很低。这些都特别让人抓狂。
今天小编二次精选了一些设计网站,并逐一地去试用,总结其特点。
你可以把它当成一套体系去使用,每个网站都对应一个需求,能够精准地直达目标:安卓、 iOS系统控件一个平台就可搞定;轻轻一搜,多格式素材也都有了……
整理的目标就是为了节省时间,产出一套可复用的模式。
希望可以帮到大家。
一.图标及LOGO设计
图标是设计的基础与第一步,看起来很简单,实则当要亲自去设计时却往往难以有明确的方向,下面的网站都各有特点和优势,适用于不同的场景需求。希望大家不要只是收藏,更能真正派上用场。
全都是黑白线性icon,极简风格。
![](https://img.haomeiwen.com/i203995/3ac21dbaf1a3838c.png)
特点:可以下载多种格式(SVG EPS PSD PNG)。
妈妈再也不用担心我心力交瘁地穿梭于各大格式之间进行转换啦。
![](https://img.haomeiwen.com/i203995/31d58139b7a38f98.png)
![](https://img.haomeiwen.com/i203995/ad3808a2002484bd.gif)
icons for everything。
顾名思义,在这儿只要输入关键词即可搜索到你要的everything。
以下是“cat”的搜索结果,意不意外,惊不惊喜?
当然,要用英文搜索哦。
![](https://img.haomeiwen.com/i203995/5934804b724945ee.png)
![](https://img.haomeiwen.com/i203995/6d01be73adaf0bdb.gif)
3.https://icons8.com/web-app/new-icons/all
![](https://img.haomeiwen.com/i203995/e7e928c1d6746f7c.png)
![](https://img.haomeiwen.com/i203995/ad9d54bad7457d07.gif)
特点:左侧的分类标准。
作为一名设计师,iOS、Android、Windows各大平台的资源你敢说不清楚不明了不想要?
不用辛辛苦苦地跨平台去搜集素材了,一个网站就可搞定80%。
![](https://img.haomeiwen.com/i203995/cde9809039f73cf3.png)
![](https://img.haomeiwen.com/i203995/2219da7c021b2543.gif)
![](https://img.haomeiwen.com/i203995/81a5da2f9315a5b0.png)
![](https://img.haomeiwen.com/i203995/0c0386e0bdb2193a.gif)
![](https://img.haomeiwen.com/i203995/9b3e5cbede010c0b.png)
![](https://img.haomeiwen.com/i203995/d7df9768430fa4fc.gif)
特点:付费与免费并存,线性icon与微材质图标齐飞。
也终于有彩版icon了。
想知道付费资源与免费资源之间有哪些不同吗?
![](https://img.haomeiwen.com/i203995/4eb9b2a575123e78.png)
![](https://img.haomeiwen.com/i203995/83ae14a7c29ab333.gif)
和dirbbble的页面很像,不过dribbble是动效、界面、图标啥都有的一个集市。
而logopond它只提供图标,是一家专门的图标供应网站。
iOS APP高清图标展示平台
![](https://img.haomeiwen.com/i203995/d61bd8ddf45ee798.gif)
![](https://img.haomeiwen.com/i203995/a0a44bc8903375bc.png)
因为是高清展示平台,重点在于展示。
特点:不能直接下载图片格式。没错,就是这么傲娇。
![](https://img.haomeiwen.com/i203995/6f6ad4a3261e7e5b.gif)
![](https://img.haomeiwen.com/i203995/4f4a4490f59861b9.png)
不过可以十分清晰地看到图标上的细节,纸质感、木质感令人赏心悦目。
高清不是盖的。
![](https://img.haomeiwen.com/i203995/8df8d9691979e2df.gif)
![](https://img.haomeiwen.com/i203995/7dd3b7c4a974b363.png)
△保存时只有网页格式。
![](https://img.haomeiwen.com/i203995/708eac9b4d0b9674.gif)
△保存后长得和自家浏览器一样。
![](https://img.haomeiwen.com/i203995/3c1d254472645151.png)
习惯习惯就好啦~
7.http://www.iospirations.com/
优秀iOS APP图标与界面展示平台
![](https://img.haomeiwen.com/i203995/7737a3f0638c490a.png)
![](https://img.haomeiwen.com/i203995/4eb20b1f8ddd0254.gif)
特点:可以看到此图标背后的产品界面。
打开图标这个入口就可以看到它背后的故事、内容,即完整的把一个产品呈现出来。
有助于我们把握大局观,图标不再是分离的个体,应该要与产品融为一体。
让我们看看优秀的设计师们是如何做的吧。(这个可以下载图片格式。)
![](https://img.haomeiwen.com/i203995/b25c79eadab48ee2.png)
![](https://img.haomeiwen.com/i203995/6fc91ba7e7b758ff.gif)
△点击DEVELOPER WEBSITE即可看到完整的产品详情页面。
二.分专题设计网站
1.http://thedesigninspiration.com/
![](https://img.haomeiwen.com/i203995/f4b1f3f082011556.png)
![](https://img.haomeiwen.com/i203995/e8cc19ea38c044ec.gif)
ILLUSTRATION ARTS专题里竟然有这么多优质的原画,眼前一亮呐。
![](https://img.haomeiwen.com/i203995/7aef6d9cc787786f.png)
![](https://img.haomeiwen.com/i203995/bc58764535e7d4f4.gif)
也是可以很方便的查询到自己想要的分类素材。
三.移动端设备设计
![](https://img.haomeiwen.com/i203995/6f15af666726cb49.png)
![](https://img.haomeiwen.com/i203995/bbfe266dbf1d4859.gif)
绝对是神器一般的存在。
设备上从 iOS 到 Android,尺寸上从iPhone、iPad到Watch,类目上从登录界面到图片库……你想要的都一网打尽,移动端设计师的福利。
2.http://www.mobile-patterns.com/
![](https://img.haomeiwen.com/i203995/842d05e997e73a1e.png)
![](https://img.haomeiwen.com/i203995/5dba2e28d69754d0.gif)
针对不同形式(地图软件、拍照软件……)的界面进行分类,不用下载这些app就可以直接明了地看到它们的界面。和手动搜索说再见吧。
![](https://img.haomeiwen.com/i203995/e035c11b1d4e9664.png)
![](https://img.haomeiwen.com/i203995/f29822dd4fd71619.gif)
包含了图标、网页设计。
![](https://img.haomeiwen.com/i203995/c50669c552ec856c.png)
![](https://img.haomeiwen.com/i203995/adc6486dc2876199.gif)
特点:提供的图标有多个尺寸,虽然一看到上面满满的资源就激动,但放大细看单个的绝对是灾难。
所以它为每套图标设置了不同的尺寸,从小到大,服务贴心。
![](https://img.haomeiwen.com/i203995/4041eff9309eed00.png)
![](https://img.haomeiwen.com/i203995/4cc3b8b2d75cb630.gif)
△同一套图,不同尺寸(32px-64px-128px),可适用于不同场景需求。
四.网页设计展示
![](https://img.haomeiwen.com/i203995/4707fc6b16873a43.png)
![](https://img.haomeiwen.com/i203995/270fe2d25b2bcb75.gif)
五. 收集各类设计文章的网站
![](https://img.haomeiwen.com/i203995/548527156495d640.png)
![](https://img.haomeiwen.com/i203995/df41cfa417bdfb09.gif)
特点:可阅读一手、新鲜的设计资讯。我们不只是要做好眼前的事,对于未来设计趋势、行业动态的把控同样不能少。
六.手绘类作品分享展示社区
![](https://img.haomeiwen.com/i203995/5646c6d9e291dda9.png)
![](https://img.haomeiwen.com/i203995/b42ff4b2c0bd4659.gif)
特点:它的手绘作品。
在这里你无法直接看出软件制作的线条与框架,展现在眼前的只有精致细腻的笔画。一逛绝对停不下来。
艺术的魅力就在于会让人深深沉沦其中吧。
七.封面、海报、插画等设计
![](https://img.haomeiwen.com/i203995/c9888bb0abd9f399.png)
![](https://img.haomeiwen.com/i203995/820656b8e412877a.gif)
特点:这里几乎不提供小清新风格的设计作品。
色彩比较暗,艺术氛围浓厚。适用于喜欢欧美风、口味稍重的同学。
八.配色相关
![](https://img.haomeiwen.com/i203995/116345290b5cda1e.png)
![](https://img.haomeiwen.com/i203995/a15750120413165c.gif)
很常见的形式,从图片中提取出配色方案。
2.http://www.colourlovers.com/
![](https://img.haomeiwen.com/i203995/3945b72c01a4e5a1.png)
![](https://img.haomeiwen.com/i203995/88574bb1d5786409.gif)
3.http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
![](https://img.haomeiwen.com/i203995/c52757197da26edf.png)
鼠标选取色环中的颜色之后在右边的方块中显示出来,并自动生成与其相匹配的配色条。
特点:自动显示出色号,不必再用吸管工具了。
八 . 设计规范
Material design
https://material.io/guidelines/#introduction-goals
http://design.1sters.com/(中文版)
iOS10设计规范
https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/
九.设计教程
![](https://img.haomeiwen.com/i203995/5bd2d5faadd1b40d.png)
![](https://img.haomeiwen.com/i203995/e2a8c29b284a4e4d.gif)
设计教程见过不少,但用心把封面做的这么有设计感的还真是不多见。
帮助初学者掌握钢笔工具的趣味网站。
![](https://img.haomeiwen.com/i203995/0734217bd26dc978.png)
![](https://img.haomeiwen.com/i203995/518d538de2228a9c.gif)
在钢笔工具面前我们只能自称“手残党”,但在这个网站面前你可以完全放松心情。进入网页的交互方式是活泼有趣的,里面的教程也是系统一笔一笔引导的。
![](https://img.haomeiwen.com/i203995/15db9a8e171cdcc9.png)
一步步引导,不怕出错!
![](https://img.haomeiwen.com/i203995/968a619e28e726b0.gif)
十.设计师个人网站
1.http://iconmoon.com/blog2/category/tutorials-chn/
设计师JJ Ying的设计博客,分享设计思路与经验。
![](https://img.haomeiwen.com/i203995/41a51e0e471ce961.png)
![](https://img.haomeiwen.com/i203995/b4acace5304c4d11.gif)
设计师Jasper Hauser的个人网站,分享过往作品与思路。
![](https://img.haomeiwen.com/i203995/c0f5066bbb4f0e22.png)
![](https://img.haomeiwen.com/i203995/40adce54f0346621.gif)
立陶宛设计师Justas Galaburda个人网站,分享设计经验及扁平化图标作品。
![](https://img.haomeiwen.com/i203995/f89818d5ed835ec3.png)
![](https://img.haomeiwen.com/i203995/0e7875f26c2bdac5.gif)
![](https://img.haomeiwen.com/i203995/c78cd8af3634345a.png)
![](https://img.haomeiwen.com/i203995/d067287a4a75928c.gif)
5.http://michaldziekan.com/polish-outdoor/
![](https://img.haomeiwen.com/i203995/673c5d05c7749665.png)
![](https://img.haomeiwen.com/i203995/93f0bc401f52048c.gif)
十一 . 设计公司http://eicodesign.com/
Bri体验科技http://www.brixd.com/
Face UIhttp://faceui.com/
inveshttp://www.invesdesign.com/
作为设计师,办公桌可以尽情的乱,但思维却要很清晰~
希望本篇整理能够节省大家不少时间,这么好的东西你确定不转发转发让更多人受益吗?
![](https://img.haomeiwen.com/i203995/dd0afe682a01198b.gif)
关于互联网产品设计的方方面面。
设计就是寻找事物背后的本质规律,加以运用,创造出更多的可能性。
战略、市场、用户、需求、功能、交互、视觉、内容、数据、运营、推广、传播、变现,设计贯穿于所有环节,我们一起聊聊大设计。
![](https://img.haomeiwen.com/i203995/91d84aa78a0fdd77.gif)
![](https://img.haomeiwen.com/i203995/66e0a4ee2dc4d16d.png)
关注该公众号
网友评论