APP表单设计-新闻详情

APP表单设计


发布时间:2017-10-31责任编辑:朱明 浏览:1877


一、清晰的视觉路线

一般我们在浏览信息的时候,同时页面上又没有足够多的强调性的元素,我们通常都会遵循从上到下,从左到右的的视觉浏览路线。Web页面一般都是“F”型的一个视觉路线,移动端是“L”型的视觉路线,因为尺寸的原因,一些功能性的按钮(导航)和重要性的操作都是在页面底部,如果我们的效果图符合这个路线,基本都会满足用户的心理,能很顺畅的使用我们的APP

2.png

如上图,这个视觉路线就是从上到下,符合我们日常的视觉路线,用户先关注的是用户名输入框然后接着是密码输入框,然后接着视线下移就到了登录的按钮的操作按钮。相反

3.png

1)左边的图从上到下一次是登录输入框到密码输入框,完成这两个操作之后应该是登录按钮才对,因为这个页面本来就是登录的界面,我们先要看到的用户首先第一个需要的是登录按钮而不是我输入了登录名和密码之后给我一个注册的按钮,有点违反了用户的意愿。

2)右边的图,用户首先要阅读要输入什么内容然后再到输入框然后再到密码然后到密码输入框,最后又要重新调整视线上移到右上角的操作按钮,一波三折。

 

 

二、利用选择代替手动输入

输入邮箱的时候,可以给出常用邮箱的建议,但是因为常用邮箱比较多,如果给的建议太多,需要滚动的话,干扰性大,还不如不给。所以可以合理定义触发 建议的时机,比如输入@后边的第一个字符后,基本上能锁定更少量的邮箱了,如“g”基本上就是gmail了等。这样可以大大减少用户的操作。使用起来更便捷。

4.png

 

三、标签及提示文字的排布方式

因为移动界面空间少,一些提示性的标签及提示文字排布也是个大问题。

5.png

1 优点:视线一直是纵向向下的,当输入的时候,不遮挡说明文字。

缺点:这种排布方式过于占用宝贵的垂直空间,键盘升起一遮挡,基本上什么都卡不见了。

6.png

2)优点:可以快速处理每一个表单项的输入,符合视觉纵线。

缺点:占用宝贵的垂直空间。

7.png

3)优点:即解决了视觉纵线的问题,又解决了节约屏幕纵向空间的问题,且元素较为稳定。

 

 

四、明文密码

一般注册的时候都会输入两遍密码,输入密码和确认密码,有时候这个特别容易输错,输不知道自己哪里输错了,就要重新进行这一遍操作,很麻烦,考验用户耐心。如果用户输入密码的时候我们有个明文密码的操作,这样就显得简单便捷起来。

8.png

 

敬业工作室   供稿