很多時候，對于產品經理來說一個靜態的原型圖是沒有任何說服力的。如果是一個移動端的產品經理，在框架圖做完后，就能直接拿出產品進行動態演示，這既節省了溝通和之后開發的成本，又使自己的說服力大大增加。那作為一個產品經理，如何在剛制定完框架圖或者視覺效果圖時，就能通過手機動態演示app，達到產品上線時的大部分效果呢？方式千萬種，而你——應該選擇最適合你的那一個。

Axure能做的事：流程圖：簡化版Visio，可實現大部分Visio功能，可隨時發布到Internet，輸入網址即可向他人展示。

框架圖：不想多說，暴力。

圖形處理：各種圖形處理工具，是的，新版本居然有鋼筆。

網頁制作：不需要懂Html代碼可以制作各種網頁交互效果，以本文為例。

WebAPP制作：想知道？看下面。

產品需求文檔：沒有不可能。

能交互的手機登錄界面

如果是一個靜態的原型圖，登陸界面設計只能體現出所有元素內容和基本框架風格，但是對于用戶的使用體驗是一無所知。可如果等開發人員制作出來后太驗證效果也為時已晚，所以我們需要一個既能檢驗真實效果又便捷的開發工具：

上圖即是我制作的手機登錄界面，當然視覺效果一般般，因為我主要測試的是整個登錄流程的交互情況。而在整個程序的設計你可以不需要一丁點的html知識，卻實現了自動生成驗證碼、所有字段邏輯判斷、用戶輸入時改變交互等。是的，就像PPT，就像易企秀一樣，按照軟件的邏輯，制作出屬于你的WebAPP。

能體驗才是王道

是的，這個頁面就像真實的登錄頁面一樣，所有的元素都是需要驗證才能通過的，比如Email，如果用戶輸入的不是一個郵箱地址，點擊注冊時就會出錯。

自動檢測字段內容

在這里我對所有字段的設置如下：用戶名：少于3個字符出現提示

Email：沒有@和. 提示

密碼：少于3個字符出現提示，密碼不一致提示

驗證碼：輸入不正確提示

立即注冊：只有當所有字段填寫正確，才變為藍色。

體驗了，才知道哪里不好

如果不仔細的人，不會知道當我們用手機填寫注冊信息時，彈出的輸入法會覆蓋掉底下半個屏幕，所以當我們的輸入字段在屏幕中間時，很有可能被輸入法覆蓋掉。

于是我優化了交互體驗，當用戶輸入信息時，整個注冊界面會自動上移。

點擊輸入時自動上移

越真實，才越可靠

為了更趨近于真實的注冊界面，我采用了隨機生成驗證碼的方式，每當網頁被加載時，系統會自動生成4位數字的驗證碼。

如果你會的多一點

將制作好的頁面發到到Axshare固然很好，其他人只需點擊網址就可以看見你制作的頁面了。可是我更推薦生成Html文檔，然后上傳到自己的服務器中。因為生成之后，還可以自己手動對網頁代碼進行加工，像我制作的這樣，當你點擊下面的鏈接時，自動判別查看的設備是手機還是電腦，然后分別進入不同的頁面，這一點是Axshare永遠無法做到的。

如果你喜歡，歡迎向我索要源碼。

總結

以上是生活随笔為你收集整理的axure手机页面设计说明_产品经理原型演示——Axure制作手机登陆界面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。