首页 > 建站资源 > 网站运营 > 从交互和UI两个方面分析,文本框的正确打开方式

从交互和UI两个方面分析,文本框的正确打开方式

时间:2018-08-15    来源:人人都是产品经理

文/墨白

在开始设计文本框之前,要问自己三个问题:这个地方要实现什么功能?必须以文本框的形式出现吗?是不是有更好的替代方案?

因为相对于其他的人机界面交互方式来说,输入成本是最大的。

结构

文本框的结构包括可见和非可见两部分,可见部分通常由标签Label、提示信息、输入框、功能性图标、内容、反馈六部分组成,非可见部分指文本框的校验形式(即时校验、失焦校验、提交校验)和校验方式(前端校验、后端校验)。

下面我将从交互和UI两个方面分析一下文本框正确的打开方式。

交互

1. 正常状态

(1)标签Label与输入框的位置

Label与输入框的位置关系主要有以下四种:

① Label与输入框自上而下左对齐排列,浏览和输入时,视线不存在左右扫描的情况,速度最快,常见于移动端。

② ③ Label与输入框在同一水平高度上,Label对齐方式不同(左对齐和右对齐),常见于PC端,用户以Z字形方式浏览和输入,效率相对较低一些。对于涉及到安全、重要的信息,采用这种形式能够减慢用户输入速度,降低用户的出错率。

④ Label在输入框内以提示信息形式出现,这种看似简洁又节约页面空间的形式存在诸多问题:

  • Label和提示信息会产生冲突,尤其当提示信息内容较多时;

  • 当用户的输入被打断或修改时,需要回忆Label是什么,甚至需要删掉已输入的信息重新查看Label,成本太大;

  • 给用户造成产品不安全的感觉。

还有一种比较特殊的形式–浮动式标签(如下图),正常情况下Label在输入框内,当激活输入框时,Label变小浮动到框内左上角,常见于移动端较多,阅读效率高,节约页面空间;不足是在小屏幕下Label识别性较低,提示信息较多时,展示也存在问题。

(2)提示信息的位置

提示信息的位置一般有三种,如下图所示。第一种一般用于对输入内容有要求的情况,用户需要边输入边核对要求;第二种一般用于无约束条件的情况,Label的名称足以提供给用户有效的信息,用户填写出错率较低时使用;第三种,提示内容隐藏在icon中。

常用于以下两种情况:

  • 提示信息内容很多,完全展示时已经对页面整体效果造成了破坏;

  • 重要程度相对较低,起到辅助作用的信息。

(3)Label和提示信息的内容

Label和提示信息应当做到“精”、“简”、“短”的要求,避免冗长的文案造成阅读和理解压力。

(4)默认为激活状态

新打开页面时,文本框自动为激活状态,简化用户操作路径,用户可直接输入。这种形式常见于界面内只有一个文本框的情况。

2. 输入状态

(1)输入法则

  1. 提示信息中要有明确的支持格式限定,如字母大小写、下划线、特殊符号等;

  2. 如果输入框有明确的字符数限制,要给出明确的提示。字符限制有两种类型:超过规定字数仍可以输入,飘红显示超出多少字;达到最大字数时不能继续输入(如手机号输入框);

  3. 输入信息后,要有一键清空的icon,尤其是针对操作不方便的移动端。

(2)输入源

  1. 支持文本粘贴、复制、剪切等常规操作;

  2. 移动端激活输入框时唤起键盘,唤起数字键盘还是中英文键盘要根据内容性质确定。如手机号、身份证号等应该直接唤起数字键盘,避免唤起中英文键盘后需要用户手动切换到数字键;

  3. 为输入框提供更便捷的输入方式,如扫描银行卡号的形式代替数字输入,GPS定位代替地址输入,游戏中角色取名可通过摇骰子的形式随机生成。

(3)特殊文本:密码文本

由于明文的密码会让用户感到不安全,因此在密码上面添加遮罩形成了密文密码。密文在用户输入错误时修改又比较麻烦,就出现了明/密文切换的形式。

移动端由于输入不便,修改成本高,一般情况下默认为密文,点击icon可显示明文。PC端一般只有密文形式,不支持明文,一是因为PC端使用键盘输入,错误率很低,二是考虑到他人借用电脑时密码的安全性。

相关推荐
网站的分页设计如何做得让用户体验更愉悦?
WEB产品设计须理清脉络 引导用户做正确选择
用户注意力与交互设计的简单分析
13个国内知名互联网公司的产品设计团队博客网址
网站页面重构中如何创建良好的用户体验
互联网产品设计之影响用户体验的4个因素
交互设计的细节分析之分页设计
以移动应用设计为例讲解符合用户预期的设计思路
什么是响应式网页设计?
20大UI设计原则 设计师必备宝典
新浪潮下产品交互设计的三个新趋势浅析
如何在6个月内自学成才成为一个互联网设计师?
产品设计中认知心理学分析其交互设计
案例分析情感化设计对用户体验的影响
B2B行业网站导航菜单的易用性设计原则
细说用户体验设计背后的“黑暗模式”
10条有效提高网站可用性的经验技巧分享
互联网产品设计理念:产品即有机生命体
遵循用户需求的设计:最美APP的9条闪光定律
扁平化交互设计让用户体验更棒
如何让网站更“值得点击”?五大用户体验要点可搞定
从电商网站应用设计中学到的九个成功秘诀
作为一个顶尖产品经理必备的6大特征!
60个以小见大的互联网产品设计细节汇总
对话谷歌交互设计师:Google是怎么做设计的
细节决定成败!提高用户登录体验的5个细节
VXPLO:一款快速实现网页交互设计的工具?
网站设计的10大金律:帮你更好的留住用户!
我与交互设计这十年:交互之外的那些事儿
2014年八个最棒UI设计灵感:你最中意哪个?
Web APP与原生APP有哪些交互设计区别?
访谈:关于锤子科技 你不曾了解的有趣一面
戏说“愉悦”强迫症:真的交互设计满足需求
产品实用技巧:交互说明中容易忽略的几件事
华为总监:18条交互设计和心理学之间的联系
百度官方出品!2015-2016交互体验趋势

精彩推荐

热门教程