文章关键字 ‘表单设计’

命令按钮与文字链接的区别

2009年08月19日,星期三

命令按钮:

多用来提交当前内容的信息,且点击该按钮后做页面的不可撤销动作,到达的也没无法使用浏览器上的后退按钮回到之前页面。其在设计上人让人感觉是可点的;

广义上的命令按钮除了浏览器默认的按钮之外,还包括许多网站自己设计的按钮:

buttons
文字链接:

用于页面导航之用,用户点击文字链接后亦可通过浏览器上面的后退按钮返回到之前的页面;

两者之间的区别:

  1. 单独的文本链接,借用某些特定的空间位置,再加上某些设计方式。仍旧可以很好的突出出来;
  2. 在文本中的超链接是用户通过以往经验的积累知道是可以点击的,并且有些样式只有鼠标划过才知道是可以点击的,所以视觉上是最弱的。

以下是使用文本链接的几种特殊情况:

  1. 如在文字段落里有链接,则使用文字链接;
  2. 当文字过长的时候,则使用文字连接而不是命令按钮;
VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

表单设计之–文本框常见问题(3)

2009年08月3日,星期一

12、为什么要使用验证码?

使用验证码可以阻止那些对网站不友好的访问,如机器注册&登录或机器破解密码等不友好登录。

13、什么情况下需使用验证码?

用户登录(在用户未登录前是无法验证信息的),在首次可以考虑无验证码登录,在登录失败n次后(一般为不超过3次)再给与带有验证码的登录。

如下图:
支付宝登录:首次登录无验证码,尝试登录n次失败后让用户输入验证码。
淘宝登录:使用安全登录时无验证码(需安装控件)。只在普通状态登录时,登录失败超过3次后需输入验证码。

验证码

但如果是注册,由于没有别的的验证信息,就要一直放出验证码了。这里值得注意的是,如果用户填写信息错误,但验证码的数值不应变。

ebay的注册页面,当用户提已经填写了验证码,但提交时出错。应保持原有的验证码与已填入的内容不变。

ebay用户注册页

14、相似内容用相似布局:

由于相同的样式与排版会使用户产生联想:相同的布局样式填写的内容类型都一致。

并且,使用统一的排版格式,便于对比相同区域的内容;

不要在输入超出文本框后自作聪明的跳出来,自动的增加区域显示填写的所有内容是个好主意。

用户在输入内容后可能会检查所填写的内容正确与否以及修改。因此,要给予足够的空间让输入信息完全的展示出来,便于用户阅读与修改。

15、文本框要避免出现下面的情况发生:

  1. 输入的内容超过文本框的长度;
  2. 使用密码框来显示输入的密码;
  3. 给予用户足够的空间以确保正常的阅读;
VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

如何设计表单–文本框常见的问题(1)

2009年06月23日,星期二

1、什么是文本框(Text Box)?

  • TextBox组件(文本框组件)是一种常用的,也是比较容易掌握的组件。应用程序主要使用它来接收使用者于输入文字信息。(来自百度知道)
  • 文本框可以用来显示信息,显示用户输入的内容或编辑已有的内容。

优点:对输入的内容几乎无任何限制;
缺点:由于文本框过度发达的自由无限制,导致它不能严格限制用户输入内容的类型(如:字符型,数字型等),以及限制内容的长短;

文本框分为四种基本类型:

  1. 单行文本框(不可输入回车符):
  2. 密码框(输入的内容显示不可显示):
  3. 多行文本框(有限的空间可展示更多的内容,并可以输入回车符):
  4. 用于上传文件的文本框

2、如何限制文本框输入的内容?

文本框输入内容限制很宽松,基本任何字符都能输入。可通过以下的一些方法进行限制:

  1. 改变文本域的默认宽度,暗示用户输入的内容有长度限制;
  2. 通过表单的上下文语境做限制;
  3. 文本框的注释;
  4. 特殊排版,暗示输入限制;
  5. 使用js等技术手段强迫性限制输入的格式;

等…

整理后的一些范例:

how-to-use-checkbox

3、什么时候适宜使用文本框的提示功能?

在使用谷歌或百度搜索的时候,会出现下拉的提示。那么什么时候使用这种功能呢?

  1. 提示主要用来做信息的提示,或是重复输入相同的内容时;
    如下面的Amazon.com页面中,当用户输入cell时,由于与cell相关的产品过多,所以需要列出相关的详细描述词汇来帮助用户进行更好的筛选。

    amazon

  2. 如果是涉及用户隐私、安全方面的输入,如:信用卡密码、个人身份证等信息,不应该使用;
    我抓取的是招商银行的个人银行界面,由于输入的信息属于涉及用户安全信息。就不应有相关的提示信息了。

    cmb

4、文本框的宽度应该如何确定?

首先,要尽量缩短文本框的宽度。如果是已知宽度的内容,使用标准宽度。如:输入中文姓名的文本框3位即可。而比较宽松的输入内容,采用常见的宽度。如:电话号码的位数。

但如果有许多类似的文本框排版在一起,为了排版上面的美观,为保持排版的整洁应做适当的调整。

如图中的ebay用户注册界面,
用户所要输入的用户名、住址等内容不能确定其宽度,同时为了保持排版上的美观。采用了统一的宽度。
相反,ZIP/Postal code、phone number等处因可以知道其输入的具体数值长度,所以使用了常见的长度。(红色边框处)

ebay

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)

设计表单六种基本类型

2009年06月18日,星期四

一、表单概述

表单,在网页中的作用不可小视,主要负责数据采集的功能,比如你可以采集访问者的名字和e-mail地址、调查表、留言簿等等。

1、表单的组成

一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。

一、概述

表单,在网页中的作用不可小视,主要负责数据采集的功能,比如你可以采集访问者的名字和e-mail地址、调查表、留言簿等等。

1、表单的组成

一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。(来自百度百科)

常用的web表单控件。总共有6类基本类型(不包括隐藏域等在页面中无法看到的),如下图所示:

formtypes

正所谓,人无完人。自然,每个表单控件也都有各自的优缺点:

1、文本框(Textfield)

优点:对输入的内容几乎无任何限制;
缺点:由于文本框过度发达的自由无限制,导致它不能严格限制用户输入内容的类型(如:字符型,数字型等),以及限制内容的长短;

2、命令按钮(Button)

优点:受益于按钮设计视觉上凸出的感觉,不光如此许多有凸出感的图片也会导致大量的用户点击(这是题外话了);
缺点:受制于按钮区域的限制,不能做得太长,谁见放两三行文字的按钮呢?因此,按钮内的文案需要简洁明了,不能像我的文章这样萝莉八所的;

3、多选框(Checkbox)

优点:类似于读书考试时候做的多选题,可选择多个选项。还记得那个万恶的说明:选对一个给半分,选错一个不给分 ;
缺点:如果多选框过多,占用大量的空间。在空间紧张的时候要作合理的安排,在现在住房日益紧张的今天好比,三间房可凑合3对夫妇,但一间房住3对夫妇就比较困难了 ;

4、单选框(Radio Button)

优点:这也是从考试时的单选题来的,比多选框好些,每组最多只选择一个选项 ;
缺点:和多选框一样,如果选项过多,会占用大量的空间;

5、下拉列表(List/Menu)

如果说多选框与单选框是浪费空间的大户,下拉列表则恰巧与前两者相反。它节省空间又可有数量庞大的下拉选项,真是小而强。

优点:在空间有限的情况下,使用此小而强的控件,可以展示更多选项内容。比较常见的就是国家的下拉列表;
缺点:由于小而强过于节省空间,导致当下拉列表选项过多时。会让选择的人找不到要选择的选项;

6、文本域(File Field)

上传文件之用,左边的那个灰色输入框有时候会让人很迷惑:先输入文字再点浏览文件?

VN:F [1.9.17_1161]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.17_1161]
Rating: 0 (from 0 votes)