葛 慧

（菏澤學(xué)院 美術(shù)與設(shè)計學(xué)院，山東 菏澤 274000）

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

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

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

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

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

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

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

2.1 交互設(shè)計流程

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

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

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

2.1.2 設(shè)計各個界面的布局和串聯(lián)圖板。

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

2.1.3 導(dǎo)航欄設(shè)計。

在最右邊的導(dǎo)航欄設(shè)計也體現(xiàn)了頁面風(fēng)格的一致性，見圖3。

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

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

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

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

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

2.2 交互元素的設(shè)計

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

2.2.1 菜單交互元素的設(shè)計

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

2.2.2 對話框的交互設(shè)計

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

2.2.3 導(dǎo)航欄的交互設(shè)計

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

3 結(jié)論

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