不容错过的UI设计素材大合集
将灵感和想法一点一滴转化成为实际可见的产品是一件非常有成就感的事情,对于设计师和工程师而言,这种愉悦是无可替代的。所以,成就好设计的好素材、好工具往往非常重要。一个靠谱的工具能让设计过程事半功倍,而可靠的素材更是可以令你如虎添翼。这次的干货素材主要都是用于UI设计的,不仅涵盖了PS和AI素材,包括了图片素材和APP工具,还有许多用于Sketch的素材,针对性非常强。
免费PSD素材
TETHR by InVision
这是出自InVision的8款PSD文件,其中包含了100个模板和超过500个UI控件。来自InVision和UI8的设计师一同协作完成了这套UI Kit,非常漂亮。
Designer-naut UI Kit
这是一套简约整饬的UI Kit,内置了40款矢量的小插件。这套UI Kit 为视网膜屏幕而生,基于16栏的960栅格系统,目前限时免费。
Wire Kit
这是一套分辨率为840 x 8600的 UI Kit,是一套为视网膜屏幕而生的素材,内置2组不同风格的控件,每组都有60个不同的控件。
iPhone Wireframe Kit
这是一套颇为方便的 iPhone 线框图 UI Kit ,整体采用的低保真的色调,所以它适合用来设计简约外观的UI。
免费Sketch资源
Yosemite UI Kit
这是一套完全免费的用于Sketch平台的Yosemite UI Kit,整套UI Kit 覆盖面非常广,非常实用。
Sketch Android UI Kit
如果你是一位喜欢使用Sketch的Android APP UI设计师,那么这套UI Kit绝对值得收入囊中,完整的UI控件支持绝对让你省心。
Bootstrap 3 UI for Sketch
这套 UI Kit包含了Twitter Bootstrap 3全套UI控件,完备而实用。
进阶Sketch UI Kit素材
Bolt Kit
Bolt Kit 是一套非常漂亮非常现代的视觉套件,你可以在Bolt Kit的帮助下,非常快捷的排列组合控件设计出你心目中的界面。
Flat UI Kit for Sketch
扁平化依然是目前的主流,这套扁平UI Kit中的的各种UI控件都非常简约,可以非常快捷地设计出漂亮的界面。整套UI Kit包含超过50个独特的UI元素,覆盖网站、移动端和响应式设计。
Wireframe Kit V2
这套UI Kit包含175个模板和超过500个UI元素,可以用于网页、平板和手机界面,使用这套工具可以让你的UX Workflow提速。这套UI Kit 是AI格式的,现在也有了Sketch的版本。
Illustrator UI Kit
Wireframe & UI Kit by C. Rowe
处于对传统线框图的失望,设计师C.Rowe决定自己动手丰衣足食,按照自己的想法设计出一套更加完善的线框图 UI Kit,当然,它是免费的。
Awesome Kit
这套炫酷的UI Kit包含了26套AI线框图模板、两套笔刷,由设计师George Vasyagin设计完成,实用且免费。
实用iPad应用
可能最终的设计你还是需要借助PS、AI和Sketch,但是在设计过程中,这些实用的iPad APP可以帮你实现一些最初的想法,快速成型,输出成可以处理的格式,帮你设计提速。
Adobe Sketch
Sketch是Adobe进军移动端的重要APP,它不仅可以让设计师更容易表达自己的设计和想法,还可以连接社区,了解其他设计师的设计,寻求灵感。
Paper by FiftyThree
Paper是真正为触摸屏设计的绘图应用,灵活的笔刷和极富创意的手势操作令这款APP别具一格,流畅的操作和无按钮设计可以让设计师充分发挥。配合FiftyThree所推出的Paper Pencil,体验非常赞。
Adobe Ideas
这是一款用来抓住灵感的绝佳APP,可以灵活控制矢量素材、图层和色彩主题,设计作品最终可以输出到AI中进行后期处理。
免费图标素材
The Noun Project
这套图标素材非常值得收入囊中,其中所包含的数千个图标源自不同的艺术家,其中部分图标是免费的,部分是收费的。
80 mini icons
这是一组简洁明快的小图标合集,可以在很多项目中灵活使用。
144 Social Icons
这套图标都是各大社交品牌的图标,包含了4种不同的样式、色彩。每个图标都是在PS中创建的矢量图形,可以轻松编辑。
进阶图标素材
Streamline
Streamline 应该是最丰富最强大的图标合集,设计师们已经不遗余力地为你搜集每一款有价值的图标。
Symbolicons- Icon Font
Symbolicons是一款图标字体,这使得你可以更加方便地控制图标的大小、颜色,你完全不用单独打开一个PSD文件或者AI文件然后来回拖拽每一个图标。
免费图片资源
Unsplash
Unsplash提供的图片全都是高分辨率的素材,每10天更新10张新图片,这么慢的更新,当然保质保量啦~
New Old Stock
这个网站搜集的是各种复古的照片,绝对有范儿。
Death to the stock photo: Free & Premium Options
这个网站图片质量也相当不错,可以商用,也可以放到个人博客、社交媒体以及放到自己的视觉稿中。如果你觉得免费用户不够畅快的话,还可以购买高级用户。
Public Domain Archive
这里提供的照片都是免费共享的,并且会每周更新,尽情地使用吧!
设备素材
3 Free Flat Device Mockups from InVision!
这是三款来自InVision的设备视觉稿素材,当你设计好UI之后,可以结合这三款素材制作成高保真的视觉稿。
iPhone 5s Template from Mockuuups
这是一款iPhone 5s的视觉稿素材,你可以轻松修改屏幕内容和背景图片,制作属于你的效果图。
iPhone 5s & 5c Mockups
同上一款一样,这一款iPhone 5s和5c的素材也是免费的,可以轻松定制内容。
3 Free Presentation Mock Ups
这3款视觉稿模板可以帮你轻松创建逼真的演示文稿。
Photorealistic Macbook Mockups
这一Macbook视觉稿素材是基于真实而专业的照片制作而成,绝赞。
Free iPhone & iPad Mock Ups
主流的iOS设备都是兼容iPhone和iPad的,当你展示iOS APP的时候,不妨直接使用这款高分辨率的iPhone/iPad素材。PSD文件中,屏幕截图都是单独的智能对象,可以替换。除此之外,背景还包含了5张不同的图片可供替换。
Placeit.net
Placeit 是一个免费的视觉稿生成工具,上传照片,网站会帮你处理成截图,并生成一个单独的网址,打开网站就可以看到最终结果。
带栅格的PSD
iPhone 5 Grid
设计师Eddie Lobanovskiy制作的10列栅格的iPhone 5 栅格系统,在这套栅格系统下,你设计的UI会更加整洁。
Bootstrap 3 Grid System
这套Bootstrap 3栅格系统是PSD格式的,方便你在PS中设计基于Bootstrap的UI。
A better Photoshop grid for responsive web design
来自Typekit的设计师Elliot Jay所制作的一款宽度约为1000px的响应式栅格系统,你可以在他的博客中下载这套栅格系统。
灵感
当你灵感闪现的时候,想要很快进入设计阶段然后实现它,并不容易。好在有许多技巧和方法可以帮你快速推进,迅速地将灵感转为为实际可见的作品,节省大量的时间。
A shorthand for designing UI flows
来自Basecamp的设计师Ryan Singer设计了一套快速高效推进UI设计流程的Outlines,遵循这套工具,你可以在5分钟内看到一套清晰而简约的设计稿。
Storyboards
在InVision,我们通常使用低保真的故事板来快速推进设计流程,通过故事板,我们可以快速地将脑中的概念同直观的视觉效果结合到一起,甚至可以试图将最终的UI界面具现化,在这个过程中无需花费大量时间进行像素级的打磨。
原文地址:invisionapp
优设网译者:@陈子木