跳至內容

設計

韓國商品詳情頁為何這麼長

韓國詳情頁長,原因不在偏好,而在版面的分配。通路畫好商品名、價格、評價,賣家能填的只有內文圖片這一整塊。長度與張數、放入的順序、把文字做進圖片的問題、手機寬度、要重做的部分,一併整理。

韓國商品詳情頁為何這麼長

韓國的商品詳情頁之所以長,原因不在偏好,而在版面的分配。進駐的通路已經畫好了商品名、價格、選項、評價這些區域,賣家能自己填的地方只有內文圖片這一整塊。品牌想說的話全部擠進這一塊,頁面就變長了。把本國的詳情頁原樣搬過來,問題不只是顯得短——那張頁面上沒有的項目會整塊缺失。

到底有多長 — 長度與圖片張數

內文是縱向拼接起來的一整塊圖片。在手機上滑動10~30次是常見的分量,做成檔案則切成10~30張上傳。一張切在縱向1,000~1,500px上下,理由有兩個 — 一張越長檔案越重、顯示越慢;日後只改一行時,也要把那一張整個重做。

把縱向高度加起來,6,000~15,000px之間很常見。不過長度本身不是目標。要確認的事項多的品類會變長,看一眼就能判斷的品類很快結束。

位置放什麼圖片張數
首屏一張產品圖和一行摘要1~2張
摘要選擇的理由 3~5條2~4張
使用場景使用的樣子與大小感3~6張
詳情材質、成分、功能說明3~8張
實測尺寸、容量、顏色表1~3張
標示項目各品類的強制標示1~2張
須知配送、換貨、退貨1~2張

什麼內容按什麼順序放進去

決定順序的標準只有一個 — 不打開別的畫面,判斷要在這一頁裡結束。所以配送、換貨、退貨、認證這些在別的國家放在獨立頁面的項目,都進到內文裡。前段放選擇的理由,中段放要核對的事實,後段放下單前會卡住的事。

前3張之內要說清楚這是什麼產品、適合誰。越往後越是已經心動的人下來核對的區間,會改變判斷的資訊放在後面,就會沒被讀到。

每個品類必須標示的資訊項目由政府公告訂定 — 稱為商品資訊提供公告。不需要到處找清單。通路的商品登錄畫面會把這些項目直接列成空欄,把欄位填上即可。選哪個品類,欄位就跟著變,所以登錄之前先定分類。

為什麼把文字做進圖片裡

通路對內文可用的字體和排版限制得很窄。要讓換行位置、字重、顏色都落在想要的地方,做成圖片更快。再加上螢幕窄、表格難以用文字排布,把句子壓在圖片上就成了預設做法。畫面能做成想要的樣子,但是有代價。

韓文一個字填滿一個方格。寬度窄的時候,行在哪裡換會大幅影響閱讀速度,而用文字排版時那個換行位置會隨裝置和字體移動。做成圖片,在任何裝置上都在同一處換行 — 正是這份確定性讓人選擇圖片。

圖片裡的文字會在哪裡卡住

卡住的地方什麼時候顯現現在先做的事
翻譯增加一種語言時把句子另存到文件裡
搜尋只有文字欄被讀取時商品名、摘要、選項名放關鍵詞
閱讀放大或用語音聽時alt文字與文字摘要並列
修改價格、構成改一行時保留圖層還在的原始檔

翻譯卡得最厲害。句子在圖裡,自動翻譯過不去,每多一種語言,有20張就要重排20張。搜尋的機器人也不會把圖片裡的文字當內文讀 — 商品名、摘要、選項名這些以文字填入的欄位,幾乎就是搜尋能看到的全部。對用語音聽頁面的人來說,圖片這一段整塊是空的。

手機上看到的寬度是多少

手機的橫向寬度大體在360~430px之間 — 這是瀏覽器計算螢幕的單位。內文圖片的原始檔多做成橫向860~1,000px,這個原圖會整塊縮小以配合螢幕寬度。1,000px的原圖在390px的螢幕上約為39%。也就是說,原圖裡定為40px的文字,在手機上看起來只有16px左右。

按電腦螢幕做出來的詳情頁原樣搬過來,最先垮掉的是文字,原因就在這裡。內文文字在原圖裡定36~40px以上,小註解也定28px以上。寬度數值各通路不同,上傳前先看一次該通路的說明。

哪些能原樣搬、哪些要重做

項目原樣搬重做
產品照片原圖照原樣使用—
顏色與標誌規定照原樣使用—
壓在圖片上的句子—連排版一起重來
字體數字與西文保留另定一套韓文字體
構成順序—按一頁為準重排
尺寸標註數值照舊加一張cm實測表
強制標示—按品類欄位重填

西文字體裡沒有韓文字元。做韓文版時,選一套字重層次相近的韓文字體,數字和西文仍用原來的字體,整體印象就不會差太遠。照片多數不必重拍,但如果沒有一張能看出拿在手上有多大的圖,就補這一張。

今天要做的事

把現在在賣的詳情頁用手機打開,數一數有多少張圖片裡帶著文字。接著確認這些圖片的原始檔是否還保留著可編輯的圖層。30分鐘就能做完。這兩個數字,就是做韓文版時要重排的分量本身。

← 返回列表

繼續閱讀

先一起釐清您需要的是什麼。

24小時內取得報價
KakaoTalk 諮詢SIXONE 客服 KakaoTalk 頻道(開新視窗)