ux ui design works banner

uTagGO 網頁設計

遊石設計團隊協助遠通電收FETC,設計 uTagGO RWD 網頁,在一頁式網站設計中,運用有趣的互動敘事方式傳達uTagGO的APP特點,鼓勵用戶下載使用。


Challenge 挑戰:如何從有限的頁面篇幅中,簡潔有力介紹產品?

一頁式網站內容篇幅有限,過長過短都會影響到使用者閱讀與理解。因此,在頁面的架構與內容呈現時需有明確的設計策略,提供的內容最重要的是能夠滿足使用者所需,否則會讓用戶覺得這是一個無法提供可應用資訊的網站。



“ 類似服務與功能的競品APP那麼多!
要如何從中脫穎而出,用一頁式的網頁設計,吸引用戶下載APP?“



“Goal 目標:提供用戶所需的產品特色,呈現清楚理解服務內容,吸引使用者下載並使用 APP”

提供用戶在想看到的內容,相較其他競爭品突出的特點,提高APP下載率、使用率。

​一頁式的好處在於瀏覽方式單純、直覺,用戶可透過滑鼠或手指不斷往下滑動,就可以從頭到尾欣賞完整個網站的內容,同時運用了捲動的情境特性,加入了有趣的創意以及故事性的結構,讓觀者在瀏覽網站的同時,就如同在閱讀故事。


▴ eTagGo 一頁式網站設計 頁面使用過程呈現




uTagGO RWD網站設計:七大使用體驗設計執行規劃



1. 網站目標族群、訴求要明確

在進入設計之前,需思考用戶的痛點以及他們最想看到的的內容有哪些?將使用者需求與一頁式網站的特性一併考量,其在網頁操作上,使用行為較單純,當用戶點擊選單分頁時,不會被轉址,網頁會直接往上或往下切換到該分頁,所有內容在一頁就會完整呈現。因此,網站不同區塊所提供的訊息,必定要能滿足使用者所需,否則會讓用戶覺得這是一個無法提供有效資訊的網站。



2. 貫徹品牌策略、維持品牌的一致性

不同的產業,在網頁設計的使用與呈現也就不相同,其取決於網頁的目的、功能和品牌調性,而網頁設計同時也會影響到整體品牌與後續行銷時的呈現,所以在網頁設計上保持品牌的一致則非常重要。而這次的設計是以介紹APP產品特色為主的網站,所以網站使用的顏色、插畫的風格以及文案敘述的口氣,都要能夠與APP一致,來維持企業品牌的整體調性。


3. 故事性敘述,從情境中引導用戶快速理解產品特色

在一頁式網站中,加入動態故事敘述的呈現方式來引導使用者瀏覽,並運用連續的動畫、場景變換等效果,引導使用者更好理解與閱讀完整產品特色,另外也增加使用者在瀏覽網頁的體驗上,更加豐富精彩!


4. 豐富的動畫特效,增加互動體驗,抓取用戶目光與注意力

加入一些滾動視差、滑鼠懸停效果、載入條、開機畫面等效果,都會讓網站充滿了更多的互動體驗。且在一頁式網站使用可互動的動態元素對是很重要的,放動畫效果、影片都是可以吸引用戶停留的方法,能將使用者留在網頁上,降低跳出率。


5. 透過選單加強導覽功能,提升瀏覽效率

當瀏覽一頁式網頁時,很容易發生從最後一個區塊回到最頂端,要花費一點時間,將滾輪不停向上滾動,才能回到頂端的狀況,因此,讓選單主題或是內容分類清楚好查找外,透過加強導覽功能,運用像是懸浮的主選單,或是網頁側邊的電梯等功能,提供用戶點擊,同時也能知道自己目前停留的內容其所屬的相對位置,幫助用戶減少捲動畫面的次數,避免使用上不耐煩的情緒發生。此外,在「回到首頁」的引導操作上也很重要,必須要讓用戶能清楚且容易的去點選。


6. 設計時需考量不同裝置螢幕大小的適配體驗

網站設計時要能依據電腦、手機、平板等不同裝置的大小與操作行為,調整成適合的排版呈現。除了文字、按鈕、卡片尺寸的大小調整外,動畫物件與場景的位置配置也會有所不同,例如上方選單列在手機及其他行動裝置觀看瀏覽時,會變為漢堡選單按鈕展開式,而網頁的內容也會改轉換為適合閱讀的排版。

▴ eTagGo 網站大小適配體驗


7. 強化手機原生的功能

比起電腦,手機更方便繫帶於外出移動時使用,因此,越來越多的用戶是透過手機裝置來瀏覽網站。在設計手機使用介面時,除了將資訊重新排版在合適的畫面尺寸外,也應該將產品特色,透過介面設計強化優勢,在隨處可瀏覽的手機裝置埋入商機。例如:

● 手機和平板有打電話撥號的功能,介面按鈕可一鍵撥號,或是一鍵開啟地圖,透過類似的手機原生服務功能,可以加快使用APP時問題處理的速度。

● 下載專區點擊後,直接連到 App 下載頁面,讓用戶直接下載並在手機上使用,提高下載與使用率。

● 必要時可網站安裝套件,讓網址可以即時分享到Facebook、Line或其他社群媒體,便利用戶為品牌或網站做口碑行銷。




專案總結:針對專案目標,明確擬定一頁式網站設計策略,提升使用者瀏覽網頁的體驗

在一頁式網站內,因為使用者介面操作精簡化了,網站的內容都在一頁裡,操作時行為比較簡單,網站只要往下滑就可以很直覺的觀看全部內容。對於資訊整合精準的網頁來說,節省了很多查找與搜尋的時間,也方便用戶分享網頁,網站的點擊率與瀏覽數也會比較高。此外,總結以下三點,做為網頁設計策略考量的重點:

1. 目標族群、訴求要明確。

要從用戶的角度去思考,當他們使用不同裝置瀏覽網頁時的地點、目的不同時,在設計上,也能夠配合不同裝置,並呈現重點功能,並在有限的頁面中,提供目標族群們想看的內容與有效的資訊。但需注意一頁式網站的設計除了目標使用族群外,也會因產業、行銷策略與目的不同、呈現的重點內容也不盡相同,所以並沒有一定的設計公式和法則。

2. 創造視覺吸睛的體驗與互動。

在網頁上重點內容加入一些動畫特效,與故事性的敘述,場景轉場、連貫性的動畫效果,讓網站的瀏覽體驗更加有趣及精彩,也能讓使用者留在網頁上,降低用戶的跳出率。

3. 考量不同螢幕尺寸上的適配體驗。

在瀏覽網頁時,要能夠對應不同裝置尺寸與解析度,在畫面能自動調整成適合的排版呈現,讓使用者獲得良好的瀏覽體驗。

你可能有兴趣的案例

联系我们