当前位置:澳门贵宾厅 > 澳门贵宾厅 > 让用户界面成为内容的支撑手机版澳门贵宾厅),按钮类型
让用户界面成为内容的支撑手机版澳门贵宾厅),按钮类型
2020-03-14

时间: 2019-12-27阅读: 69标签: 按钮

设计原则

遵从(Deference):UI应该有助于用户更好地理解内容并与之交互,并且不会分散用户对内容本身的注意力

清晰(Clarity):各种尺寸的文字清晰易读;图标应该精确醒目,去除多余的修饰,突出重点,以功能驱动设计。

深度(Depth):视觉的层次感和生动的交互动画会赋予UI新的活力,有助于用户更好地理解并让用户在使用过程中感到愉悦。

无论你是重新设计现有的应用,还是重新开发一个新应用,请基于下列方法进行设计考虑:

首先,去除掉UI元素让应用的核心功能突显出来,并明确之间的相关性。

然后,使用iOS的主题来定义UI并进行用户体验设计。完善细节设计,以及适当合理的修饰。

最后,保证你设计的UI可以适配各种设备和各种操作模式,使得用户在不同场景下都可以享受你的应用。

总结:凸显内容和功能

        功能驱动设计(设计跟随内容,让用户界面成为内容的支撑)

        细节优化提升体验。


按钮是UI/UX最关键的组件之一,在不同设备及平台上得到了广泛的应用。它们具有影响用户行为和体验的能力。假如按钮设计不合理,会令用户产生误解及障碍。按钮设计的目的是引导用户完成我们在交互系统中预置的用户流程得以完成,但糟糕的按钮设计则可能会是你丢失你的用户。那么,现在是时候来研究该如何设计你的按钮了!所以今天我们不聊开发相关的知识,我们来看看这个在界面中小小并且重要的元素它的设计思路是怎样的吧。

设计方法

用半透明UI元素样式来暗示背后的内容。半透明的控件元素(比如控制中心)可以提供了上下文的使用场景,帮助用户看到更多可用的内容,并可以起到短暂的提示作用。

使用大量留白。留白可以使重要的内容和功能更加醒目、更易理解。留白还可以传达一种平静和安宁的心理感受,它可以使一个应用看起来更加聚焦和高效。

充分利用整个屏幕。让用户界面成为内容的支撑手机版澳门贵宾厅),按钮类型。

让颜色简化UI,使用一个主题色。

用层次来进行交流,在不同的视图层级上展现内容,用以表达层次结构和位置,这样可以帮助用户了解屏幕上对象之间的关系。

使用布局来沟通. 布局包含的不仅仅是一个应用屏幕上的UI元素外观。你的布局,应该告诉用户什么是最重要的,他们的选择是什么,以及事物是如何关联起来的。

            ·遵循从左到右的习惯

               ·使用不同的视觉化重量和平衡来告诉用户当前屏显元素的主次关系。(大小对比,颜色对比...)


1.按钮要设计的让用户不假思索:

对齐/尺寸

使用对齐来让阅读更舒缓,让分组和层次之间更有秩序。对齐让应用看起来整洁而有序,也让用户在滑动整屏内容时更容易定位和专注于重要信息。不同信息组的缩进与对齐让它们之间的关联更清晰,也让用户更容易找到某个控件。

确保用户在内容处于默认尺寸时便可清楚明白它的主要内容与含义。例如,用户应当无需水平滚动就能看到重要的文本,或不用放大就可以看到主体图像。

准备好改变字体大小。用户期望大多数应用都可以响应他们在iOS的设置中设定的字体大小。为了适应一些文本大小的变化,你也许需要调整布局;想要得到更多文本显示相关的信息,请查阅下文“颜色与字体”中相关的内容。

尽量避免UI上不一致的表现。在一般情况下,有着相似功能的控件看起来也应该类似。用户常常认为他们看到的不同总有原因,而且他们倾向于花时间去尝试(译者按:因此为了避免用户做无用的尝试,建议类似的功能外观都保持一样。)

给每个互动的元素充足的空间,从而让用户容易操作这些内容和控件。常用的点按类控件的大小是44 x 44点(points)。


当用户同时看到好几个按钮,并且按钮的意义没有清晰地表述给用户,用户就会被你的“按钮阵”所误导,从而达不到预期的效果。所以具有清晰而合理的按钮层次结构,能促进用户能够直观、即时地分辨出你设计按钮的作用是什么。下面我们来看看影响按钮层次结构的3个方面:

布局

应该让用户时刻清楚自己当前在应用中所处的位置,及如何前往目的页面。无论使用哪种适合你的应用结构的导航,最重要的是用户访问内容的路径要有逻辑、可预期和易于追溯。

使用导航栏(Navigation Bar)帮助用户轻松访问分层内容。导航栏的标题可以显示用户当前所处的层级,而后退按钮可以回到上一层级。

使用标签栏(Tab Bar)显示同类型的内容或功能。标签栏很适合于扁平信息结构,可以让用户在分类之间随意切换,而不用在意当前所处的位置。


按钮类型

使用交互性元素吸引点击

为了暗示交互性,设计时会使用很多线索,包括点击的反馈、颜色、位置、上下文、表意明确的图标标签等。并不需要过于修饰元素来向用户展示可交互性。

一个关键的颜色可以给用户提供很强的视觉指引,尤其是没有冗余的其它颜色时。为了对比,使用蓝色来标记可交互的元素,同时能提供统一的、易识别的视觉风格。

在内容区域,必要时可以给按钮添加边界或背景。位于栏(Bar)、动作列表(Action Sheet)和�警告框(Alert)中的按钮可以不需要边界,因为用户知道在这种区域中大多数选项是可交互的。但是在内容区域,有必要使用边界或背景将按钮从其他内容中区分出来。例如,音乐,时钟,照片,App Store在一些特别的场景中使用这种按钮。


我们先来介绍一下常用的4种类型按钮:

标准手势

手机版澳门贵宾厅 1


=

l 立体按钮:一个具有立体效果的按钮,使它引人注目。

反馈有助于理解

反馈帮助用户了解应用当前在做什么,发现接下来可以做什么以及理解他们动作产生的结果。UIKit的操作和视图提供了很多反馈类型。

尽可能将状态或其他的反馈信息整合到UI中。用户不进行操作或不跳出当前内容就能获得需要的信息是最好的。例如,邮箱将当前的状态显示在不影响当前内容的�工具栏上。

避免显示不必要的提醒对话框。对话框是很强的反馈机制,只有在传递非常重要,且可操作的信息时才需要使用它。如果用户常看到很多没有重要信息的对话框,他们很快就会忽略所有对话框提醒。想要了解更多信息


=

l 平面按钮:没有任何花哨效果的常规平面按钮。

颜色与字体

在iOS系统中,颜色会用于表明交互,传递活性以及提供视觉连续性。内置的应用程序选择使用那些看起来更具个性的、纯粹、干净的颜色,并辅以或亮或暗的背景组合。

如果你要创建多样的自定义颜色,要确保它们能够和谐共存。例如,如果你的应用的基本风格是柔和的色调,你就应该创建一个协调的柔和色调的色板用于整个应用。

注意在不同情境下的颜色对比。例如,如果在导航栏的背景与栏按钮标题之间没有足够的对比,按钮就会很难被用户看到。一个快速但不严谨的方法是通过将设备置于不同的光照环境之中(包括晴朗的室外)来测试设备上的颜色是否具有足够的对比度。

虽然在设备上查看你的应用能够在一定程度上帮助你找到需要调整的地方,但这仍代替不了能产生可靠结果的更科学客观的方法。这种方法涉及到判定前景色和背景色的亮度值是否符合一定的比率。这个比率值可以通过在线对比度计算器或者根据WCAG2.0标准中提供的公式自己计算获得。你应用中理想的颜色对比度应该是4.5:1或更高。


你可能想要增加某些文字的权重,来帮助用户可视化你的内容的层次结构,或者把用户的注意力吸引到特定的词或短语。另外,你可以通过增加较小文字的权重和减小较大文字的权重,在多个不同字号的、相邻的标签中建立视觉凝聚。字体权重在内容的整体风格和表达中有重要影响,因此你可以选择特定的权重来达到设计目的。

文本尺寸的响应式变化需要优先考虑内容。并不是所有的内容对于用户都是同等重要的。当用户选择更大的文本尺寸时,他们是想要使他们关注的内容更容易阅读;他们并不总是想要屏幕上的每个单词都更大。

例如,当用户选择具备更大易用性的文本尺寸时,邮件将会以更大的尺寸显示邮件的主题和内容,而对于那些没那么重要的信息——如时间和收件人——则采用较小的尺寸。

确保一个自定义字体在不同尺寸下的所有类型都具备可读性。实现这一效果的方法之一是效仿在不同的文本尺寸下iOS系统呈现字体样式的一些方法。例如:

·文本永远都不应该小于11点(points),即使是用户选择极小的文本尺寸。相较而言,内容样式使用17点的字号作为     大尺寸,这也是默认的文本字号。

·通常来说,字号与行距值在每一档的文本尺寸设置中差别为1点。唯一例外的是两种标题的样式,它们在极小、小和   中尺寸的设置中均使用相同的字号、行距和字距。

·在最小的三种文本尺寸中,字间距相对较大;而在最大的三中文本尺寸中,字间距相对紧凑。

·标题和内容的样式使用相同的字体尺寸,同时,为了区分标题与内容样式,标题样式使用更重的值。

·导航控制栏的文本使用相同的字号,而内容文本的样式则使用大尺寸的设置(值为17点)。

·文本总是使用常规或者中重,一般不适用轻或者加粗。

l 幽灵按钮:就像它的名字一样,幽灵按钮通常是透明的(没有背景色填充,和背景是融为一体的),唯一的区别是这个按钮有一个边框勾勒出按钮的轮廓。

图标和图形

每个应用都需要一个漂亮的图标。用户常常会在看到应用图标的时候便建立起对应用的第一印象,并以此评判应用的品质、作用以及可靠性。

·应用图标是整个应用品牌的重要组成部分。将图标设计当成一个讲述应用背后的故事,以及与用户建立情感连接的     机会。

·最好的应用图标是独特的,整洁的,打动人心的,让人印象深刻的。

·一个好的应用图标应该在不同的背景以及不同的规格下都同样美观。为了丰富大尺寸图标的质感而添加的细节有可能   让图标在小尺寸时变得不清晰。

l 文本按钮:仅由文本组成的按钮

一般,这几种按钮类型在同一界面中可以以下顺序确定视觉上的主次程度:

立体按钮 平面按钮 幽灵按钮 文本按钮

选择哪种按钮的核心在于根据不同厂家和用户需求来确定类型,以便能够更好的引导用户。例如:

使用立体按钮或平面按钮突出显示主按钮,次要按钮则尽量使用幽灵按钮或文本按钮以突出页面中不同的层次结构。上图中的“免费注册”是主要按钮,因为引导用户注册是这个页面最重要的任务。

相似的按钮

一般外观类似的按钮可以看作是同一层次的按钮,这是因为具有类似视觉特征的元素会被认为更相关。以不同的按钮类型实现不同功能,以降低用户的理解成本,才不会误导用户,例如:

如上图,右侧的“UPDATE”按钮和“more”按钮具有不同的视觉特征,用户能够很好的将它们区分开。

显然,从“Home”按钮到“More”按钮的视觉类型是相同的,处于相同的层级,“Tweet”按钮属于更高层级中的类型。

邻近的按钮

彼此紧密排列的元素往往更相关。邻近有助于你能进一步组织相似的按钮从而为用户带来相同的功能。所以邻近的重要性就像单词之间的空格和段落之间的回车一样重要。正确运用这一原则,对引导用户产生积极的影响。

在按钮之间添加空行以将其分为几种类型。放在一起的按钮会让人从视觉上就任务具有类似的功能。

“More”按钮和“Settings”按钮之间的空格巧妙的将按钮分为了两组,这表明从“All”到“More”是搜索结果的分类,而“Settings”和“Tools”按钮具有其他的作用。

2.让按钮再醒目一点:

首先,正如《Don’t make me think》一书中提到的,用户永远不会在我们网站上通过“阅读”了解内容,他们则是通过“扫视”来了解的。

如果他们错过了我们期望他们按下的按钮,我们就会错失让用户成为潜在客户的商机。所以,把按钮做的足够醒目,从而牢牢抓住用户的眼球是至关重要的!

要做到这一点,通过对比来突出按钮往往是很有效的方法。无论你在什么情况下使用哪种按钮类型,只要做到以下3点,就能使你的按钮最先被用户“捕获”:

负空间

负空间是摄影中常见的一种技巧,它通过画面中大量的留白,通过强烈的对比度来达到突出主体的目的,这个技法在网页设计中也常被用到。

尺寸

尺寸是产生对比度的最有效元素之一。大尺寸的按钮始终可以吸引用户的注意力。首先在按钮周围留出足够的负空间,以突出按钮,同时把调整按钮的大小调整到用户足以在界面上很容易关注到它们。

颜色

通过为按钮设置负空间和尺寸,为按钮添加颜色可以进一步增强对比度。如果可以的话,你可以在调色板中选择一个足够醒目的颜色,以使用户能下意识的点击。

3.不要让用户去猜你的意图:

把每个按钮的作用向用户传达准确是至关重要的。如果按钮的功能显示不清晰,则会引起用户的反感,因为他们不想去猜和承担测试按钮点击后的后果。所以为了更好帮助用户理解按钮,以下三种元素可以解决你的问题:文字,图标和标签。

文字

按钮上的文字简明扼要,有助于用户高效获取信息,确保友好的用户体验。

如上图,对于同一问题,不同用户可能会对“是”和“不是”有不同的判断。在选项中使用适当的描述,而不是单纯的“是”和“否”,能确保用户避免误解获得更好的用户体验。

再例如上图,不用“是”和“否”, “移除”选项就足够的清晰明了。

图标

图标是一种常见的UI元素,它简洁而清晰地以可视化的形式呈现按钮功能。用户可以一目了然地分辨出各种按钮的用途。

标签

对于具有特定或复杂功能的按钮,需要给按钮设置上标签,以简要说明其功能。显示方式为,当光标悬停在按钮上时出现。

结论:

按钮在任何交互系统中都是至关重要的。因此,按钮的设计的好坏直接影响用户的体验和操作的,为能正确引导我们的用户,我们可以:

l 按钮的设计富有层次

l 让按钮在页面中再醒目一点

l 不要让用户去猜按钮的用途

在各种场景下都应该要精心为用户设计按钮,让用户找到自己需要的按钮,直观地做出选择。

那么,希望这篇文章能有所帮助。请随意分享这篇文章。

出处:葡萄城官网原文:-your-buttons-lead-or-mislead-your-users-d5d83531238b