Human Interface Guidelines — Text Fields

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

Text Fields

Human Interface Guidelines链接:Text Fields

Text Field

Text Field 是单行、固定高度的 field,通常带有圆角,当用户点击它时会自动弹出键盘。

使用 text field 来获取少量信息,例如电子邮件地址。

使用时注意

·在 text field 中显示提示以帮助明确目的。

当 field 中没有其他文本时, text field 可以包含占位符文本(如“电子邮件”或“密码”)。 占位符文本足够表达意思时,请勿使用单独的 lable 来描述text field。

·适当时在文本字段的右端显示一个清除按钮

 当存在清除按钮元素时,点击它将清除文本字段的内容,而不需要一直点击删除键。

·适当时使用安全 text fields

 当您的应用程序询问敏感数据(如密码)时,请始终使用安全的 text fields。

·使用图像和按钮在 text fields 中提供明确性和功能性

 您可以在 text fields 的左侧或右侧显示自定义图像,也可以添加系统提供的按钮,例如书签按钮。 通常,使用 text fields 的左端来表示 fields 的用途,右端用于指示附加功能(如书签)的存在。


Keyboards

使用时注意

·显示适当的键盘类型

iOS提供了几种不同的键盘类型,每种类型都被设计为便于不同类型的输入。 为了提高数据输入效率,编辑 text fields 时弹出的键盘应该适合该  fields 中的内容类型。 例如,如果app 要求输入电子邮件地址,则应显示电子邮件地址键盘。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程

AngularJS中使用表单输入的应用设计

在Angular中使用表单元素非常方便。正如我们在前面几个例子中看到的,你可以使用ng-model属性把元素绑定到你的模型属性上。这一机制对于所有标准的表单元素...

1826
来自专栏移动开发之家

Flutter完整开发实战详解(二、 快速开发实战篇)

 作为系列文章的第二篇,继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后,本篇将为你着重展示:如何搭建一个通用的Flutter ...

1.1K3
来自专栏大前端开发

使用mpvue开发小程序教程(五)

在上一章节中,我们了解了组件的三个基本特性以及组件的基本使用方法。在实际的小程序开发中,我们应该以组件的思维去设计每个小程序的功能页面,对其进行合理的组件拆分,...

2222
来自专栏Google Dart

AngularDart Material Design 日期选择器 顶

当用户键入日期时,将专门处理具有2位数年份的日期。 例如。7/7/77被解释为1977年7月7日,而不是77年7月7日。这个逻辑看起来是未来20年:现在(201...

2123
来自专栏世界第一语言是java

vue点击图片放大预览图片支持旋转等

提到图片放大预览,可能好多人想到的是lightbox,在vue中使用lightbox还挺麻烦,但是伸手党做习惯了,所以去github上搜索了一个,感觉效果很完美...

2192
来自专栏DeveWork

解决七牛云存储缓存加速Gravatar 头像图片路径url 参数失效的问题

前天分享了《通过七牛云存储 缓存加速Gravatar头像,解决被墙问题》,不过这昨天发现通过七牛云存储缓存加速Gravatar 头像,会导致头像图片所在的路径 ...

2217
来自专栏斑斓

基于MVC理解React+Redux

我认为MVC模式虽然已经诞生了许多年,也有无数前端框架遵循了MVC模式,但我们在前端开发时,很多时候还是忽略了这个模式蕴含的思想。该思想的核心就是职责分离,这种...

3456
来自专栏dotnet & java

datatables 配套bootstrap3样式使用小结(1)

公司CMS内容资讯站的后台管理界面用了大量的table来管理数据,试用了之后,感觉挺不错,推荐一下。

1132
来自专栏偏前端工程师的驿站

JS魔法堂:IMG元素加载行为详解

一、前言                               在《JS魔法堂:jsDeferred源码剖析》中我们了解到img元素加载失败可以作为函数异...

2106
来自专栏DeveWork

代码实现WordPress自动关键词keywords与描述description

之前在文章《WordPress自定义栏目运用实例II:添加文章Meta标签(keywords /description)》中给出了手动添加关键词keywords...

2809

扫码关注云+社区

领取腾讯云代金券