2020上半年可视化作品展示

用户头像
上海/设计爱好者/5年前/143897浏览
2020上半年可视化作品展示
用户头像
AYONG_BDR
此作品是整合了近半年的数据可视化作品,包含周练,项目外包,组件整合,动效制作等方面的一些总结~
近半年有了自己的品牌AYONG_BDR;公众号粉丝接近2000人;有了自己的社群,即将开3群;做了周练并且已经坚持到第八期了,认真负责周练的点评批注,帮助了很多刚转行可视化的设计师解惑;现在可视化大屏设计课程也即将上线,期待自己的发挥!总体来说对自己近半年的成果还是挺满意的,希望自己在下半年继续努力~
本作品主要涵盖大屏页面设计,组件化图表设计,动效展示页面设计三个模块,希望大家好好欣赏,互相学习~
附件有我为大家准备了一套可视化界面源文件的参考,希望大家喜欢~
2020上半年可视化作品展示(图ZMjIwMTk0MTQ4) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
收藏
2020上半年可视化作品展示(图ZMjIwMTk1ODg0) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
苏州市智慧城市可视化平台

整体风格:采用无边框设计,蓝色调,主要表现在将苏州市各个商圈以及重点单位附近的交通指数,拥堵指数以及拥堵时间,公共资源撒点等指标。此界面选用了苏州市第一医院的周边资源,交通指数等等的需求指标来展示智慧城市可视化。

主视觉:智慧城市一般主要视觉区域都会有一个主建筑,展示某个具体的重点单位的详细指标。此处通过一个高精度的建筑模型作为主视觉,画面效果一下子就起来了,主建筑与其他区域的建筑相结合,详略得当,更能重点突出主视觉。主视觉弹框能够很明显的表现出当前医院的饱和拥堵程度,人流量等等的信息。

左右两边图表:智慧城市等项目,似乎很多人都会觉得左右两侧的图表并不重要,我只要主视觉酷炫就完事了,科技感牛逼就可以。事实不然,左右两侧图表的数据展示其实是整个画面的信息传达区域,当前视角下区域的综合态势,或者说是数据指标。表现能力可以稍弱于主视觉,但不可太过简单,这样就失去了设计的意义了。一定要注意此处的问题,因为作为一个设计师美观永远占很重要的比重,不能想着通过主视觉的酷炫去弥补整个画面,能都做好,为什么不呢?
收藏
2020上半年可视化作品展示(图ZMjIwMTk1ODc2) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
苏州市智慧城市可视化平台
收藏
2020上半年可视化作品展示(图ZMjIwMTk3MDc2) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
苏州市智慧城市可视化平台
收藏
2020上半年可视化作品展示(图ZMjIwMTk3MDgw) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
苏州市智慧城市可视化平台
收藏
2020上半年可视化作品展示(图ZMjIwMTk1MDUy) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
上海集团大数据可视化系统

色彩:黑白灰,红色(可以适当添加一些微小的辅助色去点缀),主要数据由红色来展示,背景由黑色(深色),线条(灰色),主文字以及一些其他重要信息由白色文字构成(此处不是纯白,要切记,深色背景上最好不要用白字去修饰)

装饰线:可以看到此作品由很多点线构成,点线面在HUD风格中占据了至少40%的篇幅,我这张作品因为考虑到一些商业设计以及落地的原因,没有太多的去运用一些,只能以符合商业设计的前提下去做设计。

图表样式:整体的图表样式都没有采用传统的基础组件形式,都在此基础上进行变形,尽可能的不去出现一些特别抢视觉的东西。多在基础图形上增加细节,添加一些点线,既不影响视觉又很能体现排版功底。(HUD风格说实话对排版的要求很严格,要善用点线以及字间距行间距等等)

如果把握不好黑白灰的关系,那么前期做的时候我觉得有90%的人会把画面做的很灰,同时画面细节又不是很多,也有可能相反,画面细节太多,影响数据的展示。

总结:HUD风格大概的因素就是由这几个构成的,色彩,装饰线,字体字号,图表样式,整体色调等。要做好HUD挺难的我觉得,尤其是还要运用到商业设计上,就需要对风格进行改变。
收藏
2020上半年可视化作品展示(图ZMjIwMTk1MDM2) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
上海集团大数据可视化系统
收藏
2020上半年可视化作品展示(图ZMjIwMTk1MDE2) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
上海集团大数据可视化系统
收藏
2020上半年可视化作品展示(图ZMjIwMTk1MDI0) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
上海集团大数据可视化系统
收藏
2020上半年可视化作品展示(图ZMjIwMTk0NTM2) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
四川新津工业园区智慧环保平台
收藏
2020上半年可视化作品展示(图ZMjIwMTk0MjYw) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
四川新津工业园区智慧环保平台
收藏
2020上半年可视化作品展示(图ZMjIwMTk0MjQw) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
四川新津工业园区智慧环保平台
收藏
2020上半年可视化作品展示(图ZMjIwMTk0MjUy) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
四川新津工业园区智慧环保平台
收藏
2020上半年可视化作品展示(图ZMjIwMTk0MjQ4) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
四川新津工业园区智慧环保平台
收藏
2020上半年可视化作品展示(图ZMjIwMTk0NzQ4) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
上海市公共安全机房可视化运维平台

将右上角区域进行图形化优化。
2.主视觉区域效果可以更强一点,着重表现机房的各种温湿度状态以及告警状态等等,通过给机房增加告警信息,以及温湿度报警。
3.将一部分区域文字由蓝色改为白色,为了更清晰表示重点信息的内容,更有主次之分。
收藏
2020上半年可视化作品展示(图ZMjIwMTk0NzQ0) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
上海市公共安全机房可视化运维平台
收藏
2020上半年可视化作品展示(图ZMjIwMTk0NzQw) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
上海市公共安全机房可视化运维平台
收藏
2020上半年可视化作品展示(图ZMjIwMTk3MTI4) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
上海市公共安全机房可视化运维平台
收藏
2020上半年可视化作品展示(图ZMjIwMTk3MTIw) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
上海市公共安全机房可视化运维平台
收藏
2020上半年可视化作品展示(图ZMjIwMTk3MTE2) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
上海市公共安全机房可视化运维平台
收藏
2020上半年可视化作品展示(图ZMjIwMTk2MDMy) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
广东省公安大数据可视化平台

本次的作品是看到各位的一些画面对主视觉的处理不够,可以将画面的一些指标信息叠加到主视觉中,这样可以应对主视觉画面空该如何去表现。一些地图上比较重要的信息可以表现出来(城市信息,当前选中的区域高亮显示,弹框样式以及详情都可以去表现)。

对于画面的布局很多同学都是主视觉在中间,然后图表就是一个叠一个的平铺,这样的话即使画面再出色,也会有一个审美疲劳,所以需要对画面进行再次布局,灵活的去展示每一个模块,这样出来的效果既跟别人不同,画面效果又很突出,这样的效果才是一个设计师需要考虑的,不要从众才是最重要的。
收藏
2020上半年可视化作品展示(图ZMjIwMTk2MDA4) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
广东省公安大数据可视化平台
收藏
2020上半年可视化作品展示(图ZMjIwMTk0OTUy) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
科达智慧城市可视化平台
收藏
2020上半年可视化作品展示(图ZMjIwMTk0OTYw) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
科达智慧城市可视化平台
收藏
2020上半年可视化作品展示(图ZMjIwMTk1MTUy) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
公共事务可视化平台设计
收藏
2020上半年可视化作品展示(图ZMjIwMTk1MTY0) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
公共事务可视化平台设计
收藏
2020上半年可视化作品展示(图ZMjIwMTk1NDM2) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
城市智能交通可视化平台
收藏
2020上半年可视化作品展示(图ZMjIwMTk1NDI4) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
城市智能交通可视化平台
收藏
2020上半年可视化作品展示(图ZMjIwMTk1NDMy) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
城市智能交通可视化平台
收藏
2020上半年可视化作品展示(图ZMjIwMTk1NjI0) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
学生信息数字可视化大屏
收藏
2020上半年可视化作品展示(图ZMjIwMTk1NjUy) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
学生数字可视化大屏
收藏
2020上半年可视化作品展示(图ZMjIwMTk4NDM2) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
国外HUD风格页面练习
收藏
2020上半年可视化作品展示(图ZMjIwMTk2MTAw) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
收藏
2020上半年可视化作品展示(图ZMjIwMTk2MzQw) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
公共交通可视化demo

将原本地图页面对比度加强,降低地图对画面的影响,同时将地图文字进行饱和度的降低。

加强了路网信息的表现,通过发光以及渐变来表现路网信息,代替原本的红色路网,使之更有科学性。

告警区域通过片区显示的方式,着重表现重点单位的告警状态,比如人民广场附近出现告警信息,就要红色展示,通过聚焦形成画面主视觉。片区颜色对应路网颜色更有统一性。

在整个地图区域,有很多颜色的小点,地图下钻就会显示到各个街道的详细路况信息,对交通大数据有着很强的表现力。

对标题区域进行重新细节塑造,增强标题的细节,通过添加科技感点线面的方式,使标题更加突出。
收藏
2020上半年可视化作品展示(图ZMjIwMTk2NDE2) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
科技感HUD-demo
收藏
2020上半年可视化作品展示(图ZMjIwMTk2MTI0) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
旋转地球
收藏
2020上半年可视化作品展示(图ZMjIwMTk2MTcy) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
旋转地球2
收藏
2020上半年可视化作品展示(图ZMjIwMTk2NDI4) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
扫描动效(临摹)
收藏
2020上半年可视化作品展示(图ZMjIwMTk2NDQ0) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
HUD小动效
收藏
2020上半年可视化作品展示(图ZMjIwMTk2NDUy) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
小动效
收藏
2020上半年可视化作品展示(图ZMjIwMTk2NDU2) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
小动效
收藏
2020上半年可视化作品展示(图ZMjIwMTk2NDQ4) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
小动效
收藏
2020上半年可视化作品展示(图ZMjIwMTk2NDM2) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
小动效
收藏
2020上半年可视化作品展示(图ZMjIwMTk2NTE2) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
科技感边框
收藏
2020上半年可视化作品展示(图ZMjIwMTk2NTQ0) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
收藏
2020上半年可视化作品展示(图ZMjIwMzUyMjUy) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
组件1
收藏
2020上半年可视化作品展示(图ZMjIwMzUyMjU2) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
组件2
收藏
2020上半年可视化作品展示(图ZMjIwMzUyMjQw) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
组件3
收藏
2020上半年可视化作品展示(图ZMjIwMzUyMjQ0) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
组件4
收藏
2020上半年可视化作品展示(图ZMjIwMzUyMjg0) - 软件界面 - 站酷设计师AYONG_BDR原创素材 - 站酷ZCOOL
求一键三连~
收藏
1034
举报
|
2496
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
科技感软件升级提示
蓝色透明文件夹图标设计
科技感软件升级提示
手机APP理财软件界面设计
软件界面工具栏主题
网络安全防护示意图
人物图标设计
蓝色红色文件夹置于透明底座
蓝色日历图标悬浮展示
科技感软件升级提示
三维手机应用软件界面图标立体化
图片编辑界面截图主题
蓝色科技感检查清单界面
B端2.5D插画
视频编辑软件界面
基斯·哈林风格的乐器贴图
智能手表插画
科技感软件升级提示
IP形象插画设计
科技感十足的音乐作曲软件界面
蓝色科技图表数据展示
炫彩渐变风格的 APP 图标素材
你可能喜欢
相关收藏夹
大家都在看
登录注册