外銷英文關鍵字研究的桌面情境示意圖

行動網站設計的內容取捨:桌機版該搬多少上手機

Posted by:

|

On:

|

接到行動版網站需求時,很多人的第一個反應是「把桌機版縮小就好」,但實際做過的人都知道,問題從來不是畫面縮小這麼簡單。桌機版網站往往經過多年累積,首頁塞了輪播、多層選單、側邊欄推薦區塊、長長的介紹文案,這些內容全部原封不動搬到手機上,讀者要滑好幾十下才能看到重點;但如果反過來大砍特砍,只留下標題和一顆按鈕,又可能讓原本有需求的讀者找不到答案,甚至影響到頁面在搜尋引擎眼中的完整度。行動網站設計真正困難的地方,不是排版技巧,而是內容的取捨:哪些要留、哪些要摺、哪些乾脆不要出現在手機版。這篇文章不談按鈕大小,也不談圖片壓縮或載入速度,單純聚焦在內容層這件事。

行動網站設計不是版面問題,是內容取捨問題

很多業主在討論行動網站設計時,話題很快就會轉到「字要多大」「按鈕要多寬」這類視覺細節,但這些其實是設計師比較擅長處理的部分。真正需要業主投入判斷的,是內容本身:這一頁到底想讓手機上的讀者看到什麼、做什麼。如果沒有先想清楚這一點,設計師拿到的需求就只會是「把桌機版內容都放進去」,結果做出來的行動版只是桌機版的縮小翻版,滑動距離拉得很長,重點被淹沒在一堆次要資訊裡。

比較務實的做法,是先把桌機版內容拆成幾個層級:第一層是讀者進來這一頁最想知道的核心資訊,第二層是有助於決策但不是非看不可的補充說明,第三層則是次要的延伸內容,例如相關文章連結、品牌沿革這類東西。行動版設計的第一步,應該是先確認這三層內容,而不是急著決定字級或間距。

這也是為什麼有經驗的網站服務團隊,在討論行動網站設計時,會先跟業主一起盤點頁面內容,而不是直接跳到視覺稿。內容順序想清楚了,後面的排版反而會變得直覺很多。

桌機版內容要不要整包搬上手機

答案通常是不用,但也不是全部砍掉。比較實際的做法是分類處理:對決策有直接幫助的內容,例如服務項目、價格區間、聯絡方式、地址與營業時間,這類內容在手機上應該一樣完整呈現,不能因為版面小就省略;但屬於「錦上添花」的內容,例如很長的品牌故事、多段落的技術原理說明、大量的圖文並茂案例展示,就可以考慮精簡,或是用摺疊的方式收起來,讓有興趣的讀者自己點開。

另一個常被忽略的重點,是桌機版內容裡常有「因為版面夠寬才加的東西」,例如並排比較表、多欄式的特色說明、側邊欄裡的次要連結區塊。這些內容在桌機版看起來理所當然,但搬到手機上往往變成又長又難讀的一長串資訊,這時候該問的不是「怎麼排」,而是「這段內容真的需要出現在手機版嗎」。

簡單說,行動版內容的取捨原則應該是:對決策有幫助的留,單純填版面用的可以考慮拿掉或摺疊,而不是不分青紅皂白地全部保留或全部刪除。

什麼內容該摺疊、什麼該直接砍掉

摺疊(也就是常見的手風琴收合區塊)適合用在「有些讀者需要、但不是每個人都需要」的內容,例如常見問題、詳細規格、退換貨條款這類資訊。這類內容留著對搜尋引擎的完整度有幫助,但預設收合,不會拖累頁面的閱讀節奏,讀者需要的時候自己點開就好。

但摺疊不是萬用解法。如果一頁裡摺疊的區塊太多,讀者反而會不知道該點哪一個,甚至懶得點,整頁內容形同虛設。摺疊比較適合放在頁面中段到後段的補充資訊,不建議把第一屏的核心資訊也摺起來,那等於是把讀者最需要的答案藏起來。

至於該直接砍掉的內容,通常是那些「寫給內部用、不是寫給讀者看」的東西,例如重複多次強調同一件事的行銷詞句、放在桌機版純粹是因為版面留白需要填滿的圖文區塊、或是已經過時但沒人記得刪的活動訊息。這類內容在桌機版可能還看得過去,但在手機這種寸土寸金的畫面上,只會拉長讀者找到答案的距離。

手機版與桌機版內容不一致,在行動優先索引下會出什麼問題

現在搜尋引擎主要是以行動版內容作為判斷頁面品質與排名的依據,這通常被稱為行動優先索引。這代表一件事:如果手機版為了畫面精簡,把桌機版才有的重要文字、標題階層或內部連結都拿掉了,搜尋引擎實際看到、拿去評估的內容,會是那個被刪減過的版本,而不是桌機版那份比較完整的內容。

換句話說,行動網站設計如果只顧著讓畫面好看,把大量文字內容用「反正手機版看不到沒關係」的心態直接刪除,很可能反而讓這一頁在搜尋結果的表現變差,因為系統評估的依據本身就變薄弱了。這也是為什麼前面提到摺疊而不是刪除:摺疊起來的內容通常還在頁面的原始碼裡,對搜尋引擎來說內容依然存在,只是預設不展開;但直接刪除,內容就真的消失了。

實務上建議的做法,是讓手機版與桌機版盡量共用同一份核心內容與標題結構,差別只在呈現方式(摺疊、分頁、精簡文案),而不是內容本身的多寡。這樣才能兼顧手機使用者的閱讀體驗,也不會犧牲頁面在搜尋引擎眼中的完整性。

表格與長文在手機上怎麼處理

表格是行動版設計裡最容易出問題的內容型態。桌機版習慣用表格呈現多欄比較,例如方案比較、規格對照,但這種多欄表格搬到手機窄畫面上,常常會擠壓變形,或是逼得讀者要左右捲動才能看完一行,體驗很差。比較好的處理方式,是把表格內容重新設計成卡片式的呈現,一個方案或一個項目一張卡片,把原本橫向的欄位改成直向條列,雖然占的垂直空間變多,但讀起來會順很多。

如果表格欄位真的很多、無法拆成卡片,退而求其次的做法是只保留最關鍵的幾欄放在手機版,其餘欄位收在摺疊區塊或另外做成頁面內的說明段落,讓讀者至少能先掌握重點,再決定要不要看細節。

長文的處理邏輯類似:與其把一整篇文章毫無段落地丟到手機螢幕上,不如善用小標題把內容切成幾個段落,配合條列式重點,讓讀者可以用掃視的方式先抓住重點,再決定要不要細讀某一段。這對閱讀體驗的幫助,往往比單純調整字級行高更明顯。

手機版該不該有自己的一套文案

很多人以為行動版只是把桌機版的文案原封不動搬過去就好,但實際上,手機閱讀情境跟桌機很不一樣:讀者可能是站在店門口、通勤路上,或是隨手滑到,注意力比較短。這代表手機版的文案,句子可以更短、重點可以更早出現,不需要照搬桌機版那種比較從容、鋪陳較長的寫法。

比較實際的做法,不是重寫兩套完全不同的文案(這樣維護成本太高,也容易讓兩個版本的訊息不一致),而是讓核心句子保持一致,但在手機版適度精簡開頭的鋪陳,把結論或行動呼籲往前移。例如桌機版可以先講一段品牌理念再帶到服務項目,手機版則可以把服務項目提前,理念留在後段給有興趣深入了解的讀者。

要注意的是,如果手機版文案跟桌機版差異太大,等於是兩份不同的內容,前面提到的「行動優先索引」問題就會出現:搜尋引擎看到的會是手機版那份比較精簡的文字,如果精簡過頭,關鍵字與完整說明反而不見了,長期來看對頁面表現不利。所以文案的取捨,還是要回到「核心訊息不變,呈現節奏調整」這個原則。

常見問題

行動版是不是內容越少越好?
不是。內容多寡不是重點,對讀者有沒有幫助才是重點。刪掉的應該是填版面、重複、過時的內容,而不是為了「看起來簡潔」而犧牲讀者真正需要的資訊。

摺疊起來的內容,搜尋引擎看得到嗎?
摺疊通常只是視覺上預設收合,內容本身還在頁面原始碼裡,搜尋引擎依然能讀取。這也是摺疊比直接刪除更保守、更安全的做法。

手機版跟桌機版文案可以差很多嗎?
不建議差太多。核心訊息與關鍵字最好保持一致,差異放在鋪陳的長短與段落順序,而不是整段替換掉不同的說法,避免兩個版本各自表述,讓讀者和搜尋引擎都感到混亂。

做行動網站設計時,內容取捨該誰來決定?
比較理想的方式是業主與設計團隊一起討論,業主最清楚哪些內容對生意來說是關鍵,設計團隊則了解手機版的呈現限制與行動優先索引的實務考量,兩邊一起盤點會比單方面決定更準確。

如果你正在規劃或重新檢視公司的行動版網站,卻不確定桌機版內容哪些該留、哪些該砍,與其自己反覆猜測,不如找專業團隊一起盤點。創昇SEO提供免費的網站健檢,也有全台免費到府解說的服務,可以實際看過你現有的網站內容後,再一起討論行動網站設計上的取捨方向,不會一開始就要你決定所有細節。

Posted by

in