• <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
  • <pre id="gvoe3"></pre>
    <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

  • <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">
      axure商城

      用Axure制作網站注冊表單原型圖文教程

      注冊功能在任何產品中都必不可少,原型設計過程中都需要制作注冊頁面。本文通過實例圖文教程,全面展現了用axure制作注冊頁面的過程。同時實現了注冊過程中的常用交互動作。對于學習axure的朋友,本教程非常直觀。本文轉載自:http://www.jianshu.com/p/5dbe573b8990#?如有疑問可以去原作者頁面留言咨詢。轉載請保留原文鏈接,尊重原創!下面進入正題:

      一般注冊過程包括以下步驟:

      1.用戶按照提示填寫表單。

      2.用戶在填寫表單的時候提示是正確否輸入了內容,如果沒有,提示用戶。

      3.用戶提交表單,所有項是否都正確,如果出錯,提示哪項有錯誤。

      4.用戶成功提交表單或者取消表單。

      在填寫表單過程中,常見驗證方法有如下幾種:

      1.用戶是否在注冊的用戶名或ID中使用了非法字符。

      2.用戶是否輸入了內容。

      3.兩次輸入的密碼是否一致。

      4.是否是合格的Email地址。

      5.長度是否在6-12個字符之間。

      下面我們用Axure7.0來完成通用注冊的設計,以下包括最基本的輸入框變化和提示文字變化。

      一.表單的布局

      拖拽7個文本標簽,然后給它們命名為如圖所示。

      全部選中,點擊右對齊使得他們都對其,再點擊垂直分布,使他們的上下間距相同。

      拖拽5個文本框,分別對應如下項目,然后全選,選擇左對齊。

      選中每行的文本和文本框選擇上下居中,使每行的都對其。

      為性別添加相應輸入部件,用兩個單選按鈕,對齊。姓名為男和女。

      選中它們,右鍵,選擇指定單選按鈕組,然后在彈出的框中輸入組名性別,這樣就實現了單選。

      為所在地添加一個下拉列表部件。然后編輯列表項,為列表條添加選項。

      再添加一個按鈕部件,命名為:?立即注冊

      二.制作輸入框變化框邊

      當我們填寫某個文本框輸入框時,輸入框會被高光顯示,然后右側提示用戶輸入什么。如果輸入的不符合要求,右側會提示。

      選中5個文本輸入框,右鍵,選擇隱藏邊框。(最后會說明為什么隱藏)

      拖拽一個動態面板,命名為郵箱。再添加一個狀態,分別命名為輸入和未輸入。

      再輸入狀態下添加兩個矩形,邊框顏色和填充顏色如圖。第二個矩形是提示文字。

      矩形大小比文本框多出2個像素大小,為了切換狀態時完全覆蓋最初的文本框。

      把最先放上去的那個文本輸入框置于頂層。

      切換到未輸入狀態,把輸入狀態下第一個矩形復制到這里,再把邊框顏色改為默認的灰色。

      修改面板順序,把未輸入狀態放在前面。

      面板順序

      點擊預覽,界面如下圖所示。

      三.讓邊框動起來

      為我的郵箱輸入框添加如下狀態,使得鼠標移動到那里未輸入狀態,不在那里為未輸入狀態。

      1

      生成后看到如下界面:

      四.添加其他輸入框和提示

      這部需要把郵箱那部分制作好的動態面板復制到其他輸入項中。

      復制到其他選項,注意調整坐標。

      修改其他動態面板名字。

      需改其他動態面板輸入狀態下的提示文字。

      1

      把動態面板都至于底層,輸入框置于頂層。

      分別添加狀態,與郵箱添加狀態時一樣。

      五.完成效果

      在此我們將最開始的文本輸入框隱藏,代替它的的動態面板的未輸入狀態,邊框為黑色,在鼠標移動后就變為輸入狀態,顯示為藍色和提示文字。這樣就完成了注冊設計中的邊框效果和提示文字。還有驗證輸入,驗證密碼,處理驗證碼等以后再做總結。

      給TA買糖
      共{{data.count}}人
      人已贊賞
      高級教程

      用axure實現圖片輪播最簡單的辦法

      2015-7-27 22:54:11

      高級教程

      Axure RP 8.0beta初體驗 更快更爽的制作原型

      2015-8-17 12:24:02

      axure商城
      0 條回復 A文章作者 M管理員
        暫無討論,說說你的看法吧
      ?
      個人中心
      購物車
      優惠劵
      今日簽到
      有新私信 私信列表
      搜索
      俄罗斯videoxxxoo
    1. <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
    2. <pre id="gvoe3"></pre>
      <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

    3. <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">