提升表单体验的7招表单设计设计师方法教程
-

怎样在网页中应用手绘风格,以改善网站的用户体验
手绘风格非常有利于展示人性色彩,形成独特的识别度,为用户带来真实感。当你收到好友寄来的明信片时,你总是希望看到卡片是手写的,带着好友独特的笔迹,而不是用电脑打印出来的。一
-

解析网站404网页设计那些不得不说的事
前阵子做我们一淘优惠商家统一的报错页面, 整理了一些有意思的404页面(后简称404),加之最近网友热议的QQ空间公益404页面,在这里一起拿出来跟大家分享一下。
-

z-index属性的使用方法和层级树CSS教程
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺
6. 选择合适的按钮位置
表单里可能有很多种类的按钮,我们在这里只说最重要的「下一步」、「完成/提交/保存」等提交表单类型的按钮。
最常用的位置是右上角和下方。在右上角通常是文字按钮,而在下方一般有:固定在屏幕底部、跟随键盘移动、随表单移动。
关于保存功能,阿里设计师总结了一份超全的干货:《关于保存功能的设计,这篇可能是最全面的总结!》
右上角文字按钮
右上角文字按钮,最常见的一种按钮形式。

△ 美团外卖/微信/Facebook
优势:不影响用户对表单内容的注意力;用户在完成表单时,视线会从下向上转移,有助于用户作进一步检查。
适用于:
表单项目少,在一屏内完全展示;
内容复杂且重要,需要用户专注于表单本身,认证填写。
固定在屏幕底部

△ 闲鱼
优势:
用户在任何时间都可以点击;
强烈吸引用户的注意力,引导用户点击。
适用于:
表单内容重要性不高,不需要全部完成,也不需要过于仔细,需要促进用户快速完成提交。
缺点:可能会被键盘阻挡。
随键盘移动

优势:
距离键盘位置最近,方便输入完立即提交;
不会被键盘阻挡。
适用于:
表单内容以输入为主,简单不易出错,输入后需要快速提交。
置于表单底部

△ Twitter/美团外卖
优势:
符合用户从上至下的阅读方向;
可以促进用户完成整个表单。
适用于:
表单内容少于一页,按钮最靠近表单;
表单内容很长,需要引导用户全部填写。
四种常见方式各有优势,需要根据实际情况选择最适合的方式。
7. 给表单的设计加入微交互
其实市面上已经有许多新的表单设计形式慢慢普及开来了,但是要在使用之前思考你正在为谁而设计,它们是否适合你的项目,你的表单是否确实需要使用微交互。

△ Health App Login by Jakub Antalík in Health app on Mar 10, 2016
这些例子中的微交互非常有趣,它们可以提起用户的兴趣,提升用户注册的转化率。
总结
一个表单是否「好用」,视觉体验只占了整体体验一部分,初级设计师能很轻易的复制一个高级设计师设计出的表单的样式,但是其中的思考却无法直接拿来。作为UI设计师,我们需要谨记的是,通过优化视觉表现提升表单体验只是表象,更多是要考虑到表单最终要帮用户解决什么问题,表单对于你的产品或项目起到了什么作用。换言之,先想好为什么,再想怎么做。
以上是我个人的一些看法和总结,如有不对的地方欢迎指正和讨论。
欢迎关注作者的微信公众号:「海盐社」


























