松江有軌電車沿途地標可視化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制作”大學生創新項目資助。

（作者簡介：張琦，女，上海工程技術大學中韓多媒體設計學院，研究方向：數字媒體藝術;儲蕾芳<通訊作者>，女，上海工程技術大學，講師，研究方向：數字媒體設計）

（責任編輯 劉月嬌）