表单设计中8个不能不忽略的技巧

标签: 交互设计 表单设计 | 发表时间:2014-07-28 07:51 | 作者:dream
出处:http://www.boxui.com

表单设计的就应该就像个温柔有礼貌的服务生

表单应该就像个温柔又有礼貌的服务生。想象你走进一间超级市场,走过两旁堆满商品的走道之后,左转右转,看到你想买的果酱并且挑选了两罐放在购物袋中。

终于你走向结账柜台,一个笑容甜美的收银人员对你温柔的问好,并接过你手中的果酱,告诉你价钱,帮你包装,然后找给你零钱和发票并且愉快的说再见。

现在你来到一个购物网站,在首页看到许多特价商品,你点选了食品的分类选项,来到果酱的分类。稍微看了一下果酱的介绍文章,然后点击鼠标把果酱放到购物车中,并点选结账:结果出现的是一个冷淡又死气沉沉的表单(Form)。

表单绝对是网站中用户和系统互动的最主要的元素,网站透过表单向用户提出问题,用户则透过表单向网站表达他的想法。标单又可以细分成三种元素:1、说明目的的标签;2、提供响应的输入方块或选单;3、以及提交表单的按钮。表单的设计就可以想象成一个称职的服务生,他的服务应该要符合下面几个项目:

1.  标签要清楚

标签就像是服务生的问候语和问题,应该要有礼貌、清楚、简单而且容易理解。

清楚的標籤標示

2.  仔细决定表单项目

绝对不要问一些不该问、或是不需要问得问题。例如:在不需要手机号码的情况下,要求用户输入手机号码。这种冒犯隐私的行为,是很容易招致网络用户厌恶的。

表单设计的就应该就像个温柔有礼貌的服务生

3.  标示清楚

卷标应该将「一定要输入」的项目标示清楚。如果一个表单有十个需要输入的项目,其中有三个一定要输入,那么就应该将「*」或其他符号标记在一定要输入的卷标的旁边(标记在输入框旁边不容易阅读),反之亦然。

4.  清楚提示的输入框

提供使用者输入的输入框的大小应该要经过设计来符合所需要输入的数据,输入地址的方框应该要比输入名字的方框要长一些。输入电话号码的方框应该适当的分成区码和号码两隔,让用户透过输入框的大小就可以了解所需要输入的格式。

清楚提示的輸入框

5.  常用的默认值

表单在一些常用的项目上,应该要填好许多用户常用的默认值,让用户不用一隔一隔慢慢的填写。如果你的表单是用户每天都要使用的,那默认值则可以大幅增加使用效率。

6.  提供良好的限制

如果有一个输入数值的方格,而输入的数值有大小限制,则可以考虑改用滑杆或旋扭取代。如果一定要采用输入框,则至少把数值的限制标示清楚,避免在使用者输入错误之后才跳出错误的对话框。

7.  不要预设寄送广告信

许多表单的最后都有一个选项:「我要收取 xxxx 网站的广告信件。」相信我,九成的使用者都不喜欢你默认这个选项给他们。当个有礼貌的服务生,不要强迫推销,让使用者决定自己喜欢的东西吧!

8.  千万不要随便清除输入的数据

这是表单最容易让用户生气的一个问题了!许多网站的表单写完并按下提交之后,画面上跳出了输入错误,然后就还我们一个空白全新的表单。这简直就像是 Alan Cooper 说的:「 就好像我写错一个字,然后服务生就把整张纸揉成一团丢在我脸上一样。

表单设计的就应该就像个温柔有礼貌的服务生

 

原文地址: http://dclick.fourdesire.com
作者: Taco Chen

相关 [设计] 推荐:

为了设计而设计

- - 幻风阁|kent.zhu'sBlog
我有个习惯,每天晚上睡前会搜罗一遍最新的App用用. 最开始的时候ios的App还相对比较朴实,强调功能的实用性,后来不知何故吹起一阵ios的App必须足够精美的怪风. 于是乎,各类App纷纷上演换装游戏,一个比一个做的精美,即使是一个很工具性的应用也把自己浓妆艳抹的往坐台小姐的风格搞……. 上周末跟Tony和Angela在下厨房喝茶闲聊,我说目前的移动产品设计可以分为2类,一类是做给用户用的,一类是做给设计师们欣赏与收藏的.

杯盖设计

- Yu - 创意设计-有趣、时尚、另类的创意
微向上的设计,在倒水完毕的时候可以让水滴顺着杯盖回流到杯子中,而不会随意的滴下来. 虽然是细小的设计,但是考虑的却是生活的便利.

再设计Redesign

- Mark - 腾讯CDC
  一个网站的核心是它的功能和内容,而设计则决定了这些功能、内容如何被组织和展现出来.   对已成功的网站进行再设计——重新构造它的组织和展现形式是具有挑战性的. 偏偏有设计师喜欢迎难而上,尝试对facebook、google这些著名网站进行概念设计. 他们通常有两条思路,一是对现有问题挖掘然后改进,二是提出完全创新的想法.

简约设计

- - 淘宝网通用产品团队博客
写下这个标题,那么首先得要明确什么叫简约. 简约就是让用户操作简单,让用户更快的达到自己的目的. 一个产品在于解决一个需求,如何让用户最好的完成需求就成为一个产品经理首先得要解决的问题. 那么在日常工作中,我们又有什么可以做的呢. 在《简约至上》里面有四种策略,但是有的东西太高级了,在平时的工作未必能够用得上,所以我自己来提炼一下,看看日常工作中能够遇到并且可以解决问题的方法.

HBase表设计

- - 互联网 - ITeye博客
默认情况下,在创建HBase表的时候会自动创建一个region分区,当导入数据的时候,所有的HBase客户端都向这一个region写数据, 直到这 个region足够大了才进行切分. 一种可以加快批量写入速度的方法是通过预先创建一些空的regions,这样当数据写入HBase时,会按 照 region分区情况,在集群内做数据的负载均衡.

ODS设计

- - 开源软件 - ITeye博客
在一般的数据仓库应用系统中,根据系统体系结构的不同,数据仓库设计的内容和范围不尽相同,并且设计方法也不尽相同,下面的两幅图示分别表示带有ODS的 数据仓库应用系统体系结构和不带ODS的数据仓库应用系统体系结构. 本文将说明两个体系结构上的差异以及这种差异造成的设计方法的不同,并且重点介绍带有 ODS的体系结构中数据仓库的设计方法.

移动产品设计之设计

- crystal - 互联网的那点事
移动产品设计最大的差异点在于用户使用场景的变化,场景的变化引发了交互方式巨大的变化,从而也使得信息呈现方式有所不同,再加上硬件设备的差异,最终使得2者千差万别了. 所以,移动产品设计之设计应该首先从用户的使用场景出发,同时考虑用户的硬件设备差异,综合以上2点去帮助用户完成某个任务. 按照我的理解,场景、任务、用户可以称之为设计的三要素,每一个设计实际上都是试图去帮助用户在某个场景下完成某个任务的.

界面设计中的结构设计

- - 博客 - 伯乐在线
构建界面视觉层级的元素有颜色的显著程度,图片、文字的尺寸大小,还有最基础的,内容的组织结构. 结构设计是指对界面内容进行分组,对界面中的信息、数据进行设计使之结构化呈现的过程. 好的结构设计能使界面信息传达更加清晰、快捷. 这是最常见的分组方式,在UI设计中历史悠久. 不管是线、框,还是背景色,都是可见的边界,本来引入这些可见边界的目的就是为了使信息的呈现更加清晰,但是这些视觉元素的加入也在一定程度上增加了界面的凌乱感.