查看文章 |
最近因为项目的原因，频繁接触到树型视图结构(Tree-view model)。 我比较奇怪的是往往一涉及到Web端的层级文档管理时，很多人(比如PM和开发工程师)头脑中的第一反应就是采用树型视图。哪里最先使用到树型视图我无从考证，不过猜想人们大概都是从微软OS的资源管理器设计中获得的启发。 本文要表达的观点是：树型视图是一种很好的呈现层级关系的方式，但现有的树型视图模式是可以优化的。 首先让我们来回顾一下经典的树型视图吧：一个小小的图标(可能是加减号或箭头)，紧跟着一个文件夹。单击图标或双击文件夹，则展开或收缩子文件夹；单击文件夹，则会在右侧出现该文件夹所包含的子文件。 请注意上述描述，界面设计中有两个重要的易用性原则：关联性和一致性。对比看一下，图标和文件夹是两个关联的界面要素，因此无论视觉、行为还是界面反馈，两者都理应保持一致。但现实情况则是：单击图标和双击文件夹所获得的反馈是一致的，而更诡异的是单击文件夹居然得到另一种反馈——这里我们还不计较那么小的图标有多少眼神好的用户能分辨的清。 现在你应该就能明白我所说的可改进的地方在哪里了吧? 也知道该怎么优化了对吧? 不过别急，让我们回到最开始，为什么要用树型结构? 前面已经说了树型结构的优势就是呈现信息的层级关系，那紧接着，为什么一定要使垂直结构呢? 仅仅就因为空间有限吗? 揭开一个谜底吧，大家可以留意一下苹果的“树型”视图(其实并没有“树”，严格说应该叫层叠列表，Cascade-style list)，看看苹果是如何处理这个问题的。
细心的你可以发现，在苹果的设计里，关联性和一致性都处理得非常好! PS两条： |
