当前位置:主页 > 综合论述 > 其它 > 基于移动平台的汉服设计软件开发研究
    摘要:

    目的通过数字媒体技术,改变汉服文化传统的单向传播方式,使用户在设计汉服和与软件交互的过程中学习汉服文化。方法在设计上,运用中国传统艺术元素和扁平化风格,设计出中国风的标志和按钮图标以及页面布局;在技术上,使用reactnative完成APP的基本框架,以及使用canvas技术完成个性化的汉服设计过程。结论利用数字媒体的优势,采用互动性的方式和个性化的设计,让用户在设计汉服的过程中感受汉服文化的魅力,这是一种运用数字媒体传播汉服文化的新思路。

    关键词:  汉服文化;汉服设计APP;汉服文化传播;

    作者简介:王妍(1965—),女,吉林人,博士,哈尔滨工业大学教授,主要研究方向为设计学。;*张瑞阳(1994—),女,河北人,哈尔滨工业大学硕士生,主攻设计学。;

    汉服文化作为中国传统文化的重要组成部分,有着悠久的历史和丰富的文化内涵。然而随着时代的变更,汉服逐渐淡出了人们的生活。随着文化产业的崛起,汉服也迎来了巨大的发展机遇。将汉服文化与移动平台软件相结合,再加上让用户自己设计汉服的交互方法,是在数字化时代下传承汉服文化的有益探索。

    1汉服设计软件开发研究背景

    汉服的全称是汉民族传统服饰,又称汉衣冠、汉装、华服,是从黄帝即位到明末清初,在汉族的主要居住区,以华夏礼仪文化为中心,通过自然演化而形成的具有独特汉民族风貌的传统服装和配饰体系[1]。汉服源自黄帝冕服,因周礼制度而得以巩固,其后一直随着朝代的更替和居民生活的变化而不断发展、演进,体现着不同朝代的社会风俗和审美旨趣[2]。

    随着社会文明的发展,汉服穿着繁琐,其褒衣博带的样式,在日常生活中多有不便,汉服也逐渐淡出了人们的生活,汉民族甚至存在着丢失自己民族的服饰记忆的危险[3]。随着全球化的浪潮,汉族服装同时又受到了各国服饰文化的冲击,但是在危机中也潜藏着机遇,中国文化创意产业随之崛起,含有中国元素的创意作品越来越受到年轻人的喜爱。汉服作为中国元素的重要表现之一,在文化创意作品中扮演着不可替代的角色。更为重要的是,中国的复兴梦为汉服的回归创造了机遇,在继承、发扬传统文化的大潮下,汉服运动在民间蔚然成风。

    汉服要想抓住复兴机遇,就要结合数字媒体技术的优势,让汉服设计成为每一个人都可以尝试的个性化设计。让用户在设计汉服的同时,了解汉服服饰,理解汉服文化的底蕴,增强对汉服的社会认同感,进而通过汉服设计,在复兴华夏文化的大潮中推波助澜。

    基于上述背景,以一款汉服设计APP软件作为毕业设计的选题,将APP取名为“子衿”,取《诗经·郑风·子衿》中“青青子衿”中的“子衿”为名。“子衿”主要由3个部分的功能组成,首先是设计汉服并发表,然后是浏览他人作品与交流,最后是介绍汉服文化。其中最核心的功能就是设计汉服,该功能通过模板化设计,降低了设计服装本身的难度,保留汉服的形制与规范,增加了设计服装的趣味性因素,使用户在设计的过程中,潜移默化地获得汉服形制、装饰、裁剪等方面的知识。用户可以欣赏他人的作品,从中找寻灵感,也可以为喜欢的作品点赞或与欣赏的设计者就设计进行沟通。用户完成设计后,可以输出设计图,交由专门服装制造商制作,从而满足用户服装个性化的需求。同时,用户独特的个性化设计也为汉服添加了时代的元素,为汉服注入了新的活力。用户穿上自己亲手设计的汉服,作为礼服或常服出现在生活中的各种场合,自然成为了传播汉服文化的“媒体”。

    利用数字媒体技术的优势,采用互动性的方式、DIY的创意,让当代年轻人在DIY的创造过程中,感受汉服文化的魅力,让他们通过自己的设计传播汉服文化,推动汉服的复兴,是一项具有现实意义的项目。

    2基于汉服设计的APP设计

    2.1“中国风”的扁平化界面设计


    优秀的用户界面应该简洁、美观,并具有引导功能[4]。界面设计应成为中国传统文化的载体,同时符合用户的接受习惯,引导用户对汉服文化进行了解、学习。在界面设计上,将中国传统元素和扁平化的图标按钮元素结合在一起,可以使界面更加符合APP的主体,同时创造传统的文化氛围。例如APP界面中的中国传统元素,见图1。该设计主要运用了中国文人画、中国传统装饰纹样、中国传统字体、中国水墨风图案这几种中国传统元素,从内而外都是传统元素,它的颜色选用了在国际上一直享有“中国红”美誉的红色,形态上使用了具有中国书法效果的笔触。

中国传统元素
    图1 APP界面中的中国传统元素Fig.1ChinesetraditionalelementsintheAPPinterface

    在APP界面设计中,扁平化按钮的图标设计要符合界面设计原则,可点击元素需使用合适的视觉样式。按钮的图标和文案应清晰地表述按钮的用途或点击后产生的效果[5],例如服装设计的功能,图标是一把剪刀。因为剪刀是服装设计中一种必要的工具,所以它能正确地表达按钮的功能。扁平化图标设计见图2。

扁平化图标设计
    图2扁平化图标设计Fig.2FlatUIdesign

    2.2充满文化内涵的内容设计

    移动终端传播汉服文化具有体裁多样的优势,汉服文化不仅仅体现在汉服知识模块中,还体现在用户设计汉服的过程中。用户从款式选择、颜色设计到图案搭配都可以潜移默化地学习到汉服文化。

    汉服主要款式特征见表1[6]。笔者将齐胸襦裙、交领襦裙、齐腰襦裙、对襟襦裙、立领袄裙、交领袄裙、单绕曲裾、双绕曲裾、半臂、斗篷、大袖衫这几种汉服的传统款式简化为富有汉服主要特征的二维服装设计图,用户在选择款式进行设计时就能了解传统汉服的形制特征。

    色彩是汉服中不可分割的重要组成部分。汉服在颜色的使用上讲究“五色”,也就是儒家在推崇周礼时建立的道德色彩体系,其中有严格的色彩尊卑等级制度,还蕴藏了道德寓意[7]。在汉服的颜色设计上主要采用了传统汉服的“五色”,即青、黄、赤、白、黑五色作为设计选择,用户在进行色彩设计时可以接触到汉服的色彩文化。在汉服知识介绍页面还介绍了不同朝代使用颜色的偏好。

    汉服在装饰图案上主要分为植物、动物、人物和器物4种类别,在每种图案背后都蕴含着古人对美好生活的希冀[8]。在汉服的图案设计上,选用了比较典型的蝶恋花、牡丹富贵、一品清廉、喜上眉梢等传统装饰图案,让用户在设计的同时能了解汉服图案的文化[9]。

汉服主要款式特征
    表1 汉服主要款式特征Tab.1MainfeaturesofHanfu

    2.3丰富的交互设计

    设计师可从人、动作、完成动作必要的辅助工具、周围的环境和目的出发,结合功能的需求系统进行具体的思考[10]。

    首先是手势交互,用户在设计汉服时,选取了要设计的款式后,可以为其着色。为了充分实现用户的设计意图,丰富设计并完成效果图,用户可以根据自己的设计需要,为汉服的各个部分添加颜色,从而设计自己的个性化汉服。选取颜色后,可以为汉服添加图案,用户在选取图案后可以根据需要,将图案拖动到不同的位置,并通过两点触控来调整图案的大小。除了APP本身提供的图案外,为了让用户的设计更加多样、自由,用户可以为汉服添加本地的图案,这样用户的相册就成为了APP的图案库。在进行图案调整时,图案周围会出现功能框,用户可以使用功能框旋转图案,如果用户对调整结果不满意,还可以通过功能框对图案进行删除。其次是按钮交互,除了上述设计选项外,用户还可以旋转汉服设计图,方便对其背面进行设计,也可以放大设计图,方便对局部进行精细调整。如果用户对某一次设计调整不满意,可以点击退回按钮,撤销上一步操作,或者直接点击重置按钮进行重新设计。在用户完成设计图后,点击保存就可以将设计图保存到本地或发布到APP中。用户可以浏览他人的设计,为自己心仪的设计点赞或留言,还可以关注自己喜欢的设计师,并通过私信与他沟通和交流。用户可以看到他人的点赞、留言和私信并进行回复,这样也就实现了用户的完整交互。

    3汉服设计APP的实现

    3.1汉服设计APP的框架实现


    “子衿”的框架主要由3个部分组成,见图3。首页上设置了用户作品列表,用户可以滚动查看,用户点击用户作品可以跳转到作品详情页,点击作者头像可以跳转到作者详情页,用户作品页面见图4。用户在作品详情页可以进行点赞,点击点赞图标后,图标会变红,并且点赞数会加1。再次点击图标会变灰,点赞数会减1。在作者详情页可以关注作者或私信作者。用户在设计汉服时,可以选择款式、颜色和图案,需要用到3个菜单,分别是点击款式、颜色和图案的3个按钮,点击它们时,菜单会随之切换。

“子衿”的框架
    图3“子衿”的框架Fig.3Theframeworkof"Zijin"

    框架部分的实现主要使用了reactnative组件。“子衿”APP是基于android平台开发的,除了使用原生组件外,笔者还使用了reactnative组件,同时结合自定义部分组件和开源组件共同构建APP的框架结构。

    3.2设计过程的实现

    用户在菜单中选择不同的款式时,该款式按钮的背景色会变红,设计图中的款式也会变为用户选择的款式图,汉服设计款式的选取见图5。设计图的款式变化首先需要通过AI将汉服的设计稿绘制成矢量图,再利用AI中的插件将绘制好的矢量图转化成画布代码,这样就可以得到汉服设计线稿的具体坐标位置。在用户点击任何一个款式时,需要先将画布清空,再通过绘制线条来画出设计稿的轮廓线。

用户作品页面
    图4 用户作品页面Fig.4Userpage

汉服设计款式的选取
    图5汉服设计款式的选取Fig.5Hanfudesignstyleselection

颜色的选取与着色
    图6 颜色的选取与着色Fig.6Colorselectionandcoloring

    在颜色选取时,用户点击颜色后,颜色块会由矩形变为圆角矩形,通过点击设计图的局部,可以为汉服的各个部分涂上不同的颜色,见图6。当用户在汉服设计稿上进行点击时,系统会捕捉并判断用户点击的位置处于汉服的哪个部分,将用户点击位置所在区域的汉服部分通过绘图方法绘制出来,对用户点击区域完成上色。

    用户可以在图案库中进行点击,随后图案就会出现在汉服上,用户可以根据自己的需要对图案进行调整,图案的缩放和移动见图7。图案的移动、拖拽需要先存储用户点击的位置,并判断该位置是否在图像上,用户手指每移动一帧都要重新绘制图像,直到用户手指离开后再将移动手指事件的参数清空。

图案的缩放和移动
    图7 图案的缩放和移动Fig.7Thezoommovementofapattern

    4结语

    本文以汉服设计为核心内容,在深入挖掘汉服文化的基础上,得出了汉服设计APP的创意方案:以“子衿”为名,以中国风和扁平化为界面风格,以汉服文化知识模块和汉服设计交互模块为内容,以reactnative和canvas为技术支持,让用户在设计出自己理想汉服的同时,还传播了汉服文化,完成了传播汉服文化的新尝试。

    参考文献

    [1]王芙蓉.“汉服运动”研究[J].服饰导刊,2012,1(2):78-81.WANGFu-rong.Studyon"HanfuSports"[J].ClothingGuide,2012,1(2):78-81.

    [2]李晰.汉服论[D].西安:西安美术学院,2010.LIXi.TheTheoryofHanDynasty[D].Xi'an:Xi'anAcademyofFineArts,2010.

    [3]陈莲.漫谈失落的民族瑰宝--“汉服”[J].武汉科技学院学报,2007(8):16-19.CHENLian.RambleontheLostNationalTreasure"Hanfu"[J].JournalofWuhanUniversityofScienceandEngineering,2007(8):16-19.

    [4]汪露露.文艺类App设计过程研究[D].苏州:苏州大学,2016.WANGLu-lu.ResearchontheDesignProcessofLiteratureandArtAPP[D].Suzhou:SoochowUniversity,2016.

    [5]王静.传统文化类APP设计研究[D].无锡:江南大学,2016.WANGJing.ResearchontheDesignofTraditionalCultureAPP[D].Wuxi:JiangnanUniversity,2016.

    [6]周锡保.中国传统服饰史[M].北京:中央编译出版社,2011.ZHOUXi-bao.HistoryofChineseTraditionalCostume[M].Beijing:CentralCompilationandTranslationPress,2011.

    [7]左娜.“汉服”的形制特征与审美意蕴研究[D].济南:山东大学,2011.ZUONa.StudyontheMorphologicalFeaturesandAestheticImplicationsofHanfu[D].Jinan:ShandongUniversity,2011.

    [8]蒋玉秋,王艺璇,陈锋.汉服[M].青岛:青岛出版社,2008.JIANGYu-qiu,WANGYi-xuan,CHENFeng.Hanfu[M].Qingdao:QingdaoPress,2008.

    [9]赵峰.中国传统文化符号在移动终端界面设计中的应用[D].西安建筑科技大学,2013.ZHAOFeng.ApplicationofChinesetraditionalculturalsymbolsinmobileterminalinterfacedesign[D].Xi'anUniversityofArchitectureandTechnology,2013.

    [10]朱晓露.基于用户体验的APP交互设计研究[D].成都:西南交通大学,2015.ZHUXiao-lu.ResearchonAPPInteractiveDesignBasedonUserExperience[D].Chengdu:SouthwestJiaoTongUniversity,2015.

上一篇:我国传统服饰的审美意蕴与创新路径
下一篇:辽金时期西京民俗文化特色