iOS和Android规范解析——按钮

今天介绍的是按钮。按钮是设计的过程中,经常使用的一种控件。我们来看看Google的Material Design和苹果的设计规范都是怎么说的。


今天介绍的是按钮。按钮是设计的过程中,经常使用的一种控件。我们来看看Google的Material Design和苹果的设计规范都是怎么说的。

iOS和Android规范解析——按钮

Material Design Guidelines

按钮告知用户按下按钮后将进行的操作(疑似废话,,MD开篇就是这一句,好气哦)。我们可以把按钮理解为一个操作的触发器。按钮主要有以下五种:扁平按钮,凸起按钮,悬浮按钮,底部常驻按钮,下拉菜单按钮,开关按钮。下面我们来一一介绍。

扁平按钮

扁平按钮就是把文字用作按钮,如下图:

iOS和Android规范解析——按钮

文字按钮示例(图中红色虚线即为文字按钮)

行为:在点击扁平按钮的时候,按钮不会有升起的动作,但是它的背景会有一个从中间向四周扩展颜色的动效,如下图的第三个动画所示:

iOS和Android规范解析——按钮

扁平按钮的各种状态(动画)

iOS和Android规范解析——按钮

左:扁平按钮的各种状态(静态);右:按下扁平按钮时的状态示例

用法:扁平按钮一般用在警告框中,推荐居右对齐。一般右边放操作性的按钮,左边放取消按钮。如果用在卡片中,扁平按钮一般居左对齐,以增加按钮的曝光。不过,卡片有很多种不同的样式,设计师可以根据内容和上下文来安排扁平按钮的位置。只要保证在同一个产品中,卡片内的扁平按钮的位置统一就可以了。
iOS和Android规范解析——按钮

凸起按钮

凸起按钮由于具有一定的高度,视觉上相对抢眼,所以可以起到强调按钮本身的作用。

iOS和Android规范解析——按钮

当页面中的按钮需要强调的时候,建议使用凸起按钮,如下图:

iOS和Android规范解析——按钮

行为:当点击凸起按钮时,按钮的背景会从中间向四周填充上颜色,同时按钮本身会升起一段距离作为反馈:

iOS和Android规范解析——按钮

凸起按钮的各种状态(动画)

iOS和Android规范解析——按钮

凸起按钮的各种状态(静态)

悬浮按钮

关于悬浮按钮,MD用了单独一节专门讲这个按钮,由于内容较多,我会在下篇文章详细介绍。

底部常驻按钮

如果你的应用需要用户随时可以进行某个操作,那么请考虑使用悬浮按钮或者底部常驻按钮。

iOS和Android规范解析——按钮

底部常驻按钮示例

下拉菜单按钮

下拉菜单按钮允许用户从一系列选项中选择一个选项。按钮默认会展示当前选中的选项以及一个下拉箭头。

iOS和Android规范解析——按钮

下拉菜单按钮示例

当用户点击下拉菜单按钮,选项会在按钮的正上方弹出,挡住下拉菜单按钮,如下图所示:

iOS和Android规范解析——按钮

使用下拉菜单选择选项的动画示意

需要注意的是,下拉菜单的选项是可以设计成允许修改的,设计师可以根据需要决定是否需要可修改的属性。具体如下图所示:

iOS和Android规范解析——按钮

选项值可修改的下拉菜单按钮

开关按钮

开关按钮,就像开关一样有两种状态:点击一下,它就会从状态A切换成状态B;再次点击,又从B切换成A。最常见的比如喜欢、收藏按钮:

iOS和Android规范解析——按钮

开关按钮示例

iOS Human Interface Guidelines

苹果的规范对于按钮的介绍要简略的多,主要介绍了苹果系统提供的三种按钮:系统按钮、信息按钮和添加联系人按钮。

系统按钮

所谓的系统按钮,其实就跟MD中的扁平按钮一样:使用一个词做为一个按钮。

iOS和Android规范解析——按钮

系统按钮示例

关于系统按钮,苹果给出了以下三个注意的要点:

  1. 使用动词。表明了操作的动词,可以表明这个词是可操作的,并且说明了点击之后会有什么效果。
  2. 尽量使动词简短。
  3. 只在必要的情况下,增加边框或者背景色。默认情况下,系统按钮是没有边框和背景色的。但在某些情况下,如果需要强调该按钮,则可以增加边框和背景色。

信息按钮

信息按钮很好理解,就是点击之后会出现相关的详细信息,一般以模态的形式出现。

iOS和Android规范解析——按钮

信息按钮示例

有一点需要特别注意:如果是通过点击整行来出现详细信息,那么请不要同时使用信息按钮,否则容易引起误解。

添加联系人按钮

添加联系人实在没什么好说的,就是点击按钮之后会出现联系人的页面,一般也是以模态视图的形态出现。(苹果关于按钮的说明也是很没有诚意呢,摊手。)

iOS和Android规范解析——按钮

添加联系人按钮

以上介绍了MD和iOS设计规范中按钮这个高频使用的控件。值得一提的是,MD的按钮动效还是很有自家特色的,在应用中稍微一使用,就会有明显的MD风格。大家在做设计时,有机会可以尝试一下。

讨论使我们认识更加深刻,欢迎留言讨论。

#专栏作家#

新设计青年,微信公众号:新设计青年。人人都是产品经理专栏作家,爱奇艺高级交互设计师。德国海龟一枚,曾任职于腾讯微生活、网易、宜信等公司。

本文原创发布于人人都是产品经理。未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-04-28 22:49
下一篇 2017-04-29 00:56

相关推荐

  • 用户界面缓解曲线

    由于采用扁平设计,动画的质量是创造伟大的界面更是必不可少的因素。通过动作设计,可以影响产品的整体体验,并从市场上把它分开。动画可以使复杂的相互作用简单,把好设计成令人难忘的用户体验。但是,我们如何创…

    2015-05-26
  • Sketchelp·2018暑期工业设计考研课程

    还是你们熟悉的Eric,还是你们熟悉的二师兄。2014年的夏天,天气热的没羞没臊,我们第一次开辅导考研手绘,那时只有三个人,一套笔。那时很开心,每天举着煎饼果子画手绘。两周年,四学期,已完善的课程,将在这个暑假全新开始:是不是临摹还行,轮到自己设计就歇菜?想知道有没有考研的“套路”?一个产品换个角度画,却死活画不出?产品+交互界面真的有很难?故事版的卡通形象一点也不卡通怎么办?“那天”万一考卷画坏了怎么办?答案都在这里。。。真实一线从业...

    2018-05-04
  • 从情景出发的可用性设计

    设计文章 / 交互设计 | 来源:TID | 作者:stephyl 前言         为了优化产品,提升用户体验,产品团队经常做很多事情:数据监测、数据分析、竞品分析…然后给交互设计师提需求,让交互设计师把需求转化为可用的功能…

    2014-12-01
  • 用户体验测量的工具:可用性度量

    说到用户体验度量就不得不说用户体验,用户体验即用户在使用产品、系统、服务的过程中建立起来的主观心理感受、因为它是纯主观的,就带有一定的不确定因素;而个体的差异也决定每个用户的真实体验无法通过其他途径来完全模拟或再现。

    2017-05-30
  • 当交互设计师承担视觉设计

    有人说,工科背景出身的交互设计师 跟视觉出身的交互设计 是的区别之一是,前者设计的东西会不够有美感,也就是很Low。虽然逻辑架构,特别是做大型管理系统的时候,可以很快把信息和功能模块归类,但是视觉知识和审美积淀,对我们这种工科生来说, 却是天生的Bug。

    2017-05-28
  • 译文|一个好故事在用户体验设计中的力量

    “细心的观众/听众会很有可能会与这个故事中的人物的情感产生共鸣,并在故事结束后模仿这些人物的感情和行为。这也就解释了为什么你看了詹姆斯邦德拯救世界之后而产生的支配感觉,看了斯巴达300勇士之后就有了外出工作打算。”
    ——保罗J.扎克,经济学家“故事是激活部分大脑的唯一的方式,使听者把经验变成他们自己的东西
    一个单一的故事可以让我们的整个大脑工作。比较这个层级的参与,只阅读要点或无关的文本只能让我们大脑的某些区域工作。然后我们很快就忘记了这些信息,因为对于这些信息来说,我们没能联系到我们自己的经验,也没有积累任何情绪的连接”“精心设计的东西也不足以单独取得成功。整个生态系统及其相关交互点也必须如同产品本身一般被设计过,这也是可持续设计的要求”
    ——罗伯特布鲁纳,Ammunition Group创始人“许多商家其实已经发现在实际意义上讲故事的力量,他们已经观察到了一个精心构造的叙事是可以多么的令人信服。并且最近的科学研究也很好的阐释故事是如何在某些方面影响我们的态度、信念和行为。”

    2017-05-29
  • 用户体验地图(User Experience Map)制作过程中的一些误区

    作为一种新的产品设计以及用户体验设计工具,User Experience Map(用户体验地图)已经被越来越多的产品经理以及设计师们所接受;确实,在产品策略、功能设计、用户服务等一系列产品发展过程中,用户体验地图的建立可以直观的呈现用户在每一个目标任务下的行为、情感、思考过程,有效的为产品工作者提供各方面的信息。然而作为一种新的工具,铺天盖地的方法论将产品工作者淹没在前进的路上。大家都热衷于建立一个这样庞大而系统的“图片”,都不约而同的将注意力放在如何产出这个Map上,甚至是依葫芦画瓢根据国外的产出物反推这个东西是怎么制作出来的。基于这种现状大多产出的Map都会“徒劳无功”,着急产出的同时你已经忽略了很多原则性的东西。下面我们就从以下几个方面来聊一聊这个过程中容易进入的误区;

    2017-05-26
  • 三八XX节专题页设计该怎么玩?看这篇就够了!

    在本文中,作者将带大家看下,那些围绕着妇女节的专题页面可以怎么玩?一起来look~look~

    2017-05-07
  • 译文|为未来的SaaS应用,提供新的交互及视觉设计

    本文介绍给大家一些基本需要关注的点,以及我们设计团队通过在相当长的时间内的试验和学习,如何为在线办公应用Zoho设计更好的用户体验?

    2017-05-20
  • 交互设计暑假基础进阶班报名通道开启中

    编辑//花花对于考研,方向大于努力,为了找准跑道,慢慢摸索的路上你听了很多分享会,看过很多大牛干货,但是实践才能见真知,经验谈打不了胜战,没有领路人,考研太容易进入误区。这个暑假我们针对考研,定制了一套造型能力训练考研强化班,其作用在于,用最专业的的指导,在短时间内向学员传授训练手绘提高造型能力的方法。课程介绍01Day 01Introducing Interaction Design交互设计概论认识什么是交互设计,了解交互设计的历史演...

    2018-04-08