按钮图标---按钮图标的设计规范

好酷屋

发布于2023-05-04

好酷屋教程网小编为您收集和整理了按钮图标---按钮图标的设计规范的相关教程：说到网页按钮设计，可以通过按钮能做很多事。比方说，进行下一步、确定、以及完成等操作。有了按钮，交互一下就焕发了生机。　　　　按钮：按钮代表着“做某件事”，即点击了按钮代表着操作了一个功能，做的这件事是

说到网页按钮设计，可以通过按钮能做很多事。比方说，进行下一步、确定、以及完成等操作。有了按钮，交互一下就焕发了生机。

　　按钮：按钮代表着“做某件事”，即点击了按钮代表着操作了一个功能，做的这件事是有后果的，不易挽回的。例如典型的google，QQ邮箱。像信息搜索、回复、注册，他们的共同点是：都是在“做”一件事，并且绝大多数都是对表单的提交。从技术上讲，这类按钮的作用是向后台提交了数据，“命令”服务器去做了一件事。

　　1. 按钮要和超链接区分开

　　在扁平设计时代，类似Material Design，会将“扁平”按钮，多样应用于工具栏、动作组、还有文本串联。在默认状态下，这跟超链接只有轻微的区别甚至是没有区别。然而，从archor tags开始，按钮的状态和行为都会带来一系列需要区别的考量。

　　如果你的系统提供了扁平设计，要确保它设计上和代码上的惯常用法，都是可以跟超链接区分出来的。此外，确保方案涵盖交互的复杂性，例如聚焦&按压状态，留白，对齐等。

　　2. 设定文本的风格基调

　　幸好，过去“点击这里”是存在的。但我们依然需要回答：按钮标签可以有多长。标签是采用祈使语气，即命令式、强制性的语气吗(例如，“保存”或者“关闭”)?我应该在动词后面加上宾语吗(在“保存”后面加上“文档”)?关于常见操作有惯用的标签吗?要加注品牌标语……还是不要呢?

　　在可以找到全部按钮的标签指南处引入前后一致的用词。当然，用词列表和深度编辑标准可以在Voice和Tone等指南内找到。不管怎样，按钮指南是开始把指南桥接在一起的好地方。

　　3. 当背景较复杂时，按钮用反色

　　在纯白背景下大多数样式的按钮还行得通，但如果你把按钮搁在照片背景上呢?或者是一个更深的不同颜色的背景?更伤脑筋的是，你的按钮也可以放在浅色中性色的背景上吗?按钮可以用在(包括但不限于上面所提到的)任何情况下吗?

　　4. 设计并建立按钮的交互规范

　　按钮是最简单原始的交互，交互伴随着改变。仅仅呈现给开发者页面加载时按钮的样式来表示“按钮长这样!”是不够的。不是开发者而是设计者，来决定状态切换的按钮是如何呈现的，包括：默认状态，鼠标悬停，焦点获取(“光晕状态”)，被按住/激活，甚至旋转等待以及其他花式秀进度的动画。

　　5. 按钮是系统在视觉风格上最纯粹的表达方式

　　按钮把颜色、字体和图像这三个属性紧密地结合起来，形成了一个不可分割的集体。按钮也同时引起了关于留白的讨论：内部填充(特别是，标签的左右)和外部边距(毗邻其他元素)。最终，按钮可以体现更多只有内行才懂的属性，例如圆角边框(通过调整border-radius)或上升(通过调整图层阴影效果属性box-shadow)，重要的按钮需要做出强调，可以利用颜色，可以利用边框，可以利用不一样的显示方式。

　　6. 从切换开关到菜单，确保按钮都能和谐地运转

　　按钮可以成组。一个按钮组通常由一个主选项和一个或者多个次要选项配对成套出现。切换开关可以显示为开启或关闭状态(比如粗体)，或显示一组选项中被选中的那个(比如文本的对齐选项，有左对齐、右对齐、中间对齐、以及两端对齐)。最复杂的情况下，工具栏把各类按钮都包含了：主按钮，次要按钮，切换开关，菜单，以及其他。

　　7. 混合元素设计要有弹性

　　将按钮和icon结合使用，能强化意义并加快用户认知，当你加入一个元素之后，即使只是一个简单的icon，按钮的布局也不应该被破坏分解。使用一些很少预见的元素，会引起一些诸如内部留白和对齐方式的烦人问题。

以上就是好酷屋教程网小编为您收集和整理的图标,标签,简介,按钮图标相关内容，如果对您有帮助，请帮忙分享这篇文章^_^

本文来源： https://www.haoku5.com/shenghuo/6453b35b0b4756204a09b2bc.html