宁波小程序开发_宁波软件开发_宁波网络公司【昱远信息】 15058005455
一个UX设计中要遵循的基本规则(一)

按钮设计的基本规则

生活中的每一件事都有一些应该考虑的基本规则。按钮设计的典型之处在于它看起来相当简单,但设计师不得不考虑许多看似很小的因素。这些是您在下一个 UX 设计中要遵循的一些准则。

1. 让它看起来可点击

每当用户使用任何产品时 开发app大概需要多少钱 ,他们都必须解码界面中每个元素背后的含义和功能。就像所有其他元素一样,您不希望用户花费很长时间来理解和解码他们看到的任何元素 - 他们花费的时间越长定制小程序,您的可用性就越低。

这就是为什么您需要停下来考虑一下该按钮是否实际上是可点击的。作为设计师,您对自己的创作非常熟悉。你知道每一个小小的互动,每一个环节。另一方面,用户从未见过您的产品,也不知道它的作用或工作原理。您不能确定人们会将该按钮识别为一个精美的链接,这取决于您是否在他们的脑海中没有任何怀疑的余地。

网站和移动应用程序的按钮设计

所以尽量使用我们都熟悉的按钮形状和样式。这包括方形按钮、圆角方形或其他常见界面中可以找到的其他形式的按钮。我们知道每个设计师都希望他们的作品是原创的,但如果人们不能使用它,那么提供真正独特的东西是没有用的。

我们推荐带阴影的圆角正方形。我们喜欢为按钮添加阴影,因为它增加了一种深度感,向用户显示按钮可以被点击。您还可以添加微交互,以便当光标悬停在按钮上时,会发生某种反应。这可能是颜色的轻微变化或小幅向上移动 - 重要的是用户知道可以单击该元素。

2. 让查找和预测变得容易

正如我们在形状方面都习惯了某种类型的按钮设计一样,用户也知道按钮在任何给定屏幕中的位置。我们打开一个网页并想立即找到按钮 - 没有用户喜欢四处寻找按钮。

这些是对任何网站的预先形成的期望,最好不要与它们抗争。相反,请尝试将它们作为起点应用到您的设计中,以了解如何将其提升为与您的风格相匹配的东西。

您不想与人们对按钮应该放在哪里的想法作斗争的原因是可用性需要可预测的设计 - 包括按钮设计。您希望您的产品对用户有意义,确保良好的可发现性和可学习性。这意味着通过反映人们对您的设计的期望,您可以让他们更轻松地第一次浏览产品并了解它是如何工作的或者它可以为他们做什么。

网站和移动应用程序的按钮设计

使用对比色将用户的注意力引向按钮并传达其重要性。善用负空间,将视线引向屏幕和按钮,而不是让用户在看清按钮之前就咀嚼内容。

在考虑您的按钮设计如何影响产品的可用性时,您必须考虑产品对一致性的需求。即使你让你的按钮看起来像人们期望的那样,并把它放在屏幕上的一个共同点——如果每个按钮看起来不同,人们会混淆它们是否提供相同的功能,或者它们是否会与其他按钮以相同的方式工作。

您需要有一个连贯的按钮设计,无论它们与什么功能相关,都能在您网站的每个屏幕上闪耀。一旦您有了可以在所有按钮上复制的样式,您就可以在您的网站上为按钮建立标准位置。遵循普通用户的逻辑和期望——例如,当面对“上一个”或“下一个”按钮时,大多数用户会期望“上一个”在左侧,“下一个”在右侧。

3. 告诉用户每个按钮的作用。不要让他们猜。

当有人告诉你微文不重要时,千万不要相信。诚然,作家们会争辩说,在传达信息时,每一个字都很重要,但这并没有让它变得不那么真实。如果没有正确的微文案,您的按钮设计将是不完整的。

网站和移动应用程序的按钮设计

按钮内的文本不需要限制为“确定”和“取消”。事实上,通过将这些通用术语放在一边并专注于每个按钮的作用,您的可用性会有所提高。拥有“永久删除”或“取消预订”按钮可确保您的用户理解每个按钮,甚至通过减少用户犯错的机会来提高可用性。

另一个有用的按钮设计技巧是取消只有经典的继续或取消按钮的弹出框。相反,尝试创建一个包含至少一行文本的框,描述正在做什么以及它对用户意味着什么。

4.尺寸很重要:有些按钮人们可以实际点击

按钮设计还意味着决定您希望每个按钮有多大。这似乎是一个小细节,但绝不是肤浅的。

按钮的大小对于移动设计尤为重要。太大的按钮会导致屏幕视觉上引人注目,而太小而无法用普通手指点击的按钮。麻省理工学院的触控实验室在 2003 年发表了一项研究,发现大多数指尖的宽度为 8-10 毫米。

网站和移动应用程序的按钮设计

明确的含义是您不希望按钮小于 10 毫米 - 除非您愿意冒着设计可用性的风险,因为用户的手指太小了。旨在为按钮设计在您的设计中建立视觉层次结构。这意味着最重要的功能,任何给定屏幕的主要转换,应该是最大的按钮。当您有两个相对的按钮时,这也有效 - 使正面结果按钮看起来更重要,并使其略大于负面结果按钮。

如今,没有设计师可以过着不担心响应能力的生活,即使是在按钮设计方面也是如此。在查看设计并与之交互时,您需要考虑可能使用的多种设备。这可以通过考虑基于用户首选屏幕尺寸的按钮尺寸定义的变化来完成。

5. 没有一个按钮来处理所有事情

在同一个屏幕上为用户提供所有功能听起来是个好主意,但这是一个陷阱。人们觉得他们想要拥有所有的选择,但我们并不真正欣赏要做出的决定的浪潮。正如选择悖论和希克定律所指出的那样,给用户太多的选择会导致他们僵住并感到不知所措。

网站和移动应用程序的按钮设计

当然,将所有按钮都放在主屏幕上看起来很酷——除了你的产品不是飞机驾驶舱。您无需牺牲产品的可用性来让用户点击几下。通过尝试找到以合乎逻辑的方式让用户达到预期结果的方法,将您的按钮设计用作一种工具。在适当的信息架构框架上投入一些时间是一个很好的起点。

按钮设计不仅关乎按钮的外观或功能,还关乎如何将它们呈现给用户。从逻辑上讲,不要急于求成——创建人们可以轻松遵循的路径,安装一个通向产品所有关键点的路径框架。

6. 始终提供反馈或冒着激怒用户的风险

与真人不同,除非您告诉它,否则计算机不会给您反馈。在现实生活中的对话中,人们的肢体语言总是让我们知道他们正在倾听并理解我们在说什么。这使对话更容易——这就是用户在使用您的产品时所做的事情。这就像人与软件之间的对话。

您的产品应始终让用户知道该命令已及时注册。在将信号提供给用户之前让这么多时间过去,以至于用户甚至可能没有意识到信号是关于什么的。确保在转换期间不会丢失任何内容的一个好方法是在按钮设计中定义按钮状态。

网站和移动应用程序的按钮设计

每当用户与按钮交互时,它应该更改状态以让用户知道由于他们的操作而发生了某些事情。他们需要知道计算机有响应。

在相关的说明中,微交互也是向用户传达系统状态的好方法,正如我们在之前的博客文章中所探讨的那样。借助智能微交互,您可以使用户和软件之间的交流变得顺畅——事实上,设计这些微小的交互会带来很多乐趣定制微小程序,这只是一个额外的好处。

Android 和 iOS 应用程序上的移动按钮设计

按钮不是 UI 设计中最复杂的方面定制微小程序,但它们是必不可少的。这个问题主要发生在移动屏幕上,因为空间的减少往往会加剧任何设计错误并导致糟糕的用户体验。断开的链接、无法点击或无响应的按钮以及缺乏视觉反馈只是我们全面看到的一些移动 UI 按钮设计缺陷。

那么我们如何设计用户无法获得足够的移动 UI 按钮呢?请继续阅读我们的七个技巧,以了解设计令人惊叹的按钮以响应用户交互并提供有用的、可操作的反馈。不要忘记随身携带您最喜欢的应用程序原型制作工具!

1.坚持核心 UI 设计原则

当谈到设计按钮的UI设计原则时,最重要的是关注按钮的用途。从拟物化的 3D 热潮到平面设计革命和浮动动作按钮热潮,可访问性一直是用户在整个 UI 按钮设计过程中的重中之重。但要使其正常工作,按钮需要看起来像一个按钮。我们谈论的是尺寸、形状和填充。

谁告诉你尺寸无关紧要,从来没有设计过移动按钮。按钮的大小和形状可以决定用户交互的可能性。如果用户无法识别可点击元素,他们将不会与之交互。如果它对他们的手指来说太小,他们也不会与之互动,但他们肯定会生气。

尺寸

当“点击”是移动应用的主要输入方式时,Android 的 Material Design 原则建议触摸目标至少应为 48 x 48dp,其间至少应为 8dp(或更大)。这是为了确保平衡的信息密度和可用性。

网站和移动应用程序的按钮设计

形状

就形状而言,这实际上取决于您的设计目的。例如,在 Android UI 设计中 app开发大概多少钱 ,平面和凸起的材质按钮应为 36dp 高,最小宽度为 88dp,角半径为 2dp(平面)/默认高度为 2dp(凸起)。

填充

填充,本质上是内容或组件周围的空白,为 UI 提供了喘息的空间,并避免让用户不知所措。在此处阅读有关 UI 设计中留白的更多信息。

2. 使用颜色使您的 UI 按钮设计具有可操作性

多年来,UI 按钮设计的视觉效果发生了巨大变化,但有一件事没有改变:使用颜色和对比度来引导用户进行有意义的操作。

用户渴望可预测性和熟悉度,因此使用颜色来帮助他们识别和解释您的应用程序的内容并与正确的元素进行交互。请记住,您选择的调色板将决定用户如何识别和记住用户界面中的元素。UI 中的颜色应该可以帮助用户导航按钮并预测每次点击背后的操作,并与您的品牌相匹配。

网站和移动应用程序的按钮设计

应该使用对比度来帮助用户在不同的按钮之间进行选择。无法解读操作会给用户带来不确定性,并可能减慢他们的旅程,从而导致糟糕的用户体验,并且很可能导致他们点击离开您的应用程序。

通过颜色和对比度专注于识别和清晰度。对比度的 UI 按钮设计规则很简单:积极动作的高对比度,消极动作的中等对比度,中性动作的低对比度。任何放置在其旁边的中性或负面动作都应具有低颜色对比度以淡化它们,尊重视觉层次。

iOS 有浅色和深色的配色方案,使用对比度和半透明来防止界面元素变得过于强烈或乏味。

3.通过消除屏幕上的摩擦来帮助用户确定任务的优先级

在确定任务的优先级时,您应该消除任何减慢用户进度的摩擦,以确保他们能够完成任务。通过将颜色和对比度与巧妙的分层、浮雕和微妙的阴影相结合,您可以在平面屏幕上营造出 3D 的错觉。这会引起人们对提升或主要操作的注意,并将它们与周围的 UI 元素区分开来。同样,阴影和高光可帮助用户解释视觉层次结构并了解哪些组件是交互式的。

考虑在最重要的按钮之间添加突出显示以区分主要按钮和次要按钮。正确使用分层和阴影以及元素的正确定位将帮助您实现更高的目标网页转化率 小程序多少钱 ,因为用户可能会注意到并使用号召性用语 (CTA) 按钮。

幽灵按钮、透明的、基本的矩形或以非常细的线条为界的正方形,可以成为消除 UI 设计中摩擦的好方法。通过巧妙匹配的背景,幽灵按钮充当次要内容,将用户的注意力吸引到主要内容或按钮上,而不会压倒用户。

考虑以下示例,该示例直接取自 Material Design 的官方指南。它使用每个按钮的视觉效果来创建一个视觉层次结构,清楚地代表每个按钮的重要性。

网站和移动应用程序的按钮设计

4. 在你的 UI 按钮设计中用视觉反馈来奖励用户

反馈应该在用户旅程的每一步中发挥作用。作为习惯的产物,它激励用户知道他们在做正确的事情,或者系统承认他们的行为。设计师可以通过有用的反馈来塑造这种互动。

网站和移动应用程序的按钮设计

请记住,按钮不是单一状态的对象,我们应该始终提供有关用户即将/刚刚执行的任务的反馈。奖励用户交互的一个特别重要的时间是在他们单击主页按钮执行重要任务之前,例如注册时事通讯或下载免费试用版。

按钮的颜色变化将向用户显示他们的操作已被接受。微妙的动画和动作将传达按钮的意图并鼓励用户单击以完成它——快乐的用户,快乐的你!

测试你的按钮设计

用户测试任何设计都是一个值得拥有自己指导的主题——这就是我们为您制作它的原因!如果您想更深入地了解测试的理论和实践,请查看我们的用户测试指南。对于更通用的聊天,让我们回顾一些很好的方法来测试用户如何交互并对您的按钮做出反应。

导航测试

在你开始担心如何让你的按钮看起来很棒之前,你必须覆盖你的基础并验证你的基本导航设计。您的所有主要导航按钮都必须正常工作,让用户在设计中不可见,而不会出现任何重大问题。

我们一直提倡快速线框图产品的基本骨架,并开始测试导航和信息架构是否有意义。有了线框,您可以开始某种形式的用户测试来回答基本问题,例如:

A/B 测试

在微调按钮设计方面,也许很少有方法能像 A/B 测试那样具有启发性。营销人员特别喜欢 CTA 按钮,它是关于测试同一个按钮的两个不同版本并比较它们的性能。如果您的团队想要同时测试许多不同的按钮设计,多变量测试可能是一种更快、更实用的选择。

网站和移动应用程序的按钮设计

热图

虽然与 A/B 测试相比,热图可能无法给我们直接的答案,但这种用户测试方法仍然会对您的产品产生巨大影响。它以非常直观的方式告诉我们用户最关心的内容,这在测试您的按钮设计时非常方便。

UI 套件可以让您的按钮设计更上一层楼

这里有一些带有几种不同风格按钮设计的 UI 工具包——也许在这里您可以找到适合您最新项目的完美搭配,或者为开始您的下一个设计奠定坚实的基础。

材料设计

这个材料设计 UI 套件功能丰富且功能强大。在您的移动应用原型中使用 170 多种不同的组件,包括您可能需要的所有按钮和操作控件。每个按钮已经带有一些集成到组件中的基本交互以节省时间 app开发需要多少钱 ,阴影在设计中起着重要作用。

网站和移动应用程序的按钮设计

IOS

与 Justinmind 中的其他 UI 套件一样,iOS UI 套件包含数百个最新组件 宁波小程序开发公司 ,为您的下一个项目做好准备。享受您想要的所有按钮,所有这些按钮都是完全可扩展和可定制的。这些组件还带有反映 iOS 感觉和外观的基本但经典的交互。

网站和移动应用程序的按钮设计

网络线框库

这个 UI 套件具有简单的按钮和清晰的实体形状,是大多数线框图项目的完美起点。采用简单而经典的按钮设计并旋转它以适合您的风格和项目的风格。除了按钮之外,您还会发现 UX 设计师需要从一开始就提出想法的所有基本构建块。多合一 UI 套件!

此 UI 工具包已预装在 Justinmind 中,但如果您愿意,请查看 Web Wireframing 库组件。

网站和移动应用程序的按钮设计

引导加载程序

Bootstrap 是一个更加多样化和有趣的 UI 工具包,带有各种颜色的圆形边缘按钮。纽扣设计更年轻,为那些希望在设计中添加一点流行色彩的人提供更多选择。按钮包括所有经典和几个下拉选项。

您可以在我们的专门文章中阅读有关 Bootstrap UI Kit 的更多信息。

网站和移动应用程序的按钮设计

剑道

KendoUI Toolkit 是一个有趣的工具供您使用。它带有各种尺寸的按钮,主要和次要。通过多种尺寸选择,使用 Kendo 可以更轻松、更快速地创建下一个 UX 设计。更不用说,我们只是喜欢按钮组上的按钮设计!

网站和移动应用程序的按钮设计

总结

按钮设计很重要,因为按钮可以帮助用户浏览您的产品,还因为它们迫使用户转换为任何想要的结果。它们需要仔细规划,以便您的用户可以立即知道按钮在哪里,同时永远不会停下来思考按钮。让它浮华,让它有用——让用户充分享受你的产品。

返回列表

相关动态