对按钮的一些认识

按钮的定义

  就是网页或应用中用来承载用户操作的元件。用来承载用户某一个具体的命令(操作),用户在按下Button后程序系统执行一系列的行为。

  通常在视觉上会着重表现。

  按钮是一个普通的必不可少的,几乎我们每天都要接触无数次的设计元件,同时在Web或者App上创造流畅的用户体验必不可少。

按钮的尺寸

  点击Button的是鼠标或手指。

  MIT Touch Lab的研究结果表明手指接触面积平均为10-14mm之间,指尖平均为8-10mm,所以最佳的热区尺寸应设定为10mmX10mm。


按钮最佳尺寸

按钮的形状

  通常是直角矩形或者圆角矩形。直角形的按钮向我们传递一种正式严肃的感觉。圆角能够加强信息的传递,并且能够将人的视线集中在元素的中心位置。其他形状,如圆形,三角形等。

直角矩形按钮
圆角矩形按钮
圆形按钮

按钮的颜色

  按钮的颜色有千万种,可能考虑到界面的设计风格;考虑到对用户的心理暗示;考虑到要传达给用户的理念会选择合适的颜色。比如大众默认的红色按钮传达有警告、不可以的意思,同时也最能引起注意的颜色;蓝色则传达着可行,畅通之意;灰色则传达着不可用,不可点击之意,如灰置按钮就是这样应用的。

红色按钮
  
蓝色按钮
灰置按钮


按钮的样式

1.立体按钮

  立体按钮样式相较于扁平按钮设计增加了一维空间,在复杂或宽裕的空间中强调功能,立体按钮比扁平按钮更加显眼。

立体按钮

2.扁平按钮

  扁平的按钮不突出,在点击时会有背景颜色,不打扰内容。

扁平按钮

3.开关按钮

  用同一个Button表示开启和关闭,节省空间。

开关按钮

4.幽灵按钮

  透明背景,与页面文字一样颜色,只加上边框,通常基于品牌或设计的考虑。

幽灵按钮

5.悬浮按钮

  悬浮按钮用于驱动动作时使用。当然在其它场景使用并不局限于单一形状,可以是图片文字结合,也可以是icon单独构成,悬浮于页面中。

  悬浮按钮也是谷歌设计的重要部分,它是一个圆形的材质按钮,点按之后按钮浮起并表现墨水晕开的效果,利用本身的圆形形状悬浮于界面之上与其他元素进行区分,加上运动动作,包括渐变,展开和转化为单一定点。

悬浮按钮


按钮的状态

  按钮有可用不可用两种状态,以及在交互上默认状态、鼠标或悬浮时的状态和按下时的状态。

之前有提到灰置按钮,就是不可用的。如下图的应用按钮,现在这种情况是不可用,不能点击的。


不能点击

  只有在你做出相应的改动时,这个按钮才会被唤醒,变成可用可点击的状态。


可点击状态

  在Web中按钮的默认状态下;

默认

  鼠标悬停时是这样;

悬停

  按下时是这样的。

按下

  在界面设计按钮时都要考虑到这个交互问题,承现三种不同状态。

按钮的构成形式

  按钮可以分为纯文字的、纯icon的,纯图片的以及这三种元素各自相结合的,最常见的就是纯文字形、纯icon形和文字icon结合形,纯文字的太常见,就不用再例图说明了。

前5个按钮就是纯icon,后2个按钮就是icon与文字相结合的

按钮的使用形式

  单个按钮,最常见的。

单个按钮


  按钮组,一般成组出现,共用边框,在视觉上成一个整体长条形状。末尾可能有更多的按钮隐藏,通过下拉箭头表示。

成组出现

  列表型按钮,类似Select,从可选的列表中选择一项或者多项的菜单。

select式

按钮的摆放位置

  按钮应放置在用户能够直接找到或者他有预期能看到的地方。例如,iOS UI 设计规范给明了按钮的合理位置。

  按钮要执行的命令和位置的关系非常重要,,特别是在出现成对的选项时(就像”上一个”和”下一个”),确保设计强调了最主要或者最重要的动作。

  在下面的例子中我们使用了红色的按钮颜色表现一个潜在的具有破坏性的动作,并且,主要动作不但可以通过颜色和对比度去引起注意,还可以看它是否置于对话段落的右边。

删除按钮比取消按钮更加显眼
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,133评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,682评论 3 390
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,784评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,508评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,603评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,607评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,604评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,359评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,805评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,121评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,280评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,959评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,588评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,206评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,193评论 2 367
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,144评论 2 352

推荐阅读更多精彩内容