|
|
蓝蓝设计()是一家专注而深入的界面设计，为期望卓越的国内外企业提供有效的UI界面设计、BS界面设计、界面设计、界面设计、包装设计、图标定制、用户体验 、交互设计、建设、平面设计服务
来源：:155461108136
如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里
表格信息通常是很乏味的 从某种意义上来说，的确如此。一个好的表格应该以易于理解，简单明了的方式传递大量的信息。真正的重点应该 放在信息上， 对表格的过度设计会抵消这种作用。从另一方面来说，巧妙的设计不仅
表格信息通常是很乏味的
从某种意义上来说，的确如此。一个好的表格应该以易于理解，简单明了的方式传递大量的信息。真正的重点应该 放在信息上， 对表格的过度设计会抵消这种作用。从另一方面来说，巧妙的设计不仅可以使一个表格更具吸引力， 而且可以增加可读性。
今天我们来看看提升表格功能和美观的几种方式。我们经常会在上的价格页上看到表格的应用，因此主要以该种表 单为例。请记住这些原则可以应用到任意类型的信息列表上（不仅限于)
垂直，水平或矩阵？V, H M?
一如以往，我们从最明显的地方开始。第一步是决定表格的整体结构。结构取决于呈现数据的类型和复杂性。选择 垂直的列还是水平行，通常取决于个人偏好。大致规划下表单的内容，然后决定采取哪种方法能更好地传递信息。很显然，如果信息包含多变量，那么选择矩阵来表示。下面分别以几个简单案例来开始。
垂直
水平
矩阵
从E中开始S E
希望这是我第一次也是最后一次建议用M O来进行相关设计。事实上，表格确实很容易用E来完成，这正是E的强项。用HTML来组织结构需要写复杂代码，通常会比E耗时。
我偶然发现了一个小的应用程序：T，它可以把E里的表格粘贴进来转换成HTML。利用这种方式你仍然需要自己写一些样式，但是会节省前期的表格构建时间。
T
使用表格生成器U T G
痛恨E吗？别急，我也是。如果你想节省自己生成简单结构的HTML表格时间，上有成千上万的表格生成器可以选用。请注意我说的是“简单结构”。不要以为用了这些生成器你就什么都不需要做了。
这里有几款简单的免费表格生成器：
QI
T G
K
S R
一个小样式走了好长一段路A L S G L W
现在你已经有了一个简单的表格，下面需要加一些CSS当然你可以花大量时间选用各种样式。只需要记住，即使一 点点的颜色和字体样式都可以大幅度提高表格的可读性和吸引力。
这里有一些如何正确给表格添加样式的指南。
CSS的技巧：利用基本的CSS样式表格
V: 一个CSS样式表格
增加特征组A F S
这种做法在价格列表里很常见，也适用于其他的表格。看看表格的信息是否有必要让浏览者的注意力集中到某个特 定区域。用于显示属性的最佳值或者某个常用要素，用不同的颜色和或不同的大小来区分。
有多种方法可以实现这种方式。下面举例说明几则：
不同颜色
不同大小
不同颜色和大小
对信息进行排序M I S
如果表格信息很多，分成几列，可以对列进行排序，用户可以选择按他们希望的方式浏览。M对交易列表进行了排序，用户可以很容易地从按日期浏览切换到按种类浏览，从而能比较出哪一块你愿意花很多钱。如上截图所示，显然我更喜欢吃油腻的快餐。
下面是两种对表格排序的不同方法:
用A (WU)对表格行排序
表格排序 JS (Y)
使用图标U I
我在上面提到，表格的信息设计要点是让用户第一眼就能看明白。通过减少必要的阅读，精心设计的图标能够提高浏览速度，增加用户对表格信息的理解。
小心这也是个双刃剑。复杂的图标也会让用户迷惑，不知道你究竟要表达什么。
增加斑马条纹A Z S
这是一个非常基本的概念，可以追溯到信息表格的存在。加入交替行颜色可以帮助用户集中视线，把在边上或者底 部设定好的分类信息和表格中心的浮动信息关联在一起。这个简单的技术可以增加大小表格的可读性。这确实是一个好的经验法则，如果你的表格需要用户关联分开的信息，那么始终包含斑马线（或其他视觉辅助）。
下面是一些给表格增加斑马线的免费资源：
S Z S T W CSS (CSS N)
MT Z T P (D W)
PHP Z S T (CSS-T)
Q Z S T (CSS-T)
为W 20做好准备
闪亮的 20 样式设计可能有点过度使用。但是这确实可以很快抓住眼球。我绝对不建议对已经很复杂的表格增加太多冗余的花哨耀眼的元素，在这种情况下，需要选择简单的方式。然而，如果你需要设计一个只有几项的小表格，那么也不妨让它看起来神奇一点。
极简主义
不喜欢上面的耀眼 20样式？没关系，还有一种很强的观点认为应该减少表格的图形。这种做法可以让用户没有任何干扰的只关注内容。使用干净细微的格线（或没有线条），简单的字体和颜色，可以很好的和背景形成对比。
增加搜索功能A S F
有时候仅仅增加排序功能是不够的。当你有成页的内容要排序的时候，最好的方法是使用搜索。
我找到的下面这两种表格过滤方法都采用了JS。你还有其他的方式吗？
Q C F
C P HTML T
去除冗余D’ O T R
应用开发者喜欢通过表格显示其有多种强大的功能。然而，有时候设计者会给表格增加许多没用的多余的信息，而 他们本可以以更好的方式来显示。
看一下I M的例子，表格里除了最上面的三种功能，其他功能的四个条目项都一样。该表格因此增加了没有必要的15行。解决方法可以通过一个简单的公告列表说明“我们的计划都包括以下功能”，用户能够快速看到，他们无论选择哪个计划，都会具备这些功能。表格只需要缩短成3-4行，用来显示不同的部分。我再次重申，表格应该让信息更易读。如果您的表格不符合这一目标则会适得其反。
创建可扩展区域C E A
另外一个功能是给表格的特定行增加展开功能。可以把大量内容放置到一个相对整齐的空间。一个简单的Q小 插件E可以实现这个功能。具体实现可以查看
如果你的表格使用了展开功能，那么表头一定要设计得能让用户清晰地找到这个功能。不要让用户重重筛选才能找到他们所需要的信息。
高亮突出关联性H R
这种技术增加了复杂表格或矩阵的可读性。无论用户鼠标悬停到单元的列还是行，都会高亮突出整个单元。请见详例
点击如下“A T CSS G”里的例子可以看到如何实现这种效果。
如何创建类似O’ 的航空时刻和价格矩阵表格
增加动态选择效果A D S E
这里是“A T CSS G”里的另一个例子，允许用户选择表格的给定列（价格表），当前选择会高亮突出显示，并且能展开显示更多信息。这种方式和上一个例子是一致的，但是有不同的效果。查看具体实现请点击：
创建类似C E’价格列表动态高亮列效果的表格
在同行眼中，UI设计服务有着让人觊觎的好品质，也有着很多让人嫉妒的忠实粉丝。北京兰亭妙微（蓝蓝设计）是一家专注而卓越的UI界面设计公司,以良好的服务为众多优秀企业提供卓越的UI咨询、竞品分析、交互设计、UI界面设计、大数据可视化设计、嵌入式软件界面设计开发、图标icon设计、大型网站设计、用户体验设计、软件开发....是一家从用户研究、交互设计及优化咨询、软件和网站设计、界面开发实施全方位提供解决方案的创新型设计公司。http://www.lanlanwork.com
|
|
发表于 2024-12-14 13:02:35
