潘红莲 李杰

摘 要：西南地区非物质文化遗产——北川羌山雀舌茶（古羌茶技艺），通过新媒介下的APP界面设计对其进行视觉信息系统设计研究与开发：对“羌山雀舌茶”交互界面的信息架构、视觉设计和交互构思进行深入分析，完成信息逻辑层级规划，非遗符号元素设定和界面布局，以及基于用户需求的交互逻辑表达。使其市场价值与非遗技艺优势得到显著提升，重塑品牌形象。

关键词：界面设计 交互设计 信息架构 视觉设计

北川羌茶——“羌山雀舌”手工茶，隶属西南地区非物质文化遗产——“古羌茶艺”。古羌茶艺是羌民在发现茶、种植茶、使用茶的过程中，以茶为载体，表达人与自然、人与人之间的信仰、思想、情感、意识的总称，它是一个自然融合和表达的过程。本文拟在此茶文化基础上研究一个可读可视化的复合体系——“非遗”类“羌山雀舌茶”APP，它由图像、文字和数字结合而成，使信息更高效地得以交流。

当今国内的茶类APP界面设计大多呈现出一种趋同化走势，由于缺少文化背景的依托而失去了真正的内涵，造成茶品牌传播的局限。北川羌山雀舌茶现有的品牌形象，所特有的非物质文化遗产信息并不明显，代表旅游地（四川省绵阳市北川羌族自治县）自身的特殊符号不突出，因此无法从实质上彰显出传统旅游地的特殊地域文化和非遗品牌特征，而“羌山雀舌茶”APP设计的不足与传播途径单一也是其品牌发展的弊端。对于非遗羌茶APP设计灵感的汲取，应依据市场需求，结合羌族地域文化与消费者的喜好，对其古羌茶深层内容（羌茶非遗制作技艺、地域环境、原生态的产品特质）认知，以及APP信息传播载体进行开发，即通过“羌山雀舌茶”APP设计，结合信息技术-数字技术-艺术手段，使非遗文化得以开发与利用、传承与创新。

一、“羌山雀舌茶”APP界面信息架构

信息架构，旨在将诸多信息有机有序地组织在一起。信息架构的用途——组织内容结构：为方便用户查找所需信息，需将内容合理组织与标注。用户与信息之间的通道由于信息架构被迅速建立，所需信息被快速传达给目标用户。本文研究重点旨在有效利用界面信息架构，通过可视化视觉展示，提高信息的快速识别性与可寻性，使信息阅读更加高效有序。

1.羌茶信息分类组织

在人类的认知世界中，信息常常以已有的获得普遍赞同的基本结构进行排布。（如表1）

基于以上APP信息图表，羌山雀舌茶非遗技艺从口述行为过程转化为文字与图示，其种植、生态环境被深入情景再现式分析，最终完成全产业链视觉信息设计，使之品牌文化保持直观的可识别性，可认知性与易传播功能，促进良好的客户体验。

2.羌茶信息的层级

（如表2）茶品种分类图表内容：羌山雀舌茶中的绿茶、红茶、黑茶、白茶，属于扁平并列层级，对应“一日三茶”的饮茶概念，即早上喝绿茶、黑茶提神，中午喝红茶养胃，晚上喝白茶不影响睡眠。？譻？訛基于这一羌茶文化概念的细化，为进一步推动个性化羌茶销售（私人订制），提高用户体验做下铺垫。

3.羌茶信息的呈现

由于要考虑屏幕界面面积的局限性，交互呈现的局限性，APP界面信息架构如同桎梏下的舞蹈，既要考虑信息的可读性又要考虑特定内容的特殊性。本着以下准则：方便用户快速查找的信息，能够在性能板块间进行逻辑切换;明晰的性能信息层级布局，从最常用到不常用逐级显现。

主要内容：从显现模式的角度，北川羌山雀舌茶视觉信息设计（信息图形）作为视觉工具包含：图表、图解、图形、表格、地图、名单六类。

（1）羌山雀舌茶時序性图表：以时间信息为基础，描述该品牌古老的茶叶种植历史。突出与强化空间或事件在时空中的前后活动变化，同时，时间轴也可以设计成一条符合人们视线流的路径。

（2）羌山雀舌茶空间关系性图表：将北川羌山雀舌茶种植与生长环境的空间位置，如方位、海拔、植被层、生物链，制作成直观化的环境空间组织模式图。如海拔植被剖面图，以实体形式来解释空间关系。

（3）羌山雀舌茶制茶推导性图表：将该品牌原始的手工制茶工艺过程的前后关系及细节情况用直观性图表制作出来（流程图）。原生态、严谨的制茶流程图表明了茶叶处理系统的安全可靠。

二、“羌山雀舌茶”APP界面视觉设计

1.“F”形视觉轨迹与“井”形骨架设计

当我们激活一个APP网页界面，进行快速浏览时，视线扫描这些信息是否存在某种规律？科学研究表明，通过“眼动仪”的测试，浏览者在阅读网页信息时，多数情况下以“F”形状为浏览路线。同时，为了优化羌茶APP界面视觉结构，多使用图标、缩略图、导视等扁平化图像来描绘信息。

版面布局的分割，基于界面尺寸和分辨率考虑，将羌茶相关图片文字进行黄金比例法则以及“井”形骨架分割。此种分割，将主题、内文和图片展现得尤为清楚。（如图1）可以看到“井”形骨架基于三等分排布，对界面视觉划分起到了平衡的作用。

2.羌茶色彩的分类表述

“羌山雀舌茶”分类为绿茶、红茶、黑茶、白茶。鉴于色彩给予用户的直观印象，沿袭中国画颜料中的朱砂、石绿、水墨黑白作为“非遗”类羌茶APP界面配色的首选。（如图1）朱砂色与黑白搭配，传递出庄重、浓郁的气质;黑白的配色演绎出意象的水墨山水风情，配以红茶色的方形印章，凸显古羌茶文化的勃勃生机。非遗羌茶界面主色为国画颜料中的中低明度、中纯度色彩，通过色彩之间的对照与协调，塑造出古朴内敛的色彩氛围。同时，利用多色块分割，加强内容使用率，让界面不单调。

3.相关“非遗”羌茶具象元素的提炼

“羌山雀舌茶” APP 界面设计所指的“非遗”主题——“古羌茶”，包含了特定的具象元素。（如图2）从视觉信息的角度来解析这些珍贵的“非遗”资源，可概括为羌茶原料（老茶树、茶叶）、工具（饮茶器具、采茶和制茶工具）、手工茶技艺（摊凉—杀青等）、羌族纹饰（羊角花、喜鹊等）、图腾（羊角纹）、质感（意象茶香等）……根据简洁直观的设计原则转化为界面图标、缩略图与导视，从而加强了界面设计的特定文化感和深层内涵性。

三、“羌山雀舌茶”APP界面交互构思

1.古羌茶制作实景再现

“羌山雀舌茶”实景再现式APP界面，模拟“非遗”古羌茶制作场景：摊凉-杀青-理条-毛烘-炒二青-足水，力图营造出符合“非遗”主题特征意境的实景氛围。诚然，该“非遗”类APP界面设计不是简单地对既定场景做出复原和重建，还包括非遗技艺—古羌茶历史由来、茶艺特色、风俗趣谈、非遗传承人牛义贵与所获奖项等知识的展示，有序地经过信息组织和整理来实现场景的再设计，使信息直观化、艺术化，激起浏览者的感知与思考，以此加强古羌茶非遗文化的“情景记忆”，衬托古羌茶制作过程的完整性，获得浏览者对“非遗”主题的共鸣。

2. “古羌茶艺传习所”360°虚拟浏览

“羌山雀舌茶”实景再现式APP界面，以360°虚拟浏览——目前一种最接近于实物的展示方式，将“古羌茶艺传习所”展示出来。360°虚拟浏览促进了用户与展示空间之间的沟通与交流，使用户能清晰地看到不同历史阶段的羌族饮茶器具、采茶和制茶工具。如时代久远的陶土罐、竹编的采茶篓，各个角度、各个局部的细节，都致力达到“如见真面、恍若亲临”的体验感。对应“古羌茶艺传习所”的各个视角，浏览者能够自主进行360°全方位细致观察，完成“非遗”文化的直观体验。其知识的视觉化，加强了用户的理解，此外，为增强用户学习的主动性，增加了知识问答互动操作。除了360°全方位展示外，該APP界面还增加一些针对“古羌茶艺传习所”新产品推广区局部放大浏览的功能，使用户浏览局部物件时对局部进行深入研习。

结语

面向“非遗”类的 APP 界面设计首先应依据外围功能层级建立中间层核心的信息架构，进而达成表面层的视觉传达设计表现，最后按照用户需求确定其交互目的和体验方式。从设计的优先切入点来看，从信息架构到 APP 产品功能与交互方式，到界面视觉设计，其最终目的都是使用户达成趣味性体验，在这个复杂晋升的设计过程中，我们应不断求索羌山雀舌茶标志性的视觉符号表现以及交互应用，并利用APP 整合平台和AR（增强现实）技术，实现真实场景中对数字文化内容的智能交互，使用户在体验过程中对所属地-北川羌族自治县文化内涵有更深入解读，增强民族文化传播力度与强化非遗文化品牌值。

注释：

王烈娟.传承羌茶文化，发展羌茶产业—以北川县“古羌茶艺传习所”为例[J].包装世界 2015（5）.

刘飞.基于即时体验的虚拟旅游移动应用界面设计研究—以五当召虚拟旅游app界面设计为例[D].呼和浩特：内蒙古师范大学，2017.

朱麒宇.“一日三茶”情感需求 ：以用户体验为核心的包装设计[J].装饰，2017（10）.

谭坤，刘正宏，李颖.“非遗” 传承创新语境下的app界面设计研究[J].包装工程，2015，36（8）.

钟义信.信息科学原理[M]北京：北京邮电大学出版社，2002.

孙利，吴俭涛.基于时间维度的整体用户体验设计研究[J].包装工程，2014，35（18）.

注：本文系四川省教育厅人文社科重点项目，项目名称：北川羌山雀舌茶视觉信息设计与传播途径研究，编号：18SA0084;绵阳师范学院应用型人才培养示范专业——视觉传达设计，编号：Mnu-JY18110。