Alice

从桌面端向移动端移植功能时,B端产品经常会面临一个问题:桌面端导航数量多,而移动端导航入口数量有限。如何解决这个问题,钉钉、飞书、Teambition给了一种答案,可供大家参考。

 

咱们讲了很多桌面端的交互设计,最近在使用 App 时发现了一个自己观察到的小趋势,随便写写与大家探讨探讨~

不知道大家在处理移动端导航中,有没有遇到这样的情况。公司的移动端设计是 “优雅降级”,即先满足桌面端产品的设计后,再逐步去考虑如何适配移动端。导致移动端页面中出现了意想不到的问题。

最为常见的就是底部导航栏的 导航菜单 不够用

为什么不够用,我拿 钉钉桌面端 进行举例

图片

在钉钉的桌面端中,包含有 我的团队、消息、文档、工作台、通讯录 五大重要模块,其次在左下方还会有 日历、待办、DING、邮箱、会议、直播、收藏、更多 等应用功能。在桌面端将这些功能规划完成后,你会如何设计移动端导航呢?给大家是5秒钟时间进行思考? ~

 

下面继续查看:

我们先想想移动端导航有哪些 “公式” 可以套,底部导航、顶部导航、桌面式导航、舵式导航,这便是移动端导航设计中最为常见的几个公式模型。而它的导航承载的最大数量不会超过五个,因此使用起来显然不太满足。

而在钉钉面临的问题和我们实际工作中遇到的问题类似,底部的导航可能会出现 10+ 的情况,究竟应该怎么办~

明白问题后我带着各位去分析分析。

首先我们在设计中,遇到数量多的内容时,首先想到的应该就是信息分层,将10多个导航进行拆分,显然钉钉也是这么做的。

接下来你会发现钉钉在最近更新的版本中,出现一个不同寻常的交互。

图片

通过上划底部导航菜单,弹出一个类似的底部抽屉,将剩余的模块放置在抽屉下。这样就能将完整的导航形式在移动端呈现给用户

 

说说这样设计的优点:

  • 确实能够保证在桌面端产品结构不变的情况下,对移动端进行合理适配。因为按照传统的交互框架下难以满足现在的问题
  • 移动端与桌面端的导航体验基本保持一致,满足用户对整个产品架构的认知

 

再聊聊缺点:

  • 入口太深:因为交互入口需要进行上划的操作才行,需要一段时间的用户教育,让大家熟悉这个方式。
  • 冗余:目前钉钉太多的内容导致整个产品给人的感觉十分臃肿,再新增这个交互后需要的学习理解的内容就过于繁多,说实话我作为一个钉钉的用户,我要去写一个工作中的项目文档,我是应该选择:去协作?去工作台?去项目?去最近使用?同时又拥有文档、石墨文档、Teambition如何选择?

虽然知道钉钉拥有强大的 ISV生态,但目前很多ISV的功能与钉钉自身产品功能重叠,交集过多。

当然这类交互并不是钉钉自己创新设计的,我是在 Teambition 以及 飞书 这两款产品上第一个发现(这两款与钉钉的做法还不太一样),随着钉钉的跟进,相信这类交互很快会成为 一个移动端的全新解决方式。

 

最后再说说飞书与 Teambition 的在这个交互中的细节

图片

首先在飞书中,底部导航的配置主要来源于两个方面

  1. 飞书管理后台:提供给管理员,让公司的管理者可以对默认的导航进行一个统一配的配置
  2. 用户:用户可以根据自身的需求特性,对底部导航进行自己个性化的配置

其次,飞书不会存在钉钉入口太深的问题,用户点击更多,就展开抽屉,用户更容易理解。

图片

Teambition也是类似,就不做拓展,这便是移动端设计的小趋势,大家可以在实际工作中用起来~

今天就简单讲了讲这个趋势。

 

原文链接:CE青年(公众号)

作者:CE青年

转载请注明:学UI网 » 移动端设计的小趋势

登录收藏
 
你可能喜欢的:
业务想大多全,用户要精准简,首页设计该如何破局?业务想大多全,用户要精准简,首页设计该如何破局?
案例锦囊|交互设计中「情感化」设计优秀案例(二)案例锦囊|交互设计中「情感化」设计优秀案例(二)
这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!
iOS 规范与 Material Design 哪里不同?官网总结了这几点iOS 规范与 Material Design 哪里不同?官网总结了这几点
百度这一局改版,内容导向设计做得真行!百度这一局改版,内容导向设计做得真行!
微信生态中的设计(上) | 设计师如何通过生态视角找到设计优化点?微信生态中的设计(上) | 设计师如何通过生态视角找到设计优化点?
酷家乐优秀设计频道改版酷家乐优秀设计频道改版
如何用新风格引爆业务增长如何用新风格引爆业务增长
一局APP首页 改版设计分析一局APP首页 改版设计分析
干货|交互设计中的「有效反馈」7大准则!干货|交互设计中的「有效反馈」7大准则!