zoukankan      html  css  js  c++  java
  • 前端的UI设计与交互之数据展示篇

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

  • 相关阅读:
    SVN服务器搭建(一)
    排序算法二:冒泡排序
    【LeetCode】136. Single Number
    【LeetCode】217. Contains Duplicate
    【LeetCode】189. Rotate Array
    【LeetCode】122. Best Time to Buy and Sell Stock II
    【LeetCode】26. Remove Duplicates from Sorted Array
    【LeetCode】20. Valid Parentheses
    【LeetCode】680. Valid Palindrome II
    【LeetCode】345. Reverse Vowels of a String
  • 原文地址:https://www.cnblogs.com/yiyi17/p/7798849.html
Copyright © 2011-2022 走看看