那些让人抓狂的图形按钮

标签: 图形 按钮 | 发表时间:2013-02-22 12:02 | 作者:kaler
出处:http://www.geekpark.net/

作者头像
作者: shark0017 / 产品观察家
krkr视频教程作者 科技爱好者 关注产品体验 极富预见性
[核心提示]作为图形化界面的重要组成,图形化控件在软件设计中无处不在,相比起电脑软件界面,移动设备中的图形化控件出现频率更高了。作者针对当前图形按钮设计设计的问题,提出了自己的三点原则。

作为图形化界面的重要组成,图形化控件在软件设计中无处不在,相比起电脑软件界面,移动设备中的图形化控件出现频率更高,样式也更加丰富,抽象、花哨的图片按钮也不断地出现在我们的应用中。图形化控件作为图标的子分类,仍旧要遵循简单、直观、准确的准则,但就目前的应用界面来看,越来越多的图形化设计已经偏离了这些基本原则了。

图形化控件

为了说明方便下文中的“图形化控件”简称为“图片按钮”,使用环境为移动端的非游戏类应用

图片按钮广义上可以理解为以图片表示其特定功能的按钮,具体指的就是下图中的按钮:

无论是我们在刷微博还是发人人,或是在浏览网页、观赏视频,图片按钮总会出现在我们的视野里,同时它也在时刻引导着我们的操作。我们使用一个新的应用也都是从熟悉图片按钮开始的,因此可以说图片按钮的设计直接影响到一个应用的质量。好的设计可以实现开发者和用户的双赢,而一个差劲的设计会直接增加应用的使用难度,从而影响到应用的推广。

图片按钮和图标同理,其功用在于建立起软件界面与真实世界的一种隐喻,抑或映射关系。用户通过这种隐喻,自动地理解图标背后的意义,跨越了语言的界限。但是,如果这种映射关系不能被用户轻松并且准确地理解,那么图标会造成用户的理解困难,直接降低了用户体验。可见,图片按钮的设计十分重要,糟糕的图片按钮还不如用文字按钮来代替,现在我们不妨来看看图片按钮存在的好处与坏处。

明显的好处

  • 突破语言障碍。通过图片可以使用户猜知该应用的使用方式,同时容易开发多语言版本。
  • 节约屏幕空间,减少屏幕信息量。用直观的图片按钮替代传统的图文按钮,可突出屏幕内容。
  • 使应用富有个性化,更具时尚气息。相比起呆板的文字按钮,使用图片按钮的应用更加生动,也使得用户更具有点击的欲望。

带来的坏处

  • 学习成本大。一些抽象的图片很难直观的表现其功能,加大了应用的上手难度。

  • 设计风格迥异,同类应用中也无法达到一致的操作体验 ,带给用户焦虑。

  • 重复图形众多,没有固定映射。不同应用的同种功能有多重图片按钮对应,理解负担大。

图片按钮的问题

当我们上手一个应用,做的第一件事情就是熟悉图片按钮。

目前的应用中有着大量风格不一、样式迥异的图片按钮。与我们的直觉相反,一些研究显示图标界面与文本界面的比较中,图标界面并没有体现出明显的优越性,一个主要原因就是文字和意义的映射是直接的,而图标与意义的映射却不一定是最直接和明显的。

所以我们或多或少的都遇到过这样的情况:必须去读程序初始界面的一段帮助后才能知道某些图片按钮的意义,在之后的使用中我们还要不断的强化这种认识,直到熟练的使用该应用。

但是移动端的应用不同于电脑软件,我们经常是在走动或是嘈杂的环境中进行使用,我们没有心情也没有耐心去强迫自己去适应那些我们并不理解的图片按钮,在快节奏生活中这“第一印象”很可能会直接定义应用的可用性。某些时候我们也许会迫使自己去习惯某种应用,这时我们就需要花费几秒钟甚至更长的时间去猜测某些图标的作用,而且还很可能猜错,这些错误的理解会带来错误的操作,错误的操作导致糟糕的结果,这绝非好的用户体验。

我们最早上手的应用是什么呢?答案是系统应用,我们总会最先熟悉系统应用,所以系统应用中的图片按钮在用户的脑中是“先入为主”的,当第三方应用出现时,用户仍将延用先前形成的思维定势进行理解,如果二者的图片按钮出现了较大差异,自然会出现理解困难或理解偏差,让用户焦躁不安。

列表按钮

举一个在 iOS 平台上比较常见的图片按钮,上图圈中的那个图片按钮在:

  • “音乐”中的作用是显示歌曲列表
  • “扫描全能王”应用中就成了设置图片的排列形式(平铺/列表)了
  • “多看”里面这个图片按钮是显示书籍目录界面
  • 更加奇怪的是在 “搜狗浏览器”中,搜狗直接把系统给出的more(标准图片为三个并列的点)按钮直接替换成这个图片,功能成了显示更多。

这一个“列表”按钮在不同的程序中被赋予了不同的含义,如果是 iOS 用户对于这个图标的理解可能是“列表”,而安卓用户很可能会理解为“菜单”,当我们认定的某种功能没有按照我们的预期工作,大脑会认为自己错了,随之而来的就是焦躁不安,我们的大脑渴求一种稳定的模式,试想如果多种应用特定的图片按钮有着一致的功能,那是一件多么美妙的事情啊!

移动端的应用程序成千上万,所有图片按钮照搬系统标准图标也不现实,所以很多开发者自己为应用设计了很多风格迥异的图片按钮,其带来的问题就是在同类应用中图片按钮和功能映射不唯一,产生的混乱。

无痕浏览

举个浏览器的例子,上图是三个浏览器的界面,无痕浏览这个功能在三个浏览器中用了不同的控件,这就出现了多种图片按钮映射到了单一功能,为了不造成用户理解混乱,前两个浏览器用了图文按钮,最后的 chrome直接用了文字按钮,可见在这里图片按钮并没有展现出便于理解的优势,反而我们会觉得 chrome的文字按钮更加直观。

开发者用图文按钮的目的很明显,就是为了让我们在不熟悉应用的情况下可以通过文字来知道按钮的功用,最后达到脱离文字通过文字上方的图片来快速操作。但是调查发现在使用一段时间后,用户仍旧习惯去阅读文字来操作,甚至不记得文字上的图片内容,可见,看似“图文并茂”的按钮并不讨用户喜欢,反倒增加了屏幕的信息量,给用户带来了不适。

如何做出优秀的图片按钮

尽管我们能快速识别出某些特色的图片,比如 表情,但有些图标,在没有文字标注的情况下是十分费解的,比如新浪微博的 地球按钮。当我们在三秒钟内无法准确理解或联想到图片的含义时,我们会觉得痛苦,我们都想要简单的图片按钮!下面是笔者的几点想法。

微博人人

遵循标准,舍弃帮助

相比起电脑软件,移动端应用切换更频繁,用户不愿意停下来思考按钮的意义,更不愿意去读初始界面的帮助,所以使用系统提供的标准图片控件是必要的。开发者要理解标准图片的特定含义,切不可自行联想、一图多用,虽可用相似图片代替,但万不可去掉细节自行设计。

遵循标准的最终目的是让用户使用熟练了一个应用后,切换到另外一个应用时能够很轻松的推测出各种功能,不需要费神理解。可以类比下,厕所的男女标志都有所不同,但图片都具有很高的相似度,并且多加以颜色区分,如果有一家餐馆舍弃这个标准,自己设计了蝙蝠侠和美羊羊的轮廓作为男女厕所的标志,会出现多么混乱的情况啊。

音乐播放器

直接简单,快速记忆

最好的设计是消失在生活中的,简单的图标可以带来伟大的用户体验。一些费解的图片按钮会让用户界面变成一团浆糊,而那些简单可预测的控件能给用户带来愉悦。

比如要设计一个定位图标,设计师可能会想到指南针、卫星,但这些图片结构复杂、细节众多,对于一个小型按钮来说是不合适的。而简单的“图钉”按钮视觉直观,好记,即使它对于定位这个词较远,但是用户可通过一次学习即可明确知道这个图片按钮表示的是什么。这种直接简单的图片即使没有指南针那么生动,但它能大大减少学习成本,提高应用的可用性。

文字注释,巧用图片

因为图片的视觉元素众多,用户的联想意义也有所不同,所以在保证图片简单化的前提下添加注解文字是很有必要的。图文按钮大大减少了用户的认知负担,这对于诠释独特的图片按钮有一定的作用,至于如何运用就请开发者和设计师衡量了。

期待

当一款新的应用出现在设备上时,我们总会满怀期待地打开它,希望这个应用能给我们的生活带来便利,能展现出自己特有的功能,但更多的时候我们会先被初始界面的帮助和奇怪的图片按钮折腾的兴趣全无,我们期待着那些以熟悉的图片按钮和最简单的界面给我们带来最优秀使用感受的应用。喧嚣终归于寂静,再华丽的图片也不及标准控件的魅力,开发者多用点心,用户就少操点心,希望以后的应用能少些学习成本,多些美妙体验。

最后我想借早期 iPad 的一句广告语做结尾

You already know how to use it.

极客观察均为极客公园原创报道,转载请注明原文链接。

原文地址: http://www.geekpark.net/read/view/173001

关注极客公园,即时获得最新内容: Twitter | 微信:极客公园 | 新浪微博 | 花瓣网 | 人人小站 | Google+ | 点点

相关 [图形 按钮] 推荐:

那些让人抓狂的图形按钮

- - 极客公园-GeekPark
krkr视频教程作者 科技爱好者 关注产品体验 极富预见性. [核心提示]作为图形化界面的重要组成,图形化控件在软件设计中无处不在,相比起电脑软件界面,移动设备中的图形化控件出现频率更高了. 作者针对当前图形按钮设计设计的问题,提出了自己的三点原则. 作为图形化界面的重要组成,图形化控件在软件设计中无处不在,相比起电脑软件界面,移动设备中的图形化控件出现频率更高,样式也更加丰富,抽象、花哨的图片按钮也不断地出现在我们的应用中.

Facebook已读按钮 – 它不是按钮,点击请小心

- SotongDJ - 36氪
在Facebook的F8大会上,大家的注意力都被新版的时间线个人档案页面所吸引,可能有人意识到之前传言的已读、已看、已听按钮却并没有在这次大会上发布. 不过通过安装一些品牌报纸的社交阅读应用,读写网的Richard MacManus发现了一些端倪. 假如你安装了华盛顿邮报在Facebook上的社交阅读应用,当你在阅读一篇文章时,无论你有没有点击Like按钮,无论你有没有点击推荐按钮,系统都会自动将你现在阅读的内容发送到Facebook上.

图解添加Google+1按钮过程

- Genius - cnBeta.COM
据国外媒体报道,Google今天在其搜索结果页面中推出了社交搜索“+1”按钮,但该功能目前只向部分人开放. 要使用该功能,首先必须在 https://profiles.google.com/中建立Google个人档案.

电商网站的购买按钮

- Fay - 所有文章 - UCD大社区
一般上电子商务网站买东西的用户分三种:. 这样的需求反应到产品页的购买按钮上,我们一般会看到购买和收藏两个按钮,而购买又可以分为立即购买和加入购物车两种. 对于第一种用户来说,你按钮做的再大再合理也不关他的事,因为他压根就不想买. 对于第二种用户来说,购物车按钮或是收藏按钮对他来说是优先选择的按钮,因为他过一段时间才买.

CSS3 按钮 一分钟教程

- Yangan - Poboo
作为网站设计师,很多时候我们要用到按钮,作为链接或者是表格提交,如果还在使用旧式的默认按钮(button), 已经不能符合网站发展趋势,这里给大家一个很小的教程,只要短短一分钟,你就可以掌握CSS定义按钮的技巧,通过举一反三,做出自己喜欢的css按钮.. 现在开始,我们先完成一个基本的按钮设计. 接下来 我们完成圆角设计, 我们要感谢css3, 因为完成圆角 只需要3行代码 就可以搞定.

Google +1 按钮明日推出

- HRS - cnBeta.COM
Google今天官方宣布“+1按钮”功能将于明日正式上线,任何网站都可以添加这一社交代码来获得用户的推荐,同时Google Analytics工具也开始添加有关+1按钮的分析数据,帮助网站运营方统计受欢迎的信息,其功能和作用跟Retweet和Facebook的Like一样.

11个CSS3按钮制作教程

- Ben - 我爱互联网
css3作为一个新技术,尽管某些浏览器不支持,但在过去的6个月里,css3已然吸引了设计师和Web开发人员的注意力. 实际上,有了CSS3,可以创建更好网站. 在本文,Jean-Baptiste Jung 整理收集了11个在CSS3中制作漂亮按钮的教程. 用CSS3和RGBA制作超酷按钮. 用CSS3制作Google风格按钮.

微集分:个性化分享按钮

- - 天涯海阁|Web2.0Share
微集分是新一代的社会化分享按钮,可以快速、个性化的分享、收藏. 你可以把它添加到浏览器上(浏览器工具),也可以把微集分按钮添加到网页中(站长工具). 目前提供了 Chrome、Firefox、360等各个浏览器的插件,此外还提供了Wordpress、Discuz等各种平台的插件. 可以让站长让用户方便的收藏网页中的内容元素.