① 注冊與登錄界面的設計思考
登錄和注冊過程往往是產品和用戶的 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>
⑩ 前端怎麼實現登錄和注冊
登錄注冊設計到數據儲存和讀取，需要後端代碼的支持下才能前端