① 注册与登录界面的设计思考
登录和注册过程往往是产品和用户的 first sight，因此登录注册入口是给用户留下好的第一印象的关键。遵循“所有的设计都应有据可循”的原则，下面通过对登录与注册几个关键问题的探讨，来思考登录与注册界面的设计逻辑。
1.注册页面的需求是什么？
2.默认注册还是登录？
3.邮箱注册一定要验证通过么？
4.关于手机登录与第三方账号登录
5.iOS 11 带来的新登录方式
6.为什么需要注册？
登录页面比较好理解，我们重点来看注册页面，以 Spotify 为例，以下是一个非常典型的传统注册页面。
由此试图分析，在注册场景下，用户和产品两个维度上的需求如下。
用户需求：
1）进入应用；
2）获得应用完整功能（评论、点赞、收藏等）。
产品需求：
1）获取、验证用户的账号与密码信息；
2）获取用户个人信息、联系方式；
3）告知用户协议；
4）订阅邮件。
首先总体上我们可以发现，用户与产品在注册场景下存在需求冲突。用户对于注册界面的需求非常简单明确，就是为了快速进入应用或者获取完整功能。不会有用户想要主动阅读成百上千字的用户协议，也不太愿意主动提供个人信息或是订阅邮件。因此，产品角度的第 (2)(3)(4）需求在注册场景中，都是对用户体验的破坏。所以，尽量避免产品需求对用户体验的破环，更多地给予用户情感安慰，这是设计注册界面的大原则。
豆瓣默认是登录，Airbnb 默认是注册，而锤子的系列软件将注册与登录按纽都并列在下面，不做默认。
考虑到目前 App 普遍采取的“长久性登录”策略，默认为“注册”也不失为一个具有概率意义的选择。毕竟大家都通常只会在换机、重置系统、登录失效、主动退出这些低频时刻来登录。但其实这个问题，没有通行的做法，更没有绝对意义上的好坏。每个产品根据各自定位和情况的不同，会有不同的侧重点。比如说，约 8 亿用户量的国民级社交应用 QQ，绝大多数场景下都已经没有了“注册账号”这一需求，默认为“登录”操作，同时将“注册”入口极大弱化是比较合适的。而定位于垂直领域的社交应用脉脉，目前拥有约3000 万用户量，目标用户群体中仍然有非常大的潜在用户量增长空间。因此，第一次进入脉脉，在并列给出注册和登录入口的同时，默认引导用户进行“注册”操作。
想到这一步，笔者突然想到，如果是同一产品面对不同市场，注册登录会不会有针对性的侧重点呢？比如说，instagram 在海外用户基数庞大，而在大陆则较为小众，会不会出现海外区 ins 默认为登录，国区 ins 默认为注册呢？笔者特意找到身处海外验证，遗憾的是，两者除了语言的变化之外，并没有其他不同。
其实，默认注册还是登录并不重要，无论做何种默认都无法完全避免用户的误操作，即在登录界面填写注册信息，或者反之。那么怎么避免这种情况呢？
首先，不要急于让用户填写登录/注册表单，可以先让用户确认选择。
其次，可以在文字和样式上对二者进行比较显着的区分。文字方面，英文语境下，Sign up 与 Sign in 容易产生混淆。比较好的解决方案是用 Sign up / Log in，或者 Register / Sign in 等方案。
用词混淆的情况，中文语境下情况会好一些，“登录”与“注册”天然具有区分度，但是仍然可以在文字样式上设定足够的差异，给以足够的提示，引导用户进行正确操作。
此外，可以输入信息后及时反馈，避免全部表单填写完毕再给出反馈。（没找到比较合适的案例，自己动手做了一个...）
其实不管怎么避免，用户依然有将登录与注册弄混淆的可能。关键在于，在用户在错误的界面花费了时间与精力填写信息之后，如何降低用户的纠错成本，也就是说： 如何解决“登录”与“注册”两种界面切换时，发生的数据丢失。 相比较在注册页面粗暴地告诉用户“这个手机号已注册”，更好的解决方案可以是“询问用户是否需要登录，并在登录界面自动转填已填写的信息”，确保用户即使犯错了，也可以辅助其跳往正确的目标，这能大大减轻用户的犯错成本，也可以给人一种产品很“聪明”的印象。
或者，不给用户犯错的机会，弱化“登录”和“注册”，只给出一个“登录身份”的输入框，附带一个“下一步”的按纽。后台验证用户输入的“登录身份”，来判定是登录还是注册。
从用户体验的角度而言，产品应在用户注册后自动登录。而不是通过验证后，再次由用户登录。因此，可以将验证放置在注册完成之后的某个时刻，利用虚拟奖励、功能限制、安全恐吓等方式激发用户去完成验证。
长久以来，为了避免用户注册时输入了错误密码，要求用户输入两次密码也是一种惯例。然而事实上，“注册时输入错误密码”与“忘记密码”并没有本质上的区别，“输入错误密码”并非十分严重的错误。此外，用户容易输错密码的原因是密码通常隐藏显示，而加入“显示密码”选项，也能从根本上更好地防止输入错误。
网页端常常使用“输入两次登录身份”的方法，来避免登录信息的输入错误，但是面对移动设备的输入压力，确认两次“登录身份”的做法并不友善。但是，如果不及时确认登录身份正确的话，在“注册后立即自动登录”的大前提下，“输入错误登录身份”会带来不可逆的后果。一旦在注册时填写错误登录身份，在账户验证期限内无法验证账户，轻则需要重新注册，重则丢失在验证期内产生的所有用户数据。
进一步思考，抛开问题看本质，验证的本质是确认“登录身份”是正确的，可联络的。从这个角度看，验证账户更像是一种事后的纠错机制，而并不能避免用户犯错。那么，怎么降低用户犯错的可能性呢？
可能的解决方案有：
1）增加注册确认界面，降低确认成本。放大“登录身份”信息，让用户无法忽视，并只需点击即可确认。
2）账户未验证时，允许用户修改一次登录身份，并要求输入两次登录信息，在前端验证一致性。
手机 + 验证码登录与第三方登录是目前 App 最为流行的做法，免去了注册过程，改变了账户密码的登录方式。WhatsApp 是最早将手机号码和账户绑定在一起的 App 之一。通过手机号码一键注册/登录是 WhatsApp 获得巨大成功的关键。其创始人 Jan Koum 曾经说到： “有过传统通讯 app 的痛苦体验，再看看如此简洁的界面，你就明白我们的初衷了。只需要短信就能解决的事，我们有什么理由不做呢？”
此外，对于产品而言，通过第三方登录，产品还可以获取用户的个人信息，甚至是好友关系。
iOS 11 为 iCloud 钥匙串进行升级，在原本 Safari 保存和自动填写密码的基础上，也为 App 提供此项功能。在需要帐号密码的页面输入时，系统键盘会显示 🔑 符号，通过 Touch ID 验证后会自动填入，同时该功能还支持匹配提醒，优先为你显示和该应用有关的密码信息，非常方便。如果你完全生活在苹果的生态中，那么你可以使用这一功能来替代 1Password 和 LastPass。
1Password 等密码工具在 iOS 11 也有了更大的可能性，现在可以直接在注册登录表单中调用了。
跳出“如何设计”的思维框架来进一步思考“为什么设计”，不难发现，其实从用户的角度而言，注册登录更像是“为了正常使用产品，而不得不做的一个步骤”。尤其在接触一款新产品时，注册流程都会在一定程度上打击用户的积极性。那么问题来了，是否所有产品都需要注册，才能使用或是正常使用呢？
1）登录才能使用的产品，需要采用“立即注册”的方式，最典型的例如社交应用
2）不需要登录也能开始使用的产品（如浏览内容），可采用“稍后注册”的方式
首先是内容为主的产品：比如微博，知乎，站酷等，无需注册登录便可以浏览，但是回复、收藏、发帖这类操作必须注册或者登录账号；再其次是有同步和备份需求、有用户数据沉淀的工具类产品，比如记事、记账、todo、日历等等。
不过，其实利用苹果的 iCloud Drive 同步功能，大多数工具类应用也可以避免注册登录操作。当然前提是完全生活在苹果的生态中。
3）无需注册就能正常使用的产品，尽量不要要求用户注册。
比如大部分纯粹的工具类应用，比如时钟、计算器等。以及部分没有同步或备份需求的工具类应用，比如说便签、私密相册等。即使是便签与私密相册这类有特殊用户数据沉淀，也可采用密码（数字密码／手势密码）或是指纹识别的方式来保证数据的安全性，避免注册程序破坏用户体验。
此外，有时候限制注册、提高注册难度这类看似对用户不友好的方式，在特殊的情况下也是一种很好的策略。比如早期的知乎、Dribbble 的发帖权限采用的邀请制、还有 B 站的 up 主考试，虎扑的答题考试，这类 UGC 内容较为丰富的产品，通过提高创作权限的门槛，能有效地保证核心用户和内容的质量。同时，用户由此产生的“付出感”，也有利于其对产品及其使用权利的珍惜，进而触发“特权”的感受。
以上是针对注册与登录界面的几个关键问题展开的引申探讨。其实笔者写到一半时，发现注册登录的水特别深，除上述内容之外，还有非常多的场景与细节值得挖掘与思考。不过设计就是如此，很多看起来似乎非常基本的内容，但是背后需要大量的思考和打磨，绝非一句“好看”就算完成。设计的复杂性，也让我始终保持着一颗敬畏之心。说得不好，希望大家多多批评指正，感谢各位。
② 请教高手，网页设计如何让登录和注册让用户登录后变为自己的用户名和退出
这个前端实现就可以了；你设计好登录或者注册后用户登录的效果；前端接受后端传过来的数据；显示到该位置就可以了。
该实现流程；
用户登录-->后台判断用户是否注册--->成功返回用户名(设置cookie或者session)--->显示
---->失败返回错误信息/返回登录页/注册页
③ 求javascript+CSS+Html做的用户注册及登录的两个网页页面的代码
要验证码就要结合后端，纯前端做出来的登录注册都是静态页面
④ web前端的登录界面怎么写，有没有demo包括后台的验证，求教
点击页面左下角的“关于此页”，再展开字段，搜索上一个页面的字段名称，再点击一个按钮查找sql代码，在代码里面找表操作步骤大概是这样。
⑤ Java前端登录后隐藏登录和注册按钮怎么做
可以使用jquery的hide()方法。举个例子，<button id="login" class="login">登录</button>
登录成功之后，使用$("#login").hide();
⑥ web前端如何做注册页面
样式+JS
要不然你怎么做？？？？
⑦ 怎么用flask+mysql来实现一个简单的用户注册和登陆效果的页面
用flask+mysql实现用户的注册和登录：
一个简单的用户注册和登录的页面，就两个部分。
涉及到数据库，存储用户数据（注册），读出用户数据（登录验证）。搞清楚如何用python连接和操作数据库即可，还有了解sql数据库语句，sqlite和mysql差不多的，看几眼多试几下就了解了。
网站程序，前端如何发送表单，后端获取用户发送的请求，和数据库中数据验证是否能够登录，然后登录后如何保存用户登录信息，就是使用的cookie，不过在flask中是session（其实session也是cookie，flask把它封装了下，成了加密的cookie）。
举例如下：
(fn):
@wraps(fn)
defwrapper(*args,**kwds):
user=session.get('logged_in',None)
ifuser:
returnfn(user=user)
else:
returnredirect(url_for('signin',next=request.path))
[email protected]('/home')@authorizedefhome(**kwds):
username=kwds['user']
returnrender_template('index.html',username=username)#加密存储密码_password(password,salt=None):
ifnotsalt:
salt=os.urandom(16).encode('hex')#length32
result=password
foriinrange(3):
result=hashlib.sha256(password+salt).hexdigest()[::2]#length32
returnresult,salt#简单的错误处理classloginError(Exception):
def__init__(self,value):
self.value=value
def__str__(self):
returnrepr(self.value)#注册登录（下面的代码没有实际运行过）#连接数据库我是使用的是mysql.connector#http://dev.mysql.com/downloads/connector/python/#写法和常用的MySQL-python稍有所不同#下面没有连接数据库的代码@app.route('/register/',methods=['GET','POST'])defrequest():
ifrequest.method=='GET':
returnrender_template("register.html")
ifrequest.method=='POST':
#这里最好需要验证用户输入，我就不写了
u=request.form['username']
p,s=encrypt_password(request.form['password'])
g.db.cursor.execute('INSERTINTOusers(name,password,salt)VALUES(%s,%s,%s)',(u,p,s,)
g.db.commit()
returnredirect(url_for('signin'))@app.route('/signin/',methods=['GET','POST'])defsignin():
ifrequest.method=='GET':
referrer=request.args.get('next','/')
returnrender_template("login.html",next=referrer)
ifrequest.method=='POST':
u=request.form['username']
p=request.form['password']
n=request.form['next']
try:
g.db.cursor.execute('SELECT`name`FROMusersWHEREname=%s',(u,))
ifnotg.db.cursor.fetchone():
raiseloginError(u'错误的用户名或者密码!')
g.db.cursor.execute('SELECT`salt`,`password`FROMusersWHEREname=%s',(u,))
salt,password=g.db.cursor.fetchone()
ifencrypt_password(p,salt)[0]==password:
session['logged_in']=u
returnredirect(next)
else:
raiseloginError(u'错误的用户名或者密码!')
exceptloginErrorase:
returnrender_template('login.html',next=next,error=e.value)@app.route('/signout/',methods=['POST'])defsignout():
session.pop('logged_in',None)
returnredirect(url_for('home'))
⑧ web前端的登录界面怎么做
照着设计图做呗，功能那些调后端接口。
⑨ 动态html页面。用html实现注册和登录的一些问题。
登录页面 login.html
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>login</title>
<script>
window.addEventListener('load',function(){
varform=document.forms[0];
form.addEventListener('submit',function(e){
e.preventDefault();
varuserName=form.userName.value;
varpwd=form.pwd.value;
varuserInfo=JSON.parse(localStorage.getItem(userName));
if(userInfo&&userInfo.pwd===pwd)
returnalert('登录成功!');
alert('登录失败请先注册!');
});
document.getElementsByTagName('button')[0].addEventListener('click',function(e){
e.preventDefault();
location.href='regist.html';
});
});
</script>
</head>
<body>
<formaction="#">
<inputname="userName"type="text"placeholder="账户名"required>
<inputname="pwd"type="password"placeholder="密码"required>
<inputtype="submit"value="登录">
<button>注册</button>
</form>
</body>
</html>
注册页面 regist.html
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>regist</title>
<script>
window.addEventListener('load',function(){
varform=document.forms[0];
vargetUserInfo=function(){
varvalue={};
for(vari=0,len=form.elements.length;i<len;i++){
varel=form.elements[i];
if(/text|password/.test(el.type)){
value[el.name]=el.value;
}
}
returnvalue;
};
form.addEventListener('submit',function(e){
e.preventDefault();
varuserInfo=getUserInfo();
localStorage.setItem(userInfo.userName,JSON.stringify(userInfo));
alert('注册成功!');
});
document.getElementsByTagName('button')[0].addEventListener('click',function(e){
e.preventDefault();
varvalue=getUserInfo();
varout=[];
for(varnameinvalue)
out.push(name+'='+value[name]);
alert(out.join(','));
});
});
</script>
</head>
<body>
<formaction="#">
<inputname="userName"type="text"placeholder="账户名"required>
<inputname="pwd"type="password"placeholder="密码"required>
<inputname="confirmPwd"type="password"placeholder="确认密码"required>
<inputtype="submit"value="注册">
<button>验证</button>
</form>
</body>
</html>
⑩ 前端怎么实现登录和注册
登录注册设计到数据储存和读取，需要后端代码的支持下才能前端