Axure RP基礎篇:簡易登錄窗口

10 評論 70684 瀏覽 38 收藏 8 分鐘

前言

本文將介紹如何使用Axure RP來制作一個簡易登錄窗口的原型,與所有的Axure RP初學者共勉。最終的原型圖將如下圖所示:

?

創建如圖所示的原型,可以簡單的分為兩個部分:

  1. 搭建簡易登錄窗口界面,
  2. 定義交互行為。

下文將按部分詳細介紹。
另外,注明一下,筆者所用工具為:

  1. Axure RP 6.5 + 漢化包

第一步:搭建簡易登錄窗口界面

首先我們需要一個裝飾的背景,本文選用矩形面板,其圖標如下,將其拖入主頁:

juxing

拉伸至合適大小,并填充好顏色,本文選用灰色:

juxingzhuangshimianbantianchong2juxingzhuangshimianbantianchong

然后,需要三個部件來顯示初始提示信息,分別為“登錄窗口”,“用戶名:”,“密碼:”,本文選用文本面板,其圖標如下:

wenbenmianban

創建時可只拖入一次,剩下兩個用ctrl+c,然后ctrl+v來復制粘貼即可。

denglusangewenbenmianban

調整好文本面板長度和字體大小(文本面板的寬度是隨著字體大小自動變化的):

denglusangewenbenmianbanbuchongxinxi

將登錄窗口的文本面板對應的命名為:“logInfo”:

logInfo?

筆者建議初學者養成設置標簽名的習慣,標簽名作為唯一標識部件的名稱,在之后的交互定義中起到變量名的作用。

完成后拖動三個文本面板至矩形上,并調整好位置:

tuodongwenbendaozhuangshijuxing

最后,我們還需要兩個文本輸入框,一個登錄的按鈕,本文分別選用文本框,和按鈕,如下圖所示:

wenbenkuanganniu

操作和前面三個文本面板相似,不作贅敘。將兩個文本輸入框分別命名為“userName”,“password”,登錄按鈕為“submitButton”。

?userName

password

submitButton

得到如下圖:

dengluchuangkouwujiaohu

恭喜你,到這一步,你已經完成了基本界面的搭建。怎么樣?是不是很簡單?:)

接下來我們將看到,如何實現基本的登錄交互。

第二步:定義交互行為

當對Axure RP稍微熟練了之后,其實可以憑借下圖,就能了解定義了哪些交互:

submitButtonjiaohu

可以看到,本文的交互定義都集中在登錄按鈕點擊時上??偣灿腥齻€用例,分別為用例1,2,3,定義了三種輸入情況:

  1. ?用例1:當用戶輸入用戶名或者密碼為空時,按下登錄按鈕,logInfo(初始顯示為“登錄窗口”)將顯示“請輸入用戶名或者密碼”
  2. 用例2:當用戶輸入用戶名為“ym”,密碼為“1”時,按下登錄按鈕,logInfo(初始顯示為“登錄窗口”)將顯示“你好,游某~”
  3. 用例3:當用戶輸入用戶名不為“ym”或者密碼不為“1”時,按下登錄按鈕,logInfo(初始顯示為“登錄窗口”)將顯示“用戶名或密碼錯誤”。

用例的優先級為從上到下依次減弱。

下面將選用例1作為例子看看如何實現。

實現也分為兩步。

第一步添加條件:

鼠標左鍵單擊“登錄”按鈕,右邊會出現“OnClick(點擊時)”,左鍵雙擊之,將會彈出如下窗口:

caseEditor

選擇“添加條件”,并在新彈出來的窗口中,按下圖所示添加條件:

tiaojian1

確保無誤后單擊確定。

第二步添加符合條件的結果:

上一步按確認后將得到如下圖所示,請選擇圖中紅箭頭所指:

tiaojian1queren

然后在新彈出來的窗口中按下圖所示結果編輯:

tiaojian1shuruxianshi

確認無誤單擊確認,然后再確認。Voila! 按照上面所示方法,添加剩下兩個用例即可。

完成后你應該有了如本文開篇所示,按下F5生成原型,并用你最喜歡的瀏覽器打開,是不是有些許的滿足感?

作者:游某
轉自:?Axure RP基礎篇:簡易登錄窗口

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 兄得,你是用洛基亞截得圖嗎?

    來自湖南 回復
  2. 圖片真的是醉了。。。

    來自廣東 回復
  3. 。。。。圖能清晰點嗎。看不到俄

    來自廣東 回復
  4. 為什么我的loginfo信息在矩形的中心地方顯示?。。?!
    沒有在登錄窗口個地方顯示
    后來我加了一個動態面板,用了三個狀態。。。

    來自北京 回復
  5. 請問在上述第二步:添加符合的條件結果中,Axure7點擊設置變量值,沒有跳出最后圖片的窗口,怎么回事?。?/p>

    來自北京 回復
    1. 同樣 7.0沒彈出

      來自廣東 回復