■馬 成，胡進(jìn)波，周 強(qiáng)，鄭 磊，萇姍姍 Ma Cheng & Hu Jinbo & Zhou Qiang & Zheng Lei & Chang Shanshan

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

1 基于用戶體驗的系統(tǒng)設(shè)計方法概述

1.1 用戶體驗?zāi)Ｐ?/h3>

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

1.2 基于用戶體驗?zāi)Ｐ偷南到y(tǒng)設(shè)計方法

用戶體驗?zāi)Ｐ妥鳛橐环N設(shè)計模型為系統(tǒng)的設(shè)計研發(fā)提供了一種理論基礎(chǔ)，而在進(jìn)行設(shè)計實踐時我們需要一套可以遵循的設(shè)計方法[7]。通過對用戶體驗?zāi)Ｐ偷?個要素進(jìn)行分析，總結(jié)出一套基于用戶體驗?zāi)Ｐ偷南到y(tǒng)設(shè)計方法（表1）?；谟脩趔w驗?zāi)Ｐ偷南到y(tǒng)設(shè)計方法描述了系統(tǒng)的設(shè)計流程、設(shè)計工具以及產(chǎn)出物。

基于用戶體驗?zāi)Ｐ偷南到y(tǒng)設(shè)計方法中的設(shè)計流程依次為設(shè)計調(diào)研、需求轉(zhuǎn)化、功能架構(gòu)、界面設(shè)計和視覺設(shè)計，在全設(shè)計流程中都需要重點關(guān)注所涉及到的設(shè)計工具及產(chǎn)出物：①設(shè)計調(diào)研：運(yùn)用競品分析、用戶訪談、用戶畫像、調(diào)查問卷等方法，確定系統(tǒng)目的、目標(biāo)用戶群體、目標(biāo)用戶群體需求；②需求轉(zhuǎn)化：將設(shè)計調(diào)研中所分析得出的用戶需求轉(zhuǎn)化為系統(tǒng)內(nèi)容需求和功能規(guī)格；③功能架構(gòu)：對于信息展示型系統(tǒng)而言，功能架構(gòu)的主要工作為信息架構(gòu)。對于功能型系統(tǒng)而言，功能架構(gòu)的主要工作為交互設(shè)計，輸出物為站點地圖和功能規(guī)格說明；④界面設(shè)計：對系統(tǒng)界面的按鈕布局、功能區(qū)域等進(jìn)行設(shè)計和排布并輸出線框圖[8]。需要注意的是在界面設(shè)計環(huán)節(jié)應(yīng)該遵循基本交互設(shè)計原則[9]；⑤視覺設(shè)計：使用色彩、圖標(biāo)、插畫等視覺元素對界面進(jìn)行設(shè)計，并借助Sketch、Adobe Photoshop、Figma、Adobe Xd等設(shè)計軟件輸出高保真原型。

表1 基于用戶體驗?zāi)Ｐ偷南到y(tǒng)設(shè)計方法

■圖1 用戶體驗設(shè)計模型

■圖2 系統(tǒng)站點地圖及功能說明

■圖3 系統(tǒng)總體線框圖

基于用戶體驗?zāi)Ｐ偷南到y(tǒng)設(shè)計方法能夠保證系統(tǒng)良好的用戶體驗，并使系統(tǒng)的設(shè)計有序進(jìn)行。基于用戶體驗?zāi)Ｐ偷南到y(tǒng)設(shè)計方法還能夠?qū)⒃O(shè)計任務(wù)分發(fā)給不同領(lǐng)域的專業(yè)人才，從而實現(xiàn)大型系統(tǒng)和專業(yè)系統(tǒng)的研發(fā)[10]。本文接下來將以木材信息檢索系統(tǒng)為例，對本方法進(jìn)行設(shè)計實踐。

2 木材信息檢索系統(tǒng)設(shè)計實踐

2.1 設(shè)計調(diào)研

2.1.1 木材信息檢索系統(tǒng)現(xiàn)狀

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

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

根據(jù)前面的分析，筆者認(rèn)為中國目前政治、社會制度的條件，比如傳統(tǒng)的集權(quán)影響、幅員遼闊差異巨大、社會自治基礎(chǔ)和能力不足等，不具備央地徹底分權(quán)模式的條件，可行的模式是應(yīng)該探索中央統(tǒng)一領(lǐng)導(dǎo)、地方授權(quán)執(zhí)行的分權(quán)模式，在其中不斷探索合理授權(quán)地方的機(jī)制，從而實現(xiàn)央地之間權(quán)責(zé)內(nèi)洽的機(jī)制建立。

通過木材信息檢索系統(tǒng)現(xiàn)狀分析發(fā)現(xiàn)，用戶需要一款能夠同時滿足使用體驗良好和便攜需求的木材信息檢索系統(tǒng)。

2.1.2 系統(tǒng)設(shè)計目標(biāo)以及用戶群體設(shè)定

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

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

2.2 需求轉(zhuǎn)化

2.2.1 功能規(guī)格

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

2.2.2 內(nèi)容需求

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

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

2.3 功能架構(gòu)

根據(jù)用戶檢索系統(tǒng)的需求設(shè)計出系統(tǒng)的站點地圖以及功能架構(gòu)。系統(tǒng)分為首頁、陳列室和木材詳情三個主要頁面（圖2）。

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

■圖4 首頁

■圖5 陳列室頁面

■圖6 詳情頁面

2.4 界面設(shè)計

木材信息檢索系統(tǒng)的總體線框圖如圖3所示。

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

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

木材詳情頁面分為名稱面板、導(dǎo)航欄、詳情面板三個部分。其中名稱面板和導(dǎo)航欄固定在頂部，用戶通過點擊導(dǎo)航欄內(nèi)的標(biāo)簽?zāi)軌蚩焖俚靥D(zhuǎn)至相應(yīng)錨點。詳情面板能夠向上滑動來展示更多信息。

2.5 視覺設(shè)計

根據(jù)界面設(shè)計的產(chǎn)出物線框圖，使用Adobe XD設(shè)計軟件對視覺元素進(jìn)行細(xì)節(jié)設(shè)計，輸出高保真界面。

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

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

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

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

3 結(jié)語

通過對用戶體驗?zāi)Ｐ偷难芯?，總結(jié)出一套基于用戶體驗的系統(tǒng)設(shè)計方法，然后對此方法進(jìn)行實踐，設(shè)計出了一套木材信息檢索系統(tǒng)的交互界面。用戶檢索系統(tǒng)適用于高校師生、科研人員、木材行業(yè)從業(yè)人員、家具導(dǎo)購員、消費(fèi)者等人群，并能帶來良好的使用體驗。但是，用戶檢索系統(tǒng)也還存在著信息數(shù)據(jù)來源單一以及不支持在移動端展示的不足。今后可以通過系統(tǒng)迭代的方式完善木材信息數(shù)據(jù)，運(yùn)用響應(yīng)式設(shè)計增強(qiáng)系統(tǒng)的多終端適配性。