基于用戶體驗的木材信息檢索系統界面設計研究

■馬 成，胡進波，周 強，鄭 磊，萇姍姍 Ma Cheng & Hu Jinbo & Zhou Qiang & Zheng Lei & Chang Shanshan

(1.中南林業科技大學材料科學與工程學院，湖南長沙 410004 2.上海立邦長潤發涂料有限公司，上海金山 201500 3.希美埃（蕪湖）機器人技術有限公，安徽蕪湖 241000）

1 基于用戶體驗的系統設計方法概述

1.1 用戶體驗模型

用戶體驗設計模型是由James Garatte提出的一種設計模型。此模型將用戶在使用系統過程中抽象的用戶體驗具象成5個要素層（圖1）[6]：①戰略層，用戶需求和用戶目標；②范圍層，功能規格和內容需求；③結構層，交互設計和信息架構；④框架層，界面設計、導航設計和信息設計；⑤表現層，視覺設計。這五個要素層自下而上地構成了整個用戶體驗設計模型，在每個要素都經過合理的分析和設計后才能夠鑄造出一個用戶體驗良好的軟件系統。

1.2 基于用戶體驗模型的系統設計方法

用戶體驗模型作為一種設計模型為系統的設計研發提供了一種理論基礎，而在進行設計實踐時我們需要一套可以遵循的設計方法[7]。通過對用戶體驗模型的5個要素進行分析，總結出一套基于用戶體驗模型的系統設計方法（表1）?；谟脩趔w驗模型的系統設計方法描述了系統的設計流程、設計工具以及產出物。

基于用戶體驗模型的系統設計方法中的設計流程依次為設計調研、需求轉化、功能架構、界面設計和視覺設計，在全設計流程中都需要重點關注所涉及到的設計工具及產出物：①設計調研：運用競品分析、用戶訪談、用戶畫像、調查問卷等方法，確定系統目的、目標用戶群體、目標用戶群體需求；②需求轉化：將設計調研中所分析得出的用戶需求轉化為系統內容需求和功能規格；③功能架構：對于信息展示型系統而言，功能架構的主要工作為信息架構。對于功能型系統而言，功能架構的主要工作為交互設計，輸出物為站點地圖和功能規格說明；④界面設計：對系統界面的按鈕布局、功能區域等進行設計和排布并輸出線框圖[8]。需要注意的是在界面設計環節應該遵循基本交互設計原則[9]；⑤視覺設計：使用色彩、圖標、插畫等視覺元素對界面進行設計，并借助Sketch、Adobe Photoshop、Figma、Adobe Xd等設計軟件輸出高保真原型。

表1 基于用戶體驗模型的系統設計方法

■圖1 用戶體驗設計模型

■圖2 系統站點地圖及功能說明

■圖3 系統總體線框圖

基于用戶體驗模型的系統設計方法能夠保證系統良好的用戶體驗，并使系統的設計有序進行。基于用戶體驗模型的系統設計方法還能夠將設計任務分發給不同領域的專業人才，從而實現大型系統和專業系統的研發[10]。本文接下來將以木材信息檢索系統為例，對本方法進行設計實踐。

2 木材信息檢索系統設計實踐

2.1 設計調研

2.1.1 木材信息檢索系統現狀

木材信息檢索系統的主要功能是查找特定木材的相關信息。所以分析對象包括木材信息書籍和木材信息查詢系統。其中木材信息書籍選擇《中國木材志》作為分析對象，木材信息系統選擇“木材標本管理系統”和“世界主要商用木材信息查詢系統”為分析對象。

《中國木材志》作為一本專業木材信息書籍，收納了非常全面且權威的木材信息，適用于科研、教學、生產等領域。但是以書籍作為信息載體和檢索工具，有其無法克服的劣勢。比如，尺寸過大、重量過重、檢索方式不靈活等。而“木材標本管理系統”和“世界主要商用木材信息查詢系統”以軟件系統作為木材信息的載體，擺脫了傳統書籍的這些劣勢，能夠通過web高效便捷的查詢大量木材信息。但是，這些系統的信息架構方式不合理、檢索方式不合理、交互不合理、視覺體驗差等缺陷造成整體較差的使用體驗。

根據前面的分析，筆者認為中國目前政治、社會制度的條件，比如傳統的集權影響、幅員遼闊差異巨大、社會自治基礎和能力不足等，不具備央地徹底分權模式的條件，可行的模式是應該探索中央統一領導、地方授權執行的分權模式，在其中不斷探索合理授權地方的機制，從而實現央地之間權責內洽的機制建立。

通過木材信息檢索系統現狀分析發現，用戶需要一款能夠同時滿足使用體驗良好和便攜需求的木材信息檢索系統。

2.1.2 系統設計目標以及用戶群體設定

基于用戶體驗的木材信息檢索系統（以下簡稱“用戶檢索系統”）用戶群體為專業師生、科研人員、家具導購員、消費者，這些用戶共同需求為快速、便攜、用戶體驗良好，而差異性需求則是使用者對木材信息的關注點不同。通過分別對這四類用戶群體進行用戶訪談，歸納出差異性需求為：高校師生比較關注系統性的木材知識[11]；科研人員更關注某一種木材的物理特性、化學性質、微觀結構等專業信息；而家具導購員和消費者則側重于木材性質對家具使用特性的影響[12]。

用戶檢索系統的設計目標為可以滿足專業和業余人士不同需求，隨時隨地快速檢索和查詢木材信息，且用戶體驗良好的木材信息檢索系統。

2.2 需求轉化

2.2.1 功能規格

用戶檢索系統的功能規格包括檢索功能和搜索功能。其中檢索目錄的類別包括按科屬種、用途、分布地區檢索；搜索的關鍵字段則包括木材中文名、木材英文名、木材別名、木材拉丁學名、木材簡介、分布地區、供應情況、物理和力學性質、加工性能、耐用性、主要用途和供應商信息等。

2.2.2 內容需求

通過用戶群體需求分析以及競品分析后確定的系統內容可以歸納為木材詳細信息數據庫、木材物理化學性質數據庫、木材的加工性能數據庫、木材應用范圍數據庫、木材供應商數據庫。用戶檢索系統各個數據庫中的木材名稱、圖片、物理和力學性質等信息數據都來自于“美國闊葉木指南”[13]。

木材詳細信息數據庫內容包括木材中文名、木材英文名、木材拉丁學名、木材別名、木材簡介（包括圖片和文字）、分布地區和供應情況、木材的基本特性、木材的物理和力學性質（包括文字和物理化學性質的圖表信息）、木材的加工性能（包括文字和加工特性的圖表信息）、木材的耐用性、木材的主要用途、其他資料、木材的供應商；木材的物理化學性質數據庫包括文字說明、比重、平均重量、平均體積收縮率、斷裂模具、彈性模具、壓縮強度、硬度；木材的加工性能數據庫內容包括鋸、刨、鉆、打孔、車切、雕刻、成形、釘釘、上木螺釘、膠著性、涂飾；木材供應商數據庫內容包括供應商名稱、聯系人名稱、聯系電話、備注；木材應用范圍數據庫包括門、地板、家具、細木工制品、櫥柜、裝飾線條和車制品、單板貼面鑲板、體育用品、工具手柄，其中每一種應用途徑對應一個圖標和一段文字。

2.3 功能架構

根據用戶檢索系統的需求設計出系統的站點地圖以及功能架構。系統分為首頁、陳列室和木材詳情三個主要頁面（圖2）。

用戶檢索系統首頁包括了搜索和檢索功能，其中搜索功能支持多種字段的搜索；陳列室頁面通過木材展板來展示搜索結果，并可以使用篩選器面板對搜索結果進行進一步篩選；木材詳情頁面用來展示所選擇木材的具體信息。

■圖4 首頁

■圖5 陳列室頁面

■圖6 詳情頁面

2.4 界面設計

木材信息檢索系統的總體線框圖如圖3所示。

首頁通過搜索框組件來實現搜索功能，輔助隨機變化的背景圖片，能帶來沉浸式的使用體驗。檢索目錄分為兩級菜單，用戶通過一級菜單在科屬種、用途、分布地區等目錄類別之間進行選擇，通過二級菜單進入到相應類目的陳列室頁面。

陳列室頁面頂欄顯示logo、搜索框以及返回按鈕。左側的篩選器以列表形式呈現，列表內容會根據在首頁檢索時選擇的目錄類別而有所不同。木材展板區域，木材的預覽信息包括木材紋理預覽圖片、木材中文名、木材英文名，信息以卡片形式網格排列。

木材詳情頁面分為名稱面板、導航欄、詳情面板三個部分。其中名稱面板和導航欄固定在頂部，用戶通過點擊導航欄內的標簽能夠快速地跳轉至相應錨點。詳情面板能夠向上滑動來展示更多信息。

2.5 視覺設計

根據界面設計的產出物線框圖，使用Adobe XD設計軟件對視覺元素進行細節設計，輸出高保真界面。

從整體風格來看，系統采用綠色和深綠作為主色來突出木材的自然特性。系統采用卡片式設計，這種設計方式具有形式簡潔、信息結構清晰等優勢，能夠滿足多種人群的審美和實用需求[14]。系統標志采用了扁平化設計風格，這種風格取消了視覺設計中的陰影、漸變、透視等元素，更加專注于信息的傳達[15]。系統標志用綠色的圓角矩形作為背景，中間放置白色線條繪制的樹木圖標，整體和諧美觀且意象明確。

如圖4所示首頁的第一屏以森林主題的高清圖片作為背景[16]，給用戶帶來自然、舒暢的視覺感受。高清背景圖上疊加30%透明度的純黑色，使得白色的文字信息具有較高的識別率。第一屏下方的小尺寸按鈕在不影響用戶沉浸式視覺體驗的同時，暗示了下方可查看更多內容信息。點擊按鈕或者向上滑動屏幕會顯示多種檢索目錄。目錄圖標采用了統一的扁平化風格，并且每個圖標都有著明確的語義，在為用戶帶來良好視覺體驗的同時還能更加高效地傳達信息[17-18]。

如圖5所示，陳列室中的篩選器和木材展板兩個板塊為白底圓角矩形的卡片，與淺灰色背景形成對比。篩選器采用純文字的信息設計方式，以不同的字號和字重來區分信息層級[19-20]。木材信息預覽卡片運用了高斯模糊的陰影，高斯模糊陰影讓信息預覽卡片與白色的背景具有了空間上的深度關系，同時較強的點擊感也能夠引導用戶進行點擊操作[21-22]。

如圖6所示，詳情頁面頂部名稱信息部分采用與展板頁面頂部相同的深綠色背景，使系統具有較強的視覺整體性。綠色的關閉按鈕在加強交互動作引導的同時也起到了視覺點綴作用。詳情面板背景使用了圓角矩形卡片，卡片中的內容用字體的字號、字重以及灰度來區分信息層級?？ㄆ械膱D片、表格、圖標等元素使詳情內容豐富、生動，能夠給用戶帶來更好的閱讀體驗[23-24]。

3 結語

通過對用戶體驗模型的研究，總結出一套基于用戶體驗的系統設計方法，然后對此方法進行實踐，設計出了一套木材信息檢索系統的交互界面。用戶檢索系統適用于高校師生、科研人員、木材行業從業人員、家具導購員、消費者等人群，并能帶來良好的使用體驗。但是，用戶檢索系統也還存在著信息數據來源單一以及不支持在移動端展示的不足。今后可以通過系統迭代的方式完善木材信息數據，運用響應式設計增強系統的多終端適配性。