首页 > 代码库 > 不容错过的UI设计素材大合集

不容错过的UI设计素材大合集

免费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界面具现化,在这个过程中无需花费大量时间进行像素级的打磨。

不容错过的UI设计素材大合集