App按钮如何设计才合理?这些设计学问你还不知道

每个 app 里面会遇到「按钮」,在发展的过程中,按钮是怎样变化的?怎样设计按钮才合理?AppSo(微信号 appsolution)这篇文章便为你解答。


每个 app 里面会遇到「按钮」,在发展的过程中,按钮是怎样变化的?怎样设计按钮才合理?AppSo(微信号 appsolution)这篇文章便为你解答。

App按钮如何设计才合理?这些设计学问你还不知道

按钮是交互设计中一个常见基本元素。尽管按钮看似一个非常简单的用户界面(UI)元素,在过去几十年,其设计也经历了不少发展和演变。但万变不离其宗,对于按钮的用户体验(UX)设计仍关乎于辨识度清晰度

本文简要概述了按钮设计的发展演变,并提出用户体验好的按钮设计应遵循的最佳实践。

App按钮如何设计才合理?这些设计学问你还不知道

一、按钮设计的发展演变

1. 3D 按钮

自初以来,操作系统按钮一直通过浮雕和阴影来区分外围背景。这种设计方案是基于一个简单原则——通过边框、斜度和阴影使按钮在背景内容衬托下显得醒目,这样就方便将其识别为一个可点击的元素。

App按钮如何设计才合理?这些设计学问你还不知道

注意按钮是如何凸显的

Windows 95 对话框使用了厚重阴影和高光来制造 3D 效果,以辅助用户识别视觉层次,并了解哪些元素是交互元素。

App按钮如何设计才合理?这些设计学问你还不知道

凸显的交互元素看似能(通过点击鼠标)按下去

2. 拟物按钮

就数字设计而言,拟物化是指 UI 元素的设计与现实物体相像的一种方式,它可以是对现实物体材质外观的复制,也可以是模拟真实按钮使其看似像实物按钮。拟物化设计借助用户对某物的先验知识使其理解如何去使用新的交互界面。

下图中对计算器的拟物设计即通过用户对计算器实物的先验知识,从而帮助用户在数字环境中更好地去认识和使用它。

App按钮如何设计才合理?这些设计学问你还不知道

图片来源:theultralinx

3. 扁平按钮

如今 UI 设计的一个重大转变是逐渐从拟物化设计向扁平化设计过渡,设计效果也不再有 3D 效果。

与拟物化设计不同的是,扁平化设计被视作探索数字媒体的一种方式,其不再试图去「还原」实物的材质外观。因此,其摈弃了起初用来告诉用户哪些元素可点击/可操作的厚重视觉线索。

App按钮如何设计才合理?这些设计学问你还不知道

整齐排列的扁平按钮

App按钮如何设计才合理?这些设计学问你还不知道

苹果 iOS 系统的计算器 App

当整个用户界面都是扁平化设计,用户如何知道按钮在哪里呢?

用户仍需要通过视觉指引(帮助用户理解如何使用界面的可感知线索)来知道页面上可点击/可操作的地方。因此,颜色在扁平化设计中相当重要,因为若使用扁平按钮,这些颜色将是帮助用户识别按钮的主要标识符之一

4. 近扁平化设计及浮动操作按钮(FAB)

近扁平化设计是在原扁平化设计(或超扁平化设计)基础上的一种演变。这种设计几乎是扁平化的,但又在设计中通过细薄阴影、高光和叠层在用户界面制造出立体效果

Google 的质感设计(Material Design)语言即是一个按正确次序使用这些立体效果的近扁平化设计案例,它创新出一种全新按钮:浮动操作按钮(Floating Action Button,简称 FAB)。

这些按钮置于用户界面顶层,并吸引用户进行进阶操作(Promoted Actions)或主要操作(Primary Actions)。它们作为行为号召按钮(用以促进进阶操作),是用户在某特定屏幕上最常用的单一操作。

Google Maps 是正确使用 FAB 的一个典例,用户在地图上最主要的操作行为是找到方向,所以Google FAB 的设计方式就能说得通。

App按钮如何设计才合理?这些设计学问你还不知道

Android 系统上的 Google Maps

另一个在 UI 设计中使用 FAB 的范例是 Evernote 。尽管 Evernote 的 UI 几乎近扁平化,其在导航栏添加了细薄阴影,同时也使用了 FAB (新建笔记)。

App按钮如何设计才合理?这些设计学问你还不知道

安卓系统上的 Evernote 应用

5. 虚拟按钮

2014年,UI 设计领域的主导性演变趋势之一就是虚拟按钮的应用。虚拟按钮是有基本形状的透明或中空按钮,按钮形状通常是矩形或正方形

虚拟按钮也被称为「中空(empty)按钮」、「裸露(naked)按钮」或「镂空(hollow)按钮」。虚拟按钮的边框通常是一条非常细的线条,框内即纯文本。

App按钮如何设计才合理?这些设计学问你还不知道

普通设计(左)和聚焦设计(右)

虚拟按钮最初始于扁平化设计的发展演变,当苹果发布 iOS 7 后就变得非常流行。苹果 iOS 界面有很多虚拟按钮的应用。

简约的矩形方框加上框内整洁的字体,使得扁平化界面看起来非常完美。

App按钮如何设计才合理?这些设计学问你还不知道

「Name」、「Release Data」以及「Featured」类似虚拟按钮。「GET」是虚拟按钮。

虚拟按钮通常看似行为号召(Call to Action, 简称 CTA)按钮,同时展示其清爽外观。Specular 网站是应用此类按钮的一个很好的范例。

App按钮如何设计才合理?这些设计学问你还不知道

Specular 网站上使用了扁平化按钮「立即购买(PURCHASE NOW)」作为主要操作按钮,同时使用虚拟按钮「浏览(TAKE TOUR)」作为次要操作按钮。

二、按钮设计的基本最佳实践

在开始设计按钮之前,要考虑你的设计如何向用户传达出可供性(Affordance,可供性就设计而言,其着重于物体与用户之前的关系,以及其达到的效果和提示作用)。那用户如何将交互界面元素理解为按钮呢?鉴于此,在设计中你更应该:

此外,还要确保在所有界面交互控制中保持一致性,这样用户就能在 app 或网站的每个页面上从 UI 元素中识别出按钮

1. 外形

稳妥的方式就是根据网站或 app 的风格来设计方形按钮或圆角方形按钮。矩形状按钮很久之前就应用于数字世界的设计,用户对此也非常熟悉了。

据研究显示,圆角能促进信息处理,并吸引用户聚焦到元素正中央

App按钮如何设计才合理?这些设计学问你还不知道

圆角矩形按钮

当然,你还可以加入更多创意元素,使用如圆形,三角形甚至自定义形状的其它形状,但要注意,使用这些形状可能会更加冒险。

App按钮如何设计才合理?这些设计学问你还不知道

FAB 示例

2. 尺寸和内边距

在帮助用户识别按钮元素时,按钮的尺寸大小也非常重要。你需要考虑按钮元素的尺寸大小,同时还要考虑可点击元素间的内边距。

尺寸。当你使用轻击(tap)作为 app 或网站的主要输入交互方式时,你可以参考麻省理工大学触击实验室(MIT Touch Lab)的研究,从而为你的按钮设计选择合适的尺寸。

根据 MIT 的研究发现,指垫的平均宽度在10-14毫米之间,指尖的平均宽度在8-10毫米之间。因此,10×10毫米是触屏按钮最小尺寸的一个好选择。

App按钮如何设计才合理?这些设计学问你还不知道

图片来源:uxmag

这个建议本意不是让那些易按错的按钮更加完美,而是尽可能将按错次数最小化到实用水平,同时,还要平衡其他重要特性(比如屏幕信息密度)。

App按钮如何设计才合理?这些设计学问你还不知道

图片来源:ux.stackexchange.com

当鼠标和键盘作为主要的输入交互方式时,对按钮尺寸的要求则可以稍微降低,以便于适应密集型的用户界面。

内边距。按钮间内边距是为更好地区分各交互控制按钮而设计,同时给用户界面足够多的空间。

App按钮如何设计才合理?这些设计学问你还不知道

Google 的 Material Design 对话框中扁平化按钮间的内边距

3. 标签

你应该为按钮选择一个合适的标签。选择标签的方法应该基于最小惊讶原则(principle of least astonishment):如果某必要按钮有个高惊讶因素的标签,那就要考虑更换这个标签了。

经验法则——按钮的标签要体现其功能。添加一条清晰信息来告知用户在点击/轻击后会发生什么,或者通过行为动词提示用户某界面元素的功能。

下图示例是在 Dropbox 网页版上传文件的一个对话框,该对话框中有一个带有「棒极了!(Awesome!)」标签的单独按钮。这个标签对普通用户来说可能有困惑性,因为它并没有说明点击该按钮后有什么用。

App按钮如何设计才合理?这些设计学问你还不知道

图片来源:uxmatters

4. 颜色

在调色板上选择颜色时,要思考颜色可以怎样帮助用户导航和理解该行为的。

使用颜色和对比来帮助用户查看和了解 app 的内容,与正确的元素进行交互,并理解相关行为。

下图示例中,我们使用了红色按钮来标识一个潜在的毁灭性行为(该按钮标签「UNINSTALL」意为「卸载」)。

App按钮如何设计才合理?这些设计学问你还不知道

注意「卸载(Uninstall)」动作按钮是如果通过颜色和对比更吸人注意的。图片来源:Material Design

使最为重要的按钮(特别是行为号召按钮)看似最重要的。例如,亚马逊使用了对比性较强的黄色按钮来吸引用户采取正确的行为。

App按钮如何设计才合理?这些设计学问你还不知道

亚马逊的CTA按钮「加入购物车(Add to Cart)」使用了对比颜色

结束语

所有按钮(比如经典按钮或者像虚拟按钮或浮动操作按钮等现代按钮)的作用都是指导用户实施你想让他们去采取的行为。

把网页或者 app 当做一个繁忙的用户发起的对话,那么按钮对这段对话就非常重要——流畅的交互能保证对话正常进行,而小故障(比如找不到正确的按钮)就会引起中断,更甚是故障。

谢谢!

 

作者:Nick Babich,软件工程师,关注UI和UX。

译者:Jorri

本文译自Buttons in UI Design: The Evolution of Style and Best Practices

译文地址:http://www.ifanr.com/app/712941

本文由@AppSo 翻译,微信号:appsolution

版权:人人都是产品经理遵循行业规范,任何转载的稿件都会明确标注作者和来源,若标注有误,请联系主编QQ:419297645

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24850/

(0)
CatherineCatherine
上一篇 2017-05-09 21:49
下一篇 2017-05-09 23:40

相关推荐

  • 运用5个色彩技巧,设计更优质的网页用户体验

    色彩几乎是所有设计体系中不可忽略的组成部分,而在网页设计中,色彩本身所发挥的作用并不单一,除了最基本的着色构成色彩搭配的作用之外,色彩能够通过对比创造视觉焦点,构建信息层次,影响用户情绪,甚至引导访客的行为。所以,在玩转配色本身之外,进阶的色彩运用技巧还有很多。

    2017-05-06
  • 设计原则:视觉重量和方向

      web页面上的每个元素产生一种视觉力量,吸引了观众的眼睛。 力就越大,眼睛是吸引了。 这些力量似乎也作用于其他元素,传授他们潜在的运动和视觉方向建议,你应该下一个。 我们把这个力称为视觉重量和视觉感知方…

    2014-12-16
  • 美术丨创意Game可用性微交互设计:视觉空间微交互设计

    文章导言(悄然你的特别吸引了我)有些设计看起来简洁,有些设计看起来杂乱无章;有些设计让您快速找到想要的信息,有些设计却让您置身于迷宫之中;为什么要绞尽脑汁写这些细节上的差异?用户在使用产品时是怎么样的心理活动?这将是我分享的一些个人见解。前言:致敬设计学研书籍作者们,有机会写《创意Game可用性微交互设计》总结。如题我们将进行一场有趣的游戏可用性微交互设计讨论。考虑并不是写一本书来高谈阔论,而交互又无处不在: 版面、颜色、纹理、动画、文...

    2018-02-28
  • 招聘 | 年薪百万不是梦,八爪鱼一大波高薪职位与伯乐奖在等你

    八爪鱼又开始招人啦如果你对大数据充满热情技术与才华兼并就赶快行动吧行业销售总监(政企)企)N15k-30k /深圳 / 经验3-5年 / 本科及以上 / 全职>>>岗位职责:基于公司的大数据产品、资源和技术,面向企业/政府等客户,提供数据采集软件、数据分析产品,数据服务,大数据解决方案等产品或服务;销售团队的人员招聘,管理及考核淘汰工作;完成客户需求的挖掘,商务谈判,项目回款工作;负责外部销售渠道和资源的对接,开发与维护;配合市场运营部...

    2018-03-15
  • 六个步骤,细说电商banner图设计之色彩的奥秘

    我们常常会说到做设计需要知道三大构成(色彩构成/平面构成/立体构成),设计又可以分很多个类别,比如网页设计/UI设计/电商设计/室内设计/工业设计等等,那对于电商设计有没有专门的三大构成呢?至今好像没有看到,所以我想尝试着梳理一下我脑袋里的知识点,专门讲解一下三大构成在电商设计中的运用,而今天我先从色彩在电商设计中的运用开始说起。

    2017-05-21
  • 如何完美碾压用户体验职位面试

    作者: Patrick Neeman |  翻译:Shea ,校审:Ariel本文长度3082字,建议阅读5分钟当你成功进入了电话面试或者面对面面试的阶段,这就意味着你已经通过了最艰难的考验:你已经具备了在该公司工作的技能。现在要被评估是否具备软实力以及能否适应公司的文化。在上次西雅图用户体验组见面会主持的谈话之后,我发现很多公司没有在面试中明确表达对面试者的期望,而且并不知道如何去面试。面试的过程其实是个自我展现的机会,作为设计师来说...

    2018-02-07
  • 交互设计的进展及未来趋势

    作者:Terry Cao   2015-5-7 10:05am    发表于DESIGN & DEV      译者:小媛 作为一种无形的设计,交互设计一直以来都是UX中最难的。以往,用户会被简单的交互吸引,如一个意料不到的动画。但现在的动画效果已…

    2015-10-16
  • 交互设计与心理学的关系

    具体联系什么的大家看专业书籍吧,我从另一个角度说一下我的理解吧。 每个学科/专业的产生都是有它的历史使命的,为什么一定是这个时候,为什么一定诞生在这个领域,为什么会如此发展······类比一下其它学科/专业,…

    交互设计 2015-09-11
  • 逐渐兴起的对话式设计,你了解多少?

    对话式交互将逐渐改变人类的生活和习惯,未来的生活是怎样的正是我们所兴奋和期待的:)我以为使机器能与人沟通的关键是发展更好的对话系统。但我这想法并不对。成功的对话需要共通的知识和经验。它需要对四周环境、前后脉络、导致目前情况的历史背景以及当事人众多不同的目标和动机等都要有所领悟。现在我认为这正是当今科技的根本局限,这种局限阻碍了机器全面、拟人化地与人互动。人与人之间要建立共通的了解本来就很难,那我们如何寄望于机器建立这种关系?——唐纳德·A·诺曼

    2017-05-19
  • 无障碍的交互设计,需要做到这7点

    先从字面上来理解何为“无障碍”。生活中许多场所中,除了供给正常人使用的区域外,还有一些针对工作人员、特殊人员(残障人士、老弱病残、孕妇等)的无障碍通道/设施,比如:机场、地铁、厕所、展会等。无障碍设施/通道是能够兼容普通人员和特殊人员共同使用的,且相对来说使用起来更为便捷、直接、且省时省力。-交互中的无障碍需要考虑到哪两方面?-那么交互中的无障碍又有哪几层含义呢?从常规的使用人群来看,首先要满足普通人群使用。其次,当一个优秀产品具有一定...

    2018-03-31