反馈已提交

网络繁忙

页面布局

  • 文档创建者:susie
  • 历史版本:15
  • 最近更新:Carly 于 2023-09-11
  • 当我们制作一份需要多个图表元素构成的数据报告、看板、大屏等数据可视化应用时,合理的布局尤为重要。


    1. 页面布局基础

    首先元素的排列要整齐,这将影响使用者的第一感受。

    排列整齐要注意模块之间对齐,间距相等,合理留白。

    四周对齐

    各模块之间要对齐、否则就会出现凌乱不整齐的感觉,尤其是平行位置,特别要注意对齐的问题。

    没有对齐
    对齐

    间距相等

    各模块标题与模块边界的间距、模块与模块之间的间距、模块与整个大页面间距,图表坐标轴与模块边界的间距,各个分类之间的间距等需要细化,做到统一一致,确保布局的规整性。

    间距不等间距相等

    合理留白

    留白的运用能增强视觉美观度,在版式设计中要运用好空白,合理留白。应用在报表中主要体现在模块不要顶边,模块与模块间要有合理间距,在模块中图表的边线不要顶边。

    合理留白
    不合理留白

    边角统一

    边角统一是画面和谐的关键因素,使用圆角还是直角都是看页面效果需要或者个人的倾向,但是要避免同一页面出现两者同时出现的情况

    善用阴影

    善用阴影可以使平面的画立体起来,在报表中通过下图底部背景框无阴影与有阴影的对比,可以使报表有层次感。

    添加阴影时要注意不可过深,能够与背景结合但不突兀。


    2. 合理的信息密度

    新手经常会有一个误区,认为可视化就是把所有的内容全部都展现给用户看。

    但是一个好的可视化应当要砍掉大部分内容,只保留最需要的,这样才有利于向用户清晰地叙述可视化故事。

    分清想要呈现的数据间的主次关系,根据数据主次关系来放置元素。关键位置、视觉一眼触达的位置放主要内容,次要内容放置在四周的边缘位置。


    3. 符合人眼扫描模式

    让信息去匹配读者注意力的点,显然是优于让人的注意力去适应信息的做法。

    根据 NNGroup、UXPin 等设计团体的研究,最常用的两种扫描模式是「F 型」和「Z 型」:

    • 「F 型」应用最为广泛,尤其是对于内容丰富的网站


    • 「Z 型」用于那些文字信息少,最后需要强调用户点击类的网站

    我们在布局内容时,放置的位置要符合人眼扫描模式。

    4. 常见的布局示例

    这里推荐几个常见的数据可视化应用的布局,用户可以参考使用。

    布局类型示例
    驾驶舱布局
    多级分析页面布局
    数据分析页面布局
    移动端布局
    故事板布局


    附件列表


    主题: 数据可视化方法
    • 有帮助
    • 没帮助
    • 只是浏览

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持