申请报道

扫一扫,联系编辑获得审核机会

符合以下要求,获得报道机会

  • 1. 新公司求报道
  • 2. 好项目求报道
  • 3. 服务商求报道
  • 4. 投资融资爆料

当前位置:澳门葡京赌场官网 葡京网上赌场 葡京开户 >  站长 >  交互设计 >  正文

按钮组的使用场景设计总结

 2017-12-18 09:06  来源:UI中国  我来投稿

澳门葡京赌场官网 葡京网上赌场 葡京开户 www.jinyi186.com   月入百万 2018互联网创业项目加盟

  上周一个朋友问了我一个问题,按钮组排布的时候是组合在一起好还是分开好?这个问题当时就把我问倒了,因为我之前从来没有考虑过这个问题。为了回答这个问题,我对按钮组的使用场景进行了一个简单的总结,希望可以帮助到大家。

Image title

 

  什么是按钮组?

  顾名思义,按钮组就是指两个或两个以上的按钮排布在一起。为了了解按钮组的使用场景,首先我们来思考一个问题:什么时候我们会使用按钮组?

  从按钮组的样式上我们可以看出常见的按钮组是供用户进行判断(两个选项)或者选择(两个以上选项)的。

  判断

  首先我们来说判断,就是只有两个按钮的情况。一般来说,两个按钮中肯定有一个拥有更高的优先级或者说用户更希望去点击,那么我们会在样式设计上进行区分。

Image title

 

  微信的”取消”按钮背景色选择的是灰色,而淘宝直接让”取消”成了一个光秃秃的文字按钮。这样的对比设置可以让用户很快找到“确认登陆”按钮,进而完成登录操作,提升了操作效率。

  其实可以让用户进行判断操作的组件还有开关???,又称switch,也是我们很常见的一个组件,表示两种相互对立的状态间的切换,多用于表示功能的开启和关闭。而一项功能的开启可能会带来相应的后续操作,例如你在iOS设置里开启了微信的“通知”功能,那么你就需要对通知形式进行进一步的设置。而按钮组不会出现这些后续操作,更像是一锤子买卖,这也是按钮组和开关的一个主要的区别。

Image title

 

  小时候,我们家的灯开关都是拉绳的。拉绳的开关有一个缺点就是停电的时候,你不知道当前的灯是开还是关,这个就很头疼。所以开关要用好必须要让用户明确自己当前所处的状态以及清楚操作后的结果。其实淘宝的这个switch用的并不是很好,因为这里的图形暗示并不是很清晰。

Image title

 

  线状和面状

  在上面我们提到了设计中的一个对比理论,这里我们不妨来进行一个拓展。我们在设计按钮的时候,经?;崦媪僮啪裨?,线状按钮还是面状按钮?其实线状还是面状争论不仅仅存在于按钮,还有icon,tab和标签等样式。面状和线状代表不同的设计理念,我们都知道面状元素在界面中更容易吸引用户的注意力,而线状元素强调的是轻量化。具体到按钮,简单来说就是面状按钮比线状按钮具有更强的可点击性。我们可以来看一个例子:

Image title

 

  微信里“通讯录”里的icon加了一个色块做背景,但是“发现”和“我”界面中的icon都没有加色块做背景。我尝试着把icon的色块背景给去掉,发现它的视觉权重立马降了一档。因为通讯录这个界面中有用户头像,如果不加色块背景,用户很难注意到这四个功能。所以说块状元素的使用可以提升功能的转化率。

Image title

 

  我们再来看一个例子,喜马拉雅Fm这个界面中的“录音”按钮其实看起来特别的吃藕,因为很突兀。但是设计师的目的达到了,为了提升用户黏性,他们肯定很希望用户在喜马拉雅Fm里上传自己的录音作品,那么必须做到足够的显眼。

  我们对这个界面进行高斯模糊处理,发现视觉焦点就在这个“录音”按钮上,所以“突兀”算什么?就怕你不突兀呢!

Image title

 

  “一个”是我个人很喜欢的应用,它的界面中除了必要的配图,其余所有icon和按钮使用的都是线状元素,给用户一种非常清新淡雅的感觉,这倒也很贴合这款产品的气质。

Image title

 

  对于一款产品来说,设计师的职责是非常大的,不应该像现在这样仅限于美工层面。从整个产品的角度来说,设计师要准确的定位目标用户群,根据目标用户群的喜好来确定界面设计风格,具体到每个界面中设计师要考虑各个功能的优先级排布。不要怕麻烦,你能做的事情越多,你的“可替代性”就越低,所得的报酬就会越多。

  选择

  喝完了鸡汤,接下来我们回到正题。再来说按钮组中有三个或者三个以上的选项的时候我们应该怎么处理呢?

  其实这种出现多个选项的按钮组样式我们可以看成是单选/复选功能的一个变形。只不过现在传统的单选/复选的样式很难满足当前的设计需要,用户渴望更加新颖多变的按钮样式。特别是选项过多的情况下,按钮的优势就凸显出来了。

Image title

 

  那么我们再回到之前的那个问题,“按钮组排布的时候是组合在一起好还是分开好?”对于这个问题,我是这么认为的:分开的按钮样式具有更强的适应性,可以换行,也可以滑动。组合按钮样式一般都要全贯通,适合展示信息层级较高的功能。总结成一句话:如果选项在一屏的宽度中可以展示完全,那么组合在一起和分开的区别并不是很大,但是一旦选项过多需要用户滑动和换行才能浏览完的时候,分开的样式更加适合。

Image title

 

  单选/复选都是供用户进行选择操作,其实还有一个组件跟单选/复选很相似,那就是下拉列表。当选项过多时,用户可以使用下拉菜单展示并选择内容。下拉列表的优势在于节省了界面空间,但是用户想要看到全部的选项必须要点击出下拉列表,增加了操作步骤,而且会对界面中其他内容造成遮挡。所以当你的界面元素不是很多的情况下,我的个人建议是尽量使用单选/复选按钮。

Image title

 

  总结

  以上就是我对按钮组的使用场景做的一个总结,希望可以给大家带来一些帮助。

扫一扫关注A5创业网公众号

扫一扫关注A5创业网公众号

责任编辑:西瓜

相关文章

  • 如何设计一个好LOGO?LOGO设计网让LOGO设计不再难!

    LOGO是让品牌呈现在用户面前的最好形式,通过LOGO,用户可以快速地识别公司和品牌,因此拥有一个让人过目难忘的LOGO是品牌营销的重要方式。LOGO的形状、颜色、形式,每一个元素都直接影响人们对他的印象,那么什么样的LOGO才能深入人心,起到很好的宣传效果呢?

  • 如何优化操作流程,提升用户体验?

    关于提升用户体验的方法论非常多,其中一个比较常见的就是简化操作流程。我们对此非常熟悉,但是我很少看到有文章系统的去论述该如何去简化操作流程。这里我就做一个简单的分析,如果大家看完之后有所收获或启发,不胜荣幸。

  • 在设计APP签到功能的时候,我在想什么?

    什么是签到?让我们先从表象理解:签到就是用户每天在APP内使用此功能,并得到系统给予的奖励。签到功能,用好了能够有效的促活,用不好的话只是一个增加应用包大小的鸡肋功能。怎么设计一个高效的签到功能呢?这篇文字记录了我的思考,希望能对你有启发。

    标签:
    app设计
  • 抖音播放主页交互设计分析

    众所周知,交互设计是产品经理的必备技能,对一款产品进行交互设计分析,也是产品经理的日常工作之一。那么对于互联网产品来说,我们应该如何对其进行交互设计分析?选取的维度,关注的重点又有哪些?下文我以抖音播放主页为例,说说我的看法。

  • 交互设计师在全流程设计中,有哪些注意事项?

    在整个设计过程中,我们有标准化的设计流程。据我了解:很多大的设计团队流程都是一样的,这里不做过多讲解。在具体的项目中我们经?;崤黾髦指餮睦?,我们如何克服困难帮助业务成功?如何在协同业务的全流程中利用体验的视角洞见机会,让设计的价值最大化至关重要?

    标签:
    交互设计师
  • 理财产品中,体验金的设计与分析

    理财产品,从推广营销活动开始,用户一层一层流失掉,到最后,投资的用户所剩无几,转化率可想而知。这也是困扰从业者普遍的问题。如何使新用户成功转化为投资用户,成为关键一环。众所周知,在这个线上流量枯竭的时代,互联网理财产品如今获取一个真实有效投资用户的成本相当高。尤其是和金钱挂钩的理财产品,与用户建立信

  • 在设计过程中,有哪些不容忽视的交互设计要点?

    本文总结了一些在交互设计中重要的理论要点,并针对各理论要点展开描述相应的设计策略。主要涉及视觉感知、认知摩擦、认知负荷和情境认知四个方面。视觉是人类认识自然、了解客观世界的重要手段,同时也是理解人类认知功能的突破口。当人们开始观察外界物体时,视觉系统将剌激以图像的方式传递到大脑,并通过大脑的视觉皮层

    标签:
    交互设计
  • 氛围独特情绪深沉的深色系网站,设计上有什么讲究?

    在设计中,情绪的传达和氛围的营造通常是要看设计项目的目的是什么,而不同的配色和不同的元素组合,往往能够呈现出截然不同的风貌。相比之下,深色系网站常?;岢氏殖龈捞氐姆瘴?,传达出更为复杂多样的情绪。虽然这样的情绪并不一定是正面和向上的,但是好设计总归是让人过目难忘的。想要借助深沉的色调来创造情绪相对

  • 浅色还是深色?教你选择合适的界面配色方案!

    我们的日常生活总是会面临无数的选择,尤其是在职业生涯中,我们必须考虑到很多的反对和挑战,更好的设计解决方案不仅是基于建议,而且是以事实、经验和知识为基础的。今天我们要讨论的是UI设计师在工作中经?;嵊龅降囊桓鱿钅浚憾杂谟没Ы缑胬此的母雠渖桨父?,是浅色还是深色?

    标签:
    界面设计
  • PC端表单设计的研究:如何设计一个优秀的表单页面

    最近身边的一些小伙伴,总会遇见B端设计工作,对于这种偏后台设计的B端设计,总会有大量的表单设计需要做,结合以前自己也有过不少表单设计的工作,在这里给大家分享一下自己对于PC端表单设计的研究,聊一聊表单在PC端中的运用。

    标签:
    表单设计
小程序

热门排行

信息推荐

扫一扫关注最新创业资讯
澳门葡京赌场官网 葡京网上赌场 葡京开户