註冊頁面的一些記錄

時間 2019-12-04

標籤註冊頁面一些記錄简体版

原文原文鏈接

註冊頁面是大多數網站必備的頁面，因此頗有必要對本身的註冊頁面作些精心的設計。下面三張圖，第一張是註冊的展現頁面，第二張思惟導圖就一個簡單的邏輯，第三張是經過firebug查看調用的JS文件。css

註冊的展現頁面	簡單的邏輯	經過firebug查看調用的JS文件

1、給每一個輸入框寫下說明

在用戶看到這個輸入框的時候，就能很是清晰的明白這個輸入框是作啥用的，最大限度的下降他們產生疑惑的可能性。咱們須要假設用戶絕不瞭解註冊須要輸入的內容，隨後給他們足夠的信息以便幫助他們理解。html

2、小圖標icon

Icon是加強內容的工具，並且能給訪客一個很好的暗示。之前使用小圖標都是用圖片，用圖片的話，不少時候那些對齊、寬度高度搞起來特麻煩，此次我將圖標作成字體，操做字體可比操做圖片容易不少。能夠到國外的一個網站icomoon製做圖標字體，不過這個網站打開起來比較慢，須要耐心等待。利用在線資源，接受新思想與新技術，讓工做變得愈來愈簡單。jquery

這些小圖標都是從icomoon網站上面導出的。這種方式操做對齊，大小很是方便，不過IE6和IE7不支持選擇器before（關於選擇器的瀏覽器兼容能夠參考這裏），因此在這兩個瀏覽器中將不能顯示這個圖標。git

<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"}

3、輸入框還可輸入的字符數

過去我會給輸入框設置一個最大字數的屬性限制，這是一種比較粗暴的方式，由於在輸入到必定字符後，忽然不能輸入了，感受就像是鍵盤一會兒失靈了，沒有任何徵兆。github

如今經過這個設置，首先能讓用戶知道這裏有字數限制，其次可以讓用戶清楚的知道什麼時候會達到這個限制，很好的提高了友好度。這裏面還作了另一個小操做，就是在輸入到一些字符後，將出現變紅色，警示用戶立刻要超過額定字數了。web

這是一種poka-yoke的概念，意思就是防止錯誤，有兩種含義：偵測機制與預防機制。ajax

加入簡單的字符計數器便能把一個潛在的錯誤轉變成另外一個「原來使用這個產品只需常識」的瞬間。瀏覽器

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});
    }

4、輸入正確與錯誤都給予反饋

除了檢測到錯誤時當即顯示友好的提示信息以外，告訴用戶「一切都沒有問題」一樣也很重要。服務器

設想一下，當你急切的在向某人詢問一些信息的時候，確定是但願能立刻獲得響應的回答。app

當用戶輸入正確的時候，就應該表示表示，給他們一個綠色的勾，鼓勵一下；當輸入錯誤的時候，給他們一個紅色的差，告訴他們錯誤的理由，讓他們作相應的修改。這裏的勾和差我都是使用的圖標字體，對齊的時候特別方便。

.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"}

5、郵箱作自動匹配

這種郵箱自動化匹配，既能減小用戶的輸入錯誤，也能提升用戶輸入的效率。讓用戶是在「作正確的事」。下拉列表中的紅色可以凸顯出匹配值與輸入值的區別，便於識別。

從網上查到了相關的JS腳本代碼，本身再作了一點小修改，集成到個人代碼中。

6、密碼強度

密碼強度檢測是爲了給用戶一個善意的提醒，但願用戶對本身信息有更強的保護心理。因此即便密碼爲弱，也不該該影響數據提交。三種等級在下面會顯示不一樣的提示語，會提示用戶增長密碼強度，或鼓勵用戶將密碼強度更進一步，或確定這個密碼的強度。

密碼強度在網上有不少插件，可是此次我本身寫CSS，而後本身作匹配強度，這樣作是爲了能更好的集成到個人網站頁面中。不一樣強度顯示不一樣的顏色塊與提示。

regex.checkPwdStrong = function(str) {//密碼強度是否爲強
        var rule = /^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$/g;
        return rule.test(str);
};
regex.checkPwdMedium = function(str) {//密碼強度是否爲中等
        var rule = /^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$/g;
        return rule.test(str);
};
regex.checkPwdPoor = function(str) {//密碼強度是否爲弱
        var rule = /(?=.{6,}).*/g;
        return rule.test(str);
};

.pwd_complex{padding:5px 0;height:15px}
.pwd_complex span{height:6px;width:80px;margin-right:5px;display:inline-block;border:1px solid #c2c2c2;overflow:hidden}
.pwd_complex .strong{border:1px solid #45ac07;background:#61cc1f}
.pwd_complex .strong_word{color:#45ac07}
.pwd_complex .medium{border:1px solid #45ac07;background:#9AF518}
.pwd_complex .medium_word{color:#61cc1f}
.pwd_complex .poor{border:1px solid #FF9C3A;background:#FFCA92}
.pwd_complex .poor_word{color:#FF9C3A}

7、控制註冊按鈕

選中與不選中我原本作的是另一個效果，就是沒選中的時候將立刻註冊這個按鈕隱藏掉，但後面以爲不妥，若是用戶不當心將選中框取消，按鈕又忽然消失了，會使用戶疑惑，有可能他們就終止註冊或者刷新頁面，從新輸入相應的內容，不管作哪一種操做，都會讓用戶感到不愉快。

後面我就想到將按鈕變灰，在html中被禁用的 input 默認顯示灰色，利用了一下用戶的一些習慣。讓按鈕存在於頁面上，暗示用戶還有操做沒完成，這裏其實卻是能夠再加些小提示，明確哪裏沒有作好，我偷懶了下沒有作那種提示。

服務條款下面我用虛線標識了一下，而且在移上去的時候顯示手的圖標，暗示用戶這裏能夠點擊，點擊服務條款彈出一個內容層，裏面是協議內容，我沒有作打開一張新頁面那種提醒方式，我以爲這種時候用戶的注意力應該集中在當前頁面，而不是新開一個窗口，再去瀏覽那裏的信息，分散了他的注意力，還有就是新開了一個窗口瀏覽器又多了個標籤，挺佔地方的。

8、最後驗證

當我點擊提交按鈕的時候，會用JS腳本作最後的驗證，防止將錯誤信息提交到服務器端，若是有輸入還沒符合要求，會有一個小手定位到錯誤的輸入框旁邊，並作了來回移動的動畫效果。一個會動的錯誤提示，我相信能更加吸引住用戶的注意，而後作相應修改。這裏使用了CSS3的新技術，一直想把一些已經學到了的東西應用到實際操做中，這裏正好作了個嘗試。這個動畫提示還很粗糙，但給了我一個新的想法。惟一以爲變複雜的就是CSS代碼一會兒龐大了不少。

這個動畫就是在控制margin-left的值，作來回移動。

.cssanimations .ico_prompt{
    -moz-animation-duration: .7s;
    -moz-animation-name: prompt_hand;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    
    -webkit-animation-duration: .7s;
    -webkit-animation-name: prompt_hand;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    
    -o-animation-duration: .7s;
    -o-animation-name: prompt_hand;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: alternate;
    
    -ms-animation-duration: .7s;
    -ms-animation-name: prompt_hand;
    -ms-animation-iteration-count: infinite;
    -ms-animation-direction: alternate;
    
    animation-duration: .7s;
    animation-name: prompt_hand;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes prompt_hand {
    from {margin-left:10px}
    to {margin-left:2px}
}
@-moz-keyframes prompt_hand {
    from {margin-left:10px}
    to {margin-left:2px}
}
@-webkit-keyframes prompt_hand {
   from {margin-left:10px}
    to {margin-left:2px}
}
@-o-keyframes prompt_hand {
    from {margin-left:10px}
    to {margin-left:2px}
@-ms-keyframes prompt_hand {
    from {margin-left:10px}
    to {margin-left:2px}
}

9、按鈕標記

按鈕裏面的文字我能夠寫成普通的「提交」字樣，也能正常工做。可是意義更明顯的按鈕標記能更好地幫助用戶創建對點擊結果的指望，讓用戶清楚的知道我在這裏用手指點擊了一下，能獲得什麼結果。

10、作防重複提交限制

最後在用戶點擊提交後，我會有一個轉動的圓圈出現，既能暗示用戶系統正在提交，請耐心等待，又能防止用戶重複提交服務器。通常有經驗的用戶看到這種圈圈就會意識到正在提交中，但對於沒經驗的用戶，能夠作到更好。我僅僅是作了個圈圈層特效，其實這裏的「立刻註冊」幾個字能夠在點擊後改變成「註冊提交中」等提示，讓用戶能更加清晰的知道如今是什麼狀況。

爲了完成這種效果，我使用了插件spin，可以兼容各個瀏覽器。在ajax作提交前顯示，在ajax響應後去除這個等待層。

showAjaxLoading: function(btn) {
            var left = $(btn).offset().left;
            var top = $(btn).offset().top;
            var width = $(btn).width();
            var height = $(btn).height();
            var opts = {
                  lines: 9, // The number of lines to draw
                  length: 0, // The length of each line
                  width: 10, // The line thickness
                  radius: 15, // The radius of the inner circle
                  corners: 1, // Corner roundness (0..1)
                  rotate: 0, // The rotation offset
                  direction: 1, // 1: clockwise, -1: counterclockwise
                  color: '#000', // #rgb or #rrggbb or array of colors
                  speed: 1, // Rounds per second
                  trail: 81, // Afterglow percentage
                  shadow: false, // Whether to render a shadow
                  hwaccel: false, // Whether to use hardware acceleration
                  className: 'spinner', // The CSS class to assign to the spinner
                  zIndex: 2e9, // The z-index (defaults to 2000000000)
                  top: '50%', // Top position relative to parent
                  left: '50%' // Left position relative to parent
            };
            $('#ajax_spin').remove();
            $('body').append('<div id="ajax_spin" style="position:absolute;background:#FFF;filter:alpha(opacity=30);opacity:0.3"><div id="ajax_spin_inner" style="position:relative;height:50px;"></div></div>');
            $('#ajax_spin').css({'top':top, 'left': left, 'width': width, 'height':height});
            var target = document.getElementById('ajax_spin_inner');  
            var spinner = new Spinner(opts).spin(target);
        }