楠木軒

多條件交互判斷的一種優雅處理方式

由 聊素麗 發佈於 科技

編輯導語:在上一篇文章中,作者分析了中繼器在不同場景下的樣式處理方式。本文緊接上文,繼續分享了多個條件判斷的更優雅的處理方式。

在上次的 《中繼器的不同場景下的樣式處理》裏留了一個話題,如何處理多個條件判斷。即如果要滿足多個條件,如何遍歷每個場景並處理。繼續看一下上次的問題:

  1. 有新消息,有免打擾
  2. 有新消息,無免打擾
  3. 無新消息,有免打擾
  4. 無新消息,無免打擾

正常的思路和之前解釋的一樣,把上面這個4個場景遍歷一下,即:ifnew_msg == “1”並且mute ==”1″

–顯示小紅點,顯示免打擾圖標

elseifnew_msg==”1″並且mute ==”0″

–顯示小紅點,不顯示免打擾圖標

elseifnew_msg==”0″並且mute ==”1″

–不顯示小紅點,顯示免打擾圖標

else ifnew_msg==”0″並且mute ==”0″

–不顯示小紅點,不顯示免打擾圖標

如果有三個或更多條件,每個表達式裏就有更多的判斷,非常麻煩。

一、交互處理

今天説的方法,使用Axure的是一個不起眼的動作:觸發事件,可能很少有人使用。

  1. 在任意某個元件上,添加一個事件,例如單擊事件。
  2. 這個事件只判斷一個條件,例如如果有新消息就顯示小紅點,否則不顯示。
  3. 在另外一個元件上,重複1~2的步驟,處理其它條件判斷。
  4. 在中繼器的每項加載事件裏,分別觸發新加的元件上的事件。

這樣做的好處是:

按照上面的步驟,我們看上次的問題如何處理:

1)在任意某個元件上,添加一個事件,例如單擊事件

為了不影響現有的內容,我經常是加一個熱區元件,因為它本來在界面是就不可見,同時防止它響應鼠標事件,把它隱藏起來,這樣徹底不影響我們的界面操作。

2)這個事件只判斷一個條件,例如如果有新消息就顯示小紅點,否則不顯示

添加單擊事件,你也可以添加雙擊事件,後面觸發這個事件即可。事件裏判斷new_msg,如果等於1就顯示小紅點,否則就隱藏。

3)在另外一個元件上,重複1~2的步驟,處理其它條件判斷

同理添加另外一個熱區元件,處理mute判斷。

4)在中繼器的每項加載事件裏,分別觸發新加的元件上的事件

回到中繼器的每項加載事件裏,簡化它原來的事件處理。

這裏只有設置文本和兩個觸發事件,觸發的事件內部做了邏輯判斷。因為中繼器的邏輯是可以實時看到的,看看預覽效果。

實際的預覽效果:

核對一下數據,看看是否與給定的條件相符:

  • 第一個顯示新消息,顯示免打擾圖標(new_msg=1,mute=1)。
  • 第二個都不顯示(new_msg=0,mute=0)。
  • 第三個只顯示免打擾(new_msg=0,mute=1)。
  • 第四個只顯示新消息(new_msg=1,mute=0)。

是不是處理的方式更優雅了呢?

如果有第三個條件,只要再加個熱區單擊事件處理,然後觸發它的事件。

二、小結

事件觸發操作就像函數調用一樣,在另外一個元件上添加好邏輯,然後去觸發它。這種方式處理的好處是邏輯簡單,思路清晰。

你一定要動手試一下哦~

本文由 @Axure原型設計工場 原創發佈於人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash,基於CC0協議