Axure RP基礎篇:簡易登錄窗口
前言
本文將介紹如何使用Axure RP來制作一個簡易登錄窗口的原型,與所有的Axure RP初學者共勉。最終的原型圖將如下圖所示:
?
創建如圖所示的原型,可以簡單的分為兩個部分: 下文將按部分詳細介紹。 首先我們需要一個裝飾的背景,本文選用矩形面板,其圖標如下,將其拖入主頁: 拉伸至合適大小,并填充好顏色,本文選用灰色: 然后,需要三個部件來顯示初始提示信息,分別為“登錄窗口”,“用戶名:”,“密碼:”,本文選用文本面板,其圖標如下: 創建時可只拖入一次,剩下兩個用ctrl+c,然后ctrl+v來復制粘貼即可。 調整好文本面板長度和字體大小(文本面板的寬度是隨著字體大小自動變化的): 將登錄窗口的文本面板對應的命名為:“logInfo”: 筆者建議初學者養成設置標簽名的習慣,標簽名作為唯一標識部件的名稱,在之后的交互定義中起到變量名的作用。 完成后拖動三個文本面板至矩形上,并調整好位置: 最后,我們還需要兩個文本輸入框,一個登錄的按鈕,本文分別選用文本框,和按鈕,如下圖所示: 操作和前面三個文本面板相似,不作贅敘。將兩個文本輸入框分別命名為“userName”,“password”,登錄按鈕為“submitButton”。 得到如下圖: 恭喜你,到這一步,你已經完成了基本界面的搭建。怎么樣?是不是很簡單?:) 接下來我們將看到,如何實現基本的登錄交互。 當對Axure RP稍微熟練了之后,其實可以憑借下圖,就能了解定義了哪些交互: 可以看到,本文的交互定義都集中在登錄按鈕點擊時上??偣灿腥齻€用例,分別為用例1,2,3,定義了三種輸入情況: 用例的優先級為從上到下依次減弱。 下面將選用例1作為例子看看如何實現。 實現也分為兩步。 鼠標左鍵單擊“登錄”按鈕,右邊會出現“OnClick(點擊時)”,左鍵雙擊之,將會彈出如下窗口: 選擇“添加條件”,并在新彈出來的窗口中,按下圖所示添加條件: 確保無誤后單擊確定。 上一步按確認后將得到如下圖所示,請選擇圖中紅箭頭所指: 然后在新彈出來的窗口中按下圖所示結果編輯: 確認無誤單擊確認,然后再確認。Voila! 按照上面所示方法,添加剩下兩個用例即可。 完成后你應該有了如本文開篇所示,按下F5生成原型,并用你最喜歡的瀏覽器打開,是不是有些許的滿足感? 作者:游某
另外,注明一下,筆者所用工具為:
第一步:搭建簡易登錄窗口界面
第二步:定義交互行為
第一步添加條件:
第二步添加符合條件的結果:
轉自:?Axure RP基礎篇:簡易登錄窗口
兄得,你是用洛基亞截得圖嗎?
圖片真的是醉了。。。
。。。。圖能清晰點嗎。看不到俄
為什么我的loginfo信息在矩形的中心地方顯示?。。?!
沒有在登錄窗口個地方顯示
后來我加了一個動態面板,用了三個狀態。。。
請問在上述第二步:添加符合的條件結果中,Axure7點擊設置變量值,沒有跳出最后圖片的窗口,怎么回事?。?/p>
同樣 7.0沒彈出