用Axure 8设计简单的登陆页面
用Axure 8设计简单的登陆页面
1.流程图
2.登陆页面关键配置
账号输入文本框（显示）
密码输入文本框（显示）
登陆按钮（显示）
账号和密码为空提示文本框（隐藏）
账号为空提示文本框（隐藏）
密码为空提示文本框（隐藏）
账号或密码不正确提示文本框（隐藏）
登陆成功页面（隐藏）
登陆按钮（显示）
3.原件设置
账号输入文本框和密码输入文本框设置，设置属性类型、提示文字、字体颜色如图
账号和密码为空提示文本框、账号为空提示文本框、密码为空提示文本框和账号或密码不正确提示文本框设置，设置属性类型、提示文字、字体颜色、隐藏边框如图
登陆成功页面设置，右击选择设为隐藏
4.交互设置
选中登陆按钮交互中选择“鼠标单击时”，添加交互用例。
以账号和密码都未输入的情况为例，
1.点击“鼠标单击时”，设置用例名称和交互条件。点击添加条件，设立条件，账号和密码输入框输入为空；
1.点击左侧添加动作“显示”，选择提示框，配置设置框效果如图（提示框显示200毫秒后隐藏）。
5.效果展示
点击预览展示效果图
用户活跃度是检验产品成功与否的重要指标之一，传统行业的商家极为重视门面的装潢，因为一个好的门面可以聚集人气，招揽更多的顾客。古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究，有一定的风水学说道理，更能彰显主人家的身份地位.由此可见，“门面’就如人的脸面之于人的形象一样重要，而WEB的登录页面就相当传统的“门面”。
现在越来越多的大型网站把登录和首页放在一起设计，由此可见登录页面的重要性，一个出彩的登录界面，将提升产品的品质，赋予产品独特的气质，登录界面也是一个发挥情感化设计，提升用户体验，拉近与用户之间距离的兵家必争之地，本文不谈趋势，不讲交互大道理，不涉及技术，就侃侃用户登录页面的一些设计表现形式。希望这些设计表现手法能给大家带来一些启发和灵感。
优雅大方
如果说iPad是介于传统电脑和手机之间的产品，那么tumblr则是介于blog和twitter之间的服务。相比twitter，它的功能更复杂、内容展示性更强、更加重视多媒体的应用。Tumblr做为轻博客的鼻祖，带来一种全新的视觉体验， 安东尼·德·圣-埃克苏佩里曾说过，“完美就是多一点则太多，少一点则太少。” Tumblr的登录页面没有过多的视觉干扰，优雅大方，一切元素的存在都是为了用户更好的登录，登录过程非常流畅。
精致的质感表现
iCloud是苹果公司所提供的云端同步服务，用户有5GB的免费存储空间。 负责Macintosh用户界面设计的柯戴尔·瑞茨拉夫回忆说：“乔布斯会一个像素一个像素地检查屏幕上的每个细节，确保相关的图像准确对齐。他非常重视细节，细致程度居然达到了像素的层面。如果发现问题，乔布斯就会立即冲着某个工程师大吼起来。”iCloud登录页面的设计继承了苹果公司对细节的苛求, 细致的纹理，微妙的阴影，精致的质感，完美的细节，金属光泽可以随着鼠标指针移动，底部的图标可以随着分辨率的大小自适应，改变排列方式，确保用户的浏览体验。
iCloud给我们上了很好的一课，有句大家都听过却未必做到的话——细节决定成败，丰富的细节可以提升设计的价值，也是判断一个设计高下的一条很重要的标准之一，精致舒适的质感纹理，给用户一种沉浸式，充满惊喜的登录体验，是一种很棒的表现方式。
小清新的插图
在网页设计中，插图非常具有表现力，它与绘画艺术关系密切。所以大部分设计职位，对手绘能力出众者格外青睐，许多表现技法都是借鉴了绘画艺术的表现技法。插画艺术与网页设计的的结合，具有独特的艺术魅力，从而更具表现力。越来越多的设计师，将插画运用到网页设计中来，生动有趣温情的清新插图，能迅速的抓住用户的眼球，让登录界面的更加具有亲和力，
163邮箱的登录页面就采用了大幅的插图,小邮差很快唤醒了80后等待来信的记忆，有故事的插图与用户建立情感的联系，唤起用户的心灵共鸣，让用户更有归属感。
Vimeo是一家提供高清视频存放服务的网站，在这里可以找到很多来自世界各地非常有创意的设计师。相信登录过Vimeo的朋友都对Vimeo的登陆页面记忆深刻。
人文关怀的品牌传达
设计以人为本，以人为本的设计不仅能提高产品的品质，还能提高设计的艺术水平，而登录页面是体现人文关怀，传播品牌理念的绝佳位置。
QQ邮箱登陆页面每一次刷新都能看到不同的内容，或用海子的诗，或用迈克尔.杰克逊的歌词，唤起用户的共鸣，设计手法简洁，主体信息突出，引导清晰，并没有多余的元素，界面中最重要的操作“登录”按钮使用了交通中通行的绿色，而没有使用常用的蓝色，细节设计非常考究，对每个细节都注入人文的关怀。
新浪微博将登录框设计成一条围脖的样式，用户的每一次登录都是一次品牌传达的过程，切合新浪力推的围脖品牌理念，织围脖的概念深入人心。
越来越大的登录框
越来越大的输入框设计，让用户输入起来感到心情舒畅，登录过程非常愉悦，在显示器越来越大的今天，mailchimp大输入框显的霸气十足，并且一反常态的可以看到自己的密码，第一次在WEB登录框里见到这种设计，非常贴心.正是这种不拘一格的设计，让mailchimp从一个内部项目蜕变成一个该公司最成功的商业产品。
简约而不简单
WEB设计的风格越来越趋向于简洁，登录页面大量地使用留白可以让登录框更加突出。最大程度的减少用户分心，从视觉的角度来看，简约的设计是平静的，砍掉了多余的元素，颜色，形状和纹理，不能使用让人眼前一亮的设计元素，只能靠空白去做视觉吸引力。布局的权衡及简化设计做的不到位的话很容易变的单调乏味，wordpress后台登陆页面采用适当的投影，灰色的巧妙运用，以及出错的抖动提示，让整个登录页面简约而不简单.堪称典范。
参考：http://cdc.tencent.com/2012/01/16/拒绝平庸-浅谈web登录页面设计
一款应用的成功有赖于很多因素，但在其中最重要的是优秀的用户体验设计。像实际那样，在所有应用市场中，最高排名的恰好是那些令人记忆犹新的。
显然，这并不是你要考虑的所有的——有很多的元素都需要被包含和完美组合。正因如此，UX才会在所有方面都是完美的。
对于你UX最好的行动方案，是跟随行业里最好的例子和实践。你应该应用普遍和熟悉的模式，并且研究你的用户来弄清楚，对于他们什么会有最好的效果。
过程并不简单，你所选择的每一个实践，都涉及了一个具体的基础心理学的多方面理解。
最后，你应该生成一个能让用户兴奋的界面，而不是一个另他们沮丧的。让你问题对你更简单，我们准备了一个几项UX策略指南你可以应用于实践。
文本输入框增加提示
如果用户使用你的服务必须登录，那么信息字段是你必须要做的主要功能（即输入框中的提示语，如：输入手机号码，输入验证码。）
使这些字段清楚可视，并且不要强迫用户到处寻找，或花更多的步骤进到App. 一旦他们进到App, 登录界面是他们所应当见到的第一个事情。
奖励提示：相比于使用常见的“登录”“登陆”的按钮，可以更富有创造性，并要包含可直接输入区域。确保记住用户的数据，这样他们就不需要每次输入信息。
“注册”和“登陆”不应该放在一起。
更多地时候，我们看到注册和登陆按钮被放置的靠近彼此，但是这会对用户产生反作用。
这两个动作都包含了相同的动词，并且看起来也很相似，所以他们会混淆用户的选择。在有限的时间内进入问题，他们可能会感到沮丧并且离开。
基本上，任何界面上不应该有使用户“暂停”和“思考”的元素。
如果你想让他们的体验完美无瑕，分开这注册和登陆两个区域，并且使差别清晰可见。另外，你可以使用不同的动词或者简单解释不同的字段是什么。
在登录和注册部分，增加不同的输入字段。
除了动词“Sign”是事实之外，另一个另用户感到困惑的是，登录和注册部分通常有相同数量的输入框（用户名，密码，和邮箱）。
为了完全地区分，最小化新用户尝试直接登录的机会。用不同的输入字段。
让密码可被看到
当大多数用户的密码由于安保原因被打了马赛克，用户频繁遇见的另一个问题是打错他们的密码。
这甚至会发生在很有经验的打字员身上，特别是当他们在移动设备上登录的时候。
防止这种情况发生的做法是： 在密码字符旁边包含一个“显示密码”的单选框或图标。
让他们知道什么是错误的
如果应用监测到一个错误的密码组合，和用户名，但是没有明确的报告给用户问题是什么，用户可能会多次尝试后，很生气的退出应用。
这是为什么你应该考虑通用的回复（例如“你的密码或邮箱不符合”），并且给他们立马回复怎么解决这个问题。
问下邮箱地址或电话号码，而不是唯一的用户名
为什么人们登录时人们很少记住“用户名”？如果使用用户名登录，你会面对很多可避免的困难： 用户名必须是一个唯一的，这意味着人们会重复尝试输入一个系统里目前还没有的用户名，或者最终使用其真实姓名。
过了一会儿，用户想出了一个唯一的登录名，但是只过了一小会儿就忘记了，因为这个用户名对他没有任何的意义。
另一个事情可以促进登录，是提供给用户几个登录选项，并且给他们机会来选择和尝试用户名而不会沮丧。在这过程中强迫的一部分是允许他们使用邮箱地址和密码来注册。
需要一个“忘记你的密码”的流程
忘记密码发生在所有人身上，这也是为什么，你急迫的给到用户一个机会来恢复密码，那么就直接在登录界面这么做吧。
所要做的就是，在输入框下增加一个“忘记你的密码”的链接，并让系统能给用户的邮箱或电话号码发送验证码。
不要锁了用户的账号而不告知他们
为了避免强迫进入和暴力攻击，许多网页和应用在一系列的错误尝试之后关闭账户。
安全第一，但是你至少要尝试告诉用户，在多少次尝试后，在关闭账户前，他们必须离开。你也可以分享更多的细节，例如，在试错后的十分钟才可以再次尝试的事实。
登录样式灵感
如果在过去，都是在用相同的无风格和定制化的登录页。现如今，给你的应用，创造一个独特的登录页设计是非常重要的事情，尤其是你想要围绕你的应用和服务来创造品牌。
设计师和开发人员也有承认意识到登录表单的重要性。这是事实，特别对于移动环境下，用户界面相比于“桌面”网站，扮演了更重要的角色。
当为一个应用和移动站设计这个元素的时候，设计师花很多的精力，使它既好用又美观。
在这篇文章里，你会看到很多移动端用户界面设计的案例灵感，关于一个移动端登陆页面应被设计成什么样，给你一些线索。
Roostio Login Screen
Login Screen
Job Board – Company Profile / Login
Shopping app
Tailslife: Login
Moody Sign Up/In Screen
Bandio App Login &Sign Up
Parts – login dark side
Login Screens
ZSSK – login and route detail
DailyUI Day001
Skype Redesign
Sign Up Window – Daily UI #001
结尾思考
对用户来说，登陆已经很困难了，所以，使之变得更复杂，对你的产品来说并不是一个很聪明的决定。避免更大的和不熟悉的形式，并且让输入字符简单可视。这些只是一些为了节省用户时间可以考虑的技巧，并且帮助他们享受你所提供的服务。
译者：惜阅Presto
fm
=
new
Login()//创建登录窗口
if
(fm.ShowDialog()
==
DialogResult.OK)//判断登录是否成功
{
}//登录成功，什么都不做
else
{
Application.Exit()//登录失败，关闭程序
} 登录窗口中“登录”按钮的代码为：//要先引用using
System.Data.SqlClientstring
userName
=
textBox1.Text
string
pwd
=
textBox2.Text
if
(userName
==
string.Empty
)//判断用户名的文本框是否有输入内容
{
MessageBox.Show("请输入用户名！")//提示输入用户名
return//跳出事件，不执行下面的代码
}
else
if
(pwd
==
string.Empty)
{
MessageBox.Show("请输入密码！")
return
}//下面是ADO.NET对数据库进行操作，查找是否有用户名和密码相符的记录，如果有，设置tag为1，表示登录成功SqlConnection
conn
=
new
SqlConnection("Data
Source=.\\sqlexpressInitial
Catalog=test1Integrated
Security=True")
conn.Open()
string
sql
=
string.Format("select
count(*)
from
users
where
username='{0}'
and
pwd='{1}'",userName,pwd)
SqlCommand
comm
=
new
SqlCommand(sql,conn)
int
tag
=
0
if
((int)comm.ExecuteScalar()
>
0)
tag
=
1
conn.Close()if
(tag
==
1)//判断是否登录成功
{
this.DialogResult
=
DialogResult.OK
this.Close()
}
else
{
MessageBox.Show("密码错误！")
} 以上就是主要的代码和内容了。。说一下你的数据库中的表名使用有问题，不能用user作为表名，因为这是个关键字，用的话会出错的。建议你用users或其他的。 这里有参考源代码，外链是
http://dl.dbank.com/c0q9yc4t2g 以上信息希望对你有帮助。。^^
注册页面代码：
<!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，还请选择合适的浏览器查看。
1.就是在SQLSERVER中建立表 来保存用户名和密码之类的信息。
2.信息获取的话 无非就是两个textbox，把密码的那个textbox的“type”属性改为“password”
3.创建数据库链接字符串 然后 sqlconnection --接着编写SQL查询语句--最后--sqlcommand。
4.这里我的方法是 用sqlcommand的Executereader方法来获取一个 datatable "dt".
然后来判断 dt的dt.rows.count属性是否大于0 如果大于0 则证明用户名与密码正确的了。 (即这行记录存在于表中)
前提是 你的SQL语句 必须这么写
select * from "保存用户信息的表" where textbox1.text=username and textbox2.text=password
以上是我自己想的方法 很不专业 但是功能都能实现 忘高手给个比较专业的方法。
<html>
<head>
<meta charset="utf-8">
<link href="main.css" type="text/css" rel="stylesheet">
<title>登陆界面</title>
</head>
<body>
<div >
<img src="images/login_ico.png">
</div>
<div >
<ul>
<li><input type="text" ></li>
<li><input type="password" ></li>
</ul>
</div>
<div >
<input type="submit" value="登陆">
</div>
</body>
</html>
样式 ：
*{
margin:0
padding:0}
li{
list-style-type:none
margin:0
padding:0}
a{
text-decoration:none
color:#000}
.login_putin ul li input{
margin: 0
width:70%
padding: 1em 2em 1em 5.4em
-webkit-border-radius:.3em
-moz-border-radius: .3em
border: 1px solid #999
}
.login_btn{
width:300px
margin:40px auto 0 auto
}
.login_btn input{
width:100%
margin:0
padding:.5em 0
-webkit-border-radius:.3em
-moz-border-radius: .3em
border:#1263be solid 1px
background:#1b85fd
color:#FFF
font-size:17px
font-weight:bolder
letter-spacing:1em
}
.login_btn input:hover{
background:#1263be
}
让页面能够做到居中.注意该标签不能嵌套使用.
role属性是html5中新增的一个属性,可以让你更好的自定义一些属性供你使用.
该标签是把一些表达标签的width都设置为100%.
其中btn是bootstrap中默认定义的一个button也就是按钮的样式.
其中btn-lg是指最大的样式.还有btn-xs, btn-sm, btn-md. 分别对应不同的设备. 手机, 平板, pc等.
这里又重新写了2个样式, 一个是表单的最大width. 设置成了330px.是因为登录不需要太过宽, 要不然不太好看. 第二个样式, 是因为在默认的btn-lg是占一行, 所以, 就会把两个表单文本框放在各自的行上. 但是紧挨着太狠. 所以, 做了一个3px的下间距.
不同的btn大小展示, 从图就可以看出来这几个的区别. 怎么试用? 你动手做一下就明白了.
满意请采纳
判断是否有勾选到"记住我",如果有,创建cookie,把数据封装起来
两个过滤层
第一个过滤层是把cookie的值给到session,不管是否存在都需要放行
第二个过滤判断Uri的来源,防止别人拿登陆后的链接直接进来了
