交互设计控件之按钮设计

一.主按钮和次按钮

很多按钮是成对出现的,比如“确定”和“取消”。一般情况下,按钮会有主次之分,一个按钮是我们期望用户去做的,另一个按钮是在特殊情况下才去做的。

主次按钮要有所区分,最简单的做法就给它们用上不同的颜色——主按钮用显眼一点的颜色,而次按钮用淡一点的颜色。

在按钮的标签上,应该尽可能地用清晰不易混淆的字眼,而不是简单地 “OK”,“YES”,“好”,“不”。

如果主按钮执行的是一种积极的行为,比如保存。这很简单,给主按钮一个更显眼的颜色即可。

但如果主按钮执行的是一个消极的行为,比如用户要删除一个文件,需要对这个删除进行确认。你可能会想将按钮的颜色反过来就好了,比如下面这样:

但有一个更好的做法,我们只提供一个主要按钮(另一个以另一种形式表示,比如一个可点击的链接,而不是同等的按钮),但这个按钮的标签写上提示信息。

这样用户到这一步的时候,注意力会集中在这仅有的一个按钮上,并能够注意到这里的提示信息(如果你想提示警告信息写在弹框内容里,用户极有可能没看就点击了按钮)。

二.底部导航按钮

APP的导航是很重要的部分,用户需要能够知道自己现在在哪里,有什么地方可以去。

PC端一般会将导航放在头部或者侧边,而根据移动端的操作行为,将导航放在底部对移动端是一个更好的做法。

关于移动端的底部导航设计,有几个原则可以参考借鉴。

1.只使用3~5个最重要的导航按钮。

1,2个就太少了,如果只有1,2块主要内容,那根本不用导航栏,直接切换即可。而如果导航按钮有6,7个之多,则会让导航太密集而不易操作。5个是导航按钮的极限。

2.要让用户知道自己现在在哪里:

每个导航按钮都要有状态切换——被点击进入时显示高亮(或者颜色改变)的状态,而点击了其他的导航按钮后,切换回原本未被点中时的状态。

需要注意的是,导航按钮应该只使用2种颜色——即未选中和已选中。不要使用多种颜色,否则用户也无法区分当前的位置。如下图,左边是错误的做法。

3.标签问题

导航按钮需要有标签,而但凡是标签,规则都只有一个——短而清晰。不要太长,不要长到换行,更不要为了不换行而省略。

下面这些都是应该避免的。

4.红点提示

如果你想要给用户提供额外的信息,比如提示用户某个栏目里面有新消息,你可以在导航按钮上面加上红点。

三.Tabs

Tabs 是一种用来切换相关内容的组件。

tabs和导航按钮有点相似,都是切换内容。但不同的地方是,导航按钮切换的是不同类别的内容;而tabs是在相同类别的内容之间切换。

所以当你需要对内容进行分组的时候,你就可以使用tabs:

tabs的另一种形式是scope bar ,它一般用于分类筛选。比如apple store就使用了scope bar来对应用进行免费和收费的筛选。

四.按钮设计

按钮是最重要的交互控件,在设计按钮的时候以下的建议可以作为参考。

1.让按钮看上去像一个按钮。

用户要够第一眼就发现,并知道这是一个可以点击的按钮,尤其是在那些需要用户完成输入之后确认的地方。

在移动端,有一个需要特别注意的是按钮的大小。移动端用户的操作是用手指来进行的,移动设备屏幕的限制,按钮不可能做得很大(也不美观),但也不能太小,否则手指很难操作。大小的设计需要参考手指的触摸点大小。

一个比较糟糕的体验来自腾讯的应用宝。

腾讯的应用宝在更新应用的时候,可以直接点击“更新”按钮来下载并安装更新,如果你点击“更新”外面的整张卡片,就会进入该应用的详细介绍。但这个按钮非常难点,一不小心手指的触摸面积大了,就点到了卡片,进入了应用的详情页面。

必须小心翼翼地触摸,才能保证点击到“更新”按钮来下载APP。

所以,一定要注意按钮的大小!

2.按钮的标签

按钮的标签内容应该清晰地让用户知道点击按钮后会发生的事情。

3.重要按钮

如果一个按钮很重要,那你就必须让它看上去很重要——更突出的颜色,更中心显眼的位置,更强烈的提示,等等。

4.按钮的形状

一般情况下,按钮是一个矩形,或者两边带有圆弧的矩形。这是最让人熟知的按钮的形状。

按钮也可以是圆形,但使用的时候要十分注意。

有些扁平化的按钮形式在Android里也很常见。

如果你真的要使用,你最好先认真了解一下google 的 Material Design的设计规范。

原文发布于微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文发表时间:2017-04-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第10天:CSS初始化操作

       在写页面过程中,每个浏览器都会有默认样式,为了避免浏览器的样式兼容问题,我们会在样式开始部分对常用标签进行重置样式。这样我们在写样式时,就不会有误...

1382
来自专栏姬小光

姬小光前端小讲堂【第007期】- 切图大法之表格布局

前面几期中,我们已经了解到了前端开发的三板斧,即 HTML,CSS,Javascript。熟练掌握这三个基本技能,基本上就可以混口饭吃了。

1172
来自专栏Python爬虫实战

数字华容道03:首页创建

整个布局采用 QVBoxLayout (竖型布局)。最上方的“数字华容道”字样是一张图片,采用QLabel进行展示。下面几个选择难度的按钮和排行榜按钮采用 QP...

952
来自专栏编程

用JavaScript 代码来做,图片切换效果!

用原生的JS写动画效果的确是个很令人纠结的事情,倒不如直接用jQuery来写,亦或找一些jQuery插件。能力达不到的时候,为了工作进度,只能采取心有不甘的手段...

3225
来自专栏Coding+

制作一个标准 ICO 图标

ICO是Windows的图标文件格式,此格式图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体,并且还包含了一定的透...

5972
来自专栏九彩拼盘的叨叨叨

学习前端 第1周 第3天

724
来自专栏人云亦云

网页中内嵌字体

4366
来自专栏互联网杂技

手机网页布局经验总结

引言 众所周知,在当今移动互联网大行其道的现在,基本上所有的年轻人都是使用过手机去浏览一些网站的资讯或者使用过手机去购物网站支付买过东西,但是大家有没有想过这样...

4826
来自专栏iOSDevLog

sketch入门第1部分:画板和形状Sketch使产品设计变得非常简单。准备好了吗?转到第2部分

今年,我在旧金山举行的大会上担任用户体验设计课程的助教。我在互联网上搜索了绝对初学者的素描教程,但是没有提到任何覆盖所有基础知识而没有提到Photoshop。所...

1622
来自专栏木头编程 - moTzxx

CSS 控制鼠标划过,图片放大效果

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

1423

扫码关注云+社区

领取腾讯云代金券