1. 什么是仪表板

在商业分析中,仪表板通常用于显示数据和信息。所谓的仪表板是一个可视化界面,用于显示与对象或流程相关的数据和信息。制作仪表板常用的工具包括表格类excel、报表类finereport、crystal report、显示工具类finebi和tableau等。

随着大数据时代的到来,越来越多的企业开始意识到数据资源的管理和应用。大数据显示和大屏幕显示受到公司的青睐。作为UI设计师,我们也应该跟上时代的步伐,学习这种可视化设计。

Freelancer Dashboard UI设计

Freelancer Dashboard UI设计

2. 为什么要做仪表板

节省时间

仪表板提供了一种更简单的复杂抽象数据表示方式,节省了时间和精力。其目的是以用户能够理解的方式建立重要信息的沟通。仪表板应确保提供用户需要的信息。

数据简化

表格和图表中的数据是静态的。如果您有一些金融数据,各层面加起来总共有十几个维度。尽管只有十几个表格,但这些维度都扎堆显示时,其复杂性是无法想象的。

用户交互

动态图表具有交互功能。可以通过更改指示器大小和过滤器来显示图表。因此,在设计中,我们应该结合业务主题或分析过程,合理选择视觉形式,并将图形、表格、文本、控件等元素有机地组织起来。

对于设计师来说,这个看似简单的设计目标并不容易实现。应该选择什么样的图表才能完美直观地显示所有类型的数据?如何选择和匹配界面的颜色,以获得美观实用的页面?如何选择界面图标来更好地引导用户?

3. 仪表板的设计技巧

组织信息

仪表板需要组织信息。仪表板的设计需要根据用户的角色类型来映射数据、图表和按键操作项目。信息是基于信息对用户的重要性而呈现的。信息需要被组织、突出重点,明确且迅速地显示出来。

无论网页或应用程序界面设计,设计师都需要遵循用户的阅读习惯。人们的阅读习惯是从上到下、从左到右和从中间位置开始。也就是说,尽量在在主控界面的左上角或中心区域显示重要内容或数据。

一致性

仪表板信息必须在设备、平台和画面尺寸上保持一致性。所谓的系统,意味着用户无论使用哪个设备,都可以看到重要的信息。仪表板的外观和感觉也是其功能不可或缺的一部分。必须遵守颜色一致性的规则,好好设计字体、图表的位置、信息网格、导航等。例如,红色表示警惕,绿色表示目标,辅助信息应该降低透明度以弱化等。

Pixso社区内置腾讯、阿里、字节、今日头条、蚂蚁设计等优秀设计规范,提供海量设计模板和素材,本地化字体资源。设计师们可以参考并下载Pixso社区的信息图表UI组件,保持设计过程中的元素一致性。

信息图表UI组件

信息图表UI组件

用户偏好和可视化

谁使用仪表板?仪表板的主要用途是什么?必须强调哪些信息元素?使用什么样的设备访问信息?设计的文化因素?怎样才能让您的用户获益?回答这些问题,可以理解用户的重要需求,并以此为基础进行设计。可以基于用户的偏好统计数据来确定信息的字体样式、大小和视觉层级。

了解用户群体有助于了解要显示的KPI和数据的逻辑分解。在大多数情况下,仪表板用于领导和管理,因此它展示的是运营层面的多个运营指标。

时间范围

信息的有用性取决于时间因素。仪表板必须考虑一致的时间范围。一贯的时间承诺可以使用户的生活更轻松。历史数据和信息也可以使用更多的选项访问。通过信息、图表和数据的清除时间标签,可以读取仪表板。日期和时间的明确性在仪表板上具有实用的目的。

Freelancer Dashboard UI设计

Freelancer Dashboard UI设计

图标

图标是仪表板非常方便的组件,强调了重要的信息。图标也可以用来显示用户应该采取的行动。这些图标可以与信息一起使用,例如,红色时钟图标可以用于显示任务延迟。

简单、对称、能传达文字含义的图标可以用来更好地显示数据。使用熟悉的图标,可以缩短数据处理时间,使其增加可读性。在标题、明细表和图表中添加图标,不仅可以生动直观地反映主题,而且具有良好的装饰效果。

Pixso社区为用户提供了一个超级图标库。设计师可以轻松点击内置的图标面板,自由选择或搜索所需的仪表板设计图标,并优化界面设计。以下图的Freelancer Dashboard为例,简洁明了的线性图标辅助文字传达,便于用户理解。

Freelancer Dashboard UI设计

Freelancer Dashboard UI设计 

简单图表

可以用简单的图表、图形、饼图等明确表示数据。这些图表代表信息,排序数据,并提供视觉比较。数据的华丽度表明了事物的混乱和复杂。使用图表和图形,可以根据商务需要对数据进行排序。

在设计仪表板页面时,图表设计至关重要。在创建类似母版页设计时,设计师可以轻松选择Pixso社区的“智能图表套件”,根据具体需求选择并添加各种图表,以丰富其界面设计。当然,结合文本、交互和各种动态设计,仪表板的视觉展示会更好。

智能图标套件

智能图标套件

倒金字塔:信息布局

商业应用程序的制作是为了节约时间,提高效率,帮助用户完成任务。一般的经验法则是,在上面显示最重要的信息,在中间积累趋势,在仪表板的下部显示细节。倒金字塔是作家和记者为了说明报告中信息的优先顺序和结构的隐喻。最重要的信息放在上面,关键数据模式、分析和显示网格不应一视同仁。倒金字塔布局有助于设计师实现这个目标。

交互动态

仪表板代表信息海洋,通常集成各种数据源,提供组织数据的整体视图。数据动态变化快,工作中的优先事项也经常发生变化。仪表板应该具有抓住处理商务功能本质的活力。信息、关键指标、图表等必须集中在一个页面上。

网格、表格、图表等仪表板元素具有筛选和排序功能,以便用户与数据交互。用户还可以根据自己的需求定制信息,根据动态的商务需求对信息进行排序。Pixso在跳转、弹窗、切换、关闭等情景下,提供丰富的转场交互动画自定义设置,可组合实现上百种转场形式

Pixso

通过以上的分享,相信您对仪表板已经有一个初步的认识。Pixso自带各种硬件设备的标准尺寸。Pixso组件化的设计理念,让数据设计从原型到交付体验从始至终,节省大量其他重复、乏味的工作时间。如果还想进一步加强认知,不妨打开Pixso,开启酷炫的仪表板设计!