收藏文章 楼主
版块:网站建设   类型:普通   作者:AB模板网   查看:6539   回复:0   获赞:0   时间:2021-10-19 12:21:16
文本输入框设计,不管是网站还是APP,当新用户开始使用一款APP或是入驻某个网站时,大都需要你借助文本输入框来获取少量的个人信息(用户名等)。所以输入框在整个页面的设计对用户体验有着重要的作用。   这看似简单的设计,但一个成熟的文本输入框设计则需要满足许多“潜规则”,今天就跟着方快小编一起来了解下这些规则:   清晰的文本标签 用户想要知道他们输入的字段到底是什么样的数据,自然是需要文本标签清晰的告诉他们。当然,有时候用户也是借助字段相关的图标来了解输入框对应字段含义的(比如用户通常看到放大镜的图标会意识到这是一个搜索框)。但是在绝大多数的情况下,文本的标签是必须有的。   使用短文本标签 标签并非帮助性的说明,所以你应该使用的是简短(几个字)的描述性的短语作为标签,以便用户能够快速扫视。如果有额外的信息,通过上下文或者额外的帮助性的说明来让用户有所了解,而不是超长的标签。   合理的输入框尺寸 如果你的输入框尺寸是按照输入内容的长短、尺寸来设计的话,会更加适宜用户阅读和输入。   输入焦点 对于输入框,当用户选中准备输入的时候,应当提供清晰的视觉提示,比如外发光的输入框,或者闪动的光标,都行。   输入提示 数据的呈现方式多种多样。所以,当你在设计输入框的时候,应当与用户输入信息的类型、格式相互匹配。不过要做到完全的对应并不容易。 举个例子,电话号码的输入就存在多种不同的方式,比如我们常见的“+86”,而更多的情况下大家可能会直接输入一串11位的手机号,座机号码的情况则更加复杂,有的人习惯加上区号,而又的人则不会。面对这种复杂的情况,你可以通过设计输入框,加入输入提示来“格式化”输入内容。   提供舒适的点击区域 无论你所设计的是网页还是APP,都应当考虑用户在手机上点击屏幕时的体验。你需要确保用户点击输入框的时候的触发区域足够宽松舒适,而不是很难点击。一般说来,拇指的触发区域应当控制在 45~57px之间,但是在移动端上,控件看起来太大会让人觉得不舒服,所以你的文本框高度应该设计在32~40px之间,这样看起来足够友好,又不会太大。   字体尺寸 在设置字体尺寸的时候,应该确保字体足够大,尽量让它们清晰可辨。网页上设置正文字体的时候,最安全的选择是16px,当然,大小的选取主要还是取决于实际的页面设计,如果识别性问题,应当适当调大一些。   标签颜色 标签的色彩应当依从于你的APP或者网页的整体配色方案,并且确保对比度(不能太暗,也别太耀眼)。W3C 在正文文本对比度上有如下的要求: ·较小的文本应当确保至少和背景之间有4.5:1的对比度比率 ·较大的文本(14pt粗体,18pt常规)应当确保和背景之间的对比度超过3:1   一个完美的界面饱含着一点一滴的细节,这个看似简单的输入框,要实现优良的用户体验,以上几点潜规则必须要服从。
 

网站建设:https://www.jxmseo.com/list-90-1.html

本文转载于网络,如有侵权请联系删除


全站外链: TEC传感器 | 猫掌外链
 
回复列表
默认   热门   正序   倒序

回复:网页制作中文本输入框设计的几点规则

网站公告

近期本站被人为恶意注册及发布垃圾帖,每一个发帖都会经过审核,一经发现违法或垃圾帖的用户,帖子将被删除或封号,请大家共同维护互联网环境,共创美好互联网未来。

详细的发帖规则请阅读:

《小猪外链网发帖规则》

《小猪外链网最新金币规则》

注:本站严禁发布灰色违禁违法内容,如发现立刻永久封号,如开通会员的概不退款。

Powered by 小猪外链网 8.3.15

©2015 - 2025 小猪SEO外链平台

备案号:浙ICP备17015142号

免责申明:本网站内容由平台入驻会员撰写,除创始人账号外,其他观点仅代表作者本人,不代表小猪外链网立场。如果内容涉及侵犯其他公司、团体的利益、请联系小猪SEO外链网客服举证删除

您的IP:18.188.163.142,2025-05-11 00:03:30,Processed in 0.42421 second(s).

各位站长请准守小猪SEO外链网的发帖规则,文明理性发言

外链优化

用户名:

粉丝数:

签名:

资料 关注 好友 消息
分享
已有0次打赏