Axure教程：制作漸變色用戶登錄交互_第1頁
Axure教程：制作漸變色用戶登錄交互_第2頁
Axure教程：制作漸變色用戶登錄交互_第3頁
Axure教程：制作漸變色用戶登錄交互_第4頁
Axure教程：制作漸變色用戶登錄交互_第5頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

Axure教程：制作漸變色用戶登錄交互在系統(tǒng)產品設計過程登錄窗口的交互設計是不可少步驟，今天符號給新人分享一個用Axure制作一個用戶登錄界面的教程。先預覽一下最終實現的效果：本教程案例主要使用到的元件有：矩形文本輸入框動態(tài)面板按鈕元件元件漸變操作流程：一、制作登錄背景拖入一個矩形做為登錄的背景設置尺寸1920×1080，如下圖：設置背景顏色，這邊使用到了顏色漸變工具，顏色可以按需要設置，如下圖：給背景設置鼠標移入交互。這邊也是用到了漸變。原理就是鼠標懸停后，改變背景的顏色。設置頁面載入時，背景大小。如下圖，分別設置背景的對應的寬高，這邊使用到[[Window.width]]和[[Window.height]]。主要功能是獲取當前窗口寬高，這樣在小點的屏幕小預覽就不會有滾動條了。到此，登錄背景就完成了。二、用戶名和密碼框設計用戶名和密碼框由三個元件組成，矩形，文本輸入框，icon。我們可以先做好用戶名的，密碼原型一樣。給矩形框設置選中交互、邊框顏色、可見邊框、線段顏色，可以按需要設置。拖入一個文本輸入框，命名為賬戶，給這個文本框設置獲取焦點交互。當獲取到焦點時，也就是輸入選中進入切換時，選中(ture)賬號和賬號icon（icon可在Iconfont獲取）。設置失去焦點時，將賬號和賬號icon設置為false。到這邊用戶名輸入相關交互做好了。這時可以將其組合起來。復制一個密碼組合，進行密碼框交互修改。三、登錄按鈕判斷制作用戶登錄會有很多種情況，可能用戶名和密碼都不正確?；蛴幸粋€沒填寫我們希望在提示錯誤信息時，能在對應的項目中做動效。具體交互如下圖：第一個case意思是，如果用戶名和密碼都為fuhao。點擊按鈕時，提示信息正確。第二個case2意思是，如果用戶名為空時。點擊按鈕時，提示用戶名不能為空，并選中用戶矩形為ture。第三個case3意思是，如果密碼為空時。點擊按鈕時，提示密

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論