宁波IT培训
美国上市IT培训机构
0574-87236644
如何让按钮设计的更迷人（下）
- 时间：2019-08-02 11:19
- 发布：宁波达内培训
- 来源：网络
- 分享到：
3_6.水平内间距
有两种方法可以接近水平内间距。
第一个方法：
使按钮宽度与网格对齐。这是保持所有按钮长度一致的好方法。但是它限制了你可以使用的字体数量。
宽度由网格决定的按钮
第二个方法：
两侧有固定内间距。我通常还会定按钮最小宽度，虽然避免了很窄的按钮，但是最小宽度按钮可容纳的不同字段会让按钮看上去不是很均匀。
宽度由内间距和标签长度决定的按钮
按钮状态和反馈
按钮状态让用户知道他们是否可以点击、已经点击或已成功点击。按钮还可以有重叠的状态。例如可以同时是“点击”和“悬停”状态。
4_1.点击和禁用状态
点击状态就是鼠标可以点击按下按钮的状态，当然如果用户没有完成必要的步骤，按钮可以被禁用。例如用户没有输入他们的姓名和电子邮件地址，他们就不能提交他们的详细信息。
点击和禁用按钮
4_2.悬停和悬停离开（鼠标悬停和鼠标悬停离开）
在PC端按钮应具有不同的状态，让用户知道它是可点击的。通常“悬停”状态和“悬停离开”状态相反，但也不一定。你应该有效的区分让用户感知鼠标悬停在某个按钮上。
悬停演示按钮
平板电脑和移动设备上永远不会出现悬停状态，因为你的手指无法“悬停”。如果您正在为应用程序进行设计，请不要担心此状态。
4_3.焦点
焦点状态可能会让用户困惑。如果你的用户专注度较差，他们可能需要使用选项卡式导航。用户将点击“选项卡”在网站上移动，从一个导航链接移动到下一个。这意味着按钮需要有一个“焦点”状态才能显示它是“可点击的或尚未点击”。
默认的焦点状态是蓝色“发光”，幸运的是，我们生活在一个可以自定义按钮状态的时代。大多数设计师对悬停和焦点状态使用相同的视觉提示。
两个不同“焦点”状态的例子
4_4.按下
按下状态是当用户的光标或手指“按住”按钮时的状态。当用户将手指或光标“释放”在按钮上时，该按钮会指示为“已点击”。
“按下”状态的按钮
4_5.点击
按钮需要“点击”状态以向用户指示它已被点击。
“点击”状态的按钮
按钮标签
按钮标签的诀窍是一致性。我们在产品设计前期需要制定按钮标签的规范，以避免以后花更多时间去改变你所有的按钮标签。
5_1.动词的用法
大多数按钮都包含指示按钮将执行什么操作，例如“保存”、“发布”、“编辑”。虽然“back”和“next”不是动词，但在接口上下文中，它们的工作方式似乎相同。我喜欢在编写按钮标签时使用“动词”+“名词”结构，这会让操作更具规定性，例如“保存文章”等，而不是“保存”。
5_2.案例
你还应该决定使用哪种字体大小写。以下是我使用的一些规范：
所有大写字母，例如“NEXT SECTION”，我把它们用于更专业的平台。Material Design使用所有大写字母的按钮。
标题框，例如“Next Section”，我倾向于避免使用标题大小写，因为它不像句子大小写那样容易阅读。就语调而言，我认为它介于“专业”和“会话”之间。
句子大小写，例如“Next section”，我把它们用于更“友好”或“对话”的平台。它更像是一句话，正常我们一句话结束会加一个句号，但是为了设计的美感，请不要加一个句号。
小写，例如“next section”，小写按钮标签使用频率较低。
5_3.一致性
为按钮编写标签时，请确保一致性。以下是一些我在项目使用的指导原则：
选择字数：每个按钮一个、两个或多个字
选择大小写：句子大小写，或大写，或标题大小写，或小写
标签结构：如“动词”+“名词”，或“动词”等。
触摸屏按钮
桌面按钮大小调整（单击）
因为桌面上的光标比触摸屏上的手指小，所以您可以将按钮缩小很多。
触摸屏按钮尺寸（点击）
麻省理工学院触摸实验室的研究表明，人在使用触摸屏时手指部分是8-10毫米，如果你想避免用户手指触摸错误，最小目标尺寸需要10毫米或更大。如上所述-我需要较大的按钮。
那么，你应该做多大尺寸的按钮呢？专家们说的是：
Material Design建议接触目标应为48dp x 48dp，不同接触点之间距为8dp。
虽然我找不到关于iOS设计系统目标尺寸的任何文档，但一般的理解是，它的最小目标尺寸是44 x 44磅。
如果您在设计大小尺寸方面遇到困难，我强烈推荐Zac Dickerson关于易用性的故事。
按钮位置
如果你非要放置2个按钮，主按钮应放在哪一侧？
主要和次要按钮的两种不同立场
选项A显示左侧为主按钮。它可能是用户首先想要看到的，所以先显示它。
选项B显示右侧为主按钮。我们希望用户首先看到辅助按钮，方便他们继续完成他们的旅程。右侧的按钮也表示继续。
系统按钮
这里会介绍一些很酷的设计原则和系统。我喜欢Material Design System的按钮，因为他们的原理是经过深思熟虑的。
Material Design System的按钮
Material Design 按钮图片
Material Design中介绍了按钮的操作，以及按钮如何与系统中的其他组件交互。我喜欢用户在触摸屏上使用按钮的交互方式。
查看按钮部分：
悬浮按钮在这里查看：
总结
如果没有按钮，你就不能真正构建界面；我们应该更多的关注它们。了解按钮在界面中是如何设计的？怎样正确的使用按钮并为你的用户提供最佳的体验？
预约申请免费试听课
上一篇：如何让按钮设计的更迷人（上）
下一篇：10个UI设计案例经验分享
Copyright © Tedu.cn All Rights Reserved 京ICP备08000853号-56 达内时代科技集团有限公司 版权所有
选择城市和中心
北京
内蒙古
山东省
江苏省
上海
湖南省
江西省
贵州省
广西省
广东省
海南省
台湾