设计一个按钮12条经验教训.pdfVIP

设计一个按钮的12条经验教训 这里有12条经验教训 ，是作者在设计多种按钮 ，包括主按钮、次要按钮 ，以及在一个新 系 统中的使用的大量其他按钮时所总结出来的。值得一读。 我超爱按钮。通过按钮我能做很多事。比方说 ，进行下一步、确定、以及完成等操作。有了按钮 ， 交互一下就焕发了生机。 这就是为何按钮大概是一个系统设计中最重要的组成部分。理由非常简单 ，按钮提供了一个样式简 单的标签供人在界定区域内点击。也就是说 ，按钮是你应用设计语言基本属性的方式 ，这种方式以 后还会应用在更加复杂的组件当中。 这里有12条我在设计多种按钮 ，包括主按钮、次要按钮 ，以及在一个新 系统中的使用的大量其他 按钮时 ，所总结出来的经验教训。 类别一 ：主按钮 1. 设定系统的风格基调 按钮是系统在视觉风格上最纯粹的表达方式。它把颜色、字体和图像这“三大”属性紧密地结合起来 ，形成了一个不可分割的原子单位。按钮也同时引起了关于留白的讨论 ：内部填充 （特别是 ，标签 的左右 ）和外部边距 （毗邻其他元素 ）。最终 ，按钮可以体现更多只有内行才懂的属性 ，例如圆角 边框 （通过调整bo rder-radius ）或上升 （通过调整图层阴影效果属性box-shadow ）。 打包贴士 ： 要把按钮当作系统风格的主导代表元素。加分做法是 ，把按钮的定义和一整套快速发展的标记变量 统一 ，这些标记变量规定了颜色 ，尺寸 ，空白和其他细节。 按钮看起来很简单 ，其实包含了各式各样的属性 2. 同样要设定文本的风格基调 幸好 ，过去“点击这里”是存在的。但我们依然需要回答 ：按钮标签可以有多长。标签是采用祈使 语气 ，即命令式、强制性的语气吗 （例如 ，“保存”或者“关闭” ）？我应该在动词后面加上宾语吗 （在“ 保存”后面加上“文档” ）？关于常见操作有惯用的标签吗 ？要加注品牌标语……还是不要呢 ？ 打包贴士 ： 在可以找到全部按钮的标签指南处引入前后一致的用词。当然 ，用词列表和深度编辑标准可以 在Vo ice和To ne等指南内找到。不管怎样 ，按钮指南是开始把指南桥接在一起的好地方。 3. 当背景较复杂时 ，按钮用反色 在纯白背景下大多数样式的按钮还行得通 ，但如果你把按钮搁在照片背景上呢 ？或者是一个更深的 不同颜色的背景 ？更伤脑筋的是 ，你的按钮也可以放在浅色中性色的背景上吗 ？按钮可以用在 （包 括但不限于上面所提到的 ）任何情况下吗 ？主按钮的颜色可以随意改变吗 ？ 打包贴士 ： 把主按钮放在不同的背景上进行演示 ，然后制定一个相反的替代方案—— 白色 ？不同颜色 ？或者半 透明 ？——当背景变深时应用上述方案。做文档时 ，把亮色和暗色等方案展示在一系列常见背景上 ，这样可以把问题讲清楚 把按钮展示在一系列常见背景上 ，效果好坏都展示 4 . 限制每页一个按钮 ，除非这个按钮是重复性主要操作 按钮能唤起页面操作 ，我们通常用主按钮 ，来吸引用户对页面最优先功能的注意。除非 ，页面上分 布着一堆主按钮 ，这时候我们没办法排出优先级 ，那“用主按钮来吸引用户注意”这一招也就不管用 了 （希望这一堆按钮也能是一致而有序的 ，对吧 ？）。 某些情况下 ，使用一个主按钮是正确做法。比如你需要从一组平行对象中 （例如搜索出来一堆 结果 ），或是 ，从设置页面上展示的不同类别选项中 ，来做选择。 打包贴士 ： 你应该定义在何时允许页面中有多个主按钮 ，否则要知道如何避免页面上有多个主按钮。 5. 设计并建立按钮的交互规范 按钮是最简单原始的交互 ，交互伴随着改变。仅仅呈现给开发者页面加载时按钮的样式来表示“按钮 长这样 ！”是不够的。不是开发者而是设计者 ，来决定状态切换的按钮是如何呈现的 ，包括 ：默认 状态 ，鼠标悬停 ，焦点获取 （“光晕状态” ），被按住/激活 ，甚至旋转等待以及其他花式秀进度的 动画。 打包贴士 ： 提供不同状态下的按钮样式合集 ，无需用户交互 （页面中嵌入按钮就好 ）。文档并不是搞寻宝游戏 ，加分的做法是像mat eria design那样做视频演示。 6. 混合元素设计要有弹性 将按钮和ico n结合使用 ，能强化意义并加快用户认知。 等等 ！我以为按钮就是一个位于可预测点击区域的标签呢。当你加入一个元素之后 ，即使只是一个 简单的ico n ，按钮的布局也不应该被破坏分解。使用一些很少预见的元素 ，会引起一些诸如内部留 白和对齐方式的烦人问题。你会想把这些问题都一一化解 ，特别是当按钮可能包含了标签