數位科技系列:再認識QR Code的原理與應用 - Medium

文章推薦指數: 80 %
投票人數:10人

下圖是個很有趣的「虛+實」應用,後來引起不少類似作品的仿效。

看下面兩張圖就能知道用法,先以手機掃描照片的QR碼,連結影片檔,把手機放在照片的嘴巴 ... 博物館科技流數位轉譯流Connoisseur流數位典藏轉譯數位科技閒情偶寄學生誌Facebook數位科技系列:再認識QRCode的原理與應用施登騰FollowDec24,2018·17minread本篇轉載自個人於【泛科學網站】刊載文:給QRCode來點「給我漂漂拳」:QRCode的原理是什麼?它有辦法更漂亮嗎?QRCode過時了嗎?其實好像還沒有,反而有更明顯的存在感。

這感覺可能部分是來自個人最近的經驗,其實QRCode的使用還是相當普及與頻繁的。

最近為民進黨客家部的「客家鄉味便當」宣傳活動製作一款AR擴增實境App後,客家部也要求攝製一部在發布記者會上播映與宣傳的短片(短片連結:https://youtu.be/ht8DHVEKNSQ。

而下載Android與iOS兩版App的QRCode連結,不僅在宣傳示範影片片尾上呈現,就連宣傳品與包裝盒上也都有。

客家鄉味便當盒包裝文宣。

圖片來源:https://youtu.be/ht8DHVEKNSQ兩版App的下載連結QRCode。

圖片來源:https://youtu.be/ht8DHVEKNSQ參加學校的會議時,拿著手機開啟讀碼軟體,掃描QRCode後登入出席報到頁面時,轉搭火車時,也能在桃園車站看到大幅的QRCode看板,密密麻麻地等著要把某人的手機連線某個鐵路局服務網站去。

似乎冥冥中被召喚著要再認識QRCode這玩意了。

QRCode的圖像存在就是一種數位連結的意象。

圖片自攝。

先談QRCode的視覺意象QRCode也被叫做「二維碼」,所以從這名稱來看,還有什麼視覺意象可以談的呢?確實,QRCode是種一直被我個人嫌棄的圖標,它呈現滿滿的人機對話的數位冷冽感,它的差異性是相當細微的,只有機器能辨識,而在眼裏看到的,卻是相仿的類似圖案。

所以即使知道它也能在文化歷史古蹟、博物館展區、美術館展覽提供通往深度/擴增數位資訊的鏈結,但就是覺得它的存在是種美感的破壞,特別是在古蹟、博物館、美術館等場域。

杭州電子科技大學學者提出的各式AestheticQRCode。

圖片來源:http://msn.iecs.fcu.edu.tw/~ccc/profile/publish/ij_paper/20161115_An%20Aesthetic%20QR%20Code%20Solution%20Based%20on%20Error%20Correction%20Mechanism.pdfQRCode該是沒有任何美學可言的吧?!抱著這樣的疑問去查找相關論文,乖乖,還真找到不少文章。

有些學者提出所謂的「AestheticQRCode(美學式QR碼)」(如下圖),只是說使用「AestheticQRCode」的英文原名或中文譯名,其實是找不到圖例的。

要用「VisualQRCode」或者是「視覺碼」就可以找到與圖片合併的QRCode。

有家製作「VisualQRCode」的新創公司~Visualead非常成功,甚至讓大陸的阿里巴巴花了150億美金把這家公司買下。

在大陸推出的VisualeadCode。

圖片來源:https://techcrunch.com/2017/12/01/alibaba-visualead-tel-aviv-rd-center/話說前面提到的論文說些什麼呢?其實,這些論文所提出的「AestheticQRCodeSolution(美學式QR碼解決方案)」主要是在不超過QRCode的「容錯能力」情況下,以「雙重圖像(BinaryImage)」或是「插入圖像(InputImage)」方式製作所謂的Aesthetic/VisualQRCode。

在技術術語來說,就是「Embeddingapicture」;而從整體圖像上來說,QRCode的基本形式還在,但加入了視覺化圖像的內容。

那「容錯能力」是什麼呢?這就必須從QRCode的結構說起了。

下面是在維基百科上使用的圖,用來說明QRCode的圖碼基本構成。

讓我們把重點放在灰色區塊的「資料與糾錯碼訊息」上,其中的「糾錯碼(ErrorCorrectionCodeword)」就是與「資料碼(DataCodeword)」共同組成資訊區,用於執行修正錯誤功能的字碼。

這「糾錯」一詞很「大陸用語」的,雖然個人是在很喜歡的演員~葛優所主演的「大腕」這部電影的逗趣劇情中學到「糾錯」這個詞的,但下面還是改用「容錯」去代表原文ErrorCorrection字意的「修正錯誤」。

這張圖常用來說明QRCode的圖像結構,本文的重點在於灰色部分,也就是「資料與糾錯碼訊息」。

圖片來源:https://zh.wikipedia.org/wiki/QR%E7%A2%BCQRCode在辨識上有設定所謂的「容錯功能」,以使在部分字碼破損或無法辨識時,仍可恢復數據去辨識QRCode所儲存的內容。

在執行「容錯功能」的優劣上,就會產生7%~30%的糾錯能力(英文為:ErrorCorrectionCapacity,有部分資料則翻譯為容錯能力)高低差異,且分為四種級別,分別代表不同高低的容錯能力(想進一步了解請點此):等級「L」:7%的字碼可被修正等級「M」:15%的字碼可被修正等級「Q」:25%的字碼可被修正等級「H」:30%的字碼可被修正因此,前面提到「這些論文所提出的『AestheticQRCodeSolution(美學式QR碼解決方案)』主要是在不超過QRCode的『容錯能力』情況下進行的」,指的就是,既然QRCode在判讀上有7%~30%的容錯率,為何不在可容許範圍內,加入「雙重圖像(BinaryImage)」或是「插入圖像(InputImage)」?所以,網路上就有些教學,介紹如何使用繪圖軟體自製「視覺碼」。

有興趣了解的人,可以看看這個分享的介紹:http://www.oxxostudio.tw/articles/201412/design-qrcode.html網路上以Photoshop製作視覺碼的示範。

圖片來源:http://www.oxxostudio.tw/articles/201412/design-qrcode.html但既然學者提出「AestheticQRCodeSolution(美學式QR碼解決方案)」,就肯定不是運用「工人」智慧還得小心地不超過容錯率的這種簡單作法。

在杭州電子科技大學與逢甲大學學者所提出的「AnaestheticQRcodesolutionbasedonerrorcorrectionmechanism」這篇期刊論文中提出特殊的運算技術去自動產生視覺碼(或學者所說的「美學式QR碼」),而且是透過「建構字碼編排(Constructcodewordlayout)」、「取得顯著圖(Obtainsaliencymap)」、「選擇最佳可變區(Selectbestchangeableregions)」、「提出分層替換規則(Proposehierarchyreplacementrules)」等4個步驟去運算生成的。

根據兩岸學者論文中提供的成果來看,成效確實是相當好的,特別是「選擇最佳可變區(Selectbestchangeableregions)」這個關鍵技術,使得所製作出來的「視覺碼」,甚至比坊間的商業技術都更為優越且清晰。

下圖是節錄自論文的圖片,最上排的「美學式QR碼解決方案」技術所完成的「美學式QR碼」、中間那排是使用其他類似研究學者的技術所完成的、最下面那排則是使用前面所提到,被阿里巴巴重金收購的Visualead技術所完成的。

其他兩個技術所完成的雙重圖像式視覺碼與「美學式QR碼」有不小的差距。

不同技術所完成之視覺碼範例。

圖片來源:http://msn.iecs.fcu.edu.tw/~ccc/profile/publish/ij_paper/20161115_An%20Aesthetic%20QR%20Code%20Solution%20Based%20on%20Error%20Correction%20Mechanism.pdf然而,這些視覺碼其實並沒有解決QR碼的視覺設計問題,因為其在圖像構成上,仍屬於複合圖像(雙重圖像,BinaryImage),也就是「QR碼+圖」,QR碼的形狀仍有絕對的存在。

所以,要談「QR碼的視覺意象」,仍必須從視覺設計的角度去看看是否已有解決方案,經過查找許多的網路資料,可以整理出設計師給的答案,就是下面幾張圖所代表的類型。

在圖片說明中,我會特別標示實際掃瞄測試的結果,畢竟有些視覺碼雖然很有設計感,卻在掃描使用上發生一些問題,甚至失去其基本功能。

這些也是視覺碼要兼具美感與功能必須背負的奮戰目標。

以下就舉例幾張QR碼的設計佳構作為「視覺意象」的介紹,但如果要看更多,可點選此網址。

以下這張圖可掃描連結微信qq,在設計上仍保留「定位標記」跟「校正圖塊」的必要形式,但資料與糾錯碼都十分具有圖像設計感了,可以看出與前面所介紹之視覺碼的差異。

可掃描連結微信qq,在設計上仍保留「定位標記」跟「識別圖塊」的必要形式,但資料與糾錯碼都十分具有設計感了。

圖片來源:https://www.pinterest.com/pin/272890058650717650/以下這張圖可掃描連結至微信App下載網址,同樣保留「定位標記」跟「校正圖塊」的必要形式,但「資料與糾錯碼區」是以海盜為圖像設計概念,與前圖一樣都有電腦繪圖的設計美感了。

圖片來源:https://www.pinterest.com/pin/492722015473383773/以下這張圖可掃描連結至微信qq,「定位標記」跟「校正圖塊」已成功隱入設計中,以蒙娜麗莎為主的設計概念更為完整,卻仍兼具QR碼功能。

https://chinachannel.co/creative-qr-code-designs/以下這張的原圖是個動畫gif檔,但我試過至少3款讀碼軟體仍然無法判讀,所以就單純從設計來看。

可看出這是個很有向量圖設計感的2.5D圖標,基本上保留QR碼原形,並且反向讓QR碼插入圖像中,而不是坊間普及的「QR碼+Logo」的插入圖片形式。

既然無法掃描執行QR碼功能,下圖其實就非屬QR碼。

我相信這絕非此動態圖的設計原旨,但既然要以QR碼去橋接數位服務與訊息,功能價值還是遠遠在設計價值上的,這也就是「FormFollowFunction」的功能性設計概念,畢竟QR碼的其中一個很重要的功能是「CalltoAction」,是連結啟動許多數位服務的關鍵元素,所以接下來就談談「再想想QR碼的實務用途」。

圖片來源:https://www.pinterest.com/pin/496521927658742144/再想QR碼的實務用途圖片來源:https://www.pinterest.com/pin/496521927652966011/此圖像所見的功能用途,應該算是QR碼的使用特例,圖中的QR碼海報也確實可以掃瞄連結到一家專營QR碼海報商品的「QRCanvas」公司網站。

但這不是「再想想QR碼的實務用途」這個部分要談論與介紹的。

就如前述,既然要談QR碼能連結啟動許多數位服務,具備「CallToAction(CTA)」的關鍵因素,就從使用情境與引導動機這方面去探討。

先從2012年威尼斯雙年展中,俄羅斯館的競賽作品~iCity談起。

該建築的內部在天花板、牆壁、地板都鑲滿QR碼,就像個裝置藝術展,只不是此作品是一個虛擬展品,入目所見的全是可透過行動裝置判讀的巨大QR碼,其所連結的是一座都市~「Skolkovo(斯科爾科沃)」的相關訊息,而這個號稱為「俄羅斯矽谷」的城市,承載的是一個國家的科技創新夢想。

而整個QR碼的展佈有「清楚」的原則,就是「簡單直接(Keepitsimpleandstraightforward)」,在展間的訪客都能一目瞭然這些QR碼的用途~那就是連結與提供數位資訊。

圖片來源:http://www.notcot.com/archives/2012/09/russian-ar-code-madness.php圖片來源:https://creators.vice.com/en_au/article/535evx/qr-codes-cover-every-inch-of-russias-pavilion-at-the-venice-architecture-biennale-2012從實務運用的角度來看,不虛掩地且直覺地使用QR碼,當然是最直接有效的,畢竟QR碼的功能用途就是「CallToAction(CTA)」,為了要去橋接後端的「數位服務」。

因此要讓「CTA」產生效果,就要有策略地,有步驟地去促成。

我將「CTA」目標分為「參與目標」與「執行目標」,且認為缺一不可。

分列如下:「使參與某事(Asksomeonetoparticipate)」:以QR碼提供「快速連結」去達成此「參與目標」。

「使執行某事(Getsomeonetodosomething)」:由QR碼橋接「數位服務」去達成此「執行目標」。

QR碼能提供資訊量真的不大(請見下圖截自維基百科的數據圖),所以常用的資訊是:「網路連結」、「電郵信箱」、「電話號碼」、「聯絡資料」、「行事曆活動」、「地點」、「Wi-Fi」等項,但一旦接續後面的數位服務,就能有更多的用途。

舉例來說:QR碼「網路連結」讓使用者可以「下載App」、「造訪網站首頁」、「在FB粉絲頁按讚」、「登錄為用戶」。

若以使用情境活來舉例,QR碼「網路連結」讓使用者可以「在賣場查詢產品履歷」、「在促販現場取得電子兌換卷」、「從名片即時連結公司網站」、「從平面設計連結影片播放」、「看著廣告傳單掃描上網訂購商品」、「掃描手機上的QR碼通過車站或機場閘門」等等。

圖片來源:https://zh.wikipedia.org/wiki/QR%E7%A2%BC所以,QR碼的功能,其實有著0與1的極端差異。

因為如果能誘使掃瞄連結啟用,QR碼就是具有強大數位能量的中介圖標,如果沒能掃瞄連結啟用,QR碼不過是具有簡潔二維圖像的平面圖標。

是否掃瞄連結?能否掃描連結?差很多。

而要能讓QR碼功能啟用,執行4個策略:要有「行動誘因」、「標示清晰」的設計,好讓QR碼提供快速連結去啟用並達成「CTA的參與目標」也要有「實質承諾」、「計畫策略」,好讓QR碼橋接數位服務去啟用並達成「CTA的執行目標」。

這些「行動誘因」、「標示清晰」、「實質承諾」、「計畫策略」的執行策略,是導入「HowtoCreatethePerfectCalltoAction」這篇部落格分享文中所提出的「4個概念」(該文則稱之為「完美CTA的4個成分」),並加以變化歸類的。

有興趣者可以點選閱讀,這邊就不再贅述。

由於「實質承諾」、「計畫策略」是牽涉QR碼所連結之後端數位服務,這顯然已非此分享要討論的,所以還是把焦點放「行動誘因」、「標示清晰」的設計上。

我先根據使用經驗與案例分析試著整理出工作要點如下,以後也會陸續在教學與產學案中在檢視修正:要以簡潔直接為原則Keepitsimpleandstraightforward要用設計引起動機Designedthemotivation要用引起動機的動詞標語Useastimulativeverbonthetag要讓CTA成分吸睛MakeCTAIngredientsstandout要展現具有吸引力的激勵誘因Showtheincentive要設計資訊圖像Designinfographicimages要重複與強調Repeatedandemphasized其實QR碼絕少個別存在,即使是印在紙上並以文字註明用途,也一定會貼附在我們空間中的建築、物品、產品、印刷品、衣服甚或人體上。

不論尺寸大小、不拘二維碼或視覺碼,在行動網絡世界中,一個個QR碼就是一個數位連結的承諾,以實體行動裝置去接通。

下面這張圖中看到的是一個校園的長椅,而上面的QR碼連結的,則是該校學生的藝術創作品分享。

所以,接下來談談QR碼的「虛+實」,作為這篇分享的總結。

圖片來源:http://hotblogtips.com/ten-creative-qr-codes-for-inspiration運用QR碼的「虛+實」下圖是個很有趣的「虛+實」應用,後來引起不少類似作品的仿效。

看下面兩張圖就能知道用法,先以手機掃描照片的QR碼,連結影片檔,把手機放在照片的嘴巴部分,然後播放影片後,就可以看到照片上的人在「說話」。

示範影片連結在此。

很喜歡類似這樣的簡易且直覺化的數位科技用法。

圖片截圖自:https://www.youtube.com/watch?v=Xs7tLBSENx4因相關研發需求,特別導入難易度不同的數位技術,去創意運用手機創造虛實整合的遊戲化應用。

關卡、獎勵、勳章、計分都是遊戲化應該用上的機制,但若要專注於內容設計,就要減少數位技術的干擾與負擔,此時能夠連通「虛+實」QR碼就很適合。

目前悠遊卡是使用「NFC近場通訊」技術,也很適合作為「虛+實」的應用,「NFC近場通訊」是個實體小裝置與QR字碼圖標不同,其使用方式也與QR碼有別,先了解一下。

:資料傳輸:可分享圖文、網址、通訊錄、電話號碼、樂曲、影片或相片等資料,並可作為支付、驗核、電子票證等類資訊的發送、接收、與確認。

使用方式:可進行非接觸式點對點資料傳輸,範圍是0~20公分。

此即NFC重要的近場高頻無線通訊技術基礎上的特殊數位資料傳送方式。

對接形式:NFC裝置與標籤的對接傳輸形式主要是以下圖所示之兩類,也就是「『NFC手機』+『NFCTag』」或「『NFC手機』與『NFC手機』」等。

曾在課程中規劃Scavengerhunt類的尋寶遊戲,就將引導學生/學員使用關卡、獎勵、勳章、計分機制去設計「校園尋寶(CampusScavengerhunt)」。

因此相當建議先使用這些低數位開發負擔的「QR碼」與「NFC標籤」讓課程掌握基本的且有趣的「虛+實」應用,再依據技術需求,次第導入更為複雜的、技術難度更高的數位科技應用。

數位轉譯職人誌三刀流以數位轉譯為文法,以展示科技做論述,以專業職人角度,從學術、技術、研究、研發入手,分享博物館科技的觀看之道,目前已將達到300篇專文左右。

13QrCodeMusetechMuseumsDigitalTechnology數位科技13 claps13數位轉譯職人誌三刀流以數位轉譯為文法,以展示科技做論述,以專業職人角度,從學術、技術、研究、研發入手,分享博物館科技的觀看之道。

此由施登騰教授主筆的專業分享專欄是以【數位轉譯系列】(學術、論述、實務)、【博物館科技系列】(論述與案例分析)、【Connoisseur系列】(GoogleArtsandCulture數位典藏策展與賞析實踐),兼以【數位科技系列】與【閒情偶寄系列】進行相關補充。

目前總篇數快達300篇左右。

Writtenby施登騰Follow一位大學教員,同步寫數位展示科技與中國文物鑑定。

長期研究與分享「Connoisseur系列」、「博物館科技系列」、「數位轉譯系列」、「數位科技系列」等領域之資訊與知識。

所發表之相關專文,目前總數為232篇,可見於:【數位轉譯職人誌三刀流】:https://medium.com/artech-interpreter數位轉譯職人誌三刀流以數位轉譯為文法,以展示科技做論述,以專業職人角度,從學術、技術、研究、研發入手,分享博物館科技的觀看之道。

此由施登騰教授主筆的專業分享專欄是以【數位轉譯系列】(學術、論述、實務)、【博物館科技系列】(論述與案例分析)、【Connoisseur系列】(GoogleArtsandCulture數位典藏策展與賞析實踐),兼以【數位科技系列】與【閒情偶寄系列】進行相關補充。

目前總篇數快達300篇左右。



請為這篇文章評分?