簡單易用的真實互動體驗。
如果使用者可以利用相機搜尋您的網站,他們不是很棒嗎?想像一下,您的網站是 Razor McShaveyface。客戶表示在重新訂購時,無法找到適合的刮刀墨水匣。他們還不知道 你的產品搜尋適合的關鍵字老實說,他們可能永遠不會
如果他們不再需要這項功能,該怎麼辦?如果他們能將手機相機對準包裹上的通用產品代碼,您的網站就能顯示合適的墨水匣和紅色大的「重新訂購」按鈕,該怎麼辦?
請想想還能在網站上使用攝影機的其他方式,假設某個網站支援店內價格查驗功能想像一下 博物館的展品或歷史標記想像一下,在遊戲中辨識真實世界的地標,例如地理快取或尋寶遊戲。
Web Perception 工具包能實現這些以相機為基礎的使用情境。在某些情況下,您甚至不需要編寫程式碼就能打造體驗。
運作方式
開放原始碼 Web Perception 工具包可讓您在網站中加入視覺化搜尋功能。這項工具會透過一組偵測工具傳遞裝置相機串流,這些偵測工具會將實際物件 (此稱為「目標」) 對應至您網站的內容。系統會使用網站上的結構化資料 (JSON-LD) 定義這項對應。有了這些資料,您就可以在可自訂的 UI 中顯示正確資訊。
以下將說明這項功能的運作方式。如需完整說明,請參閱入門指南、工具包參考資料、I/O 沙箱示範和示範範例。
結構化資料
工具組無法只在相機鏡頭的視角中找到任何目標。必須提供已連結的 JSON 資料,以便識別目標。這項資料也包含這些目標的相關資訊,使用者會看到這些內容。
這些資料只需要足以打造使用者體驗,如下圖所示。如果您未採取任何行動,Web Perception 工具包可以識別目標,然後根據資料中提供的資訊顯示及隱藏資訊卡。請使用我們的 Artifact-map 示範自行嘗試。
使用 <script>
標記和 "application/ld+json"
MIME 類型在網站中,以 JSON 連結的資料檔案將資料新增至您的網站。
<script type="application/ld+json" src="//path/to/your/sitemap.jsonld">
檔案本身看起來會像這樣:
[
{
"@context": "https://schema.googleapis.com/",
"@type": "ARArtifact",
"arTarget": {
"@type": "Barcode",
"text": "012345678912"
},
"arContent": {
"@type": "WebPage",
"url": "http://localhost:8080/demo/artifact-map/products/product1.html",
"name": "Product 1",
"description": "This is a product with a barcode",
"image": "http://localhost:8080/demo/artifact-map/products/product1.png"
}
}
]
使用者體驗
如果想體驗超過預設的使用者體驗,該怎麼辦?工具包提供生命週期事件、Card 和 Button 物件,可用於製作這些事件的相關使用者體驗,以及輕鬆設定資訊卡樣式。我接下來會少用以「開始使用」指南為基礎的程式碼,來說明這一點。
最重要的生命週期事件是 PerceivedResults
,每次找到目標時就會觸發。目標可以是實際物件或標記,例如條碼或 QR code。
回應此事件的程序和處理任何其他事件一樣,但也有例外。如果您未實作該事件,系統會自動使用結構化資料建立使用者介面。如要覆寫此行為,請呼叫 event.preventDefault()
來啟動事件處理常式。
const container = document.querySelector('.container');
async function onPerceivedResults(event) {
// preventDefault() to stop default result Card from showing.
event.preventDefault();
// Process the event.
}
window.addEventListener(PerceptionToolkit.Events.PerceivedResults, onPerceivedResults);
我們可以進一步查看活動。事件本身包含一組找到與遺失的標記和目標陣列。當在世界中找到目標時,甚至會觸發並傳遞在 event.found
中找到的物件。同樣地,當目標從相機檢視畫面傳遞時,事件會再次觸發,在 event.lost
中傳遞遺失的物件。這有助於影響手部和標記移動:攝影機未保持穩定、放置標記等情形。
async function onPerceivedResults(event) {
// preventDefault() to stop default result Card from showing
event.preventDefault();
if (container.childNodes.length > 0) { return; }
const { found, lost } = event.detail;
// Deal with lost and found objects.
}
接著,要根據工具包找到的資訊卡顯示合適的資訊卡。
async function onPerceivedResults(event) {
event.preventDefault();
if (container.childNodes.length > 0) { return; }
const { found, lost } = event.detail;
if (found.length === 0 && lost.length === 0) {
// Object not found.
// Show a card with an offer to show the catalog.
} else if (found.length > 0) {
// Object found.
// Show a card with a reorder button.
}
}
新增卡片和按鈕只是將卡片和按鈕執行個體化,並將其附加至父項物件即可。例如:
const { Card } = PerceptionToolkit.Elements;
const card = new Card();
card.src = 'Your message here.'
container.appendChild(card)'
最後,看起來會像這樣。請注意,我為使用者體驗增添了便利性無論找到標記與否,我都讓使用者一鍵存取我認為最實用的功能。
async function onPerceivedResults(event) {
// preventDefault() to stop default result Card from showing
event.preventDefault();
if (container.childNodes.length > 0) { return; }
const { found, lost } = event.detail;
const { ActionButton, Card } = PerceptionToolkit.Elements;
if (found.length === 0 && lost.length === 0) {
//Make a view catalog button.
const button = new ActionButton();
button.label = 'View catalog';
button.addEventListener('click', () => {
card.close();
//Run code to launch a catalog.
});
//Make a card for the button.
const card = new Card();
card.src = 'We wish we could help, but that\'s not our razor. Would you like to see our catalog?';
card.appendChild(button);
//Tell the toolkit it does not keep the card around
// if it finds something it recognizes.
card.dataset.notRecognized = true;
container.appendChild(card);
} else if (found.length > 0) {
//Make a reorder button.
const button = new ActionButton();
button.label = 'Reorder';
botton.addEventListener('click', () => {
card.close();
//Run code to reorder.
})
const card = new Card();
card.src = found[0].content;
card.appendChild(button);
container.appendChild(card);
}
}
正在格式化卡片
Web Perception 工具包內建了具有預設樣式表的資訊卡和按鈕格式。不過,你可以輕鬆自行新增。提供的 Card
和 ActionButton
物件包含 style
屬性 (還有許多其他屬性),可讓您為機構加上組織戳記。如要加入預設樣式表,請在網頁中加入 <link>
元素。
<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">
結語
如上方所述,並不是所有關於 Web Perception Toolkit 的資訊。希望這部影片能讓您瞭解為網站新增視覺化搜尋功能有多麼簡單。詳情請參閱入門指南和示範範例。請參閱工具包說明文件,瞭解這項工具的功能。