1. 主页 > 行业资讯 > 设计文章 >

AXURE原型设计:移动输入框的设计思路

输入框可以说是每一个软件、系统、app必不可少的组成部分,但是很多新产品经理不知道如何使用原来的输入框,判断逻辑不清晰。笔者结合工作实践,分享了手机版输入框的设计思路,避免了不必要的弯路。

输入框可分为以下几种类型:单行内容文本框、多行内容文本框、手机号码文本框、电子邮件地址文本框、身份证号码文本框、密码输入框、验证码输入框...

01单行内容文本框

单行内容文本框是最简单的文本框,对输入内容没有限制。与网页侧文本框不同的是,当文本框获得焦点时,键盘弹出,当按下键盘键时,可以在文本框的光标位置添加键文本。

虽然单行文本框的逻辑很简单,但是后续的文本框都是基于单行文本框进行变形或者添加条件的。

02多行内容文本框

多行内容文本框主要用于写文章、写博客等需要输入长词的地方。其原理是在单行文本框的基础上增加行数。因此,这里请注意,当你点击回车按钮时,你应该添加新行的逻辑,其他逻辑与单行文本框一致。

03手机号码文本框

由于不同国家的手机号码格式不同,我以中国大陆的手机号码输入框为例来说明手机号码输入框的逻辑。首先,手机号码是纯数字的,不能出现任何人、字母或特殊符号。

所以我们需要控制手机键盘,也就是只能输入数字。如果用户点击其他按钮,如字母、特殊字符等,则无需交互。其次,我们需要判断手机号码的数量是否是11位数字。如果不是11位数字,则手机号码填写不正确,提示客户重新填写。如果手机号码是11位数,则进入下一步,判断位数是否为1。如果不是1,则手机号码填写不正确,提示

电子邮箱

邮件输入框也是在单行内容文本框的基础上增加判断条件。

首先需要判断@的个数。正确的电子邮件中只有一个@所以我们需要判断电子邮件文本框中是否只有一个@字符。否则,输入的电子邮件格式错误,需要提示用户重新输入。

如果有,我们在判断是否有”。,如果没有“.”,输入的电子邮件地址格式错误,需要提示用户重新输入;如果有”。,我们在判断“的位置”,并且必须至少有一个“.”@之后。如果没有,则输入的电子邮件地址格式错误,需要提示用户重新输入。如果以上条件都满足,我们没有理由拒绝原假设的邮件地址正确。

05身份证输入文本框

对于身份证号码输入框,需要在单行内容输入框的前提下添加限制条件和判断条件。

限制:只能输入数字和英文字母X(因为有些用户习惯输入小写的X,所以也可以输入X)

判断条件:首先判断输入内容是否为18个字符,如果不符合条件,提醒用户身份证号输入错误;如果满足条件,则判断是否有英文字母X和X,如果有,则继续判断X和X是否只在第18位,如果没有,则提醒用户ID号输入错误;如果是,简单判断身份证号是否正确。

为什么说简单判断,因为身份证的构成有不同的含义:

1-6位是出生地址编码,如果要复杂的做还要校验地址编码是否正确7-14位是出生年月日,如果要复杂的做还要校验出生日期的格式是否正确15-16位是出生顺序号,无需校验17位是性别编号,无需校验18位是身份证校验吗,也无需校验

但是,即使所有的规则都写进去了,也有可能是身份证号码和姓名不正确。现实中公安局会联网检查输入的身份证号码是否正确。因为我们没有借口,所以我们简单地去做。

06密码文本框

密码文本框是最简单的密码输入框,在单行内容文本框的基础上增加了切换可视状态的效果。一般来说,应该根据安全要求添加一些特殊条件,如8-20个字符、数字、大小写字母、特殊符号等。可以根据实际需求添加限制。

07验证码文本框

这里的验证码是指手机短信的验证码,也是在一个单行内容文本框的基础上增加了限定条件。只能输入数字,然后有的数字是4位,有的是6位。条件可以根据实际需要添加。一般为了漂亮的更新验证码输入框,我们总是会改变输入框样式,如下图所示。

这就是本期关于移动终端常用输入框的全部内容,主要是基于我个人在实际工作中需要用到的原型,设计了axure组件。

 

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/501.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息