『多级目录结构』在移动端的交互设计

如何在移动端界面,表现出树形结构?

Hozin认为:这是一个典型的『多级目录结构』设计问题。

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

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

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

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

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

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

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

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

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

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

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

首先,聊聊“分类”。分类,人类最早的一种抽象思维。区分果实和花朵,区分小草和树木,区分兔子和山猫……科学就是从对“生物的分类”开始!发展至今,演化出【界】、【门】、【纲】、【目】、【科】、【属】、【种】共7个层级,如下图所示:

比如本文作者Hozin就属于动物界、脊索动物门、脊椎动物亚门、哺乳纲、灵长目、真猴亚目(区别于原猴亚目)、窄鼻猴次目(区别于宽鼻猴次目)、类人猿超科、人科、人属、蒙古人种。

然后,聊聊“多级目录”。目录,是对客观存在的描述。作者写了一本书,为了方便读者,提供一个目录进行内容定位;你的PC当中,某个文件就保存在某个位置,于是windows提供了资源管理器;此时此刻,你正位于地球的某个国家、地区、街道、楼宇、楼层、房间中查阅本文,地图上会标注的非常清楚……没错,【书籍目录】、【Windows资源管理器】、【行政区划地图】,统统都是“多级目录”!假如某书籍的章节有5个层级,如下图所示:

综上所述,『分类』虽然是一种初级抽象思维,没有像『标签』那样贴近人脑神经系统的作用原理,但也远比『多级目录』更灵活和富于变化。

Hozin相信:这个需求一定不是来自交互设计师本人!因为,哪怕有一点点抽象思维,或者一点点数学知识,都会明白5级目录意味着什么……

维基百科显示已知的生物有700多万种,未被发现的更多,几千年的人类文明,也只敢把生物分类规划为7层“分类”;中国拥有近960万平方公里的土地,近300万平方公里的领海,也只敢把行政区划分为6层“目录”;一个给油品销售员用的知识库,需要5级目录?

5级目录真的是5级么?按照【Root+层级】计算一共有6级结构,用户操作6次也只能看到最末级的列表,如果要到达某个详尽内容,可能最多需要操作7次!

如果每一级最多只有2个子级,可以生成一个有63个节点的满二叉树,如下图:

呃,链式裂变,让Hozin缓口气……真的有必要这样做么?这需求难道不二逼么?真的呈现出来,扔给用户,难道不是【反人道】么?

复习一下Reading#07《匠心体验》中法国大姐姐提供的移动端导航设计贴士:

A.简单粗暴,反人道,也是一种解决方案。直接把树形结构扔上去,也未尝不可。

每个树形节点,包含两个操作【展开子节点】和【查看本节点叶子】两种操作;简单的树形在移动端很难满足几点包含两个操作,因此这个属性无法折叠,只能完全展开;如果树形结构很复杂,那么用户操作就非常麻烦。

B.优化树形可折叠,进化出两种操作,点击箭头折叠/展开子节点,点击标题进入对应节点界面。同时在节点界面也设置了【子节点的可展开】结构。

在该步骤优化过程中,曾经尝试把某个节点附属的【叶子数量】也加进去,但是感觉用户一定会混乱,请看下图:

C.独立一级入口,树形归入汉堡包菜单,让“树形结构”成为附属,同时去掉节点界面的折叠/展开功能,简化界面。

D.去掉树形,加搜索,彻底抛弃树形结构,每个节点只考虑三个问题:如何返回上级?直属子节点有谁?直属叶子有谁?

小结【界面进化】,如图:

真正可怕的是:非常固执,且坚持使用『树形导航』进行设计『多级目录结构』!

“那样做并没有错,但我们不会那样做!”《托马斯和他的朋友们》。

搜索、标签是破解『多级目录结构』设计的好方法!搜索,完全打破层级关系!标签,本质就是一种搜索。智能排序就更厉害了!设想一下,假如没有推荐算法,【今日头条】和【知乎】完全按照层级编排内容,谁愿意用呢?

------------------------------------------------------------

THE END
1.交互设计做什么?作者:Heidi格物志 ,分类:信息和交互 24.交互设计那些事儿(二)2011-10-31 23:36 《交互设计那些事儿》之一完工后,承蒙各位抬爱,在微博时代被大量转发和分享,也让我收到一些邮件,询问我下篇为何还不出来?请原谅我的惰性,每个周末都给自己找了不少借口一拖再拖,上个周末又在家里养了两天的病——在此提醒朋友们https://ucdchina.com/topic/15
2.交互设计师工作二三事(三)——导航分类与应用导航栏的类别有几种,在许多设计或者交互的专业网站上都会有所总结,以下是我一名同事总结的文章,供大家参考http://www.woshipm.com/pd/186928.html 这里我也再复述一遍,只是为了按照自己的思维帮助自己整理脑海中的信息,内容更多的来自于同事的文章。 导航的类型 https://www.jianshu.com/p/556d104c6019
3.产品设计的分类有哪几种?产品设计的分类有哪几种?主要是这 4 类:用户界面设计、用户体验设计、平面设计、交互设计产品设计一直以来都是涵盖内容非常广泛的一项工作。如果大家对其进行拆分的话,其实可以得出很多不同类型的产品设计方向。对于新人来说,精准了解这方面的知识非常有利于后期的就业选择。接下来,本文就来为大家具体介绍一下产品设计一https://js.design/special/article/product-design-categories.html
4.常见功能设计之“分类”和“TAG”(二)交互设计常见功能设计之 “分类”和“TAG” (二)交互设计 。 接下来具体说明一下我的观点: 1、如果不管具体怎么去运用,那么”分类”和”TAG”在存在的价值上没有本质的区别,他们都是用来归类和总结事物的。 所以如果你们的产品只有其中的一种,你也无须太在意什么”分类”"标签”字面上的区别… https://www.unjs.com/ziliaoku/dn/222016.html
5.交互设计方法的分类研究及其可视化摘要:目的 从交互设计方法的分类及可视化视角出发,探索交互设计方法在设计流程、研究范式与概念关注点上的态势,探讨未来交互设计方法可能的发展趋势.方法 通过梳理交互设计的发展脉络与技术、行为、社会三种定义视角,以交互设计经典定义的概念关注点比较分析作为研究基点,选取九十三种交互设计常用方法作为研究样本,利用分类可视https://d.wanfangdata.com.cn/periodical/bzgc202004006
6.什么是ui界面设计ui设计工作职能分类 1.图形设计 也就是传统意义上的美工,当然实际工作内容不单纯是意义上的美工,而是软件产品的外形设计,国内目前大部分的ui工作者都是从事这一方向。 2.交互设计 主要就是设计软件的操作流程、树状结构、操作规范等。交互设计就是做整个项目的交互流程,使操作更加简单、直接、突出主题。 https://www.hxsd.com/content/30876/
7.产品读书《设计心理学14》设计51CTO博客利用声音作意符:真实的、自然的声音同可见信息同等重要。声音的设计应满足如下标准:报警功能,定位功能,减小骚扰,标准化与个性化。 5 人非圣贤,孰能无过 何以出错:不能因为发现了人为因素就停止调查。 差错的两种类型 1. 失误的分类2类:行动失误和记忆失效。 https://blog.51cto.com/u_12667998/6543759
8.AxureRP8产品原型设计快速上手指南在做交互设计的过程中,为了保证用户对信息的理解,我们会不断地对信息进行分类,将同一属性的信息放到一起。RP8正式版中对属性和样式面板进行了重组和分类,更便于查找各类部件的属性,减少上下翻页以及选项卡切换等频繁操作。 工作环境介绍 1.2 页面面板 由Axure RP7中的站点地图发展到Axure RP8中的页面面板,更加表明https://www.epubit.com/bookDetails?id=N32085
9.物联网正火,如何入门智能手表设计智能手机、智能手表等智能设备的出现,让人们的生活变得更加便捷。而为了适应人们的使用习性、应用场景,智能设备也需要在产品设计、交互设计上做出更优方案,以达成更舒适的用户体验。那么,设计师该如何设计好智能手表这一类工具设备? 01 前言 1. 什么是IOT https://36kr.com/p/1718975256788225
10.如何设计智能汽车交互?WHY 为什么需要人机交互设计 SAE分类法将自动驾驶分为以下6个层级。 L0级(用于分类完整性)为完全的手动驾驶。 L1级以手动驾驶为主,但有一个辅助驾驶系统。横向与纵向控制都由驾驶员负责,其中典型的辅助驾驶系统,例如自适应巡航控制可在车辆横向或纵向运动控制中对相应部分的目标和事件具备自动探测与响应的能力。 https://www.dongchedi.com/article/7139791928941347360
11.人机交互学习3交互设计目标与原则交互设计目标 可用性目标 可用性目标不仅涉及人与之正在发生交互作用的系统,还包括系统对使用它的人所产生的作用。 易用性(learnability) 指使用系统的难易,即系统应当容易学习,从而用户可以在较短时间内应用系统来完成某些任务 易用性是最基本的可用性属性 https://blog.csdn.net/qq_51580006/article/details/131195523
12.WebUI设计理论学习笔记web-ui是什么--网页的界面设计 UI就是用户界面,包括三个方向:用户研究,交互设计,界面设计。 WUI是网页用户界面。wui设计与常见网站建设的区别是,wui注重人与网站的互动和体验,以人为中心进行设计。 关于屏幕分辨率 确定计算机批屏幕上显示多少信息的设置,以水平和垂直像素来衡量。显示分辨率就是屏幕上显示的像素个数https://www.imooc.com/article/details/id/20171
13.关于举办2021年校级数字媒体科技作品创作大赛的通知一、大赛作品内容分类 2021年大赛作品内容共分7大类(组),分设: 1.信息可视化设计。 2.数媒静态设计(普通组)。 3.数媒静态设计(专业组)。 4.数媒动漫与短片(普通组)。 5.数媒动漫与短片(专业组)。 6.数媒游戏与交互设计(普通组)。 7.数媒游戏与交互设计(专业组)。 https://www.qztc.edu.cn/jkxy/2021/0426/c6998a249802/page.htm