可視化食用菌溯源系統(tǒng)的平面圖像交互設計*

葛 慧

（菏澤學院 美術與設計學院，山東 菏澤 274000）

近年來，農產品頻繁曝光的環(huán)境污染、農藥超標等食品安全事件，每次都會引發(fā)人們對農產品的不信任[1]。食用菌作為我國重要農產品，如何讓消費者放心食用、重拾對食用菌品質和安全的信心，同時提升食用菌產品在消費者心中的放心度和知名度，成為了食用菌行業(yè)發(fā)展必須要解決的問題。而食用菌溯源系統(tǒng)的建立為解決這一問題提供了可能。利用食用菌整個生產過程的追溯體系，通過建立批次和溯源實例關聯實現田間地頭的日常作業(yè)數據，食用菌農產品的生長可視化環(huán)境一覽無遺，將食用菌栽培基地的環(huán)境、水源、溫度、濕度、接種、采摘、包裝，配送、物流運輸等全部流程記錄到溯源系統(tǒng)上[2]。

1 食用菌溯源系統(tǒng)的數據可視化意義

食用菌溯源系統(tǒng)一旦實現了可視化操作，就可以通過簡單的拖拽操作快速設計完成美觀符合業(yè)務需求的圖表和界面[3]。

食用菌可視化溯源系統(tǒng)的開發(fā)與設計主要涉及2個方面的問題：1）溯源系統(tǒng)的質量追溯的具體設計和實現；2）如何借助于圖形化手段，清晰有效地傳達與溝通溯源系統(tǒng)中的大量數據和信息。為解決以上問題，首先是要有效地傳達平面圖像設計的思想概念，兼顧美學形式與功能需要；其次就是要強調人機交互的設計，將界面設計與平面圖像設計融合，設計好信息的傳遞和用戶交互。

2 溯源系統(tǒng)平面圖像的交互設計

對于食用菌溯源系統(tǒng)來說，用戶界面即人機交互界面，它是用戶與溯源系統(tǒng)的主要交互方式[4]。食用菌溯源系統(tǒng)是軟件，而安裝這個軟件的計算機稱之為硬件，人操作軟件和硬件，信息是在三者之間循環(huán)傳遞的，人機界面就是這三者的交匯處，見圖1。

如圖1所示，由于交互設計直接影響到溯源系統(tǒng)的使用質量和效率，而且溯源系統(tǒng)又是可視化的圖形界面。因此，可視化溯源系統(tǒng)中大量的平面圖像的交互設計就成為了人機交互設計的重點。

2.1 交互設計流程

2.1.1 界面對象、圖像或組件的定義

從溯源系統(tǒng)的各類輸入的交互中獲取界面設計所需要信息，進行界面對象、圖像或組件的定義，包括定義用戶的操作過程和圖形界面的反饋信息。食用菌溯源平臺的用戶交互界面示例見圖2。

如圖2所示，1）圖形界面的最上面一行為菜單欄，顯示了支持溯源查詢的幾種食用菌，用簡單的標準宋體文字呈現。2） 圖形界面主體部分左邊顯示了2組食用菌產品的詳細信息。上面用黑體顯示食用菌的名稱和規(guī)格，用黑體是為了突出產品的名稱。中間部分為“包裝產品+內部實物”的圖片方式來讓人直觀感受到食用菌產品本身的品質。下面第一行則顯示了該類產品下市的時間，紅色的天數更是區(qū)別于一般銷售網站銷售的產品，證明了該食用菌產品可追溯的重要特征，中間幾行顯示了基本的生產廠信息，最后一行則用黑色給出了具體的上市時間，一目了然，與第一行的紅色字形成對比，而且還給出了“去看看”的按鈕，以便下一步給出更加詳細的產品介紹。3） 圖形界面右邊則是溯源系統(tǒng)的核心查詢功能，該溯源系統(tǒng)給出的是食用菌生產記錄的溯源查詢，用戶只需要輸入18位溯源編號，點擊“立刻查詢”按鈕就可以進行多種溯源信息的查詢。在這個溯源查詢功能的交互設計中，需要設計文本框用于輸入溯源編號，設計數字按鈕用于錄入，設計“清除”和“退格”按鈕用于刪除修改錄入編號，再加上“立刻查詢”按鈕就完成了輸入信息的交互。而輸出信息則在后面的交互設計中予以呈現。

2.1.2 設計各個界面的布局和串聯圖板。

將溯源系統(tǒng)的功能與各個界面設計一一對應起來。如圖2所示，點擊“去看看”按鈕后，就可以進入產品的詳細信息界面。之所以在圖2中設計這個“去看看”按鈕，主要目的是為了統(tǒng)一美觀，對多個食用菌產品統(tǒng)一界面風格和大小，形成一致性的布局。如圖2中每個食用菌品種占用的界面面積和形狀是一樣的，內容構造和所使用的色彩布局是統(tǒng)一的，顯示的模式和對象也都完全一致。這樣的統(tǒng)一界面不僅符合美學設計理念，而且統(tǒng)一布局在下面的產品詳細信息界面也同樣存在。圖3給出了東北椴木黑木耳的產品詳細信息界面，在這個界面交互設計中的“展開全部”按鈕也是為了頁面的統(tǒng)一，對多于4行的產品介紹文字進行了折疊。只有點擊“展開全部”按鈕后才會顯示后續(xù)的產品介紹文字，這樣做就保證了整個界面大小的統(tǒng)一性，對食用菌產品介紹的字數多少不會影響頁面的布局大小。

2.1.3 導航欄設計。

在最右邊的導航欄設計也體現了頁面風格的一致性，見圖3。

如圖3所示，分別點擊“產品介紹”“基地信息”“菌種信息”“農事信息”“資質榮譽”和“評論留言”就可以分別查看不同的詳細介紹。同樣，這些界面的設計也是統(tǒng)一的風格，見圖4。

如圖4所示，為食用菌農事信息界面，右邊一模一樣的導航欄，下邊的圖片只設計了4個位置用于顯示各種證書圖片，但左右各設計了一個滾動箭頭，用于查看更多的圖片。圖4中只給出3張榮譽證書圖片和1張質量檢驗圖片，而其它的商標注冊圖片、食品生產許可證圖片和包裝圖片等并沒有全部顯示。這與圖3中的“展開全部”按鈕的設計理念是完全一致的。

2.1.4 利用美學設計理念來優(yōu)化界面交互和布局

如在界面交互圖像的色彩設計上，由于食用菌屬于綠色健康食品，其本身代表的就是營養(yǎng)美味和健康，在色彩的選擇上可以使用自然原生態(tài)的顏色，見圖5。

如圖5所示，評論留言界面中使用的淡黃色，給人輕松愉快，充滿希望和活力的感覺。傳遞給消費者的信息就是溯源系統(tǒng)樂意接受并以積極的姿態(tài)來面對各種留言。同時，黃色也是黃土地的代言色，通過這種色彩的優(yōu)化，就更能體現食用菌的天然生態(tài)特征。

2.2 交互元素的設計

食用菌溯源系統(tǒng)的交互元素主要包括菜單、對話框、導航欄和各種按鈕控件等。這些交互元素構成了整個圖形界面的布局，交互元素整體設計應符合食用菌溯源系統(tǒng)的特點，如綠色、生態(tài)、安全等。因此交互元素的設計也要與整個界面的設計相適應，定義為統(tǒng)一的交互、導航和內容顯示模式，交互元素的風格與頁面的風格一致，在視覺效果上，要具有美感[5]。下面是幾種食用菌溯源系統(tǒng)使用的主要交互元素。

2.2.1 菜單交互元素的設計

菜單是整個系統(tǒng)功能的體現，也是與用戶進行交互的常用技術，用戶通過鍵盤移動、鼠標點擊或者觸控來選擇菜單項目。菜單的交互設計主要包括菜單的形式、屏幕布局、切換及響應方式設計等，有的菜單還需要設計有幫助功能。1）菜單的交互形式主要有文字菜單和圖形菜單兩種，文字菜單項只有文字列表供用戶選擇，用戶點擊或移動光標來選擇菜單項目；而圖形菜單則帶有一些符號、圖標甚至直接是一個圖形，并通過不同的圖片形狀和色彩組合來顯示其獨特的功能，如手機屏幕上顯示的各種軟件應用（App） 圖標，本質上也是一種圖形菜單。這種以圖形符號來顯示的菜單更加直觀形象，已經成為了主流的菜單交互方式。2）菜單的屏幕布局是指菜單在屏幕上出現的位置和大小形式，有固定某一個位置的菜單，也有可以移動的菜單（活動菜單），為了減少屏幕顯示面積，不影響主窗口的工作，固定菜單一般都被設計在屏幕的上、下、左、右的4個邊框處，而且一般固定菜單面積不能超過整個屏幕尺寸的1/4。

2.2.2 對話框的交互設計

對話框是用于顯示輸入輸出信息的矩形區(qū)域（窗口），主要由一些圖形、控件和文字信息組成。一般對話框的大小都是設計之初就確定的，后期不能通過拖動改變對話框的大小。對話框主要由標題欄、選項卡（標簽）、文本框、列表框、命令按鈕、單選按鈕、復選按鈕等控件組成，是菜單或按鈕操作的后續(xù)交互操作。對話框以彈出的方式再現，而且彈出時會覆蓋某個區(qū)域的屏幕內容，只有退出時才能恢復覆蓋區(qū)域的顯示。在食用菌溯源系統(tǒng)中，對話框常被用于應答交互，主要有2種方式。一種是彈出對話框后，用戶必須錄入或應答問題以完成對話，否則系統(tǒng)不進行任何其它的操作，對話框也不會消失，如常見的“是否繼續(xù)查詢溯源碼”對話框，用戶就必需下面回答“是”或“否”才能退出該對話框；另外一種就是無須應答式的對話框，對話框中只是顯示相關的信息，并不需要用戶回答或操作，這種對話框不會影響系統(tǒng)繼續(xù)運行。

2.2.3 導航欄的交互設計

導航欄主要有滑出式、全屏式、滾動式和垂直式導航等幾種?；鍪綄Ш阶層脩舸蜷_頁面可以首先看到界面的主要內容而不是導航欄，用戶的體驗更好；而全屏式導航則更強調界面的設計內容，用戶可以更加便捷地切換到不同的頁面；滾動式導航需要通過上下滾動的方式來顯現不同的界面內容；垂直導航就是一種以垂直方式排版的導航欄，如上文圖3中的和圖4右側的導航菜單就是一種垂直式導航欄，其特點是視覺體驗較好。

3 結論

食用菌可視化溯源系統(tǒng)的界面交互設計要本著友好、美觀、簡單舒適的設計原則，設計者需要根據界面內容的重要程度，靈活使用不同規(guī)格的交互方式，全方位考慮交互設計的視覺效果，平面圖像設計內容的布局設計、位置擺放、色彩搭配、導航和菜單設計方式等都會對視覺產生影響。本文更多地是從技術的角度討論了交互設計的思想，但由于人機交互界面設計所涉及的范圍很大，除了技術因素外，用戶心理因素、認知工程和美學因素等都會對交互性產生影響。后續(xù)還需要從用戶需求習慣、心理認知等角度全方位研究交互問題。