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

图片 17

优异的用户界面让用户用得顺心,从而提高转换率,换言之,好的UI在使用与销售层面上形成双赢。UI设计师Jakub
Linowski列出16点改善UI的诀窍,而这份清单仍在继续累积,有兴趣的读者可以订阅他的电子报,随时获得最新的UI秘诀。

优异的用户界面可以让用户用得顺心,从而提高转化率(conversion
rate),换言之,好的 UI
在使用与销售层面上形成双赢。本文整理了16点优化用户界面的方法,希望对大家有所帮助。

图片 1

1、单栏型式优于多栏

本文原作者加拿大UI设计师Jakub Linowski 译文出处: Inside

本文共计2836字,阅读大约需要10分钟

单栏型式让你更能掌握自己的内容,从顶部到底部一气呵成,用故事引导读者,最终是要诱引他们「采取行动」;而多栏反而可能导致读者分心。

单栏型式优于多栏

按钮是用户界面中最普遍的交互元素之一。更重要的是,它们对于创建可靠的交互和积极的用户体验至关重要。今天,我们在这里收集了网站和移动应用程序中常见的按钮类型的定义和示例。

2、不要劈头销售产品

单栏型式让你更能掌握自己的内容,从顶部到底部一气呵成,用故事引导读者,最终是要诱引他们「采取行动」(call
to action,下称CTA,意指下载或消费等目的);而多栏反而可能导致读者分心。

什么是按钮?

「略施小惠」给用户,贩卖的意图不要设计得太明显。小小的优惠或礼物,对未来的销售会带来大大的帮助。

图片 2

按钮是一个交互元素,可以让您能够根据特定的命令从系统获得预期的交互反馈。基本上,按钮是一个控件,允许用户直接与数字产品通信,并发送必要的命令来实现特定的目标。例如,发送电子邮件、购买产品、下载一些数据或内容、打开播放器以及其他大量可能的操作。按钮之所以如此普遍,原因之一是它们能有效地模拟与现实世界中对象的交互。

3、统一相似的功能,避免支离破碎的UI

不要劈头销售产品

现代UI按钮非常多样化,可以满足各种用途。典型且经常使用的按钮,其呈现交互部分,一般显示为可见性并具有特定的几何图形,同时有副本支持说明通过该按钮将执行的操作。设计师需要精心设计有效且引人注目的按钮,这些按钮要自然地融入整体设计风格,在对比度及布局上要明显突出。

浏览网站时,我们很常看到琳琅满目的元素或特色,但它们的功能毫无二致,而相似的选项太多,只会提高让用户无所适从。倘若发现自己的网站内有以不同型式重复相同功能的状况,不妨考虑重新设计UI,把类似功能整合起来。譬如图中「Customer
Service」、「Contact Us」其实是一样的意思,应当保留一个选项就好。

「略施小惠」给使用者,贩卖的意图不要设计得太明显。小小的优惠或礼物,对未来的销售会带来大大的帮助。

接下来让我们看看移动和 Web 界面中广泛使用的按钮类型 👇

4、用者见证或提出销售实据

图片 3

CTA按钮

「社会认同」是刺激转换率很好的策略,自己再怎么天花乱坠终究只是自吹自擂,请用户见证或数字实据才有效。

统一相似的功能,避免支离破碎的UI

一个号召性用语按钮是用户界面的一个交互元素,目的是鼓励用户采取交互行为,然后提供特定页面或屏幕的转换,换句话说,它将被动用户变为主动状态。因此,从技术上讲,它可以是通过号召性用语文本支持的任何类型按钮。它与页面或屏幕上的所有其他按钮不同之处在于其引人注目的特性:CTA按钮必须引起注意并刺激用户执行所需的操作。

5、主要目的请反覆强调,别只提一次

浏览网站时,我们很常看到琳琅满目的元素或特色,但它们的功能毫无二致,而相似的选项太多,只会提高让使用者无所适从。倘若发现自己的网站内有以不同
型式重复相同功能的状况,不妨考虑重新设计UI,把类似功能整合起来。譬如图中「Customer
Service(客服)」、「Contact
Us(联系我们)」其实是一样的意思,应当保留一个选项就好。

文本按钮

希望用户点击的链接或按钮,别只出现一次,可以考虑放在单栏网页的顶端与底部,或在多个页面呈现。

图片 4

顾名思义。文本按钮意味着没有任何形状、填充标签或类似的东西。因此,直观的看,它看起来并不像按钮。不过,可以用到标有颜色或带下划线的这些按钮,依然可以实现用户交互转换。文本按钮通常用于创建辅助交互部分,并不会分散主标题或CTA元素的注意力。

6、清楚区别三种功能性元素

使用者见证或提出销售实据

某网站设计:整体交互部分采用文本按钮,所有其他功能仅包含标题和标签中的复制功能,这种文本按钮方式一般用于简约风格的网页

可点击的元素、已点击的元素、纯文字三者彼此应该以颜色、深度或对比等各种设计技巧清楚区隔,让用户浏览网站畅行无阻。例如左图,蓝色字体是链接,黑色字体是用户点击的选项,或者是用户正在浏览的页面。

「社会认同」(social
proof)是刺激转换率很好的策略,自己再怎么天花乱坠终究只是自吹自擂,请使用者见证或数字实据才有效。

下拉按钮

7、突显推荐方案

图片 5

单击下拉按钮时,将显示互斥项目的下拉列表。一般在设置按钮中常见。当用户选择列表中的一个选项时,通常按颜色被标记为活动的。

如果服务有多种选择,请把最推荐的方案强调出来,如左图就将「product
X」特别放大,Y、Z 缩小。

主要目的请反覆强调,别只提一次

以下图为例:单击按钮时,将打开选项下拉列表。只要您选择完成其中一项后,下拉列表就会消失,只保留选择选项和加号按钮,以防您再次重复选择下拉列表。

8、善意提醒vs. 突兀确认

希望使用者点击的连结或按钮(比如购买或下载),别只出现一次,可以考虑放在单栏网页的顶端与底部,或在多个页面呈现。

“汉堡”按钮

如果用户更改了某个选项,用一行文字提醒他们可以「复原」就好,无需大费周章设计「再次确认」的跳出窗口。因为多数时候用户的动作都具有意识,后者太突兀,可能让用户觉得被纠正而产生被冒犯的感觉。

图片 6

它是隐藏菜单式按钮。单击或光标选择按钮时,菜单会展开。这种菜单的名称由于它的形状由三条水平线组成,看起来像典型的面包

9、清楚阐述目标客群

清楚区别三种功能性(可点击、已点击、纯文字)元素

  • 肉 – 面包,顾名“汉堡”按钮。现在它已是一种广泛应用的 Web
    和移动布局的交互元素; 关于其利弊的争论也很激烈。

描绘适合使用你服务或产品的客群,可以链接到更多相似特质的人,同时也让他们感受自己的独特性。

可点击的元素(连结、按钮)、已点击的元素、纯文字三者彼此应该以颜色、深度或对比等各种设计技巧清楚区隔,让使用者浏览网站畅行无阻。例如左图,蓝色字体是连结,黑色字体是使用者点击的选项,或者是使用者正在浏览的页面。

对于活跃互联网用户来说,默认情况下知道此按钮隐藏了各种类别的网站内容,因此这个技巧不需要额外的解释和提示。好的是,汉堡按钮菜单释放空间使界面更简约和舒服;
从功能的角度来看,它为其他重要的布局元素节省了大量空间。可以提到的响应和自适应设计隐藏导航元素使界面在不同设备上看起来更和谐。

10、肯定,避免犹豫不决

图片 7

不喜欢“汉堡”按钮的人认为,这个设计元素可能会让那些不经常使用网站的人感到困惑,并且会被那些具有高度抽象性的标志误导。这可能会对导航产生负面影响,并成为用户体验不佳的原因。因此,应在用户调研和定义目标受众的能力和需求后做出关于应用“汉堡”按钮的决定。

语气应该直接且肯定,优柔寡断是大忌,讯息中如果出现「也许」、「有趣吗?」、「想要吗?」等疑问字眼,在显示自信与强调权威上可能还有进步空间。

突显推荐方案

这是使用“汉堡”按钮功能的网站示例。它可以隐藏扩展的选项菜单,以便将用户的注意力集中在令人印象深刻的视觉效果和核心信息上

11、采用强烈对比

如果服务有多种选择,请把最推荐的方案强调出来,如左图就将「product
X」特别放大,Y、Z 缩小。

可伸展按钮

CTA应该与众不同。运用色调、深度、互补色等方式,将CTA跟其他网页元素区隔开来。

图片 8

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

12、产品的诞生地点

善意提醒vs. 突兀确认

某 APP
:标签栏的中央交互元素是一个加号按钮,用户可以在操作过程中添加新行程或新项目。为了使体验更简单,按钮被扩展为一组标记明确类型的内容的按钮,以便用户可以在开始时做出选择并到达必要的屏幕

说明你、你的产品或服务来自何处,就像在自我介绍一般,赋予人性化的亲切感受,而且强调产地或许也会带来品质保证的效果。

如果使用者更改了某个选项,用一行文字提醒他们可以「复原」就好,无需大费周章设计「再次确认」的跳出视窗。因为多数时候使用者的动作都具有意识,后者太突兀,可能让使用者觉得被纠正而产生被冒犯的感觉。

**分享按钮**

13、表单问题愈简化愈好

图片 9

分享按钮可以将内容或直接共享到社交网络帐户。为了使这种联系更加清晰,网站上会出现一些图标,这些图标具有特定社交网络的
logo
。如果用户不是专门为了分享登录网站的话,一般不需要将分享按钮详细化,只看到图标也是可以的,这种方法适合简约风格和有效利用负空间。不会让用户过于关注分享按钮,而抢了页面主要内容的风头。

注册表单太杂,用户往往容易不耐烦而半途放弃,问题尽量少而精简。

清楚阐述目标客群

一家风格简约的某网站。在主页的左下角,您可以看到社交平台的 logo
图标。它们很容易引人注目但又不影响网站内容平衡,不会分散核心导航和
CTA按钮 的注意力

14、别把选项藏起来

描绘适合使用你服务或产品的客群,可以连结到更多相似特质的人,同时也让他们感受自己的独特性。

镂空按钮

下拉式选单虽然不占空间,但却让选项更难被察觉。适合下拉式选单的问题是可预测性的或者人人皆很熟悉的时间或地理位置,跟产品或服务有关的重要问题选项,最好并列在页面明显的位置上。

图片 10

镂空按钮是一个看起来透明的按钮。视觉上是以细线形状环绕按钮呈现的。这种按钮有助于归类视觉层次结构,以防出现多个CTA元素导致用户难以分辨主次信息:核心
CTA 以填充按钮显示,而辅助以镂空按钮给出。

15、连贯顺畅的页面

肯定,避免犹豫不决

某 APP 首页:有三种不同类型的按钮:核心 CTA
以填充按钮,提供快速注册方式; 镂空按钮提供了次要的选项;
文本按钮被放到下一行并用颜色标注。这种方法有助于在屏幕上构建按钮的可靠视觉层次结构

不要让用户产生「已经卷完页面」而实际上根本还未看到底部的错觉。制造一种视觉型式或节奏,令用户得以顺利浏览完整个页面,才不会白费苦工。

语气应该直接且肯定,优柔寡断是大忌,讯息中如果出现「也许」、「有趣吗?」、「想要吗?」等疑问字眼,在显示自信与强调权威上可能还有进步空间。

**浮动操作按钮**

16、不要分散焦点

图片 11

浮动操作按钮是在 APP
屏幕上显示主要操作的按钮。通常,它是一个高于其他页面内容的圆形图标按钮。此按钮通常可以即时访问用户使用
APP 执行的基本操作或热门操作。根据移动 APP 的设计和信息架构,FAB 可以:

如果你的网页唯一目的是要触发用户卷到底部时「采取行动」,那中间安插的任何链接都可能导致他们分心,甚至将他们带离你的网站,因此必须小心谨慎的安排链接数量与位置。

采用强烈对比

1.执行典型的核心操作

CTA 应该与众不同。运用色调、深度、互补色等方式,将CTA
跟其他网页元素区隔开来。

2.显示其他操作

图片 12

3.转换为其他 UI 元素。

产品的诞生地点

FAB在屏幕上的位置通常由高可见度因素决定,并且可以根据屏幕的一般设计概念而变化。最好是每个屏幕仅使用一个
FAB,以避免注意力分散。

说明你、你的产品或服务来自何处,就像在自我介绍一般,赋予人性化的亲切感受,而且强调产地或许也会带来品质保证的效果。

某 APP 底部应用栏:重叠 FAB 和排列图像列表的交互流程

图片 13

**有效按钮设计的因素**

表单问题愈简化愈好

⚪尺寸

注册表单太杂,使用者往往容易不耐烦而半途放弃,问题尽量少而精简。

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

图片 14

⚪颜色

别把选项藏起来

为了使次要按钮同样容易引起注意
,选择合适的颜色至关重要。人类的情绪和行为与视觉环境息息相关,颜色是这方面最强大的工具之一。在为
CTA 选择颜色时谨记:按钮和背景颜色必须对比度恰到好处,才能使按钮从其他
UI 内容中一目了然。

下拉式选单虽然不占空间,但却让选项更难被察觉。适合下拉式选单的问题是可预测性的或者人人皆很熟悉的时间(如出生日期)或地理位置,跟产品或服务有关的重要问题选项,最好并列在页面明显的位置上。

⚪形状

图片 15

关于
CTA按钮,普遍使用水平矩形。原因是人们已经习惯将这个形状看作成一个按钮了。此外,建议设计带圆角的CTA,因为圆角可以起到指向按钮内部,引起对按钮本身的注意。当然,这个形状是在与网页或
APP 屏幕风格一致时使用的。

连贯顺畅的页面

⚪布局

不要让使用者产生「已经卷完页面」而实际上根本还未看到底部的错觉。制造一种视觉型式或节奏,令使用者得以顺利浏览完整个页面,才不会白费苦工。

按钮的布局对于构建良好的视觉层次和清晰的导航至关重要。如果它们位于用户一眼无法找到的位置,即便运用颜色和大小也于事无补。设计师必须掌握核心功能的按钮放置最有效的位置。

图片 16

某少儿网站的登陆页面设计。让我们回顾一下页面上使用的所有按钮:

不要分散焦点

邀请访问者加入的 核心CTA按钮
一目了然:设计师使用了一个圆角矩形填充按钮,其颜色与背景形成对比,但设计了动画人物,其颜色与按钮形成了视觉联系。这是页面上最突出的视觉元素。

如果你的网页唯一目的是要触发使用者卷到底部时「采取行动」,那中间安插的任何连结都可能导致他们分心,甚至将他们带离你的网站,因此必须小心谨慎的安排连结数量与位置。

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

图片 17

标题的左侧部分具有快速浏览的辅助CTA按钮,允许已注册的用户输入其帐户。

在分享按钮被放置在圆形框中,有少许颜色对比,这样可以很容易地找到,同时没有从主
CTA 分散用户注意力。

原文作者:Marina Yalanska

原文链接:

– End –

以上就是本次 译文内容 ,

更有新鲜内容微信关注公众号:像素大厨PxCook体验一下吧!

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

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

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图