产品设计中“+”功能的相关思考 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


产品设计中“+”功能的相关思考

2018-12-5 用心设计 交互设计及用户体验


如果您想订阅本博客内容,每天自动发到您的邮箱中,

 

日常工作中,有很多看似平凡的小细节,常被大家忽视,却影响着用户的真实体验。比如,前几天跟同事们针对产品设计中“+”功能所运用的场景、展开形式进行讨论,发现这是一个挺有意思的话题。

所以跟大家分享下,我的一些相关思考。

1. “+”的运用场景

我们常见的产品中,采用“+”功能的场景,大致分为两种:a.(上传)内容选项;b.(聚合)快捷功能。

a.(上传)内容选项

根据“+”的直观表意,大致也能猜到它的运用跟“添加”、“上传”某个东西相关。

比如:微博,点击“+”入口后,是选择所要上传的内容类型。(可以晒自己精修X小时后妈都认不出来的自拍、也可以晒逗比的小视频、或者老子就想搞一场直播)。

比如:下厨房左上角的“+”,点击后,是选择上传作品,或者创建菜谱的选项。

再比如:工具类产品:Google drive,dropbox、百度网盘、微云,点击“+”后,同样是选择上传不同文件的入口。

可以看出,这种情况下的“+”功能,多指“添加”、“上传”的含义,所承载的内容,是同一纬度下的不同选项。

b.(聚合)快捷功能。

众所周知,产品为了节省界面空间,同时避免过多功能给用户不必要的干扰,会选择把一些不常用的快捷功能收到二级展示。常见的产品中,他们选择把这些快捷功能塞进“+”里。

那么,你是不是觉得“+”功能跟“…”功能承载的内容是一样的?比如:乐趣帝皇彩票右上角“…”,同样是对频率较低的功能的集合。

那为什么有的产品不直接用“…”,还是选择用“+”呢?

通过分析发现,“+”虽然也是聚合快捷功能的入口,但承载的功能有一个共性:都是围绕着用户主动打开、发起、新建…等操作进行的,因此用“+”更贴切。

比如:微信里的“+”,包含着:“发起群聊”,“添加朋友”,“扫一扫”,“收付款”,其实都跟“添加”有关。

比如:淘宝也是类似的处理方式。

再比如:爱奇艺的“+”,里面包含的也是跟“添加”,“上传”相关,像上传视频、扫一扫、我要直播….

反过来看“…”,它聚合的功能,大多是相互关联较弱,且没有主动添加、上传等含义的。因此,用一个相对模糊,没有指向性的符号诠释,更为合适。

由上可以看出,在这种情况下,“+”作为聚合快捷功能的入口,包含的是频率较低,且跟主动“新建”、“发起”、“扫描”等相关的功能。

 2. “+”的展开方式 

当用户触发界面中的“+”时,常见的展开方式有3种,分别是:a.气泡弹出框;b.动态栏;c.沉浸模式。

a.气泡弹出框

气泡弹出框,这个控件又常被称为Popover,一般是由一个矩形和三角箭头组成的弹出窗口,通过点击Popover内的按钮或者非Popover的屏幕其他区域可关闭。

比如,以微信为代表的“+”的展开方式,采用的就是Popover。一般用于聚合快捷功能。优点是触发“+”到Popover的距离很近,操作顺手,效率高(更像是导航的延伸)。

b.动作栏

动作栏,这个控件官方称之为Action Sheet,是用户触发“+”后,出现的一种模态弹出框,里面包含一组与当前情景相关的选项,一般用于上传内容选项

在iPhone屏幕上,为了便于单手持握时操作,Action Sheet通常占据屏幕底部区域。

帝皇彩票官网 比如:以Google drive、Dropbox为代表的产品,需要选择上传文件类型的选项。

在这个部分,同事们讨论有些争议点,在于:google drive 和 Dropbox或者微博,它们的加号本来就在底部,所以弹窗让用户感觉视线统一。

而有的产品“+”在上面,弹窗从底部出来,担心注意力切换和手指移动的路径比较长,显得割裂。

带着这个问题,我调研了下有类似情况的产品,会不会让人觉得不舒服。

后来发现,不会的。原因在于我们常用的、拥有10亿+用户的微信,发朋友圈时操作就是这样,而我们并没有感觉很割裂,反而已经习惯。

帝皇彩票官网 同样,iPhone自带的“提醒事项”App,也是这样处理。

后来看了规范发现,iOS确实意识到在iPad上,如果继续将Action Sheet显示在屏幕底部,如果频繁操作使用会比较累。因此,做了特殊处理。而手机屏幕上以底部为主,同时点击空白区域取消的操作,也是系统用户所熟知的。

总的来说,操作栏适合承载同一纬度下的内容选项,同时,就算“+”在顶部,采用底部动态栏,体验上也是没问题的。

c.沉浸模式

沉浸模式,指的是当触发“+”时,用户在全局蒙层上进行功能操作,同样适用于上传内容选项。

优点是拓展性更强,体现在:1。提升收益;2。品牌认知;3。内容运营。

1.提升收益

比如:微博,采用沉浸模式,下面是上传不同状态类型的入口,上面可以增加广告收入。

再比如:微云,在沉浸模式下,可以植入自己的“会员”广告,从而提升会员转化。

2.品牌认知

比如:有道云笔记,在顶部的空间内,宣传自己的品牌slogn:“记录,成为更好的自己”,是一种品牌情感化的传递。

3.内容运营

像“好好住”,它们在这个页面加入“话题”运营推广。从而给UGC内容模块带节奏。

大多数产品都想营造社区氛围,建立用户关系,从而增加用户粘性,提升产品留存。

帝皇彩票官网 但要想拥有浓厚的社区氛围,首先要有内容、才有人愿意看、才有人在里面互动。

现实问题是,有很多用户有想发状态的心,但不知道发啥,从而放弃。因此,我们应该作出相应的引导。

比如,“好好住”在发布环节,增加话题运营“#每天一张生活日常#”入口,就是解决刚才说的“用户不知道发什么”的问题。运营同学想点子、造话题、带节奏,从而提升用户的发布量。

因此可以看出,“沉浸模式”,对于那些有拓展需求(收益、品牌、运营)的产品更适用。

不知道你有没有发现,相比国外,国内采用这种“沉浸模式”的产品偏多。或许在中国这个互联网竞争如此激烈的大环境下,大家不愿意放弃任何一个能够运营或留住用户的机会。 

总结  

总的来说,在常见的产品中“+”功能的运用场景有:(上传)内容选项、(聚合)快捷功能;它的展开方式可分为:气泡弹出框(适合承载快捷功能)、操作栏(适合容纳内容选项)、沉浸模式(容纳内容选项的同时,拓展性更强)。其实,交互形式没有好坏之分,只有哪个更适合自己的内容需求和产品目标,正如Louis Sullivan所说:“形式追随功能”。

小tips:日常工作中有太多类似“+”这种,看似一个不起眼的小功能,被大家忽略。我们习惯性看一下竞品,拍脑袋决定方案。

但是,慢慢你会发现,只有深挖和分析这些所谓的“小细节”,才能知道别人这么做背后的原因、才能举一反三的去运用、才能更好的兼顾统一性和拓展性,而不是停留在浮于表面的模仿。

蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 

标签: “+”小图标大功能 « 一款美丽的Admin后台界面HTML模板源码 Light Bootstrap Dashboard | 一篇文章读懂数字化驾舱智慧出行»


蓝蓝 http://www.bjhbys.com

  1. 2019年10月(53)
  2. 2019年9月(48)
  3. 帝皇彩票官网2019年8月(63)
  4. 2019年7月(59)
  5. 2019年6月(59)
  6. 2019年5月(31)
  7. 2019年4月(37)
  8. 2019年3月(43)
  9. 2019年2月(26)
  10. 2019年1月(45)
  11. 帝皇彩票官网2018年12月(41)
  12. 2018年11月(40)
  13. 2018年10月(29)
  14. 2018年9月(40)
  15. 2018年8月(87)
  16. 帝皇彩票官网2018年7月(107)
  17. 2018年6月(86)
  18. 2018年5月(110)
  19. 2018年4月(40)
  20. 2018年3月(35)
  21. 帝皇彩票官网2017年8月(35)
  22. 2017年7月(45)
  23. 2017年6月(7)
  24. 2017年5月(27)
  25. 2017年4月(51)
  26. 2017年3月(70)
  27. 2017年2月(65)
  28. 2017年1月(69)
  29. 2016年12月(55)
  30. 2016年11月(111)
  31. 2016年10月(92)
  32. 2016年9月(53)
  33. 2016年8月(9)
  34. 2016年7月(4)
  35. 2016年6月(9)
  36. 2016年3月(19)
  37. 2016年2月(26)
  38. 2016年1月(30)
  39. 帝皇彩票官网2015年12月(33)
  40. 2015年11月(35)
  41. 2015年10月(46)
  42. 2015年9月(43)
  43. 2015年8月(40)
  44. 2015年7月(33)
  45. 2015年6月(46)
  46. 2015年5月(58)
  47. 2015年4月(70)
  48. 帝皇彩票官网2015年3月(55)
  49. 2015年2月(17)
  50. 2015年1月(33)
  51. 2014年12月(21)
  52. 帝皇彩票官网2014年11月(84)
  53. 帝皇彩票官网2014年10月(94)
  54. 2014年9月(6)
  55. 2014年8月(1)
  56. 2014年7月(13)
  57. 2014年6月(66)
  58. 2014年5月(99)
  59. 2014年4月(88)
  60. 2014年3月(102)
  61. 2014年2月(68)
  62. 2014年1月(83)
  63. 2013年12月(106)
  64. 2013年11月(112)
  65. 帝皇彩票官网2013年10月(61)
  66. 2013年9月(20)
  67. 2013年7月(13)
  68. 2013年6月(27)
  69. 2013年5月(48)
  70. 2013年4月(39)
  71. 2013年3月(8)
  72. 帝皇彩票官网2013年2月(20)
  73. 2013年1月(31)
  74. 2012年12月(33)
  75. 2012年11月(31)
  76. 2012年10月(23)
  77. 2012年9月(8)
  78. 帝皇彩票官网2012年7月(14)
  79. 2012年6月(15)
  80. 2012年5月(31)
  81. 2012年4月(24)
  82. 2012年2月(4)
  83. 2012年1月(8)
  84. 帝皇彩票官网2011年12月(35)
  85. 2011年11月(32)
  86. 2011年10月(13)
  87. 2011年8月(1)
  88. 2011年6月(1)
订阅Rss
安徽快3走势 状元彩票平台 帝皇彩票登陆 桔子彩票登陆 上海11选5计划 桔子彩票平台 帝皇彩票平台 桔子彩票官网 状元彩票官网 迪士尼彩乐园登陆