基于用户体验的木材信息检索系统界面设计研究

■马 成，胡进波，周 强，郑 磊，苌姗姗 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）。基于用户体验模型的系统设计方法描述了系统的设计流程、设计工具以及产出物。

基于用户体验模型的系统设计方法中的设计流程依次为设计调研、需求转化、功能架构、界面设计和视觉设计，在全设计流程中都需要重点关注所涉及到的设计工具及产出物：①设计调研：运用竞品分析、用户访谈、用户画像、调查问卷等方法，确定系统目的、目标用户群体、目标用户群体需求；②需求转化：将设计调研中所分析得出的用户需求转化为系统内容需求和功能规格；③功能架构：对于信息展示型系统而言，功能架构的主要工作为信息架构。对于功能型系统而言，功能架构的主要工作为交互设计，输出物为站点地图和功能规格说明；④界面设计：对系统界面的按钮布局、功能区域等进行设计和排布并输出线框图[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所示，详情页面顶部名称信息部分采用与展板页面顶部相同的深绿色背景，使系统具有较强的视觉整体性。绿色的关闭按钮在加强交互动作引导的同时也起到了视觉点缀作用。详情面板背景使用了圆角矩形卡片，卡片中的内容用字体的字号、字重以及灰度来区分信息层级。卡片中的图片、表格、图标等元素使详情内容丰富、生动，能够给用户带来更好的阅读体验[23-24]。

3 结语

通过对用户体验模型的研究，总结出一套基于用户体验的系统设计方法，然后对此方法进行实践，设计出了一套木材信息检索系统的交互界面。用户检索系统适用于高校师生、科研人员、木材行业从业人员、家具导购员、消费者等人群，并能带来良好的使用体验。但是，用户检索系统也还存在着信息数据来源单一以及不支持在移动端展示的不足。今后可以通过系统迭代的方式完善木材信息数据，运用响应式设计增强系统的多终端适配性。