注册页面是大多数网站必备的页面，所以很有必要对自己的注册页面做些精心的设计。下面三张图，第一张是注册的展示页面，第二张思维导图就一个简单的逻辑，第三张是通过firebug查看调用的JS文件。
一、给每个输入框写下说明
在用户看到这个输入框的时候，就能非常清晰的明白这个输入框是做啥用的，最大限度的降低他们产生疑惑的可能性。我们需要假设用户毫不了解注册需要输入的内容，随后给他们足够的信息以便帮助他们理解。
二、小图标icon
Icon是增强内容的工具，而且能给访客一个很好的暗示。以前使用小图标都是用图片，用图片的话，很多时候那些对齐、宽度高度搞起来特麻烦，这次我将图标做成字体，操作字体可比操作图片容易很多。可以到国外的一个网站icomoon制作图标字体，不过这个网站打开起来比较慢，需要耐心等待。利用在线资源，接受新思想与新技术，让工作变得越来越简单。
<font></font>注册新用户 @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot?-fl11l'); src:url('fonts/icomoon.eot?#iefix-fl11l') format('embedded-opentype'), url('fonts/icomoon.woff?-fl11l') format('woff'), url('fonts/icomoon.ttf?-fl11l') format('truetype'), url('fonts/icomoon.svg?-fl11l#icomoon') format('svg'); font-weight: normal; font-style: normal; } .ficomoon{font-family:'icomoon';} .icon-print:before {content: "\e601"}
三、输入框还可输入的字符数
过去我会给输入框设置一个最大字数的属性限制，这是一种比较粗暴的方式，因为在输入到一定字符后，突然不能输入了，感觉就像是键盘一下子失灵了，没有任何征兆。
现在通过这个设置，首先能让用户知道这里有字数限制，其次能够让用户清楚的知道何时会达到这个限制，很好的提升了友好度。这里面还做了另外一个小操作，就是在输入到一些字符后，将出现变红色，警示用户马上要超过额定字数了。
这是一种poka-yoke的概念，意思就是防止错误，有两种含义：侦测机制与预防机制。
加入简单的字符计数器便能把一个潜在的错误转变成另一个“原来使用这个产品只需常识”的瞬间。
function _textLimit(options, value) { var length = value.length; var color = options.normal; var remind = options.len - length; if(remind > 0 && remind <= options.limit) { color = options.warnning; } if(remind < 0) { var txt = $('#' + options.inputId); txt.val(value.substr(0, options.len)); remind = 0; } $('#' + options.digitalId).html(remind).css({"color": color, "font-size": options.fontSize}); }
四、输入正确与错误都给予反馈
除了检测到错误时立即显示友好的提示信息之外，告诉用户“一切都没有问题”同样也很重要。
设想一下，当你急切的在向某人询问一些信息的时候，肯定是希望能马上得到响应的回答。
当用户输入正确的时候，就应该表示表示，给他们一个绿色的勾，鼓励一下；当输入错误的时候，给他们一个红色的差，告诉他们错误的理由，让他们做相应的修改。这里的勾和差我都是使用的图标字体，对齐的时候特别方便。
.ico_correct{color:#01b60e;margin-left:10px;font-family:'icomoon';vertical-align:middle;font-size:1.25em} .ico_correct:before {content: "\f00c"} .ico_error{color:#ff0000;margin-left:10px;font-family:'icomoon';vertical-align:middle;font-size:1.25em} .ico_error:before {content: "\f00d"}
五、邮箱做自动匹配
这种邮箱自动化匹配，既能减少用户的输入错误，也能提高用户输入的效率。让用户是在“做正确的事”。下拉列表中的红色能够凸显出匹配值与输入值的区别，便于识别。