app设计这不“科学”APP按钮竟然还可以这么搞

2019-04-21 18:21| 发布者: | 查看: |



相关推荐:



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

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

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

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

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

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

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

  UI界面中如果需要用户理解设计越长可用性就越差。设计必须在考虑把界面做得酷炫前,让用户知道按钮是“可点击的”。因此按钮至少要考虑从形色字上创建识别为可点击的按钮

  形,按钮遵循多数用户习惯需要有个形状,判别为可点击区域。归纳上面的例子,按钮一般有以下几种常见形状

  按钮的颜色一般在黑白红橙黄绿青蓝紫这几大色系里,黑色比较少出现,黑色系里的灰色调普遍用在按钮的不可点状态,因此黑色按钮比较少出现,用户容易混淆

  我们能发现除了单色填充按钮颜色之外,还有渐变色填充按钮的做法,这种方式也是能突出按钮和引导用户去点击

  字,作为按钮的信息引导,必须存在文字或图形符号引导用户交互,否则就不是按钮

  文案会提示用户如果点击他们获得什么收益,文案必须迅速吸引用户的注意力并引导他们正确行动

  无论是什么颜色什么形状的按钮,必须有关键文字描述或者图标解释,就无法构成按钮元素

  按钮目的就是触发点击,缺少点击语句引导,用户根本理解不了这形状是做什么

  点击按钮,一般会进行下一步、确定、以及完成等等恰当的反馈,按钮必须有反馈,不然用户不知道互动成不成功,用户总是期待得到反馈的

  在网上公开的各种设计语言中都能清晰,按钮除了默认按钮,还会有悬停状态/点击状态/不可点状态的多种交互形式

  我们设计按钮时不能只设计一种状态,在交付给研发前要把常见的几种交互都设计好

  分析现在常见的APP设计,目前按钮的点击后交互的反馈场景最常见的有以下几种

  如果点击按钮后无任何反馈,这就不是按钮应该是信息框,可交互是按钮的设计原则之一

  按钮的重要性体现在按钮文字引导/按钮大小/按钮周围留白以及按钮所处的位置,按钮数量的控制。按钮要设计合理,才能有良好的引导性,用户才能正确明白按钮的操作功能

  ▲一个引人注目的引导性按钮通常足够大,可快速找到,但又不能太大,以免影响干扰内容阅读

  文案跟按钮之间的间距适当缩小,能让用户明白他们之间关联,让按钮区别与其他组件

  ▲不论是网页还是APP,按钮一般处在信息正下方,或信息右下方便于用户的右手操作原则

  ▲1.如果按钮过多,不分主次,用户就会疑惑不知道如何操作。注意避免同饱和不同颜色的按钮出现,一个用填充颜色(重),一个描边颜色跟随主要按钮颜色(轻)

  2.如果按钮场景有特殊情况,就需要设计合适场景的按钮。按钮的操作是不可逆的操作应该赋予更多的视觉重量,用户可能并不明白危害性而下意识操作,或者误点了操作

  按钮用色也要经过多场景的考验,不是单纯定一个主色解决所有场景。同样存在不同使用场景中,按钮要设计多种尺寸以适应不同的场景需求,小,中,大,特大等等

  设计趋势随时在变,按钮的风格也时刻在变化,唯一不变的就是按钮的六大属性以及作者为大家总结的三大设计原则。按钮的设计是UI设计规范中最简单的一环,但是同时也是最重要的一环

  希望各位大家在工作中学会巩固自己的知识,以小见大,在追求不同的设计风格趋势的同时,别忘了UI设计最基础的基本功之一:保持风格的统一性,从一个简单的按钮设计开始。返回搜狐,查看更多

<
>
快速飞艇网成立于2014年,我们是一家专注用户体验设计开发与互联网品牌建设的设计公司,创立至今为2000多位客户提供了创新与专业的设计方案。设计服务范围包括:交互原型设计、产品视觉设计、网站设计与开发建设、移动及软件产品界面设计、图标设计、品牌及平面设计等。

联系我们

江苏省南京市玄武区玄武湖

13588889999(服务时间:9:00-18:00)

admin@adminbuy.cn

在线咨询 官方微信官方微信

部门热线

前   台:13588889999
业务部:13588889999
客服部:13588889999
技术部:13566667777
人事部:13566667777

网站建设 微信开发 售后服务 咨询电话13588889999 返回顶部
返回顶部