李雅雯+劉曉燕

摘要：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)應(yīng)用開(kāi)發(fā)如火如荼。由于市場(chǎng)上手機(jī)操作系統(tǒng)繁多，給移動(dòng)應(yīng)用的開(kāi)發(fā)特別是應(yīng)用移植帶來(lái)很多麻煩。開(kāi)發(fā)一個(gè)移動(dòng)應(yīng)用是一項(xiàng)復(fù)雜工作，需要掌握很多技術(shù)，包括前端開(kāi)發(fā)，這些技術(shù)由不同技能的人共同完成。一個(gè)有序的開(kāi)發(fā)過(guò)程以適當(dāng)?shù)慕８拍顬橹行?，這對(duì)于克服開(kāi)發(fā)中固有的復(fù)雜性至關(guān)重要。交互流建模語(yǔ)言（IFML）是針對(duì)移動(dòng)應(yīng)用量身定制的OMG建模語(yǔ)言標(biāo)準(zhǔn)的擴(kuò)展。IFML提供了一種獨(dú)特、簡(jiǎn)明、能壓縮的，用UML類(lèi)圖、狀態(tài)圖表示用戶界面的可視性語(yǔ)法，在移動(dòng)應(yīng)用開(kāi)發(fā)中起著積極作用。

關(guān)鍵詞：移動(dòng)應(yīng)用；前端開(kāi)發(fā)；建模；IFML；UML

DOIDOI：10.11907/rjdk.171982

中圖分類(lèi)號(hào)：TP301

文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-7800（2017）012-0030-03

Abstract：Developing a Mobile application， like any other kind of software system， is a complex achievement， which requires the ability to master a broad spectrum of tasks， including the front-end development. Tasks are jointly performed by a number of persons with different skills. Following a well-organized development process， centred on the appropriate modelling concepts， is essential to overcome the complexity inherent in such a development. The modeling language described in this document is an extension of the OMGs Interaction Flow Modeling Language （IFML） standard， tailored to mobile applications.IFML provides a unique， concise visibility syntax to compact the aspects of the user interface that are otherwise expressed separately with UML class state diagrams.

Key Words：mobile application； front-end development；modeling； IFML； UML

0 引言

前端設(shè)計(jì)是一個(gè)復(fù)雜的任務(wù)，需要多學(xué)科知識(shí)，存在許多錯(cuò)綜復(fù)雜的觀點(diǎn)。前端在移動(dòng)應(yīng)用開(kāi)發(fā)中非常重要，用戶體驗(yàn)必須完美地適應(yīng)移動(dòng)應(yīng)用目標(biāo)。然而，移動(dòng)應(yīng)用交互的發(fā)展很大程度上仍然需要人為完成，其缺點(diǎn)在于會(huì)不可避免地產(chǎn)生一些錯(cuò)誤，導(dǎo)致移動(dòng)應(yīng)用開(kāi)發(fā)效率降低。

交互流建模語(yǔ)言（Interaction Flow Modeling Language，簡(jiǎn)稱(chēng)IFML）[1]2013年3月被OMG采納為標(biāo)準(zhǔn)規(guī)范，用來(lái)表示應(yīng)用前端的內(nèi)容、用戶交互和控制行為，支持平臺(tái)獨(dú)立的圖形化用戶界面描述。交互流建模語(yǔ)言支持獨(dú)立描述部署在桌面計(jì)算機(jī)、筆記本電腦、PDA和移動(dòng)電話等系統(tǒng)上的移動(dòng)應(yīng)用圖形界面，描述的重點(diǎn)是最終用戶感知的結(jié)構(gòu)和行為，而對(duì)移動(dòng)應(yīng)用的業(yè)務(wù)和數(shù)據(jù)組件結(jié)構(gòu)、行為的描述，僅限于對(duì)用戶體驗(yàn)有直接影響的方面[2]。

1 IFML介紹

IFML的重點(diǎn)在于交互式移動(dòng)應(yīng)用模型—視圖—控制器（MVC）中的視圖部分，它描述了視圖如何引用或依賴(lài)于應(yīng)用的模型和控件部分，并且允許設(shè)計(jì)者定義控制器必須處理的相關(guān)事件。

1.1 IFML模型

IFML模型[3]支持以下設(shè)計(jì)：①視圖結(jié)構(gòu)規(guī)范，它由視圖容器定義，它們之間是嵌套關(guān)系，由可見(jiàn)性及可達(dá)性組成；②視圖內(nèi)容規(guī)范，包括視圖組件的定義，即包含在視圖容器內(nèi)的內(nèi)容和數(shù)據(jù)輸入元素；③事件規(guī)范，由可能影響用戶界面狀態(tài)的事件定義組成。事件可由用戶的交互、移動(dòng)應(yīng)用或外部系統(tǒng)產(chǎn)生；④事件轉(zhuǎn)換規(guī)范，由事件對(duì)用戶界面的影響定義組成；⑤參數(shù)綁定規(guī)范，由視圖組件之間的輸入輸出的依賴(lài)關(guān)系和視圖組件與動(dòng)作之間的定義組成。事件的效果由交互流連接表示，它將事件連接到受事件影響的視圖容器或組件。交互流由用戶界面的狀態(tài)變化表示。

1.2 IFML開(kāi)發(fā)過(guò)程

IFML開(kāi)發(fā)過(guò)程[4]如圖1所示。IFML流程以迭代和漸進(jìn)的方式不斷重復(fù)和完善，直到結(jié)果滿足業(yè)務(wù)需求。開(kāi)發(fā)過(guò)程包括發(fā)現(xiàn)問(wèn)題、設(shè)計(jì)細(xì)化、實(shí)施等幾個(gè)周期。每次迭代都會(huì)產(chǎn)生系統(tǒng)的原型或部分版本，每次迭代都會(huì)對(duì)系統(tǒng)的當(dāng)前版本進(jìn)行測(cè)試和評(píng)估，然后進(jìn)行擴(kuò)展或修改。這樣一個(gè)迭代周期并不是移動(dòng)應(yīng)用開(kāi)發(fā)的主要方式，它適用于移動(dòng)應(yīng)用必須快速部署，且用戶需求可能隨時(shí)會(huì)發(fā)生變化的情況下。

（1） 需求規(guī)范。需求規(guī)范是應(yīng)用分析人員收集和正式確定應(yīng)用開(kāi)發(fā)范圍和預(yù)期功能等基本信息的活動(dòng)。它是一個(gè)面向用戶的精確而又易于理解的規(guī)范，這些規(guī)范幫助設(shè)計(jì)人員了解移動(dòng)應(yīng)用需要有哪些功能，并且在開(kāi)發(fā)應(yīng)用之前驗(yàn)證應(yīng)用規(guī)范是否符合業(yè)務(wù)需求。

（2）數(shù)據(jù)設(shè)計(jì)。IFML流程中的數(shù)據(jù)設(shè)計(jì)階段將數(shù)據(jù)源設(shè)計(jì)定位，從這些數(shù)據(jù)源中可以繪制移動(dòng)應(yīng)用內(nèi)容。

數(shù)據(jù)密集型移動(dòng)應(yīng)用的開(kāi)發(fā)可能在兩種不同的數(shù)據(jù)源場(chǎng)景中進(jìn)行：最簡(jiǎn)單的一種情況是，存儲(chǔ)移動(dòng)應(yīng)用內(nèi)容的數(shù)據(jù)源必須與移動(dòng)應(yīng)用一起設(shè)計(jì)，其中數(shù)據(jù)設(shè)計(jì)階段旨在為移動(dòng)應(yīng)用生成最佳的數(shù)據(jù)模式，并且生成的概念模式直接用于構(gòu)建存儲(chǔ)移動(dòng)應(yīng)用內(nèi)容的物理數(shù)據(jù)庫(kù)。移動(dòng)應(yīng)用管理的內(nèi)容已經(jīng)存在，并且已經(jīng)被某些數(shù)據(jù)存儲(chǔ)庫(kù)（數(shù)據(jù)庫(kù)或遺留系統(tǒng)）管理。在這種情況下，移動(dòng)應(yīng)用從現(xiàn)有數(shù)據(jù)源中提取內(nèi)容，并將其發(fā)布在移動(dòng)應(yīng)用頁(yè)面中。在第二種情況下，概念數(shù)據(jù)設(shè)計(jì)不受已經(jīng)設(shè)計(jì)和實(shí)施的數(shù)據(jù)源影響。

（3）前端設(shè)計(jì)。前端設(shè)計(jì)是將需求規(guī)范中提出的功能需求轉(zhuǎn)化為一個(gè)或多個(gè)移動(dòng)應(yīng)用，以體現(xiàn)所需的信息傳遞和數(shù)據(jù)處理活動(dòng)。前端設(shè)計(jì)將IFML模型運(yùn)行在概念層面上，這使得前端架構(gòu)師能夠在頁(yè)面內(nèi)組合數(shù)據(jù)對(duì)象，以及通過(guò)鏈接形成超文本。

前端設(shè)計(jì)基于IFML提出的概念和模型驅(qū)動(dòng)方法，是整個(gè)開(kāi)發(fā)周期的主要階段。它將應(yīng)用的頁(yè)面交付功能構(gòu)建在概念層面和視覺(jué)模型方面，這比在源代碼級(jí)別更為方便，并且更加定性[5]。

2 IFML模型與其它系統(tǒng)建模視角相結(jié)合

由于IFML是集成在MDA框架[6]中的，所以它可以與其它系統(tǒng)建模視角緊密結(jié)合。在IFML標(biāo)準(zhǔn)中，明確定義了3個(gè)方面：與內(nèi)容模型的集成，與業(yè)務(wù)邏輯的集成以及與業(yè)務(wù)流程模型的集成[7]。

2.1 與內(nèi)容模型集成

許多情況下，系統(tǒng)開(kāi)發(fā)都是從需求模型開(kāi)始（例如UML用例圖）。IFML可以使用戶交互模型的可跟蹤性達(dá)到相應(yīng)的需求規(guī)范。圖2說(shuō)明了IFML模塊用于解決用例或業(yè)務(wù)流程任務(wù)所需的用戶交互情況。

IFML模塊的執(zhí)行可能會(huì)導(dǎo)致一些系統(tǒng)內(nèi)部狀態(tài)更改，并動(dòng)態(tài)顯示在UML狀態(tài)圖[8]中。

2.2 與業(yè)務(wù)邏輯模型集成

為ViewComponent指定綁定內(nèi)容時(shí)，就可以實(shí)現(xiàn)IFML與內(nèi)容模型的集成。例如，圖3（a）顯示了ListViewComponent，它通過(guò)ContentBinding指定了一些內(nèi)容的發(fā)布，該ContentBinding建立了IFML圖和UML類(lèi)圖之間的引用，UML類(lèi)圖定義了“Product”類(lèi)。

當(dāng)ViewComponent或Action引用類(lèi)的方法或更復(fù)雜的行為（分別用BehavioralFeatureConcept和BehaviorConcept在語(yǔ)言元模型中表示）時(shí)，將指定IFML與業(yè)務(wù)邏輯的集成。具體來(lái)說(shuō)，BehaviorConcept和BehavioralFeatureConcept分別通過(guò)UMLBehaviorConcept和UMLBehavioralFeatureConcept進(jìn)行擴(kuò)展，這允許設(shè)計(jì)者直接引用UML類(lèi)方法或UML動(dòng)態(tài)圖（序列圖、活動(dòng)圖或狀態(tài)圖）。

圖3比較了將IFML元素與外部模型進(jìn)行集成的3種不同方法：引用領(lǐng)域模型類(lèi)（a）的DataBinding；引用特定UML方法（b）的DynamicBehavior和引用整個(gè)UML圖（c）的DynamicBehavior。引用可以嵌入在ViewComponents和Actions中。通常，ViewComponent的內(nèi)容是通過(guò)DataBinding進(jìn)行詳細(xì)描述的， 但也可以使用DynamicBehavior來(lái)指定，該動(dòng)態(tài)行為描述了提取或構(gòu)建ViewComponent內(nèi)容的邏輯。

2.3 與業(yè)務(wù)流程模型集成

IFML在業(yè)務(wù)流程模型方面的集成很重要，與部署在特定平臺(tái)設(shè)計(jì)模型方面的互補(bǔ)作用。圖4顯示了IFML模型與其它系統(tǒng)模型的關(guān)系：IFML模塊映射到UI模型[9]的元素，與UI模型共享一個(gè)公共命名空間，并且描述在一個(gè)UML部署圖中。

3 IFML在移動(dòng)應(yīng)用中的擴(kuò)展

移動(dòng)應(yīng)用具有豐富的界面，類(lèi)似于小型的桌面應(yīng)用程序，目的是最大限度地利用有限的可用空間[10]。本文以移動(dòng)家政服務(wù)系統(tǒng)為例，說(shuō)明IFML如何在移動(dòng)應(yīng)用中擴(kuò)展。本系統(tǒng)作為多個(gè)不同的移動(dòng)應(yīng)用提交到不同的Android和iOS系統(tǒng)應(yīng)用商店。

3.1 搜索服務(wù)

圖5顯示了用戶在搜索應(yīng)用提供的服務(wù)時(shí)應(yīng)遵循的基本步驟。搜索流程要求接收電子郵件的專(zhuān)業(yè)人員作為訂閱者來(lái)回復(fù)。

3.2 發(fā)布請(qǐng)求

在這個(gè)流程中，電子郵件的收件人將負(fù)責(zé)回復(fù)電子郵件，并與最終用戶進(jìn)行協(xié)商。

3.3 提供用戶

提供服務(wù)的流程非常簡(jiǎn)單：用戶注冊(cè)時(shí)，將在自動(dòng)匹配階段填寫(xiě)所有系統(tǒng)需要的數(shù)據(jù)。用戶在此階段需要提供工作地點(diǎn)和每周的工作時(shí)間。隨著可用性嵌入，用戶可以尋找廣告，或使用搜索服務(wù)，或等待接收電子郵件與工作機(jī)會(huì)。

4 結(jié)語(yǔ)

本文旨在通過(guò)提供用戶交互模式的理性分類(lèi)解決移動(dòng)應(yīng)用設(shè)計(jì)[11]中的問(wèn)題。以手機(jī)APP為例，每個(gè)模式都由IFML模型描述。本文還介紹了設(shè)計(jì)人員如何將IFML與其它建模語(yǔ)言集成，以獲得涵蓋系統(tǒng)前端和后端的視圖，確保交互模型與建立的其它模型之間具有可追溯性，在移動(dòng)應(yīng)用開(kāi)發(fā)中發(fā)揮應(yīng)有的作用。

參考文獻(xiàn)：

[1] BRAMBILLA M， BONGIO A， BUTTI S， et al.Interaction Flow Modelling Language （IFML）[EB/OL].[2013-03-08].http：//www.omg.org/spec/IFML/.

[2] MARCO BRAMBILLA， PIERO FRATERNALI. The interaction flow modeling language（IFML）， object management group （OMG）[EB/OL].http：//www.ifml.org， 2014.

[3] M BRAMBILLA， P FRATERNALI. Interaction flow modeling language，model-driven UI engineering of Web and mobile apps with IFML[C]. Morgan Kauffman， USA， 2014.

[4] IFML. Interaction flow modeling language [EB/OL].http：//www.ifml.org/.

[5] CHARLAND， ANDRE， LEROUX， et al.Mobile application development： mobile vs. native[J]. Communications of the ACM， 2011， 54（5）：78-83.

[6] 侯金奎，萬(wàn)建成，張玉艷.一種支持MDA的PIM建模方法[J].計(jì)算機(jī)工程，2007，33（8）：1249-1254.

[7] ERICKSON T. The interaction design patterns page[EB/OL].http：//www.visi.com/～snowfall/InteractionPatterns.html， retrieved August 2014.

[8] JEAN VANDERDONCKT. A MDA-compliant environment for developing user interfaces of information systems[C]. In CAISE， 2005：16-31.

[9] 吳昊.一種基于模型的用戶界面開(kāi)發(fā)方法[J].軟件，2015，36（8）：452-458.

[10] 徐巍.跨平臺(tái)移動(dòng)開(kāi)發(fā)框架的比較分析與實(shí)例開(kāi)發(fā)[J].吉林大學(xué)學(xué)報(bào)，2014，24（8）：66-67.

[11] KANGAS， EEVA， KINNUNEN， et al.Applying user-centered design to mobile application development[J]. New York： ACM， 2005，48（7）：314-319.

（責(zé)任編輯：杜能鋼）