基于用户体验的中国扇文化推广类网站的设计研究

王昭

摘要：以用户体验为核心，通过研究获取相关中国传统文化推广类网站的设计方法。通过研究目标用户行为，将人对扇物化的体验虚拟化;分析中国传统扇子的特点，将扇元素提取并符号化;以“京扇子”品牌网站设计为例，将用户体验作为核心，进行网站设计。设计出符合用户体验的京扇子品牌官方网站，并总结出设计方法。该研究可以为中国传统文化推广类网站设计提供参考。

关键词：网页设计 元素再设计 用户体验 品牌 网络化

中图分类号：TB47

文献标识码：A

文章编号：1003-0069 （2020） 04-0028-04

引言

中国扇文化源远流长，早已成为文人雅士的必备配饰、也是诗歌、小说中重要描述的物品之一。但随着人们生活方式的转变，对扇子的认知愈发模糊，并逐漸淡出人们的视野，保护、传承与发展扇文化势在必行。习近平总书记指出要把中国传统文化“讲清楚”，让它“活起来”，互联网成为实践、发展的重要方式之一。近年来中国传统文化正运用数字化、新媒体的手段推广与传播，唤起越来越多的人重新关注传统文化。扇文化完全可以借助这股风潮“活起来”，企业也可以借助这股东风壮大自己，提升产品的市场占有率与销售额，继续为扇文化产业的发展提供重要的支持。

但新媒体的传播不仅是将扇子相关的内容简单罗列，而是通过分析用户的心理与行为，设计出满足用户需求的网络产品。本文以用户体验设计为核心，基于“京扇子”品牌的设计实践，总结出符合用户体验的中国扇文化网络化的相关设计方法，为其他传统文化的网络化设计提供有价值的参考。

一、网页设计中的用户体验

网页设计包含了版式、字体、色彩等设计，但随着网页与用户的互动越来越频繁，用户体验设计逐渐成为网页能否成功的关键因素。优秀的用户体验设计可充分调动人们的感官、情感、互动等体验，使用户体会到友好、舒适、便捷的网站使用环境[l]。优质的用户体验设计不仅可以更好地展示产品，使用户了解到产品的真谛，还可以与用户建立情感关系，增强网站对用户的黏度。

用户体验设计不仅是在对用户行为的研究上，还是对网页设计中的字体、颜色、版式、图像、动态效果等元素综合的运用，通过合理的整合表达网站内容。网站设计是无法为用户提供直接的用户体验的，而是运用上文提到的这些元素，达到与用户的良好互动，最终满足用户的浏览需求。

二、网络化设计中的用户体验设计原则

（一）构建“互联网+实体”化的体验性设计

国务院在《国务院关于积极推进“互联网+”行动的指导意见》中提出，“互联网+”是把互联网的创新成果与经济社会各领域深度融合，推动技术进步、效率提升和组织变革，提升实体经济创新力和生产力，形成更广泛的以互联网为基础设施和创新要素的经济社会发展新形态[2]。国务院的指导意见为京扇子品牌网络化建设提供了重要的参考。在新时代的品牌发展中，不能将网络化与线下实体店分开对待，而是在充分挖掘实体店的经验、教训，为品牌的网络化设计提供参考。

首先，“互联网+实体”的设计不是用网店取代实体店、也不是用网店补充实体店，应利用二者的优势相互促进，实体店应充分发挥用户可接触式的体验作用，保持用户对品牌的信任。而网店应利用传播的优势拓展市场，为实体店带来新的客源，促进品牌扩张与消费额的增长。其次，应深入挖掘网络的潜力，作为当今社会中重要的媒介之一，拥有传播力较强，传播、运营成本低等特点。利用网络资源传播品牌，利用在线学堂、论坛、活动等多种手段与消费者互动，增强品牌认知度。通过引导用户在线体验，最终引入到线下实体店消费。

（二）抓住用户体验要素

辛向阳提出，用户的交互行为由人、动作、媒介、目的和场景构成，在用户体验设计的研究中，要抓住行为逻辑，进行行为的设计[3]。作为网络产品的设计研究方法，用户行为研究的相关数据影响着网站的建构，最终可能决定了网站的成败。网络化的品牌传播形式不同于实体店，在实体店中可通过店面空间布局引导消费者的参观路线。但网络中这种情况是无法实现的，用户进入网站后，第一眼就要抓住眼球，留下用户。这也是为什么当今许多网站中运用开屏大国或视频的方式展示品牌或产品。如Players Paris官方网站（图1），作为专业提供商业和品牌内容的公司，开屏图像中展示了多项成功案例，浏览者进入网站后立刻就被这些震撼的画面所吸引。

理查德·布坎南清晰的将用户体验归纳为：通过媒介的作用来创造和支持人的行为[4]。将用户对扇的认知与感受虚拟化，使人们在思想上重新定义扇子，为未来的商业销售提供支撑。就像苹果官方网站（图2）推广iPhonell Pro产品一样，里面所有的内容和视频均用iPhonell拍摄，使用户感觉只要拥有了这款手机，就可以拍摄出与官网宣传片相同效果的视频。我们在京扇子网站构建中，也应传达相同的使用效果，使用户感受到拥有这些产品，将使自己的生活品质得到提升。这与我们要表达的中心概念不谋而合：扇子可以提升生活品质，最终成为生活中不可或缺的组成部分。我们运用好网络媒介，打造新的消费时尚，为推广品牌、产品销售服务。

（三）构建一致的线上线下体验

作为以实体店起家的京扇子品牌，店面的装修风格与展品布置已经在消费者心中烙下了很深的印象，那我们在网站构建时应考虑延续线下店的风格。因为人们对熟悉的事物会产生强烈的信任感，尤其是在虚拟的网络世界。就像一个人外出旅行，尤其是去陌生的国度，当被吃饭问题困扰时，那么麦当劳可能就是旅行者的最终选择。那么这样的思路同样适用于京扇子品牌的网络化设计，品牌形象及品牌感受的延展使网络推广过程更加的便捷，即使没有进入京扇子店铺购物过的消费者，由于有实体店的支撑，也会给人以信任感。

如果品牌本身已构建较强的时尚性与品质感，应将这种品质感延续，使线上线下保持一致性。京扇子品牌线下实体店以独特的设计风格、轻松时尚的设计品味成为吸引消费者的重要原因。而在网络传播中应吸取线下店铺的视觉信息并提取，应用到网站设计之中。使线下店铺已形成的较好心理感受被移植到网站之中，为初次使用网站的用户带来熟悉感与安全感，从而留住了网络用户，如图3。

三、结构设计中的用户体验设计 （一）布局创新

网站整体的布局设计中，应打破守旧、古板、无趣的固有印象，运用现代的设计方法，为品牌的推广与产品的销售服务。作为产品重要的消费人群——年轻人，要抓住他们崇尚自由、品味时尚的特征，在网站设计中要能吸引这部分用户的关注。例如作为一个以户外用品为核心产品的企业，Open Wear官方网站（图4）在用户初次访问时，将户外运动的激情与挑战展示在消费者面前，非规整化的布局模式又将自由的感受赋予到设计之中，突破了网页规矩的布局模式，给消费者带来了突破现实社会中条条框框的感觉，又使消费者形成运动是释放、无拘无束的感受。

我们在思考京扇子品牌网站所能带给观众的感受到底在什么地方。“时尚”、“生活”、“格调”是我们可以为消费者赋予的关键词，这也正是品牌现有重要的发展方向。非对称的布局形式是在页面设计中可以考虑的重要方式之一，大国与内容图交错出现充分体现了网站开放与无束缚的性格。非对称的页面结构也与扇子的对称结构形成强烈的对比，使人们感受到传统与现代的碰撞。但在非对称的布局中应把握住网页的重心点位置，使页面在浏览过程中不至于失去平衡，如图5。

（二）结构创新

网站在创作过程中牢牢把握住建站初心，把对品牌的推广、重塑人们生活作为重要的展示信息之一，所以在网站的整体结构处理过程中，将对扇文化塑造放置在了重要的位置上，将产品的销售融合到网站的各个结构之中，所有页面的终极页面将引导至产品的销售环节，但这个过程是用户自主的操作，减少观众的抵触感。并且网站本身不提供任何购物的环节，通过引导进入微店进行售卖，将用户引流至具有较高流量的平台中，使企业可以在多平台推广信息。

但作为品牌或网站的资深用户，网页也提供更快捷的产品推荐环节，无论是在网站的导航、首页展示等页面，为直达产品展示页面提供了通道。网站的这种布局形式使两种消费用户均可以在自己感兴趣的部分浏览与操作，满足了用户需求。以网站导航为例，网站导航整体分为两个部分（图6、7），左侧的延伸导航与上部的快捷导航，两种导航模块互相补充，不相包围。右侧以快捷导航九宫格的形式，将扇子之美淋漓尽致地展示在观众面前。

四、视觉设计中的用户体验

（一）色彩的应用

色彩是带给浏览者最初的视觉感受，是用户体验重要的组成部分，也是品牌识别的重要符号。在色彩的体验中不仅包含网页各模块的色彩定义，还包括网站中图片形成的色彩。在网页设计中，设计师一方面要尊重视觉导向，另—方面要符合大多数人的思维习惯，将网页信息自然、合理、快速地传达给用户[5]。京扇子品牌以金色为主要视觉识别色，但辅助色又以灰白为主，较单调的品牌色彩体系需要辅以其他色彩，提振网站整体的视觉感受。由于金色与其他颜色搭配均较为适宜，所以在定位网站色彩时有较大的宽容度。网站中色彩是整个网站色彩应用的一部分，而图片也是重要的色彩来源，并且京扇子品牌宣傳图（图8）又以时尚、现代著称，为了配合图片色彩，网站色块颜色使用提取宣传国中的颜色，使图、色配合更相宜，在网站后台中也为网站提供了可以自定义相应色彩的操作。

网站色彩的自定义性为网站图文配合提供了很好的适应性，以防止过于固化色彩带来色彩的歧义。但在网站颜色选择上除色彩的色相不做规范外，在色彩的纯度、饱和度与亮度上均定义了相应的要求。这样使网站中所有运用的色彩在相同的视觉感受上，防止色彩过于丰富导致的杂乱的情况，最大限度地为观众带来和谐的色彩感受。

（二）文字的创新

网站中除了色彩与图片外，最能打动人的就是文字的展示，有时仅仅是一个小小的词汇就可以让消费者无限的延展，起到提振品牌与产品的作用。尤其是博大精深的中国文学中，借喻、同音字的替换使文学作品添色不少。尤其是在网络海量信息的环境中，精简、准确的词语表达使人们精确的定位产品属性，记住产品。其中经典的案例之一就是苹果产品的官方宣传图（图9），仅用精巧的词汇把产品描述得淋漓尽致，也直达消费者的内心。在京扇子品牌网站中（图10）对于扇艺、扇工、扇美的词藻的选用，均与“善”字呼应，将同音字应用其中，与企业为消费者提供“尽善尽美”的理念一致。同时也将人文属性凸显，使人们更加认同扇子的人文价值。网站中减少商业词藻的应用，代而言之的是具有中国传统人文气质的词藻，在增加产品的文学气质之外，也使消费者感受到文化之美。

如在扇美中，将扇子应用的不同场合以“格调之行”、“睿智之思”、“挚爱之美”等词藻代替传统的使用场景过于直白的表述，在“挚爱之美”中（图11），又将“婚礼”、“生日”、“礼赞”等美贯彻之中，呼应“扇美”主题，进一步增强品牌格调。文化是支撑品牌的重要因素，而网站中所有的文字均是基于用户体验而生，在中国传统对美好事物追求的体验中，使内容可以被多数用户所认可。

（三）扇元素的应用

图像直观而形象地表达含义，能够展现出无尽的想象空间;因为图像是全世界通用的“语言”，所以几乎不需要任何文字的注释[6]。独特性是使自己区别于其他网站的重要特征，也成为吸引用户，提升用户体验的重要的法宝。无论是图案的提取还是基础形体再设计，都可增强品牌的识别力与吸引力。像京东商城的网站（图12），许多与品牌相关的视觉元素运用到设计中，通过诙谐幽默的形式使人们即使在网站加载过程中也不会感到无聊，这也使品牌潜移默化地被浏览者认知。京扇子品牌以扇子作为企业核心的产品，要着重挖掘扇子的特点，提取并运用到网站页面的展示之中，不仅可以丰富展示效果，还可不浪费任何展示产品的空间。

以本网站为例，扇元素应用到了网站的方方面面。无论是网站的Loading符号，还是在“扇工”页面中（图13），将页面中的扇骨、扇面、扇坠用传统形态展现，都将扇元素完美的融入到网站各功能的设计中。扇元素的应用不仅可以强化浏览者的主观印象，相似的视觉元素也可以使网站整体更加统一。

（四）动态再塑

动态效果增强了用户浏览的视觉感受，随着网页内容不再受网速的限制，静态化的页面设计逐渐淡出人们的视野。动态效果力求能够让软件使用者与软件进行情感沟通，通过营造不同的视觉氛围激发共鸣，调动使用者的情绪，具有维系使用者群体的功能[7]。尤其是近1～2年的时间内，运用视频影像作为背景的方式也越来越多。使产品在营销的过程中加入更多的可能性，将用户从枯燥的用户体验中解脱出来，畅游在新奇的视觉奇观中。京扇子品牌视频资源较少，所以需要通过其他方式塑造网页展示内容的动态效果。

如在网页的右上角有一处产品推荐的按钮，按钮点开后为用户推荐9把扇子（图14），用户鼠标滑过后，扇子有一个展开的效果，将扇子“活灵活现”地展示在用户面前。再如首页采用大图展示的形式，图片间的切屏形式借鉴了折扇开合的形式，形成网站重要的特征。页面切割采用传统的黄金分割的處理方式，形体看上去更符合大众的审美。网页的动态效果为网站信息的传达提供了更多的可能，使原来静态中无法展示的内容更完整的展示给浏览者。

优质的用户体验塑造了可以被广泛推崇的内容，优质的线上传播是中国传统文化推向市场，享誉全球的重要渠道，应用好这个渠道可以使产品的推广达到最优化。随着中国文化自信心越来越强，对传统文化的关注度越来越高，人们也越来越愿意在日常生活中使用、展示中国传统文化产品。我们要借助这场文化的潮流，将扇文化的内涵完整的展示出来，推广扇文化、提升扇子的价值，最终实现扇文化市场的辉煌。

参考文献

[1]江静.基于用户体验的网页交互性设计策略[J].黑河学院学报，2019，10 （12）：184-185

[2]《国务院关于积极推进“互联网+”行动的指导意见》[Z]. http： //www sohu com/a/114687054_100441 2016年9月20日

[3]辛向阳.交互设计：从物理逻辑到行为逻辑[J].装饰，2015 （01）：58-62

[4]辛向阳.交互设计：从物理逻辑到行为逻辑[J].装饰，2015 （01）：58-62

[5]朱婷婷，蒋飞燕.网页设计的视觉信息传达分析[J].美术教育研究，2019 （09）：103-104+107

[6]王萍浅谈中国元素在当代网页设计中的应用[J].中国美术，2014 （01）：126-128

[7]马驰.图形界面设计中的动态效果应用及趋势探析[J].设计，2019，32 （20）：113-115

[8]（美）JeffJohnson著.张一宁译.认知与设计：理解UI设计准则：北京人民邮电出版社，2012： 52