网页设计中的“按钮”组件该如何设计?

按钮其实也是从现实生活中延续到屏幕上来的,一般情况下,点击之后会做出相应反应的都可称作是按钮。它在界面中出现的频率非常高,导致我在之前就觉得对于这个元素足够熟悉,而忽略了它的一些设计细节。那么我们一起来看看以下从按钮的类型、状态、设计要点等几点开始展开的分析。…

按钮其实也是从现实生活中延续到屏幕上来的,一般情况下,点击之后会做出相应反应的都可称作是按钮。它在界面中出现的频率非常高,导致我在之前就觉得对于这个元素足够熟悉,而忽略了它的一些设计细节。

那么我们一起来看看以下从按钮的类型、状态、设计要点等几点开始展开的分析。


按钮类型
由于web后端需要操作的步骤很多,而每个步骤中需要突出和强调的点不同,因此我们要根据场景做不同类型的按钮。大致可以分为以下几种:主按钮、次按钮、图标按钮、文字按钮。
网页设计中的“按钮”组件该如何设计?

主按钮
主按钮通常是界面中比较重要的一个功能入口,比如说新建、编辑、保存等一些正向的操作。让用户很快就可以看到这个界面的核心功能以及该要如何操作。或者是引导用户点击时可以使用主按钮。
网页设计中的“按钮”组件该如何设计?

主按钮有常见的面性形式和图文结合形式两种。图文结合形式标对主按钮的含义进行解释,从而帮助用户提高这个按钮的识别性。如果一个按钮你想比主按钮更加强调,那便可使用在按钮中添加图标,这样既能够强化图标的含义,同时也加深了用户对于按钮的印象。
设计时要注意文字边框的间距,左右间距要大于上下边距。通常左右边距设置为16px,上下间距6-8px,保持舒适的呼吸感。
网页设计中的“按钮”组件该如何设计?

关于圆角
直角按钮显得严肃、专业,轻圆角按钮显得中性,而全圆角就会比较活泼、亲切。因此在web后台的界面中,通常使用直接图标与轻度圆角的按钮。
网页设计中的“按钮”组件该如何设计?

次按钮
次按钮有三种形式:低透明度的面性形式,线框形式,以及图文形式。
网页设计中的“按钮”组件该如何设计?
次按钮在页面中出现的比较多,毕竟一个界面中不能都是主按钮,但是可以都是次按钮。有的界面多个按钮层级一致时,就没有必要硬要拿出来一个做主按钮,可以把他们都当作次按钮来对待。这样才会让页面比较和谐舒适。

文字按钮
文字按钮的表现形式相对比较低调,通常在表单中出现,它的优先级较低,但是可能会频繁出现,不过即便是很多也不会使界面显得很杂乱。比如在列表中,每一行都会有多个操作按钮,使用文字按钮比较合适,也可以加入小图标使功能更直观。
网页设计中的“按钮”组件该如何设计?
文字按钮的颜色通常是产品的品牌色,或者是蓝色,因为蓝色在用户的认知中通常是可点击可操作的。

图标按钮
图标按钮通常是指由一个图标来代表入口,它能够直观的表达功能状态。但是没有了文字的解释,就要注意图标的设计要通用、常见、易于理解,降低用户的认知成本。最好在悬浮状态能够显示图标释义的文字。
网页设计中的“按钮”组件该如何设计?
由于按钮的种类与场景都比较多,在使用的时候要注意保持各个层级的区别,并且同一层级使用相同类型的图标,避免出现混乱。



按钮状态
用户在操作时的流程通常是:鼠标对焦(悬浮)-点击-触发-反馈。因此按钮的状态也就可分为这几种:常规状态(Normal)、悬浮状态(Hover)、点击状态(Click)、加载状态(Loading)、不可点击状态(Disabled)。
网页设计中的“按钮”组件该如何设计?

按钮状态,可以让用户知道这个按钮当前是在进行哪一种操作,方便帮助用户进行判断。
通常情况下,主按钮可选择符合产品调性的按钮色,而悬浮状态和点击状态也需要视觉上给予反馈,否则在点击过程中会显得过于生硬,给用户造成反馈比较迟钝的感觉。这里悬浮状态可以覆盖15%的白色透明层,点击状态覆盖15%的黑色透明层来区分。而不可点击状态通常选择用灰色块,也就是我们所说的置灰。



最后
由于按钮的场景与类型众多,因此在界面中要区分好按钮层级,相同功能等级的按钮前后要保持统一,避免出现多个页面不一致的情况。
不要忽视按钮状态,如果没有悬浮和点击状态,用户在操作时会觉得流程很生硬;若没有加载状态,在页面反应大于1s时用户会不知所措 。因此即时的视觉反馈有助于提高用户的体验。

来源:25学堂
编辑:设计无忧

    微信公众号

    微信扫一扫 关注我们

    专注设计知识和资源分享。包括设计文章、设计理念、设计资源、设计教程、设计灵感、等众多的设计内容分享。

    为您推荐

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    评论列表 人参与

    联系我们

    联系我们

    设计无忧

    在线沟通:

    电子邮箱: admin@sj321.com

    QQ交流群:

    关注微信
    微信扫一扫关注我们

    微信扫一扫关注我们

    关注微博
    返回顶部