认识达内从这里开始

我们在上文中说到了在太原达内学习ui设计的时候掌握到了关于ui交互按钮的种类和使用场景，许多学员表示大有收获。今天我们就来了解一下，对于不同的ui交互按钮来说，如何进行他们的外形上的设计以及颜色配比等。对于山西达内ui培训课程感兴趣的朋友可以与我们的在线咨询师联系。获取进一步的课程了解。

下面，我们就先学习一下，关于ui按钮设计的一些具体操作方法吧。

在开始设计按钮之前，要考虑你的设计如何向用户传达出可供性(Affordance，可供性就设计而言，其着重于物体与用户之前的关系，以及其达到的效果和提示作用)。那用户如何将交互界面元素理解为按钮呢?鉴于此，在设计中你更应该：

此外，还要确保在所有界面交互控制中保持一致性，这样用户就能在 app 或网站的每个页面上从 UI 元素中识别出按钮。

1. 外形

稳妥的方式就是根据网站或 app 的风格来设计方形按钮或圆角方形按钮。矩形状按钮很久之前就应用于数字世界的设计，用户对此也非常熟悉了。

据研究显示，圆角能促进信息处理，并吸引用户聚焦到元素正中央。

圆角矩形按钮

当然，你还可以加入更多创意元素，使用如圆形，三角形甚至自定义形状的其它形状，但要注意，使用这些形状可能会更加冒险。

2. 尺寸和内边距

在帮助用户识别按钮元素时，按钮的尺寸大小也非常重要。你需要考虑按钮元素的尺寸大小，同时还要考虑可点击元素间的内边距。

尺寸。当你使用轻击(tap)作为 app 或网站的主要输入交互方式时，你可以参考麻省理工大学触击实验室(MIT Touch Lab)的研究，从而为你的按钮设计选择合适的尺寸。

根据 MIT 的研究发现，指垫的平均宽度在10-14毫米之间，指尖的平均宽度在8-10毫米之间。因此，10×10毫米是触屏按钮最小尺寸的一个好选择。

这个建议本意不是让那些易按错的按钮更加完美，而是尽可能将按错次数最小化到实用水平，同时，还要平衡其他重要特性(比如屏幕信息密度)。

当鼠标和键盘作为主要的输入交互方式时，对按钮尺寸的要求则可以稍微降低，以便于适应密集型的用户界面。

内边距。按钮间内边距是为更好地区分各交互控制按钮而设计，同时给用户界面足够多的空间。

Google 的 Material Design 对话框中扁平化按钮间的内边距

3. 标签

你应该为按钮选择一个合适的标签。选择标签的方法应该基于最小惊讶原则(principle of least astonishment)：如果某必要按钮有个高惊讶因素的标签，那就要考虑更换这个标签了。

经验法则——按钮的标签要体现其功能。添加一条清晰信息来告知用户在点击/轻击后会发生什么，或者通过行为动词提示用户某界面元素的功能。

是在 Dropbox 网页版上传文件的一个对话框，该对话框中有一个带有「棒极了!(Awesome!)」标签的单独按钮。这个标签对普通用户来说可能有困惑性，因为它并没有说明点击该按钮后有什么用。

4. 颜色

在调色板上选择颜色时，要思考颜色可以怎样帮助用户导航和理解该行为的。

使用颜色和对比来帮助用户查看和了解 app 的内容，与正确的元素进行交互，并理解相关行为。

示例中，我们使用了红色按钮来标识一个潜在的毁灭性行为(该按钮标签「UNINSTALL」意为「卸载」)。

注意「卸载(Uninstall)」动作按钮是如果通过颜色和对比更吸人注意的。图片来源：Material Design

使最为重要的按钮(特别是行为号召按钮)看似最重要的。例如，亚马逊使用了对比性较强的黄色按钮来吸引用户采取正确的行为。

亚马逊的CTA按钮「加入购物车(Add to Cart)」使用了对比颜色

结束语

所有按钮(比如经典按钮或者像虚拟按钮或浮动操作按钮等现代按钮)的作用都是指导用户实施你想让他们去采取的行为。

把网页或者 app 当做一个繁忙的用户发起的对话，那么按钮对这段对话就非常重要——流畅的交互能保证对话正常进行，而小故障(比如找不到正确的按钮)就会引起中断，更甚是故障。

达内时代科技集团致力于培养面向电信和金融领域Java、C++、C#/.Net、3G/Android、3G/IOS、PHP、嵌入式、软件测试、UID、网络营销、网络工程、会计、UED、web、Unity3D、大数据、童程童美等17大方向中高端软件人才课程与少儿教育课程。选择山西ui培训，不再孤军奋战，轻轻松松做IT高薪白领。太原达内培训带领有明确目标的学子迈向成功之路!想找工作的求职者可以加QQ：3373924515（太原达内就业服务部）咨询了解。