后台产品设计之按钮

这是《后台产品设计指南》系列文章的第9篇内容,更多精彩可以点击下方链接查看。

后台产品设计指南

按钮是我们使用产品过程中必须可少的元素,本文会和大家一起了解下按钮在产品设计过程中需要注意的事项。

什么是按钮

按钮是网页上的一个常用组件,用于触发某种特定的操作。它有6种状态,分别是默认、鼠标悬浮、点击激活、聚焦、加载、禁用。

默认状态表示组件处于活动状态,但是当前并未使用。

鼠标悬浮状态表示光标在按钮上悬浮显示手型。

点击激活状态表示按钮当前被选中使用的状态。

聚焦状态不太容易理解,它是指电脑光标当前所处的位置,使用tab或者方向键可以快速切换选中的内容。

加载状态是在用户操作没有立刻执行成功需要等待一定时间时使用的交互状态,比如登录按钮在登录过程中显示加载状态。

禁用状态表示按钮当前无法使用,不能进行操作。

按钮类型

主按钮和次要按钮

主按钮是指页面上的核心操作,往往只有一个,一般都是填充样式,比如客户列表页面的新增客户按钮、新增客户弹窗中的保存按钮。如果页面上没有特别核心的操作,主按钮并不是必须存在的。

次要按钮是指页面上的非核心操作,一般都是轮廓样式,相对主按钮会弱化许多,比如页面上的批量上架、批量下架、删除按钮等等。

文字按钮

文字按钮基本上等同于链接,可以多次使用。文字按钮比较容易理解,一般不会存在歧义。

图标按钮

图标按钮是指用图片展现功能的按钮,一般都使用约定俗成的图片,比如消息,保存等。图标按钮可以增加悬浮提示信息,这个提示信息不是必须的。

下面是知乎首页的截图,其中提问是主按钮,赞同是次要按钮;推荐是文字按钮,消息中心和私信是图标按钮,这里的图标按钮就没有悬浮提示。

按钮设计注意事项

1.从视觉层面上看,主按钮、次要按钮、文字按钮和图标按钮的重要程度是一直在下降的。

2.通过合理的组合,可以引导用户用户在完成平台期望用户完成的操作,比如强化某一种操作或者弱化某一种操作。

3.按钮要放在合适的位置,放在用户能最快操作的位置。比如下面的截图中,搜索按钮应该在重置左侧,紧挨着搜索条件,而不是相反的设计。这是因为在这个页面用户选择搜索条件后最常用的操作是搜索,设计上应该帮助用户快速实现搜索操作。

4.按钮的圆角、颜色、尺寸、文字、阴影一定程度上能影响用户的感知,在设计的时候一定要注意规范。

比如圆角的辨识度更高,传达了简单、乐观和开放的态度,这一点是通过大量的调研数据总结出来的。


按钮是后台使用非常频繁的组件,根据使用场景结合设计规范才能设计出来符合使用习惯,简单易用的后台页面。同时这些规范可能是在动态变化的,这就需要产品岗位能主动学习,主动接触新鲜的事物。

在写作过程中,如果有意见或者想法,欢迎有兴趣的读者添加我的微信一起交流探索,共同进步。

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

推荐阅读更多精彩内容