从桌面端向移动端移植功能时,b端产品经常面临一个问题:桌面导航的数量很大,而移动导航门户的数量有限。如何解决这个问题,美甲、飞书、Teambition给了一种答案,供大家参考。
不知道大家在处理移动端导航中,有没有遇到这样的情况。公司的移动端设计是 “优雅降级”,即先满足桌面端产品的设计后,再逐步去考虑如何适配移动端。导致移动端页面中出现了意想不到的问题。
最为常见的就是底部导航栏的 导航菜单 不够用。
为什么不够用,我拿 钉钉桌面端 进行举例
在钉钉的桌面端中,包含有 我的团队、消息、文档、工作台、通讯录 五大重要模块,其次在左下方还会有 日历、待办、DING、邮箱、会议、直播、收藏、更多 等应用功能。在桌面端将这些功能规划完成后,你会如何设计移动端导航呢?给大家是5秒钟时间进行思考 ~
下面继续查看:
我们先想想移动端导航有哪些 “公式” 可以套,底部导航、顶部导航、桌面式导航、舵式导航,这便是移动端导航设计中最为常见的几个公式模型。而它的导航承载的最大数量不会超过五个,因此使用起来显然不太满足。
而在钉钉面临的问题和我们实际工作中遇到的问题类似,底部的导航可能会出现 10 的情况,究竟应该怎么办~
明白问题后我带着各位去分析分析。
首先我们在设计中,遇到数量多的内容时,首先想到的应该就是信息分层,将10多个导航进行拆分,显然钉钉也是这么做的。
接下来你会发现钉钉在最近更新的版本中,出现一个不同寻常的交互。
通过上划底部导航菜单,弹出一个类似的底部抽屉,将剩余的模块放置在抽屉下。这样就能将完整的导航形式在移动端呈现给用户
说说这样设计的优点:
再聊聊缺点:
虽然知道钉钉拥有强大的 ISV生态,但目前很多ISV的功能与钉钉自身产品功能重叠,交集过多。
当然这类交互并不是钉钉自己创新设计的,我是在 Teambition 以及 飞书 这两款产品上第一个发现(这两款与钉钉的做法还不太一样),随着钉钉的跟进,相信这类交互很快会成为 一个移动端的全新解决方式。
最后再说说飞书与 Teambition 的在这个交互中的细节
首先在飞书中,底部导航的配置主要来源于两个方面
其次,飞书不会存在钉钉入口太深的问题,用户点击更多,就展开抽屉,用户更容易理解。
Teambition也是类似,就不做拓展,这便是移动端设计的小趋势,大家可以在实际工作中用起来~
以上就是本期分享的内容,我们下期再见~
转载声明:本文来源于网络,不作任何商业用途
IOS下载
安卓下载
小程序