可视化大屏视觉设计的要点!可视化大屏界面设计案例赏析

  导语:可视化大屏视觉设计的要点!可视化大屏界面设计案例赏析

  可视化大屏视觉设计的要点!

  数据可视化设计是通过可视化直观地呈现大数据背后的结构、逻辑和趋势等。使数据更加可读,告诉人们数据背后的意义。极大地帮助人们利用数据信息来实现商业价值。因此,数据可视化设计已经成为目前热门的工作岗位。

  数据可视化通过视觉设计的表现手法,可以将复杂无形的数据具体化,将凌乱的数据故事化。它不仅可以展示视觉设计后的数据之美,还可以通过设计语言有效地传达数据信息。那么我们应该如何设计大屏幕数据可视化产品?

  一、大屏幕使用字号分析

  由于字号使用不合理而返工是一件可怕的事情。因为如果调整字号,几乎所有相关元素都必须调整。所以在大屏幕设计之前,设置合理的字号非常重要。

  因为大屏幕的开发是基于Web端,所以网页设计中使用的最小字号是12px,小于12px浏览器基本无法识别。但大屏幕设计中,12px的字号会显得较小。由于大屏幕本身很大,观众只有站在远处才能看清全貌。

  对于不同比例的大屏幕,字号的选择也会有所不同。选择字号之前,设计师最好去现场测试。按照大屏幕的比例制作几个字号测试图,然后在大屏幕使用环境中的关键浏览位置和屏幕边缘,测试字号大小。

  二、大屏幕设计布局分析

  大屏幕设计的四个过程包括需求调查、数据分析、产品设计和可行性测试。其中,数据分析的结果是大屏幕布局的重要依据。数据的主次关系、总分关系、不同层次的业务指标等都与大屏幕布局有关。

  核心业务指标应突出并占用较大面积。主要业务指标应放置在第一视觉的上方(右上角);界面边缘设计了次要业务指标。与此同时,每一个业务板块都会有数据主次的层次,这在设计形式上也需要表现出来。

  此外,在界面布局划分业务指标时,最好将相关业务指标放在同一区域或相邻区域。对于观众来说,这在浏览中更有逻辑,不会有分裂感,也更容易形成结构性的理解。

  三、定义设计风格的主题

  大屏幕设计一般以深色为主题,强调科技感和酷炫效果。浅色大屏幕容易造成眼睛疲劳且不容易渲染出酷炫的效果。深色主题会在视觉上更加注重内容,可以减少眼部刺激,帮助观众长时间浏览。

  在暗色调设计的基础上,设计师还应结合行业属性定义大屏幕的整体色调风格。比如:公安、交通、政务等行业常用的蓝色调,蓝色调也是大屏幕设计最常用的颜色;在保险、银行、金融等行业,金色调更符合行业属性,但切记不要大面积使用,否则容易造成俗气的感觉;医疗、环保、能源、健康行业的大屏幕可以采用能代表未来、希望的绿色调;电商娱乐行业的大屏幕可以是橙色和紫色,也就是暖色,可以渲染活泼的场景。

  1、大屏要有看点

  铺满文字和图表的大屏幕很难让人产生观赏情绪,所以大屏幕的设计一定要有趣。大屏幕的主视觉元素,一般面积比较大,用于立即抓住观众的眼球。在主视觉立即抓住观众的眼球后,视觉焦点将逐渐扩展到周围的相关数据信息。

  设计大屏幕就像设计海报,需要突出的主视觉元素,和谐的排版和构图,视觉上要有冲击力,才能呈现出美观的数据可视化显示页面。

  2、大屏幕设计需要情感认同

  尽管美感很重要,但并非大屏设计的唯一追求,真正能让用户惊叹的一定是情感上的调动。美国著名心理学家唐纳德·诺曼提出了三个层次的情感设计:本能、行为和反思,大屏幕设计风格也可以根据情感设计的三个层次来定义。

  美观的设计可以让用户立刻产生观赏情绪,这就是本能层。观赏性情绪的延续也体现在产品的功能性、易懂性和故事性传递上,这将与用户互动,即行为层面。最终,用户的情感认同会产生更高的满意度和依赖感,即反思层。

  三个层次相辅相成,简而言之就是抓住眼球(本能),满足需求(行为),认同依赖(反思)。

  好的大屏幕设计不仅美观,而且易于理解和使用。大屏幕用户往往是行业专家,对行业有充分的了解,对产品业务需求有专业的了解。面对这样的用户,设计师必须具备专业能力。

  四、情感板设计方法

  情感板是将设计对象的相关图片和材料整理在一起,创造相应产品的调性。通过产品的设计和加工,使用户产生情感共鸣。情感板也可以理解为设计灵感的收集,是设计思维的可视化表达。

  在产品的视觉设计中,情感板是一种非常科学有效的设计方法,可以帮助设计师客观理性地定义产品的视觉设计风格,从而使产品设计更贴近用户的头脑。

  做好以上四个方面的设计,就可以做好数据可视化大屏的视觉设计,不仅让用户使用起来更加方便,还能让用户对数字大屏产生依赖,喜欢上这样的大屏设计

  可视化大屏界面设计案例赏析

设计要求:突出可视化大屏特点

行业属性:可视化大屏颜色:无

设计理念: 本次设计背景采用深蓝色及深蓝绿色,同时页面元素颜色采用亮度比较高的浅蓝色及黄色来保证屏幕数据的清晰度,更好的传递信息.
同时页面布局采用常规左中右布局,虽然常见,但是好用,很容易让用户快速接收到页面要传递的信息.左右两侧主要展示详细数据,中间展示重要数据,数据重点体现的更加直观.
同时页面通过纹理化地图背景与地图结合来体现空间感,赋予页面科技、高大上的效果

途傲科技为中小企业提供网站制作、网站建设、微信H5、微信小程序,多商户平台,多级分销系统,APP开发,手机网站,HTML5多端自适应网站,营销型企业站建设,及对技术人才的培养等都积累与沉淀了丰富的心得和实战经验。

如果您有想法,可以将需求提交给我们【免费提交需求,获取解决方案】

免责声明:文章部分内容收集于互联网,不代表本站的观点和立场,如有侵权请联系删除。

发表评论

您的电子邮箱地址不会被公开。

QQ客服
运营电话
您好,有任何疑问请与我们联系!