实用UI素材|UI中的按钮设计

为什么按钮如此普遍？

让我们回顾一下物理按钮的历史和起源。物理按钮是UI组件的直接前身，因此在当今所有数字产品中都大量使用，即使用户不了解基本的机制或算法，只要触摸一下手指，即可使家用电器，汽车或系统处于运动状态。在“电源按钮”中，雷切尔·普洛特尼克（Rachel Plotnick）追溯了当今按钮文化的起源，并描述了按钮成为命令手段的方式。

即使在今天，尽管有成千上万的新家用电器和其他设备迁移到触摸屏控件，但物理按钮并不会很快消失，由它们形成的行为习惯会持续影响按钮设计的直观性和易用性。

按钮传达用户可以执行的操作。它们通常在您的整套UI中出现，例如：对话框（dialogs），格式（forms），工具栏(toolbars)等。

按钮可以直观呈现任务进行的状态

为按钮创建正确的交互和样式是设计过程中最重要内容之一。我们可以看下图的示例：不同样式的按钮代表了任务的实时进程。

正常（Normal）—表示该交互式组件已启用。

焦点（focus）—使用键盘或其他输入法传达用户已突出显示元素的信息

悬停(hover)—当用户将光标置于交互式元素上方时

活动(active)—用户已轻按按钮。

进度/加载（progress/loading）—正在加载中

已禁用（disabled—表示该组件当前处于非交互状态

按钮有各种颜色，形状和大小

最常见的是带有圆角的矩形按钮，这些按钮十分易于识别。我们需要依据产品的整体设计准则设计合适的按钮样式。以下是一些最受欢迎的按钮样式：

按钮样式可以区分任务的重要性

按钮的不同样式主要用于区分较重要的动作和较不重要的动作。通常，您可以有一个突出的按钮（该样式通常称为“主要”按钮），以及几个中等的“次要”和不太重要的“第三”操作。

看看搜UI (SOOUI) 带来的可临摹替换的优秀案例！

巨大的按钮PSD

暗圆形社交按钮PSD

Google Play和Appstore PSD按钮

登录Facebook PSD按钮

下载按钮PSD

开/关单选按钮PSD

分页按钮

总结：

有时没有“默认”选项

避免给用户造成困惑

保持设计风格的一致性

使按钮足够大

无障碍设计

手势被广泛采用

引导用户采取行动

实用UI素材|UI中的按钮设计相关推荐

UI素材干货模板|网页“按钮”组件，教你要如何设计！
按钮从现实生活中延续到现代应用,一般情况下,点击之后会做出相应反应的都可称作是按钮.它在界面中出现的频率非常高,导致我在之前就觉得对于这个元素足够熟悉,而忽略了它的一些设计细节. 按钮有常见的面性形式 ...
网页设计精粹：网页中那些迷人的按钮设计
按钮是网页最重要的组成元素之一,是用户和网站进行交互的重要桥梁.要设计出优秀的按钮是一件非常困难的事情,因为设计师们需要从整体设计的角度考虑按钮设计成什么样的风格才能和页面的其它部分很好的融合,同时按 ...
UI素材|让设计有愉悦的体验，app交互动效的重要性！
在探讨产品设计细节的时候,愉悦是一种很美妙的体验.是优秀产品中所潜藏的魔法.在设计时候,如何构建出愉悦的体验,也是需要努力实现的核心要点. 目前,在网站和APP这两类产品当中,设计师主要是通过动效和微 ...
QML（Qt Quick）按钮设计指南
Qt Quick 按钮设计指南一.Qt Quick简介(Introduction to Qt Quick) 1.1 Qt Quick的历史与发展(History and Development of ...
按钮设计_成功的按钮设计原则
按钮设计如今,有上千种设计和创建按钮的方法,您只需要花费少量的时间就在盘球上的工作进行浏览就可以了解它们. 这些示例中的很多都是完全相同的,但偶尔会有少数人觉得他们在制作过程中有更多的关注和关注. ...
纯干货 | UI界面中按钮设计可临摹编辑素材！
按钮是UI界面中最常见的交互元素之一,所以,如果要创建一个稳固的互动且积极有效的用户体验,需要设计好按钮元素.今天我们将搜集整理一些网页app上常见的按钮类型,了解这些不同的按钮设计方法. Viro媒 ...
干货！不得不知的UI界面中“行为召唤按钮”设计秘诀
以下内容由Mockplus团队翻译整理,仅供学习交流. 数字产品的有效交互系统由具有其任务和功能的小元素组成.为了建立丰富的交互系统,关注所有小元素的设计细节至关重要. 按钮是用户界面的核心交互组件, ...
UI设计实用干货素材|引导页模板
引导页设计原则 ①合理化原则.只做必要的内容引导,根据引导页的目的,出发点不同,大致可以将其分为产品说明类.使用说明类.推广类和问题解决类. 在设计之初就应该对需要设计的引导页进行充分分析,从而得出合 ...
UI设计素材|正确使用浮动按钮
什么是浮动按钮?浮动按钮通常是一个界面浮动的图标,它的颜色.图标.位置在界面中有着明显的区别,出现在屏幕内容的前面,由一个圆形加中间一个图标组成,通常在所处的屏幕中是为了突出一个重要功能点,执行主要的 ...

实用UI素材|UI中的按钮设计

实用UI素材|UI中的按钮设计相关推荐

最新文章

热门文章