html5中按钮尺寸设计,UI设计中的按钮设计规范
原标题:UI设计中的按钮设计规范
已经有很多朋友催我更新设计规范的文章了,今天我就先来一篇,关于按钮设计规范的,后面会陆续更新其他控件内容。严格来说,按钮包括很多种,比如普通按钮、图标按钮、文字按钮、开关按钮等等。
但我觉得根据这样的分类来制定规范,多少会有些重合的地方,比如“图标按钮”到底是算图标还是算按钮?是不是并没有很彻底的将二者区分开?
所以如果我来制定规范,按钮就是上图中的普通按钮,其余的分别归类到文字、图标、开关当中,这样可以很清晰的区分开每个控件。
(这里必须要和大家强调一下,每个平台都有自己的规定原则和名称叫法,我们制定规范是为了让自己团队更好的协同办公,而不是为了规范而规范,所以在一些分类和名称的叫法上,不必过于纠结和较真,只要团队成员之间达成共识,提升了团队效率,适合团队成员使用,那就是最好的规范。)
接下来我们就来聊聊制定按钮规范时会遇到的一些问题,虽然只有普通按钮,但还是有很多细节值得我们思考学习。
大纲如下:1.按钮高度2.按钮宽度3.按钮颜色4.按钮圆角5.按钮状态6.按钮文字7.按钮搭配8.按钮图标
1 按钮高度每个平台都会有多种型号的按钮,我见过最多的可以分为5种:超大按钮、大按钮、中按钮、小按钮,超小按钮,这个可以根据自己平台的需要来制定多少种。
每一种按钮都需要有一个特定高度,那么这个高度如何制定才比较科学呢?这里可以推荐一种方式,就是按钮的高度是文字的三倍左右,这样看起来会比较舒服:
当然,这种方式只是对比分析多个产品之后得到的一个大致规律,仅供参考!
2.按钮宽度
每一种规格的按钮高度是固定的,但宽度就不一定了。比如大按钮会根据页面内容来制定按钮的宽度:
当然,我们还是需要给出大按钮的最大和最小宽度,最大宽度就是页面宽度减去安全边距(下图两个红线间距就是安全边距,每个平台都会有,常见的安全边距有10pt、12pt、16pt等):
最小宽度根据各平台属性来制定即可。
再比如小按钮,我们需要给一个临界值,比如四个字是临界值,按钮字数小于4时,宽度都按4个字的宽度来实现:
按钮字数大于等于四个字时,我们需要给出字体与按钮的左右间距:
宽度的规则相对比较麻烦,UI设计中的按钮设计规范https://www.aaa-cg.com.cn/ui/2674.html必须要考虑清楚种类、最大、最小、临界值等因素,否则在后续使用中就容易乱作一团。
3.按钮颜色
颜色部分比较简单,一般会选用规范体系的颜色即可,这里讲一个注意点,如果你的按钮是有渐变色的,渐变最好水平横向拉伸,这样开发写起来成本小一点:
如果有角度的渐变,当然也可以写,只是最好先和开发沟通一下,免得造成不必要的麻烦。
4.圆角大小
如果平台的按钮是圆角矩形,就需要制定按钮圆角的大小,但是并不是所有按钮的圆角大小都是一样的,需要按钮大小比例来制定:
这样看起来会和谐一些,否则如果不论按钮多大,都用一样的圆角,看起来就会不像一套的:
这样两个按钮虽然圆角一样大,但感觉下面的按钮会就圆润很多,二者调性严重不符。
5.按钮状态
一般移动端的按钮有这三种状态就够用了:正常,按压和不可点击。
正常状态就不必多讲了。
按压状态:推荐两种实现方式一种是增加15%的黑色,一种是增加15%的白色:
不可点击状态,也推荐两种实现方式,一种是降低为30%的透明度,另一种是直接置灰:
灰色色值可按照自己平台的色彩规范来制定,还是那个原则,要保持一种按压和置灰方式,确保统一性。
6.按钮搭配
我们经常会遇到两个按钮同时出现的情况,有时候两个按钮需要有主有次,比如:
所以我们要规定好轻重按钮配合使用的样式规则,防止一个平台同时出现多种配合方式,比如下面这就是两种样式搭配:
具体使用哪种方式搭配,可根据平台属性来进行规范。
7.按钮文字
按钮文字需要规定好文字的大小,颜色以及容易被忽略的文字极限值,一般来说按钮文字不会超过6个字,供大家参考。
8.按钮图标
有些普通按钮上会有一些图标,我们需要把图标的大小、图标与文字的间距规定好:
其余的符合普通按钮规范即可!
好了,以上就是关于按钮规范的分享,希望能帮助大家提供一些思路和灵感。因此,您现在已经了解了与UI设计师的工作相关的主要技能。如果您想了解更多信息,请给我点个关注,我之后还会发包含有关在该领域工作的更多相关文章。
责任编辑:
html5中按钮尺寸设计,UI设计中的按钮设计规范相关推荐
- new ext.toolbar控制按钮间距_按钮规范系列 - 「按钮尺寸」的设计详解
理论上,按钮的使用规则与设计逻辑对于产品设计人员而言,是必备的基础知识.但是市面上关于按钮设计的解析文章相对较少,所以我继上一篇「取消按钮的设计思路」之余,继续带来一篇关于「按钮尺寸的设计解析」. 希 ...
- 计算机ui答辩,交互设计ui设计毕业论文答辩
<交互设计ui设计毕业论文答辩>由会员分享,可在线阅读,更多相关<交互设计ui设计毕业论文答辩(16页珍藏版)>请在人人文库网上搜索. 1.交互设计,UI,设计,毕业论文答辩, ...
- 如何在Adobe XD中创建酒店预订UI设计
在本教程中,您将学习如何在Adobe XD中创建酒店预订应用程序设计. 作为Adobe XD,我们不仅可以构建静态设计,还可以构建更多内容. 我们将构建一个交互式的动画原型. 首先,我们将介绍任何酒店 ...
- adobe xd_如何在Adobe XD中创建Finance App UI设计
adobe xd 在本教程中,您将学习如何在Adobe XD中创建财务应用程序设计,以及(更重要的是)如何轻松对其UI的各个部分进行动画处理. 您将在本Adobe XD教程中学到什么 如何在Adobe ...
- MATLAB AppDesigner 设计UI界面中调用自定义函数
在MATLAB AppDesigner设计UI界面过程中,如果直接在APPDesigner代码编辑框中编写代码,如代码量较大,会导致代码混乱的问题.使用调用函数的方法能够解决该问题. 本文将介绍MAT ...
- pyqt 获取 UI 中组件_安卓ui设计智能输入法如何开发,这里有介绍
安卓是目前国内使用人数最多的一种操作系统.很多人都在使用安卓的输入法.其实小编要告诉大家,学会了ui设计,你也可以设计输入法.今天就让小编为大家介绍安卓ui设计智能输入法如何开发. 安卓ui设计智能输 ...
- 该怎么去学UI设计?UI设计学习路线分享
UI设计行业现状可谓是一门职业,很多人看到了UI设计的就业前景和薪资待遇,纷纷投入到UI设计培训的行列中来,对于没有计算机基础和转行的人来说,学习UI设计可谓是一个明智的选择,首先UI设计入门较低,是 ...
- Android按钮扩大动效,Android按钮动效UI设计教程
相信大部分同学都应该对Material Design有一些了解的,不清楚的请自行面壁思过.先看看官方的按钮动效,以此为基础思考如何实现,从动效层面来说,要实现一个效果,先梳理清楚,"动&qu ...
- 用PS制作旋转按钮图标,UI设计教程
每天一篇设计教程分享给你,与你一起成长. 所用软件为:PSCC2018版本,还没有这个软件的小伙伴们可以给我留言! 喜欢的小伙伴记得关注噢.
最新文章
- oracle直查和call哪个更快,让oracle跑的更快1读书笔记二
- Office 365管理员指引 9 ——Lync 自定义会议邀请
- matlab 图片批量读取
- asp.net 调用打印机 (转)
- 不显示调用super_让不懂编程的人爱上iPhone开发(2017秋iOS11+Swift4+Xcode9版)-第7篇
- KafkaConsumer 长时间地在poll(long )方法中阻塞
- struts2学生信息管理系统篇章③
- 解决移动端touch事件与click冲突的问题
- php 清除指定session,PHP如何操作指定的session?
- 【挖坑系列】关于浏览器の缓存机制
- 手机号码归属地查询App
- DBSCAN聚类算法原理和伪代码
- 经典算法题(中级)-----自定义函数之字符类型统计
- springboot某高校绩效考核管理设计与实现毕业设计论文012208
- 移动端手机调试的方法
- web前端 | 博客(八)用户信息修改功能
- DELPHI中拖放的操作
- 论如何使用三相220V变频器驱动额定电压为380V Y接法的三相异步电机
- mysql在 union 与group by后order by排序混乱
- CSS 弹性布局/flex布局最后一行左对齐
热门文章
- Ashx文件的使用方法
- Linux Shell CentOS 写一个输出命令 支持颜色
- flink java flatMap 使用java8 lambda写法
- 李宏毅-DeepLearning-2017-Unsupervised Learning:Neighbor Embedding
- Python之路 | 骰子游戏和最大数
- python wxpy模块_wxpy微信模块学习之常用组件
- eclipse设置断点调试
- java基于springboot框架开发的办公自动化OA系统
- 从概念到架构——详细解析态势感知系统
- camera主观测试分析软件,camera主观测试经验分享.ppt