[其他類學習筆記]利用IOI QR Code產生器製作自己的QR Code

Lily Ho
4 min readMar 22, 2020

--

前言

去年在擔任20–20 Women Lead Podcast志工的時候,為了要在各種活動中簡單的和介紹我們Podcast專案,讓大家知道哪裡可以聽到我們的Podcast、找到我們的文章,我找了一個簡單好用的線上工具—IOI QR Code產生器(點我),來製作宣傳用的QR Code。

20–20 Women Lead Podcast宣傳使用的QR Code們

如何製作

上圖範例是我當時製作的QR Code們,在QR Code圖上搭配Logo圖表示掃描後的連結網址分別是什麼,避免混淆。這個工具除了可以將資料轉換成QR Code,針對QR Code進行容錯率設定,還可以加上Logo、變換QR Code顏色或是改用圖案代替等等。

他的網站長這樣:

IOI QR Code 產生器的網頁

他的網站在去年年初有做過改版,版面簡潔明瞭,我認為可操作的各項功能也寫得很明確。另外灰色方框的功能面板是可以自行拖曳、調整位置的。最上方的選項有:QR Code簡介、網頁的操作說明、版權說明、粉絲專頁和關於本站可以點選參考。操作說明按下後也會提供關於在這個網站上製作QR Code的簡易操作講解。正中間的QR Code則是使用目前設定產生的QR Code的樣子。

網頁左上方畫面

這個網頁工具很特別的是在最左邊"QR碼內容輸入"選項往下拉可以選擇這個二維碼儲存的資料類型,包括:網址、地圖座標、名片、行事曆、Wifi連線、簡訊電話和純文字,和其他QR Code產生器的工具相比,可以選擇的內容類型豐富很多。

網頁最右邊的設定

在右邊有兩個設定區塊,分別是”QR碼設定”以及”LOGO模式設定”。在”QR碼設定”欄位裡可以調整你最終輸出的QR碼要多大、長什麼樣子、什麼顏色、邊框多寬、邊角多圓等等。”QR碼顏色”選擇後會把QR碼變成你選定的顏色;還有在”QR碼填入圖檔”選項可以把圖片變成QR碼部分,讓你的QR碼變得更與眾不同。因為條碼是透過深色和淺色作為0和1來儲存資料,因此在設計QR碼樣式的時候QR碼的顏色和背景色也需要有足夠的顏色對比(最佳的顏色是黑白色),才能使掃碼及解碼成功。

密度及容錯率的設定詳細可以參考:維基百科-QR碼,在裡面提到儲存密度越高QR Code裡的模組數量越多,能儲存的資料容量也越大;容錯率則表示多少百分比的字碼可以被校正,以避免圖形破損後讀不到資料的狀況,不過容錯率越高也就需要更大的圖形面積,在維基百科裡建議一般狀況使用的容錯率是15%。

在"LOGO模式設定"裡可以選擇LOGO圖片在QR Code上的位置及大小,不過太大也是會影響到掃碼解碼的結果,所以輸出QR Code圖檔之前可以先在預覽圖上自己掃描試試看是否成功。

最後附上一個在IT邦幫忙上看到挺有趣的問答給大家:qr code是固定的嗎 ? 會因時間而失效嗎?。這邊討論到,因為QR Code是儲存內容的,內容固定沒有變動就都可以用,但提問者使用的會員app產生的QR Code內容會有條件的過期,並重新更新內容產生新的QR Code。因此只要你儲存的內容不會過期失效的話,基本上多久都還是可以使用同個QR Code來打開的。

結語

QR Code的製作過程其實不會很複雜,不過要設計出一個好的又與眾不同的QR Code牽涉許多細節。研究這些資料也挺好玩的,發現很多一維條碼變成二維條碼的設計巧思,例如圖案裡的回字設計等等,附上我查資料找到的其他參考連結給有興趣的人參考查閱。

其他參考資料

維基百科-二維條碼: https://zh.wikipedia.org/wiki/%E4%BA%8C%E7%B6%AD%E7%A2%BC
維基百科-條碼:
https://zh.wikipedia.org/wiki/%E6%9D%A1%E5%BD%A2%E7%A0%81
痞客邦-QRCODE知識:
https://dfishisme01.pixnet.net/blog/post/86704042

--

--

Lily Ho

分享學到的小知識或心得,努力變成週更(ง๑ •̀_•́)ง 如果你覺得我的文章有趣或有幫助的話,請別吝嗇給我幾個拍手吧👏