邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

热门文章

Mockplus是什么?

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、腾讯、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

了解更多

11款美观实用的Material Design UI工具包

Trista 2018-02-23 11:46:41 阅读:1899

今天和大家分享11个优秀的material design UI kits资源,它们绝大部分是免费的,希望对您的设计有所帮助。

Material design自Google于2014年创建并发布以来,已经逐渐形成了其鲜明的设计风格,并渐渐成为统一 Android Mobile、Android Tablet、Desktop Chrome 等全平台设计语言规范。几乎Google的所有移动应用程序,包括Gmail,Inbox,YouTube 等,甚至在桌面网站也都可以看到Material Design的身影,简洁而美观。显然,Material Design对当前的网页和移动设计趋势产生了巨大的影响。


正因为Material design能给用户带来最贴近真实场景的使用体验,实现简洁直观的效果,因而很多设计师都非常青睐其设计风格。今天和大家分享11个优秀的material design UI kits资源,它们绝大部分是免费的,希望对您的设计有所帮助。


1. FREE MATERIAL DESIGN UI KIT


格式:PSD


价格:免费


特点:适用于Photoshop CS6 +


免费字体使用

分组图层

自定义的矢量图标

Google Material Design UI风格



此工具包专门为启动阶段进行快速简单的网页设计项目而创建,保留Google Material设计指南的结构性和简单性,将为您节省大量的时间,可用于个人作品设计以及商业产品设计。


点击下载:http://www.designtory.net/free-psd/free-material-d...


2. Material Design Kit


格式:PSD,Sketch


价格:99$


特点:适用于iOS系统和Android系统


适用于Sketch 40+ 和Photoshop CC 15+

包含250多个App模板

Material design设计指南



此工具包包含最全面的material design UI元素,你可以使用Mockplus等原型工具导入Sketch文件,利用已有的UI元素,只需解决交互问题,就可以快速进行动态原型设计,大大节省时间。


点击下载:https://materialdesignkit.com/


3. Android Material Design UI Kit Sketch Resource


格式:Sketch


价格:免费


特点:适用于Android系统


移动端App界面元素



此工具包为设计师Ivan Bjelajac制作,包含了丰富的移动端App界面设计元素。下载次数以已经超过30000次,Ivan Bjelajac还有很多其他的优秀作品,也值得学习。


点击下载:https://www.sketchappsources.com/free-source/852-android-material-design-ui-kit-sketch-freebie-rsource.html


4. Google Material Design UI Sketch Resource


格式:Sketch


价格:免费


特点:Google Material Design布局模式



该工具包体现了Google Material Design布局特色,包含状态栏,应用栏,底部工具栏,卡片,下拉菜单,搜索栏,分隔线,侧导航栏,对话框,悬浮操作按钮和其他组件的明暗符号。


点击下载:https://www.sketchappsources.com/free-source/597-g...


5. Material Kit


格式:PSD element, HTML/CSS/JS implementation


价格:免费


特点:终身更新,定期支持


60个定制组件

2个自定义插件

3个示例页面



该工具包是一个免费的Bootstrap UI套件,基于Fez的Github Repo创建,可以为您的Android应用程序快速创建Web页面,且保持一致风格。


点击下载:https://www.creative-tim.com/product/material-kit


6. Material Kit Pro


格式:PSD, HTML/CSS/JS implementation


价格:79$


特点:Material Kit付费版


1000个组件

7个自定义插件

11个示例页面:文档,SASS文件,Photoshop文件



此工具包为Material Kit的升级版,包含更多的插件,组件,文件和页面。


点击下载:https://www.creative-tim.com/product/material-kit-pro


7. Lora Material Design UI Kit


格式:PSD,Sketch


价格:30$


特点:适用于Sketch App $ Photoshop


适用于80多个不同的屏幕

Material design设计规范

免费Google字体,图片,例子

12个热门分类



此工具包是一个巨大的用户界面工具包,可快速进行原型设计。适用于设计社交网络应用程序,仪表板, 统计应用程序,媒体和新闻应用程序(博客,视频,画廊...),电子商务应用程序(商店,商店),预订应用程序,音乐App等等。


点击下载:https://ui8.net/products/lora-material-design-ui-k...


8. Material Design UI Kit freebie


格式:PSD


价格:免费


特点:适用于Photoshop


Material design设计指南


6个文件类型



这个工具包是JakubKośla设计制作的,他花费了大量精力研究Google的Material Design,因而制作了这个界面干净的UI工具包。

点击下载:https://dribbble.com/shots/2064912-Material-Design...


9. FREE Material UI Kit PSD


格式:PSD


价格:免费


特点:Google material design设计风格


全面可编辑PSD文件

结构严谨的图层

现代设计



此工具包包含许多可用的元素,例如:配置文件,音乐播放器,统计信息,图形,按钮,导航菜单等等。适用于网站和移动应用程序的设计。


点击下载:http://psdboom.com/downloads/free-material-ui-kit-...


10. Android UI Design Kit 4.4


格式:PSD

价格: 免费

特点:常更新

4.4新版增加:Action Bar - PullToRefresh & NotBoring;HoloGraphLibrary;Scroll Bar;Search Action Bar;Contextual Action Bar



此工具包还包括以前版本的每个构建模块,使其成为迄今为止最完整的UI设计工具包。需要注意的是,在使用Design Kit之前,您必须先安装Roboto和Roboto Slab字体。设计时可以快速启动文件,然后从Building Block文件中拖拽选择所需的UI元素。


点击下载:https://androiduiux.com/2014/01/10/android-ui-design-kit-for-photoshop-4-4-free-download/


11. Vivid - Soft Material UI Kit


格式:PSD,Sketch,JPG


价格:$48 (50% off now)


特点:包含了6个类别的170多个矢量组件


导航 - 43个组件

小工具 - 55个组件

表格 - 26个组件

风格指南 - 包括调色板,排版指南, 图标和UI元素等



Vivid是一个软件材料用户界面工具包,它结合了干净的版式和像素完美的图形,为您创建任何类型的网站或Web应用程序提供了丰富的资源和素材。每个工具都进行了命名和分组,以帮助您快速找到所需的元素,并在几分钟内创建项目。


点击下载: https://creativemarket.com/TheUIShop/414366-Vivid-...


以上的11款Material design UI工具包皆是由各位优秀设计师用心制作的,其中的元素都是设计的优秀素材,这些免费UI模板都采用了Material Design的可视化语言,仔细查看这些素材,就不难发现一些明显的规律:


1. 设计理念


抛却多余的杂质和无序性,保留其最原始纯净的形态、空间关系、变化与过渡,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。


2. 配色


颜色选取不求多而杂乱,一般选取一种主色搭配衬托色。更多的是在背景主色上进行色彩的明暗变化,演变出更加丰富的配色。


3. 图标


一般来讲,桌面图标尺寸是48dp X 48dp,小图标尺寸是24dp X 24dp。图形限制在中央20dp X 20dp区域内。


4. 字体


英文字体使用Roboto,中文字体使用Noto。


基于以上的优秀的设计素材,那么如何进行有效运用呢?一款快速简洁的原型工具必不可少。建议您使用国内最好的原型设计工具Mockplus通过可视化的鼠标拖拽进行快速原型制作。Mockplus包含三种可视化交互设置:页面交互,组件交互,属性交互。此外,Mockplus支持Sketch文件导入,你大可以在Sketch中使用以上模板编辑好UI元素,一键导入Mockplus,通过可视化交互快速完成原型制作,大大提升设计效率。



更多免费material design UI 工具包:


1. Material UI Kit


适用于:Sketch App & Photoshop


https://psdrepo.com/free-psd/material-ui-kit-freeb...


2. Music App ui kit - Material


https://dribbble.com/shots/3374439-Music-App-ui-ki...


3. Material Design UI Kit PSD Free Download


适用于:Photoshop


https://dribbble.com/shots/1803843-Material-Design...


4. Material UI Kit


适用于:Photoshop, Sketch and Adobe XD.


https://dribbble.com/shots/3363887-Material-UI-Kit...


5. Material Design Widgets Ui Kit - PSD


适用于:Phototshop


https://dribbble.com/shots/2128765-Material-Design...


6. Material Design


适用于:Sketch


https://dribbble.com/shots/1629860-Material-Design-sketch


7. Material Icons


适用于:web, Android, and iOS projects.


https://material.io/icons/




扫描二维码,关注 “摹客” 微信公众号。

原型工具难上手、速度慢?试试Mockplus!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、腾讯、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo

咨询客服

帮助群:513732983 加入QQ群

服务邮箱:service@jongde.com

咨询客服
置顶