注册页面的一些记录 - jerrylsxu

WBOY

发布： 2016-05-20 16:50:36

原创

1157 人浏览过

注册页面是大多数网站必备的页面，所以很有必要对自己的注册页面做些精心的设计。下面三张图，第一张是注册的展示页面，第二张思维导图就一个简单的逻辑，第三张是通过firebug查看调用的JS文件。

注册的展示页面	简单的逻辑	通过firebug查看调用的JS文件

一、给每个输入框写下说明

在用户看到这个输入框的时候，就能非常清晰的明白这个输入框是做啥用的，最大限度的降低他们产生疑惑的可能性。我们需要假设用户毫不了解注册需要输入的内容，随后给他们足够的信息以便帮助他们理解。

二、小图标icon

Icon是增强内容的工具，而且能给访客一个很好的暗示。以前使用小图标都是用图片，用图片的话，很多时候那些对齐、宽度高度搞起来特麻烦，这次我将图标做成字体，操作字体可比操作图片容易很多。可以到国外的一个网站icomoon制作图标字体，不过这个网站打开起来比较慢，需要耐心等待。利用在线资源，接受新思想与新技术，让工作变得越来越简单。

这些小图标都是从icomoon网站上面导出的。这种方式操作对齐，大小非常方便，不过IE6和IE7不支持选择器before（关于选择器的浏览器兼容可以参考这里），所以在这两个浏览器中将不能显示这个图标。

font class="ficomoon icon-signup">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"}