基于手繪草圖的概念設計工具研究與設計

摘要：從認知心理學的角度，研究了概念設計的過程，探討性地指出輔助設計工具應當以靈感為中心。闡述了適合概念設計過程的新的設計方法和交互技術，并介紹了基于手勢的草圖技術及新一代交互范式——PIBG交互范式。全面分析了約束捕捉、約束求解等關鍵問題，最后在此基礎上給出智能圖板系統的設計與實現，為用戶提供了一種自然和諧的界面。

關鍵詞：草圖； 筆式用戶界面； 概念設計； 手勢； 約束求解

中圖法分類號：TP311文獻標識碼：A

文章編號：1001－3695(2007)01－0210－03

概念設計是設計過程的早期階段，目標之一是獲得產品基本形式或形狀[1]。廣義上講，它包含了從產品需求分析到詳細設計之前的設計過程，如功能、原理、形狀、布局和初步的結構設計等。這一階段所做的工作對其他階段有著重要的影響，占設計工作10%左右的概念設計工作一旦被確定，產品設計的75％左右也就被確定了[2]。

傳統CAD 系統雖然能產生精確和完整的幾何造型，但其本身并不是為概念設計而開發的，僅僅作為在設計方案基本定型之后的繪圖工具，而非輔助設計工具[1]。而且，大多CAD系統仍采用基于傳統WIMP的交互方式，設計者的思路往往會被頻繁的菜單選擇、按鈕操作和鍵盤命令輸入所打斷，其繁多復雜的菜單、按鈕也非常容易產生誤操作，降低效率，不利于創新設計。其實，設計者需要關注的應該是自己稍縱即逝的創作靈感，而不是設計工具本身。只有提供自然和諧的用戶交互方式，CAD系統才能真正成為支持創新設計的輔助設計工具[3]。

劍橋大學的Ferguson指出，設計者可以利用草圖探索新的想法，比較不同的方法并且捕捉靈感。Ullman認為由于人的STM（Shortterm Memory System）效應，及時將各種構思具體化是非常必要的。通過對機械設計人員的調查發現，利用草圖進行設計是設計人員最習慣用的方式，通過概念設計而得到的圖形幾乎100%都是以草圖形式存在的[4]。

本文著重分析了概念設計的規律，探討性地提出了以靈感為中心的交互模式。以筆作為交互設備，以手勢作為交互載體，以草圖作為信息載體，給出了智能圖板系統的分析與設計。

1草圖研究現狀

草圖是符號系統的一種特殊形式，具有語義、語法和模糊的特征，能滿足設計人員縱向和橫向的思維活動。通過手繪草圖，設計師可以定義圖形的大致輪廓形狀（以草圖形式表達的拓撲結構），將手繪圖形的信息轉換為幾何特征，將圖形的線型、線寬及其他信息轉換為屬性特征，對一個具體的圖形對象進行定義。當然，設計師可以隨時調整思路、修改草圖。可以認為草圖是形狀構造過程中一個不確定的狀態，設計師最為關注的信息便于保存于草圖中。

國際上對草圖技術方面進行了大量研究，也開發了不少原型系統，如UC Berkeley大學基于SATIN自由筆跡應用開發工具包，開發了DENIM和SketchySPICE兩個應用實例[5]。DENIM是個網站設計工具，支持概念設計階段的信息處理，允許設計者快速勾畫網頁，并支持手勢設計和筆劃處理；SketchSPICE系統是一個簡單的電路設計工具，用戶可以勾畫與或非門電路及其連接情況，其中加入了特定的識別特征和領域知識。

但目前這些系統大多集中于構思結果的表達上，而且對形狀構思過程的輔助支持力度不夠，并且國內對草圖技術的研究也完全停留在探索階段。

2以靈感為中心的交互模式

2．1概念設計過程分析 

軟件開發是一項龐大無序的工程，尚可從中提取規范，建立統一的開發過程。同理，雖然不同領域，其概念設計的具體實現過程不盡相同，但總有一定的規律，發掘并遵循統一的設計過程可以提高設計效率。

為達到某個目標，人們必須將目標轉換為意圖[6]，意圖接下來轉換為心理活動中的一系列指令，即滿足意圖所需要的一系列動作的順序，最終加以執行，才能在外部世界中產生效果。同樣，概念設計體現為一種連續的、過程化的操作。為設計出最終造型，設計師冥思苦想，激發自己的創造性思維，產生靈感，進而執行勾畫的動作。對應關系如圖1[6]所示。

圖1概念設計的行為模型

一般來說，概念設計大多數需要持續幾個小時，甚至幾天，其中有一連串的信息反饋，一個周期的結果被用來指導下一步的活動，一個模型有多個子視圖，大目標也可以細分成若干個子目標。由于人的短時記憶效應（Shortterm Memory），設計靈感更是轉瞬即逝，輔助工具即時記錄各種構思，并具體給予反饋，這是至關重要的。

圖1中兩條曲線代表至關重要的兩個環節：①將提供給設計師可操作的交互方式，以保存設計靈感的環節；②即時地接收信息并給予反饋。

輔助設計工具只有提供良好的交互方式，設計師才有可能自然地執行各種動作指令，將靈感存儲下來。總之，優秀的CAD系統關注的重點應該是設計師的意圖，而不是提供繁雜的按鈕、菜單，讓設計師忘記其實際目標。CAD系統設計得不好，則很容易將原有的目標遺忘，那失去的將是最為寶貴的創作靈感。

2．2適合草圖的PIBG交互范式

無處不在計算[7]的概念是由Mark Weiser提出的，即遍布各地的計算不再依托于某類單獨設備來完成，而是分布在整個環境中，是不可見的。不可見是指計算機的顯性服務方式消失，是人類心理上的某種作用。當人類對某些事物掌握得足夠好時，這些事物就會成為我們生活不可或缺的一部分，就會慢慢地忽略它們的存在。一個最好的例子就是，書寫以及筆和紙的出現，而后發展到今天的紙張“無處不在”，書寫成了人人都掌握的技能。

無處不在計算其隱含的人機交互方式不像目前基于鍵盤鼠標和顯示器的人機交互方式，更像現實世界中人與人的交互。首先，草圖設計的交互方式不再模擬桌面環境，而是模擬人在紙筆環境下進行交互。也就是說，與WIMP 交互方式相比，界面的隱喻（Metaphor）由桌面環境（Desktop）變為紙筆環境（Pen/Paper）。在Pen/Paper 隱喻下，WIMP 交互范式已變得不再適用。其次，由于筆式交互與基于鼠標和鍵盤的交互相比具有信息連續性、信息多維性等新的特征，如何在新的交互范式中利用這些新的交互特征也是需要研究的問題。同時，筆式用戶界面具有交互隱含性的特征。在筆式用戶界面中，人們所追求的是一種自然的、隱式的交互方式。在這種方式下，用戶在與計算機進行交互時所關注的是交互任務本身，而不是如何來執行交互任務。這種方式能極大地提高人機交互的效率，但對于界面的開發者來講卻是一項非常困難的工作。

我們主要針對這三個方面，提出了PIBG 交互范式[8]。在PIBG 范式中，承載應用信息的交互組件由窗口（Window）變為物理對象（Physical Object），P 是這一類交互組件的統稱，主要包括Paper 和Frame 兩類交互組件。I（Icon），B（Button）表示此范式中與具體語義無關的直接操縱組件。在該范式中摒棄了Menu 類的交互組件，盡量多地使用Icon 和Button，這樣可以大大增加直接操縱在整個交互方式中的比例，提高系統的操作效率，其中取消Menu組件也是未來主流的交互方式。G （Gesture）是指該范式中所采用的主要交互方式。與WIMP 交互方式比較，用戶的交互動作由鼠標的點擊（Pointing）變為筆的Gesture。手勢是具有一定意義的運動軌跡，即一系列線條的組合，它在繪制比劃中直接包含了操作命令、操作數以及某些操作參數，草圖過程可以由一系列動態手勢完成。

用無處不在計算觀點來分析，PIBG交互范式的自然性主要體現在三個方面：①用戶交互工具的自然性，即用筆來進行操作；②手勢交互方式和草圖作為信息載體的自然性；③結合上下文感知技術，交互過程中智能計算的不可見。

3系統分析和設計

3．1任務分析

草圖設計過程可以分為草圖勾畫與約束求解兩步。例如在建筑草圖中，草圖勾畫是指用筆粗略繪制墻體的大致拓撲結構的過程，通過草圖勾畫，初步表達了墻體與墻體節點的關系。如圖2所示，該建筑圖紙描述了房間的拓撲結構。

然而設計師總是不斷調整思路、修改草圖，當然很多情況下都僅僅是局部的小調整。例如：設計師試圖將墻AB縮短，其他房間應當保持原狀。系統必須隱式或者顯式地捕捉草圖中的各種約束，以保持幾何元素之間固有的這些約束關系。

設計人員很多時候也希望保留原始筆跡。系統不應該強制奪走用戶的控制權，因此草圖支持原始草圖和規整草圖兩種方式，系統通過實時分析、約束求解，將規整草圖展現給設計師。規整草圖在設計過程中發揮著重要作用，系統根據輸入墻體的尺寸，計算各個墻體節點的位置，使設計師可以實時檢驗輸入的手繪草圖的正確性，以及依據當前的識別效果思考下一步將要進行的工作。系統為對象建立對應的ID，通過ID將兩類草圖的數據關聯起來，實現兩者的數據相關和操作相關。

總之，草圖工具的設計應以靈感為中心，以用戶習慣的方式或者特有的方式進行交互和反饋。系統根據觀察到的用戶動作，對捕捉到的約束關系進行分類，解釋用戶輸入，推知動作之后所隱含的特定目標信息，以便系統根據用戶意圖做出相應的動作。對不能解釋的用戶操作，應該能進行識別、分類，進而補償錯誤，向用戶適時地提供建議。

3．2約束的分類及捕捉

（1）約束分類。

設計過程中的約束主要有幾何約束和工程約束兩類。工程約束與具體領域相關，面向概念設計，主要考慮的是幾何約束；幾何約束又分為拓撲約束和尺寸約束，概念設計階段對尺寸沒有嚴格要求，允許欠尺寸的情況存在。

拓撲約束是指幾何元素之間的拓撲結構關系，體現圖形元素與圖形元素的關系，如平行、垂直、水平、豎直、相切、共線、同心等，稱為拓撲約束。它描述了幾何元素的空間相對位置和連接方式，其屬性值在參數化設計過程中保持不變。它在工程圖中往往是隱含的，并不明確給出。

（2）約束捕捉。

約束可通過系統自動識別或者用戶強制添加。如圖3所示，設計師可通過直角符號來設置相互垂直的兩條相交線。系統自動識別的約束稱為主動捕捉的約束，主動捕捉按建立方式又分為隱式主動捕捉和顯式主動捕捉。隱式主動捕捉約束是指識別后直接建立幾何元素之間的約束關系，并不需要用戶再次確認；顯式主動捕捉約束則是指識別后，需要由用戶決定是否確定此約束關系。例如水平、豎直，我們將它們定義為隱式主動捕捉約束；而垂直、平行、相切等約束的建立我們采取顯式主動捕捉的規則。這樣設計符合用戶的操作方式（3.1節），適度地將某些任務化繁為簡。

編輯過程中系統自動捕捉約束，并高亮顯示給出及時反饋，通過上下文，判斷顯式或隱式類型，自動建立隱式的約束，對顯式約束給予提示。用戶根據設計意圖采用手勢完成確認操作，從而減少頻繁的提示，降低用戶的厭煩情緒。

系統同時支持對約束的取消操作，選中元素，通過手勢命令，刪除兩兩約束。筆者根據人們的認知習慣提供了熟知的手勢命令。圖4給出了實例說明，高亮的圓與豎直的線相切。

人們習慣于對規整草圖進行約束的添加或者刪除，對原始手繪草圖的操作相對隨意，帶有一定的模糊性，因此不必顯式地給出對原始手繪草圖的約束捕捉，即對原始手繪草圖來說，可看作是基于規整圖來完成的不可見的捕捉約束。規整圖中捕捉到的約束關系可關聯到原始手繪草圖中間，對規整草圖支持部分可見的約束捕捉（顯式約束捕捉可見）。在規整草圖中建立約束后，通過關聯將約束應用到原始手繪草圖中去，如圖4所示，虛線范圍內為選中對象，拖動對象，建立約束關系的對象可被一起拖動。

依照設計心理學的思想，加強可視性，以消除執行階段和評估階段的鴻溝。每當系統建立約束，應當給予一定的反饋，讓用戶感知到該約束關系的存在，如在兩垂直線間標注一個小小的直角符號等。

3．3約束求解 

在草圖編輯過程中，為記錄用戶的設計意圖，約束會逐漸增多。各種約束的同時存在可能造成過約束(OverConstrainted)或欠約束(UnderConstrainted)兩種情況。過約束指多種幾何約束同時滿足導致沖突的情況；欠約束指幾何約束不足，導致工程圖中部分尺寸無法確定的情況。

約束的匹配、排序以及分解是幾何約束求解方法的重要課題[10]。1963年，Sutherland[11]在其具有里程碑意義的SketchPad研究中，將CAD的概念定位于約束滿足問題，并進行了設計約束系統求解的初步嘗試。后來研發人員提出了人機交互的參數化方法，主要有變量幾何法、人工智能方法、基于輔助線的設計方法、基于構造過程的方法等。但概念設計階段中設計者和設計對象的某些特殊性，上述求解方法還不能很好地給予支持，如概念設計中，設計對象帶有一定的模糊性，沒有精確的尺寸或約束信息，這時需要手工為之添加約束等。

與傳統基于設計歷史的約束不同，由于自由勾畫是非線性的，設計師的靈感更是跳躍性的，其操作沒有嚴格的順序。本文針對約束匹配的多樣性以及自由勾畫的無序性，采用了基于時間戳的約束求解算法。通過對時序及空間信息進行預處理，建立起時序、空間相關性良好的空間圖形點集。本系統為每個約束附加時間戳，作為約束匹配的一個上下文元素，并采用十字鏈表存儲約束鏈，同時將多元約束轉換為兩兩間的約束，系統處理的均為二元約束。

3．4系統設計

從筆式文化的角度出發，智能圖板系統充分利用了手寫筆自由勾勒、自由輸入的特點，為用戶在計算設備上提供了一個概念設計環境，以捕捉設計師的創作靈感。

在該系統中，設計師可以像使用普通的筆和紙一樣，在草圖上自由地勾畫，系統智能化地將草圖信息存儲為標準的XML格式，提高了信息管理和使用效率。系統的大致界面如圖6所示。

圖5約束的保持

圖6系統界面圖

智能圖板由以下幾個模塊組成：

(1)數據導入/導出模塊。系統新建或者打開自定義格式的XML圖紙文件，根據版本號，采用相應的解析器進行處理。

(2)交互控制模塊。它包括原語產生和原語解釋等。系統將筆式交互界面消息層中的各類信息進行處理，形成筆式交互中基本的交互原語。目前有STROKE，TAP，HOLD_UP，HOLD_STROKE四種原語。這些原語通過組件中的原語解釋裝置進行解釋，形成特定的交互語義并執行。

（3）草圖識別、規整模塊。

（4）字符識別模塊。支持文字信息的錄入，如設計師姓名、注釋等。

（5）視圖，即顯示模塊。它負責草圖界面及草圖內容的顯示。

參考文獻：

［1］孫守遷，包恩偉，陳蘅，等. 計算機輔助概念設計研究現狀和發展趨勢[J]. 中國機械工程，1999，10(6):697700.

［2］Wynne Hsu，Lrene M Y Woon. Current Research in the Conceptual Design of Mechanical Products[C].ELSEVIER， 2002.377389.

［3］C L Philip Chen， Sen Xie. Freehand Drawing System Using a Fuzzy Logic Concept[J]. ComputerAided Design， 1996， 28(2):7789.

［4］D G Ullman， B D’Ambrosio. A Taxonomy for Classifying Engineering Decision Problems and Support Systems[J]. Artificial Intelligence for Engineering Design， Analysis and Manufacturing， 1995，9:427438.

［5］Lin J， M Newman， J Hong， et al. DENIM: Finding a Tighter Fit Between Tools and Practice for Web Site Design[C]. CHI Letters: Human Factors in Computing Systems， CHI’2000， 2000.510517.

［6］Donald A Norman. The Design of Everyday Things[M]. MIT Press， 2002.4849.

［7］Mark Weiser. The Computer for the TwentyFirst Century[J]. Scientific American， 1991，265(3):6675.

［8］田豐，牟書，戴國忠，等. PostWIMP環境下筆式交互范式的研究[J]. 計算機學報， 20-04，27(7):977984.

［9］Chen Li Ping， Zhou Ji. Research of Geometric Constraint System Reasoning[J]. Journal of Huazhong University of Science Technology，1995，23(6):7074.

［10］I E Sutherland. SketchPad: A Manmachine Graphical Communication System[C]. AFIPS Spring Joint Computer Conference， 1963.323328.

作者簡介：

張超（1982），男，湖南永州人，碩士，主要研究方向為人機交互、軟件工程；滕東興（1973），男，山東萊西人，研究員，博士后，主要研究方向為計算機輔助設計、概念設計；戴國忠（1944），男，江蘇無錫人，研究員，博導，主要研究方向為人機交互、計算機圖形學等。

注:本文中所涉及到的圖表、注解、公式等內容請以PDF格式閱讀原文