遠通電收
uTagGO 網頁設計
Year
2020
Sector
資訊與科技
Service
商業策略
體驗創新
Background
以創新互動，打造一頁式產品體驗，精準傳達品牌價值
隨著行動裝置普及與用戶操作習慣的改變，越來越多服務型產品選擇以 App 作為主要互動介面。遠通電收（FETC）推出的 uTagGO App，整合了高速公路通行費查詢、停車費繳納、行車紀錄等多元功能，為車主提供一站式的智慧用路解決方案。為了提升 App 的能見度與下載轉換率，品牌方希望建置一個具有吸引力的產品網頁，快速傳達服務價值，並鼓勵用戶主動下載。
本次合作，遊石設計團隊協助規劃設計 uTagGO 的 RWD 一頁式網站，除了對應不同裝置的瀏覽需求外，更致力於在有限篇幅中，以創意互動與故事化敘事方式呈現 App 特色。透過視覺節奏安排與動態效果的運用，引導用戶理解核心功能，並強化品牌印象，最終達成提升下載率與使用率的目標。
Strategy
聚焦裝置情境與內容節奏，精準設計讓產品價值一目了然
為了解決用戶在資訊理解、操作體驗與品牌認知上的多重痛點，團隊在專案初期即針對目標族群的瀏覽行為與內容期待進行分析，並回應企業提升 App 下載與使用轉換率的核心訴求。透過聚焦在「裝置適配、內容節奏與互動溝通」三大面向，我們擬定出一套兼顧品牌一致性與用戶體驗的一頁式網站設計策略，藉此在有限篇幅中，傳遞出清楚、有感的產品價值。
目標族群、訴求要明確。
要從用戶的角度去思考，當他們使用不同裝置瀏覽網頁時的地點、目的不同時，在設計上，也能夠配合不同裝置，並呈現重點功能，並在有限的頁面中，提供目標族群們想看的內容與有效的資訊。
創造視覺吸睛的體驗與互動。
在網頁上重點內容加入一些動畫特效，與故事性的敘述，場景轉場、連貫性的動畫效果，讓網站的瀏覽體驗更加有趣及精彩，也能讓使用者留在網頁上，降低用戶的跳出率。
考量不同螢幕尺寸上的適配體驗。
在瀏覽網頁時，要能夠對應不同裝置尺寸與解析度，在畫面能自動調整成適合的排版呈現，讓使用者獲得良好的瀏覽體驗。
Execution
提供用戶所需的產品特色，呈現清楚理解服務內容，吸引使用者下載並使用 APP
在 uTagGO RWD 網站的設計策略上，我們依循七大使用體驗設計原則，作為規劃與執行的核心依據。
1. 網站目標族群、訴求要明確
在進入設計之前，需思考用戶的痛點以及他們最想看到的的內容有哪些？將使用者需求與一頁式網站的特性一併考量，其在網頁操作上，使用行為較單純，當用戶點擊選單分頁時，不會被轉址，網頁會直接往上或往下切換到該分頁，所有內容在一頁就會完整呈現。因此，網站不同區塊所提供的訊息，必定要能滿足使用者所需，否則會讓用戶覺得這是一個無法提供有效資訊的網站。
2. 貫徹品牌策略、維持品牌的一致性
不同的產業，在網頁設計的使用與呈現也就不相同，其取決於網頁的目的、功能和品牌調性，而網頁設計同時也會影響到整體品牌與後續行銷時的呈現，所以在網頁設計上保持品牌的一致則非常重要。而這次的設計是以介紹APP產品特色為主的網站，所以網站使用的顏色、插畫的風格以及文案敘述的口氣，都要能夠與APP一致，來維持企業品牌的整體調性。
3. 故事性敘述，從情境中引導用戶快速理解產品特色
在一頁式網站中，加入動態故事敘述的呈現方式來引導使用者瀏覽，並運用連續的動畫、場景變換等效果，引導使用者更好理解與閱讀完整產品特色，另外也增加使用者在瀏覽網頁的體驗上，更加豐富精彩！
4. 豐富的動畫特效，增加互動體驗，抓取用戶目光與注意力
加入一些滾動視差、滑鼠懸停效果、載入條、開機畫面等效果，都會讓網站充滿了更多的互動體驗。且在一頁式網站使用可互動的動態元素對是很重要的，放動畫效果、影片都是可以吸引用戶停留的方法，能將使用者留在網頁上，降低跳出率。
5. 透過選單加強導覽功能，提升瀏覽效率
當瀏覽一頁式網頁時，很容易發生從最後一個區塊回到最頂端，要花費一點時間，將滾輪不停向上滾動，才能回到頂端的狀況，因此，讓選單主題或是內容分類清楚好查找外，透過加強導覽功能，運用像是懸浮的主選單，或是網頁側邊的電梯等功能，提供用戶點擊，同時也能知道自己目前停留的內容其所屬的相對位置，幫助用戶減少捲動畫面的次數，避免使用上不耐煩的情緒發生。此外，在「回到首頁」的引導操作上也很重要，必須要讓用戶能清楚且容易的去點選。
6. 設計時需考量不同裝置螢幕大小的適配體驗
網站設計時要能依據電腦、手機、平板等不同裝置的大小與操作行為，調整成適合的排版呈現。除了文字、按鈕、卡片尺寸的大小調整外，動畫物件與場景的位置配置也會有所不同，例如上方選單列在手機及其他行動裝置觀看瀏覽時，會變為漢堡選單按鈕展開式，而網頁的內容也會改轉換為適合閱讀的排版。
7. 強化手機原生的功能
比起電腦，手機更方便繫帶於外出移動時使用，因此，越來越多的用戶是透過手機裝置來瀏覽網站。在設計手機使用介面時，除了將資訊重新排版在合適的畫面尺寸外，也應該將產品特色，透過介面設計強化優勢，在隨處可瀏覽的手機裝置埋入商機。例如：
手機和平板有打電話撥號的功能，介面按鈕可一鍵撥號，或是一鍵開啟地圖，透過類似的手機原生服務功能，可以加快使用APP時問題處理的速度。
下載專區點擊後，直接連到 App 下載頁面，讓用戶直接下載並在手機上使用，提高下載與使用率。
必要時可網站安裝套件，讓網址可以即時分享到Facebook、Line或其他社群媒體，便利用戶為品牌或網站做口碑行銷。
Conclusion
針對專案目標，明確擬定一頁式網站設計策略，提升使用者瀏覽網頁的體驗
在一頁式網站內，因為使用者介面操作精簡化了，網站的內容都在一頁裡，操作時行為比較簡單，網站只要往下滑就可以很直覺的觀看全部內容。對於資訊整合精準的網頁來說，節省了很多查找與搜尋的時間，也方便用戶分享網頁，網站的點擊率與瀏覽數也會比較高。此外，總結以下三點，做為網頁設計策略考量的重點：
