2019年不容错过!史上最全的Dashboard模板和资源下载
精心设计的Dashboard(仪表板)可以高效展示信息,更能让用户第一眼就迅速捕获到关键信息。同时,Dashboard也是帮助用户在网站或APP上快速导航的最简单方法之一。Dashboard是否可以很好地发挥应有的价值,其设计至关重要。
为了帮助UX/UI设计师更高效地设计出美观又功能强大的Dashboard,Mockplus为你精心挑选了50个免费好用的Dashboard模板和UI工具包,包含Bootstrap 4 Admin Dashboard模板、Dashboardui kit 3.0免费下载资源、BootstrapAdmin模板等等。
全文主要有两部分:
30个最佳Dashboard模板
20个最好的Dashboard UI工具包
第一部分:30个最佳Dashboard模板
1. Argon Dashboard Laravel
Argon Dashboard Laravel是一款为Laravel Framework 5.5以及其更高版本构建的Bootstrap 4 Admin Dashboard。该模板免费,并且为使用者提供了一个完全编码的“前端+后端”解决方案。
特征:
100个手工制作的组件
3个自定义插件

2. Black Dashboard
Black Dashboard是一个免费的bootstrap 4 Admin模板,这是一个可用于Admin和可视化业务数据的绝佳模板。其配备了大量的组件、颜色选项、卡片、排版和图形等。
特征:
16个手工制作的组件
3个自定义插件
7个示例页面

3. Now UI Dashboard Angular
Now UI Dashboard Angular是一款免费的Bootstrap 4 Admin Angular 7模板,由原型工具Invision和Creative Tim免费提供。
特征:
16个手工制作的组件
5个自定义插件
7个示例页面

4. Argon Dashboard
Argon Dashboard是一个用于Bootstrap 4的免费开源Dashboard。所有组件都经过完全编码,可帮助你创建出色的网站。
特征:
100个手工制作的组件
4个自定义插件
6个示例页面

5. Material Dashboard Dark Edition
Material Dashboard Dark Edition是一款免费的Material Bootstrap 4 Admin模板,采用全新设计,灵感来自Google的Material Design。
特征:
60个手工制作的组件
2个自定义插件
3个示例页面

6. Football Dashboard Game
Football Dashboard Game模板具有黑色界面,所有屏幕和元素都是完全可定制的,且组织良好,该模板适用于Sketch Figma,Adobe Xd和Photoshop。
特征:
100%矢量形状
专为Sketch / Photoshop / Figma / XD设计

7. Metronic
Metronic是一款响应式的Admin Dashboard模板。该模板完全编码,并且适合所有级别的开发人员。
特征:
全新设计
强大的框架设计
多个演示文件
无限组件数量
深度定制Bootstrap,具有原生外观

8. Vuesax Vuejs
Vuesax Vuejs是一款2019年新发布的模板,该模板高度可定制。该模板没有使用jQuery,完全由Vue JS创建,对于开发人员来说,是非常友好的。
特征:
使用Vue CLI创建
浅色,半暗和深色布局

9. Decima
Decima是一款使用Angular构建的创意Bootstrap 4 Admin模板。该模板适用于移动端、平板电脑以及桌面运用。
特征:
完全响应式设计
易于定制
语言翻译功能

10. Elite Able - Bootstrap 4Admin模板
Elite Able可以说是一款最全面的Bootstrap 4 Admin模板。它具有功能强大的页面和组件。该模板是Themeforest上评价最高的一款模板。
特征:
超过20种布局,引入14种全新的布局
响应式和移动优先设计
专业的外观设计和色彩组合

11. Dataviz UI Bootstrap Admin Dashboard模板
Dataviz是一款非常美观的模板,使用CSS,HTML5,jQuery,SASS和Bootstrap框架构建。
特征:
提供Light&Dark两种版本
水平和垂直布局
响应式设计
跨浏览器兼容性

12. RippleUI
RippleUI是一款基于Bootstrap 4构建的模板,有非常好用的组件和插件,并且都是高度可定制的,该模板还使用了Gulp构建,可实现超高速自动化工作流程。
特征:
构建最新版本的Bootstrap(v4.3.1)
完全响应式设计
轻量级代码,可在所有设备上加载
干净直观的设计

13. Free Excel Dashboard模板
基于Dashboard的报告是实现业务目标的强大工具,它可以以单页面布局的形式来展示公司的重要数据。该模板资源包含多个电子表格。该模板资源包含:KPI Dashboard模板、销售Admin Dashboard模板、项目Admin Dashboard模板等。
特征:
6种不同类型的Excel Dashboard
包括Excel 2007和Excel 2010

14. Atmos
Atmos是新一代的Bootstrap 4 Dashboard模板。它配备了简洁的用户界面,具有可定制的组件和小部件。
特征:
完全响应式设计
两个独立的配色方案
使用Bootstrap v4.2.1创建

15. Material Dashboard Pro Angular
Material Dashboard PRO Angular 7是Material Bootstrap 4 Admin模板的高阶版,因此该模板是收费的。该模板采用了全新设计,灵感来自Google的Material Design。
特征:
200个手工制作的组件
15个自定义插件
27个示例页面
基于Bootstrap构建

16. Ample Admin
Ample Admin是一款很受欢迎的开源WebApp模板,可用于Admin Dashboard和控制面板设计。它是一款响应式HTML模板,基于CSS框架,还包括bootstrap 4版本。
特征:
3个不同的Dashboard
7个不同的演示文件

17. Monster Admin
Monstrous Admin是完全响应的HTML模板,基于CSS框架。该模板的设计中使用了所有Bootstrap组件,并重新设计了许多常用插件。该模板具有一致的设计,可用作后端应用程序的用户界面。
特征:
5个不同的Dashboard
6个不同的演示文件
数据表导出格式包含CSV,Excel,PDF,并且可复制和打印
包含PSD文件

18. BangoDash
Bangodash是一款完全响应的bootstrap 4 Admin Dashboard模板。它使用bootstrap 4框架,HTML5,CSS和JQuery构建,适用于所有主要的Web浏览器、桌面和智能手机设备。该模板有大量的UI组件,并且包含最新的jQuery和Bootstrap插件。
特征:
3种不同颜色的Dashboard
70多个响应式HTML页面
易于定制
200多个UI图标
W3C验证码

19. Webadmin
WebAdmin是一款基于引导程序的完全响应式Admin模板。它具有许多可重用的UI元素和小部件。
特征:
响应式布局
基于Bootstrap 3.3.7创建

20. AdminLTE Control Panel Template
AdminLTE Control Panel Template是一款最佳开源Admin Dashboard和控制面板模板。它构建于Bootstrap 3之上,完全响应式设计,具有可重用的组件。
特征:
W3C服务验证
响应式设计
移动优先设计
1000多个图标

更多Dashboard模板资源
21. Free Dashboard Presentation Template
可以用于商务会议的Dashboard演示模板。

22. Argon Dashboard Nodejs
使用Node.js框架构建的Bootstrap 4 Admin Dashboard模板。

23. Vuetify Material Dasboard
建立在Vuetify,Vuex和Vuejs之上的Dashboard模板。

24. Black Dashboard React
界面非常美观的Bootstrap 4(Reactstrap)Admin Dashboard模板。

25. Paper Dashboard 2 PRO
Paper Dashboard 2 PRO是一款功能强大的Bootstrap 4 Admin Dashboard模板。

26. INSPINIA
INSPINIA Admin Theme是一款具有平面设计理念的高级Admin Dashboard模板。

27. Minton
Minton是一个功能齐全的自定义Admin主题,使用Bootstrap 4.1.3,HTML5,CSS3和jQuery构建。

28. Xtreme
AdminX是一款基于现代和流行设计的模板。

29. Root
基于Core UI Pro的Admin的模板。

30. Gradient Able
使用最新的Bootstrap 4 Beta框架制作的模板,具有丰富强大的Admin模板功能。

20款Dashboard UI工具包资源
31. Fobia - Bootstrap 4 Web应用程序UI工具包
Fobia是Bootstrap 4 Web应用程序UI工具包,同时也是一款Bootstrap 4 Admin Dashboard模板,一共包含三种不同类型的Dashboards:渐变颜色Dashboard,纯色Dashboard和深色Dashboard。该工具包完全响应式设计,适用于所有智能设备。
特征:
70多个响应式HTML页面
易于定制
200多个UI图标

32. Arion
Arion是适用于Sketch的Admin Dashboard模板和UI工具包。具有浅色和深色两个版本,具有先进的设计系统。该工具包里的每个Sketch文件都经过精心标记,包含组和层的层次结构概述,使用起来也很方便,只需点击即可轻松替换图像,更改颜色和图标等。
特征:
紧跟趋势设计
具有设计系统
具有浅色和深色版本

33. Appwork
Appwork是一个Bootstrap 4模板和UI工具包,它基于Bootstrap 4框架构建,具有很好的响应式设计,是可自定义的应用程序和Dashboard模板。
特征:
具有主题皮肤
RTL方向支持
具有9种布局
响应式设计

34. Coda
Coda是一款超灵活、超强大的响应式Angular 7+ Admin Dashboard和Sketch UI工具包。Coda采用模块化设计,可轻松定制,适用于所有类型的Web应用程序,你可以自定义Admin面板、项目Admin系统、Admin Dashboard、应用程序后端、CMS或CRM。
特征:
20+独特的角度组件
2100+字体图标
其他页面(404,登录,注册...)

35. Fiori
Fiori是一款现代风格的响应式jQuery HTML Bootstrap 4 Admin UI Dashboar工具包。Fiori专为现代应用程序而构建,包含许多组件,元素和小部件。使用该工具包,设计师不用浪费时间去考虑视觉设计。
特征:
10个不同的Dashboard示例
具有邮箱,聊天,常见问题解答部分
超过25种按钮,每种按钮有8种配色方案

36. Flacto
Flacto是一个基于bootstrap 4的高级Admin工具包,它具有超级简洁的用户界面设计,还包含可自定义的组件和小部件以及两种不同的配色方案。该资源完全响应,易于定制,代码也非常易于理解。
特征:
具有Checkboxs
精美图标

37. Dashboard UI Kit Sample Sketch Resource
这是一款适用于Sketch的全新Dashboard UI Kit,设计师是Pierluigi Giglio。
特征:
现代设计
具有内置定制器

38. Dashboard UI Kit Sketch Resource
这是另一款适用于Sketch的Dashboard UI工具包,包含了一些最新的设计趋势和可扩展的组件,如表单,模态弹出窗口,面包屑,图形等等。并且,所有元素都可完全自定义。设计师是Kumar。
特征:
响应式设计
精美组件

39. DASHBOARD UI KIT
该工具包专注于Dashboard用户界面和Web应用程序的设计,可以帮助你快速进行原型设计。
特征:
76个完整的屏幕
76个像素完美Dashboard设计
免费谷歌字体源Sans Pro和辅助Proxima Nova

40. B2C Dashboard UI Kit Sketch
B2C Dash board UI工具包是Sketchapp上一个很优质的资源,由设计师Pierluigi Giglio设计和发布。
特征:
免费的PSD文件
Sketch应用资源

更多Dashboard UI工具包资源
41. Free Adobe XD Dashboard UI工具包
这是由Impekable Design创建的一款Adobe XD免费工具包资源。

42. FREE Dashboard UI Kit
专为Adobe XD设计的免费Dashboard UI工具包。

43. Web SaaS Dashboard UI工具包
可用于Sketch、Adobe XD和 Photoshop的SaaS Dashboard UI工具包。

44. 40 Web Dashboard UI工具包
包含40个Dashboard UI屏幕的工具包。

45. Datta Dashboard UI工具包
该Dashboard UI套件包含130多个定制设计组件,适用于Sketch,Photoshop和XD。

46. Dashboard UI Kit 3.0
第一个也是最大的网络应用程序和Dashboard设计工具包,在React中开发,适用于Sketch,Adobe Photoshop和Adobe XD。

47. Flatkit
界面非常美观的Web应用程序UI工具包。

48. Dashboard Icons
36个Dashboard图标资源。

49. Dashboard UI Kit
该工具包具有Admin Dashboard模板和UI框架,专注于Dashboard用户界面和Web应用程序设计。

50. Finance Dashboard UI Kit
财务和银行Dashboard Web App UI工具包。

以上就是Mockplus为大家精选的50款Dashboard模板和UI工具包,这些都是比较优质的资源,可以很好的用起来哦。当然咯,你也可以使用Mockplus自己设计Dashboard原型。小摹自己做了一个:
Mockplus项目例子-Asana Web(Web,工具类)
主要页面:登录注册页面、主页、任务列表页面、添加任务页面、菜单页面、日历页面等。
部分页面展示如下:


在线预览:http://run.mockplus.cn/Lm5KgRAUJPl2YQFS/index.html
你也可以试试,可以直接在Mockplus中导入MP文件,进行再设计哦~
Mockplus使用地址:https://www.mockplus.cn/download