欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

注册页面的一些记录 - jerrylsxu

程序员文章站 2022-04-06 12:21:22
...

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

注册的展示页面 简单的逻辑 通过firebug查看调用的JS文件
注册页面的一些记录 - jerrylsxu 注册页面的一些记录 - jerrylsxu 注册页面的一些记录 - jerrylsxu

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

注册页面的一些记录 - jerrylsxu

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

二、小图标icon

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

注册页面的一些记录 - jerrylsxu注册页面的一些记录 - jerrylsxu注册页面的一些记录 - jerrylsxu这些小图标都是从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"}

三、输入框还可输入的字符数

注册页面的一些记录 - jerrylsxu微信

  • 注册页面的一些记录 - jerrylsxu

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。