Axure 9.0高級教程:理清原型邏輯,與開發溝通更有底氣

一 、條件邏輯概述

看過連載前文的都知道,在Axure中完成一個基本的交互設置其實很簡答,我們只要按照提示與引導一步步的選擇事件和動作,做好元件和情形(用例)的命名即可。當你熟悉了,情形的命名也可以省略了。

我們知道有些事件的發生是有前提條件的,不同的條件會導致事件發生不同的動作,這就是事務的內在邏輯。“邏輯”一詞最早由古希臘學者亞里士多德提出。狹義上邏輯既指思維的規律,也指研究思維規律的學科即邏輯學。廣義上邏輯泛指規律,包括思維規律和客觀規律。邏輯包括形式邏輯與辯證邏輯,形式邏輯包括歸納邏輯與演繹邏輯,辯證邏輯包括矛盾邏輯與對稱邏輯。對稱邏輯是人的整體思維(包括抽象思維與具象思維)的邏輯。

在思考邏輯?.jpg


二、如果或否則

當我們為事件添加第1個情形時,如果符合情形1的條件,則執行設定的交互動作;添加第2個情形時,則變成了否則這樣的句式,則執行設定的交互動作,變成了與第1個情形對立的情況,即除第1個情形之外的條件下,執行情形2的動作。很多時候我們并不希望這樣,比如我們希望在選擇省份下拉列表時,選項中選擇不同的省,下方顯示該省的城市列表。這個時候就需要為省份下拉列表添加”選項改變時“事件,將各省的城市列表轉換為動態面板不同的狀態。在為省份下拉列表這一元件選擇不同的選項時,設置動態面板顯示不同的狀態,將下拉列表的各項作為情形的邏輯條件。這個時候,其實我們希望每個情形的執行是并列關系,互不干擾。因此,在這里我們手動將其他情形切換為如果的邏輯句式。右擊情形,選擇“切換為[如果]或[否則]"。


如果或否則.png

三、條件關系-全部和任何

全部:當全部條件都滿足時,才能執行設置的動作,每個條件之間是“與”的關系,需要同時成立。我們以登錄為例,點擊登錄按鈕時,我們需要判斷賬號、密碼,只有當賬戶和密碼都正確,才提示“登錄成功”。賬號和密碼的條件表達式,他們之間的邏輯關系就是全部。
任何:當其中一個條件滿足時,就可以執行設置的動作,每個條件之間是“或”的關系,即只要求其中一項成立。還是以登錄為例,點擊登錄按鈕時,判斷賬號和密碼,如果其中一個不正確,則提示“賬號與密碼不匹配,登錄失敗”。

假設正確的賬號為13333333333,密碼為mima333

全部.png

任何.png

四、運算符和表達式

一個完整的條件語句由表達式和運算符構成,表達式的內容可以是文本、變量值、變量值長度、元件文字、元件文字長度、選項、選中狀態、面板狀態、元件的可見性、元件范圍、鍵盤按鍵、指針等一切可以通過外在形式表達的內容。運算符包含了算數運算符、關系運算符和邏輯運算符。


表達式.png

運算符.png

4.1 算數運算符

連接兩個表達式的算數運算符為==和!=。前一個為賦值符號,即將符號右側的內容賦值給左側表達式;第二表示不相等,即運算符兩側的內容不相等。

4.2 關系運算符

條件表達式中間的關系運算符包含了大于(>)、小于(<)、小于等于(<=)、大于等于(>=)。代表了兩側表達式之間的大小關系,表達式的內容通常是可以量化的數值或變量。

4.3 邏輯運算符

條件表達式中,可供選擇的邏輯運算符有:包含、不包含、是、不是。主要表達運算符兩側內容的包含關系和是非關系。

五、多條件用例

一個事件下可以添加多個情形。比如,你有一個下拉列表框,其中的項是不同的省份,你可以為給“選項改變時”事件添加多個不同的情形,通過不同的下拉列表項,執行不同的動作。
默認情況下,從第二個情形開始都是否則形式的語句,可以手動點擊切換為如果形式的語句。在原型中,用例是從上至下按順序執行的。我們也可以讓每個滿足條件的情形都被執行。要做到這一點其實很簡單,右擊情形,并選擇“切換為[如果]或[否則]”,將否則切換為如果。
例如,在注冊表單中,對每個文本輸入項的內容進行單獨驗證。當點擊注冊按鈕時,可以為每個文本框添加一個如果結構的條件情形,如果不符合條件,情形就動態顯示不同的錯誤提示。


注冊提示.png

六、條件邏輯案例

6.1 登錄驗證

  1. 使用矩形、文本框、按鈕及文本標簽等元件,完成登錄界面線框圖的搭建。文本框作為輸入項元件(賬號、密碼)、按鈕為登錄,兩個文本標簽作為登錄成功和登錄失敗的提示信息,注意做好各元件的命名工作。

  2. 為登錄按鈕添加“鼠標單擊時”事件,選中登錄按鈕,在元件事件列表中選擇“鼠標單擊時”事件,元件動作列表選擇”顯示/隱藏“,目標元件選擇“登錄成功提示”,插入第二個動作“等待”,設置等待1000毫秒(1秒),插入第三個動作“顯示/隱藏”,目標元件選擇“登錄成功提示”。


    登錄成功-動作配置.png
  3. 為情形添加條件,我們期望實現的效果是:當輸入的賬號和密碼都正確時,提示“登錄成功”;當賬號或密碼有一個錯誤時,則提示“賬號與密碼不匹配,登錄失敗”。

假設正確的賬號為13333333333,密碼為mima333

  1. 為第一個情形添加條件,點擊添加條件,彈出條件創建彈框,運算符左側分別下拉選擇“元件文字”和“賬號輸入”,運算符右側選擇文本,填寫13333333333,運算符選擇==;點擊表達式右側的添加行,添加第二個條件,運算符左側分別下拉選擇“元件文字”和“密碼輸入”,運算符右側選擇文本,填寫mima333,運算符選擇==,表達式上方的符合選擇“全部”,點擊確定,完成條件設置。


    登錄成功-條件表達式.png
  2. 為事件添加第二個情形,點擊添加情形,點擊添加條件,彈出條件創建彈框,運算符左側分別下拉選擇“元件文字”和“賬號輸入”,運算符右側選擇文本,填寫13333333333,運算符選擇!=;點擊表達式右側的添加行,添加第二個條件,運算符左側分別下拉選擇“元件文字”和“密碼輸入”,運算符右側選擇文本,填寫mima333,運算符選擇!=,表達式上方的符合選擇“任何”,點擊確定,完成條件設置。點擊插入動作,動作列表中選擇“顯示/隱藏”,目標元件選擇“登錄失敗提示”,選擇顯示;插入動作“等待”,等待時間設置1000毫秒(1秒),插入動作“顯示/隱藏”,目標元件選擇“登錄失敗提示”,選擇隱藏。


    登錄失敗-條件表達式.png

    登錄失敗-動作配置.png

6.2 城市信息

  1. 拖動下拉列表框至設計區域,添加列表項,項的內容為省份名稱,命名為省份;拖動一個列表框至設計區域,添加列表項,項的內容為省城市名稱;將列表框右鍵轉換為動態面板,復制多個狀態(注意每個狀態的命名,建議以省命名),每個狀態的列表框顯示不同省份的城市,動態面板命名為城市。

  2. 我們期望實現的效果是,當下拉列表框選擇不同的省份時,下方的列表框顯示對應省份的城市列表。

  3. 選中省下拉列表,在元件事件列表中選擇“選項改變時”事件,選擇“設置面板狀態”動作,目標元件選擇動態面板,選擇對應的面板狀態,點擊完成,完成動作設置。


    廣東-設置動作.png
  4. 為剛才的情形1設置條件,點擊添加條件,在條件創建彈框中,運算符左側分別選擇被選項和當前,運算符右側分別選擇選項和廣東,點擊確定,完成條件設置。


    廣東-設置條件.png

5.為事件添加第2個情形,添加邏輯條件,在條件創建彈框中,運算符左側分別選擇被選項和當前,運算符右側分別選擇選項和浙江。點擊插入動作,動作列表選擇”設置面板狀態”,選中“城市”動態面板,面板狀態切換為“浙江”,點擊完成,完成動作設置。


浙江-設置條件.png

浙江-設置動作.png
  1. 其他省份的城市列表切換顯示同上一步一致。
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容