博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端的UI设计与交互之数据展示篇
阅读量:5292 次
发布时间:2019-06-14

本文共 864 字,大约阅读时间需要 2 分钟。

合适的数据展示方式可以帮助用户快速地定位和浏览数据,以及更高效得协同工作。在设计时有以下几点需要注意:

依据信息的重要等级、操作频率和关联程度来编排展示的顺序。
注意极端情况下的引导。如数据信息过长,内容为空的初始化状态等。
1、表格
表格被公认为是展现数据最为清晰、高效的形式之一。
注: 1. 表格中的时间、状态、操作栏需保持词语完整不过行。 2. 当数据为空时,可使用『- -』来表示暂无数据。
2、折叠面板(Collapse)
折叠面板通过对信息的分组和收纳,指引用户递进式的获取信息,使界面保持整洁的同时增加空间的有效利用率。
注: 若折叠内容彼此之间关联度较低时,可使用更为节省空间的『手风琴』模式——『手风琴』是一种特殊的折叠面板,只允许单项内容区域展开。
3、卡片(Card)
卡片是一种承载信息的容器,对可承载的内容类型无过多限制,它让一类信息集中化,增强区块感的同时更易于操作;卡片通常以网格或矩阵的方式排列,传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。
注: 1. 卡片通常根据栅格进行排列,建议一行最多不超过四个 2. 在有限的卡片空间内需注意信息之间的间距,若信息过长可做截断处理。
4、走马灯(Carousel)
作为一组平级内容的并列展示模式,常用于图片或卡片轮播,可由用户主动触发或者系统自动轮播。适合用于官网首页、产品介绍页等展示型区块。
注: 1. 轮播的数量不宜过多以免造成用户厌烦,控制在 3~5 个之间为最佳 2. 建议在设计上提供暗示,让用户对轮播的数量和方向保持清晰的认知
5、树形控件(Tree)
『树形控件』通过逐级大纲的形式来展现信息的层级关系,高效且具有极佳的视觉可视性,使得整体信息框架一目了然。
6、时间轴(Timeline)
每一条信息以时间为主轴,内容可涵盖主题、类型、相关的附加内容等等。适用于包括事件、任务、日历标注以及其他相关的数据展示。

转载于:https://www.cnblogs.com/yiyi17/p/7798849.html

你可能感兴趣的文章
jQuery垂直滑动切换焦点图
查看>>
Python-S9-Day127-Scrapy爬虫框架2
查看>>
模运算
查看>>
python多线程的使用
查看>>
团队编程项目作业1-成员简介及分工
查看>>
使用Chrome(PC)调试移动设备上的网页
查看>>
UI基础--手写代码实现汤姆猫动画
查看>>
Python+pytesseract+Tesseract-OCR图片文字识别(只适合新手)
查看>>
使用gitbash来链接mysql
查看>>
docker镜像管理基础
查看>>
黑盒测试和百合测试的优缺点对比
查看>>
SecureCRT的使用方法和技巧(详细使用教程)
查看>>
装饰者模式
查看>>
右侧导航栏(动态添加数据到list)
查看>>
用Nginx+Lua(OpenResty)开发高性能Web应用
查看>>
81、iOS本地推送与远程推送详解
查看>>
Sharepoint online 如何使用asp.net开发项目!!!
查看>>
C#基础_注释和VS常用快捷键(一)
查看>>
http协议
查看>>
动态调用webservice
查看>>