ANDROID 6.0大舞臺(1)：從交互設計到UI代碼開發(fā)

ANDROID 6.0大舞臺(1)：從交互設計到UI代碼開發(fā)

by 高煥堂 2016/2/13

相關(guān)文章：

◆ Android 6.0大舞臺：從交互設計到代碼(Code)的實踐范例(一)

◆ Android 6.0大舞臺：從交互設計到代碼(Code)的實踐范例(二)

◆ Android 6.0大舞臺：從交互設計到代碼(Code)的實踐范例(三) 

一、交互的視覺設計與模型圖

面對復雜的交互情境

   一個交互設計師如何有效思考用戶與(電 腦)系統(tǒng)之間的交互呢? 通常大家會最關(guān)注于：用戶的操作流程，也就是用戶與系統(tǒng)的對話(Dialog)流程。然而，在這個對會流程常常很多分支，其幕后條件的組合也很多可能性；如果交互設計師不斷細分和解析下去，將會呈現(xiàn)出更多細節(jié)，發(fā)現(xiàn)更多可變的因子。因此，流程的復雜多變是本質(zhì)性的，無法透過分析來簡化它。

以狀態(tài)來創(chuàng)造簡單之序

   俗語說：面對復雜，唯有簡單。由于對話流程的復雜(Complexity)與多變(Change)是不可或缺的(Essential)，交互設計師只好對其(即對話流程)進行分而治之(Devide and Conque)，提升人們管理(它的)復雜事物的能力。所謂交互(對話)流程就是用戶觸發(fā)一連串的事件(Event)，引發(fā)(電 腦)系統(tǒng)的一連串響應行為(Behavior)。只要想個辦法，能對這些事件和行為加以<分而治之>，就能讓人們心中覺得它們變得簡單了，人們就不再害怕復雜了。雖然沒有刪除掉復雜本身，卻提升了人們管理復雜的能力。

  那么，人們常拿什么來對事件和行為加以<分而治之>呢? 答案是：狀態(tài)(State)。人們可以選擇或創(chuàng)造出一系列狀態(tài)，讓系統(tǒng)在狀態(tài)之間來回轉(zhuǎn)移(Transition)，系統(tǒng)唯有在特定狀態(tài)中，才會接受用戶觸發(fā)的事件，并執(zhí)行響應行為。然而，一個系統(tǒng)的狀態(tài)變化并非本質(zhì)性(Essential)的，而是因觀點(View)而有所不同的。從不同的觀點可看到不同的狀態(tài)及其變化。因而如何選擇適當?shù)挠^點，設計出好的狀態(tài)是一大挑戰(zhàn)。請您想一想，電梯的狀態(tài)有那些呢？有將電梯設計成兩種狀態(tài)： 

 也有人設計成另兩種狀態(tài)：

   也有人設計為三個狀態(tài)：

    這些看法都沒錯，重要的是：您必須為不同場合和目的而挑選最適當?shù)臓顟B(tài)設計。以上三個觀點都針對同一個組件---- 電梯，而做出不同之設計。

如果針對不同的組件，通常也會得到不同的狀態(tài)圖，但也不一定都不相同。例如十字路口的紅綠燈，就每一顆燈(part)而言，都有兩種狀態(tài)，例如綠燈：

而就整個紅綠燈(whole)而言，也有兩種狀態(tài)：

這是從故障與否的角度來看一個燈，也看整個紅綠燈組。如果從亮不亮的角度而觀之，就會得到不同的狀態(tài)圖了。就每一顆燈(即part)而言，都有兩種狀態(tài)，例如綠燈：

而就整個紅綠燈(即whole)而言，卻有三種狀態(tài)：

所以不要拘泥于：系統(tǒng)本質(zhì)上有多少狀態(tài)。而應該問的是：分為那些狀態(tài)最能有效將復雜分而治之，創(chuàng)造出簡單的次序(Order)，提升人們以簡馭繁的能力。換句話說，對事件/行為能愈有效分而治之的設計，就是愈好的狀態(tài)設計。

狀態(tài)、事件與行為

 外來的事件(Event)會觸發(fā)對象的狀態(tài)(State)轉(zhuǎn)移，而對象轉(zhuǎn)移到新狀態(tài)會做出新的行為(Behavior)。換句話說，事件的發(fā)生不僅會觸發(fā)狀態(tài)轉(zhuǎn)移，同時也會觸發(fā)對象去執(zhí)行某些動作。例如，人們接到紅燈傳來的訊息，就知道停下來。含苞待放的花散發(fā)出令人期望的訊息，而凋謝的花帶給人另一種心情；看到盛開的花會想買它，而不會去買凋謝的花。

二、Android范例(1)：從布局(Layout)聯(lián)想到狀態(tài)

    例如，在Android應用開發(fā)的(UI)交互設計里，許多人從Android的畫面布局(Layout)聯(lián)想到狀態(tài)(State)，也就是從Android畫面的變化中找出狀態(tài)及其轉(zhuǎn)移。一開始，不需要太完美的切入點，只要一個Layout對應到一個狀態(tài)就行了。這樣子，可以從Layout的轉(zhuǎn)換來聯(lián)想到狀態(tài)的轉(zhuǎn)移；也可以從狀態(tài)的設計來引導Layout的規(guī)劃。例如，交互設計師與客戶討論之后，而規(guī)劃出兩個Layout。其中的Layout_01，如下圖：

  上圖是第1個Layout，就把它看成第1個狀態(tài)。一旦按下了，按下<DRAW CUBE>按鈕，就變換到另一個Layout(即Layout_02)，如下圖：

    當按下<BACK>按鈕時，就返回到原來的畫面Layout_01了?，F(xiàn)在依循”Layout與State逐一對應原則”，就能設計出兩個狀態(tài)，如下圖：

  現(xiàn)在，就拿這兩個狀態(tài)來對眾多事件(Event)進行分而治之(Divide and Conquer)。如下圖：

    于是，把4個<離開事件(Outgoing Event)>劃分為兩組了。其中的onClick[Draw Cube]和onClick[Exit]事件是屬于state_1狀態(tài)；而onCheckedChanged和onClick[Back]兩個事件則屬于state_2狀態(tài)。

圖中的 l代表預設或默認(Default)之意，每次系統(tǒng)啟動時，默認會先進入狀態(tài)state_1，這個就稱為「默認起始狀態(tài)」(Default Starting State)。接下來，也把系統(tǒng)的響應行為(Behavior)進行分而治之，如下圖：

  一旦進入state_1狀態(tài)，系統(tǒng)就執(zhí)行show_layout_01()函數(shù)(即行為)，然后就執(zhí)行draw_3d_graphic()函數(shù)，畫出3D圖形。同樣地，一旦進入state_2狀態(tài)，系統(tǒng)就執(zhí)行show_layout_02()函數(shù)，接著執(zhí)行draw_3d_graphic()函數(shù)，畫出3D圖形。如此，將事件及其相關(guān)的響應行為，完美地分而治之了。 

PS. 如果您想繼續(xù)學習如何將上述的設計，落實為Android 6.0代碼，就請繼續(xù)閱讀下述文章： 

◆ Android 6.0大舞臺：從交互設計到代碼(Code)的實踐范例(一)

三、Android范例(2)：復雜狀態(tài)的<分而治之>

  對于某一個狀態(tài)所相關(guān)的事件和行為，如果你還是覺得很復雜時，就可以將它細分為多個狀態(tài)，對其進行分而治之。例如，剛才范例里的state_2狀態(tài)，有一個相關(guān)的事件：onCheckedChanged。它到底改變了系統(tǒng)的那些行為，在上圖里并沒有凸顯出來。于是，我們可以將這state_2狀態(tài)加以細分出兩個狀態(tài)：state_3和state_4。如下圖： 

   每次系統(tǒng)啟動時，默認會先進入狀態(tài)state_1，執(zhí)行了show_layout_01()函數(shù)，顯示出Layout_01畫面，接著執(zhí)行draw_3d_graphic()，繪出了3D圖形。如下圖：

   當您按下<DRAW CUBE>按鈕(Button)時，這個新事件(即Android的OnClick事件)觸發(fā)系統(tǒng)轉(zhuǎn)移到狀態(tài)state_2，也引發(fā)了響應行為：執(zhí)行show_layout_02()函數(shù)。

在state_2狀態(tài)里的 l代表預設或默認(Default)之意，每次進入狀態(tài)state_2時，執(zhí)行了show_layout_02()函數(shù)之后，必先進入狀態(tài)state_3，執(zhí)行了draw_pyramid()函數(shù)，繪出三角錐體的圖形。如下圖：

     當用戶按下<Cube>的勾選按鈕時，這個事件(即Android的OnCheckedChanged事件)會觸發(fā)狀態(tài)轉(zhuǎn)移到state_4，除了繪出一個錐型體之外，還繪出一個正立方體。

     如果用戶再按下<Cube>的勾選按鈕時，這個事件會觸發(fā)狀態(tài)轉(zhuǎn)移回到state_3，只繪出一個錐型體。如下圖：

     當按下<BACK>按鈕時，這事件(即Android的OnClick事件)觸發(fā)系統(tǒng)返回到狀態(tài)state_1了。如下圖：

  當按下<EXIT>按鈕時，這事件(即Android的OnClick事件)觸發(fā)系統(tǒng)來結(jié)束這App的執(zhí)行了。

PS. 如果您想繼續(xù)學習如何將上述的設計，落實為Android 6.0代碼，就請繼續(xù)閱讀下述文章： 

◆ Android 6.0大舞臺：從交互設計到代碼(Code)的實踐范例(二)

四、Android范例(3)：活用<歷史狀態(tài)>

   剛才提到，l代表“Default”之意，每次進入狀態(tài)state_2時，必先進入狀態(tài)state_3。不過，有些情況并非如此。例如，在狀態(tài)state_2時，若按下<BACK>按鈕，離開狀態(tài)state_2而轉(zhuǎn)移到狀態(tài)state_1。然后，再按下<DRAW CUBE>按鈕，返回狀態(tài)state_2時，就不一定進入狀態(tài)state_3了，而是依先前離開狀態(tài)state_2時的最后停留的(The Most Recently Visited)小狀態(tài)(即state_3或state_4)而定了。此時，可表示如下圖：

  假設目前是處于狀態(tài)state_4，發(fā)生了onClick[Back]事件，就離開狀態(tài)state_4，轉(zhuǎn)移到狀態(tài)state_1。此時如果再發(fā)生onClick[Draw Cube]事件，就又進入狀態(tài)state_4，因為剛才是由此狀態(tài)state_4出來的，這就是歷史狀態(tài)(History State)；在圖里，以H表示之。同樣地，假設目前是處于狀態(tài)state_3，發(fā)生了onClick[Back]事件，就離開狀態(tài)state_3，轉(zhuǎn)移到狀態(tài)state_1。此時如果再發(fā)生onClick[Draw Cube]事件，就又進入狀態(tài)state_3，因為剛才是由此狀態(tài)state_3出來的，這就是歷史狀態(tài)(以H表示)的用意了。

  現(xiàn)在，我們看看上圖的系統(tǒng)交互行為。每次系統(tǒng)啟動時，默認會先進入狀態(tài)state_1，執(zhí)行了show_layout_01()函數(shù)，顯示出Layout_01畫面，接著執(zhí)行draw_3d_graphic()，繪出了3D圖形。如下圖：

   當您按下<DRAW CUBE>按鈕時，這個新事件(即Android的OnClick事件)觸發(fā)系統(tǒng)轉(zhuǎn)移到狀態(tài)state_2，也引發(fā)了響應行為：執(zhí)行show_layout_02()函數(shù)。在state_2狀態(tài)里的 l代表預設或默認(Default)之意，每次進入狀態(tài)state_2時，執(zhí)行了show_layout_02()函數(shù)之后，必先進入狀態(tài)state_3，執(zhí)行了draw_pyramid()函數(shù)，繪出三角錐體的圖形。如下圖：

   當用戶按下<Cube>的勾選按鈕時，這個事件(即Android的OnCheckedChanged事件)會觸發(fā)狀態(tài)轉(zhuǎn)移到state_4，除了繪出一個錐型體之外，還繪出一個正立方體。

  此時，如果按下<BACK]按鈕，發(fā)生了onClick[Back]事件，就離開狀態(tài)state_4，轉(zhuǎn)移到狀態(tài)state_1。如下圖：

  此時如果按下<DRAW CUBE>按鈕，這個新事件觸發(fā)系統(tǒng)返回到狀態(tài)state_2里的小狀態(tài)state_4，因為剛才是由此狀態(tài)state_4出來的，這就是歷史狀態(tài)。如下圖：

   如果用戶再按下<Cube>的勾選按鈕時，這個事件會觸發(fā)狀態(tài)轉(zhuǎn)移回到state_3，只繪出一個錐型體。如下圖： 

 此時，如果按下<BACK]按鈕，就離開狀態(tài)state_3，轉(zhuǎn)移到狀態(tài)state_1。如下圖： 

   此時如果按下<DRAW CUBE>按鈕，這個新事件觸發(fā)系統(tǒng)返回到狀態(tài)state_2里的小狀態(tài)state_3，因為剛才是由此狀態(tài)state_3出來的，這就是歷史狀態(tài)。如下圖：

此時，如果按下<BACK]按鈕，就離開狀態(tài)state_3，轉(zhuǎn)移到狀態(tài)state_1。如下圖：

   當按下<EXIT>按鈕時，這事件(即Android的OnClick事件)觸發(fā)系統(tǒng)來結(jié)束這App的執(zhí)行了。

PS. 如果您想繼續(xù)學習如何將上述的設計，落實為Android 6.0代碼，就請繼續(xù)閱讀下述文章： 

◆ Android 6.0大舞臺：從交互設計到代碼(Code)的實踐范例(三)

~ End ~