宋代青绿山水画色彩聚类与交互设计实践.pdf

如今用户对传统艺术相关的创作与设计有着较高的参与意愿，研究宋代青绿山水绘画艺术并结合互联网时代的技术进行设计，探索传统绘画艺术的应用路径，让更多人参与文化艺术传播。搜集并筛选宋代的青绿山水画，构建其图库。首先运用K均值聚类算法对青绿山水画进行多次色彩聚类提取，以主色、辅色和点缀色凝练配色方案；然后分析提取青绿山水绘画元素与意象，获得交互设计实践的视觉要素、设计路径、信息架构等。结合视觉设计规范与功能定位，以用户体验为出发点打造青绿山水主题趣味设计科普类手机软件。平衡个性化与良好的交互体验，以期打造现代化的古画趣味再设计平台，将历史时期的绘画精神与风貌带入设计过程和结果，呈现古为今用、推陈出新的未来式可持续创新探索。关键词：青绿山水画；K均值聚类；色彩提取；交互设计中图分类号：TS664文献标志码：A文章编号：1 0 0 0-4 6 2 9(2 0 2 3)0 3-0 0 6 6-0 6D0I:10.16610/ki.jiaju.2023.03.014Color Clustering and Interactive Design of Blue-Green Mode ofPainting Landscape in Song DynastyXU Xue,ZHOU Chengmin(College ofFurnishings and Industrial Design,Nanjing Forestry University,Nanjing 210037,China)Abstract:Nowadays,people have high willingness to participate in the creation and design of traditional art.Combinedwith the design and technology of the Internet era,the blue-green mode of painting landscape in Song Dynasty was stud-ied and the design and application of traditional painting art was explored.The K-means clustering algorithm was used toextract colors of blue-green mode painting landscape,and the color matching scheme was condensed with main color,auxiliary color and dotted color.Then the elements and images of blue-green mode painting landscape were analyzed andextracted with an aim to obtain the visual elements,design path and information architecture of interactive design prac-tice.Combined with the visual design specification and function orientation,the popular mobile phone software of blue-green mode of painting landscape theme interest design was built based on user experience.In order to create a modernplatform for re-design of ancient painting interest,the personalized and good interactive experience was balanced.Thespirit and style of painting in the historical period was engaged into the design process and results,which will present thesustainable innovation and exploration for future.Key words:blue-green mode of painting landscape;K-means clustering;color clustering;interactive design近年来文创产业逐渐成熟，青绿山水画走入大众视野，关于国画的创新探索一直在进程中,其他领域如游戏、影视、制造、交互媒体等都逐渐融入国风元素。在这种多样化的消费形态下，以互联网和数字技术趋势为出发点的设计成为主流，将有历史感的绘画精神与风貌融人设计，推出可持续的创新探索。青绿山水历经隋唐繁盛、两宋消沉和元明清退出主流的发展历程，而宋代在帝王的喜好驱动下衍生复古风气，出现很多青绿山水作品，甚至“去色彩化”发展为小青绿山水，这样特殊的属性让宋代青绿山水画的研究更加丰富2 。笔墨与构造是水墨山水画的核心，那么色彩就是青绿山水画的灵魂，设色使得整体画面重建空间关系，使用近暖远冷用色规律，营造深远空间。佛教壁画常用石青、石绿、朱砂等矿物颜料，主色调多为青绿色，直接影响了古代青绿山水主色；道家思想的自然观与宇宙观让画家心向往自然而寻求自然与哲学，追求“随类赋彩”原则；儒家讲求和谐包容，使得山水画色彩整体关系融洽有度、主辅协调。以宋代青绿山水画为研究对象，通过数字化技术与设计方法对色彩与基金项目：南京林业大学生态康养家居产学研用国际合作联合实验室项目（2 0 2 0 0 0 4）。作者简介：徐雪（1 9 9 9），女，硕士研究生，研究方向为家具设计与工程。E-mail:。通信作者：周橙曼（1 9 7 8 一），女，副教授，研究方向为家具设计与工程。E-mail：z c m7 8 1 6 3.c o m。引文格式：徐雪，周橙曼.宋代青绿山水画色彩聚类与交互设计实践.家具，2 0 2 3，4 4(3）：6 6-7 1.Furniture067No.3业设计家具2023年第4 4 卷第3 期Furniture2023Vol.44No.3构成元素进行研究，探索青绿山水画的设计与知识科普类别的交互软件，让更多人感受青绿山水绘画艺术的魅力，并能够参与到相关的创作或者设计中，不仅延续传承传统艺术与文化，而且符合当今科技应用发展趋势。1宋代青绿山水画色彩聚类提取1.1宋代青绿山水画色彩图库建立青绿山水画图像库，运用K均值聚类算法(K-means Clustering Algorithm)对青绿山水画进行特征色彩提取，根据数据建构色彩网络模型，为交互产品的色彩模块提供数据以及理论支撑。田少煦等4 提出绘画艺术色彩体系包括视觉颜色系统、传统色彩系统和色彩意象系统。对青绿山水画进行色彩体系分析，传统色彩系统指的是对宋代青绿山水画进行总结，结果反映出青绿山水的色彩沿革与色彩系统；视觉颜色系统以典型的色彩样本为代表，结合当代人的色彩视觉倾向，得出可以转化的现代与传统结合的视觉颜色系统；色彩意象系统即色彩心理、色彩情感和色彩文化的认知，这在不同的文化中具有核心意义与不可替代性。研究宋代青绿山水画，按照完整度、可用性、赋色风格等原则筛选出2 2 幅青绿山水画，其中包括赵伯驹、赵伯猜、王希孟等名家的作品。从色彩体系角度探讨宋代青绿山水画，色彩聚类提取结果反映青绿山水画的传统色彩，并应用于现代的交互设计，结合当代人的审美倾向及互联网时代的网络用色规范体系，其具有独特的文化底蕴和色彩情感，可以为个性与复古寻找新的突破点，平衡工业时代的趋同性与个性时代的特殊性，在未来与传统之间寻找协同。色彩研究时需要进行作品数字图像处理，以保证聚类结果的准确性及可用性。1.2K均值色彩聚类提取K均值聚类算法是一种基于划分的算法，先确定聚类数目K和K个初始聚类中心，在损失函数计算下把数据集划分为若干互不相交的簇。其优点为效果好且逻辑易懂，但这种方法有一定的局限性，难点在于对K值的确定、初始聚类中心的选取等。此算法过程中不断迭代，原始数据集合聚类后取平均值,重新定位并分配6 。研究使用K均值聚类法进行青绿山水画的色彩聚类，包括主颜色提取以及抓取颜色数据占比7 。先确定聚类数目K和K个初始聚类中心，经过多次测试与比对，当送代次数超过1 0 时，颜色提取差异不大，说明K值为1 2 时接近最佳的提取结果，因此将K值设为1 0。青绿山水画的主题色非常明确，青绿主色调掌控整体风格，但是其色彩元素并不单一，在单幅图像颜色提取过程中以RGB色灰度模式进行提取，灰度模式下初始聚类中心的选择遵循等距原则，对RGB色彩空间的对角线进行划分选择灰度值8 ,得到相应的色彩占比数据。宋代青绿山水画中，代表性的作品有王希孟的千里江山图、赵伯驹的仙山楼阁图、小青绿山水如赵伯的碧山宇图等，部分色彩提取结果如图1 所示。单幅作品可以获得更细化的色彩风格，多幅图像聚类过后进行色彩网络构建，为后续的设计提供支撑。第2 次聚类基于多幅图像处理结果，将第1 次聚类的颜色按照比例数据进行集合后再次聚类（K=20），提取出青绿山水画的代表性色彩。第1 次聚类得到颜色比例和共现关系，在第2 次聚类结果中对主色关系进行链接，以搭建配色卡片和青绿山水色彩网络，如图2 所示，选择主色调生成色卡并搭配辅助色、点缀色等。12.5%4.4%17.5%2.1%20%9.5%10.9%9.7%7%6.4%图1 单幅图像色彩提取Fig.1Color extraction of single image0120021903180417160515061407130812111009图2色彩网络模型Fig.2Colornetworkmodel068FurnitureFurniture2023Vol.44No.3业设计家具2023年第4 4 卷第3 期2宋代青绿山水画的交互设计探索2.1交互设计策略根据用户体验了解其影响因素。如图3 所示是用户体验模型，从模型中可以看出其复杂程度,结合针对性的设计目标，更注重画面信息传达的简洁明了以及科普知识内容，在此基础上，总结出适合的用户体验模型从定义层、交互层到视觉层，定义层注重以用户需求出发，找到合适的产品或者品牌定位9；交互层面内容丰富，基本的需要是构建整体信息架构，在框架之中填补内容，然后将所有元素有序组合做出适合的交互；视觉层打造良好的审美体验，也是比较重要的一环，要从视觉上解决一些问题并实现功能。这个划分按照层次发展，可以更加明确各个层次之间的联系和区分，使得更容易理解产品与设计1 0 。具体完成功能型信息型表现层视觉设计界面设计导航设计框架层信息设计视觉层视觉设计品结构层视觉设计信息架构范围层交互层信息架构+交互设计+信息内容设计功能规格内容需求战略层用户目标产品目标定义层用户需求+品牌定位抽象概念图3 用户体验模型Fig.3Userexperiencemodel2.2科普功能定位2.2.1交互目标定位如今人们的创新意识提高，有精力与渠道展现个性与自我，传统文化的大力宣传也使得更多人有意愿去了解传统艺术。青绿山水的文创产品不断出现，关注度提高，关于其知识科普的需求增加。为了让用户探索青绿山水绘画艺术与其文化内涵，通过画家和绘画作品了解中国传统文化和艺术，并进行过程简化以便用户自主选择设计，产品目标是选择青绿山水元素构成图案输出，秉持简洁易懂的逻辑理念；设计目标是在科普青绿山水知识基础上，提供简单流畅的设计过程；体验目标是让用户了解传统青绿山水绘画艺术并进行自主创作，使用前有好奇心，使用中方便省心，使用后满意度高叫2.2.2交互层级定位作为趣味设计类以及青绿山水知识科普交互APP，按照层级划分其功能定位：第1 层：青绿山水画科普。从传统绘画逐渐递进到山水画，再细分至青绿山水。第2 层：青绿山水画二次创作。用户通过对山水画元素的选取、排列、重组等完成一幅山水画作品，主要基于原图像的创作和线稿自主配色的创作，自由度较高，可以选择长卷、小品和扇面，册页、斗方、条幅、堂幅等画幅均按同一种尺寸比例裁剪。第3 层：青绿山水画交流分享平台。围绕用户二次创作的青绿山水作品进行交流，采用图片式分享，用户在不同作品下方进行互动、评论、点赞等操作。第4 层：作品展示与应用。选择扁平化、极简的方式表达，图案应用预览，结合第二层功能，将作品在实际的家居产品、服装、布料等方面应用2.3交互设计原则2.3.1一致性原则传统艺术趣味设计类APP需要注意一些设计原则，首先要遵循一致性原则，青绿山水画风格明显，基于风格一致性还要细分保证主体色调的一致性、icon与字体的一致性、标题与内容的一致性、APP界面与所依托主题的文化气质的一致性。2.3.2简约直观原则其次是简约直观原则，功能目的一目了然，这需要通过一些重点突出与提醒来更好地达到所期Furniture069No.3业设计家具2023年第4 4 卷Furniture2023Vol.44第4 4 卷第3 期待的效果，重点功能与重要信息可以通过色彩的不同与大小的区分来实现，不同颜色区域代表不同功能，醒目的颜色区域代表着最核心功能，而适当的消息提醒也是可以提高直观度的2 2.3.3易取易用原则易取易用原则，其中易用需要操作逻辑清晰，不是代表着操作简单，而是需要背后正确的使用逻辑，这样从根本上降低操作的难度。易取指用户需要快速或者方便地获取自己想要的信息，用户不会花过多时间去寻找一些非必要信息，非必要的记忆内容要减少，一些操作比如记录足迹、功能有序分类等。2.3.4防错与趣味性原则还有防错原则，新手用户刚使用时建议接受新手指导，常规界面没有差别，不同的是设计创作界面,需要了解一些按钮和图标的功能指向。最后一点，趣味性不但能吸引新用户，也会让老用户留下来，传统绘画艺术结合趣味性，打破传统的高雅，让相关的设计创作变得轻松1 3 3宋代青绿山水画APP设计3.1视觉元素设计APP配色设计主要分为主色、辅色、配色、icon用色和主要文字用色，颜色来源于宋代的青绿山水画色彩聚类结果，分析出“古色传统”与“古今时尚”两种色彩风格，并根据界面使用情况和web安全色调配视觉颜色，以更好地适应现代化、人性化的使用。最终选择以禅音粉（#eOd9d1)为主色、古松石（#3 0 9 2 9 3）为辅色的界面配色设计，具体配色过程如图4 所示。青绿山水画以山、水为主体，其他常见意象有树木、建筑、桥梁、小船、瀑布等，主体形成风格与气韵，辅助元素起到视觉引导、沟通关联、营造氛围、缓解视觉疲劳、动静结合等作用。以宋代青绿山水画元素为设计灵感，结合APP功能结构及创作界面特征，如线稿的填色与元素的重组构成，logo的一部分采用描线形式，其他为填色形式，色彩配比代表青绿山水，与主题相呼应。界面图标以山水、竹简等传统元素为灵感。颜色演变：web安全色+灵感配色色彩聚类结果提取色彩搭配主题色搭配青山绿青山绿枯枝木禅音粉禅音粉禅音粉暮冬寒枯枝木羚羊角古松石秋谷金青山绿古色传统古今时尚图4 界面配色设计Fig.4Colordesign of the interface3.2交互流程设计科普与创作结合，旨在传播青绿山水艺术文化的同时，赋予文化与艺术再创作的可能，形成传播链条，提供青绿山水画的交流平台。APP分为4 个模块，创作模块、科普模块、社区模块和我的模块，流程图如图5 所示，高保真页面如图6 所示。(1)创作界面模块：此模块为个人创作编辑，点击新建作品图标，选取一种风格，然后对元素进行填色、组合和排列。(2)科普模块：此模块是青绿山水画的一个科普知识区域，细分为“知史”“知画”“知文 3 个部分，“知史”是对青绿山水画历史发展的一个介绍，“知画”是对画家、作品的一个介绍，“知文”是对其背后的文化等做的一个介绍。（3）社区界面模块：这一个模块是个人作品分享、其他用户热门作品等呈现的地方，通过作品发布的形式、浏览他人作品的形式与用户形成交流，打造一个虚拟网络社区，操作方式以点击为主。070FurnitureFurniture2023Vol.44No.3业设计2023年家具第4 4 卷第3 期首次打开APP山水画推荐随便逛逛注册账号知青绿知史账号登陆知画首页知文创作设置线稿元素足迹新建作品填色我的收藏选择风格原画提取元素选择画幅、色热门作品个人资料彩、纹理调节投影我的我的发布滑动投影按键我的作品保存、分享等聊闲云图5 APP流程设计Fig.5FlowdesignoftheAPPAA八941的小辛2施山清福一人图6 高保真页面Fig.6High-fidelitypageFurniture071阅欢迎欢迎一迎赐稿刊登信郁若岚）陈英华（责任编辑业设计家具2023年第4 4 卷第3 期Furniture2023Vol.44No.33.3APP可用性设计评价该APP面向普通用户，寻找6 名用户进行原型demo试用访谈，采用李克特五级量表法进行评价模型构建1 4 ,结合用户模型与用户体验，从视觉体验、交互体验和整体体验进行衡量，以此得出APP可用性评价。视觉层注重图标、字体等的易识别性，由于以传统青绿山水画为主题需要保持整体风格一致性，总结出的关键词为可辩识性、风格一致性、舒适性；交互层注重逻辑与易用原则，结合APP设计与使用定位，总结出的关键词为易用性、功能性、趣味性；整体体验以用户对此款APP的满意度进行衡量1 5 。用户首先对APP原型进行试用，然后根据评价标准在1 至5 分之内进行打分，1 至2 分表示体验较差，2 至3 分表示体验一般，3 至4 分表示体验较好，4 至5 分表示体验良好。从雷达图可以看出：用户认为APP图标可识别性良好，色彩风格较为一致，但缺少古朴，比较现代，交互复杂度不高，因此可能除了设计界面,其他页面的趣味性显得不高。整体上功能主线比较一致，进行趣味组合设计以及青绿山水知识科普，交互上易取易用，但希望结合现在的一些趋势做更多的动效。4结语科技变化带来视觉与交互的多重可能性。通过K均值色彩聚类提取分析研究，获得宋代青绿山水画的特征色彩体系，包括视觉颜色、传统色彩和色彩意象，从而更精确地运用于交互界面配色。从用户体验模型维度，保证功能主线一致性，特别注意框架逻辑和视觉要素，明确功能定位和流程交互，带来新的情感体验。从宋代青绿山水画的研究中获取其图案和色彩，这些设计元素通过转化应用在APP界面与内容中,通过简洁的创作模块与科普模块，在创作的青绿山水风格基础上衍生的任何作品，具有结合艺术以及科技的性质。同时也可以丰富精神层面的需求，以及在快节奏生活中提供碎片阅读，做到对传统艺术与文化的传播，延续青绿山水绘画艺术的魅力。参考文献：1】孙守迁，闵歆，汤永川.数字创意产业发展现状与前景J.包装工程,2 0 1 9,4 0(1 2):6 5-7 4.2陈碧琪，关惠元.宋代书法艺术与家具造物的联系与统一.家具,2 0 2 0,4 1(3):4 6-5 0.3】王聪.从自然观看当代青绿山水画发展特征J.美术，2 0 2 0,5 9(8):138-139.【4 田少煦，徐丽君.中日色彩文化比较：基于民族心理的色彩意象J.深圳大学学报（人文社会科学版）,2 0 1 5,3（4)：1 3-1 8.5 SHARMA N,SHARMA R,JINDAL N.An improved technique forface age progression and enhanced super-resolution with genera-tive adversarial networksJJ.Wireless Personal Communications,2020,27(5):2215-2233.6李爽，陈瑞瑞，林楠.面向大数据挖掘的Hadoop框架K均值聚类算法J.计算机工程与设计，2 0 1 8,3 9(1 2)：3 7 3 4-3 7 3 8.7】陈登凯，王瑶.基于MCCQ的民间布老虎色彩特征提取及设计实践J.包装工程,2 0 1 9,4 0(2 4)：4 5-4 9.8杨俊闯,赵超.K-Means聚类算法研究综述J.计算机工程与应用,2 0 1 9,5 5(2 3):7-1 4,6 3.9杨泽航，朱文涛.心流体验为主导的知识型APP体验设计研究J.设计,2 0 2 1,3 4(5):4 1-4 3.10蔡宜静，钟世禄.儿童智能化收纳家具信息系统设计.家具，2021,42(6):41-44,74.11马敏捷，吕九芳.博物馆教育职能发挥下的儿童文创产品开发.家具,2 0 2 2,4 3(2):9 3-9 7.12李思洁，张亚先.虚拟现实技术下川剧文化类游戏APP设计研究J.工业设计,2 0 2 1,1 6(1)：1 1 6-1 1 7.1 3 张亚丽，覃京燕，林海斌，等.文化遗产法海寺壁画艺术的文创产品设计研究J.包装工程，2 0 1 9,4 0（2 4）：3 9-4 4.14孙璐，李力，孔英.信息交互能力的测度及其对竞争优势的影响研究：基于用户体验的价值共创视角J.管理工程学报，2018,32(2):67-83.15陈炳睿，胡文刚.一种可拆装式椭圆样节点的设计与性能分析J.木材科学与技术，2 0 2 2,3 6(2)：6 5-7 0,8 6.