“多级目录结构”在移动端的交互设计

　　来自小密圈朋友提问：如何在移动端界面，表现出树形结构？

　　需求内容：为油品销售员提供一个知识库，行业/工艺/设备/用油部件/品牌产品/，一个树形结构，共有5个层级！每个层级都对应的知识点。如果是web界面，左边展示树形导航，右边展示内容；但是在移动端怎么展示5级树形呢？同时每一级又要包含知识点，求解答。

　　Hozin认为：此乃典型的『多级目录结构』设计问题。

　　一、为什么Web设计中会流行树形导航？

　　如图，在大屏幕设备的界面中，使用树形导航的优势显而易见：

　　A.直观查看各级目录之间的从属关系，长幼有序

　　B.为不同级别设置外观差异，容易辨识，轻松聚焦【当前选中项目】

　　C.统揽全局，较快速的找到目标分类，绝对不会迷路

　　D.增加【展开某节点，其他自动折叠】，可大幅节约屏幕空间

　　E.增加滚动条（横纵均可），实现无限扩展

　　F.配合frameset及iframe等流氓代码，可以快速实现效果（牺牲SEO）

　　G.配合checkbox快速实现多选、全选、选中某节点及其子孙节点

　　树形导航如此犀利，不来一发等什么……且慢，你以为这就算完事儿了？No！No！No！以上只是它优势的60%而已，真正的“大杀器”是下面这条：

　　用户可以完全扔掉鼠标，用键盘操作树形导航！

　　[↑]键：向上切换同级节点；从第一子节点，顺序返回父节点；

　　[↓]键：向下切换同级节点；顺序进入已展开的第一子节点；

　　[←]键：关闭当前级别节点；返回父节点；

　　[→]键：展开子节点列表；顺序进入已经展开的第一子节点；

　　以上方向键，若配合[Tab]键和[Enter]键，简直比玩超级马里奥还爽！

　　Hozin说过：不会走，别想飞！没玩过web端的交互设计师根本就会“自动忽略”表单中的【Tab顺序】和各种【热键操作】。洒家亲眼见过50+岁的文案前辈全程热键玩Word，几千字文章排版，鼠标根本不碰。

　　追根溯源：可展开的树形结构，几乎与【图形化用户界面】同时诞生，所有目录系统都有它的参与（参考Windows资源管理器），甚至DOS时代的各种Telnet-BBS都有它的影子。

　　然并个卵……这么成熟、强大、犀利的交互组件，如果用在移动端，那可就……

　　二、树形导航移植到小屏幕，可能是场灾难！

　　如图，在小屏幕的移动设备界面中，滥用树形导航，悲剧就发生了：

　　A.假如层级太深，节点标题太长，宽度不够用，难道左右移动界面？

　　B.的确可以Spread手势放大，但是热区太密集，拖放位移时，误操作可能性很大！

　　C.的确可以用Pinch手势缩小，但是热区太小，需要多应灵活的手指才能操作啊？

　　D.为了导航就要缩放界面，大动干戈，这违背了移动端交互的基本原则

　　E.如果没有【物理方向键】，“超级马里奥式的酸爽”，荡然无存

　　此刻，，大家已经领悟：为什么各大主流“移动UI”设计指南/规范/规格中，都不会出现【树形导航】。（有经验的交互设计人员绝对不会干这种傻事！）

　　三、彩蛋：移动端，请勿滥用『面包屑导航』！

　　Web时代，面包屑导航是万金油，人人都要来一发；但是，Hozin劝告诸位：它绝对不适合移动端界面。

　　即便PC浏览器端的Web交互界面，如果是非目录结构，使用『面包屑导航』也可能会引发各种设计问题。早在2008年，前辈Angela（翻译《用户体验要素》的那位美女姐姐）就已经写过《论“面包屑”的倒掉 》。

　　滥用“设计Web的方法”搞APP；滥用“设计APP的方法”搞Web；滥用“大屏幕的交互组件”搞移动小屏幕界面；滥用“移动小屏幕的交互原则”设计大屏幕界面……这些现象普遍存在，并且心安理得、理直气壮；由此可见，在中国“交互设计师”真是个【低门槛职业】呀！

　　四、区分『分类』与『多级目录』

　　哎呦喂，难道“多级目录”不是一种“分类”？呃……这俩还真有区别。

版权申明：本站部分文章来自互联网，如有侵权，请联系我们客服，我们收到后立即删除 谢谢                

• 上一篇：实战案例！互金平台交易流程的设计改版经验总结
• 下一篇：接下来炎热的8月，这3个设计趋势会更加流行