江苏龙网

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

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


2）还有一种设计是当输入内容超出输入框高度时 ， 输入框随着内容自动向下延伸 。 这样的设计能让用户清楚自动自己输入的所有内容 ， 方便用户检查和删改 ， 但高度的延伸会影响页面整体的结构 ， 如果输入框下面还有其他的控件 ， 也需要跟随着高度进行自适应的调整 ， 因此这样的设计应用比较少 ， 更适合用户页面结构比较简单且长文本输入框的内容很重要的场景 。
|输入框设计，有哪些容易忽略的“潜规则”？
本文插图

输入框随着文本输入而伸展??
2. 模式切换
输入框伸展还有一种方式是提供用户自主选择进入专注输入的模式 ， 常见于用户可自由选择输入长文本或是超长文本的场景 ， 如评论 ， 若用户可做一番“长篇大论” ， 可自主进入专注编辑的模式 ， 便于超长文本的输入 。
|输入框设计，有哪些容易忽略的“潜规则”？
本文插图

点击 进入评论编辑的页面??
“潜”规则三：如何与微动效进行“合体”
输入框与微动效结合并应用的场景越来越广泛 ， 这里的微动效出现在用户进入输入状态前和进行输入时 。 这样的输入框也就是我们前文所说的浮动型文本输入框 。
1. 怎么「合体」？
这一类的输入框不固定出现标题 ， 只有一行占位符文本 ， 在用户激活输入框进行输入时 ， 占位符文本上移成为小标题 ， 用户在输入时和输入完成后 ， 输入框的展示方式是小标题+输入的内容 。
|输入框设计，有哪些容易忽略的“潜规则”？
本文插图

输入与动效结合??
2. 为什么要「合体」？
浮动型文本输入框适用于多输入框的页面 ， 因为它可以解决以下问题：
1）减少用户的认知障碍 。 在多输入框的页面 ， 如果有固定标题的展示 ， 用户进入页面后会看到很大篇幅的输入框 ， 影响用户对页面信息的获取及关注 。 采用浮动型文本输入框可以减少文本信息对用户的干扰；
2）在第1点的基础上 ， 可以辅助用户明确当下输入的内容是否正确有效 ， 可以解决用户对当下输入的内容需要小标题去辅助其认知的场景 。
3. 「合体」要注意什么？
1）注意浮动型输入框输入框的高度 。 在保证输入初始状态美观度的同时要考虑标题出现的空间 。
2）注意错误反馈的出现方式及位置 。 如果是用户未输入内容 ， 其提示可以高亮占位符文本及输入框告知用户；若是输入内容不符合规则时可以在输入框下方延伸错误提示的区域 ， 同时高亮输入框 。
3）注意键盘的处理 。 用户在进入输入状态时会拉起键盘 ， 这时候可以把键盘「确认」的按钮改为「下一项」 ， 即确认当前输入框的内容同时进入下一个内容输入 ， 这个设计适用于多输入框的表单场景 ， 可以减少用户操作 。 这里需要特别提醒 ， 到最后一项输入时记得把这个按钮改为「完成」 。
|输入框设计，有哪些容易忽略的“潜规则”？
本文插图

多项输入时键盘按钮的变化??
“潜”规则四：披上马甲就是“新”的自己
前面我们有说到特殊场景的输入框 ， 如输入验证码、输入密码、进行搜索等等 。 这样的输入框看起来像是一个输入框 ， 又不像是输入框的范畴 ， 根本原因在于其规则场景比普通的输入框多了许多限制或功能 。
1. 验证码输入
验证码输入是限定了输入字数和字符类型 ， 对输入内容的校验具有时效性 ， 对此不展开多说 ， 相信大家都不陌生 。
2. 密码输入
密码输入通常也会有字数的限制和字符的规则限制 ， 同时还带着密码可视的功能 。
3. 搜索框
搜索框的场景规则可谓是相当复杂 ， 给用户提供的搜索建议、搜索历史记录、搜索生效规则、再次编辑的规则等等 ， 后续我会再写一篇文章进行具体分析 。


推荐阅读


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

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