表单设计中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

相关 [设计 技巧] 推荐:

网页设计应急小技巧

- Guan - 所有文章 - UCD大社区
工作中,网页设计师经常会遇见这些状况:时间这么短又要出彩、又是要大气要有气氛、风格不明确很难把握、栏目这么多页面又这么长……. 突然觉得束手无策,脑袋里一片空白,没想法了,怎么办. 下面简浅的归纳了几个快速让页面出彩的小技巧:. 1.旋转法 – 将页面的主体或局部进行旋转. 我们一般的页面版式都是方方正正,四平八稳,有点呆板.

伟大网页设计之10个设计技巧和40个例子

- 山河之外 - 互联网的那点事...
作为一名网页设计师,如何在第一时间打动潜在的客户是至关重要的. 如果你设计的东西不能够打动他们,你就会失去一切,这个世界有的时候就是这么的现实. 那究竟要注意哪些细节才能够在一个正确的方向去打动客户,让浏览者源源不断呢. 我们知道有一个好的标志是企业形象的开始. 好的口号可以让你以更快的速度去曝光自己的站点.

网页设计中的不对称设计技巧【附12个精美示例】

- - 博客园_梦想天空
  不对称是对称的反面,但并不意味着不对称就缺少平衡与和谐. 不对称的设计技术可以在视觉上引人入胜,为内容创建出重要程度不同的差异性. 这篇文章分享一组鼓舞人心的例子,介绍了不对称设计在网页中的使用技巧. 10套精美的免费网站后台管理系统模板. 35个立体动感的视差滚动效果网站作品. 13套非常精美 Web 应用程序图标素材.

设计电子商务网站的10个技巧

- 雄杰 - 所有文章 - UCD大社区
        导读:随着先进科学技术的应用,人们无需外出逛几个小时来“猎”东西,直接坐在家里就可以购买所需商品,支付服务费用. 人们习惯了周到的服务和漂亮的橱窗,对网店的选择也不例外. 因此,电子商务网站的设计就是一切的关键了. 如果你想做一个网店,你最应该考虑如何设计你的电子商务网站从中获利. 你可以在市场上以合理的价格出售最好的商品,但在网络上,如果你的网站设计简陋,即使商品质量非常棒,你的销量也会大打折扣.

方寸之间——图标的设计方法及技巧

- 丽维 - 马健 Jerry Ma 专注于产品设计,让生活更简单
    不同的人对图标的定义是有不同的,司机眼中的图标可能是交通指示牌上的指示图形;机械操作员眼中的图标可能是操作面板中按钮上的图案;计算机开发人员眼中的图标可能是电脑中的桌面图标、文件图标. 而对于使用移动设备的我们来看,图标就是手机中的应用程序.     图标是标志、符号、艺术、照片的结合体,是图形信息的结晶.

我的防身暗器-网页设计应急小技巧

- MooM - 网易用户体验设计中心博客
工作中,网页设计师经常会遇见这些状况:时间这么短又要出彩、又是要大气要有气氛、风格不明确很难把握、栏目这么多页面又这么长……. 突然觉得束手无策,脑袋里一片空白,没想法了,怎么办. 下面简浅的归纳了几个快速让页面出彩的小技巧:. 1.旋转法 – 将页面的主体或局部进行旋转. 我们一般的页面版式都是方方正正,四平八稳,有点呆板.

响应式设计的5个CSS实用技巧

- - Web App Trend
正如我在教程 响应式Web设计三步走当中所讲的,响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了. 现在我分享在编码时常用的五个CSS技巧并举例说明. 这些技巧都是使用简单的CSS属性,如min-width、max-width、overflow 和相对属性值,但是这些属性在响应式设计中发挥着很大的作用.

名片设计最佳实践和技巧分享

- - 译言-精品外文翻译 - 最新译作
日期:2012-9-22  来源: GBin1.com. 名片设计在现代设计中占有非常重要的地位,最大的问题在于使得名片设计与众不同. 不一样的名片设计往往能够让你的客户或者朋友更加容易的认出你的公司和品牌. 在以往的文章中,我们也曾经分享了很多名片设计实例,在今天的文章中,我们将按照不同的设计类别来介绍更多优秀的名片设计技巧和实践,帮助大家了解如何能够设计出不同一般的名片.

经典推荐:网页设计构图技巧

- - 优设(UISDC)
一篇开拓网页设计思路的文章,虽然有些年代了,但是其中分享的构图技巧到现在依然是非常受用的,如果你能领悟个中精髓,融会贯通. 那么今后你设计出来的网站,一定会从格局形势上让客户眼前一亮. 网页给人最直观的感受就是它的页面框架与构造,就像一座大楼的主体框架与形态,你可能记不起东方明珠塔和艾菲尔铁塔是用什么颜色或什么材料涂的外墙,但我想你一定记得起它们是什么样的形状.