Dashboard设计心得分享

UI中国里好像对这方面的分享蛮少的,最近完成的一个项目与大家分享一下心得。

项目背景:一款产品形的大屏界面,跟以往定制界面不同,需要用户可以自行编辑其中组件数量、形式和位置。

难点在于如何尽可能考虑到各种展示情况下的视觉效果,寻找其中规律与共同点。

PS:感兴趣的童鞋可以登录TD官网咨询酷屏产品。

Image title

图像大小为1920X1080。首先确定界面展示内容,在下方留出时间和logo区域。

Image title

在内容区域分为12X24的网格分割,目的在于限制用户在调节各组件大小时按照规定网格规则内调整,最早选用的是12X12标准网格,后期为了增加排列组合方式对网格数量进行了增加。

Image title

为了使得展示效果更好,大屏尽量用深色调展示,增加百分之三十黑色蒙层,使得用户自定义背景下效果更好。

Image title

对网格布局合理性进行测试,多调试几种。

Image title

对标题文字字号、位置进行确定。同时规划组件在区域内最大范围,使得不同排布下组件有自己的排布和对齐规律。

Image titleImage title

目前组件包括:地图、概览图、折线图、排行榜、饼图和柱状图,对各组件进行单独设计,同时严格遵守之前设定,测试效果。

Image titleImage titleImage title

测试背景。基本到这里设计部分大体完成了,由于不确定元素较多,所以不增加多余元素,以防止特殊情况下效果出现偏差。

Image title

最后一部,针对性做一些代表性板式对各组件在其中效果进行测试,同时随机排列组合进行视觉上调试,对其进行标注和限定,同时在给到开发人员时更加清晰明了。

3 2 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部