購物應用程式

此購物應用程式概念書說明 Windows 8.1 的虛構購物應用程式。您可以檢閱本主題的案例以及查看如何在應用程式中利用 Microsoft 設計語言,獲得您自己的購物應用程式的設計靈感。

可用的範例程式碼:Tallan Inc. 根據此購物應用程式概念書建立了一個出色的範例應用程式。您可以下載他們的範例應用程式,了解此概念書中所描述的功能真實的實作情形及其他資訊。可以在這裡下載 Tallan 範例購物應用程式。

購物應用程式案例

本主題說明的購物應用程式使用 Microsoft 設計功能,為使用者建立具有吸引力的購物經驗。

動態磚和瀏覽搜尋和視窗大小調整分享
動態磚和瀏覽的影像搜尋的影像分享的影像

 

吸引使用者注意您的應用程式內容

您可以使用 Microsoft 設計語言建立有趣、簡單且內容豐富的輕鬆瀏覽經驗。您也可以使用動態磚吸引使用者注意您的應用程式。依照這個案例進行,了解如何讓您的購物應用程式能夠吸引使用者的注意。

動態磚和瀏覽的影像

Matt Berg 從公司返家時,在公車上使用他的 Windows 8.1 Tablet PC。

動態磚和瀏覽的影像

動態磚顯示「新款上市:」,通知 Matt 有最新的秋季時裝款式。Matt 對此相當有興趣,因此他按一下這個磚,進入應用程式。

動態磚和瀏覽的影像

Matt 需要一件新外套,因此他按一下「上衣」類別。

動態磚和瀏覽的影像

類別檢視以水平方式配置,所有選項的詳細檢視顯示於相同的畫面中。Matt 不必一層一層往下瀏覽就可以直接觀看內容。

動態磚和瀏覽的影像

Matt 捏合手指以啟用語意式縮放,這讓他可以快速檢視並瀏覽項目清單。

動態磚和瀏覽的影像

按一下「外套」區段之後,Matt 選了一件外套,在項目檢視中查看這件外套,然後將它加入購物車中。

動態磚和瀏覽的影像

Matt 購買這件外套以及之前已加入購物車的一件襯衫,完成了他這次的購物。

動態磚和瀏覽的影像

 

動態磚和瀏覽案例的摘要

在這個案例中,我們看到使用利用下列設計元素的例子:

  • 動態磚透過顯示與使用者相關資訊的方式來吸引使用者繼續使用您的應用程式。
  • 不需要任何控制項就可在應用程式中突顯您的內容,讓使用者沈浸在他們所關注的經驗上。

如需動態磚和語意式縮放的相關資訊,請參閱下列內容:

為協助您的應用程式選擇最佳的瀏覽模式,請參閱瀏覽模式

如需了解此功能的運作情形,請參閱應用程式功能,從開始到完成系列中的單層瀏覽模式

讓使用者持續使用

您可以使用 Microsoft 設計語言,當使用者準備採購時吸引他們的目光,方法包含新增搜尋方塊、實作搜尋協定、讓使用者可執行多工處理,以及設計調整為窄格式寬度時能順暢運作的應用程式。

動態磚和瀏覽的影像

Jon Rodman 正使用他的 Windows 8.1 Tablet PC 瀏覽有關流行時尚的部落格。

動態磚和瀏覽的影像

透過 Internet Explorer 或任何其他應用程式,Jon 可以利用右邊的搜尋常用鍵,搜尋類似款式的外套。

動態磚和瀏覽的影像

動態磚和瀏覽的影像

Jon 選取「整套服飾」應用程式,顯示「外套」這個詞彙的搜尋結果。

動態磚和瀏覽的影像

Jon 根據價格,使用篩選器來縮小搜尋結果。接著,選取了一個項目。

動態磚和瀏覽的影像

Jon 調整應用程式大小到靠左的位置,以便將該項目與部落格中的外套做比較。對於所選項目感到滿意之後,Jon 將外套加入購物車中。

動態磚和瀏覽的影像

雖然仍在窄格式寬度下,Jon 決定完成購買。

動態磚和瀏覽的影像

 

讓使用者持續使用的摘要

在這個案例中,我們看到使用利用下列設計元素的例子:

  • 當您的客戶想進行購物時,搜尋協定將您的應用程式放入潛在的目標清單中。
  • 在窄格式寬度下順暢運作的應用程式可讓客戶瀏覽並比較您的內容與其他應用程式和網站的內容。

如需搜尋和視窗大小的相關資訊,請參閱下列內容:

使用分享來聯繫

您可以使用 Microsoft 設計語言讓使用者與任何其他應用程式、連絡人或社交網路聯繫。

動態磚和瀏覽的影像

David Hamilton 剛購買一件新外套。下訂單之後,應用程式建議他分享這則消息。

動態磚和瀏覽的影像

David 使用分享協定與朋友分享這個促銷代碼。

動態磚和瀏覽的影像

 

使用分享與使用者聯繫的摘要

在這個案例中,我們看到使用利用下列設計元素的例子:

  • 您可以將內容放到分享來源,Windows 8.1 會讓您與其他應用程式、電子郵件和社交網路聯繫。
  • 您可以將應用程式放到分享目標,接收內容、連結或任何其他類型的結構化資料。

如需分享的相關資訊,請參閱下列內容:

認識 Windows 市集應用程式
Windows 市集應用程式的 UX 指導方針
範例購物應用程式
動態磚範例
動態磚指導方針
語意式縮放範例 (C#/VB/C++)
語意式縮放範例 (JavaScript)
語意式縮放指導方針
搜尋範例
搜尋指導方針
視窗大小指導方針
窄格式配置指導方針
分享來源範例
分享目標範例
分享指導方針

 

 

顯示:
© 2015 Microsoft