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

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

1.匹配的品牌

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

2.匹配关系

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

3.有足够的对比度

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

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

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

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

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

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

6.颜色匹配形成边界

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

7.小心模糊的影子

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

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

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

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

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

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

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

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

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

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

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、位置

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

第一个案例：社交类APP当中的按钮设计。

以上这个APP界面，最醒目的地方就是 漂亮的按钮。这样的APP按钮是直接吸引用户点击交互的。而且按钮的排版和整个元素的排版都是居中的，属于UI设计当中的中轴式布局。大气稳重。

第二个案例：电商APP当中的按钮设计

这是国外一个非常不错的卖儿童服装的一款APP设计界面。25学堂给大家截图的这2个界面是一个购物车的界面设计。希望大家可以好好的看下。

此款APP的按钮设计非常的丰富。 各个元素基本都是由按钮来组成和布局排版的。

1、软件启动界面设计

软件启动界面设计也叫软件启动封面设计，在设计时应使软件启动封面最终为高清晰度的图像，如软件启动封面需在不同的平台、操作系统上使用将考虑转换不同的格式，并且对选用的色彩不宜超过256色，最好为216色安全色。软件启动封面大小多为主流显示器分辨率的1/6大。

如果是系列软件将考虑整体设计的统一和延续性。在上面应该醒目的标注制作或支持的公司标志、产品商标，软件名称，版本号，网址，版权声明，序列号等信息，以树立软件形象，方便使用者或购买者在软件启动的时候得到提示。插图宜使用具有独立版权的，象征性强的，识别性高的，视觉传达效果好的图形，若使用摄影也应该进行数位处理，以形成该软件的个性化特征。

2、软件主界面设计

即软件的主要面板的设计，软件面板设计应该具有缩放功能，面板应该对功能区间划分清晰，应该和对话框，弹出框等风格匹配，尽量节省空间，切换方便。

3、软件框架设计

软件的框架设计就复杂得多，因为涉及软件的使用功能，应该对该软件产品的程序和使用比较了解，这就需要设计师有一定的软件跟进经验，能够快速的学习软件产品，并且在和软件产品的程序开发员及程序使用对象进行共同沟通，以设计出友好的，独特的，符合程序开发原则的软件框架。软件框架设计应该简洁明快，尽量少用无谓的装饰，应该考虑节省屏幕空间，各种分辨率的大小，缩放时的状态和原则，并且为将来设计的按钮，菜单，标签，滚动条及状态栏预留位置。设计中将整体色彩组合进行合理搭配，将软件商标放在显著位置，主菜单应放在左边或上边，滚动条放在右边，状态栏放在下边，以符合视觉流程和用户使用心理。

4、菜单栏设计

主要包括菜单设计，滚动条及状态栏设计。

菜单设计一般有选中状态和未选中状态，左边应为名称，右边应为快捷键，如果有下级菜单应该有下级箭头符号，不同功能区间应该用线条分割。

滚动条主要是为了对区域性空间的固定大小中内容量的变换进行设计，应该有上下箭头，滚动标等，有些还有翻页标。状态栏是为了对软件当前状态的显示和提示。

5、软件按钮设计

软件按钮设计应该具有交互性，即应该有3到6种状态效果：点击时状态鼠标放在上面但未点击的状态点击前鼠标未放在上面时的状态点击后鼠标未放在上面时的状态不能点击时状 态独立自动变化的状态。按钮应具备简洁的图示效果，应能够让使用者产生功能关联反应，群组内按钮应该风格统一，功能差异大的按钮应该有所区别。

6、界面图标设计

图标设计色彩不宜超过64色，大小为16x16、32x32两种，图标设计是方寸艺术，应该加以着重考虑视觉冲击力，它需要在很小的范围表现出软件的内涵，所以很多图标设计师在设计图标时使用简单的颜色，利用眼睛对色彩和网点的空间混合效果，做出了许多精彩图标。其标签设计应该注意转角部分的变化，状态可参考按钮。

7、安装过程设计

安装过程设计主要是将软件安装的过程进行美化，包括对软件功能进行图示化。

8、包装及商品化

最后软件产品的包装应该考虑保护好软件产品，功能的宣传融合于美观中，可以印刷部分产品介绍，产品界面设计。

什么是按钮?

按钮是一个交互式元素，可以根据特定命令从系统获得预期的交互式反馈。基本上，按钮是允许用户直接与数字产品通信并发送必要命令以实现特定目标的控件。

按钮的基本类型

1、CTA按钮

CTA按钮的目的是在鼓励用户采取某种行动的用户界面的互动元素。此操作为特定页面或屏幕提供链接，换句话说，它将普通用户变为订阅用户。因此，从技术上讲，它可以是通过号召性用文本支持的任何类型的按钮。它与页面或屏幕上的所有其他按钮的不同之处在于其引人注目的特性：它必须引起注意并刺激用户执行所需的操作。

例如在首页中，有一个核心操作作为页面的目标：让用户订阅邮件，留下邮箱地址。因此，按钮被设计为布局中最引人注目的元素之一，以便用户可以在他或她愿意的时候立即看到如何执行操作。

2、文字按钮

文本按钮通常用于创建辅助交互式区域，而不会分散主要控件或CTA元素的注意力。在我们对物理世界中这种现象的标准理解中，它看起来并不像按钮。该文本是页面中唯一的视觉交互元素。不过，它是一个允许用户与界面交互的实时控件，鼠标悬停时，文字的颜色会改变，或者文字出现下划线。

例如一个时尚商店优雅的网站设计。布局的交互部分都是文本按钮。只有主要的CTA元素才会显示为一个带色块的按钮。所有其他功能按钮都为文字按钮，使用这种按钮的网页一般是简约风格。

以上就是青藤小编为大家分享的UI界面中的按钮的相关内容，想要学习UI设计的小伙伴们，这些设计方式你们都get到了吗?

一、 界面设计的原则

1. 直观：尽量少用图标多用文字，图标用得越多界面设计越难令玩家理解。

2. 通俗：用词要大众化，令玩家容易接受，不用生僻词，以及专业术语。

3. 按钮图标：按钮设计要有凸出感，醒目一些，让玩家易接受

4. 显示优先：显示的层次要清楚

（1） 生命，魔法，以及一些常用功能

（2） 常用操作（重要操作），如吃物品的快捷键，技能施放等。

（3） 空间优先（有限的空间放入更多功能）

（4） 符合玩家的一般习惯（WIN的习惯，WORD的习惯等）

5. 可扩充性：网络游戏需要不断添加新功能等等，对界面的需求会不断增加。需要预先考虑好扩充性

6. 游戏种类：游戏的性质对界面的要求

（1） 回合制：全屏界面对游戏影响不是很大

（2） 即时制：尽量不出现全屏界面，能透明的要透明，减少对屏幕的影响

美术部分

1. 界面示意图：告诉他界面该如何布局，常用表达方式实心框，虚线框，双线框，黑线框分别代表按钮的不同形式以及不同显示方式。这些需要在后面标明

2. 如何确定界面大小：用原图做（示意），根据功能的位置放置。考虑到以后的影响（如聊天遮挡按钮，等等类似问题）

3. 特别注意：需要考虑到游戏设计对游戏的影响，如人名输入框的大小一定要大于最大人名数量，负责就出现冒行等问题。

4. 按钮及状态

（1） 替换显示：帮派入帮、不入帮与帮主的不同显示界面

（2） 发亮显示：有新消息界面就闪光来提示玩家

（3） 界面转换：好友与仇人名单的界面转换。

程序部分

1. 显示内容：需要说明，确认大小以后标示明白

2. 触发条件：NPC对话，点选物品，点按钮等

3. 界面关闭：关闭的条件（被攻击，自己点选等等）

4. 注：界面、按钮的功能（弹出新界面后是重叠显示还是关闭老界面来显示）；界面的操作以及相关的提示（升级、成功是否提示等），其中的成功的提示做还是不做这个很重要（关乎玩家的心理，需要从实践中找感觉）

5. 另：有快捷键的话，需要标明快捷键

界面设计意图中的方方面面的东西需要程序容易实现。

各种设计的小细节方面：

《征服》的聊天模式转换方面，目前的现状是根据设计需要（符合以上要点）以及界面的总体布局造成的。

讨论：

做界面以前先考虑一下游戏的风格，按钮的用字，显示位置一定要大，明了。

首先将游戏功能分类清楚，然后再做界面。尽量考虑资源的通用性。

将一些功能性界面放NPC身上，主界面尽量简练，精致

选择默认的Blank GUI（Default），点击ok，

之后进入GUI界面编辑界面，左边的侧边栏为界面的一些快捷按钮，按住鼠标左键可以拖到右侧编辑框，各个按钮一般都有自己作用，

把按钮拖过去，图为各种按钮示意；

按自己的需要选择按钮并排版

在未放置按钮区域右键选择Editor

进入代码编辑界面，在按钮的对应区域加入自己的代码，

点击上方绿色三角（或按F5）运行，调试通过

步骤阅读

调试通过即可保存.m文件以及.fig文件即可

手机的分辨率百高低也有关系。

一般度app的图标都会有各种分辨率的问尺寸，为了在不同的分辨率手机下都能正答常显示。

默认最低也有回32*32，48*48，64*64，128*128，256*256 这几种常见的尺寸。答

手机照片尺寸要看你的手机相机和照片比百例，比如说，手机相机设置为1200万像素拍的4：3照片分辨率就是4000x3000；1600万像素16：9的照片分辨率就是5312x2988，4：3的大概就是4608x3408分辨率。

另外还有其他一些主流像度素尺寸分辨率参考如下：

扩展资料：

分辨率比

而所谓的4:3、16:9、16:10、21:9这些比值其实就是 分辨率中横向像素与竖向像素的比值 。4：3是我们最初所用的分辨率尺寸比，以前的电脑屏幕几乎都是4:3；随后宽屏显示器出现，16:10开始流行，比较常见的分辨率有1280×800像素。

为何流行

再后来随着HD电视的发展，16:9这个尺寸的分辨率也开始推广，因为HD电视的片源通常是1080p（分辨率为1920×1080像素，所谓的p就是progressive scan，意思为逐行扫描）和720p（1280×720像素）。

因为传统的16:10的显示设备观看高清会留有黑边，而 16:9尺寸的现实设备可以实现没有黑边的播放 ，这也是这种FULL HD显示设备流行的原因。

参考资料：百度百科-手机屏幕分辨率