表单设计进阶——7招提升表单体验(2)

来源:网络   作者:热心网友   发布时间:2018-08-02    浏览次数:69


6. 选择合适的按钮位置


表单里可能有很多种类的按钮,我们在这里只说最重要的”下一步“、”完成/提交/保存“等提交表单类型的按钮。


最常用的位置是右上角和下方。在右上角通常是文字按钮,而在下方一般有:固定在屏幕底部、跟随键盘移动、随表单移动。


1. 右上角文字按钮,最常见的一种按钮形式

美团外卖/微信/Facebook

优势:①不影响用户对表单内容的注意力;②用户在完成表单时,视线会从下向上转移,有助于用户作进一步检查;

适用于:表单内容复杂且重要,需要用户专注于表单本身,认证填写。


2. 固定在屏幕底部

闲鱼

优势:①用户在任何时间都可以点击;②强烈吸引用户的注意力,引导用户点击

适用于:表单内容重要性不高,不需要全部完成,也不需要过于仔细,需要促进用户快速完成提交。但可能会被键盘阻挡。


3. 随键盘移动

Twitter

优势:①距离键盘位置最近,方便输入完立即提交;②不会被键盘阻挡

适用于:表单内容简单不易出错,且内容以输入为主,输入后需要快速提交。



4. 随表单移动

Twitter/美团外卖

优势:①符合用户从上至下的阅读方向;②可以促进用户完成整个表单

适用于:表单内容少于一页,按钮最靠近表单;或表单内容很长,需要引导用户全部填写。


四种常见方式各有优势,需要根据实际情况选择最适合的方式。



7. 给表单的设计加入微交互


其实市面上已经有许多新的表单设计形式慢慢普及开来了,但是要在使用之前思考你正在为谁而设计,它们是否适合你的项目,你的表单是否确实需要使用微交互。

Health App Login

byJakub AntalíkinHealth apponMar 10, 2016


下面这个链接中就可以看到不少有趣的关于输入框的动效形式。

https://tympanus.net/Development/TextInputEffects/

这些例子中的微交互非常有趣,它们可以提起用户的兴趣,提升用户注册的转化率。


总结

一个表单是否“好用”,视觉体验只占了整体体验一部分,初级设计师能很轻易的复制一个高级设计师设计出的表单的样式,但是其中的思考却无法直接拿来。作为UI设计师,我们需要谨记的是,通过优化视觉表现提升表单体验只是表象,更多是要考虑到表单最终要帮用户解决什么问题,表单对于你的产品或项目起到了什么作用。换言之,先想好为什么,再想怎么做。




12共2页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.shejixf.com/shejijiaocheng/shejililun/7446.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通