賦予應用程式品牌

讓我們看看眾多創意可能性的一小部分，應用程式設計師和開發人員可以利用這些想法將品牌設計納入 Windows 市集應用程式。

為什麼要替應用程式賦予品牌？

品牌代表了企業最為人所知的特質。設計 Windows 市集應用程式的時候，您需要仔細進行每一項決策，確保您的應用程式納入了品牌的核心價值。同樣地，品牌也代表了一個企業，在 Windows 市集應用程式中顯示您的品牌，可以讓該應用程式與眾不同。我們來看一個範例。

這個範例是 Windows 市集應用程式尚未進行品牌設計之前的外觀：

Contoso Bakery 的範例顯示如果烘焙坊按照 Microsoft 設計原則之後，其應用程式可能的外觀。這個範例善於將內容放在前方與正中央，但不能十分有效地傳達烘焙坊的品牌。

 

這是同一個範例應用程式在進行品牌設計之後的外觀：

在這個版本的 Contoso Bakery 應用程式中，有些顯著的變更讓這個應用程式看起來更吸引人。隨著納入愈多烘焙坊的品牌，應用程式的內容也就愈具說服力，而且應用程式的整體感覺可以讓人聯想到烘焙坊的核心價值。

 

如何納入您的品牌

您可以透過一組視覺元素來展現品牌。例如，綜合獨特的調色盤、圖形、配置以及攝影手法等，可以在各種媒體建立重複且具識別效果的品牌，這些媒體包括：廣播、印刷品、網頁以及 Windows 市集應用程式。

想像這些視覺元素就是您透過程式碼來操作的一些零件，以便在您的 Windows 市集應用程式建立獨特的外觀和操作方式。

視覺元素	說明
色彩	色彩是表達品牌的重要特性。在您套用與品牌關聯的主要色彩時，就能告訴人們這個應用程式來自於您的企業。
圖形	透過在內容呈現中加入特色元素，使用圖形來強化品牌。不過，圖形太多會干擾到內容的流暢度，而且看起來純粹只是裝飾或是會讓人分散注意力。
影像	圖例與照片也應該反映出您的品牌。在公司的其他通訊方法或網站重複使用相同的影像與樣式。
格線	Windows 市集應用程式格線系統可協助整合應用程式呈現的視覺元素。格線會將品牌應用程式的 UI 對齊，以便搭配 Windows 的其他元素。
配置	所有頁面的視覺元素排列方式必須與品牌相關。您也應該盡可能讓頁面與內容類型維持一致。
標誌	使用您的標誌協助人們快速識別您的應用程式，並認出您的品牌。
印刷格式	字樣是 Windows 市集應用程式的關鍵部分。正確選擇字樣對品牌的影響力，就像色彩、標誌或配置一樣重要，因此請深思熟慮您要使用的印刷樣式。

 

範例企業營運應用程式

不論是從零售觀點還是企業觀點，建立您企業營運 (LOB) 應用程式的品牌都相當重要。 這個範例示範如何將品牌融入快遞服務公司的零售和企業應用程式中。

公司品牌的元素

Fabrikam Worldwide Logistics 在全球提供三種快遞服務層級。 目標客戶是想要輕鬆建立和管理出貨的小型企業擁有者。 值得信賴的全球運送和交易零阻力是給客戶的核心訊息。

品牌元素	說明
	主要品牌使用圖像元素 (例如地圖和帶狀線) 傳達值得信賴的全球服務理念。
	由主要品牌衍生，每個服務標誌傳達了三種服務層級。
	包裹上的品牌元素 (例如虛線和地圖) 重複使用於應用程式設計中，以建立整體的品牌故事。

 

建立出貨

小型企業客戶登入帳戶來更新出貨。

色彩、圖形和標誌皆延用在標頭和頁面上做為品牌元素。

 

在帳戶頁面上，色彩、圖形 (帶狀線和虛線) 以及字樣傳達了主要品牌。將客戶的身分識別放入標頭中，以展示聯合品牌。

客戶聯合品牌的靈感來自於主要品牌的字樣，標題使用 Constantia 的 serif 字型，而整個應用程式的其他地方則使用 Corbelf 的 sans-serif 字型。

 

交易頁面使用單層瀏覽模式。使用者可以移動瀏覽每個區段來檢視和修改資訊。

使用者可以從交易頁面快速進入語意式縮放檢視，查看所有交易歷程記錄以及摘要資訊。

所有品牌元素 (例如色彩、圖形、服務標誌和字樣) 都很一致，以傳達企業的核心價值。

 

使用者使用瀏覽列來瀏覽其他類別。

出貨

快遞員使用應用程式將貨物遞送給客戶。使用兩欄式設計，左邊顯示清單，右邊顯示內容，快遞員可以輕鬆瀏覽出貨的詳細資訊。 各種品牌元素 (例如帶狀線和常見控制項) 在整個應用程式中都是一致的。

快遞員抵達後，右欄會以垂直捲軸清單顯示詳細資料。清單和詳細內容都朝相同方向捲動。

用來協助快遞員找到貨車貨物的資訊圖形使用與應用程式其他部分相同的品牌色彩。

 

快遞員要求客戶簽名時，應用程式會以直向檢視顯示簽名頁面並顯示有品牌的瀏覽列。使用直向檢視可讓快遞員更輕鬆地將裝置交給客戶。

要求簽名是推廣品牌的重要時機。使用者可與企業應用程式和品牌互動。

 

快遞員取得簽名後，應用程式會顯示剩餘項目和進度圖形。

應用程式聯合品牌

二或多個品牌之間的關係稱為聯合品牌。當您設計需要容納多個品牌的應用程式時，請注意下列問題：

• 主要傳達哪個品牌？
• 支援品牌在傳達中扮演何種角色？

無法成功解決這些問題的 Windows 市集應用程式會有讓客戶混淆和削弱品牌印象的風險。

Fabrikam 範例透過實作一致的視覺元素，強化品牌形象來解決聯合品牌的問題。例如，整個應用程式都使用 Fabrikam 品牌色彩、圖形、配置和字樣，並遵守有限的樣式變化。應用程式的每個頁面都清楚傳達應用程式是由 Fabrikam 所提供。

為了傳達 Coho Craftsman 品牌是主要品牌的次要品牌，將 Coho Craftsman 標誌、字樣和影像插入到 Fabrikam 配置中。例如，您可以想像如何將 Fabrikam 的其他小型企業合作夥伴放入 Coho Craftsman 目前佔用的區域中。

這個範例也有其他品牌。頁面左側的信用卡公司是層級較低的品牌，因為尺寸小、內容位置特定且有色彩限制。頁面右側的服飾產品製造商品牌以尺寸縮小的單色標誌顯示，並且符合主要品牌的設計樣式。在所有案例中，為了可讓支援品牌保持清晰，且不會超越主要品牌，視覺元素都以進行適當的修改。

可以讓人聯想到獨特品牌的範例

這裡的一些範例是要告訴您，每個視覺元素可以協助激發出不同的情緒和感覺。 每個視覺元素的說明都提供特定的詳細資訊，讓您了解建立配置的方式以及為何它如此重要。

Contoso Downtown Café

Contoso Downtown Café 品牌的特色是原創性。這個品牌強調手工精心製作的主菜以及私房特調飲料。在這個範例中，色彩、格線、配置以及印刷格式是用來強調品牌的主要視覺元素。

 

	色彩  暖色系的深灰色、帶點灰的白色以及紅銅色讓這個設計令人印象深刻。溫暖的調色盤可以讓人聯想到一些自製美食的色彩，像是麵包的外皮、湯品或糕點。
	格線  在這個範例中的內容蓄意「打破」格線的配置。菜單內容對這個品牌而言很重要，所以上邊界縮減可以提供更多空間給菜單。左邊界已經調整，公司名稱、簡介文字以及位置資訊感覺會更接近中央，讓內容可以有更多空間可以呈現。這個應用程式的所有其他頁面，也都一致套用並實行這些所有變化。
	配置  這樣的設計是要讓人感覺的確像是菜單，因為菜單是讓顧客再次光臨這家 Café 的重要原因。例如它的三明治和其他菜單項目，顯現的配置看起來像是手工製作的感覺。泛黃的背景色彩是模擬紙張的效果，基調是溫暖的，而且內容使用垂直分隔符號規則和文字強制靠左對齊而井然有序。
	印刷格式  在這個設計中主要使用 Copperplate Gothic 粗體的字樣，賦予公司的名稱獨特的外觀和感覺，就像是手工雕刻的木質招牌一樣。其他伴隨的字樣使用的是 Script MT Bold 和 Segoe UI。菜單的標題非常節制地使用手寫字型，可營造手寫的風格。Segoe UI 是用在內文，可以提高菜單選擇的可讀性。

 

Contoso French Bakery 品牌

Contoso French Bakery 品牌是以讓人沈醉於其中的甜點著稱。他們的很多客戶都把這裡當成是滿足甜食和口腹之慾的場所。 在這個範例中，色彩、影像和配置是用來強調品牌的視覺元素。

 

	色彩  只要棕色和粉紅色這兩個色彩的調色盤，就可以讓顧客認定這是一家烘焙坊。棕色是主要色彩，可以讓人想起巧克力的畫面；而粉紅色則是輔色，可以讓人聯想到佈滿糖霜的點心和蛋糕。這兩種色彩除了可以和某些味道聯想起來之外，它們對於品牌還有其他用途。棕色屬於中性色彩，足以做為良好的背景，讓全彩的照片凸顯出來，而粉紅色也夠明亮，可以強調特定的內容片段。
	影像  照片是這個設計的焦點。從這些照片可以明顯看出投入的時間和精力，確保每個影像看起來是那麼美味可口。因此，烘焙坊項目的影像非常清楚的說明這個品牌所經營的內容。影像也同時用來做為定義內容的分類。
	配置  與標準的 Windows 市集應用程式設計相比，這個範例有些不同的感覺。最不一樣的地方就是沒有使用方形磚。磚和格線仍然存在，只是利用影像來模擬烘焙坊可以看到的東西，像是使用圓形和扇形來偽裝成杯子蛋糕的容器。

 

Contoso Sandwich Truck 品牌

Contoso Sandwich Truck 品牌的特色是都會、開放以及流動性。這個品牌主打精良的主廚團隊和餐車車隊，瞄準外帶的族群。在這個範例中，圖形、格線以及標誌是用來強調品牌的視覺元素。

 

	圖形  菜單的選項保持清晰可見，同時沒有過度使用圖形，保持簡潔的畫面。不過，建立這個品牌的時候，圖形的確扮演了一定的角色。例如，「星星」代表客戶的評比系統，色彩和形狀是模擬城市街道的招牌，而店址的資訊是放在深色方塊中，這個方塊中有顆粒狀的柏油路圖形。
	格線  這個標準格線放置了這個設計的所有內容，而模擬的結構就像是城市街道的俯視圖一樣。為了要讓這個有條不紊的呈現法更有特色，滿版出血和重疊的內容以及圖形讓這個範例與眾不同。內容的整體表現是以大膽且直接的手段，是以外帶族群為訴求，且讓人可以快速的決定餐點。
	標誌  這個範例沒有使用公司標誌。公司的名稱是以文字放在標誌原本的位置。在這個範例中，是我們第一次看到將公司名稱內嵌在整體的設計當中。標誌或名稱不僅僅是靠上且靠左對齊。
	色彩  黑色和黃色做為輔色。從個性的角度來看，您經常可以在都會的環境中看到黑色和黃色，例如街道標誌以及道路號誌。

 

在所有應用程式頁面上強化品牌的範例

在次要、內容豐富的頁面上融入應用程式品牌，就和設計登陸頁面品牌一樣重要。這個範例使用虛構的球隊應用程式，示範如何在多個應用程式頁面中納入品牌。

Fabrikam FC，職業足球隊

職業足球隊 Fabrikam FC 的粉絲們，希望了解他們最愛球隊的幕後花絮、所有最愛球員們的詳細資料，並期待知道他們的所有最新資訊。登陸頁面設計反映出品牌大膽、動態的本質。

色彩、印刷格式及圖形的運用突顯出品牌大膽、動態的本質。

 

這個應用程式使用單層瀏覽模式。使用者向內撥動瀏覽列，瀏覽到應用程式的其他檢視。

色彩和標誌皆延用瀏覽應用程式列做為品牌元素。電子球隊色彩與深色背景對照，造就展現出大膽性格的強烈對比，而整個應用程式使用黃色來表現互動性。

 

使用者使用瀏覽列檢視球隊中的球員。

應用程式的各個檢視使用一致的字型。Sans Serif 字樣展現了球隊的活力及大膽的性格。全部大寫的字型樣式讓特定文字標籤的外觀及風格更像圖形元素。

 

若要快速瀏覽到某位球員，縮小到這個頁面的語意式縮放檢視。

球員的動作快照打破格線，產生一種充滿活力的動態配置。在球隊頁面及登陸頁面上都使用這種方式。

 

簡單的圖示及圖形讓內容變得更有趣、更易於理解，鼓勵使用者在應用程式中進行互動及探索。

 

認識 Windows 市集應用程式

UX 指導方針

命令模式

瀏覽模式

配置應用程式頁面

視窗大小以及調整成螢幕大小的指導方針

字型的指導方針

如何設計您的 ListView 商標

圖庫