最近在一次大扫除当中,不小心把厨房里的垃圾桶给摔坏了,于是乎想在网上选购一个合适的垃圾桶,而回顾了垃圾桶的选购经历,或许它是一个很好的例子,让大家了解多入口的设计思考。
首先,究竟厨房需要是什么样的垃圾桶?我陷入了嘀咕,因为我自己也不太明白,于是我在淘宝上看到了许多不同类型的垃圾桶。
把它们总结了一下,基本上可以分为两类:直筒式、脚踏式
直筒式:采取顶部开放的结构,使用者可以直接将垃圾扔到桶里。如果不够有趣?你还可以将垃圾桶看作“篮筐”进行投篮。
直筒式顶部开放的结构,确实能够给我们扔垃圾带来不少便利,但同时也会暴露一些问题,就是蚊虫。因为厨房里的垃圾桶会有很多餐厨垃圾,也因此会滋生很多蚊虫,特别是在一些剩下的水果核上,会留下很多蚊虫。
脚踏式:顶部为盖板,当需要扔垃圾时,使用者需要用脚踏住盖板,并将其抬起。这种方式就能够避免厨房餐厨垃圾所滋生出来的蚊虫
但问题又来了,在做菜时,扔垃圾通常十分频繁,每一次都需要脚踏显然效率太低。那能否既能脚踏又能随手就扔呢?
面对这一问题,我发现了一个新式垃圾桶:
而在我们设计B端产品时,同样会有“多入口”的情况。
比如在纷享销客的设计当中,新建客户有着两个不同的入口:
入口一:首页-客户及商机管理-客户-新建
这是新建客户最为常规的入口,它就类似垃圾桶的直筒式。通过表格页操作的新建,让用户进行表单的填写,进而新增客户。
入口二:首页-新建-客户
这是纷享销客的一个特别设计,它在导航菜单处设置一个全局的新建入口,当用户在系统的任意页面,都可以进行新建。
大家可以跟我一起思考一下,我们如果是一个销售人员,在我的工作当中,会去经常新建客户、跟进记录等,那通过一个全局的新建入口,能帮助我们更快的进行操作。这便是纷享销客的第二个新建入口。
我再给大家举一个简单例子,同样我们在纷享销客当中,表格当中的筛选同样也是有着两个不同的入口:常规筛选与表头筛选。
常规筛选:用于表格当中一般和许多操作并排放置,算是一个较为基础的入口
表头筛选:点击过后同样也是进入到筛选弹窗,但不同的是,表头筛选点击过后,会将表格的值带入到筛选当中,来实现筛选+选值这样的两步操作。
在B端产品当中,不同场景的需求其实经常存在,但为什么没有暴露出来?其实是因为用户在B端产品当中,本身用户就是处于弱势群体,他们都是服从于上级的安排,而设计师不会分析,就会选择最平庸的方式去处理需求。
咱们讲了很多桌面端的交互设计,最近在使用App时发现了一个自己观察到的小趋势,随便写写与大家探讨探讨~
不知道大家在处理移动端导航中,有没有遇到这样的情况。公司的移动端设计是“优雅降级”即先满足桌面端得到产品的设计后,再逐步去考虑如何适配移动端。导致移动端页面中出现了意想不到的问题。最为常见的就是底部导航栏的导航菜单不够用。
为什么不够用,我拿钉钉桌面端进行举例:
我们先想想移动端导航有哪些“公式”可以套,底部导航、顶部导航、桌面式导航、舵式导航,这便是移动端导航设计中最为常见的几个公式模型。而它的导航承载的最大数量不会超过五个,因此使用起来显然不太满足。
而在钉钉面临的问题在我实际工作中遇到的问题类似,底部的导航可能会出现10+的情况,究竟应该怎么办~
明白问题后我带着各位进行分析分析:
首先我们在设计中,遇到数量多的内容时,首先想到的应该就是信息分层,无论是将10多个导航进行拆分,显然钉钉也是这么做的。
接下来你会发现钉钉在最近更新的版本中,出现一个不同寻常的交互。
通过上划底部导航菜单,类似一个底部抽屉,将剩余的模块放置在抽屉下。这样就能将完整的导航形式在移动端的方式展示给用户。
说说这样设计的优点:
确实能够保证在桌面端产品结构不变的情况下,对移动端的合理适配。因为按照传统的交互框架下难以满足现在的问题
移动端与桌面端的导航体验基本保持一致,满足用户对整个产品架构的认知
再聊聊缺点:
冗余:目前钉钉太多的内容导致整个产品给人的感觉十分臃肿,再新增这个交互后需要的学习理解的内容就过于繁多,说实话我作为一个钉钉的用户,我要去写一个工作中的项目文档,我是应该选择:去协作?去工作台?去项目?去最近使用?同时又拥有文档、石墨文档、Teambition如何选择?
虽然知道钉钉拥有强大的ISV生态,但目前很多ISV的功能与钉钉自身产品功能重叠,交集过多。
当然这类交互并不是钉钉自己创新设计的,我是在Teambition以及飞书这两款产品上首先发现(这两款与钉钉的做法还不太一样),随着钉钉的跟进,相信这类交互很快会成为一个移动端的全新解决方式。
最后再说说飞书与Teambition在这个交互中的细节
飞书管理后台:提供入给管理员,让公司的管理者可以对默认的导航进行一个统一配置
用户:用户可以根据自身的需求特定,对底部导航进行自己个性化的配置
其次,飞书不会存在钉钉入口太深的问题,用户点击更多,就展开抽屉,用户更容易理解。
Teambition也是类似,就不做拓展,这便是移动端设计的小趋势,大家可以在实际工作中用起来~
表单作为一个B端设计的重要场景,一直以来我都在想,究竟应该如何高效的进行信息录入?今天我们就从文档产品中,去“借鉴”一些表单效率提升的方法~
首先在录入的场景中,我会想到写作类的文档软件:
比如我想设置一个“一级标题”
没有使用Markdown,操作路径是
使用Markdown后,我只需要
输入:#+空格+文本内容即可快速完成上面三步的操作
我使用Markdown就可以提升我在信息录入时的效率,手也可以不用去移动鼠标,减少切换控制设备所带来的一系列的问题。在我看来这便是一个文本录入效率提升的一个方式,而我们怎么将Markdown的思路落地到我们的B端表单场景中呢?
我本来也是没有任何思路的,可是最近在使用滴答清单发现它的录入特别有意思,当我在新建一个待办事项时:
输入“!”符号后,即可设定该待办事情的优先级,同样在输入“~”符号后,即可设置该待办事项的归属。
是不是和Markdown的特定规则有那么一点点类似了~
通过这样设定特殊规则,我可以对待办清单进行快速选择优先级、归属箱等等...
“特定规则录入”:即使用特定的录入规则,将用户需要使用的信息进行快速的录入
最后的落地,在我们实际的B端项目中,我们在销售填写跟进记录时也做了相应的优化:
我们可以用@+空格添加具体的销售负责人员
输入#+空格添加跟进记录的标签
输入!+空格添加跟进记录关联的合同
(由于保密协议,这里就不展开去讲,算是给大家提供一些思路)
不过通过这样的改版,确实让用户在使用跟进记录这一模块上有了极大的提升。当然目前还是会有一些小问题,就是在输入“!+空格”时,很多销售还是会反馈这个的影响有些大,希望能够进行调整。
之后会考虑将这个快捷方式迁移到其他字母,希望能够解决此问题。
在我日常的写作中,我会新建一个思维导图。
一方面思维导图能够帮助我去梳理我的思维结构,整理一些脑袋中零散的知识点,另一方面我也可以通过导图,帮助我进行快速的知识调度。
但在飞书文档中,因为宽度限制,导致我在对导图的编辑特别不友好,没办法正常的编辑我的思维导图。这时候我可以双击导图,进入到全屏编辑的状态,这就对大容量内容的编辑,带来的非常多的便利。
当然这只是在文档场景下,其实我们在日常的表单录入的过程中,同样会面临同样的问题。
通常,表单的呈现都是采取弹窗的形式,但是当信息录入过多时,就需要考虑是否支持将弹窗扩展至整个页面,能够将表单进行更快速的录入。
比如在Gmail中,当你需要去新建一封邮件时,就有两种不同的状态:
这种交互形式也被放在我们自身的产品中,因为作为一个aPaaS类的可配置化的表单,我们本身是不能确定用户的内容量,因此在采取弹窗的同时会为用户增加大弹窗的入口,可以应对用户灵活多变的各种场景。
为什么线上许多产品中(明道云、简道云、ONES...)窗口下呼出下拉菜单后,滚动表单都没有跟随录入框吗?如下图,今天我们就来聊聊其中的缘由。
看到大家的回答,有的已经十分接近,但是实际的情况还是会有一些不同,我来带领大家一起讨论~
首先,在设计层面上,咱们最想要的结果是在弹窗中:下拉菜单与录入框进行实时的跟随,也就是类似下图:
但是在开发层面,你会收到成本太高的结论。因为影响上诉结果的原因就是在CSS当中有一个属性叫Position(定位),下拉菜单也正是通过定位来进行位置的判断,从而实现下拉菜单与录入框跟随的状态。
这里就不扯那些代码什么的,我相信大多数设计师都看不懂,我就简单将问题用设计师的角度去理解,你可以将弹窗本身看作是一个画板,而录入框、下拉菜单都看作是其中的一个图层。
如果需要实时定位来进行计算(也就是上面AntDesign所呈现的效果)就需要将它们都放在一个画板里面。
这时候大家应该忘了一个重要的条件因素:弹窗
当我们使用弹窗,必然会将整个画板缩小,因而在里面的图层也会受到画板的局限,不能完全展示,在实际的开发中,就会出现下拉菜单遮挡展示不全。
当然遇到这种问题我们就需要找到解决办法,也就是最开始与大家讲到的其他产品的做法:
将整个的下拉菜单单独看作是一个画板,虽然不会对选择录入框进行实时跟随,但是从整体来看,这种方式显然影响用户的使用体验更小,在权衡比较过后,就会采取第二种方案。
相信你在设计的过程中,也会遇到许许多多与开发同学产生的矛盾~不如发出来,看看大家能不能帮你一起解决!