关于产品中“+”存在形式的思考

用户头像
北京/UI设计师/7年前/132浏览
关于产品中“+”存在形式的思考
用户头像
炎岩

设计师苏大牙在她的文章中谈到了对“+”功能的思考,这里我从另一个角度-存在形式对其进行研究和思考。

相信大家的手机里都有那么几款有上传/发布功能的APP,随便截几个图,发现大都这样的一种形式。他们处于导航栏中间,给予极高的视觉重量和引导。与其他几个导航图标做出明显区别,甚至都可以不用标注名称,用户也会一目了然明白它的用处。比如即刻、开眼、转转、站酷等APP。



当然,也有以悬浮按钮形式呈现的上传功能。比如印象笔记、时光小屋、钉钉的新建日程等。

在我设计的企业云盘产品,通过与产品经理沟通确定上传功能的优先级特别高。于是在安卓版本的设计中,我将上传功能以悬浮按钮的形式进行展示,使用户能够快速地找到上传入口进行操作。

一.可否替换

所以,悬浮的上传按钮与导航栏中间的上传按钮有什么区别呢?两者的形式是否可以互换?为了对这两个问题得出解答,我做出了一些研究及思考。答案是不可以互换,因为悬浮的上传按钮虽然与导航栏中间的上传按钮承载的是相同的功能,但是所处的位置以及存在的灵活性使得两者之间有较大的差异,具体如下:


1.基于文件上传位置

导航栏中间的上传/发布按钮是将新文件/新鲜事推送到层级单一的地方,也就是点击“+”所发布的信息都会被push到某页(可以是首页也可以是其他特定的位置)的信息流中进行展示,这里是它唯一的去处。比如在微博上发布发布新鲜事,新鲜事就会直接在首页展示。

而云盘的上传功能是基于位置进行上传的,用户很有可能需要进入多层级的子文件夹,在该位置下完成上传动作,文件才会被上传到该文件夹中。此时将上传功能置于导航栏中常驻,设想一下当你处在“更多”界面,进行文件上传,文件会去向哪里呢,在哪里进行展示?用户肯定会很迷惑。


2.基于使用场景

一般情况下导航栏只显示在一级的主界面,当进入二三级界面,导航栏就会隐藏,此时处于导航栏上的发布功能也会被隐藏。按照用户使用场景来说,用户进入二三级界面是对当前界面上呈现的信息感兴趣或者进行相关操作,并没有发布新鲜事的需求,此时隐藏也是合情合理。还是在微博,点击某一个信息及进入微博正文,关注的是此条微博相关的信息而不是去发布新鲜事。

但是在云盘中,用户通常会存在多层级文件夹的情况,在子文件夹中也需要进行上传操作,上传功能必须进行显示。此时,原本为一体的上传按钮与导航栏分裂来,单独展示,对用户来说这种分裂感所带来用户体验的感受并不友好。

3.基于功能的权限

微博的发布功能是常驻、固定的功能,也就是说无论你当前处在四个一级界面中的哪一个,你都可以选择发布新鲜事。但在该企业云盘中,上传功能并不是用户的通用权限,比如在某个部门下的文件夹中,用户并没有上传文件的权限,此时就不会显示上传功能。

4.基于设备

悬浮按钮是Andord应用上的常见的控件,“悬浮按钮通常用来承载相关度最高、最常用、最重要的操作”,“悬浮按钮还可以为用户提供下一步的提示和引导。Google 的研究表明,当面对不熟悉的界面之时,许多用户都倾向于点击悬浮按钮来探索,获取引导。因此,悬浮按钮在功能上有类似路标的属性。”

我在iOS设备和安卓设备上对比了几个应用,发现iOS设备通常会将此功能放在导航栏或者标题栏上进行处理。因此,小伙伴们在做设计的时候还是要注意遵守平台规范,选择匹配系统的控件。

比如印象笔记的新建笔记功能,除了上传按钮的形式不同外,产品的框架也进行了不同的处理。

那么什么时候可以放置到导航栏中间呢?

当然,云盘上传功能需要基于位置和权限进行考量,我们来看一下不需要考虑这些因素而采用了悬浮按钮的APP。比如时光小屋和百度云盘的生活记都有发布新鲜事的功能,很显然,时光小屋的发布按钮可以放置到导航栏中间,而百度云盘的生活记的发布按钮不可以。因为,时光小屋的发布功能是整个APP的主要功能,而百度云盘的生活记不是云盘最核心最主要的功能,因此不能放置在导航栏的位置。

二.基于位置具有上传功能的悬浮按钮还可以替换成什么形式

1.处于操作栏/标题栏常驻页面

比如百度云盘、腾讯文档以及亿方云的上传功能。

这种形式可以与周围操作和信息和谐相处,不突兀不跳脱,缺点也是不够明确和凸显。

2.导航栏+上传按钮常驻二三级界面

在文件存储应用中导航栏和上传按钮常驻的好处是比较明显的,它可以不受当前层级深度的影响,直接跳出,不用一级一级返回再去到其他界面,工作效率高。

唯一的缺点是不能释放底部位置进行内容展示,但是在保证用户高效操作的面前不值一提。

因此,如果不受上传权限的约束,而层级有可能很深的APP,这种方式还是很值得推荐和参考的。

四. 悬浮按钮展开后的排布方式

展开后有多种类型供选择的话一般有以下几种排布方式:

1.图标(+文字)垂直排布

点击后直接在悬浮按钮的位置上方垂直排列出几种类型图标。一般最多5、6个。

优点是开发容易实现,缺点是单手操作的情况下需要拇指的弯曲度高。

2.图标(+文字)扇形排布

这种展示方式更有利于右手操作的舒适性,一般也是5、6个选项,并具有一定美感,不过这种形式比较少见。有人会质疑会不会不利于左手利者的操作,调研发现,手机屏幕越来越大,用户也并不固定的依靠某一只手操作,在一只手触达不到的区域,用户会不自觉地调整姿势或者使用另一只手辅助一下,在使用过程中是比较流畅的动作,并不会增加多大的成本。

3.动作栏

这种方式可以适用选项较多的情况,利于单手握持操作手机。但是在形式感或设计感上体现较弱,可以着重将图标设计的有亮点一些。



4.推广模式

这种方式会更有设计感更个性化一些,在功能方面除了展示可上传的内容,还能裸露品牌logo,传递品牌文化;加入广告,为其引流;或者为自己产品的新功能进行宣传等作用。

最后,总结一下

一.悬浮按钮在以下几种情况下可以考虑使用:

    1.非常重要/具有引导功能

    2.基于位置上传

    3.基于上传权限

    4.安卓应用

二.基于位置上传的悬浮按钮可以根据重要层级的区别替换成:

    1.放置在操作栏常驻在页面

    2.放置在导航栏中间,但导航栏要常驻界面

三.悬浮按钮展开后的排布方式

    1.图标(+文字)垂直排布

    2.图标(+文字)扇形排布

    3.动作栏

    4.推广模式


通过研究分清楚“+”作为悬浮按钮和导航栏中间的按钮的不同情况下如何做选择,有何其他方式可以替换。“知其然知其所以然”,提升自己思考、调查研究的能力。这样,才能有条理有依据的阐释自己这样做的原因,说服别人的同时也提升自己的专业形象。小伙伴们一起加油吧💪

1
阅读原文
|
举报
|
1
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】影音icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
3D渐变流体抽象矢量UI背景图
【新年UI图标】30个图标
我的钱包-UI界面设计-app
新能源APP应用UIKit
UI 登录界面设计模板包
UI通用设计素材1
【新年UI图标】会员icon
UI界面 组件
【新年UI图标】珠宝icon
高级表盘系列UI源文件
钱包ui模板
APP/小程序商业项目UI模板|99个高保真UI+79个原型
科技医疗透明柜UI界面设计
【新年UI图标】汽车icon
Security Camera UI kit
【新年UI图标】游戏/娱乐icon
新拟态风格 UI设计组件库
智能家居中心 简约 UI设计组件库
【新年UI图标】秒杀icon
拟物风质感写实UI卡片合集源文件
3D卡通UI界面图标可爱插画免扣素
你可能喜欢
大家都在看
登录注册