整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
<!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協議。
戶在網站中的活躍程度是評價網站受歡迎程度的重要標準，正如傳統商店注重門面設計的裝飾一樣，正確設計的門面可以為商店帶來大量的流量，吸引更多的顧客。門面就像我們自己的臉，而網站的登錄頁面就是網站的一張臉，這一點尤為重要。
目前，許多大型網站都將登錄頁面與網站主頁一起設計。由此，我們可以看出登錄頁面對網站的重要性。一個優秀的登錄頁面不僅可以提高網站產品的質量，還可以為產品增添獨特的氣質。登錄頁面也是網站情感的升華設計，可以提升用戶對網站的體驗，讓網站更貼近用戶。那么，登錄頁面的設計如何為網站贏得更多用戶呢？
首先，優雅得體的登錄頁面設計。我們以Tumblr為例。作為light博客的創始人，它為用戶帶來了全新的視覺體驗。因為它的登錄頁面沒有太多復雜的設計，所以它在視覺上很簡單，給人優雅和體面的感覺。它的設計目的是讓用戶專注于登錄，使登錄過程更加順暢，給用戶一個非常好的體驗。
第二，精致而富有質感的登錄頁面設計。對于這種設計，我們可以參考icloud。Icloud是蘋果提供的同步服務，可以免費為用戶提供5g存儲空間。你應該知道，icloud登錄頁面的設計反映了蘋果對細節的嚴格要求。無論是精細的紋理還是細微的陰影，都能反映出細膩的紋理，完美地反映細節。金屬光澤可隨鼠標指針移動，底部圖標可適應分辨率的變化，確保用戶對網站的體驗。精致而有質感的登錄頁面給用戶帶來無與倫比的享受，對網站更有利。因為從細節開始，它可以為用戶提供一個充滿驚喜的頁面。
第三，你可以用一些小而新鮮的插圖來裝飾。設計師們都知道，插圖的表現力在網站建設中是非常明顯的，與藝術密切相關。當插圖與網站建設相結合時，它將使網站更具吸引力和表現力。因此，許多設計師開始在網站建設中使用插圖，尤其是登錄頁面，這將使登錄頁面更加生動和溫暖。一些小而新鮮的插圖可以為登錄頁面添加很多顏色，吸引用戶的注意力，使登錄頁面更加柔軟友好。就像163郵箱的登錄頁面一樣，使用帶有故事的大型插圖喚起了一代人的記憶，引起了用戶的共鳴，讓用戶找到了自己的目的地。
第四，人文情懷的傳達，品牌傳播的設計。其實，網站的建設應該以人為本，不僅要保證產品的質量，還要提高藝術水平。登錄頁面設計是體現人文情懷的最佳頁面。例如，在QQ郵箱的登錄頁面上，每次登錄都會看到不同的內容，有時是海子的詩，有時是歌詞。設計方法非常簡單，主要內容到位，給用戶更清晰的引導，在每一個細節的設計中都體現人文情懷。
第五，大型登錄框。登錄框的設計比傳統的登錄框更大，給用戶非常舒適的感覺，在輸入過程中也更愉悅。
第六，簡單但不簡單的設計。網站的設計風格趨于簡潔。登錄頁面的設計使用了大量空白來突出顯示輸入框，并將用戶的注意力集中在登錄上。簡單的設計反映出它并不簡單。
了解更多
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
