Axure 教程:簡單四步設計一個PC登錄窗口
之前一直發做效果的教程,今天想發一篇關于畫交互原型的文章,換換口味。如果大家有什么好的建議或者想看什么類型的,可以私信我,可以在下面投票。
下面看一下今天要講的內容:
是不是看起來很簡單,下面我們來開始制作原型…
一、準備元件
1.打開 Axure 新建文件,按如圖的樣式,拉入矩形、文本框、文本,如以下位置擺放,右上角為點擊切換到微信掃碼登錄的入口 ;
圖里大致尺寸大?。?/p>
- 背景框:w:360 px ,h:395 px ;
- 輸入框、按鈕:w:320 px ,h:40 px ;
- 文本大?。?2 px ,14 px ,18 px ;
2.繼續制作 “ 微信掃碼登錄 ” ,該頁面比較簡單,右上角也是點擊切換到賬號密碼登錄的入口 ;
二、設置交互
1.文本框內的文字設置在右側:屬性 – 提示文字 – 輸入 “ 請輸入密碼 ” / “ 請輸入密碼 ” ;
2.兩個文本外框右鍵點擊 – 交互樣式設置 – 選中 – 線段色值 #333333 ;
3.點擊 “ 請輸入手機號碼 ” 文本框時,設置獲取焦點和失去焦點時的效果(以下加圖);
4.登錄按鈕右鍵點擊 – 交互樣式 – 鼠標按下時 – 填充色值 #000000 ( 以下 “ 立即注冊 ” 按鈕類似 );
5.“ 忘記密碼 ”右鍵點擊 – 交互樣式 – 鼠標懸停時 – 字體色值 #333333 ;
6.微信掃碼登錄的界面沒有任何效果,不用做任何設計。
三、設置交互效果
1.拉入一個動態面板,將 “ 賬號密碼登錄 ” / “ 微信掃碼登錄 ” 放入動態面板里面,“ 賬號密碼登錄 ” 放在頂部,如圖:
2.在 “ 賬號密碼登錄 ” 的右上角按鈕上設置效果,如圖( “ 微信掃碼登錄 ” 的按鈕也一樣 ):
3.這樣一個簡單的登錄窗口就完成了。
現在一個簡單的界面就做好了,但要考慮到界面在載入時,同時獲取到輸入框的焦點,再樣在體驗上能夠增加好感度,下面開始制作…
四、進階
1.給 “ 賬號密碼登錄 ” 里的 “ 請輸入手機號碼 ” 起一個名稱(隨意),然后在動態面板以外的空白處點擊屬性 – 頁面載入時 – 設置焦點 –? “ 請輸入手機號碼 ” 輸入框,如圖:
2.在 “ 微信掃碼登錄 ” 頁面,右上角的點擊按鈕效果里,也加入點擊時 -設置焦點 –?“ 請輸入手機號碼 ” 輸入框,如圖:
3.這樣所有的效果就都做好了,可以看一下以下效果:
以上就是所有內容,希望大家喜歡,如果有什么好的建議或方法,歡迎下方留言
本文由 @李桂東 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自 Unsplash ,基于 CC0 協議
上面一句話說的是我自己哦!
交互挺簡潔的,比我做的簡潔很多。
有些看似復雜的交互其實用不到那么多用例,多個動態模板之間的調動也盡量不使用,變更模板狀態就好了
都是互相學習哈哈,可能跟自身工作上有關系,我是盡量能在一個頁面完成的就在一個頁面完成;效果已經使用得比較熟練了,做起來不用畫多少時間。
一個問題:一個頁面上有多個按鈕,需要做蠻多彈出框或者確認框的交互,會顯得整個頁面很擠(axure編輯時),這點請問你是怎么處理的呢
點擊該動態面板,然后頁面右下角會看到各個層的元件,雙擊進入修改即可。
而且我自己做的,我知道這些東西在哪里找,不會亂
所以說,頁面上的彈出框遮擋問題是沒法解決的。但是可以通過將所有彈出框化整為一個動態面板,方便操作。是這個意思對嗎?
目前我知道的就兩種方式,一種放最頂層隱藏起來,設置顯示/隱藏即可;一種是放最底層,設置置頂/置底即可。
感謝交流! ??
互相學習
阿里云登錄既視感
最近公司做云平臺,這是我做的一個登錄窗口