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

葛 慧

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

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

1 食用菌溯源系統的數據可視化意義

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

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

2 溯源系統平面圖像的交互設計

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

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

2.1 交互設計流程

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

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

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

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

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

2.1.3 導航欄設計。

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

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

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

2.1.4 利用美學設計理念來優化界面交互和布局

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

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

2.2 交互元素的設計

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

2.2.1 菜單交互元素的設計

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

2.2.2 對話框的交互設計

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

2.2.3 導航欄的交互設計

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

3 結論

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