設計網站登錄界面的注意點_設計網站界面要有哪些注意事項

1、html網頁登錄界面跳轉設計

下面列了五個例子來詳細說明，這幾個例子的主要功能是：在5秒後，自動跳轉到同目錄下的hello.html（根據自己需要自行修改）文件。
1) html的實現
<head>

<meta http-equiv="refresh" content="10">

<meta http-equiv="refresh" content="5;url=hello.html">
</head>
優點：簡單
缺點：Struts Tiles中無法使用
2) javascript的實現
<script language="javascript" type="text/javascript">
// 以下方式直接跳轉
window.location.href='hello.html';
// 以下方式定時跳轉
setTimeout("javascript:location.href='hello.html'", 5000);
</script>
優點：靈活，可以結合更多的其他功能
缺點：受到不同瀏覽器的影響
3) 結合了倒數的javascript實現（IE）

<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript">
var second = totalSecond.innerText;
setInterval("redirect()", 1000);
function redirect(){
totalSecond.innerText=--second;
if(second<0) location.href='hello.html';
}
</script>
優點：更人性化
缺點：firefox不支持（firefox不支持span、div等的innerText屬性）
3') 結合了倒數的javascript實現（firefox）
<script language="javascript" type="text/javascript">
var second = document.getElementById('totalSecond').textContent;
setInterval("redirect()", 1000);
function redirect()
{
document.getElementById('totalSecond').textContent = --second;
if (second < 0) location.href = 'hello.html';
}
</script>
4) 解決Firefox不支持innerText的問題

<span id="totalSecond">5</span>
<script language="javascript" type="text/javascript">
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('totalSecond').innerText = "my text innerText";
} else{
document.getElementById('totalSecond').textContent = "my text textContent";
}
</script>
5) 整合3)和3')

<span id="totalSecond">5</span>

<script language="javascript" type="text/javascript">
var second = document.getElementById('totalSecond').textContent;

if (navigator.appName.indexOf("Explorer") > -1) {
second = document.getElementById('totalSecond').innerText;
} else {
second = document.getElementById('totalSecond').textContent;
}

setInterval("redirect()", 1000);
function redirect() {
if (second < 0) {
location.href = 'hello.html';
} else {
if (navigator.appName.indexOf("Explorer") > -1) {
document.getElementById('totalSecond').innerText = second--;
} else {
document.getElementById('totalSecond').textContent = second--;
}
}
}
</script>
參考http://www.cnblogs.com/aszx0413/articles/1886819.html

2、網頁設計的登陸界面問題

CSS是一種方法，Macromedia Dreamweaver 8做也可以，用布局頁面來繪製表格的位置你想放哪就放哪很隨意的專！通屬過表格的布局你的問題就很好解決了如果你不會用的話這有布局頁面教程希望可以幫到你http://www.pqshow.com/index/dw.html
在第二章里。。。。。

3、設計網站界面要有哪些注意事項

一、合理的頁面版式
設計網頁時，一定要注意頁面版式的合理性。一個合理的版式和讓人一目瞭然的網頁能夠給人帶來舒適的感覺，並且會讓人願意花時間去了解。注重版式的設計，不要板塊冗雜；頁面版式的搭配，注重協調簡潔。合理地搭配設計頁面中的版式，呈現一個清新的網頁。
二、舒緩的色彩設計
無論哪個行業的網頁，在設計過程中都不要一味地追求視覺刺激，做出奇異的色彩搭配。在設計網頁的過程中，設計者一定要注重頁面色彩的搭配，多用暖色調，協調搭配冷暖色。只有色彩足夠協調、舒緩，才能夠讓人有繼續停留的念頭。
三、新穎的網頁內容
網頁中的內容，猶如人的靈魂不可或缺。設計一個網頁，肯定都是想要宣傳某個企業或產品，而網頁中的內容更是不能夠缺少的。現今，想要用內容吸引用戶，就一定需要有新穎的內容，從文字或者其他形式的內容出發，注重原創和內容的新穎。
四、減少使用特殊字元
設計網頁時，盡量少用特殊字元。在不同的計算機或者不同的平台中，看到的情況有時候有一些差別，如果使用了特殊字元，很可能會有比較糟糕的展示效果，所以應當盡量減少特殊字元的使用。
以上幾點，介紹了設計網頁時一定需要注意的問題，其實，這其中還有很多其他的細節需要設計者注意。總的來說，在設計網頁的過程中，把握好頁面版式、顏色搭配、內容以及字元等等，就大體能夠做出一個優秀的網頁。

4、界面設計需要注意什麼問題

1. 你的UI 是否高度一致？
用戶來到你的站點，腦子里會保持著一種思維習慣，你的UI 需要保持一致，以免用戶的思維方向被打亂。比如，如果你的某個品目下的產品可以拖放到購物車，那你站點中所有產品都應該可以這樣操作。將按鈕放到不同頁面相似的位置，使用相契合的配色，使用一致的語法和書寫習慣，同時，讓你的頁面擁有一致的結構。

2 . 用戶能自由掌控自己的操作嗎？
你應當分析一下，自己的站點是否容易導航。用戶應當可以自由掌控自己的瀏覽行為，確保他們能從某個地點跳出，能夠毫無障礙地退出。那些在用戶離開前彈出窗口的行為是UI 易用性的一個大問題。

3. 你知道誰是你的用戶群嗎？
要設計有效的UI，必須對你的用戶群有所了解，不同的用戶階層對不同的設計元素有不同的理解，17~25 歲年齡段的人，和40~55 年齡斷的人有不同的喜好。你的UI 設計必須針對你的用戶群進行設計…

4. 你是否有足夠的預防錯誤的措施？
應該盡可能檢查程序中的錯誤和BUG，雖然你可以彈出一個窗口告訴用戶發生了什麼，但為了更好的用戶體驗，最好減少這些東西。Beta 測試是消減錯誤的最好方法。

5. 你是否首先將最重要的東西展示給用戶？
將重點放在重要的內容上面，首先為用戶展示最重要的內容，以便用戶更好地理解你的內容。

6. 你的設計是否簡單？
很多站點的設計十分簡單，簡約設計可以增強UI 的易用性，可以讓用戶不必關心那些無關的信息。你的UI 應該是這樣的，它的功能很強大，但設計很簡約，擁擠的界面，不管功能多麼強大，都會嚇跑用戶。

7. 你是否使用了視覺提示？
如果你使用了Ajax，Flash 一類的技術，當內容在載入的時候，應當提供視覺提示，應當始終讓用戶知道目前在做什麼。

8. 你的UI 是否有操作提示？
你的用戶是否靠自己研究或FAQ 文檔學習如何操作？你應當在UI現場提供簡單的操作提示，比如，使用jQuery 在你的各個UI 元素上顯示操作提示。

9. 你的內容是否清晰？
確保你的文本准確，清晰，易懂。

10. 你如何使用色彩？
色彩是UI 的重要元素，不同的顏色代表不同的情緒，你對色彩的使用應當和站點以及主題相契合。還應注意，有的用戶是色盲，你應當考慮到他們的感受。色彩的使用應該一致，一旦選定了某種配色，就應該在整個站點一致使用這種配色。

11. 你的UI 是否大象無形？
UI Engineering曾經說過，」最好的設計不是用來看的，是用來體驗的」。這意味著，你的UI 應該讓用戶去體驗，而不是放一些花哨的東西給用戶看。UI 設計越簡單，用戶體驗越好，不要濫用設計元素，不要使用擁擠的界面。

12. 你的UI 是否有良好的結構？
你的UI 中，各個元素應當放在他們應當放的位置，總體結構應當清晰，一致，相互關聯，那些不相關的東西應當單獨放置。

5、javascript html 設計一個登錄界面

注冊頁面代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注冊</title>
</head>
<body>

<form method="post" onsubmit="return false" id="form">
    <input type="text" name="username" placeholder="用戶名"><br>
    <input type="password" name="password" placeholder="密碼"><br>
    <input type="password" name="rePassword" placeholder="再次輸入密碼"><br>
    <input type="submit" onclick="register_user()" value="注冊"><br>
</form>
<a href="login.html">去登錄</a><script>
    var localDB = openDatabase('localDB', '1.0', 'Test DB', 2 * 1024 * 1024);
    localDB.transaction(function (ts) {
        ts.executeSql('CREATE TABLE IF NOT EXISTS user(username,password)')
    });
    function register_user() {
        var username = document.getElementsByTagName("input")[0].value;
        var password = document.getElementsByTagName("input")[1].value;
        var rePassword = document.getElementsByTagName("input")[2].value;
        if(password != rePassword)
        {
            alert("兩次輸入的密碼不同，請重新輸入");
        }else
{
            localDB.transaction(function(ts){
                ts.executeSql("INSERT INTO user (username,password) VALUES ('"+username+"','"+password+"');");
                alert("注冊成功");
            });
        }
    }
</script>
</body>
</html>

登錄頁面代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄</title>
</head>
<body>
<form onsubmit="return false" method="post">
    <input type="text" placeholder="用戶名"><br>
    <input type="password" placeholder="密碼"><br>
    <input type="submit" value="登錄" onclick="login()"><br>
</form>
<a href="register.html">去注冊</a>
<script>
    var localDB = openDatabase('localDB', '1.0', 'Test DB', 2 * 1024 * 1024);
    localDB.transaction(function (ts) {
        ts.executeSql("SELECT * FROM user",[],function (tx, results) {
            var len = results.rows.length;
            if(len<=0)
            {
                localDB.transaction(function (ts) {
                    ts.executeSql('CREATE TABLE IF NOT EXISTS user(username,password)')
                });
            }
        });
    });

    function login() {
        var username = document.getElementsByTagName("input")[0].value;
        var password = document.getElementsByTagName("input")[1].value;
        localDB.transaction(function (ts) {
            ts.executeSql("SELECT * FROM user WHERE username='"+username+"';",[],function (ts, res) {
                if(res.rows.length<=0)
                {
                    alert("登錄失敗，用戶未注冊");
                }else if (password == res.rows[0].password)
                {
                    alert("登錄成功,三秒後跳轉到百度");
                    setInterval(function () {
                        location.href = "https://www.baidu.com";
                    },3000);
                }else
{
                    alert("登錄失敗，密碼錯誤");
                }
            });
        })
    }
</script>
</body>
</html>

以上代碼使用了WEB SQL，還請選擇合適的瀏覽器查看。

6、html網頁設計：一個簡單的登錄界面代碼！

<input
type='button'
text='登陸'
onclick='return
checknull()'>你說的要能識別是否輸入了用戶名和密碼！需要用腳本來驗證
<script>
function
checknull()
{
var
a=document.getElementById('用戶名文本框ID').text;
var
b=document.getElementById('密碼文本框ID').text;
if(a.length>0&&b.length)
return
true;
else
return
false;
}
<script>

7、網頁設計有哪些細節需要注意

　　1、切勿隨意添加欄目：作為美工，這一行為是要避免的，如果隨意給界面添加表單、鏈接、「更多」等需要後台開發才能支持的功能，這樣隨意添加，就無形的更改了網站最初的需求，增加了項目的工作量，會影響網站的整體功能，同時也增加了後期測試的工作量，另一種可能就是不符合用戶的需求，導致後期還需要重新修改。
2、切勿隨意篡改設計：沒有按照欄目的邏輯來設計頁面，也沒能為網站的內容進行良好的呈現。這種行為只是單純的為了自己能在網頁設計時方便，從而隨意的消減了很多網站的內容。
3、隨意切圖，不考慮頁面動態擴展：這個一般是美工技術含量不夠導致的。切出的圖片只能用在一個界面尺寸里，換個頁面，就需要重新切圖，沒有任何擴展性，要結合響應式網頁設計的原理，進行合理切圖。
4、圖片好看，但是沒有實在的意義：給一個美工一個新聞主題，讓他給做一個Banner，但是做出來之後，和新聞主題沒有任何的關系，僅僅是好看。還有一些美工，更加對工作不負責任，只是把一個圖片做了一下PS，這樣對網站的整體效果都是有害的。
5、整站界面風格：在後期維護網站的階段，美工們在製作圖片時，沒有考慮當前網站的風格，隨意變換圖片基本色調，在網頁色彩搭配設計時，不合理配合網站整體風格，會影響網站後期的優化工作。

導航:首頁 > 萬維百科 > 設計網站登錄界面的注意點

設計網站登錄界面的注意點

與設計網站登錄界面的注意點相關的知識