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

相关文章

来自专栏hightopo

百度地图、ECharts整合HT for Web网络拓扑图应用

1172
来自专栏移动开发

杂记

1.EditText自动获取焦点弹出软键盘 为了防止上述情况,可以在其父级控件中添加如下属性:

1043
来自专栏大内老A

通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用

较之面向最终消费者的网站,企业级Web应用对用户体验的要求要低一些。不过客户对“用户体验”的要求是“与日俱增”的,很多被“惯坏了”的用户已经不能忍受Postba...

2209
来自专栏林德熙的博客

本文说如何显示SVG

这些图片在http://www.zcool.com.cn/,不知道是不是不能直接用 我们需要一个看起来不会模糊,因为矢量图,所以我们就使用svg,其实png也...

352
来自专栏hotqin888的专栏

engineercms利用pdf.js制作连续看图功能

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

941
来自专栏程序员的SOD蜜

使用ASP.NET MVC2+PDF.NET 构建一个简单的新闻管理程序 示例过程

     最近开始学习ASP.NET MVC技术,感觉跟原来的ASP.NET WebForm差异实在是太大了,看了2天的理论知识,才敢动手写一个实例程序。尽管是...

2338
来自专栏finleyMa

Laravel 使用中间件进行权限控制

先看 文档 Laravel 中间件提供了一种方便的机制来过滤进入应用的 HTTP 请求。 这里实现一个只有admin角色才能访问特定路由的功能

1133
来自专栏大内老A

在ASP.NET MVC中通过URL路由实现对多语言的支持

对于一个需要支持多语言的Web应用,一个很常见的使用方式就是通过请求地址来控制界面呈现所基于的语言文化,比如我们在表示请求地址的URL中将上语言文化代码(比如e...

1796
来自专栏cnblogs

use vue vuex vue-router, not use webpack

     vue,vuex,vue-router放在一起能做什么?不用webpack之类的打包工具使用他们是否可行?各位道友在初学vue时是否有这样的困惑。因为...

1858
来自专栏数据小魔方

数据地图系列10|excel(VBA)数据地图透明度填充法

今天要跟大家分享数据地图系列的第10篇——excel(VBA)数据地图透明度填充法。 这种方法的制作步骤难度与前一篇相比都较低,但是涉及到的VBA代码却要比前一...

4395

扫码关注云+社区