邮箱订阅

订阅即可免费获取优质的设计资讯!

邮箱订阅

感谢你的支持!

分享到微信朋友圈:

Close

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

热门文章

Mockplus是什么?

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

了解更多

移动端文本输入框的设计探索

江南掌勺 翻译 2015-10-25 21:11:40 阅读:23823 www.zcool.com.cn

移动端的用户体验设计面临诸多的挑战,其中最明显的一个挑战就是如何权衡有限的屏幕空间与相对不精确的手势操作。Medium 上的作者 Sophie Paxton 写的这篇文章,针对文本输入框的用户体验设计,进行了较为详尽的设计探索。

移动端的用户体验设计面临诸多的挑战,其中最明显的一个挑战就是如何权衡有限的屏幕空间与相对不精确的手势操作。Medium 上的作者 Sophie Paxton 写的这篇文章,针对文本输入框的用户体验设计,进行了较为详尽的设计探索。


Overview

第1种:


第1种

与传统的文本输入框相比,这种输入框的最大优势在于:屏幕空间没有被标签文字所浪费,因为移动端的屏幕空间是非常有限的。从用户体验角度来看,这种设计非常优秀。因为当用户输入文字的时候,标签仍然可见,并且和用户输入的内容靠在一起。这种做法能够最大程度上发挥标签的价值。

第2种:


第2种 慢动画

或许有人会觉得标签的动画有点过了,这可以通过缩短动画时间来进行优化。


第2种 快动画

改进后的第2种是我最喜欢的方式。我认为从用户角度来讲,它既发挥了标签动画的可用性,又没让用户因为动画而过于分心。

第3种:


第3种

第3种是最古老的节省屏幕空间的方法。它最大的缺点在于,在输入框上面要预留出一块空白。当页面中还有其他形式的表单控件时,(标签文字的不一致)会给人造成视觉上的不平衡。另外,这种方式也会拉长页面。

第4种:


第4种

与第3种传统方式相比,这种方法是否存在优势还很难说。我能找到的唯一优势,就是用户在输入文字之前似乎有更大的可点击区域。但是这个问题本就不存在,因为即使用户点击/轻触标签文字,光标也应该能够自动定位到相关的输入框中。

第5种:


第5种 标签并列

当两个甚至多个文本输入框并列时,应该考虑的因素有:用户输入的内容不会被标签割裂,标签和输入内容之间应该有明显的区分。


原型工具难上手、速度慢?试试Mockplus!

_____

Mockplus,更快更简单的原型设计工具。快速创建原型,一键拖拽创建交互,团队协作省事省力。微软、华为、东软、育碧、Oracle、西门子、IBM等全球知名企业和全球300多所高校都在用,你也可以免费开始你的设计!

免费下载
logo

咨询客服

帮助群:748169314 加入QQ群

服务邮箱:service@jongde.com

咨询客服

在线客服

置顶