设计网站登录界面的注意点_设计网站界面要有哪些注意事项

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、整站界面风格：在后期维护网站的阶段，美工们在制作图片时，没有考虑当前网站的风格，随意变换图片基本色调，在网页色彩搭配设计时，不合理配合网站整体风格，会影响网站后期的优化工作。

导航:首页 > 万维百科 > 设计网站登录界面的注意点

设计网站登录界面的注意点

与设计网站登录界面的注意点相关的知识