江苏龙网

  1. 首页 > 资讯 > 科技 > >

|输入框设计，有哪些容易忽略的“潜规则”？


输入框在互联网产品中可能是最常用和常见的交互组件之一 ， 对于输入框的定义相信大家都了解是用户输入文本内容的载体组件 。 但是对于一些细节交互的“潜规则” ， 一些新人设计师常常容易忽略 。
以下内容是我们对输入框交互细节的一些思考及需要注意问题 ， 与大家分享：
|输入框设计，有哪些容易忽略的“潜规则”？
本文插图

根据不同的场景需求 ， 我们大致可将输入框分为短文本输入框、长文本输入框、浮动型文本输入框、特定场景输入框（如应用在搜索、二维码校验等特定场景下） 。 我们今天不介绍每种类型的输入框具体的定义 ， 就说说各个输入框容易被新手忽略的“潜规则”吧～
“潜”规则一：输入极限值如何处理？
不同的输入框类型对于极限场景的规则不同 ， 通常以短文本与长文本两种输入框为典型 。
我们来具体看一下：
1. 短文本输入的极限场景
短文本输入框意味着输入的内容都比较简短 ， 如姓名等 。 一般的处理方式是会在逻辑层限制最大的字符数 ， 但是不需要一开始就告知用户 。 在字符限制内允许用户无限向后输入 ， 此时文本框显示最近输入的内容从右向左推进 。 只有当用户不小心误触或“调戏输入框” ， 输入超长文本时 ， 才会出现对应的提示 。
|输入框设计，有哪些容易忽略的“潜规则”？
本文插图

Trip.com 短文本输入极限??
对应的提示方式我们认为可以根据具体的场景及设计规范去选择 ， 属于兜底处理 。 可以是像Trip.com这样轻量精准的提示 ， 也可以像美团外卖带有“趣味性”的提示
|输入框设计，有哪些容易忽略的“潜规则”？
本文插图

2. 长文本输入的极限场景
我们通常固定的设计思路是在超出字数限制时输入即无效 ， 简而言之就是不让再输入了 ， 同时加入提示告知用户不可再输入的原因（这里的提示尽量以轻量清晰的方式出现） 。
假设用户输入恰好在字数限制的临界点的场景 ， 用户原本的想要输入的文字是在字数范围内 ， 但由于单个文字输入时是由拼音字母组成 ， 此时输入的字数统计为字母数 ， 导致用户的编辑无法生效——这对于用户来说是一个不好的体验点 。
|输入框设计，有哪些容易忽略的“潜规则”？
本文插图

输入状态时会因为拼音字母个数而超出限制??
虽说这是属于非常极端和细微的场景 ， 考虑到设计的细致性 ， 还是建议在超出字数的时候仍可允许用户输入；可在输入框下方显示提示文字以及置灰用户的下一步操作来告知用户 ， 用户可在已输入的内容中自由对其进行删减顺利进入到下一步 。
|输入框设计，有哪些容易忽略的“潜规则”？
本文插图

超出时仅以统计字数来告知用户 ， 同时置灰下一步操作??
【|输入框设计，有哪些容易忽略的“潜规则”？】关于字数统计这里有个小tips：
给开发小哥们是关于字数而不是字符数的统计 ， 特别是在输入内容涉及多种语言的场景下 ， 对于字数统计的规则会有所不同 ， 如若需要 ， 设计侧可以列出一个白名单（可计入字数的字符说明）或是黑名单（不可计入字数的字符说明）给开发小哥们 ， 以此确保设计还原的准确性 。
“潜”规则二：输入框是否支持伸展
不知大家是否试用过长文本输入框的极限场景 ， 在没有做字数限制的情况下如果持续的输入文字 ， 会发生什么？
1. 高度伸展
1）一种通常的设计是固定长文本输入框的高度 。 在此高度内向下输入 ， 同时会出现滑动条或最上方的文字露出半行来告知用户这里有多行内容可以自行滑动查看 ， 这种设计适用于内容比较多的页面 ， 限制的高度不会影响页面的整体结构和美观度 。


推荐阅读


上一篇：看看新闻Knews|卖包子卖盒饭……我是小新，我是无人零售车

下一篇：新机发布|Galaxy Note 20 Ultra疑似真机照曝光：质感不错