咨询,就免费赠送小米移动电源,咨询热线:18030402705当前位置: 主页 > 建站知识 > 建站指南 > 策划方案 >
推荐内容
联系我们
电话咨询:18030402705
E-mail:web@07fly.com
地址:成都校园路99号(西南交大旁)

提升按钮设计体验的三大设计原则

作者/整理:07fly 来源:人人都是产品经理 2018-10-12 Tag:


QQ截图20181009153917.jpg

图片版权所属:站长之家

按钮属性解剖

按钮对于UI新手就是一个简单的长方形矩形,设计时会忽略按钮设计要注意的细节,甚至标注时候遗漏一些需要标注的参数,导致开发产生偏差,视觉还原度不好。

按钮在表面看的属性从远到近是颜色、形状、字体,但是真正的按钮属性并不止这么简单的这三个属性。

这里我以标注一个简单按钮为例,分析下按钮应考虑的属性。

由此可以推断出按钮的有六大属性:颜色/形状/字体/大小/投影/留白。

无论是几个互联网巨头的设计规范,以及最近新出的谷歌规范,能看到关于组件部分,第一个组件设计的就是按钮。

在做标注时,我们经常就会忽略一个最重要的使用规则,按钮中的内间距,还有按钮外间距,这决定了按钮跟其他元素的合理距离。

在原子理论里UI组件最基础的元素从原子开始的。

按钮就是最简单的原子,通过按钮的可继承属性(按钮高度,按钮圆角,按钮文字字号等属性)。为了排版布局的整齐和一致,其他原子(输入框、单选多选框、搜索条等)也会继承这些属性,因此按钮在设计语言的组件设计中占有举足轻重的地位。

因此当我们在设计语言中定义按钮时,一定要思考这六大属性,它不单纯影响自己的呈现,还影响了其他原子的属性。

按钮的设计原则

了解按钮设计的这六大属性,我们就能设计好按钮了么?

当然没这么简单,我归纳了三大设计原则,遵循设计原则,才能保证按钮真正实现它的商业价值和用户价值。

1. 按钮的可点性

UI界面中如果需要用户理解设计越长可用性就越差。设计必须在考虑把界面做得酷炫前,让用户知道按钮是“可点击的”。

因此按钮至少要考虑从形、色、字上创建识别为可点击的按钮。

多种形状按钮 图片来源Dribble


本文零起飞网络为您整理编辑,版权归原作者所有,转载请注明原文来源出处。
本文章链接:http://www.07fly.com/Guide/plan/9212.html
07FLY专业做网站,网站建设,网站优化,主机托管,网站推广一条龙服务,让您省心到底