作者：蓝蓝

表格，是一种最常见的信息组织整理手段，常用于信息收集、展示、数据分析、归纳整理。

      UI软件设计中最常用、最基本的是表格的设计，有些软件中80%都是表格类页面，可以说，设计开发的是否易用，很影响口碑和用户的使用感受。基础的东西一定要做好，就像我们吃的主食一样，虽然都是米和面，但是各地出产各种品种口味都不相同，要根据食客的喜好选择、烹饪。今天就聊一聊最基础的表格设计、变化和常见问题。

一、基础的表格设计美化

      基础的表格可变化的地方很少，可以根据当前软件开发选择的框架控件（ext/vue/jequery不同框架会有一些不一样）做色彩和风格的变化，如：加表格不同粗细的线、斑马格，中间无竖线种种的设计，有的表格需要标题很突出，有的内文突出，这就和内容焦点相关了。

为了操作直观便捷，在操作区放一些图标“删除、编辑、审核”，配合文字来使用，有的把操作类的图标放在最左边，有的放在最右侧，按行业用户习惯而定。

可以用固定表头（标题位置不变），允许用户排序，单元格内有很长的文字，设定最大字节，多内容用……替代避免转行，有小数点的数字右对齐，每列的大小可调整，这些也是设计开发中可以做好的细节部分。

二、特别宽的表格怎么设计？

有的表格的宽度，达到了屏幕的两屏和三屏，出现宽宽的横向滚动条，又有长长的竖向滚动条，但工作的人又必须看，可烦人了！很多软件都因为这个原因被吐槽。下面就介绍三种方法解决这个问题：

方法一

如果表格的标题是可以定制的，允许省略的，可以从业务角度取舍去掉无关紧要的，不常用的内容，把这部分放在点开的详细页内容中即可。这就像一个房间的断舍离：挑选、丢弃、分类、收纳，思考哪些物品是不要的，哪些是必不可少的？哪些是可有可无的？依次排序放在顺手的位置，ui设计的道理也是相通的。

方法二

如果表格里面的内容是确定的，不可省略的，比如银行的报表就是这么长，这么多，那我们就可以从设计的角度来优化，做一个加高版的表格。

表格为什么一组信息只能一行呢？完全可以一组三行四行，在组中进行重点信息，非重点信息以及符号化的直观转变。用大小、对比、浓淡、色彩、间隔这些平面设计的基本原则，让一个普通的“山里娃”土土的表格变成一个“青春靓丽、人见人爱”自带明星气质的表格。

方法三

大表格里面嵌套小表格，利用交互设计，巧安排空间。当用户光标移至感兴趣的那行的时候，关于它更多的内容，在下方滑动撑开出现或者右边浮动出现。这个方式虽然比较土，但也确实管用。早年在看某一招聘网站的时候，每一个人的简历只要点名字就可以看到一组关键信息，便于迅速筛选，而另外一个招聘网站，就没有这个功能，每个人都要打开之后才能看见整体信息，我后来就不怎么看那个网站了。多一步操作，对典型用户就多了许多的工作量，网站和软件的使用口碑，用户粘度就是这样在为用户考虑中一点一点积累起来的。

 上图：大表格里面嵌套小表格

     方法不会只有这三种，其他的方法要根据当时的业务，用户使用的习惯、重点，因地制宜的去设计了。软件中的表格节省了许多程序工程师的工作量，如果做大的改动或许是巨大的工作量，如果要做变动，一定要在开始的时候就要让ui设计纳入开发体系，一生二，二生三，在前期第一批实施时越注重细节，后期就会越轻松，甚至省去几倍甚至几十倍的时间挨个页面的去纠偏、修改。

      一个系统总是需要业务担当，颜值担当的核心部分，重要的页面要额外的对待、花更多的精力和时间。如果千篇一律，也就不能显示出软件产品的独到之处了。

第三 与表格配合的部分设计

第一种  “搜索查询”和“过滤”部分的设计

     大多数表格的前面都有搜索过滤功能，如果搜索条件相当多，可以精选一部分主要的排成一行，其他的隐藏，点箭头再出现。整个搜索区域也可以有隐藏／显示的按钮，来给下面的表格更多的空间。

     过滤条件区域可以定义好“条件名称”一致宽度，一般在八个字左右，避免有的字节多，有的字节少，行数多了，参差不齐，区块和区块之间也要定义好统一的间距，这样整体页面就显得整齐划一、条理清晰。

上图：搜索和卡片式信息的组合

第二种  表格操作部分的设计

       对表格的操作“导入，导出、批量导出”有的时候这类操作有10—20个，有的时候才几个，多的时候很占地方，可以用隐藏的方法，over到表格上再出现，以节省空间。

       也可以分组把同类的操作聚合在一起，把常用的放在目之所及，不常用的点后下浮出现，以节省空间，

还可以光标跟随表格的某一行，点选自动浮出一群小跟班，各种操作按钮。即节省空间，操作移动路径又很短。只是不支持批量操作。

第三种  表格和卡片式设计、统计图的整合切换

       表格是可以转换成卡片式设计的，用一个卡片代替一行的展现信息，改变一种阅读的方式。

有的也可以转换图统计图表：曲线图，柱状图让用户直观的去解读，而不必一直看枯燥的数字。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

 蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

据悉，Magic Leap近日将公布关于Magic Leap One的2D和3D用户界面，有关媒体还在该公司的开发人员文件中发现了包括Landscape和Immersive在内的应用程序。

编者按：从「我的电脑」-「电脑」到现在的「这台电脑」，人称视角的转换会带来什么体验差异呢？这篇文章从3个角度讨论了这个有趣的话题。

如今我们每个人手机里都下载了各式各样的App，每天花费大量的时间去使用和维护，你不仅享受App带来的各种服务和乐趣，还通过它们创建和管理自己的文件内容。

你在互联网上留下大量的记录或内容，是否有想过这些内容是否是“属于”你的？

而越来越多的App开始提供定制化的、拟人化的服务，你和App之间的互动关系有没有变得更像真人之间的交流？

这篇文章讨论了一些有趣的问题：

1）一个产品在其用户界面上应该提供什么样的人称视角？

2）其功能服务和用户之间，是一种怎样的关联？

3）我的收藏 | 你的收藏 | 收藏 | 这三个不同的词组，真的会带来什么体验差异吗？

这篇文章也许并没有给出明确的答案或实践指南，但这个问题却是我们在设计产品及界面时值得一想的。

“设计绝不是简单的拼合，排列甚至编辑；设计是通过阐明，简化、明确、修饰，使之庄严，有说服性，甚至带一点趣味性，来赋予其价值及意义。”——保罗·兰德（Paul Rand）

1.“明确”应该放在设计的首要位置

 对任何界面而言，“明确”是首要的也是最重要的一点。人们必须能够辨别出它是什么，才能有效地使用你设计出来的界面。设计师们在设计的时候，要去关心人们为何会使用这个应用，去了解什么样的界面是能帮助他们与之互动的，去预测人们在使用时的行为并能够成功地反馈给他们。这样做了之后，界面中再出现的需要推理的地方以及延时反应都是可以被容忍的，但是绝对不能出现让用户困惑的地方。明确的界面能够给使用者进一步操作的信心。一个应用就算它有一百张页面，但是每一页都是清晰明确的，它也远胜于只有一页却不知所云的应用。

本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日)，由腾讯ISUX设计师翻译整理，非发文者一人之作。译文首发于ISUX博客，如在阅读过程中发现错误与疏漏之处，欢迎不吝指出。后续章节会陆续更新，敬请期待。

清晰度是用户界面设计最重要的元素。事实上，用户界面设计的所有目的是为了使人们能够与您的系统通过沟通和功能来进行交互。 如果人们不知道你的应用程序怎样工作或在你的网站上应该去哪里，他们会困惑和沮丧。

UI 的中文名是用户界面（User interface），而我们现在使用的大多数设备界面都是图形用户界面，即 GUI（Graphical user interface）。我们通过这些可视化的图形界面来理解计算机，进行工作。

但是最初的界面可不这么友好，那时的界面还是命令行界面，CLI（Command line interface）。计算机只是被政府或大型机构使用，在普通人眼中是完全不能理解的存在。

2014年网页前端设计已经有了很多的趋势预测，今天不在为大家预测任何的东西，只和大家讨论一些前端界面设计的技巧，总结并利用这些技巧，让我们设计为优秀的交互界面。

1 尽量使用单列而不是多列布局

单列布局能够让对全局有更好的掌控。同时用户也可以一目了然内容。而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达。最好的做法是用一个有逻辑的叙述来引导用户并且在文末给出你的操作按钮。