ANDROID 6.0大舞台(1)：从交互设计到UI代码开发

ANDROID 6.0大舞台(1)：从交互设计到UI代码开发

by 高煥堂 2016/2/13

相關文章：

◆ Android 6.0大舞台：从交互设计到代码(Code)的实践范例(一)

◆ Android 6.0大舞台：从交互设计到代码(Code)的实践范例(二)

◆ Android 6.0大舞台：从交互设计到代码(Code)的实践范例(三) 

一、交互的视觉设计与模型图

面对复杂的交互情境

   一个交互设计师如何有效思考用户与(电 脑)系统之间的交互呢? 通常大家会最关注于：用户的操作流程，也就是用户与系统的对话(Dialog)流程。然而，在这个对会流程常常很多分支，其幕后条件的组合也很多可能性；如果交互设计师不断细分和解析下去，将会呈现出更多细节，发现更多可变的因子。因此，流程的复杂多变是本质性的，无法透过分析来简化它。

以状态来创造简单之序

   俗语说：面对复杂，唯有简单。由于对话流程的复杂(Complexity)与多变(Change)是不可或缺的(Essential)，交互设计师只好对其(即对话流程)进行分而治之(Devide and Conque)，提升人们管理(它的)复杂事物的能力。所谓交互(对话)流程就是用户触发一连串的事件(Event)，引发(电 脑)系统的一连串响应行为(Behavior)。只要想个办法，能对这些事件和行为加以<分而治之>，就能让人们心中觉得它们变得简单了，人们就不再害怕复杂了。虽然没有删除掉复杂本身，却提升了人们管理复杂的能力。

  那么，人们常拿什么来对事件和行为加以<分而治之>呢? 答案是：状态(State)。人们可以选择或创造出一系列状态，让系统在状态之间来回转移(Transition)，系统唯有在特定状态中，才会接受用户触发的事件，并执行响应行为。然而，一个系统的状态变化并非本质性(Essential)的，而是因观点(View)而有所不同的。从不同的观点可看到不同的状态及其变化。因而如何选择适当的观点，设计出好的状态是一大挑战。请您想一想，电梯的状态有那些呢？有将电梯设计成两种状态： 

 也有人设计成另两种状态：

   也有人设计为三个状态：

    这些看法都没错，重要的是：您必须为不同场合和目的而挑选最适当的状态设计。以上三个观点都针对同一个组件---- 电梯，而做出不同之设计。

如果针对不同的组件，通常也会得到不同的状态图，但也不一定都不相同。例如十字路口的红绿灯，就每一颗灯(part)而言，都有两种状态，例如绿灯：

而就整个红绿灯(whole)而言，也有两种状态：

这是从故障与否的角度来看一个灯，也看整个红绿灯组。如果从亮不亮的角度而观之，就会得到不同的状态图了。就每一颗灯(即part)而言，都有两种状态，例如绿灯：

而就整个红绿灯(即whole)而言，却有三种状态：

所以不要拘泥于：系统本质上有多少状态。而应该问的是：分为那些状态最能有效将复杂分而治之，创造出简单的次序(Order)，提升人们以简驭繁的能力。换句话说，对事件/行为能愈有效分而治之的设计，就是愈好的状态设计。

状态、事件与行为

 外来的事件(Event)会触发对象的状态(State)转移，而对象转移到新状态会做出新的行为(Behavior)。换句话说，事件的发生不仅会触发状态转移，同时也会触发对象去执行某些动作。例如，人们接到红灯传来的讯息，就知道停下来。含苞待放的花散发出令人期望的讯息，而凋谢的花带给人另一种心情；看到盛开的花会想买它，而不会去买凋谢的花。

二、Android范例(1)：从布局(Layout)联想到状态

    例如，在Android应用开发的(UI)交互设计里，许多人从Android的画面布局(Layout)联想到状态(State)，也就是从Android画面的变化中找出状态及其转移。一开始，不需要太完美的切入点，只要一个Layout对应到一个状态就行了。这样子，可以从Layout的转换来联想到状态的转移；也可以从状态的设计来引导Layout的规划。例如，交互设计师与客户讨论之后，而规划出两个Layout。其中的Layout_01，如下图：

  上图是第1个Layout，就把它看成第1个状态。一旦按下了，按下<DRAW CUBE>按钮，就变换到另一个Layout(即Layout_02)，如下图：

    当按下<BACK>按钮时，就返回到原来的画面Layout_01了。现在依循”Layout与State逐一对应原则”，就能设计出两个状态，如下图：

  现在，就拿这两个状态来对众多事件(Event)进行分而治之(Divide and Conquer)。如下图：

    于是，把4个<离开事件(Outgoing Event)>划分为两组了。其中的onClick[Draw Cube]和onClick[Exit]事件是属于state_1状态；而onCheckedChanged和onClick[Back]两个事件则属于state_2状态。

图中的 l代表预设或默认(Default)之意，每次系统启动时，默认会先进入状态state_1，这个就称为「默认起始状态」(Default Starting State)。接下来，也把系统的响应行为(Behavior)进行分而治之，如下图：

  一旦进入state_1状态，系统就执行show_layout_01()函数(即行为)，然后就执行draw_3d_graphic()函数，画出3D图形。同样地，一旦进入state_2状态，系统就执行show_layout_02()函数，接着执行draw_3d_graphic()函数，画出3D图形。如此，将事件及其相关的响应行为，完美地分而治之了。 

PS. 如果您想继续学习如何将上述的设计，落实为Android 6.0代码，就请继续阅读下述文章： 

◆ Android 6.0大舞台：从交互设计到代码(Code)的实践范例(一)

三、Android范例(2)：复杂状态的<分而治之>

  对于某一个状态所相关的事件和行为，如果你还是觉得很复杂时，就可以将它细分为多个状态，对其进行分而治之。例如，刚才范例里的state_2状态，有一个相关的事件：onCheckedChanged。它到底改变了系统的那些行为，在上图里并没有凸显出来。于是，我们可以将这state_2状态加以细分出两个状态：state_3和state_4。如下图： 

   每次系统启动时，默认会先进入状态state_1，执行了show_layout_01()函数，显示出Layout_01画面，接着执行draw_3d_graphic()，绘出了3D图形。如下图：

   当您按下<DRAW CUBE>按钮(Button)时，这个新事件(即Android的OnClick事件)触发系统转移到状态state_2，也引发了响应行为：执行show_layout_02()函数。

在state_2状态里的 l代表预设或默认(Default)之意，每次进入状态state_2时，执行了show_layout_02()函数之后，必先进入状态state_3，执行了draw_pyramid()函数，绘出三角锥体的图形。如下图：

     当用户按下<Cube>的勾选按钮时，这个事件(即Android的OnCheckedChanged事件)会触发状态转移到state_4，除了绘出一个锥型体之外，还绘出一个正立方体。

     如果用户再按下<Cube>的勾选按钮时，这个事件会触发状态转移回到state_3，只绘出一个锥型体。如下图：

     当按下<BACK>按钮时，这事件(即Android的OnClick事件)触发系统返回到状态state_1了。如下图：

  当按下<EXIT>按钮时，这事件(即Android的OnClick事件)触发系统来结束这App的执行了。

PS. 如果您想继续学习如何将上述的设计，落实为Android 6.0代码，就请继续阅读下述文章： 

◆ Android 6.0大舞台：从交互设计到代码(Code)的实践范例(二)

四、Android范例(3)：活用<历史状态>

   刚才提到，l代表“Default”之意，每次进入状态state_2时，必先进入状态state_3。不过，有些情况并非如此。例如，在状态state_2时，若按下<BACK>按钮，离开状态state_2而转移到状态state_1。然后，再按下<DRAW CUBE>按钮，返回状态state_2时，就不一定进入状态state_3了，而是依先前离开状态state_2时的最后停留的(The Most Recently Visited)小状态(即state_3或state_4)而定了。此时，可表示如下图：

  假设目前是处于状态state_4，发生了onClick[Back]事件，就离开状态state_4，转移到状态state_1。此时如果再发生onClick[Draw Cube]事件，就又进入状态state_4，因为刚才是由此状态state_4出来的，这就是历史状态(History State)；在图里，以H表示之。同样地，假设目前是处于状态state_3，发生了onClick[Back]事件，就离开状态state_3，转移到状态state_1。此时如果再发生onClick[Draw Cube]事件，就又进入状态state_3，因为刚才是由此状态state_3出来的，这就是历史状态(以H表示)的用意了。

  现在，我们看看上图的系统交互行为。每次系统启动时，默认会先进入状态state_1，执行了show_layout_01()函数，显示出Layout_01画面，接着执行draw_3d_graphic()，绘出了3D图形。如下图：

   当您按下<DRAW CUBE>按钮时，这个新事件(即Android的OnClick事件)触发系统转移到状态state_2，也引发了响应行为：执行show_layout_02()函数。在state_2状态里的 l代表预设或默认(Default)之意，每次进入状态state_2时，执行了show_layout_02()函数之后，必先进入状态state_3，执行了draw_pyramid()函数，绘出三角锥体的图形。如下图：

   当用户按下<Cube>的勾选按钮时，这个事件(即Android的OnCheckedChanged事件)会触发状态转移到state_4，除了绘出一个锥型体之外，还绘出一个正立方体。

  此时，如果按下<BACK]按钮，发生了onClick[Back]事件，就离开状态state_4，转移到状态state_1。如下图：

  此时如果按下<DRAW CUBE>按钮，这个新事件触发系统返回到状态state_2里的小状态state_4，因为刚才是由此状态state_4出来的，这就是历史状态。如下图：

   如果用户再按下<Cube>的勾选按钮时，这个事件会触发状态转移回到state_3，只绘出一个锥型体。如下图： 

 此时，如果按下<BACK]按钮，就离开状态state_3，转移到状态state_1。如下图： 

   此时如果按下<DRAW CUBE>按钮，这个新事件触发系统返回到状态state_2里的小状态state_3，因为刚才是由此状态state_3出来的，这就是历史状态。如下图：

此时，如果按下<BACK]按钮，就离开状态state_3，转移到状态state_1。如下图：

   当按下<EXIT>按钮时，这事件(即Android的OnClick事件)触发系统来结束这App的执行了。

PS. 如果您想继续学习如何将上述的设计，落实为Android 6.0代码，就请继续阅读下述文章： 

◆ Android 6.0大舞台：从交互设计到代码(Code)的实践范例(三)

~ End ~