火星网校
设计师按钮UI设计思路总结，考虑到这十点，你将不仅仅只是美工
发布时间：2024-01-26 20:50:54 浏览量：241次
１请确保在整个界面中保持一致性
为什么一致性这么重要？因为用户会不自觉地产生意识，将特定形状的元素识别为『按钮』。因此，一致性不仅有助于创建出色的设计，还能为用户提供更为熟悉的体验，以便用户能够识别所有 UI 元素并将其当做按钮。
2.让文案说明按钮用途
用户会抵触没有明确意义的界面元素。 因此，UI 中的每个按钮都应该有正确的文案或图标。如果一个按钮的文案或图标然人感到奇怪或惊讶，那么请修正它们。
3线状和面状，突出重要按钮
我们在设计按钮的时候，经常会面临着抉择，线状按钮还是面状按钮？其实线状还是面状争论不仅仅存在于按钮，还有icon，tab和标签等样式。面状和线状代表不同的设计理念，我们都知道面状元素在界面中更容易吸引用户的注意力，而线状元素强调的是轻量化。具体到按钮，简单来说就是面状按钮比线状按钮具有更强的可点击性。我们可以来看一个例子：喜马拉雅Fm这个界面中的“录音”按钮其实看起来特别的吃藕，因为很突兀。但是设计师的目的达到了，为了提升用户黏性，他们肯定很希望用户在喜马拉雅Fm里上传自己的录音作品，那么必须做到足够的显眼。
确保与重要任务相关的按钮被突出出来。增加颜色的对比度可让用户专注于操作，并让按钮吸引到用户。
4，避免设计出让用户不知道他们做什么的按钮
按钮应该表明当前任务是什么，让用户知道他们点击按钮后会发生什么。使用动词作为按钮文案是很好的做法。例如，用户正在注册帐户的流程中，一个说写着“创建帐户”的按钮会告诉他们按下按钮后会怎么样，它清楚地表达了当前的任务。这样的按钮文案随时都在帮助用户，给予用户进行操作的信心。
5.易懂的文案
按钮上的文案应该清晰表达按钮的操作行为，如果用户可以理解按钮的操作会感觉更舒适。
6.按钮的视觉主次
在表单或对话框中，按钮有另一种方法来吸引用户的注意。当用户需要在主要和次要行为之间进行选择时，视觉区分是可靠的方法：
主要行为的按钮需要更多的视觉比重，它应该是视觉元素更多的按钮
次要行为（如“取消”或“返回”等）的视觉比重则应该较弱，从而进一步引导人们取得交互过程中的结果
7. 让按钮容易被点击
按钮的尺寸和视觉反馈，在引导用户与其进行交互时具有关键作用。
调整尺寸和间距
你应该考虑到按钮相对于页面上其他元素的大小。 同时需要确保所设计的按钮足够大以供用户进行交互。
图 过小的触摸目标给用户带来艰难的体验 你应该考虑按钮元素的大小，及可点击元素之间的间距，间距有助于区分、明确目标，并为用户界面提供足够的呼吸空间。
8.突出最重要的按钮
确保与重要任务相关的按钮被突出出来。增加颜色的对比度可让用户专注于操作，并让按钮吸引到用户。
行为召唤按钮，重要的按钮（用于引导用户进行你希望的操作。创建有效的 CTA 按钮，需要抓住用户的注意力并诱导他们点击。使用与背景高对比度的颜色是很好的方法。
9.按钮设计自查清单
虽然每个设计看上去都独一无二，但内在是共通的。这就是有一个好的设计清单的地方。为了确保您的按钮设计是适合您的用户，你需要提出几个问题：
按钮是创造流畅用户体验的关键因素，因此在实践是必须要重视的。快速回顾：
让按钮像按钮
让文案说明按钮用途
让按钮容易被看到
让按钮容易被点击
让重要的按钮突出
当你设计按钮时，从最重要的按钮开始，请记住：按钮设计的本质是识别与清晰。
什么是UI按钮组？
顾名思义，按钮组就是指两个或两个以上的按钮排布在一起。为了了解按钮组的使用场景，首先我们来思考一个问题：什么时候我们会使用按钮组？
从按钮组的样式上我们可以看出常见的按钮组是供用户进行判断(两个选项)或者选择(两个以上选项)的。
判断
首先我们来说判断，就是只有两个按钮的情况。一般来说，两个按钮中肯定有一个拥有更高的优先级或者说用户更希望去点击，那么我们会在样式设计上进行区分。其实可以让用户进行判断操作的组件还有开关。开关，又称switch，也是我们很常见的一个组件，表示两种相互对立的状态间的切换，多用于表示功能的开启和关闭。而一项功能的开启可能会带来相应的后续操作，例如你在iOS设置里开启了微信的“通知”功能，那么你就需要对通知形式进行进一步的设置。而按钮组不会出现这些后续操作，更像是一锤子买卖，这也是按钮组和开关的一个主要的区别。
对于一款产品来说，设计师的职责是非常大的，不应该像现在这样仅限于美工层面。从整个产品的角度来说，设计师要准确的定位目标用户群，根据目标用户群的喜好来确定界面设计风格，具体到每个界面中设计师要考虑各个功能的优先级排布。不要怕麻烦，你能做的事情越多，你的“可替代性”就越低，所得的报酬就会越多。
选择
喝完了鸡汤，接下来我们回到正题。再来说按钮组中有三个或者三个以上的选项的时候我们应该怎么处理呢？
其实这种出现多个选项的按钮组样式我们可以看成是单选/复选功能的一个变形。只不过现在传统的单选/复选的样式很难满足当前的设计需要，用户渴望更加新颖多变的按钮样式。特别是选项过多的情况下，按钮的优势就凸显出来了。
单选/复选都是供用户进行选择操作，其实还有一个组件跟单选/复选很相似，那就是下拉列表。当选项过多时，用户可以使用下拉菜单展示并选择内容。下拉列表的优势在于节省了界面空间，但是用户想要看到全部的选项必须要点击出下拉列表，增加了操作步骤，而且会对界面中其他内容造成遮挡。所以当你的界面元素不是很多的情况下，我的个人建议是尽量使用单选/复选按钮。
总结
以上就是我对按钮组的使用场景做的一个总结，希望可以给大家带来一些帮助。
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
