Human Interface Guidelines —— Buttons

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚

Buttons

Human Interface Guidelines链接:Buttons

Button 用于启动 app 的特定操作,它具有可自定义的背景,并且可以包含title或图标。

 系统为大多数使用情况提供了许多预定义的 button 样式。 也可以设计完全自定义的按钮。


System Buttons

System Button

System buttons 一般出现在 navigation bars 和 toolbars 中,不过也可以在任何地方使用。

使用时注意

·在 title 中使用动词

 一个表明特定动作的 title 能显示出一个按钮可交互的,并说清当你点击它时会发生什么。

·为 title 使用 title-case

将每个单词都大写,除了文章,并列连词和四个或更少字母的介词以外。

·保持标题简短

过长的文本可能会挤占您的界面,并可能在较小的屏幕上被截断。

·考虑只在必要时添加边界或背景

 默认情况下,系统按钮没有边框或背景。 但是,在一些内容区域中,需要边框或背景来表示可交互性。 在电话app中,有边框的数字键使人们将其与传统模式的拨打电话联系起来,并且“呼叫”按钮的背景提供了一个易于引人注目的目标。


Detail Disclosure Buttons

Detail Disclosure Button

Detail Disclosure button 能打开一个view——通常是一个modal view——包含与屏幕上特定项目相关的附加信息或功能。 尽管您可以在任何类型的视图中使用它们,但 Detail Disclosure buttons 通常用于访问 table 中特定行有关的的信息。

·在 table 中适当地使用细节披露按钮

在 table 行中存在Detail Disclosure button时,点击该按钮可显示额外的信息。 在其他地方点击可能会选择该行或唤起app已经定义的行为。 如果您希望人们点击整行以查看更多详细信息,请勿使用Detail Disclosure button,请使用detail disclosure accessory control(>)。


Info Buttons

Info Button

Info Buttons 显示有关app的配置详细信息,有时在当前视图的背面,翻转视图后显示。  Info buttons 有两种样式 - 浅色和深色。 选择最适合您app设计的风格,不会在屏幕上看不清楚。


Add Contact Buttons

Add Contact Button

用户可以点击Add Contact button来浏览现有联系人列表,并选择一个插入到文本区域或其他view。 例如,在邮件中,您可以点击邮件信息的 To 区域中的Add Contact button,从联系人列表中选择收件人。

·除了添加联系人按钮之外,还允许输入键盘

 Add Contact button 为输入联系信息提供了可选项,而不是替代选项。 可以将其作为添加现有联系人的快捷方式,但也可以让用户使用键盘输入联系人信息。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏封碎

解决android自定义标题栏充满的问题 博客分类: Android AndroidEclipseXMLvimGit

        一个接着一个的activity,写啊写,调啊调,后来,终于发觉,activity的标题栏好难看,好单调啊。咱们为了吸引用户的眼球,得搞点个性化的...

1563
来自专栏葡萄城控件技术团队

如何使用纯前端控件集 WijmoJS 中的可视化在线设计器

WijmoJS Designer,一种全新的在线Web托管工具,为WijmoJS纯前端控件集提供了可视化设计图面和 Java代码生成器。 WijmoJS Des...

2752
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-Groceries

课程内容 Ø Panarama控件     Groceries是一个简易的购物清单应用程序,我们可以用它来一步一步建立自定义的购物清单。根据个人的喜好,我们...

1925
来自专栏九彩拼盘的叨叨叨

减少浏览器兼容性问题

做为一个前端工程师,不少时间都在处理浏览器兼容性问题。本文对如何减少浏览器兼容性问题的方法做了些总结。

1252
来自专栏葡萄城控件技术团队

程序员Web面试之jQuery

又到了一年一度的毕业季了,青春散场,却等待下一场开幕。 ? 在求职大军中,IT行业的程序员、码农是工科类大学生的热门选择之一, 尤其是近几年Web的如火如荼,更...

25710
来自专栏CDA数据分析师

一看就会又超级实用的Excel10大技巧

本期责编:Sophie 普通人需要用到的Excel的功能不到其全部功能的10%。也就是说,对于绝大部分的用户来说,只要掌握了几个必须懂的Excel表格的基本操作...

2038
来自专栏DeveWork

Google官方网页载入速度检测工具PageSpeed Insights 使用教程

相信有接触前端开发的大神们都听说过Google官方的PageSpeed Tools,这个网页载入速度检测工具有在线版本也有一个 Chrome 扩展,叫PageS...

6738
来自专栏互联网杂技

HTML head 头标签 总结

HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多...

5187
来自专栏腾讯社交用户体验设计

移动H5前端性能优化指南 - 腾讯ISUX

5021
来自专栏Golang语言社区

nwui —— 又一个go语言图形界面解决方案

Github: https://github.com/go-nwui/nwui 最近开的一个大坑,具体实现就是自动生成htm+css+js然后调用nw.js来显...

2843

扫码关注云+社区

领取腾讯云代金券