联系我们 face+ 关于 服务 案例
首页 案例 服务 关于 face+

大屏ui设计的几大方向,数据可视化大屏ui设计技巧

Time: 2021-07-08

随着人工智能的不断发展和hmi系统技术的不断提高,屏幕成为了人与机器交互的主要方式之一。在屏幕的使用上,逐渐向着大屏化、可视化方向发展。今天就让faceui为大家介绍大屏ui设计的几大方向,数据可视化大屏ui设计技巧。

  大屏ui设计的几大方向

  1、拼接大屏:大屏几乎都是拼接屏,UI设计时不用考虑屏幕缝隙影响内容的呈现,内容不会丢失,但有可能影响视觉的表现,例如一个很大的人物图像被缝隙正中“劈成”两半,或者“劈中”了眼睛,看起来很不舒服,所以设计时可以建立缝隙位置的参考线避免类似情况发生。(现在企业常用的有无缝隙、1.7mm缝隙、3.5mm缝隙、三种拼接大屏,缝隙越小越贵)

  2、设计尺寸:拼接的每块小屏一般是16:9的高清屏,设计尺寸可以把上下高度设定为1080px,长度按照拼接屏的数量比例得出长度的设计尺寸。例如3乘5的一块大屏幕,高度3块屏设为1080,每块高就是360,360除9乘16等640,640就是一块屏幕的长度,640乘5块屏=3200最后得出设计稿尺寸就是:高1080px乘宽3200px。

  3、视觉设计:首先了解需求,整合数据,分析出主要数据次要数据、总量数据细分数据、各数据的维度等等,通过了解这些可以先设计出一个布局模版,也可以在纸上画出来,布局可以在设计过程中随时调整。

  设计的风格,背景色一般用深色调,深色调紧张感强,让视觉更好的聚焦,大屏暗色调看上去更柔和舒服不刺眼,也会较省电。

大屏ui设计

大屏ui设计(图片来自网络)


  数据可视化大屏ui设计技巧

  1、区分层级

  可以尝试使用组件的大小和位置来区分数据的层次结构。通过定义信息层级,让用户清楚什么是最重要的,在左上角显示更重要的信息,沿着对角线方向,信息的重要程度应该依次减弱,右下角的信息重要性最弱,还可以将信息划分为不同类别,并在不同的视图中显示它们。

  2、简单易懂

  数据可视化的真正目的是用一种更方便理解,更简单的形式来传达复杂信息。不要放一些大多数用户都难以理解的信息,使用更少的列来显示信息,删除冗余内容来减少混乱。

  3、一致性

  使用一致性布局设计的数据可视化界面看起来更好。为了使界面更容易阅读,可以在信息组之间使用类似的可视化效果。把相关的信息放的更近一些,对相关内容进行可视化分组。

  4、临近原则

  在界面中把相近的信息放在一起可以帮助用户快速理解。把相关的信息放的更近一些,不要将相关信息分散在界面上,对相关内容进行可视化分组。

  5、对齐

  可视化组件元素需要在视觉上对齐,并保持视觉平衡。将可视化组件元素在视觉上进行对齐,可以将界面组织的更好,尝试将组件元素进行网格布局设计,不对齐的界面会给用户带来糟糕的体验。

大屏ui设计

大屏ui设计(图片来自网络)


  6、留白

  留白是为了让界面有呼吸感,它使得用户在使用你的界面时能够有出喘息的空间。当用户查看需要的信息时,界面中的留白能够吸引用户的目光,提升用户体验。减少留白会使用户的界面变得混乱,使用留白能对信息进行可视化分组,留白太少简直就是在鼓励你的用户尽快离开。

  7、颜色

  使用有效的配色方案来吸引用户的注意力,帮助他们轻松地浏览信息。仔细选择颜色,目标是使内容易于阅读。使用大对比度来显示背景上的视觉元素。避免使用低对比度和低效的渐变。

  8、字体

  标准字体是可视化界面中的最佳字体,除非有特别的理由,一般不要用其他字体。使用标准字体,因为它们更容易阅读和扫描。特别和美术字体可能看起来不错,但很难理解,避免所有的大写字母文字,因为它很难阅读,人类的大脑需要时间来消化它。使用合适的字体大小和风格,有效地传达信息。不要使用影响可读性的字体。

  9、数字排版

  显示精度超过要求的数字使它们难以阅读和理解。必要时使用整数,因为长数字会使用户混淆,省去不必要的信息,让用户能够容易地比较简单的差异细节。

  10、标签

  使用能够快速有效地向用户传达所需信息的标签。避免使用带旋转的标签,因为很难阅读,尽可能的使用标准的缩写,避免旋转标签。

  以上就是faceui为大家介绍的关于大屏ui设计的相关内容。用户对于大屏的喜爱程度在不断提升,因此这就是要求我们的ui设计者在大屏ui设计方面要更多地站在用户的角度进行思考和设计。


合作咨询

上海(总部)

上海市浦东新区郭守敬路498号22号楼
021-61057328
service@faceui.com

办公地址地图

北京

北京市东城区后永康17号A座
010-64015620
service@faceui.com

办公地址地图

成都

四川省成都市锦江区东大街牛王庙段100号
028-62790929
service@faceui.com

办公地址地图
首页 | 案例 | 服务 | 关于 | face+ | 智见

Copyright © 2009-2022 FaceUI design. All rights reserved


沪ICP备13044459号-5

上海办公地点地图
北京办公地点地图
深圳办公地点地图
在微信中搜索faceui
或保存二维码在微信中打开