需求内容：为油品销售员提供一个知识库，行业/工艺/设备/用油部件/品牌产品/，一个树形结构，共有5个层级！每个层级都对应的知识点。如果是web界面，左边展示树形导航，右边展示内容；但是在移动端怎么展示5级树形呢？同时每一级又要包含知识点，求解答。
树形导航如此犀利，不来一发等什么……且慢，你以为这就算完事儿了？No！No！No！以上只是它优势的60%而已，真正的“大杀器”是下面这条：
Hozin说过：不会走，别想飞！没玩过web端的交互设计师根本就会“自动忽略”表单中的【Tab顺序】和各种【热键操作】。洒家亲眼见过50+岁的文案前辈全程热键玩Word，几千字文章排版，鼠标根本不碰。
追根溯源：可展开的树形结构，几乎与【图形化用户界面】同时诞生，所有目录系统都有它的参与（参考Windows资源管理器），甚至DOS时代的各种Telnet-BBS都有它的影子。
此刻，大家已经领悟：为什么各大主流“移动UI”设计指南/规范/规格中，都不会出现【树形导航】。（有经验的交互设计人员绝对不会干这种傻事！）
Web时代，面包屑导航是万金油，人人都要来一发；但是，Hozin劝告诸位：它绝对不适合移动端界面。
即便PC浏览器端的Web交互界面，如果是非目录结构，使用『面包屑导航』也可能会引发各种设计问题。早在2008年，前辈Angela（翻译《用户体验要素》的那位美女姐姐）就已经写过《论“面包屑”的倒掉 》。
滥用“设计Web的方法”搞APP；滥用“设计APP的方法”搞Web；滥用“大屏幕的交互组件”搞移动小屏幕界面；滥用“移动小屏幕的交互原则”设计大屏幕界面……这些现象普遍存在，并且心安理得、理直气壮；由此可见，在中国“交互设计师”真是个【低门槛职业】呀！
哎呦喂，难道“多级目录”不是一种“分类”？呃……这俩还真有区别。
首先，聊聊“分类”。分类，人类最早的一种抽象思维。区分果实和花朵，区分小草和树木，区分兔子和山猫……科学就是从对“生物的分类”开始！发展至今，演化出【界】、【门】、【纲】、【目】、【科】、【属】、【种】共7个层级，如下图所示：
比如本文作者Hozin就属于动物界、脊索动物门、脊椎动物亚门、哺乳纲、灵长目、真猴亚目（区别于原猴亚目）、窄鼻猴次目（区别于宽鼻猴次目）、类人猿超科、人科、人属、蒙古人种。
然后，聊聊“多级目录”。目录，是对客观存在的描述。作者写了一本书，为了方便读者，提供一个目录进行内容定位；你的PC当中，某个文件就保存在某个位置， 于是windows提供了资源管理器；此时此刻，你正位于地球的某个国家、地区、街道、楼宇、楼层、房间中查阅本文，地图上会标注的非常清楚……没错，【书籍目录】、【Windows资源管理器】、【行政区划地图】，统统都是“多级目录”！假如某书籍的章节有5个层级，如下图所示：
诚然，从外观上『分类』与『多级目录』几乎没区别，但如果读过《交互设计中的「同形异构」与「同构异形」》，那么便会理解这二者截然不同。生物界种类纷繁，某本书也不可能只有一个章节，假如把真实的情况展现出来，『分类』与『多级目录』的区别便可一目了然。
C.“分类”可以自由压缩层级之间的关系；“多级目录”层级之间是刚性存在，如果压缩，就会伤筋动骨。
综上所述，『分类』虽然是一种初级抽象思维，没有像『标签』那样贴近人脑神经系统的作用原理，但也远比『多级目录』更灵活和富于变化。
Hozin相信：这个需求一定不是来自交互设计师本人！因为，哪怕有一点点抽象思维，或者一点点数学知识，都会明白5级目录意味着什么……
维基百科显示已知的生物有700多万种，未被发现的更多，几千年的人类文明，也只敢把生物分类规划为7层“分类”；中国拥有近960万平方公里的土地，近300万平方公里的领海，也只敢把行政区划分为6层“目录”；一个给油品销售员用的知识库，需要5级目录？
5级目录真的是5级么？按照【Root+层级】计算一共有6级结构，用户操作6次也只能看到最末级的列表，如果要到达某个详尽内容，可能最多需要操作7次！
呃，链式裂变，让Hozin缓口气……真的有必要这样做么？这需求难道不二逼么？真的呈现出来，扔给用户，难道不是【反人道】么？
每个树形节点，包含两个操作【展开子节点】和【查看本节点叶子】两种操作；简单的树形在移动端很难满足几点包含两个操作，因此这个属性无法折叠，只能完全展开；如果树形结构很复杂，那么用户操作就非常麻烦。
B.优化树形可折叠，进化出两种操作，点击箭头折叠/展开子节点，点击标题进入对应节点界面。同时在节点界面也设置了【子节点的可展开】结构。
在该步骤优化过程中，曾经尝试把某个节点附属的【叶子数量】也加进去，但是感觉用户一定会混乱，请看下图：
C.独立一级入口，树形归入汉堡包菜单，让“树形结构”成为附属，同时去掉节点界面的折叠/展开功能，简化界面。
D.去掉树形，加搜索，彻底抛弃树形结构，每个节点只考虑三个问题：如何返回上级？直属子节点有谁？直属叶子有谁？
由于时间有限，以上不一定是最佳方案，但至少给大家提供了一些思路，解决『多级目录结构』在移动端的交互问题。Yes！各种云盘（多级目录结构），也是这么设计的，比如那什么云、那什么云、和那什么云……
搜索、标签是破解『多级目录结构』设计的好方法！搜索，完全打破层级关系！标签，本质就是一种搜索。智能排序就更厉害了！设想一下，假如没有推荐算法，【今日头条】和【知乎】完全按照层级编排内容，谁愿意用呢？
网站在前期的时候都是很难上排名的吗，那么是因为你的网站基础优化都没做好，怎么可能会有排名呢，首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...
随着情人节的结束，2月份的设计圈干货大合集悄然更新。新的工具新的资源，依然是以往的分量，依然是相同的味道。和过去的合集相似，免费的素材、工具、服务占据了列表中9成的...
每个网站都是由不同功能不同类型的页面构成的，当用户打开错误链接的时候，网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时，还应当引导用户继续浏...
今天来给大家讲讲如何用Axure实现上下滚动效果。 如何实现上下滚动效果： 让内容在显示区域滚动; 内容面板没有接触到顶部时，让内容面板移动至顶部; 内容面板接触到顶部，没有接...
你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你，快来看看我最新发现的工具包吧!有了他们，这些功能你只需要直接用，或者用一点时间把他们优化的比作者创造时更...
许多人可能认为搜索框不需要设计; 毕竟这只是两个简单的元素。然而，在内容繁杂的网站中，搜索框通常是最常用的设计元素。当用户遇到相对复杂的网站时，他们会立即寻找搜索框...
互联网产品应该做到让用户在短时间内就可以获取到他们期望的信息，找到他们想要使用的功能。 UI设计的最终目的就是为了更好的展示产品的内容，让用户可以更好的接受。与传统媒...
QQ空间在去年推出了全新萌宠玩法，上线以来，获得了不少用户的喜爱，同时也收到了大量忠实用户们对想要养小鸡小猪等的心声。为了给用户带来更好的体验，项目设计组决定新推出...
文章导读： 不得不说，在很多类目的页面里，不管是日常页面还是促销页面，都频频使用过各色各异的花儿元素，用得好，可以让页面扑面迎来生机感，也可以因花儿的风格，营造可复...
想必，各位都曾有过以下经历，本想打开网页浏览资讯，怎料出现的却是个404?不用怀疑，你的页免丢失了。那么，404除了代表你所要浏览的页面丢失外，你可知它的产生原理?不仅如此...