ANDROID6.0大舞台(1):从交互设计到UI代码开发
ANDROID 6.0大舞台(1):从交互设计到UI代码开发
裕民ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:028-86922220(备注:SSL证书合作)期待与您的合作!
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个状态。一旦按下了,按下
当按下
现在,就拿这两个状态来对众多事件(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图形。如下图:
当您按下
在state_2状态里的 l代表预设或默认(Default)之意,每次进入状态state_2时,执行了show_layout_02()函数之后,必先进入状态state_3,执行了draw_pyramid()函数,绘出三角锥体的图形。如下图:
当用户按下
如果用户再按下
当按下
当按下
PS. 如果您想继续学习如何将上述的设计,落实为Android 6.0代码,就请继续阅读下述文章:
◆ Android 6.0大舞台:从交互设计到代码(Code)的实践范例(二)
四、Android范例(3):活用<历史状态>
刚才提到,l代表“Default”之意,每次进入状态state_2时,必先进入状态state_3。不过,有些情况并非如此。例如,在状态state_2时,若按下
假设目前是处于状态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图形。如下图:
当您按下
当用户按下
此时,如果按下 此时如果按下 如果用户再按下 此时,如果按下 此时如果按下 此时,如果按下 当按下 PS. 如果您想继续学习如何将上述的设计,落实为Android 6.0代码,就请继续阅读下述文章: ◆ Android 6.0大舞台:从交互设计到代码(Code)的实践范例(三) ~ End ~
网站名称:ANDROID6.0大舞台(1):从交互设计到UI代码开发
网站链接:http://scyanting.com/article/pohgce.html