松江有軌電車(chē)沿途地標(biāo)可視化App設(shè)計(jì)

張琦 儲(chǔ)蕾芳

摘要：上海市松江有軌電車(chē)途經(jīng)松江人文景觀，為滿足觀光乘客的實(shí)際需求，改良松江有軌電車(chē)可視化軌道交通路線圖被提上日程。通過(guò)實(shí)地考察、信息提取，用可視化圖形方式將松江有軌電車(chē)軌道交通路線圖制作成方便游客游覽的導(dǎo)向App，旨在打造推廣松江人文景觀的便民服務(wù)，將松江風(fēng)貌展示給游客，以提升松江區(qū)域文化價(jià)值。

關(guān)鍵詞：松江有軌電車(chē) 文化地標(biāo) 用戶體驗(yàn) 可視化設(shè)計(jì)

一、背景與調(diào)研

上海松江擁有漢唐文化風(fēng)貌區(qū)和最為完整的明清風(fēng)格的居民片區(qū)，廣富林古文化遺址被國(guó)務(wù)院核定公布為第七批全國(guó)重點(diǎn)文物保護(hù)單位，有著濃厚的文化歷史底蘊(yùn)，值得進(jìn)行深入研究與推廣。有軌電車(chē)是松江區(qū)的特色交通工具，沿途路經(jīng)多個(gè)松江人文景點(diǎn)。本文通過(guò)實(shí)地踩點(diǎn)取景走訪和拍攝站點(diǎn)附近標(biāo)志性的建筑，響應(yīng)政府保護(hù)文物的號(hào)召，特選擇松江特色景點(diǎn)中的八大景點(diǎn)作為重點(diǎn)進(jìn)行創(chuàng)新創(chuàng)作。

網(wǎng)絡(luò)普及時(shí)代，移動(dòng)導(dǎo)航等信息技術(shù)日趨成熟，受眾從傳統(tǒng)了解文化地標(biāo)的媒介如紙質(zhì)的地圖、路標(biāo)，演變?yōu)槿缃翊蠖喟鴦?dòng)態(tài)元素的導(dǎo)航以及帶有導(dǎo)航、定位功能的App，運(yùn)用信息可視化設(shè)計(jì)已成為未來(lái)的主流導(dǎo)向。

二、觀光地標(biāo)可視化設(shè)計(jì)的案例分析

通過(guò)分析國(guó)外優(yōu)秀的案例，將信息可視化運(yùn)用于界面設(shè)計(jì)。從色彩、圖形、板式、風(fēng)格等方面解析，從中汲取優(yōu)點(diǎn)。

從圖1案例地圖的色彩分析，被海環(huán)繞的島嶼顏色采用海水的藍(lán)綠色彩，而商業(yè)氣息的城市街道選擇的色彩為大地色。島嶼的整體顏色均為同色系，而城市街道的顏色帶有對(duì)比色。從圖形的設(shè)計(jì)方面看，島嶼的設(shè)計(jì)圖采用純手繪制作的矢量扁平圖，有整齊劃一的規(guī)則感。而城市則采用了類似剪紙的手法。簡(jiǎn)約的圖形讓用戶對(duì)地圖和景點(diǎn)的信息一目了然。手繪的可視化地圖并不完全需要精準(zhǔn)的定點(diǎn)定位，以及主要線路的勾勒。從色彩、圖形設(shè)計(jì)、版式和風(fēng)格方面，兩者風(fēng)格迥異。但兩者共同之處是繪制方式都采用了主色調(diào)統(tǒng)一，圖形簡(jiǎn)單易懂，能夠使不了解詳情的用戶快速地捕捉到信息，并對(duì)他們起到引導(dǎo)的作用。此類做法可以使得可視化地圖上的重要景點(diǎn)以及路線很清晰地表達(dá)，這也是十分值得借鑒的。

創(chuàng)作者結(jié)合以上路線圖給人帶來(lái)的感官體驗(yàn)，汲取經(jīng)驗(yàn)得到了創(chuàng)作上的構(gòu)想?；谏省D形設(shè)計(jì)、版式和風(fēng)格四個(gè)方面來(lái)進(jìn)行創(chuàng)作與創(chuàng)新：通過(guò)定位與特色來(lái)確定大色調(diào)，區(qū)域使用簡(jiǎn)約的矢量圖形可以帶給人們直觀的感官體驗(yàn)，能夠清晰地展現(xiàn)景點(diǎn)信息與路線。在此基礎(chǔ)上加入手繪的元素可以帶給用戶新的視覺(jué)體驗(yàn)，從原先的古板變得有趣、生動(dòng)。

三、松江有軌電車(chē)沿途文化地標(biāo)可視化App設(shè)計(jì)

（一）用戶調(diào)查和需求分析

在調(diào)研前期，通過(guò)定點(diǎn)訪談了解用戶的需要與訴求：

1.大部分游客參觀景點(diǎn)的目的是為了觀光以及打卡網(wǎng)紅地標(biāo)。

2.有軌電車(chē)的線路還沒(méi)有得到完全的開(kāi)發(fā)，所以，有一些文化地標(biāo)和旅游景點(diǎn)周?chē)慕煌ú皇翘貏e方便。

3.有一些想來(lái)了解和參觀人文景觀的游客無(wú)從下手，不知道應(yīng)該從哪里獲取更多關(guān)于這些景點(diǎn)的信息。

針對(duì)以上用戶的需求，明確想要去的目的地，提供有軌電車(chē)線路和每個(gè)景點(diǎn)的信息。想要打卡網(wǎng)紅地的游客可以通過(guò)地圖快速獲取信息，也為用戶提供一些人文景觀的歷史介紹，以便用戶進(jìn)行挑選。針對(duì)交通不便，為用戶設(shè)計(jì)和挑選出最便利的出行方式、路線以及詳細(xì)的換乘信息。同時(shí)，也提供了附近的就餐選擇，根據(jù)餐廳的性價(jià)比、類型以及距離景點(diǎn)的遠(yuǎn)近等進(jìn)行羅列，介紹這些餐廳的招牌菜。用戶可以通過(guò)點(diǎn)擊相應(yīng)的景點(diǎn)圖標(biāo)進(jìn)入，而扁平化圖標(biāo)在視覺(jué)體驗(yàn)上具有簡(jiǎn)單的形式美特點(diǎn)，去掉了煩瑣的裝飾效果。

（二）App的設(shè)定

1.功能設(shè)定

根據(jù)用戶的需求與分析，將App中的功能濃縮成“交通”“美食”以及“攻略”，并將這三種功能加入每一個(gè)景點(diǎn)中。

用戶可以通過(guò)點(diǎn)擊相應(yīng)的景點(diǎn)圖標(biāo)，進(jìn)入想要了解的地點(diǎn)查看詳細(xì)信息。當(dāng)用戶在首頁(yè)點(diǎn)擊相應(yīng)景點(diǎn)時(shí)，就到了該景點(diǎn)的頁(yè)面，該頁(yè)面主要是以扁平化圖標(biāo)的形式顯現(xiàn)，圖標(biāo)是界面設(shè)計(jì)的核心與靈魂，而扁平化圖標(biāo)在視覺(jué)體驗(yàn)上具有簡(jiǎn)單的形式美特點(diǎn)，去掉了煩瑣的裝飾效果。

一級(jí)頁(yè)面共有八個(gè)景點(diǎn)進(jìn)行點(diǎn)擊與進(jìn)入各自的二級(jí)頁(yè)面，二級(jí)頁(yè)面一共有四個(gè)圖標(biāo)，最上方是設(shè)計(jì)的該景點(diǎn)專屬的扁平化圖標(biāo)，下方三個(gè)圖標(biāo)分別是交通、美食及攻略，用戶可以直接通過(guò)從圖形菜單選取圖標(biāo)來(lái)進(jìn)行交互。用戶點(diǎn)擊二級(jí)界面中的“交通”，交通中包含六種常見(jiàn)出行方式，即有軌電車(chē)、地鐵、公交、駕車(chē)、步行、自行車(chē)。

點(diǎn)擊“美食”，則根據(jù)餐廳的性價(jià)比、類型以及距離景點(diǎn)的遠(yuǎn)近進(jìn)行羅列，包含人氣菜品的圖片與簡(jiǎn)介;點(diǎn)擊“攻略”，提供不同的選擇和詳細(xì)的游玩攻略，以及特色景點(diǎn)中的人氣景點(diǎn)和人文景點(diǎn)的圖片與介紹。

以上功能是充分了解和考慮到用戶的需求設(shè)定的，能夠讓想要“打卡”網(wǎng)紅地的游客迅速獲得信息;讓不熟悉景點(diǎn)的游客基本了解景點(diǎn)選擇去向;為有目的性的游客提供更人性化的選擇。這些都是想要讓用戶更好地欣賞松江的特色景點(diǎn)，以促進(jìn)松江的旅游業(yè)發(fā)展，推動(dòng)松江文化的發(fā)展與傳承。

2.風(fēng)格設(shè)定

制作前期，尋找景點(diǎn)定位與特色來(lái)確定整體色調(diào)，區(qū)域使用簡(jiǎn)約的矢量圖形帶給人們直觀的感官體驗(yàn)，清晰展現(xiàn)景點(diǎn)信息與路線。加入手繪的元素使其有趣生動(dòng)，帶給用戶新的視覺(jué)體驗(yàn)。

圖標(biāo)是地圖可視化系統(tǒng)中交互功能符號(hào)化的主要形式，圖標(biāo)設(shè)計(jì)也是地圖可視化系統(tǒng)符號(hào)設(shè)計(jì)的重要內(nèi)容，因此，將松江區(qū)有軌電車(chē)的線路與每站周邊的景點(diǎn)進(jìn)行了圖標(biāo)可視化設(shè)計(jì)。圖標(biāo)設(shè)計(jì)是實(shí)現(xiàn)用戶和地圖可視化系統(tǒng)交互的關(guān)鍵環(huán)節(jié)，App首頁(yè)以手繪地圖的方式呈現(xiàn)，依靠圖形化作為組織信息的主要方式。App主視覺(jué)圖的主色調(diào)為藍(lán)色與粉色，加入少許的黃色作為提亮與突出重點(diǎn)。八大景點(diǎn)的圖標(biāo)以黃色勾勒用于提醒與引導(dǎo)用戶，周?chē)尤刖€框的經(jīng)典特色，如瑪雅海灘水公園的矢量圖標(biāo)旁就是瑪雅的標(biāo)志建筑物的線框圖，并使用有透明度的線繪制路的大致走向。之所以使用類似鏤空的線框圖，是為了在豐富畫(huà)面的基礎(chǔ)上不混淆主次，使用戶的重點(diǎn)依舊落在景點(diǎn)的圖標(biāo)上。

App界面的主色調(diào)為藍(lán)色和白色，藍(lán)色給人一種美麗、冷靜、理智、安詳與廣闊的感覺(jué)，與景點(diǎn)帶來(lái)的感受相呼應(yīng)。此外由于藍(lán)色沉穩(wěn)的特性，具有理智、準(zhǔn)確的意象，大多出現(xiàn)在商業(yè)設(shè)計(jì)中，強(qiáng)調(diào)科技、效率的商品或企業(yè)形象，運(yùn)用于App中更能體現(xiàn)智慧城市的定位與特色，藍(lán)白交替，形成強(qiáng)烈的對(duì)比，可以清晰地展現(xiàn)路線圖的信息。

制作后期，使用了Axure RP以及XD軟件進(jìn)行匯總和制作簡(jiǎn)單，點(diǎn)擊交互實(shí)現(xiàn)松江有軌電車(chē)帶動(dòng)下的文化地標(biāo)可視化App。

四、總結(jié)與展望

上海松江區(qū)有軌電車(chē)線路與電車(chē)周邊景點(diǎn)可視化App是將松江文化底蘊(yùn)和文化地標(biāo)相結(jié)合的成果，借助技術(shù)的發(fā)展與政府的支持推廣松江的文化，能夠讓用戶更好地欣賞松江的特色景點(diǎn)，促進(jìn)松江的旅游業(yè)發(fā)展，推廣松江文化，使松江文化得以更好地發(fā)展與傳承。隨著5G的到來(lái)以及技術(shù)不斷革新，此類體驗(yàn)式交互App將擁有更多動(dòng)態(tài)信息元素，給用戶帶來(lái)更大的便利。

參考文獻(xiàn)：

[1]陳立揚(yáng).有軌電車(chē)如何促進(jìn)城市發(fā)展[J].中國(guó)投資（中英文），2020（Z3）：66-67.

[2]劉佳琪.基于App中個(gè)性化需求交互式信息可視化設(shè)計(jì)研究[J].西部皮革，2020，42（06）：77.

[3]張璐婷.手機(jī)App中數(shù)據(jù)可視化設(shè)計(jì)分析——以“不繁地理”為例[J].設(shè)計(jì)，2020，33（08）：108-110.

★基金項(xiàng)目：本文系“智慧城市松江有軌電車(chē)線路的可視化設(shè)計(jì)與App制作”大學(xué)生創(chuàng)新項(xiàng)目資助。

（作者簡(jiǎn)介：張琦，女，上海工程技術(shù)大學(xué)中韓多媒體設(shè)計(jì)學(xué)院，研究方向：數(shù)字媒體藝術(shù);儲(chǔ)蕾芳<通訊作者>，女，上海工程技術(shù)大學(xué)，講師，研究方向：數(shù)字媒體設(shè)計(jì)）

（責(zé)任編輯 劉月嬌）