【交互设计】怎样设计软件系统树结构？

一、树结构的用例

这里所说的树结构（简称树），是指数据树，树由图标+文字构成。

有层级结构的数据会用到树。比如部门管理、行政区域，等等。

设计树时一般会配合列表、统计数据等使用。

 

 

二、树的展开和折叠方式

大多数情况下，树的默认状态都处于折叠状态，那么怎样展开树比较方便呢？

这个时候我们要考虑的是可点击的范围。

2.1点击某一条所在的整行，展开或折叠下级

使用这种方式时，有一个前提：树中有子级的数据不与右侧的列表数据（或者其他数据）产生直接的关联，只有树中的末级才与右侧的列表（或者其他数据）产生直接关联。

 满足前提条件时，使用这种点击方式效率是最高的，因为点击的区域足够大且对应于本条目。

 

2.2 点击图标时，展开或折叠下级

当树中的每一级都直接与右侧列表数据有关联的时候，采用点击图标区域时展开或折叠下级。

 

三、树的搜索方式

搜索树中的内容时，有“即时搜索”和“点击按钮后搜索”两种方式；搜索后显示的内容也有两种方式，一种是“显示树形结构数据”、一种是“只显示搜出的内容”。

设计树的搜索方式时，可用以下四种方式：

①即时搜索+显示树形结构数据；

②即时搜索+只显示搜出的内容；

③点击按钮后搜索+显示树形结构数据；
④点击按钮后搜索+只显示搜出的内容

 

“即时搜索”不设计“搜索”按钮，而是当在搜索框中输入内容时，及时将符合要求的内容匹配出来。而“点击按钮后搜索”则是当在搜索框中输入内容后，要点击“搜索”按钮才将符合要求的内容匹配出来。

“显示树形结构数据”是指搜索后，将匹配出来的内容的上级也显示出来。而“只显示搜出的内容”则指搜索后，只显示本级的内容，不显示上下级内容。