«

【解构ui】输入框

今天我们来聊一聊输入框,其实输入框并不怎么招人喜欢,就像考试的时候,相比之下我们都喜欢做选择题而不是问答题,或是写作文,让人写一堆话还真是累人,何况是在这么小的手机屏幕上。 你说不喜欢打字那不还是有很多人在微信上打字,恩,的确是,但是一旦让你输入一些信息之类的,我相信大部分人还是懒得动手。。。

总而言之,今天我们来谈谈输入框的设计方式,以及需要注意的点,至少让要让人用着舒服。

不同的数据类型对应不同的键盘

自动开启首字母大写

自动开启首字母大写这件事有时候有种好心办坏事的感觉,特别是在输入email地址这件事上,就算我知道大小写并不影响邮件发送,但是还是很强迫症的得把大写给关了,每次都得跑回去删掉首字母重写,真是让人抓狂。

因此建议在输入email的时候把首字母自动大写给关了。

自动修改

同首字母大写一样,自动修改有时候也是好心办坏事,和写文章不同,如果你是在让用户输入邮寄地址之类的信息的时候,就别开启这个功能了,这个问题在拼音上特别明显,如果你在一些只支持英文的app上输入地址的时候,它就会好心把你的拼音给改成英语,但是殊不知这真是画蛇添足呀。

固定输入框

在用户输入的时候,不要把你的表格固定住,也就是说不要让键盘遮住用户正在输入的内容。

输入大段文字的时候也是一样的,要将焦点集中在用户的输入行上,不要让键盘挡住了。

默认数值和自动补全

默认输入内容很好理解,就比如可以通过定位自动填充用户的地理位置。 这在之前提到下拉菜单的时候有提到,使用默认数值避免用户通过下拉菜单一个个去寻找。

自动补全这个功能在Google上经常可见, 自动补全能帮助用户尽快的完成输入。 实时的通过下拉框显示用户可能输入的信息帮助用户更加精确的完成输入。 这对于词汇量有限或者拼写常犯错的用户来说很有帮助。

在搜索界面上会常用到信息自动补全功能,输入文本后右侧打叉按钮会自动出现,表示可以一次性删除所有内容。

文字标签和提示信息

在输入的时候,用户想要知道他们需要填入那种信息。清晰的文本标签能够更好的帮助用户去输入。 文本告诉人们这个输入框的目的,文本标签应该在用户输入时输入完后都可见。

有限的字数(文本标签)

文本标签并不是提示语。 文本标签应该是短小描述性的文本(一两个单词),帮助用户快速的扫视。

如果你需要提供更多关于文本框的提示信息, 提示信息能够很好帮助用户减少困惑, 修正错误。 但是不要添加太多的解释文本

使用简单的用户语言

使用用户看得懂的文本,不要用一些程序语言等用户不熟悉的语言。

将文本标签放置在输入框内

将文本标签放在输入框内对于用户名和密码输入来说是个很好的方式。 但是要注意将文本上提,当用户输入的时候。 这个问题我们在之后的谈到登陆注册页面的时候再来仔细讨论讨论。

将提示语言放在输入框内

通常来说输入数据的填写类型可能会是各种各样的,比如就一个电话的输入方式,有人可能会在前面加上一个加号或者括号表示区号之类的。 有人可能不加区号就直接输入了。因此可以考虑给到一个输入格式的例子,让用户统一。

但也有个问题,输入的时候,这个提示就不见了,可能大家就忘记怎么输入了。 还有这个输入的文字可能会让有些人觉得已经填写完毕了。

当然为了得到统一数据,得到合理的输入,给到选项, 比让用户自己输入要好。

提供选项要比让用户输入简单的多,所以可能的话,为用户提供若干默认选项而不是空白的输入框。这样也能够减少输入错误。

文本标签颜色

可以通过文本标签的颜色外带文本框的颜色表示这是正在聚焦的输入框。 也可以表示输入内容是否正确。

文本标签不要用大写字母

文本标签字体大小

理想的手机端label字体输入大小为16px,不要把字体弄得太小了。

输入框

45-57px的点击范围比较理想,但是这个尺寸在手机端可能看上去会比较大, 因此32pxand 40px大小不管是点击上还是看上去都比较合适。

有些时候输入文本有字数限制, 需要用比较明确

小结

就如同开头说到的,人们并不是那么喜欢输入,因此可以试着寻找其他替代控件,让用户更好的完成输入。 输入框是表单填写上非常重要的一个元素, 这个之后我们会在讲到表单的时候再集中讨论讨论~


参考文章

Text Fields in Mobile App

Designing Perfect Text Field: Clarity, Accessibility and User Effort

Text fields in mobile phone apps

碎碎念

这两天浪费了好些时间在微博上, 就像上次说的,慢慢的感觉出来微博存在的意义。即便这一片对我来说被废弃的荒地,似乎在是很多人的热闹。 时效性感觉是微博的一大优点。在用户体验上微博做得似乎层级有点厚,让人捉摸不透。

外加今天刚看完科科的直播,感觉怪怪的,这种被主办方控制着的直播有点没意思,之前尝试看直播的时候至少可以看到别人的留言,然后主播就可以和观众互动,而今天显示的全部都是送礼物,完全不知道互动的点在哪,不知道主播看到的是哪些留言,外带我试了试自己发一条留言,也完全看不见,不知道是速度太快被刷了还是留言就都是礼物,让人很摸不着头脑。 个人感觉直播之所以会火的原因可能是一种很强的互动性,看明星的直播可以有一种与其facetime的错觉。 很有趣。 但是一旦丧失了这种互动,只是单方面的回复的话感觉有点没劲。 花椒在这方面的运营感觉还是有点欠缺,不是说你搬一个大咖过来就能真正意义上的提高你的装机量,经过之前一次直播服务器瘫痪,到今天的直播缺少了最基本的互动性来看,感觉。。。。花椒你这种直播方式真是有点浪费时间。我基本上是要卸载的。

Anyway,我感觉快要从科科的坑里爬出来了。。但是这类型还是我的菜呀~啊哈哈加油。我还要做设计师呢~

Share Comment on Twitter