松江有轨电车沿途地标可视化App设计

张琦 储蕾芳

摘要：上海市松江有轨电车途经松江人文景观，为满足观光乘客的实际需求，改良松江有轨电车可视化轨道交通路线图被提上日程。通过实地考察、信息提取，用可视化图形方式将松江有轨电车轨道交通路线图制作成方便游客游览的导向App，旨在打造推广松江人文景观的便民服务，将松江风貌展示给游客，以提升松江区域文化价值。

关键词：松江有轨电车 文化地标 用户体验 可视化设计

一、背景与调研

上海松江拥有汉唐文化风貌区和最为完整的明清风格的居民片区，广富林古文化遗址被国务院核定公布为第七批全国重点文物保护单位，有着浓厚的文化历史底蕴，值得进行深入研究与推广。有轨电车是松江区的特色交通工具，沿途路经多个松江人文景点。本文通过实地踩点取景走访和拍摄站点附近标志性的建筑，响应政府保护文物的号召，特选择松江特色景点中的八大景点作为重点进行创新创作。

网络普及时代，移动导航等信息技术日趋成熟，受众从传统了解文化地标的媒介如纸质的地图、路标，演变为如今大多包含着动态元素的导航以及带有导航、定位功能的App，运用信息可视化设计已成为未来的主流导向。

二、观光地标可视化设计的案例分析

通过分析国外优秀的案例，将信息可视化运用于界面设计。从色彩、图形、板式、风格等方面解析，从中汲取优点。

从图1案例地图的色彩分析，被海环绕的岛屿颜色采用海水的蓝绿色彩，而商业气息的城市街道选择的色彩为大地色。岛屿的整体颜色均为同色系，而城市街道的颜色带有对比色。从图形的设计方面看，岛屿的设计图采用纯手绘制作的矢量扁平图，有整齐划一的规则感。而城市则采用了类似剪纸的手法。简约的图形让用户对地图和景点的信息一目了然。手绘的可视化地图并不完全需要精准的定点定位，以及主要线路的勾勒。从色彩、图形设计、版式和风格方面，两者风格迥异。但两者共同之处是绘制方式都采用了主色调统一，图形简单易懂，能够使不了解详情的用户快速地捕捉到信息，并对他们起到引导的作用。此类做法可以使得可视化地图上的重要景点以及路线很清晰地表达，这也是十分值得借鉴的。

创作者结合以上路线图给人带来的感官体验，汲取经验得到了创作上的构想。基于色彩、图形设计、版式和风格四个方面来进行创作与创新：通过定位与特色来确定大色调，区域使用简约的矢量图形可以带给人们直观的感官体验，能够清晰地展现景点信息与路线。在此基础上加入手绘的元素可以带给用户新的视觉体验，从原先的古板变得有趣、生动。

三、松江有轨电车沿途文化地标可视化App设计

（一）用户调查和需求分析

在调研前期，通过定点访谈了解用户的需要与诉求：

1.大部分游客参观景点的目的是为了观光以及打卡网红地标。

2.有轨电车的线路还没有得到完全的开发，所以，有一些文化地标和旅游景点周围的交通不是特别方便。

3.有一些想来了解和参观人文景观的游客无从下手，不知道应该从哪里获取更多关于这些景点的信息。

针对以上用户的需求，明确想要去的目的地，提供有轨电车线路和每个景点的信息。想要打卡网红地的游客可以通过地图快速获取信息，也为用户提供一些人文景观的历史介绍，以便用户进行挑选。针对交通不便，为用户设计和挑选出最便利的出行方式、路线以及详细的换乘信息。同时，也提供了附近的就餐选择，根据餐厅的性价比、类型以及距离景点的远近等进行罗列，介绍这些餐厅的招牌菜。用户可以通过点击相应的景点图标进入，而扁平化图标在视觉体验上具有简单的形式美特点，去掉了烦琐的装饰效果。

（二）App的设定

1.功能设定

根据用户的需求与分析，将App中的功能浓缩成“交通”“美食”以及“攻略”，并将这三种功能加入每一个景点中。

用户可以通过点击相应的景点图标，进入想要了解的地点查看详细信息。当用户在首页点击相应景点时，就到了该景点的页面，该页面主要是以扁平化图标的形式显现，图标是界面设计的核心与灵魂，而扁平化图标在视觉体验上具有简单的形式美特点，去掉了烦琐的装饰效果。

一级页面共有八个景点进行点击与进入各自的二级页面，二级页面一共有四个图标，最上方是设计的该景点专属的扁平化图标，下方三个图标分别是交通、美食及攻略，用户可以直接通过从图形菜单选取图标来进行交互。用户点击二级界面中的“交通”，交通中包含六种常见出行方式，即有轨电车、地铁、公交、驾车、步行、自行车。

点击“美食”，则根据餐厅的性价比、类型以及距离景点的远近进行罗列，包含人气菜品的图片与简介;点击“攻略”，提供不同的选择和详细的游玩攻略，以及特色景点中的人气景点和人文景点的图片与介绍。

以上功能是充分了解和考虑到用户的需求设定的，能够让想要“打卡”网红地的游客迅速获得信息;让不熟悉景点的游客基本了解景点选择去向;为有目的性的游客提供更人性化的选择。这些都是想要让用户更好地欣赏松江的特色景点，以促进松江的旅游业发展，推动松江文化的发展与传承。

2.风格设定

制作前期，寻找景点定位与特色来确定整体色调，区域使用简约的矢量图形带给人们直观的感官体验，清晰展现景点信息与路线。加入手绘的元素使其有趣生动，带给用户新的视觉体验。

图标是地图可视化系统中交互功能符号化的主要形式，图标设计也是地图可视化系统符号设计的重要内容，因此，将松江区有轨电车的线路与每站周边的景点进行了图标可视化设计。图标设计是实现用户和地图可视化系统交互的关键环节，App首页以手绘地图的方式呈现，依靠图形化作为组织信息的主要方式。App主视觉图的主色调为蓝色与粉色，加入少许的黄色作为提亮与突出重点。八大景点的图标以黄色勾勒用于提醒与引导用户，周围加入线框的经典特色，如玛雅海滩水公园的矢量图标旁就是玛雅的标志建筑物的线框图，并使用有透明度的线绘制路的大致走向。之所以使用类似镂空的线框图，是为了在丰富画面的基础上不混淆主次，使用户的重点依旧落在景点的图标上。

App界面的主色调为蓝色和白色，蓝色给人一种美丽、冷静、理智、安详与广阔的感觉，与景点带来的感受相呼应。此外由于蓝色沉稳的特性，具有理智、准确的意象，大多出现在商业设计中，强调科技、效率的商品或企业形象，运用于App中更能体现智慧城市的定位与特色，蓝白交替，形成强烈的对比，可以清晰地展现路线图的信息。

制作后期，使用了Axure RP以及XD软件进行汇总和制作简单，点击交互实现松江有轨电车带动下的文化地标可视化App。

四、总结与展望

上海松江区有轨电车线路与电车周边景点可视化App是将松江文化底蕴和文化地标相结合的成果，借助技术的发展与政府的支持推广松江的文化，能够让用户更好地欣賞松江的特色景点，促进松江的旅游业发展，推广松江文化，使松江文化得以更好地发展与传承。随着5G的到来以及技术不断革新，此类体验式交互App将拥有更多动态信息元素，给用户带来更大的便利。

参考文献：

[1]陈立扬.有轨电车如何促进城市发展[J].中国投资（中英文），2020（Z3）：66-67.

[2]刘佳琪.基于App中个性化需求交互式信息可视化设计研究[J].西部皮革，2020，42（06）：77.

[3]张璐婷.手机App中数据可视化设计分析——以“不繁地理”为例[J].设计，2020，33（08）：108-110.

★基金项目：本文系“智慧城市松江有轨电车线路的可视化设计与App制作”大学生创新项目资助。

（作者简介：张琦，女，上海工程技术大学中韩多媒体设计学院，研究方向：数字媒体艺术;储蕾芳<通讯作者>，女，上海工程技术大学，讲师，研究方向：数字媒体设计）

（责任编辑 刘月娇）