有關前端技術的那些UX事 - 口罩地圖篇(GIS)

Andy Chang
Feb 20 · 8 min read
https://jiaantw.github.io/mask/
https://jiaantw.github.io/mask/
https://jiaantw.github.io/mask/

前言

我不是UI/UX設計師,我是一個可能之後會走網頁全端的軟體工程師,然後對做出「好產品」這件事有很大的熱誠。

身旁一些對UI/UX有興趣的朋友常常跟我聊一件事:

「UI/UX設計師到底需不需要會寫一點程式?」

這個問題,我在每個招募職缺的訊息都看到不同的答案。最常看到的是說會一點會加分、有助於和工程師溝通,也看過說完全不care,有次還有看過有人說「怎麼能把UX交給完全不懂code的人」這種超極端的回答。

就我的經驗而言,很多直觀上認為簡單的東西,技術上不見得辦得到。很常聽說設計師和工程師為了溝通這些事情花費相當多的時間跟精神成本。所以我比較prefer跟會一點前端知識的設計師合作。

然而學程式這件事是需要興趣跟動力的,我認識的設計師就因為不想學程式卻又對UI/UX有興趣而苦惱XD。這也是我想寫這系列的原因:

「我想試著讓沒有學過程式的人也能知道,在遇到 UX問題時,什麼是前端技術上可行的解決方案。」

所以這系列還是會穿插一些技術名詞,不過我只會稍微帶過,並且盡量以白話的方式解釋它們是幹嘛用的。

但我畢竟不是設計背景,只是對UX有一點興趣然後想聊聊自己的想法。如果系列中有寫到什麼不太對、能更好的地方,歡迎告訴我。


正文開始

最近有了一些小空檔,看到很多人都在寫口罩地圖就決定來跟風,加上前端社群提供的原始資料新增了「註記」,可以讓民眾回報藥局是否採號碼牌制。所以就把目前其他大神寫的地圖加入自己對於UX的一些想法改版一下。

截自kiang提供的Github json檔
截自kiang提供的Github json檔

背景技術情境

這次我是使用Leaflet提供的地圖來繪製。開發過程還算簡單,大約一兩天之後就做好87%的架構。然而第一次上線的時候卻發現了一個問題:

乾 我的地圖怎麼會這麼卡???

在開發像口罩地圖的這類GIS系統時,我們常常會在地圖中建立多個「標記點」(EX:藥局)。而當使用者對地圖做出移動、縮放......等會改變視窗內容的動作時,無論「標記點」目前是否在可視範圍中,地圖都會更新所有我們嵌入在上面的「標記點」相對於目前視窗上的資料(相對視角中心的位置、標記圖大小......等)。

在Leaflet,標記點是marker物件。
var nowPoint = L.circleMarker(
[position.coords.latitude, position.coords.longitude],
{
radius: 20,
fillColor: '#212529',
color: '#212529',
opacity: 1,
fillOpacity: 0.8
}
)

這件事在標記點不多的時候不會怎樣。但當今天標記點很多時 (EX: 口罩販賣藥局有6000多個),這個「更新」的動作會對瀏覽器造成很大的負擔,大量資源被占用。最明顯的影響是我們的網頁會開始卡( 畫面的更新偵數下降,俗稱掉偵 ),給人當機的感覺。

沒有人喜歡這種狀況。所以,我們勢必得搭配前端技術,捨去一部份的標記點。


我想要討論的問題

要如何選擇「要捨去的點」,才能有最好的UX呢?


其他人選擇的方案(一) - 熱點

這次在開發前我有參考chengkai505 所開發的口罩地圖 ,他的開發筆記中有提到,Leaflet有支援將「多個標記點」組合成「一個大標記點」的技術插件( Leaflet.markercluster ),我查了一下google map好像也有支援。

實際運作起來大概是這樣

以上圖為例,雖然實際我們嵌入了兩個點,但是當比例尺較小時(畫面範圍較大),實際繪製到地圖上的只會一個大標記點,而這個大標記點將會組合這兩個點的資訊。當畫面涵蓋範圍越大,單一大標記點所包含的小標記點就會越多。就不會出現畫面上整個台灣都被標記點塞滿的情形。

第一次看到這個方法的時候覺得很酷XD,如果是製作像疫情分析那種GIS應該會很好用(?)另外共享機車平台GoShare就是選用這個方式


其他人選擇的方案(二) - 最短距離

這個是好想工作室Howard製作的口罩地圖所採取的方案,他會篩選出離你最近的10/30/50家藥局,並且只在地圖中顯示這些點。

這樣有個缺點: 最近的10/30/50家藥局不一定會在可視範圍中。雖然可以透過設計「按下即前往該藥局」的UI來解決這個問題,但我自己覺得使用上直覺性就沒有那麼高。不過好想工作室是使用部分收費的Google map api,作為最先製作的開發者,剛開始還因為流量暴增收到爆表帳單,上了新聞XD。自己沒用過Google map api,不知道這件事跟他們所採取的這個方案有沒有關係就是了。


那麼講了這麼多,我選擇的是哪種方案呢?


我選擇的方案(一) - 限定範圍

前面在講我覺得「最近藥局不一定會在可視範圍」這件事不太直覺,所以反過來說,我們只顯示存在於可視範圍的藥局就好啦!

也就是雖然使用者看起來所有的點都有被嵌入,但實際上只要這些點離開可視範圍,就會用Javascript去動態移除這些點。相對的,當還沒加入地圖的藥局進入到可視範圍,這些藥局就會被動態加入地圖。

但是這個做法有兩個缺點:

  1. 使用的地圖必須要能夠提供「可視的範圍」資料。
  2. 每次都要跑一遍所有的原始資料,檢查是否在可視範圍。

關於第一個缺點,當地圖不支援時,可以透過在視角中心畫一個圓,檢查各點是否在這個圓的半徑範圍來解決。像共享機車平台wemo、iRent,都是使用這個方案。

而第二個缺點可以透過將原始資料以經緯度排序後,建立Hash資料結構來解決。不過在我製作的地圖中,leaflet有提供對應api,藥局數量也還沒有多到產生明顯delay,所以我沒有特別處理。


我選擇的方案(二) — 限定縮放大小

然而只採用前者,當使用的範圍是「可視範圍」時,仍然會有一個問題 : 當可視範圍過大時,地圖仍然會載入過多的標記點。

這個時候我開始思考一件事: 我的使用者會需要在超大範圍下檢視資料嗎?

如果會,那麼我採取熱點做法會比較好。如果不會,那我在超大範圍下根本就不需要顯示任何東西。

以口罩地圖而言,我認為我的目標使用者只會想知道「附近哪一家藥局有口罩」。舉例來說,就算我人在台南,看到高雄的口罩比台南多,我並不會因為這樣而特別跑去高雄,而是只要能在台南找到兩副口罩就好

所以最後我讓地圖比例尺小於等級13時,把所有的標記點都移除。

另外前面所提的wemo也是有採取這個方案,iRent則沒有。

wemo超過一定範圍即不顯示機車標記

結語

這是最後我做完的口罩地圖

以上是我在這次製作過程中的一些想法,因為自己是front-end developer的背景,所以主要是針對「捨去點」這件事在前端技術上的可行方案來討論。其他UI/UX的設計方面就沒有多提,但有什麼想法或建議都歡迎跟我聊聊~。

後記

不知道為什麼這幾天Medium一直狂推這篇,但其實我自己更喜歡下面這篇:

用不同角度(UI、前端、後端)來看那些UX事 — 選課系統篇

雖然專業度可能比不上其他人,但我更希望能讓同樣打造一件產品的不同人們能更了解彼此的想法。

如果你是剛進入UI/UX的設計師,我也希望你能看看這篇:

有關前端技術的那些UX事 — 讀取圖示篇

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store