【前端大创国奖】千帆聚明州——宋代宁波与海丝之路的不解之缘

* 项目成员： quanjui，水桶，歪歪，DAYING在学习，延

视频展示

（国奖）交互前端—千帆聚明州

项目链接

网页链接：（http://daying75.gitee.io/thousandsofsailsinmingzhou/）【会有点慢需要等待一会儿！！建议google浏览器80%观看效果更佳哦】
项目链接：https://github.com/DAYING75/ThousandsOfSailsInMingZhou
微信公众号：https://mp.weixin.qq.com/s/jxbBr87akVNETjhgarPRVg

项目介绍

目标：

我们制作的千帆聚明州——宋代宁波与海丝之路的不解之缘的交互式演绎创新实践项目，主要想要通过视觉与技术跨专业合作，运用新型的交互网页的形式，来传播宋代宁波与海丝之路渊源悠长的历史，传播海丝文化。
我们以宁波博物馆中海上丝绸之的文旅元素作为背景，进行网页交互设计，以宋代明州（今宁波）海上贸易发达的荣景为主题，由此衍生到地理位置，文化和贸易往来这三个方面来介绍明州海上贸易的发达，着重介绍了贸易往来,借此揭示宁波与海丝之路的不解之缘。
1.提高海丝之路文旅博览会的知名度
2.作为海丝之路文旅博览会的先导片和宣传片
3.吸引观众参与此次文旅博览会
4.向观众介绍海丝之路与宁波的不解之缘
5.在社交媒体上起到一定的宣传作用
6.以网站的形式放在pc端、手机移动端、
40寸交互式触摸大屏上

调研分析：

内容概要：

方案流程：

交互说明:

设计分析：

项目研究总结

该实践项目，通过视觉与技术跨专业合作，运用新型的交互形式，来传播宋代宁波与海丝之路渊源悠长的历史，传播海丝文化，实施“教育关爱”志愿服务。完成千帆聚明州——宋代宁波与海丝之路的不解之缘的交互网站
①　地理优势。从地理位置上来介绍宋代宁波可以成为海丝之路的原因。
②　文化方面。随着航海事业的发展流入的妈祖信仰与当地乡俗结合，通过介绍祭祀天后妈祖的殿堂和行业办公议事庆安会馆的长图。描述宋代宁波在文化上也受到海丝之路贸易的影响。
③　贸易方面。据考证，宋代明州海丝之路共有三条航线，北通高丽，东与日本，南与东南亚。我们通过制作贸易长街长图，长街上坐落有三条航线所前往的国家的特色建筑。可以从建筑进入柜台，通过点击物品跳出相应卡牌介绍，了解这他们之间的贸易往来。
1）在视觉方面，项目将在前期参赛作品的基础上以第一视角的方式帮助本项目以更直观的效果呈现，开屏以纯手绘的中国传统水墨绘画的风格的画面为整个作品定下清隽秀逸的风格基调，画面彰显了中国传统山水的，历史人文，古城风貌，面向新时代，弘扬中华传统文化审美。
2）在软件技术方面，技术团队应用静态网页编程语言HTML实现网页布局和网页动画，以及网页轻量级框架Jquery实现交互。技术团队凭借专业技术通过网页编程使设计团队的精彩设计得以落地和实现，完成一个互动性很强画面流畅的作品。
结合当今“Z世代”的潮流趋势，结合作品的设计规划，总结最贴合中华优秀传统文化可视化的需求，找到最合适的编程语言开发网页和设计团队不断沟通达到更好的视觉互动效果。我们以前期的比赛项目为基础不断衍生，表现宋代海丝之路的繁荣。宁波在宋代被称为明州，我们以讲述明州在宋代时期海上贸易的发达作为主题，我们从地理位置，文化和贸易往来这三个方面来让观众了解宁波与海上丝绸之路的不解之缘。该网页用引人入胜的方式，和创新的表现效果介绍了海丝之路与宁波渊源悠长的历史，用互动网页的方式带领观众领略海丝文化之美。

创新点、社会影响和推广前景

本项目采用跨校区跨学院跨专业的新型合作方式，由视传和媒工两个不同专业班级的成员共同努力，需克服异地交流合作的不便和困难，利用双方的专业优势，互补互利，资源共享。 视传同学的设计优势，使作品更具美观性和观赏性，增添作品的艺术魅力。而媒工同学则技术支持，通过网页编程使视传同学的精彩设计得以落地和实现。
1.跨学科技术融合。为了项目能真正意义上专业融合，能共同完成项目任务，两个学科的团队成员都会做多次沟通，商定阶段性项目计划、项目内容、项目要求等。视传专业团队 成员主要集中在指导学生选定主题、创意与原画设计到网页交互的过渡，以及最后的展示设计 部分。软工专业团队成员主要集中在HTML网页布局、人机交互设计计算机程序设计部分。
2.跨专业项目融合。两个专业的团队成员分别负责项目的创意设计任务及网页编程任务，项目均可实现线上展示及交互效果。通过“设计”和“技术”的交叉融合，真正实现了跨 学科的优势互补，为精品的产出打下了坚实的基础，最终合作完成从作品设计到线上交互的动态呈现。
3.真正完成一个可以落地的具有实用性的交互网页设计。该项目为既可以为宁波市政府每年海丝之路文旅博览会做宣传。可以放在展会现场，现场的互动大屏也可以放在官网上为 其起到宣传作用。同时可给宁波市政府提供相关科普教育的材料，为宁波海丝文化起到良好的宣传作用。
4.项目主题贴紧当今的海丝之路和浙东唐诗之路的浙江省推出的文化产业发展的重要举措。通过对宁波与海丝之路缘分的不断挖掘，以交互式网页的形式充分展现宁波“诗画山水，海天福地”的文化魅力，为其献出一份青春力量

项目研究过程中的主要收获体会、不足

1.设计方面的收获体会与不足
2.编程方面的收获体会与不足

@ 此次项目中的编程部分的有以下几点收获和体会。
其一，扩大了知识面，提高编程技能。在项目研究过程中，我们将课堂掌握的各种知识和技能，应用到应用到实际问题中。在实现交互和前端样式时遇到不少困难，期间通过向老师求助以及搜索网络资料，一步步地将困难解决。扩展了课程理论知识，也帮助我们加深编程语言和框架的理解，累积编程经验。
其二，在这次跨学科研究项目中，见识到了许多优秀的视觉设计作品，提高艺术审美，更打开了常规网页交互的思路。好的视觉设计可以吸引和留住用户的注意力，提高用户体验，但却是编程人员往往忽视和不足的地方。在本次项目中学习到在网站设计中如何通过色彩搭配、内容排版、字体设计让用户感到更加舒适和愉悦，同时强化品牌形象。
其三，提高了团队合作能力和解决问题的能力。项目整体的工作量是很大的，遇到的问题和挑战也很多，需要将任务细化、制定详细的计划并确保更上项目的进度。在这个过程中我们团队成员密切合作，大家一起发散思维找到解决方案，相互支持、相互协作。

@此次项目中的编程部分的不足之处有以下几点。
其一，项目前期负责编程的成员间沟通不及时，没有做好彼此磨合，项目进行效率较低。
其二，编程同学编程语言实践项目经验不足，参与过的完整系统开发少，无法对自身进行客观的技能评估，也并未对项目的任务量和难易程度进行精准掌握，从而导致在项目开展前期任务分配时略显失衡。
其三，编程同学前端HTML等知识学习不够深入，因此语言使用稍显冗长繁琐，经常会出现一些低级错误，遇到困难迟迟难以解决，影响整体项目的开发效率;
其四，在整个项目中，编程同学稍显被动，不论是前期选题，还是中期创作，亦或是后期的结题，编程同学在与设计同学的沟通交流方面，表现得不够积极主动，导致项目进行的较为缓慢。
其五，在代码实现方面，编程同学负责的交互设计虽然做到了全面的完整覆盖，但是细节方面的技术设计略显粗糙，呈现的交互处理结果不够完美细致。

后续研究和建议

我们后续的研究方向主要放在对新技术的融合。我们现在的技术还不足够成熟，现在许多新技术使网站创建过程变得更简单、更高效。因为我们是多人合作所以采用的是最底层代码来写的，后期我们将继续研究学习，追求把最新的技术融合到我们的项目中，使 个代码的兼容性更强。尽管前端技术没有前几年突破性的技术出现。但Flutter、WebAssembly、Serverless、LowCode等大型前端领域都在蓬勃发展，并且让我们看到了更多前端融合趋势。
页面互动方式还不像大网页那样成熟，最新的技术让我们看到了更多交互的可能。我们后期准备学习相关的静态css/js/img等资源做成cdn缓存，这样把资源同步到全国全球各地，用户就能更快访问到。还准备学习如何在白屏时间做加载动画，增强用户体验。
文化是城市的灵魂，旅游是城市的综合名片。作为一座“书藏古今、港通天下”的城市，宁波有着深厚历史底蕴与开发开放优势。这两年，“顺着运河来看海”旅游主题口号，更是把海上丝绸之路“活化石”与中国大运河南端入海口这两大文化基因融入现代旅游中。新阶段赋予文化和旅游发展新使命。日前发布的宁波市文化和旅游发展“十四五”规划指出，文化是城市的灵魂，旅游是城市的综合名片，文化和旅游既是新阶段的重大任务，也是宁波建设重要窗口模范生和共同富裕先行市的显著标志。后续我们要继续根据自己所学习的相关知识为宁波的宣传做出一份微薄之力。

媒介发布：