整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄頁面</title>
/*總體的樣式*/
<style>
/*盒子樣式*/
#box{
width: 350px; //寬
height: 450px; //高
border: 1px solid black; //邊框
border-radius: 10px; //邊框弧度
font-family: 黑體; //字體
letter-spacing:8px; //段間距
word-spacing: 10px; //字間距
line-height: 40px; //行高
font-size: 18px; //字大小
padding: 20px; //內邊框
}
/*給'注冊'賦予樣式*/
.register{
width:280px ; //寬
height: 50px; //高
background-color: skyblue; //背景顏色
border-radius: 10px; //邊框弧度
}
/*將所有邊框都改變*/
*{
border-radius: 5px; 邊框弧度
}
/*使用class選擇器，賦予number寬高和邊框*/
.number{
width: 185px; //寬
height: 27px; //高
border-width: 1px; //邊框寬度
}
/*id選擇器*/
#two{
width: 55px; //寬
border-width: 1px; 邊框寬度
}
/*id選擇器*/
#phone{
width: 103px; //寬
}
/*class 選擇器*/
.boxs{
zoom: 75%; //清除浮動
color: darkgray; //顏色
}
/*class選擇器*/
.box_a{
width: 50px; //寬
height: 50px; //高
background-image: url("../image/04.jpg "); //背景圖片
background-repeat: no-repeat; // 是否平鋪
background-size: 50px 25px; //背景尺寸
position: relative; //定位 相對定位
left: 310px; //定位后左移
bottom: 32px; //定位后下移
}
</style>
</head>
<body>
<div id="box">
<h1>請注冊</h1>
<p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
<label for="name">用戶名</label>
<input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
<label for="phone">手機號</label>
<select name="" id="two" class="number">
<optgroup>
<option style="" class="">+86</option>
</optgroup>
</select>
<input type="text" placeholder="請輸入手機號" id="phone" class="number"> <br>
<label for="mima">密?碼</label>
<input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
<label for="mima">驗證碼</label>
<input type="password" placeholder="請輸入驗證碼" id="is" class="number">
<div class="box_a"></div>
<div class="boxs">
<input type="radio" id="" class="accept">閱讀并接受協議<br>
</div>
<input type="submit" value="注冊" class="register" >
</form>
</div>
</body>
</html>
在這里插入圖片描述輯導讀：移動端產品經理經常會需要繪制APP各頁面原型圖，那么在繪制頁面原型圖時，我們需要注意什么？作者與大家分享了一個使用Axure制作實用的驗證碼登錄頁面原型，快來一起看一下吧。
點擊獲取驗證碼按鈕時手機頂端定時彈出隨機驗證碼
點擊獲取驗證碼按鈕后，按鈕顯示倒計時，倒計時自60開始，每秒向后-1，倒計時為0時可手動重新觸發
彈出驗證碼彈窗后，可點擊復制驗證碼按鈕，點擊后驗證碼自動按順序加載至手機頁面驗證碼文本框內，完成加載后跳轉至首頁
原型演示地址：https://gduqir.axshare.com
手動制作或挑選使用手機背景。以下為小編手動繪制手機背景：
繪制任意跳轉首頁面，以下為小編手動繪制首頁：
完成準備后將首頁置于空白頁下方。
選擇兩個文本標簽，輸入“輸入驗證碼”、“驗證碼已發送至手機+86 185????9905”等文字，可根據需要調整文字內容、大小，布局，色彩等。
文字下方放置6個大小相同的文本框及橫線（文本框需分別命名，以便交互時區分）。示例如下：
制作一個驗證碼彈窗，需注意驗證碼6個數字部分需加不同矩形框且分別命名（以便交互時區分及隨機抽取數字使用）。示例如下：
給驗證碼彈窗“復制驗證碼”按鈕制作交互（文1等名稱是手機背景頁面六個文本框的命名，該步驟是為了將驗證碼彈窗內數字驗證碼獲取至手機頁面文本框內，等待是為了有延遲效果，設置頁面狀態是為了六個文本框驗證碼都加載完成后將手機首頁置頂顯示），交互如下：
設置全局變量random_str，該步驟是為了等會驗證碼彈窗自動抽取數字。
點擊驗證碼彈窗，給6個驗證碼框增加交互動作，交互動作含義為在頁面載入時random_str是0123456789，然后6個驗證碼文本框分別抽取其中1位數字。抽取的變量為[[random_str.substr(random_str.length*Math.random(),1)]]。
選擇一個按鈕輸入“獲取驗證碼”文字調整大小后，將模塊設置為動態面板，在動態面板內增加一個state2，將按鈕復制粘貼至state2并修改文字為60（本文中state頁面名稱錯誤，理解用意即可）。
在“獲取驗證碼”按鈕設置交互動作，該交互是為了點擊獲取驗證碼按鈕后彈出驗證碼彈窗，并切換動態面板至倒計時頁面，交互如下：
在“60”state頁設置交互動作，該交互動作是為了讓60每秒向后倒計時-1，=0時文本變為重新獲取，點擊重新獲取后文字變60繼續循環。
載入時情形1為：
載入時情形2為：
單擊時情形1為：
完成以上操作后，將手機首頁輸入驗證碼文本框框線取消，即可完成操作，快來一起試試吧！
本文由 @哪有那么多計較 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
章對登錄方式進行簡單的分析，希望能夠加深你對登錄方式的進一步認知。
如今手機一打開，看一下自己的軟件商城，各式各樣各種種類的APP琳瑯滿目，讓人應接不暇，但是作為使用APP的用戶的角度來看，絕大多數人注意到的是APP的內容，忽略了各式各種種類的APP其實在登錄方式這一塊也是有著明顯的區別。登錄注冊方式的設計在一定程度上面也會影響到往后用戶的體驗以及反映公司要獲取用戶信息資料的深淺程度。
因此，如何為自己的APP定位一下用什么登錄方式進行登錄呢？為什么用這樣的方式登錄呢？這種登錄方式對用戶以及公司各能帶來什么好處？…….要解決以上種種問題，就得先來分析登錄功能這個的價值。
我們從三個層面行進登錄方式的分析：
用戶需要一個特定的ID，為其記錄自己存儲的資料，使用的進度，收藏的功能、
用戶希望登錄注冊之后，產品可以給用戶推薦更加人性化的服務，例如根據自己在平臺瀏覽過的東西，根據大數據給用戶推送自己需要的，想要尋找的產品
在社交類的APP里面，用戶更加希望自己可以在合理的情況下，獲取其他線上好友的真實資料，以便進一步的交往。。
便于跨設備同步數據，也便于在同一個設備中隨意切換不同賬戶，并且保持賬戶里面儲存的數據狀態
有社交功能的產品在編寫UGC時，用戶使用電商產品下單購買時，也需要一個登錄注冊的方式來保證UGC的內容的辨識度（即這個內容是由”我“產生的），以及賬號的安全性
有應用內付費，VIP會員增值功能的產品，注冊登錄可以確保用戶的權益
對于一些像理財，外賣，電商之類的產品，需要詳細清楚自己用戶的詳細資料，如真實姓名，手機號碼甚至是具體地址等，注冊完成之后便于推進運營的數據，以及指導運營的大致方向：如獲取了手機號碼之后可以在各大節假日或者公司周年慶的時候給用戶發各種營銷短信從而起到吸引用戶的效果。
總之一句話，在設計具體功能的時候，產品經理應該先從上面三個層面進行考慮，明確自己的產品的定位什么，為什么消費者服務，他們這些人的需求點，痛點是什么，以及如何讓這個設計出來的功能可以更好的服務于公司的利益層面，為公司在合理的條件下獲取到更有用的信息。
我來說說現階段比較常用的四種登錄方式以及他們各自的優缺點：
優勢：移動端基本采用的都是這一種方式，可以掌握用戶的真實信息，有效增強用戶管理，對以后的用戶運營工作很有幫助，就像我上面說的一樣，可以在各大節假日或者公司周年慶的時候，根據運營的實際情況，第一時間給用戶發送短信，增加用戶的參與度以及轉化率：甚至對于一些較少上線的用戶，也可以通過給用戶發送短信吸引這些用戶的回歸，產生一種：回來看看這款產品有沒有發生新變化的想法
缺點：用戶在采用這種登錄方式時候，一般是五步走：
輸入自己的手機號碼–獲取驗證碼–切換屏幕查看驗證碼–切換屏幕回來–手動輸入驗證碼–登錄
在這個登錄過程中，極容易產生反感情緒，會覺得來回切換很麻煩。
好在現在很多APP都是只需要登錄一次，就長時間登陸，不需要頻繁操作，用戶的反感度就會減輕不少。
評價：該登錄方式可以掌握用戶真實信息，增強用戶管理，易于推進運營的工作，適合于外賣，電商，理財類的產品。
該圖截至于小紅書APP，可以看出小紅書這邊就是主推手機號碼登錄，次推密碼登錄。大家可以多去下載幾個電商類的APP，自行體驗一下登錄方式的主推次推分別是什么。
優勢：相對于手機驗證碼登錄來說，第三方登錄方式無疑是更加方便，最省用戶時間的一種登錄方式，且這種登錄方式將有效性，安全性的問題交給第三方，不需要在這一塊多花力氣，有一種借力的感覺
缺點：無法獲得有價值的用戶信息，同時無法構建用戶的管理體系，這種登錄方式最多就是獲取用戶在第三方的用戶名，頭像，性別等等比較淺層的信息，至于像用戶在第三方更深入的資料，一般都是獲取不到的。
所以針對這種情況，一般該類產品會結合自身的產品屬性以及運營的要求，在用戶使用第三方登錄的時候，會設置一個場景，去引導用戶在頁面里面行進手機號碼的綁定，如：
第三方登錄–首頁引導用戶新手大禮包的獲取–新手大禮包頁面–綁定手機號碼
評價：第三方登錄更加方便便捷，而且第三方大多數用戶都會使用到，沒有過多限制，但是能獲取的用戶東西往往比較局限，淺面。如果需要更多的東西，還是需要引導用戶去進行手機號碼綁定操作的。這種登錄方式更加適合安全性，保密性不需要太強的音樂類，視頻類產品，或者一些小游戲類產品。
這邊我列舉的是愛奇藝的一個截圖，可以看到，他其他登錄方式特別多，有6種第三方登錄的模式可夠選擇。
賬號密碼登錄應該算是一種比較古老的登錄方式了，它從在PC端的時候就已經跟郵箱賬號登錄一起存在了，現在的移動端產品正有一種慢慢弱化掉賬號密碼登錄這一種方式，成為了次推的登錄方式了。
優點：當用戶手機不在身邊，或者手機沒電的時候，是無法獲取驗證碼信息的，這種情況下賬號密碼登錄就會顯得極為好用了。
缺點：移動端比較少出現賬號注冊，賬號注冊方式向對比與之前倆種更為麻煩。而且現在隨著共享經濟的流行，共享充電寶也逐漸出現在大眾的視野里面，這種手機沒電的尷尬情況也會逐漸減少，這種登錄方式也會慢慢淡出人們的視線吧。
評價：賬號密碼登錄從在PC端登錄方式的主流慢慢變成移動端登錄的次推。但在一定情況下還是有它存在的價值。
其實現在賬號登錄真的是很少很少用人再用了，除了像網易之類的從做郵箱起步的有自己用戶的大基數的公司在使用之外，他也是慢慢淡出了人們的視線。這種登錄方式一般不太適合國人的使用習慣，體驗比較差，而外國人就有使用郵箱登錄的習慣。當然，一些商務類的APP，用戶群體鎖定為職場人士，這些人就會有使用郵箱的習慣。
評價：使用這種方式登錄時要重點側重用戶習慣，確定好產品的目標受眾，更適合像商務型APP，學習型APP的使用。
語音登錄，手勢登錄，指紋登錄……就不一一展開了。有興趣的朋友可以多把弄一些比較新穎的APP，看看別人的產品設計。
只有充分了解到在什么情況下面會觸發登錄，產品經理才能更好的做好一系列的登錄流程，在提供的PRD文檔中才不會寫漏，被程序員懟…..耐心，仔細，邏輯性也是產品經理必備的素質。我將簡單的在下面幾點新人們介紹一下有什么場景：
解釋：打開APP時必須登錄，不然沒法進入App
場景：
解釋：進入APP后，操作某種功能即彈出需要登錄的頁面，不登陸即無法在進行下一步的操作
場景：獲取本身賬號存儲的數據或者像系統輸入數據的時候，這類操作就會觸發登錄。
這種觸發登錄的時機的例子實在太多太多，我就不一一拿出來說明了。有興趣的人可以隨便打開一個自己的APP，退出登錄界面再點進去，操作幾遍，留意一下這些時機會在哪里觸發。我推薦幾個APP給你們體驗一下。
……
嗯，在這一點我想補充一句話，就是一般登錄成功之后，我們的產品APP必須遵循“從哪里來就到哪里去”的原則，即用戶是在哪個頁面引導到登錄界面，那么登錄成功之后應該跳轉的也是用戶過來的界面。
雖然市場上很多APP都是登錄成功后直接跳轉到個人中心頁面，但是我覺得一切還是要以用戶初心為標準，讓他哪里來的，就回哪里去。
今天就更到這里，下次來談一下注冊應該注意的事項。
本文由 @nosomebody 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自PEXELS，基于CC0協議
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
