恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
每日分享:6.组件详解——按钮
0.0°
2019-12-13 原创文章 规范/资料 举报 1155 7 4 0

按钮包含非常广泛,界面中无处不在。大家都体验过:按钮看似很简单,但在设计时也常纠结该用什么按钮样式吧?本文在对按钮简单介绍后,会列举多个平台对按钮的样式,可作为设计过程中的参考。



按钮按样式可分为:悬浮按钮、 填充按钮、线性按钮、图标按钮、 文字按钮。

一般,同样大小和颜色的情况下,视觉强弱排序为:悬浮按钮>填充按钮 线性按钮 图标按钮> 文字按钮。

一般功能越重要的按钮用视觉强度越强的样式。(按钮的视觉强度还可以从位置、颜色、大小、投影、纹理等方面调节。)


1.因为悬浮按钮始终悬浮在界面上,不随界面的滑动而变化,对下部内容有一定的遮挡,如此重要的位置,必须是重要的功能按钮,且该功能贯穿整个界面,是用户随时可能点击的。

如:百度地图大量使用了悬浮按钮(因为用户在使用地图的过程中常多方位拖动地图,悬浮按钮对界面的遮挡变得无足轻重,反而最大程度上的节省了空间):




2.UI设计中最常使用的按钮样式是填充按钮、线性按钮和文字按钮,以及它们的组合形式。

按视觉强度:填充按钮>线性按钮> 文字按钮 ,有颜色的>黑白灰的。

在按钮的组合中,文字按钮往往在填充按钮和线性按钮的右侧。

顺便讲一下按钮组合的位置:

a.按用户的操作习惯,一般右边是比较容易操作的区域,因此右边常放推荐用户点击的按钮。如游戏中途退出,确认退出弹窗往往是“取消”按钮放右边,确认按钮在左边。


b.按钮组合的位置应该居中、靠右、靠左还是……?

以下摘自优设网文章:

关于按钮组合的位置,作者测试结果是:方案A、B、C、D、F的完成时间和满意度都较好,E则不佳。据此,我们可以在符合界面的操作场景下放心大胆的设计我们的按钮位置了,但记得两个按钮不要离得太远,不要给用户造成不必要的困扰。



3.图标是另一种最常见的按钮,图标的样式亦多种多样,列举一些比较常见的风格:线性图标、断线图标、扁平图标、长投影图标、2.5D图标、写实图标等。

通常人类对图形的敏感度大于文字,因此图标是一个非常好的表意方式,即可以言简意赅,又可以丰富界面设计。图标也可以配合文字一起使用,更加明确按钮含义。




——————————以下是按钮参考(均来自网络)——————————




推荐阅读《关于ZAO——聊聊按钮设计 》:https://www.zcool.com.cn/article/ZMTAyODE5Ng==.html


—————————————————————————————————


ps,分享一下写作心得:本来这篇很久之前写过了,但是因为平台没有保存草稿功能,当我编辑到快完成时,由于某些原因,网页失效……当时内心万马奔腾,于是就停更了很久。但心里一直记挂着我的这个承诺,就是要把规范的这部分写完。最近得闲,重新审视了一下自己的工作,决定把这些漏网之鱼赶快补上。

尽管这些非常基础,未必多有价值,但自己总结的过程,是一次次从内心的确认,当看到一篇篇文章成稿,小小成就感升起。改变就是从这种鸡毛蒜皮的小事开始的。

之后会把数据类、反馈类、布局类、字体、图标这几大类写完。


Powered by Froala Editor

更新:2019-12-13

收藏

7人已收藏

修炼中的DOT

树一心,为设计。

  • 9

    作品

  • 23

    粉丝

  • 39

    关注

  • 关于“用户体验”
  • 每日分享:8.组件详解——反馈类
  • 每日分享:7.组件详解——数据类
  • 每日分享:5.组件详解——表单n
相关标签
设计规范UI按钮

    猜你喜欢

      2019-12-13 原创文章 规范/资料 举报 1155 7 4 0

      每日分享:6.组件详解——按钮

      0.0°

      你确定要举报每日分享:6.组件详解——按钮

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年12月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      7
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录