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

前端的UI设计与交互之数据展示篇的更多相关文章

  1. 前端的UI设计与交互之反馈示篇

    为了帮助用户了解应用当前要做什么,也给用户的下一步行为做参考,以及了解操作后所产生的结果 ,当用户和系统需要交互时,使用不同的模式来反馈信息或结果.当设计者使用反馈或者自定义一些反馈时,请注意:为用户 ...

  2. 前端的UI设计与交互之布局篇

    布局是页面构成的前提,是后续展开交互和视觉设计的基础.设计者在选择布局之前,需要注意以下几点原则:明确用户在此场景中完成的主要任务和需获取的决策信息.明确决策信息和操作的优先级及内容特点,选择合理布局 ...

  3. 前端的UI设计与交互之文案篇

    在界面中,我们需要通过对话的方式与用户产生共鸣.精准.清晰的语言会更容易让用户理解,合适的语气更容易让用户建立信任感.因此在界面设计时,文案也应当被重视. 在使用和书写文案时有以下几点需要注意:从用户 ...

  4. 前端的UI设计与交互之数据录入篇

    数据录入是获取对象信息的重要交互方式,用户会频繁的增加.修改或删除信息.多种多样的文本录入和选择录入方式帮助用户更加清晰和高效的完成这项体验.设计者应当注意这几点:为初级用户/偶尔访问的用户提供简单易 ...

  5. 前端的UI设计与交互之设计原则篇

    1.亲密性 a)纵向间距示例这三种规格分别为:8px(小号间距).16px(中号间距).24px(大号间距). b)在这三种规格不适用的情况下,可以通过加减『基础间距』的倍数,或者增加元素来拉开信息层 ...

  6. 前端的UI设计与交互之色彩篇

    一.颜色Red热情.警示 Green成功.通过.安全 Blue专业.科技 Pink典雅.明快.女性 Orange醒目.温暖 Purple高雅.浪漫 Yellow活力.提示 Cyan清新.冷静.结构化 ...

  7. 前端的UI设计与交互之字体篇

    跨平台的字体设定,力求在各个操作系统下都有最佳展示效果.字体是界面设计中最重要的基本构成之一,用户通过文本来消化内容和完成工作,优雅的字体将大大提升用户的阅读体验及工作效率.在满足不同终端始终保持良好 ...

  8. 前端的UI设计与交互之图标篇

    图标是具有指代意义的图形,也是一种标识.通过使用图标表达命令,强调状态,表示产品或类别.为了系统及跨平台之间图形认知保持一致, 图标在设计和使用时有以下两个原则点需要注意:简单的图形语言以及高辨识度. ...

  9. 前端的UI设计与交互之导航篇

    在广义上,任何告知用户他在哪里,他能去什么地方以及如何到达那里的方式,都可以称之为导航.当设计者使用导航或者自定义一些导航结构时,请注意:尽可能提供标识.上下文线索,避免用户迷路:保持导航样式和行为一 ...

随机推荐

  1. 【转】Newtonsoft.Json 的序列化与反序列化

    http://www.cnblogs.com/08shiyan/p/3464028.html 首先补充一点,Json.Net是支持序列化和反序列化DataTable,DataSet,Entity Fr ...

  2. 四句话总结JavaScript作用域

    上一篇文章中简单介绍了一下JS作用域,本篇将作进一步探究和总结. 前言:JavaScript的作用域一直以来都是前端开发中比较难以理解的知识点,JavaScript6中新引入了 let 关键字,用于指 ...

  3. Android公共库——图片缓存 网络缓存 下拉及底部更多ListView 公共类

    Android公共库——图片缓存 网络缓存 下拉及底部更多ListView 公共类 转载自http://www.trinea.cn/android/android-common-lib/ 介绍总结的一 ...

  4. 请求http服务

    ①服务方法 [HttpGet]//get服务 public JsonResult GetUserName(int id) { try { IXiao_UserBLL bll = new Xiao_Us ...

  5. js中如何获取时间

    var myDate = new Date();myDate.getYear();        //获取当前年份(2位)myDate.getFullYear();    //获取完整的年份(4位,1 ...

  6. uml系列(三)——用例图

    用例图是从用户的角度出发,描述系统功能的.在软件开发过程中,开发人员首先获知用户的需求,然后设计用例模型,在分析并设计系统来实现这些用例.在系统完成后,还要根据用例图来对系统进行验证. 用例图主要介绍 ...

  7. C#7.0之ref locals and returns (局部变量和引用返回,之前欠大家的,现在补上)

    废话不多说,直接进入正题. 首先我们知道 ref关键字是将值传递变为引用传递 那么我们先来看看ref locals(ref局部变量) 列子代码如下: static void Main(string[] ...

  8. Pre-shared key

    Pre-shared key https://en.wikipedia.org/wiki/Pre-shared_key In cryptography, a pre-shared key (PSK) ...

  9. SPOJ COT3.Combat on a tree(博弈论 Trie合并)

    题目链接 \(Description\) 给定一棵\(n\)个点的树,每个点是黑色或白色.两个人轮流操作,每次可以选一个白色的点,将它到根节点路径上的所有点染黑.不能操作的人输,求先手是否能赢.如果能 ...

  10. 《http权威指南》读书笔记2

    概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...