ANDROID 6.0大舞臺(tái)(1)：從交互設(shè)計(jì)到UI代碼開(kāi)發(fā)

裕民ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書(shū)合作）期待與您的合作！

by 高煥堂 2016/2/13

相關(guān)文章：

◆ Android 6.0大舞臺(tái)：從交互設(shè)計(jì)到代碼(Code)的實(shí)踐范例(一)

◆ Android 6.0大舞臺(tái)：從交互設(shè)計(jì)到代碼(Code)的實(shí)踐范例(二)

◆ Android 6.0大舞臺(tái)：從交互設(shè)計(jì)到代碼(Code)的實(shí)踐范例(三) 

一、交互的視覺(jué)設(shè)計(jì)與模型圖

面對(duì)復(fù)雜的交互情境

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

 

以狀態(tài)來(lái)創(chuàng)造簡(jiǎn)單之序

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

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

      

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

   

   也有人設(shè)計(jì)為三個(gè)狀態(tài)：

  

    這些看法都沒(méi)錯(cuò)，重要的是：您必須為不同場(chǎng)合和目的而挑選最適當(dāng)?shù)臓顟B(tài)設(shè)計(jì)。以上三個(gè)觀點(diǎn)都針對(duì)同一個(gè)組件---- 電梯，而做出不同之設(shè)計(jì)。

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

  

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

  

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

   

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

   

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

 

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

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

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

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

 

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

 

    當(dāng)按下<BACK>按鈕時(shí)，就返回到原來(lái)的畫(huà)面Layout_01了。現(xiàn)在依循”Layout與State逐一對(duì)應(yīng)原則”，就能設(shè)計(jì)出兩個(gè)狀態(tài)，如下圖：

 

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

 

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

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

 

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

 

PS. 如果您想繼續(xù)學(xué)習(xí)如何將上述的設(shè)計(jì)，落實(shí)為Android 6.0代碼，就請(qǐng)繼續(xù)閱讀下述文章： 

◆ Android 6.0大舞臺(tái)：從交互設(shè)計(jì)到代碼(Code)的實(shí)踐范例(一)

 

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

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

 

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

  

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

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

  

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

  

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

  

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

  

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

  

PS. 如果您想繼續(xù)學(xué)習(xí)如何將上述的設(shè)計(jì)，落實(shí)為Android 6.0代碼，就請(qǐng)繼續(xù)閱讀下述文章： 

◆ Android 6.0大舞臺(tái)：從交互設(shè)計(jì)到代碼(Code)的實(shí)踐范例(二)

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

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

 

  假設(shè)目前是處于狀態(tài)state_4，發(fā)生了onClick[Back]事件，就離開(kāi)狀態(tài)state_4，轉(zhuǎn)移到狀態(tài)state_1。此時(shí)如果再發(fā)生onClick[Draw Cube]事件，就又進(jìn)入狀態(tài)state_4，因?yàn)閯偛攀怯纱藸顟B(tài)state_4出來(lái)的，這就是歷史狀態(tài)(History State)；在圖里，以H表示之。同樣地，假設(shè)目前是處于狀態(tài)state_3，發(fā)生了onClick[Back]事件，就離開(kāi)狀態(tài)state_3，轉(zhuǎn)移到狀態(tài)state_1。此時(shí)如果再發(fā)生onClick[Draw Cube]事件，就又進(jìn)入狀態(tài)state_3，因?yàn)閯偛攀怯纱藸顟B(tài)state_3出來(lái)的，這就是歷史狀態(tài)(以H表示)的用意了。

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

  

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

  

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

  

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

  

  此時(shí)如果按下<DRAW CUBE>按鈕，這個(gè)新事件觸發(fā)系統(tǒng)返回到狀態(tài)state_2里的小狀態(tài)state_4，因?yàn)閯偛攀怯纱藸顟B(tài)state_4出來(lái)的，這就是歷史狀態(tài)。如下圖：

 

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

 

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

 

   此時(shí)如果按下<DRAW CUBE>按鈕，這個(gè)新事件觸發(fā)系統(tǒng)返回到狀態(tài)state_2里的小狀態(tài)state_3，因?yàn)閯偛攀怯纱藸顟B(tài)state_3出來(lái)的，這就是歷史狀態(tài)。如下圖：

 

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

 

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

PS. 如果您想繼續(xù)學(xué)習(xí)如何將上述的設(shè)計(jì)，落實(shí)為Android 6.0代碼，就請(qǐng)繼續(xù)閱讀下述文章： 

◆ Android 6.0大舞臺(tái)：從交互設(shè)計(jì)到代碼(Code)的實(shí)踐范例(三)

~ End ~

分享標(biāo)題：ANDROID6.0大舞臺(tái)(1)：從交互設(shè)計(jì)到UI代碼開(kāi)發(fā)
瀏覽路徑：http://m.newbst.com/article24/pohgce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、做網(wǎng)站、面包屑導(dǎo)航、小程序開(kāi)發(fā)、網(wǎng)站收錄

廣告

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