软装课程 室内课程 总裁特训营 设计管理硕士 欧洲游学 美国游学 IAAPC认证 IED认证 训练营 实践基地 设计工作坊 申请试听 返回首页 电话联系

UI设计:用户界面中按钮的基本类型-聊聊设计

聊聊设计
+ Consultation
首页 > 清大BLOG > 聊聊设计 > UI设计:用户界面中按钮的基本类型

UI设计:用户界面中按钮的基本类型
发布时间:2019年10月30日 16:40:21

按钮是用户界面软装设计师中最遍及的交互元素之一。更重要的是,它们关于创立牢靠的交互和活泼的用户体会至关重要。今日,咱们在这里收集了网站和移动运用程序中常见的按钮类型的界说

本文合计2836字,阅览大约需求10分钟


按钮是用户界面中最遍及的交互元素之一。更重要的是,它们关于创立牢靠的交互和活泼的用户体会至关重要。今日,咱们在这里收集了网站和移动运用程序中常见的按钮类型的界说和示例。


什么是按钮?

按钮是一个交互元素,能够让您能够依据特定的指令从体系取得预期的交互反应。根本上,按钮是一个控件,答运用户直接与数字产品通讯,并发送必要的指令来完结特定的方针。例如,发送电子邮件、购买产品、下载一些数据或内容、翻开播放器以及其他很多或许的操作。按钮之所以如此遍及,原因之一是它们能有用地模拟与实际国际中方针的交互。

现代UI按钮十分多样化,能够满意各种用处。典型且常常运用的按钮,其呈现交互部分,一般显现为可见性并具有特定的几何图形,一起有副本支撑阐明经过该按钮将履行的操作。设计师需求精心设计有用且有目共睹的按钮,这些按钮要自然地融入全体设计风格,在比照度及布局上要显着杰出。



接下来让咱们看看移动和 Web 界面中广泛运用的按钮类型 ??


CTA按钮


一个召唤性用语(CTA)按钮是用户界面的一个交互元素,意图是鼓舞用户采纳交互行为,然后供给特定页面或屏幕的转化(例如,购买,联络,订阅等),换句话说,它将被迫用户变为自动状况。因而,从技术上讲,它能够是经过召唤性用语文本支撑的任何类型按钮。它与页面或屏幕上的一切其他按钮不同之处在于其有目共睹的特性:CTA按钮有必要引起留意并影响用户履行所需的操作。



文本按钮


望文生义。文本按钮意味着没有任何形状、填充标签或相似的东西。因而,直观的看,它看起来并不像按钮。不过,能够用到标有色彩或带下划线的这些按钮,依然能够完结用户交互转化。文本按钮一般用于创立辅佐交互部分,并不会涣散主标题或CTA元素的留意力。


某网站设计:全体交互部分选用文本按钮,一切其他功用仅包括标题和标签中的仿制功用,这种文本按钮办法一般用于简约风格的网页


下拉按钮


单击下拉按钮时,将显现互斥项意图下拉列表。一般在设置按钮中常见。当用户挑选列表中的一个选项时,一般按色彩被符号为活动的。

以下图为例:单击按钮时,将翻开选项下拉列表。只需您挑选完结其间一项后,下拉列表就会消失,只保存挑选选项和加号按钮,以防您再次重复挑选下拉列表。



“汉堡”按钮

它是躲藏菜单式按钮。单击或光标挑选按钮时,菜单会翻开。这种菜单(或按钮)的称号由于它的形状由三条水平线组成,看起来像典型的面包 - 肉 - 面包,顾名“汉堡”按钮。现在它已是一种广泛运用的 Web 和移动布局的交互元素; 关于其利害的争辩也很剧烈。


关于活泼互联网用户来说,默许情况下知道此按钮躲藏了各种类别的网站内容,因而这个技巧不需求额定的解说和提示。好的是,汉堡按钮菜单开释空间使界面更简约和舒畅; 从功用的视点来看,它为其他重要的布局元素节省了很多空间。能够说到的响应和自适应设计躲藏导航元素使界面在不同设备上看起来更调和。


不喜欢“汉堡”按钮的人以为,这个设计元素或许会让那些不常常运用网站的人感到困惑,而且会被那些具有高度抽象性的标志误导。这或许会对导航发生负面影响,并成为用户体会欠安的原因。因而,应在用户调研和界说方针受众的才能和需求后做出关于运用“汉堡”按钮的决议。



这是运用“汉堡”按钮功用的网站示例。它能够躲藏扩展的选项菜单,以便将用户的留意力会集在令人形象深入的视觉效果和中心信息上


可扩展按钮


此按钮在被单击或点击后翻开多种选项。这是另一种在不使屏幕过载的情况下设置恰当交互流的办法,这关于屏幕空间有限的移动接口特别重要。


某 APP :标签栏的中心交互元素是一个加号按钮,用户能够在操作过程中增加新行程或新项目。为了使体会更简略,按钮被扩展为一组符号明晰类型的内容的按钮,以便用户能够在开始时做出挑选并抵达必要的屏幕


同享按钮

同享按钮能够将内容或直接同享到交际网络帐户。为了使这种联络愈加明晰,网站上会呈现一些图标,这些图标具有特定交际网络的 logo 。假如用户不是专门为了同享登录网站的话,一般不需求将同享按钮详细化(没有额定图形、色彩符号、下划线等),只看到图标也是能够的,这种办法适宜简约风格和有用运用负空间。不会让用户过于重视同享按钮,而抢了页面首要内容的风头。


一家风格简约的某网站。在主页的左下角,您能够看到交际渠道的 logo 图标。它们很简单有目共睹但又不影响网站内容平衡,不会涣散中心导航和 CTA按钮 的留意力


镂空按钮


镂空按钮是一个看起来通明的按钮。视觉上是以细线形状盘绕按钮呈现的。这种按钮有助于归类视觉层次结构,以防呈现多个CTA元素导致用户难以分辩主次信息:中心 CTA 以填充按钮显现,而辅佐(依然活动)以镂空按钮给出。


某 APP 主页:有三种不同类型的按钮:中心 CTA 以填充按钮,供给快速注册办法; 镂空按钮供给了非有必要的选项; 文本按钮被放到下一行并用色彩标示。这种办法有助于在屏幕上构建按钮的牢靠视觉层次结构


起浮操作按钮(FAB)


起浮操作按钮(简称 FAB)是在 APP 屏幕上显现首要操作的按钮。一般,它是一个高于其他页面内容的圆形图标按钮。此按钮一般能够即时拜访用户运用 APP 履行的根本操作或抢手操作。依据移动 APP 的设计和信息架构,FAB 能够:


1.履行典型的中心操作(翻开新电子邮件的屏幕,翻开增加相片或视频内容的屏幕,在库中查找所需内容等)

2.显现其他操作


3.转化为其他 UI 元素。


FAB在屏幕上的方位一般由高可见度要素决议,而且能够依据屏幕的一般设计概念而改变。最好是每个屏幕仅运用一个 FAB,以防止留意力涣散。


某 APP 底部运用栏:堆叠 FAB 和摆放图画列表的交互流程


有用按钮设计的要素


?尺度

按钮巨细是奉告用户布局元素的重要性和组成部分层次结构的中心办法之一。一个有吸引力和高效的 CTA按钮 要足够大,以便快速找到,但不要太大,避免布局结构被损坏。例如:Apple 表明移动 UI 中的 CTA 应至少为 44Х44 像素,而 Microsoft 引荐 34Х26 像素。


?色彩

为了使非有必要按钮相同简单引起留意 ,挑选适宜的色彩至关重要。人类的心情和行为与视觉环境休戚相关,色彩是这方面最强壮的东西之一。在为 CTA 挑选色彩时谨记:按钮和布景色彩有必要比照度适可而止,才能使按钮从其他 UI 内容中一望而知。


?形状

关于 CTA按钮,遍及运用水平矩形。原因是人们现已习气将这个形状看作成一个按钮了。此外,主张设计带圆角的CTA,由于圆角能够起到指向按钮内部,引起对按钮自身的留意。当然,这个形状是在与网页或 APP 屏幕风格共一起运用的。


?布局

按钮的布局关于构建杰出的视觉层次和明晰的导航至关重要。假如它们坐落用户一眼无法找到的方位,即使运用色彩和巨细也杯水车薪。设计师有必要把握中心功用的按钮放置最有用的方位。



某少儿网站的登陆页面设计。让咱们回忆一下页面上运用的一切按钮:


约请拜访者参加的 中心CTA按钮 一望而知:设计师运用了一个圆角矩形填充按钮,其色彩与布景构成比照,但设计了动画人物,其色彩与按钮构成了视觉联络。这是页面上最杰出的视觉元素。

标题包括4个文本按钮,用于将用户转化到网站上的重要内容部分。

标题的左边部分具有快速阅读的辅佐CTA按钮,答应已注册的用户输入其帐户。

在同享按钮被放置在圆形框中,有少量色彩比照,这样能够很简单地找到,一起没有从主 CTA 涣散用户留意力。


原文作者:Marina Yalanska
原文链接:https://tubikstudio.com/ui-design-basic-types-of-buttons-in-user-interfaces/




- End -

以上便是本次 译文内容 ,

更有新鲜内容微信重视大众号:像素大厨PxCook体会一下吧!

专为“产●设●研”而生!

可获取更多设计资讯,和各种作图小技巧





上一篇:以时间丈量人生:2019福布斯中国生活家智享会暨秋季私宴在京举办

下一篇:Flexicomb 材料概念,建筑和家具设计的大舞台


猜你喜欢
/
Like
+ Consultation
申请试听
/
Audition
+ Consultation
  • * 姓 名
  • * 手 机
  • 因为每次上课的学员比较多、教室容量有限,所以只接收前10名试听。没抢到试听名额的只能在下次课才能试听,非常抱歉。