ANDROID6.0大舞臺(1)：從交互設計到UI代碼開發(fā)-創(chuàng)新互聯(lián)

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

成都一家集口碑和實力的網站建設服務商，擁有專業(yè)的企業(yè)建站團隊和靠譜的建站技術，十多年企業(yè)及個人網站建設經驗 ,為成都成百上千家客戶提供網頁設計制作,網站開發(fā),企業(yè)網站制作建設等服務,包括成都營銷型網站建設，品牌網站制作，同時也為不同行業(yè)的客戶提供網站制作、成都網站設計的服務,包括成都電商型網站制作建設,裝修行業(yè)網站制作建設，傳統(tǒng)機械行業(yè)網站建設,傳統(tǒng)農業(yè)行業(yè)網站制作建設。在成都做網站,選網站制作建設服務商就選創(chuàng)新互聯(lián)公司。

by 高煥堂 2016/2/13

相關文章：

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

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

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

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

面對復雜的交互情境

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

以狀態(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)之間來回轉移(Transition)，系統(tǒng)唯有在特定狀態(tài)中，才會接受用戶觸發(fā)的事件，并執(zhí)行響應行為。然而，一個系統(tǒng)的狀態(tài)變化并非本質性(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)本質上有多少狀態(tài)。而應該問的是：分為那些狀態(tài)最能有效將復雜分而治之，創(chuàng)造出簡單的次序(Order)，提升人們以簡馭繁的能力。換句話說，對事件/行為能愈有效分而治之的設計，就是愈好的狀態(tài)設計。

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

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

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

  例如，在Android應用開發(fā)的(UI)交互設計里，許多人從Android的畫面布局(Layout)聯(lián)想到狀態(tài)(State)，也就是從Android畫面的變化中找出狀態(tài)及其轉移。一開始，不需要太完美的切入點，只要一個Layout對應到一個狀態(tài)就行了。這樣子，可以從Layout的轉換來聯(lián)想到狀態(tài)的轉移；也可以從狀態(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圖形。如此，將事件及其相關的響應行為，完美地分而治之了。

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

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

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

  對于某一個狀態(tài)所相關的事件和行為，如果你還是覺得很復雜時，就可以將它細分為多個狀態(tài)，對其進行分而治之。例如，剛才范例里的state_2狀態(tài)，有一個相關的事件：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)轉移到狀態(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)轉移到state_4，除了繪出一個錐型體之外，還繪出一個正立方體。

  

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

  

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

  

  當按下<EXIT>按鈕時，這事件(即Android的OnClick事件)觸發(fā)系統(tǒng)來結束這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而轉移到狀態(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，轉移到狀態(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，轉移到狀態(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)轉移到狀態(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)轉移到state_4，除了繪出一個錐型體之外，還繪出一個正立方體。

  

  此時，如果按下<BACK]按鈕，發(fā)生了onClick[Back]事件，就離開狀態(tài)state_4，轉移到狀態(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)轉移回到state_3，只繪出一個錐型體。如下圖：

 

 此時，如果按下<BACK]按鈕，就離開狀態(tài)state_3，轉移到狀態(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，轉移到狀態(tài)state_1。如下圖：

 

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

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

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

~ End ~

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前文章：ANDROID6.0大舞臺(1)：從交互設計到UI代碼開發(fā)-創(chuàng)新互聯(lián)
網頁鏈接：http://bm7419.com/article30/dpojso.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、響應式網站、網站營銷、微信小程序、App設計、微信公眾號

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)