界面按钮设计,游戏界面按钮设计

对于UI界面中的按钮样式该如何去设计？天津UI设计培训

按钮设计是UI设计工作中必不可少的环节，在设计按钮时要遵循以下原则：

1.匹配的品牌

你的按钮配合网页的语境方式，这很重要。这可能意味着符合一个网站的整体风格，从某种形式的品牌指导方针或标志图形的方式等也许有一些突出的形状，你可以你挑选需要的纹理或设计风格。也许一个标志有一个圆形的方面，你可以拿起你这个按钮或其他潜在的形状进行比较选择。如果一个接口主要采用平面色彩。如果你能利用这个机会，通过接口，使用适当的形状，实验效果，着色或其他形式的点缀来延伸品牌

2.匹配关系

　用photoshop打开psd格式的UI元素，你很容易实现梯度，阴影，斜面等效果。但是它是否是正确的选择，这不仅要符合网站品牌，而且也是整个界面中的一个按钮，它可能是一个一个需要移动的应用程序。所以你需要在网站上做点不同的东西和你的按钮或行动进行呼应。

3.有足够的对比度

有很多界面设计的灵感来自苹果IOS，特别是现在有很多的用户界面元素的PSD存在，我们可以在用户界面上使用一些小按钮等元素，发挥他们潜在的重要力量。你可以尝试使用不同的颜色，字体大小，空格等以确保你的按钮从中脱颖而出，展现粗界面的视觉重量。

4.考虑圆角或美观的按钮

根据以上描述，如果有UI元素在你设计的区域，考虑使用圆角按钮或者其他形状的稍微变化。这可以产生对比以确保呼应你下面的重要行动，同时也突出这些按钮的价值。

5.强调辅助用户界面元素

如果你想成为一个IOS灵感风格的设计师或者采用网上寻找的psd格式的UI元素，那么你的UI元素将主要以圆角矩形形状为主。

例如，你的选择菜单，分段控制，自定义菜单可能都是相同的圆角形状，但是用更少的阴影，边界，锥，梯度或其他影响可以帮助减少他们的丰富性，这样反过来促进了按钮样式。

6.颜色匹配形成边界

我们可以看到按钮对网站界面可形成某种形式的边界。一般来说，如果你的按钮是较暗的背景，它使用一个黑暗的通用按钮颜色。如果你坚持使用前和使用它在一个黑暗的背景下，你发现再前者背景下它可以使按钮边有点脏，后者背景下可以让你的按钮很流行。我认为这是在处理Web设计边界的一般设计原则。

7.小心模糊的影子

如果一个元素使用比其背景再黑暗的阴影应该更加巧妙。类似的颜色匹配的边界，我非常认为这是一个适用于所有用户界面元素设计的一般原则。

8.小细节可以给你的启示

当用户点击时，一些小细节比如一个箭头可以给一些动作一个小的提示。

例如，一个箭头在按钮上的文本指向右可能给用户某种运动或离开页面的提示。向下箭头可能表明一些内容将逐步披露，或者某种菜单将放开更多的内容。

9.考虑一级，二级和三级样式

如果你正在设计一个接口，它有很多动作和功能上都显示它需要建立一些视觉语言。

考虑保留最强大和最大胆的色彩作为您的主要按钮的颜色。然后使用强度或饱和度逐渐降低的色彩，阴影，考虑减少尺寸，空格，以及点缀的文本尺寸和水平的进一步降低来区分众多按钮的视觉重量。

10.让你的按钮总是处于反馈状态

在设计工作结束后，你需要确保你的按钮设计能迅速在上下文中提供给用户所需的足够的反馈。在现实世界中用户通过按钮的各种状态使用它们，这是用户使用按钮工作的心理模型。阴影，边界和梯度等可以给用户一些简单的反馈。

按钮、状态与设计

按钮是界面设计中最常见的元素之一。比如播放器的“播放”和“暂停”按钮。也正是在使用某一款播放器的时候遇到的问题促使我记录以下文字。

这是Windows Media Player的播放控制区域。在音乐停止时，中间的播放按钮图标显示为一个三角形，这是通用的播放图标，提示用户点击按钮后会开始播放音乐。当正在播放音乐时，按钮图标则显示为暂停，提示用户点击按钮后会暂停播放。

以上设计已经沿用多年，用户也习惯了此类模式，在使用过程中完全不会多想。就如同灯的开关，按一下开灯，再按一下关灯。不过最近在使用某一款视频播放器的时候，播放按钮上图标的设置则是与上面的使用习惯相反： 视频正在播放时，图标显示三角形；视频暂停时，图标显示两条竖线。 因为这种设计与习惯相反，一开始让我有些不知所措，反复点击了几下按钮才搞明白。细想一下，设计师应该是想用图标表达当前播放的状态。先不说这样的思路对不对，在一个已经成熟的设计模式上做创新挑战用户习惯确实要冒极大风险，且有点不必要。

不过再深入想想，按钮这个简单的东西并不那么简单。

来看看维基百科的解释：按钮，全名：命令按钮。英文：Command Button。程序或网页最常用的一个控件。在程序中，按钮是最常用的用于触发事件的控件，也可以开始，中断，结束一个进程。按钮接受最常用的事件为单击事件（Click），按钮的状态为两种，即：原状态和按下状态。当鼠标单击按钮时，按钮处于按下状态。

按钮需要用户动作触发，然后执行命令。在网页设计中，我们常常会忘记按钮的状态，因为点击网页上的一个按钮后经常会是进入另一个界面，这个按钮已经看不到了，比如“提交”按钮。此类按钮可以叫做单态按钮，或者动作按钮。动作按钮只有一个状态。

在篇首给我带来疑惑的播放/暂停按钮是两态/切换按钮(toggle button)。除了播放/暂停，开/关也是很典型的两态按钮。此类按钮要顺利使用，需要让用户了解当前的状态，同时还要给用户预期，预示点击以后的结果。音乐/视频正在播放时，用户能够感知到，因此不需要在按钮上额外表示当前状态，只需要提供预期即可。因此在播放时，按钮上显示暂停图标预示点击按钮将暂停播放，是正确且符合使用习惯的设计。灯的开关也是如此。

正是因为用户常常可以在不需要额外设计的情况下就可以感知到当前状态，设计师也常常忘记了状态的存在。可以设想以下场景来证明状态的重要性：假如一个房间没有窗户，关上门之后无法看见灯光，灯光开关设置在室外。在关门之后，要求用户在室外开启或者关闭室内灯光。因为无法知道灯当前的状态，如果开关按钮上也不提供状态，用户将无法完成这个任务。如果将开关设计成下面这样，用户就能顺利完成任务了：

因此，在界面设计中常常会看到运用颜色、图形、文字、提示信息等多种方法来达到按钮设计的目的。比如上面说的Windows Media Player播放按钮，当鼠标放在按钮上的时候，就会显示按钮执行动作的提示。而且，就算这样用户也可能需要反复尝试几次之后才能正确使用。

对于两态按钮，目前并没有统一的设计原则，从以往的设计实践中可以总结出以下方法：

1）在当前状态很清楚的情况下，直接预示动作结果。比如播放/停止按钮。

2）显示当前状态，点击后切换至另一状态。比如手机界面常见的WIFI开关。

无论采用哪一种设计方法，都要综合考虑，遵循用户习惯、业界标准、平台原则。

延伸阅读： 用户界面设计中“状态”和“动作”的表达

1、网页中按钮的常见类型有哪些？ 2、网页中按钮的特点有哪些？ 3、按钮的设计要点有哪些？

一、网页中按钮的常见类型：

1、静态图片按钮

将按钮制作为静态图片的效果，不带有任何的交互效果和动态效果与普通文字链接相比静态图片链接，更加醒目和美观，视觉效果更出众，能够更加吸引浏览者。

2、Flash动画按钮

网页中的Flash可谓风靡一时，行业中常常出现Flash按钮效果。在潮流的驱使下，设计师也意识到了Flash所能达到的页面效果远远大于普通按钮。特别是游戏类网站更是将Flash发挥的淋漓尽致。

3、JavaScript翻转图片按钮

JavaScript翻转图片按钮通常是通过Java语言来实现的，即按钮在正常状态下是一幅图片，当鼠标经过时会变成另一幅图片。

4、汉堡按钮

汉堡菜单释放空间使界面更简约和通风，从功能的角度来看，它为其他重要的布局元素节省了大量空间。对于响应和自适应设计隐藏导航元素并使界面在不同设备上看起来更加和谐。

二、网页中按钮的特点：

1、易用性

在网页中使用图片按钮笔特殊字体的按钮，更容易被浏览者所识别。随着Flash动画的风靡，越来越多的网站使用了Flash动画按钮，这种按钮更能吸引浏览者注意时，网页更易于操作。现在的网页中开始越来越多的应用设计精美的图片按钮和Flash按钮。

2、可操作性

在网页设计过程中，为了使网页中较为重要的功能和链接突出出来，通常会将其制做成按钮的形式，如登录和搜索按钮等，或是一些具有特殊功能的按钮，这些按钮，无论是静态还是动态都是为了实现功能，而不是装饰，所以这些按钮，就需要有一定的可操作性。

三、按钮的设计要点：

1、与页面风格协调

因为中的任何一部分都不能脱离出来单独存在按钮也如此。按钮的风格必须与整体页面效果协调一致，才能体现出价值。

2、注意配色

手机按钮时要尽量做到文字清晰。另外配色应该简洁鲜艳，最好不要使用四种以上的颜色。

3、巧妙调整按钮的形状

按钮的形状应该根据整体页面颜色的着重点分布灵活调整。

扩展资料：

按钮设计原则：

1、颜色

为了使一些按钮容易引人注意并且一些次要按钮，选择合适的颜色至关重要。问题在于人类的情绪和行为与视觉环境高度相关，而颜色是这方面最强大的工具之一。在为CTA选择颜色时要记住这一点至关重要：按钮和背景颜色必须对比良好才能使按钮从其他UI组件中快速脱颖而出。

2、形状

至于CTA按钮，它们通常看起来像水平矩形。原因是你要清楚这个按钮是可点击和交互的，人们习惯将这个形状看作一个按钮。按钮的形状还要与网页或者app的设计风格保持一致。

3、位置

按钮的放置位置对于构建可靠的视觉层次结构和清晰的导航至关重要。如果它们位于用户眼睛无法捕捉到的区域，则其他视觉方面（例如颜色和大小）可能无法有效工作。设计人员必须学习可扫描的区域，并在用户可以操作的空间中放置核心功能的按钮。

「UI设计」如何做好按钮设计的9个基本原则

按钮是任何用户界面当中（无论是桌面还是移动用户界面）必备的交互元素：甚至可以说，如果页面中没有一个按钮，整个页面设计将是不完整的。

接下来我们就来聊聊制定按钮规范时会遇到的一些问题，虽然只有普通按钮，但还是有很多细节值得我们思考学习。

大纲如下

1、 按钮的类型

2、 按钮的状态

3、 按钮的主次关系

4、 按钮的设计尺寸

5、 按钮的圆角

6、 按钮的文字

7、 按钮的样式一致

8、 按钮的色彩

9、 按钮的摆放位置

1、按钮的类型

按钮包括很多种，本文主要分享的是我们在设计中经常运用到的一些按钮类型。比如普通按钮、图标按钮、文字按钮、下拉按钮等等

2、按钮的状态

按钮的状态一般分为三种：正常态、不可点击状态、点击状态。

正常状态就不必多讲了。按压状态：我常用的一种方式是将按钮的不透明度改为80%- 85%:

不可点击状态，也推荐两种实现方式，一种是降低为30%的透明度，另一种是直接置灰:

3、按钮的主次关系

页面的内容信息可以通过文字的大小、颜色形成层级关系。同样按钮设计，我们可以在风格上进行区分，让主要按钮与次要按钮形成差异，达到层级结构的视觉提升，更好引导用户根据设定的轨迹进行操作。

4、? 按钮的设计尺寸

4.1 ? 合适的大小

按钮需要方便用户进行点击操作，如果用户点击失败或者误点到周边元素，就会带给用户不友好的体验。若是带有文本的按钮，只要文字大小不要小于极限值即 移动设备上 44 * 44 ，通常实现出来的按钮交互热区都会满足点击需求。

4.2 按钮的高度

每个平台都会有多种型号的按钮，我见过最多的可以分为5种：超大按钮、大按钮、中按钮、小按钮，超小按钮，这个可以根据自己平台的需要来制定多少种。每一种按钮都需要有一个特定高度，那么这个高度如何制定才比较科学呢？这里可以推荐一种方式，就是按钮的高度是文字的三倍左右，这样看起来会比较舒服：

4.2 按钮的宽度

在不同的页面中按钮的宽度是随机的，所以按钮的具体宽度我们需要具体的功能来设置。

比如在闲鱼 APP的登录页、购买页中，按钮的宽度都不是相同的。

5、? 按钮的圆角

对于按钮边框来说，我们通常采用全圆角和小圆角居多，这样显得稳重大气。 一般我采用全圆角的圆角值等于按钮高度值的一半，而小圆角的圆角值通常控制在 1/4H（高度值的四分之一）以内。

同时要注意的一点是，在同一款产品中要保证所有按钮的? 圆角比例是一致的，而不是圆角一致 ?。如果不同大小按钮的圆角都是一致的，那会显得非常别扭。

6、? 按钮的文字

按钮文字和边框的设计要预留一定的留白，不要做“舍不得”的设计，使得按钮给人感觉很拥挤。如果你把控不好可以分析一些按钮的负空间获取经验，看看文字大小和负空间之间是否存在某种比例关系。找到这个比例关系运用到按钮设计中，也许会让你的设计显得更加成熟稳重。

建议按钮的文字一般? 不要超过6个汉字 ?。

7、? 按钮的样式一致

在同一页面中? 按钮的样式要形成一致 ?，不要给用户造成理解上的成本。

8、? 按钮的色彩

颜色部分比较简单，一般会选用规范体系的颜色即可。但像红色或者橙色多为行动刺激作用，不适合在非品牌色的时候滥用。浅灰色或者低饱和度的色系会带有不可用、禁用、失效等属性，需要酌情选择。

9、? 按钮的摆放位置

按钮的摆放位置通常要? 结合用户的视觉感受、与用户操作习惯 ?进行摆放。

好了，以上就是关于按钮规范的分享，希望能帮助大家提供一些思路和灵感，欢迎交流！