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 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

CSS-自定义高度的元素背景图如何自适应以及after伪类在ie下的处理

3238
来自专栏CDA数据分析师

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

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

1908
来自专栏cnblogs

如何写好css系列之button

      现代前端行业的发展,如果你在css的时候,还没有利用一些预编译工具,是否觉得自己太low了。但你是否考虑过搭建一套自己前端框架。可能你会想这是否有必...

2157
来自专栏封碎

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

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

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

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

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

1795
来自专栏Golang语言社区

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

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

2703
来自专栏小文博客

前端利器——Fscapture

1131
来自专栏小文博客

前端利器——Fscapture

《FSCapture》是一款抓屏工具,体积小巧、功能强大,不但具有常规截图等功能,更有从扫描器获取图像,和将图像转换为 PDF文档等功能。

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

减少浏览器兼容性问题

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

932
来自专栏逸鹏说道

前端常用插件

插件 parallel.js: 前后端通用的一个并行库 zepto: 用于现代浏览器的兼容 jQuery 的库 totoro: 稳定的跨浏览器测试工具 Thea...

5076

扫码关注云+社区