浅析表单设计的点点滴滴(一)

标签: 交互设计 视觉设计 | 发表时间:2011-12-29 10:48 | 作者:sunyingpei
出处:http://mux.baidu.com

top
表单,主要是负责数据采集的功能,需要访问者自己去填写,如访问者的姓名、邮箱、性别、地址、留言建议、设置密码、管理个人账户等等。时下表单无处不在,成功的表单设计不仅能提高用户的满意度,更能收集更加精确的数据,相反失败的表单设计只会收集到错误杂乱的信息,可能会最终导致潜在用户的流失。

一、 组织表单的内容,给用户一个友好的引导
首先要明确的告之用户填的是一个什么性质的表单以及填完后能做些什么?哪些问题是一定要问的?有没有别的途径可以获取用户的资料?大致表单的布局分为三种类型:纵向排列、逐步填写(多页显示)和左右布局。这三种表单的组织形式功能特点,通过不同的使用环境决定它们具体的样式。下面通过一些对应的实例我们来做些具体的分析:

图1
图1

根据Web惯例调查,卸载软件的界面常见组织结构,为纵向排列样式。一般顶部为明确填写表单的目的,再呈现表单的具体问题。在卸载类型的表单中,内容一定要精简,减少用户输入,尽量提供选择题,少问答题,没有必填项。要知道用户是不喜欢填写表单的,尤其是当用户卸载软件后也是没有太多的耐心来填写表单的。如图1的卸载表单纵向内容组织形式,顶部是致辞,明确的说出问这些问题的目的,下面是分组表单内容。这种纵向排版简洁填写的表单组织形式,更利于获取用户的反馈。

图2

图2

图3

图3

图4
图4
图5
图5

在一定情况下,很多问题需要按顺序回答,理解并组织好每个表单的情境能得到最佳答案,如果把表单用对话的形式展现,主题之间自然会出现间断,所以就会需要多个网页把对话变成若干有意义并容易理解的主题。如图2 ——图5 的填写表单多页的展现形式。把表单当成是与特定的人在对话,而不是与一堆数据输入框在对话,每个表单都用不同的情境问题与用户进行交流,这样的实际回答率会更高。

图6
图6

当表单想要搜集更多答案时,可以考虑在表单填完之后提出一些可选的问题,辅助获得更多的答案。表单的标签使用术语需要统一,简洁、单个词,这样的标签要更容易解释清楚。如图6的表单设计,使用左右布局的排版方式,左侧放上必填和重要的表单项,右侧辅助放上可供选择的表单,减少页面表单内容视觉的庞大性,整体界面内容居中排列这种方式也比较美观易读。

二、 填写表单的反馈,给用户贴心的引导

为了提高表单的完成率和准确率,设计师会试图避免各种各样的分散因素,并且提供一个清晰明确、简单的web表单。这就是为什么任何视觉效果都需要非常适当地使用的原因。运用视觉手段去解决会出现这样的错误,减少用户的误解。当遇到用户提交数据有错误信息时肿么办?首先要让用户知道发生了错误,错在哪,以及如何纠正。

图7
图7
图8
图8

图7邮箱注册表单页,当用户提交错误信息或发生错误操作时,在其错误旁都会有醒目的红色视觉元素作为指导,很好的解决用户找不到错误在哪的窘态(关于提示错误的元素符号,在处理这块时可能还要考虑到色盲色弱用户群的一个需求,他们是看不出这种强烈的颜色提示的,但是有感叹号这样的提醒元素存在我想也能解决这种双向需求) 。当出现注册用户名相同时,这里用下拉框的样式提示,该地址都是以什么样的结构形式被人注册过,给用户提供想命名同样前置的用户名时后缀如何添加的一些建议性帮助,以及图8填写正确后给予的文字图标反馈。

图9
图9
图10
图10

图9和10的注册表单的两个错误提示样式,当输入成功提示会消失,输入错误或者输入不符合标准都会有相应的不同文字反馈,告知用户发生错误的原因,及时回车修改,避免用户在填完所有的信息后再反馈给用户。

三、 创意表单的样式,给用户轻松愉悦的感受

输入框和标签的样式是需要根据整体界面风格去定义的,通过不同创意类型的展示,可以为你获得更多的浏览者。所以设计出一个好的创意来优化表单是一件多么重要的事。

图11
图11

图11 blackwave运用笔记本记录重要事记的功能,穿插到表单中。使用了手写的方式和便签条的元素,引人注意,这些好玩的设计使它的功能完美的传达给了用户。

图12

图12

图13
图13

图12和图13的表单设计,为了使访问者不会感觉布局的乏味,用了复古怀旧这样的意境元素,和纸张叠合的方式来展现表单。

图14
图14

图14 wing cheng的表单样式比较符合这个概念性的网站,有很简单且基本的表单布局,独特的视觉角度,只为让表单填写起来更有趣。

图15
图15

图15 Orca Bay Sea Foods的表单采用与网站布局完全融为一体的设计方式。

图16
图16
图17
图17

表单的创意表现形式来源于整体网站的风格特色,和整体网站主视角相呼应,浏览起来也不会觉得突兀,整体联系性强。如图16 ArtFlavours首页的主视觉风格和图17ArtFlavours的表单样式,采用相同的处理手法,都运用布块纹理拼凑的方式,让用户对表单感觉更加的舒适,也能给访问者留下深刻的印象,与网站整体风格也很统一。

以上对表单做了些简短的归纳,从表单的布局、填写的交互反馈和创意表单的独特性三个方面做了些概述,希望本文能对大家做表单设计有所帮助。


转载请注明出自”百度MUX”

相关 [设计 滴滴] 推荐:

滴滴顺风车设计总结

- - 人人都是产品经理
产品GM反复和我们强调业务使命,私家车出行在滴滴体系中的角色,私家车市场规模,业务模式概述,业务模式关键词,目标体系.. 使得我们很快明确了顺风车的产品定义,目标用户,主要功能,产品场景,产品特色和竞品的差异化以及未来顺风车的产品走向. 未来它将是一个每天改变千万人次出行的产品,它能让共享私家车成为一种连接人与人的生活方式..

浅析表单设计的点点滴滴(一)

- - 百度MUX
表单,主要是负责数据采集的功能,需要访问者自己去填写,如访问者的姓名、邮箱、性别、地址、留言建议、设置密码、管理个人账户等等. 时下表单无处不在,成功的表单设计不仅能提高用户的满意度,更能收集更加精确的数据,相反失败的表单设计只会收集到错误杂乱的信息,可能会最终导致潜在用户的流失. 一、 组织表单的内容,给用户一个友好的引导.

滴滴打车的架构变迁

- - 行业应用 - ITeye博客
2012年成立的滴滴打车,仅用了三年时间就书写了:覆盖300个城市,用户数从2200万增到1.5亿,月活跃用户增长了600多倍(2014年平安夜当天,全国用滴滴打车出行人数超过了3000万人),打车成功率高于90%……这些永远会被铭记在移动互联网历史中的神奇记录. 而不为人知的是,支撑滴滴打车如此庞大用户数量的架构,以及那些曾无数次不眠不休应对挑战的技术伙伴们.

Apache与Nginx的点点滴滴

- - 开源软件 - ITeye博客
1、Apache默认是采用HTTP1.0的,开启HTTP1.1的方式如下:. 2、采用反向代理的参数:ProxyRequests off;. 3、通过Apache代理目标系统,可以修改目标系统response中Set-Cookie中的参数,.   如:domain、path等的修改,格式如下:.    例如:ProxyPassReverseCookieDomain .cnd.com .10.3.20.205.

自信源于生活的点点滴滴

- 大胡 - 左岸读书_blog
6.1是孩子的节日,我们可以向孩子们学习单纯、好奇、勇敢、跌倒了再爬起来,哭完便笑,懂得放下最爱的玩具,并且不断地成长. 虽然“初生牛犊不畏虎”,孩子却很容易在我们这个复杂的世界中一点点地失去“自信”,尤其是父母的言行举止. 当他在电话里满怀期望地提出:“妈妈,牛奶. ”你在外面一时不能满足他,告诉他具体时间:“回到家,妈妈给你拿,好吗?”经常忽视孩子的需要,会让他因不被重视而失去信心.

教育部介入戀愛 嬌滴滴申請國賠

- ĐƋɳƞѵїχ - 國寶級白目馮光遠在此
民進黨立委賴坤成質詢內政部長,女性消防員愈來愈多,女生向來「嬌滴滴」,如何救火. 這種歧視的言論,只好再勞民進黨女性消防員們出來滅火了. 教育部預定明年出版《二五必讀》手冊,教年輕人如何談戀愛、經營家庭及婚後將面臨的課題. 公部門介入戀愛,以後失戀者將有機會申請國賠. 不過如果提升到副總統候選人的規格來談這件事,建議還是學吳敦義,畫出拆房子的大餅,然後再說那是一個夢.

如何看待滴滴收购 Uber 中国?

- - 知乎每日精选
看着那么多人不爽,那我就多说几条吧:. 1、一个半月以前,我曾经做了如上图的预测. 基于过往滴滴和快的之间的竞争、融资节奏和合并时间点;基于当年雅虎和阿里巴巴的交易模式;也基于出行市场的非零和博弈模式,做出这个预测本身并不难. 相信很多人都能想得到,只不过我碰巧给说出来了. 好几个媒体让我分析我为什么做出如此预测的,其实就是这么简单的逻辑,最后拍下脑袋,发条朋友圈啊…….

我对滴滴和UBER中国合并的垄断判断

- - 付亮的竞争情报应用
1、滴滴和UBER中国合并需经过商务部的反垄断调查,这个程序不能省. 2、滴滴、UBER中国合并是两个实体之间的市场行为,是保护股东利益的最佳选择. 3、 商务部无理由阻止滴滴、UBER中国的合并,网约出租车和传统的巡游出租车本身就有很强的替代关系,因此很难简单判定这一合并具有垄断性. 其实,传统的巡游出租车运营包含多种复杂的垄断在内.

指数级增长背后,滴滴出行业务系统的架构升级

- - 运维派
成立四年,估值已超260亿美元,公司指数级发展、业务爆炸式增长,在此背景下,滴滴出行业务系统的架构升级是怎样进行的. 本文根据滴滴出行平台产品中心技术总监——杜欢在2016ArchSummit全球架构师(深圳)峰会上的演讲整理而成. 杜欢,滴滴平台产品中心技术总监. 2015年加入滴滴,负责公司公共业务、客户端/前端架构和新业务孵化,致力于用技术手段解决业务痛点和提升研发效率,曾作为技术负责人主导公司技术架构升级以支撑公司业务快速迭代的需求.

Docker实践,来自沪江、滴滴、蘑菇街架构师的交流分享

- - 企业架构 - ITeye博客
架构师小组交流会:每期选一个时下最热门的技术话题进行实践经验分享. Docker 作为当前最具颠覆性的开源技术之一,其轻量虚拟化、可移植性是CI/CD,DevOps,微服务的重要实现技术. 但目前技术还不够成熟,在生产实践中会遇到不少坑. 本期参与小组交流的是国内较早采用 Docker 实践的公司.