模态面板使用的探索

我仍然记得第一次使用豆瓣 App 详情页时的美妙感受,既可以顺着内容滑动一路看下去,也可以拖拽起底部的模态面板快速浏览影评。这种交互模式既可以像全新的页面容纳大量信息,但是又没有跳转到新页面那么重的负担,比起模态弹窗没有那么强的阻断感。

iOS 13 官方规范也提供了这种新模态面板的介绍。往往这种新交互都得占用大量开发资源,很难推动。没想到自己居然有机会在工作中运用了一次。

多层级数据的难题

我们的 App 新上线了某专业数据库模块。由于用户之前在书本中查找数据习惯了五级目录的,因此 App 中也采用了五级目录。如果是层级深在交互上倒不是大问题,难点在于每一级,从二级分类来时目录节点本身也有内容。

原本的设计方案如下,我们在数据库的主页透出 2 级内容和部分 3 级、4 级、 5 级的内容,通过「更多」能查看当前 2 级分类的完整结构目录。同时在详情页用面包屑导航的方式提供结构目录的入口。

显然这个方案目录的位置藏得太深了,很多用户不仅没注意到目录的入口,而且完全意识不到我们的数据库是按 5 级分类来设计的。完全不符合我们想象中用户阅读完一个详情页后通过目录接着阅读其他相关详情页的设计。于是整个项目组的人聚在一起来思考如何优化。

我首先想到的是企业组织架构和我们的数据库有类似的结构,于是参考钉钉的组织架构管理。但是目录占用的面积太大,侵占了内容区域,肯定不能采用。

想了好几种方案都不行,于是开始看交互比较新潮的豆瓣。如果采用模态面板呢?把目录作为模态面板虽然不影响详情内容的阅读,但是详情页底部本身有工具栏,位置有冲突。

同事灵机一动,如果反过来呢?模态面板显示详情页内容,页面底板展示目录。类比一下这个信息展示模式不就是地图嘛!目录有若干层级,地图上每个地址(国家-省份-城市等)也是不同层级的。点开目录是详情页模态面板,点开地图的标记同样有地址信息的模态面板。

为了让目录和详情的关系更明显,我们在每次打开详情内容时都有动画暗示内容居于目录之上。当然这个方案有另外一个缺点是每次想退出都不得不再看一次目录,此外模态面板顶部无法承载过多的操作,模态面板上有其他模态操作时,层级太多对交互和开发的逻辑来说都有些复杂。当然这些问题能克服。

于是我兴冲冲地把这个方案做成可交互原型,通过了评审,开发同事对新结构跃跃欲试。

上线后详情页阅读提升明显,文章看到这里你以为就结束了吗?顺利的事情总是有反转,失败的经验价值总比成功的更高。

回到原点

上线一段时间后我们对用户进行了访谈,发现仍然有用户不知道数据库内容有四层的情况。而且问题不是出在详情页,在数据库首页用户忽略了“更多”,以为首页呈现的就是数据库所有的完整内容,都没来得及探索我们精妙设计的详情页。另外模态面板在竖直方向上并没有占用整个屏幕高度,加上我们底部还有工具栏,导致阅读空间显得特别局促。后期规划在详情页右上角加其他功能也变成了不可能。

这时候由产品总监牵头讨论琢磨着该怎么优化,在原有需求基础上实在想不到什么新点子了,最后反过来推导需求的合理性,真的有必要在 App 里体现传统书籍的五层结构吗?另外,我们的数据分类方式其实也并不是全行业通用的,用户看到首页二、三级分类时都得在猜一下,找的四、五级内容是在这个分类下吗?

基于上面的讨论,最后做了一个非常痛苦的决策,去掉数据的五级内容结构,二到五层合并为同一层,信息架构扁平只有两级。直接在首页以 A-Z 展示所有内容列表,虽然会导致列表展示非常长,但是对于没有行业通用的分类来说,越是传统的分类方式反倒是更容易找到内容。

新的方案交互非常传统,从炫酷的普通,设计师和程序员多少都有些沮丧。上线后数据表现稳定,没有新的增长,但没有再收到找不到数据、使用不方便的用户反馈。

总结

通过这个项目的历练,我明白了:

  1. 模态面板不适合展示长篇沉浸阅读内容,适合做复杂度不是特别高的临时任务。
  2. 如果遇到一个前无古人后无来者的交互挑战难题,有可能需求本身就不合理。
  3. 如果需求不合理,要大胆的提出来推动需求方改变。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,233评论 6 495
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,357评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,831评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,313评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,417评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,470评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,482评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,265评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,708评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,997评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,176评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,827评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,503评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,150评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,391评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,034评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,063评论 2 352

推荐阅读更多精彩内容