博客> 最新Dashboard设计实例、技巧和资源集锦,视觉和功能两不误,妥妥的!
最新Dashboard设计实例、技巧和资源集锦,视觉和功能两不误,妥妥的!
2019-05-22 10:27 评论:0 阅读:390 jongde
产品经理 设计 交互设计 原型设计 网页设计 网页布局

Dashboard设计,尽管设计师们叫法各不相同(例如:“数据面板设计”, “控制面板设计”, “仪表盘设计”或“后台界面设计”等等)。但,此类设计的最终目都是力求以最直观、最简洁的方式呈现各种信息和数据,从而为Web或App用户提供最有效、最实用的行动指南或决策基础。

但是,对设计师们而言,这一看似简单的设计目标,执行起来并非易事。究竟应该选择哪类图表,才能真正完美直观的展示各类数据?究竟如何选择和搭配界面色彩,才能达到美观吸睛的同时,又能突出页面重点?究竟如何选择界面图标,才能更好的引导用户?

下面,小编就为大家精选了20款最新、最优秀的Web和App dashboard界面设计作品,和大家一起学习和分析dashboard界面设计的相关原则,技巧以及禁忌:

注意:为方便大家搭建更加优质高效的Dashboard设计,及时打磨和迭代相关Web/app设计,小编也会在分析各类优秀设计作品的同时,介绍相应的原型设计技巧(本文原型设计技巧都以更快、更简单的原型工具Mockplus为基础而提出),并分享一些实用的Dashboard UI kit&模板资源, 希望对广大设计师们有所启发.

1. Dashboard for Employees and Customers

 1.Dashboard-for-employees-and-customers-image.jpg

设计师:Aman Singh

推荐指数:★★★

亮点: 实时自动更新各种数据;视频展示

实时监测和展示相关数据,及时告知用户异常情况,从而引导用户决策,是商务类网站之门添加主控界面的一大重要功能。而此款设计就通过实时自动更新各类数据的设计, 轻松实现这一目的。其视频展示设计,对于吸引用户注意,降低页面跳出率,也非常有效。

学习点:

实时动态更新各种数据,优化用户体验

2. VMware Dashboard Exploration

 2.VMware-dashboard-exploration-image.jpg

设计师:Clay

推荐指数:★★★★

亮点:

流畅吸睛的图表联动设计

联动设计,作为Web/App主控页面设计最常见的设计方法之一,为用户快速查看数据提供便利的同时,有效提升界面设计的可定制性。

而此款Dashboard设计,就通过采用饼形图与折线图之间的联动设计,为用户更加直观流畅的呈现各类数据。

学习点:

利用联动和下钻等设计方法,简化Dashboard设计的同时,提升用户体验。

3. Dashboard UI Interaction

 3.1.Dashboard-ui-interaction-image.jpg

设计师:Aman Singh

推荐指数:★★★★

亮点:极具互动性的交互式设计

极具互动性的交互设计,是提升Dashboard设计可用性和吸引力的重要方式。而此款设计就采用了多样的交互式设计,为用户提供了更加流畅而愉悦的用户体验。

学习点:

利用交互设计,提升界面互动性

原型设计技巧:

流畅多样的交互设计,在Mockplus原型工具中实现起来并非难事。

Mockplus为设计师们提供了十分丰富的交互设计命令,轻松拖拽,即可为页面或组件添加各类交互。其多样的页面切换动画,对于优化交互设计,提升界面吸引力,也十分有效。

 3.2.Mockplus+Interaction+Designs.png

4. Photo Dashboard

 4.1.Photo-dashboard-image.png

设计师:Dumnoi Ikechukwu

网页类型:图片展示类网页

推荐指数:★★★

亮点:布局清晰的网格设计

此款图片展示类网页的后台界面设计,为方便摄影师自由地管理客户照片,通过采用布局清晰的网格设计,结合简约易懂的设计风格,打造了布局十分清晰直观的Dashboard设计。其栅格内填充的图片,也使整款网页设计更加美观,有效地避免了极简主义网页设计,非常容易带来的枯燥乏味之感。

学习点:

利用对称或不对称网格打造清晰直观的界面布局

原型设计技巧:

网格设计,一直以来都是网页设计中不可或缺的重要页面布局方式。Dashboard设计,也是如此。在使用Mockplus制作此类原型时,设计师可轻松使用其“快速格子”和“填充”功能,结合文本和图标组件,快速创建类似的优质Dashboard网格设计。

5. Dashboard Interaction

 5.1.Dashboard-interaction-image.jpg

设计师:Luke Peake

推荐指数:★★★★

亮点:简洁直观的卡片设计

除却网格设计,简洁直观的卡片式设计,也是UI设计中常用的另一种页面布局方式。此款Dashboard界面设计就通过此类卡片式布局设计,更加清晰直观的展示Web/App相关内容。用户轻松点击,即可展开卡片,了解详情。

其拖拽即可实现的卡片排序方式,也使整款设计更加人性化,能够有效地提升用户体验。

学习点:

利用卡片式设计,优化页面布局,提升界面实用性

原型设计技巧:

利用Mockplus原型工具搭建类似的卡片式布局设计,十分简单快捷。设计师只需利用“形状”或“面板”组件,作为卡片容器,然后填入文本、组件、图片以及其他相关组件,结合各类交互命令,即可轻松打造简洁易用的卡片式设计。

 5.2.Create-card-ui-designs-in-mockplus.png

如图中原型界面,在Mockplus原型工具中,轻松快捷的创建优质卡片式设计。

6. Fleet Manage Dashboard: Living Tracking

 6.Fleet-manage-dashboard-living-tracking-image.jpg

设计师:Arun Raj

网页类型:车队管理类网页

推荐指数:★★★★

亮点:动态展示实时数据

本款车队管理类网页的Dashboard界面设计,通过动画设计为用户实时展示车队数据信息,清晰直观。蓝白的色彩搭配,也使实时的数据变换,更易于用户捕捉和查看,非常实用。

高效直观的Dashboard设计,离不开简单工具实用的原型和设计协作

无论设计师设计理念或创意如何,优质高效的Dashboard设计并非一蹴而就。也需要设计师根据实际的Web/App情况,一次次更迭和打磨,并在后期交付阶段,与其他设计师、开发人员或产品经理无障碍沟通,完美执行和呈现,最终打造出美观实用的设计。

而这一过程中,设计工具的正确选择,也很大程度上影响整个产品团队的工作效率和成果:

Mockplus原型工具 – 助你快速搭建Dashboard设计原型

如以上分享原型设计技巧所描述的那样,Mockplus, 作为一款更快、更简单的原型工具,提供了非常强大而实用的功能,帮助用户快速搭建,测试,更迭以及分享各类Dashboard设计原型。

iDoc在线设计协作和交付工具 – 助你快速更迭,讨论和交付Dashboard设计

iDoc在线设计协作和交付工具, 则为参与产品设计的设计师,程序员和产品经理等成员,提供了一个高效实时的在线协作和交付平台,帮助他们快速更迭,讨论,分享和交付Dashboard设计。  26.iDoc-image.jpg

总之,三言两语,道不尽人和事。好的设计工具也是如此。唯有亲身体验,洞悉其精髓,方能惊喜不断,流连忘返。

结语

总之,不管设计师们最终选择了哪类图表、配色、图标、页面布局,亦或是交互动效,呈现其Web/App数据和内容,如若最终能够轻松的实现界面与用户之间的沟通。那么,这款设计,就是一款高效实用的Dashboard设计。再结合视觉设计,打造出清晰的页面视觉层次,搭建一款高效实用且美观的Dashboard界面设计,就不是难事。

当然,美观高效的Dashboard设计,并非一蹴而就。也需要设计师在设计阶段,选择一款实用的原型工具(比如 简单快捷的Mockplus ),及时打磨和迭代。并在设计后期交付阶段,借助一款高效实用的在线设计协作和交付工具(例如简单易用的iDoc),加速设计进程,提升协作效率,以最少的时间和资源,打造最佳的设计作品。

收藏
0
sina weixin mail 回到顶部