跳至内容
cutty.dev
All posts

如何製作帶有公司標誌的 QR Code —— 以及掃描是否安全

中間帶有標誌的 QR Code 看起來非常專業且能建立信任感。我們將展示如何製作、標誌可以佔用多大面積以確保仍可掃描,以及如何在不將檔案上傳到第三方伺服器的情況下完成製作。

我會告訴你,這是我在為客戶製作這些代碼多年後的看法。黑白方塊是有效的。掃描效果非常完美。只是它看起來跟你鄰居的代碼、競爭對手的代碼,以及某人丟進你信箱的傳單上的代碼一模一樣。毫無特色。

現在把 Logo 放在中間。這樣人們在拿起手機之前,就能一眼看出這是誰的代碼。而且他們會更願意掃描,因為看到了熟悉的品牌。讀取率上的差異可能會非常大。

在這個階段總是會出現一個問題:「這不會弄壞我的掃描嗎?」 不會。只要你不是隨便亂來的話。

為什麼 Logo 不會把整個帶有 Logo 的 QR Code 炸飛

這裡有一點小小的魔法,值得你去理解。每個 QR Code 都內建了錯誤修正機制。這是一種冗餘的數據負載,讓讀取器即使在代碼的一部分被弄髒、皺褶或被遮擋時,仍能還原出完整的內容。

在最高層級(以字母「H」表示)中,程式碼可以覆蓋約 30% 的面積。中間的 Logo 通常會佔用 20–25%。因此,你有足夠的空間,甚至還有餘裕。

我始終堅持的兩件事:

  1. Logo 置於正中央。絕不要放在角落。角落裡的這三個粗方塊是位置標記,讀取器透過它們來辨識上方與下方。只要遮住其中一個,代碼就會失效。
  2. 為 logo 添加白色邊框。四周留出細微的邊距。這能將你的圖形與代碼的「像素」分開,並在閱讀時提供實質幫助,特別是當 logo 形狀不規則或有鋸齒時。

逐步操作指南

cutty.dev 中,你在縮短連結的同時就能完成這件事,因為每個連結都會自動附帶 QR Code。我們開始吧:

  1. 縮短連結,或直接使用您已在控制面板中的連結。
  2. 在編輯頁面中進入「QR Code」區塊。
  3. 上傳您的 Logo(PNG、SVG、JPG 等皆可)。它會置中顯示,且錯誤修正率會自動提升至更高層級。您無需進行任何額外點擊。
  4. 根據品牌需求選擇 QR Code 與背景的顏色。
  5. 下載。PNG 用於螢幕與社群媒體,SVG 用於列印(可無限放大而不失真,因此製作橫幅或捲軸廣告時請務必使用 SVG)。

預覽會即時更新。在任何內容儲存到磁碟之前,您就能看到效果。

注意:顏色可能會影響你的狀態

這就是人們最容易出錯的時刻,所以請仔細聆聽。

掃描器不辨顏色。它辨識的是對比度。你可以塗上顏色,沒問題,但請遵守這個原則:深色代碼放在淺色背景上。不要反過來。雖然在你的旗艦手機上,深色背景配淺色代碼可以掃描成功,但之後使用舊款 Android 的客戶就會站在那裡咒罵,因為什麼都掃不到。

不要讓代碼的顏色與背景顏色靠得太近。黑底配深藍色?別想了。對比度越高,代碼在更遠的距離就能被更清晰地辨識(這對於商店網站或站牌海報來說非常重要)。

一個沒人會告訴你的真相:你的 Logo 最後去了哪裡

大多數帶有標誌的代碼生成器會要求你將文件上傳到他們的伺服器。這裡請先停下來思考一下。你的品牌標誌,有時是唯一的完整向量版本,就這樣落入了第三方供應商的手中。而且服務條款中可能規定了繼續使用該文件的權利。有人讀過這些條款嗎?沒錯。

在我們這裡,程式碼是在您的瀏覽器中生成的。Logo 不會從您的電腦移動,不會被傳送到任何地方,也不會被儲存。檔案仍屬於您。

一次列印,隨心導向

最後,一個能讓你日後在重新列印時省下不少錢的建議。

使用縮短後的連結來製作代碼,而不是使用原始的長網址。為什麼?因為基於短連結的代碼之後可以從內部進行替換。你只需在後台更改連結的目標,原本印製好的代碼就會突然導向其他地方。促銷活動結束了?你可以直接重新導向到新頁面,而無需更動傳單。

直接嵌入長地址的代碼是固定的。更改目標 = 新代碼 = 新印刷 = 來自印刷廠的新帳單。在您訂購一千張名片之前,請三思。