移動應用界面導航設計模式研究綜述

熊彩鈴，唐文博，王慧亞

（四川大學計算機學院，成都610065）

0 引言

隨著移動互聯(lián)網的發(fā)展和智能手機的普及，移動應用程序已經成為人們生活工作中不可或缺的一部分。人民網研究院編撰出版的《中國移動互聯(lián)網發(fā)展報告（2019）》[1]指出，截止2018 年12 月，中國市場上監(jiān)測到的移動應用為449 萬款。對應用開發(fā)商而言，為使自家應用具有市場競爭力，除保證應用功能可以滿足用戶期望外，還需保證移動應用界面導航的質量，因為在移動應用界面中，導航就像交通一樣，用戶要通過交通方式去想去的地方，也同樣需要通過界面導航去想去的頁面。合理的導航設計能夠讓用戶非常容易地完成任務，不合理的導航設計則會讓用戶在界面中“迷路”[2]。用戶界面導航影響著用戶對應用的感知和體驗，其質量好壞是評估應用是否成功的重要指標。然而，隨著應用系統(tǒng)復雜度的增加，設計一個易于學習又吸引人的界面導航也變得越發(fā)困難。

為了解決上述問題，很多研究者提出了與移動應用界面導航設計相關的模式。它們封裝了前人的界面導航設計知識與經驗，不僅可以保證用戶界面的可用性，還可以幫助界面設計人員對已有導航設計進行重用，提高設計效率[3]。已有研究提供了很多支持移動應用界面設計的模式集，大部分都對導航類界面設計模式集做了專門介紹。本文基于已有模式庫中的導航類設計模式，對其分類、描述模型進行綜述、對比和分析，以期為未來開展關于導航類設計模式研究提供可能的方向。

1 導航設計模式的定義

設計模式這一概念最先由Alexander 提出[4]，是針對建筑領域反復出現的設計問題而給出的有效解決方案。隨著知識重用的提倡，Gamma 等人[5]將設計模式應用到軟件工程中，使用軟件設計模式來封裝成功的軟件設計方案。在人機交互領域，Norman 等人[6]在其研究首次引入設計模式的概念，將界面設計模式定義為針對特定界面設計問題，經檢驗是有效的解決方案。導航設計模式是眾多界面設計模式中的一大類，是解決界面導航設計問題的解決方案。

相較于臺式電腦和筆記本電腦等設備，移動設備具有不同的屏幕類型、屏幕大小、使用場景和使用方法[7]。因此，Web 應用界面導航設計模式和移動應用界面導航設計模式也有較大差別。本文僅討論移動應用的導航類界面設計模式。

2 導航設計模式的分類

導航類界面模式是導航設計問題的解決方案，它不是抽象的設計原理，也不是多樣的風格設計原則，而是一種可操作性較強的指南。因此，在移動應用界面導航設計過程中，界面模式可以提供有效支持。當前已有很多界面模式庫，它們都提出了導航類設計模式集，以便支持界面設計者學習、查找、重用模式。

導航設計模式為模式集中的一大類，而根據導航設計問題的不同，其下又可分為很多小類。不同作者采用了不同的分類方法組織這些導航設計模式。本文通過對模式庫[7-11]進行研究對比發(fā)現，不同作者對同一類設計模式的命名不完全相同，例如模式庫[7]中提出的鏈接列表模式對應模式庫[8]中的跳板模式，模式庫[8]中提出的陳列館模式對應模式庫[9]中的層疊圖庫模式。基于共識驅動的迭代方法，3 位人機交互專業(yè)的研究人員分別檢查模式庫中介紹的導航模式類別，并將它們在外觀和功能上進行合并，得到導航設計模式的分類結果后，3 位研究人員再一起討論，直到達成一致結果。最后得到的導航設計模式分類結果如表1 所示。

3 導航設計模式的描述方法

設計模式之父Alexander 最初通過三個屬性來描述設計模式，即上下文環(huán)境、設計問題、相應解決方案[4]。在界面設計模式領域中，研究者延續(xù)了Alexander 提出的描述方法并將其擴展。經過多年探索，當前人機交互研究者總結了很多擁有特定屬性框架的模式庫。例如模式庫[7]在對包括導航類設計模式在類的界面設計模型描述時，使用了6 個描述屬性，分別是：工作原理、示例、使用的時機與場合、使用的原因、其他應用、是否適合平板應用；模式庫[8]使用了2 個描述屬性，分別是模式外觀、示例；模式庫[9]使用了7 個描述屬性，分別是解決的問題、解決方案、意義、是否適配大屏幕、思考與批判、技術實現、示例。這些模式庫以自然語言的方式，通過屬性描述導航設計模式，可以幫助設計人員學習理解模式的作用，支持其后續(xù)設計。但不同模式集合選擇了不同的屬性來描述導航設計模式，也加劇了模式應用的困難。

為統(tǒng)一界面設計模式的描述，在CHI 研討會上研究者提出了PLML[12]模式描述語言。該語言通過16 個屬性來形式化描述界面設計模式，包括模式ID、模式名字、模式別名、設計問題、解決方案和示例等。通過PLML 規(guī)范，可以識別跨集合的公共元素，使不同作者的模式能夠組合成特定的主題集合，甚至可以組合成更大的元集合。之后，基于PLML 又出現了PLMLx[13]和XPLML[14]模式描述語言，PLMLx 增加了支持搜索功能。XPLML 提供了包括統(tǒng)一界面設計模式形式、語義元數據、模式間語義關系等模塊的描述性框架。雖然這些描述語言在統(tǒng)一設計模式描述方面有所貢獻，但它們也僅僅描述了模式的基本信息，這些基本信息支持設計人員學習和理解模式，但對界面開發(fā)人員來說，這些描述語言并未提供關于如何實現模式的信息，需要開發(fā)人員有界面設計模式的領域知識和編碼能力。

表1 移動應用界面導航設計模式分類

文獻[15]提出了面向工程的設計模式形式化描述模型，模型從工程角度出發(fā)，通過四元組EUIDP=＜DataModel, InteractionObjects, BehaviorModel,Presentation ＞來描述包括導航類界面設計模式在類的所有界面設計模式，包括了數據維度、交互對象維度、行為維度、展示維度的所有屬性的形式化描述。其中數據維度給出了當前界面設計模式的內部數據，交互對象維度指明了界面上用于呈現數據的交互對象，行為維度表示模式支持的所有操作，展示維度指所有與展示相關的屬性特征。

文獻[16]提出了一種基于原語的界面設計模式形式化描述模型，將其用于指導界面代碼的自動生成，以提高用戶界面開發(fā)效率。本項研究從三個維度對界面設計模式描述，即屬性維度、操作維度和展示維度。其中，屬性維度定義為Attribute= ＜AName, AType, APO ＞，描述了屬性名、屬性類型以及用于展示屬性的控件；操作維度定義為Operation=＜RType, OName, OPS ＞，描述了操作返回結果類型、操作名、操作參數；展示維度定義為

Present Property= ＜M arg in, Layout, Appearance,PSO ＞，描述了設計模式內控件集合與邊界間的間距、控件集合的布局、設計模式的外觀、以及設計模式的風格。

文獻[17]將復雜界面視為多個設計模式的組合，以此來簡化復雜建模。另外，作者在文中還提出了設計模式的描述模型，UIDP=＜Data Set,Property Set,Action Set, Present Set ＞，該模型基于符合數據集概念，在數據集、屬性集、操作集、展示集四個方面對設計模式進行描述。其中，數據集描述了界面數據信息，屬性集描述了界面上可見控件的信息，操作集描述了界面允許的交互信息，展示集描述了最終界面的展示信息。

4 結語

面向移動應用的界面導航設計模式蘊含了前人的設計知識和經驗，可以為界面設計提供良好的支持。通過對現有研究的總結與分析，本文發(fā)現關于面向移動應用的導航設計模式還有以下幾方面可以改進：

（1）當前模式庫對移動應用界面導航設計模式的分類方法各不相同，通過對這些模式進行總結與再分類，本文得到了5 類常見導航設計模式，分別是標簽類模式、宮格類模式、抽屜類模式、列表類模式、輪播類模式。但這樣的分類粒度還是較大，在每類導航模式下，根據模式屬性的不同還可以得到很多模式變體，例如在宮格類模式中，將某些宮格比例適當放大，可以得到個性化的不等分宮格模式，在列表類模式中，根據列表項的組成元素不同，可以得到純文字列表模式、圖標列表模式和文字圖標組合列表模式。因此，當前還缺乏對導航設計模式的細粒度分類模式集。

（2）在界面設計模式描述領域，研究主要集中于兩個方面，分別是面向設計的設計模式描述方法和面向界面自動生成的設計模式描述方法。前者關注設計模式的基本信息，后者關注設計模式的實現，但它們都不能解決導航類界面設計模式的識別問題。若能從界面截圖中的設計模式展示樣式角度出發(fā)，提出面向識別的導航設計模式描述模型，將有利于模式庫的更新和導航設計模式的搜索。