快好知 kuaihz

论APP发布状态左上角的按钮命名及其背后逻辑关系

一个APP在发状态的时候其左上角按钮到底应该是取消呢,还是返回呢?还是×,或还是其他?这不是一个很重大很要命的问题,但是它也不仅仅只是一个按钮的问题,不同的模式其底层的本质不同。

这个问题之前我也一直忽略,我们自己的不约App当时直觉的就直接用×了,没多余的想法,就是其他都是按钮形态,如果以一个取消文字来代替,跟其他页面设计样式有冲突。后面迭代的时候App已经变化很大了,现如今的一个版本重新整理了一下按钮及其逻辑,跟设计还有开发多次沟通过后发现我们的×也是需要做点改变了。

嗯,废话结束,进入正题。

在设计发状态时候左上角的按钮命名时候首先要弄清楚自己产品的页面逻辑关系,然后可以去多看看目前的主流产品都是如何处理的,再结合自身的情况做适当的调整。

碰到这个问题后,不要只凭直觉“我觉得它应该是一个什么什么”,先去调研调研再说,看看主流APP的设计都有那些模式,思考一下别人为什么要那样做,用着是不是很顺心没有交互障碍。

下午通过研究若干个APP之后发现现如今主流的模式有这么几种:

取消——微信、微博、QQ空间、QQ邮箱、LOFT、赤兔等

×——人人、nice、脉脉、知乎等

返回——备忘录、in等

关闭——简书等

总共研究了13款我手机装的APP,大概也覆盖了目前的主流应用,我们来做个小诊断,看看他们都是什么样的,为什么要那样弄。

模式一:“取消”处理法

上图为证

按顺序来,依次为微信、QQ空间、QQ邮箱、LOFT、微博。

页面交互为:从底部弹出到,点击“取消”后从顶部下去。

思考一下他们为什么这么做?

首先,这几个APP除了LOFT之外他们页面的按钮都是图标+文字为主,因此在这里用“取消”符合其他页面的设计原则,同时不会对用户造成困扰。

其次,打开写状态——“取消“不写了,这种交互逻辑是在不影响目前页面的前提下,调出来一个新的页面覆盖在其上,因此用“取消”符合其页面逻辑。

最后,“取消”是什么意思呢?百度百科解释为:“取消 ”亦作“ 取销 ”。使原有的制度、规章、资格、权利等失去效力。那么在这里其意思符合用户使用场景逻辑,使目前编辑的状态页面失去效力。

模式二:“×”处理法

上图为证

按顺序来,依次为人人、nice、脉脉、知乎。

页面交互为:从底部弹出到,点击“×”后从顶部下去。

思考一下他们为什么这么做?

首先×跟取消的意思即为接近,给用户的感受偏向于“不要了“的意思,因此在这种编辑状态场景下符合逻辑。

其次,使用×的APP除了考虑使用场景逻辑问题,还有一个很重要的问题就是设计统一原则问题,这些APP各个页面都以纯粹的图标为按钮,因此在这个页面使用图标“ד是对设计原则的遵循。

最后,一个“ד多简单明了啊,只要其他逻辑原则不冲突,首选,我懂你懂大家懂。

PS,其实单纯的图标对小白用户的使用还是有一些压力的,这也是为什么腾讯系的产品绝大部分都是图标+文字模式,虽然啰嗦,但有人家的深层考量,纯粹的追求设计的简洁容易做出自己一个人或是对互联网产品有高度认知度的小众用户的产品,最终无法推广到大众用户。

模式三:“返回”处理法

上图为证

按顺序来,依次为in、备忘录。

页面交互为:从右侧出来,点击“返回”后又回到右侧。

思考一下他们为什么这么做?

首先,这个返回包含的比较多,不仅是单独的一个返回图标,还有返回图标+返回文字,另外还有返回图标+上一个页面的标题等,但这种设计模式目前依然小众,翻了很多APP,最终只有in和苹果备忘录两个APP。

In的返回逻辑比较容易理解,在此页面之前还有两个编辑图片的页面,他们都是一个样式,右上角为返回,用户可以一步步走下去,最终也可以一步步返回去,假如中途出什么差错,不用重新来过,返回修改就OK,对用户的使用是一个减压。

备忘录的逻辑怎么说呢,我还是没太搞明白,路过的大神求赐教╮(╯▽╰)╭

模式四:“关闭”处理法

上图为证

上图为【简书】大拿

页面交互为:从底部弹出到,点击“关闭”后从顶部下去。

思考一下他们为什么这么做?

记得还有几个APP也是关闭处理法,不过今天没怎么找到,或许是他们迭代已经更改了,目前就一个简书还是这样。

个人理解,关闭是一个很程序的词汇,常为程序猿专用词汇,或许简书的产品经理是开发转入?我瞎猜而已╮(╯▽╰)╭,简书的小伙伴们求考证

第二,关闭百度百科解释有两层意思:1.指门闩,后泛指防御性的设施。 指心情,意思是关闭自己不想与外界有任何联系。而简书是一个写文章的APP,它这里不是状态,是文章,因此使用“关闭“这个词汇相对于”取消“似乎更适合一些,我在写东西,写着写着不想写了,那我关闭就好了,在简书上写东西是为了让别人看到,那么我不想写了就是不想跟外界发生任何联系,那么我就关闭,或是私密保存,或是放弃编辑。

应该还有其他的设计模式,但毕竟不是主流,用户也比较难接受。

综上,在一个发状态的页面其左上角的图标到底应该怎样设计?

其实我们需要考虑这么两个因素就够了:

第一:你的APP受众人群是哪些?是部分互联网高认知的用户呢?还是普罗大众?

这也是为什么腾讯系的产品大部都是图标+文字的设计样式原因。他们面对的是十数亿的普罗大众,比如我老妈她知道取消是什么意思,但是对于×就不知道了,不敢点了。另外国外的主流产品大部分都是纯图标的,这跟其互联网普及也有关,国民已经熟悉简洁的互联网规则了,所以无需累赘加文字解释;但国内尤其是中西部已经农村地区,大家刚刚开始接触互联网,需要一个认知的过程;

考虑了第一个因素后就考虑第二个因素:你的APP其他页面按钮是如何设计的?如果是纯图标,那么请在这里保持一致,一个×解决所有事;如果不是纯图标,那就需要相应的调整来做统一了。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:左上角  左上角词条  命名  命名词条  按钮  按钮词条  逻辑  逻辑词条  背后  背后词条  
设计

 如何将蒙太奇运用到产品设计中?

蒙太奇,这个词可能您听过,也可能没听过,今天我就来讲一讲什么是蒙太奇。蒙太奇就是利用联想、虚拟、朦胧的表现方法通过艺术性的组织、剪辑以表现设计者真实的、无法描述...(展开)