
使用猪八戒APP
随时随地享服务
发布:2026-04-10 11:26 0浏览
由于工作需要,仔细研究了下原生的文本输入框的规范,顺道整理了出来。内容简介:输入标签样式输入单行文本框输入多行文本框全宽文本框字符计数器自动补充文本搜索过滤器必填项输入密码项1、输入当焦点在输入框上时触发两个动作:显示光标弹出键盘分解输入框标签是描述每个文本框请求的命令。提示文本是对输入信息建议的占位符,有时是对输入格式的举例。帮助文本出现在输入框下方用来展示额外的信息。如下图所示:1、标签2、提示文本输入类型输入框的类型决定了输入框里允许输入什么样的字段。虚拟键盘会针对输入框需要的内容对输入文本进行优化。需要优化常用类型包括:数字:电话号码、信用卡号、PINText文本:专有名词、用户名、URL混合的格式:邮件地址、街道地址、搜索查询自动大写在相应的必须输入场景下首字符应该大写,每个句子的首字母也是一样。比如在输入如下相关的文本时:需要给一些东西命名,比如蓝牙设备、用户、指纹或者警报。包含像句子一样的信息,比如短信。2、标签当用户开始在文本框输入字段时,浮动在文本线上的标签移动到文本框上部。如下图:标签颜色标签颜色应该符合产品的用色,同时满足相应的对比度。正常主题正常提示文本/标签样式获取焦点样式正常输入文本和标签样式不可点样式(这几种样式会在下面多次出现,不再一一介绍)夜间主题规格浮动标签提示和输入的文本常规标签密集标签在文本被输入之前,浮动标签文字是16sp(或以13sp密集标签存在)。一旦文本被输入进去,标签被移动到文本框之上且字号变为12sp(不论是常规标签还是密集标签)。浮动标签72dp标签文字12sp16dp8dptext提示和输入的文字16sp8dp输入框的底线8dp浮动标签60dp标签文字12sp12dp4text提示和输入的文字13sp12dp输入框的底线4dp3、样式密度当鼠标和键盘是主要的输入方法时,需要以密集文本框的方式去显示。颜色输入框应当反应产品的用色。推荐以下颜色:输入框和光标:使用应用用色规范里的提亮色或对比鲜明的颜色。错误提示:使用对比鲜明的颜色用于提示错误,比如更热烈的颜色(红色或黄色)。正常主题-黑色文本(#000000),不同状态下的文本不透明度值:普通%鼠标经过%点击/按下%获取焦点%普通输入文本%错误%不可用%夜间主题-白色文本(#),不同状态下的文本不透明度值:普通%鼠标经过%点击/按下%获取焦点%普通输入文本%错误%不可用、输入单行文本框输入单行文本框颜色的选择应该遵循产品的用色。正常主题font:48dp16dp8夜间主题48dp16dp8text:13sp40dp12dp4icon带有提示图标的正常主题font:48dp16dp48dp16dp8dpIcon:24text:13sp40dp12dp4dpIcon:20dp5、输入多行文本框在光标到达下边缘时候,文字溢出时自动换行和垂直滚动。颜色的选择应该遵循产品的用色。正常主题font:1616dptext:13sp12dp6、全宽文本框单行和多行文本框font:常规全宽文本框:56dp20text:13sp48dp16dp(下)篇会在两周内发出来:7、字符计数器8、自动补充文本9、搜索过滤器10、必填项11、输入密码项欢迎关注专栏“一枚设计”知乎专栏咩~~以上
0赞同
2026-04-10 11:26:10