談到網站要「支援哪些裝置」,多數人直覺想到的還是手機跟電腦兩種螢幕,但實際上使用者接觸網站的裝置遠比這兩種豐富:平板、智慧電視、車用面板、智慧手錶等穿戴裝置,都有可能是網站內容被瀏覽到的場景。多螢網站設計談的不是某一種技術規格,而是一個更根本的問題:當螢幕種類這麼多元,該怎麼盤點需要涵蓋的裝置範圍,並且規劃測試方式,確保網站在不同裝置上呈現的品牌形象與資訊架構維持一致。這篇文章會從「裝置盤點」跟「測試涵蓋範圍」這兩個角度切入,幫助還在規劃階段的讀者建立清楚的思考架構。
多螢時代,網站面對的不只是手機跟電腦
過去談網站設計,主要考慮的是桌機螢幕跟手機螢幕兩種情境,這也是多數討論「響應式設計」時預設的範圍。但實際上使用者接觸網路內容的裝置越來越多元:平板電腦、智慧電視、車用資訊娛樂系統的螢幕、智慧手錶等穿戴裝置,甚至是店面的數位看板,都可能成為使用者看到網站內容的入口。這些裝置的螢幕尺寸、解析度、操作方式(觸控、遙控器、語音、手勢)都各不相同,如果規劃網站時只想著「手機好看、電腦好看就好」,很容易忽略掉這些邊緣但仍然真實存在的使用情境。
平板裝置:介於手機與桌機之間的模糊地帶
平板裝置的螢幕尺寸介於手機跟桌機之間,使用情境也比較特殊:有些人習慣把平板當作大一號的手機使用,有些人則是把平板橫放、當作簡化版的電腦來瀏覽網站。這種「模糊地帶」的特性,代表平板使用者看到的畫面,有可能是被套用了手機版的簡化版型,也有可能被套用了桌機版的完整版型,兩種情況都可能出現閱讀體驗不理想的狀況,例如手機版型放大到平板螢幕上顯得留白過多、按鈕過大;或是桌機版型縮小到平板螢幕上,文字跟連結變得太小不好點擊。規劃網站時,平板是很容易被忽略、但其實使用人數並不少的一個裝置類別。
智慧電視與大螢幕:客廳裡的瀏覽情境
越來越多智慧電視內建瀏覽器功能,使用者可能會透過電視的大螢幕查詢資訊、瀏覽網頁內容,操作方式通常是用遙控器上下左右移動游標,而不是滑鼠或觸控。這種情境對網站設計提出了完全不同的要求:文字跟按鈕需要在遠距離觀看下仍然清楚可辨識,操作邏輯也需要考慮到「用方向鍵移動」而不是「用滑鼠精準點擊」的情境。雖然多數一般商業網站不會特別針對智慧電視去優化,但如果目標受眾涵蓋比較高比例會在客廳情境瀏覽內容的族群(例如生活風格、影音內容相關的網站),這個裝置類別就值得納入測試範圍。
穿戴裝置與其他新興螢幕
智慧手錶這類穿戴裝置的螢幕非常小,能呈現的資訊量有限,通常不會是完整瀏覽網站內容的主要入口,但仍然可能出現使用者透過手錶接收通知、快速查看片段資訊後,再轉往手機或電腦完整瀏覽的情境。除此之外,車用面板、店面數位看板等螢幕,也都屬於廣義的「多螢」範疇。這些裝置的共同特色是:呈現空間有限、操作方式特殊,網站設計不太可能針對每一種裝置都做到完美適配,但至少要清楚知道,目標受眾有沒有可能透過這些管道接觸到網站內容,如果有,內容的可讀性跟核心資訊有沒有辦法在極端有限的空間裡被理解,是規劃階段就該想清楚的問題。
如何規劃跨裝置的測試涵蓋範圍
與其想著要把每一種裝置都測過一輪,比較務實的做法是先盤點「目標受眾實際可能使用的裝置類型」,依照使用比例排出優先順序,再決定測試資源要怎麼分配。常見的做法是先鎖定幾個主要類別:手機(不同螢幕尺寸與作業系統)、桌機(不同瀏覽器)、平板(直放與橫放兩種情境),這三類通常是多數網站的核心測試範圍;如果目標受眾涵蓋特殊情境(例如上述提到的智慧電視或穿戴裝置),再額外納入對應的測試項目。測試涵蓋範圍不是越廣越好,而是要跟實際的使用族群分布相對應,把資源花在真正會被使用到的裝置上。
呈現一致性:品牌識別與資訊架構如何維持一貫
多螢設計除了考慮「能不能正常顯示」之外,另一個重點是「呈現是不是一致」。這裡指的一致性不是每個裝置上畫面要長得一模一樣(這在技術上也不太可能),而是核心的品牌識別元素(例如標誌、主要色彩、字體風格)與資訊架構(使用者能不能在每個裝置上都找到同樣重要的核心資訊)要維持一貫。如果使用者在手機上很容易找到聯絡方式,但在平板上同一個資訊卻被藏得很深,或是不同裝置上呈現的品牌色彩明顯不一致,都會讓使用者對品牌的專業度產生疑慮,即使每個裝置各自看起來都沒有明顯的技術錯誤。
裝置版圖會持續變動,涵蓋範圍也需要定期重新檢視
裝置種類不是一次盤點完就永遠固定,新的螢幕形式(例如新一代穿戴裝置、車用系統的更新、新型態的公共顯示設備)會持續出現,使用者的裝置使用習慣也會隨著時間改變。多螢網站設計比較務實的做法,是把「裝置盤點」當成一件需要定期回頭檢視的工作,而不是網站上線前做一次就結束。例如每隔一段時間重新查看訪客的裝置類型分布,確認原本設定的測試範圍是不是還符合實際情況,有沒有出現原本沒考慮到、但佔比已經逐漸提高的新裝置類型,再決定要不要調整測試涵蓋範圍與資源分配。
常見問題
中小企業有必要特別針對智慧電視或穿戴裝置做測試嗎?
不一定,要看目標受眾的實際使用習慣。多數一般商業網站的核心測試範圍還是手機、桌機、平板,如果沒有明確跡象顯示目標受眾會透過電視或穿戴裝置接觸網站,不需要特別投入資源在這些裝置上,但至少要確認內容在這些裝置上開啟不會完全無法閱讀。
平板裝置應該套用手機版還是桌機版的設計?
兩種都不是理想答案,比較好的做法是針對平板的螢幕尺寸範圍另外檢視版面呈現,確認文字大小、按鈕間距、圖片排列在平板橫放與直放兩種情境下都合理,而不是直接套用手機版或桌機版了事。
要怎麼知道自己的目標受眾實際都用什麼裝置瀏覽網站?
可以透過網站分析工具查看訪客的裝置類型分布,這是規劃測試優先順序時很實際的參考依據,比憑感覺猜測目標受眾的裝置使用習慣來得可靠。
多螢設計是不是就等於響應式設計?
兩者有關聯但不完全相同。響應式設計是一種技術做法,讓版面依螢幕寬度自動調整;多螢設計談的則是更前端的規劃問題,也就是要先盤點清楚有哪些裝置類型需要被涵蓋、測試範圍該怎麼安排,這個盤點結果之後才會影響到響應式設計要考慮的斷點跟版型該怎麼規劃。
如果不確定自己的網站目前在各種裝置上的呈現狀況如何,創昇SEO提供免費網站健診,可以協助檢視網站在不同裝置上的顯示狀態與資訊架構是否一致;也提供全台免費到府諮詢,方便當面討論網站在各種螢幕情境下該優先照顧哪些使用族群,歡迎預約時間聊聊。
