設計案例研究：iPad 到 Windows 執行階段應用程式

在開發觸控優先、有趣且能吸引目光的應用程式時，iOS 是相當受歡迎的平台。但隨著 Windows 8 的推出，設計人員和開發人員現在有新平台可以盡情發揮他們的創造力。

在這個案例研究中，我們希望協助熟悉 iOS 的設計人員和開發人員，運用 Windows 市集應用程式的設計原則，重新構思他們的應用程式。我們將為您示範如何將 iPad 應用程式中常用的使用者介面和經驗轉譯為 Windows 8 Windows 市集應用程式。我們要善用本身的經驗，為 iPad 與 Windows 8 建立相同的應用程式。我們會使用常見的設計與開發案例，為各位示範如何利用 Windows 8 平台的優點，以及如何結合 Windows 市集應用程式的設計原則。

若要深入了解 Windows 8 提供的商機，請參閱銷售應用程式。如需用來組建 Windows 市集應用程式之功能的詳細資訊，請參閱 Windows 8 產品開發人員指南。

**下載本文章：**如果想下載本文章，請參閱本文章的離線版本。

應用程式

我們現在要開發的應用程式是連線的相片日誌，使用者可以使用時間表檢視線上查看和管理他們的相片和影片。

這個應用程式一開始是針對 iPad 建立的。下圖顯示 iPad 應用程式的結構。現在讓我們看看每個元件是如何轉譯為 Microsoft 設計語言。

1. 配置和瀏覽

2. 命令和動作

3. 協定：搜尋、分享及設定

4. 觸控

5. 方向和檢視

6. 通知

配置和瀏覽

重點在於內容，而不是控制項

相片日誌應用程式的特色在於可以顯示使用者相片以及這些相片的最近社交活動。建立 Windows 市集應用程式時，我們的第一個目標是移除與應用程式核心功能沒有直接關係的所有 UI 元素。例如，頂端瀏覽列、分頁控制項以及底部控制項列都可以全部移除。 在下節中，我們要來談談如何使用應用程式列，讓使用者在需要時叫出控制項。

iPad 應用程式 A.頂端瀏覽列 B.應用程式內容 C.分頁 UI D.底部索引標籤列	Windows 市集應用程式 B.應用程式內容和標誌

 

範例：主畫面的時間表檢視

這兩個應用程式都在主畫面上顯示以月份排列的相片，但是月份的表示方式差異頗大。在 iPad 版本的相片日誌中，網頁已經最佳化為顯示一年 12 個月份，並以堆疊相片的方式來表示每一個月。設計 Windows 市集應用程式主畫面時，我們選擇將更多的圖片和社交內容放在最上層，以便為使用者提供更多內容。我們移除了圖片的框線，改用空白為相片提供更多視覺焦點，因為這才是應用程式的重點。

iPad：每個月份都是以堆疊的相片表示，而且僅能看到一張相片。	Windows 市集應用程式：每個月份是以多張相片、標題以及幾個相片相關註解來表示。使用者可以在主畫面上看到每個月份的醒目內容。

 

將瀏覽階層變為單層

我們在 Windows 市集應用程式設計中使用階層瀏覽模式。在重新設計應用程式時，我們將瀏覽階層設成單層，如此一來，就可以透過應用程式的中樞畫面存取更多內容，而免除瀏覽的需要。

範例：移除底部索引標籤列

iPad 應用程式 A.相片檢視 B.註解檢視 包含兩個樞紐 (相片和註解) 的底部索引標籤列永遠都會在螢幕上。使用者可以查看一個檢視或另一個檢視。

Windows 市集應用程式 我們將註解和相片結合到一個檢視中，以免除索引標籤式使用者介面的需要。 主畫面的中樞設計會顯示每個區段中最相關的內容。 若要查看註解的完整清單，使用者可以點選名為 [Recent comments] 的群組標頭。

 

使用直接操作的方式來進行瀏覽

直接操作可以讓使用者自然地與內容互動並瀏覽到不同的區域。設計 Windows 市集應用程式時，我們盡可能使用直接操作，像使用語意式縮放內建控制項，可以讓使用者更有效率地進行瀏覽。

iPad 應用程式 在主畫面上，點選頂端瀏覽列上的 [Years] 按鈕，開啟浮動功能表，然後選取一個年份。	Windows 市集應用程式 在主畫面上，捏合兩根手指來縮小畫面，以查看所有的月份和年份。這種方式可讓使用者快速跳到任何一年的任何月份。使用者也可以看到總覽，顯示哪些月份有相片，哪些沒有 (變淡的紅色背景)。使用者只要操控內容就可以進行瀏覽，不需要使用控制項或瀏覽到不同的頁面。

 

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

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

命令和動作

將應用程式的內容關聯式動作放在應用程式列

重新設計應用程式的內容關聯式動作或命令時，我們同樣也會遵循「內容比控制項重要」""的原則，並透過應用程式列控制項使用所有的內容關聯式動作。常用的命令會放在左右邊緣的附近，以方便使用。如此一來，應用程式設計表面就不會擠滿控制項，而且無論使用者位於哪個頁面，他們都可以從螢幕的底部或頂端撥動應用程式列，來查看相關的動作。所有的 Windows 市集應用程式都可以使用應用程式列來放置命令。因為使用者會慢慢熟悉應用程式列的互動方式，所以可以提高應用程式的可用性，而且讓整個系統感覺更有整體性。

範例：刪除相片

iPad 應用程式 當使用者進入選取模式時，應用程式命令會位於螢幕的頂端。	Windows 市集應用程式 A. 應用程式列預設是隱藏的，以便為使用者提供沈浸式經驗。使用者可以從螢幕的底部或頂端撥動以便開啟應用程式列。 B.當使用者選取頁面上的物件時，所選項目的內容關聯式動作會顯示在應用程式列上。 這些動作會依據是否選取物件以及使用者在應用程式中的位置而變更。通用命令通常放在應用程式列的右側。暫時性命令應該放置在應用程式列的左側。

 

協定

使用搜尋協定來集中搜尋經驗

我們不要在應用程式畫布上建立永久的搜尋輸入介面，而是實作搜尋協定。使用者可以透過常用鍵持續叫用搜尋，而應用程式會針對內容以最自然的方式顯示結果。使用搜尋協定，使用者可以從系統中的任何地方叫用搜尋常用鍵，以尋找支援該協定的應用程式內容。

範例：在相片日誌應用程式中搜尋相片

iPad 應用程式 應用程式的主畫面提供搜尋功能。 當使用者輸入搜尋詞彙時，會開始出現結果，使用者就可以從中選取結果。	Windows 市集應用程式 使用者開啟常用鍵列並存取搜尋常用鍵。預設會選取相片日誌應用程式，因為使用者目前已經在這個應用程式內。 當使用者開始輸入時，應用程式會在窗格中提供搜尋建議。這樣使用者就能快速看到哪些詞彙可以產生搜尋結果。使用者提交查詢後，會看到搜尋結果檢視，並從中選取想要的結果。

 

範例：搜尋相片日誌應用程式外部的相片 (僅限 Windows 市集應用程式)

這個範例顯示如何透過搜尋窗格選擇新的應用程式，在不同的應用程式中搜尋詞彙。這項功能可以讓使用者在任何應用程式隨時搜尋任何內容。

Windows 市集應用程式 使用者在 Tweet@Rama 應用程式中搜尋 "Barcelona" 詞彙，然後想要使用相片日誌來查看巴塞隆那的相片。 相片日誌現在是搜尋結果提供者。應用程式會自動啟動並顯示搜尋結果。使用者不需要啟動相片日誌應用程式然後執行搜尋。

 

使用分享協定前往更多目的地並與您關心的人聯繫

社交媒體整合是大部分應用程式的關鍵元件。設計 iPad 應用程式時，設計人員和開發人員通常會選擇應用程式支援的社交媒體通道 (如 Twitter 或 Facebook)，然後開發人員必須個別整合這些服務，或是使用其中一個可用的架構。當這些分享服務的 API 變更時，開發人員必須更新程式碼，以便讓分享服務繼續運作。

將分享功能轉譯到 Windows 市集應用程式時，我們使用系統的分享協定。這個協定可簡化設計與開發程序，因為不需要連線使用者想要使用的每個服務。除了社交網路之外，使用者也可以將內容儲存到其他服務，例如 Notespace 或 EverNote 等筆記應用程式。 只需要使用少量的程式碼，我們的應用程式就可以與實作分享協定的每個 Windows 市集應用程式連線。不需要應付外部社交網路網站或 Web 服務的 API 變更。從使用者的觀點來看，他們只要存取常用鍵並開啟 [分享] 窗格，就可以從一致的位置進行分享。

範例：與另一個應用程式分享相片日誌中的相片

iPad 如果要從 iPad 相片日誌應用程式分享相片，使用者要先從頂端瀏覽列點選動作按鈕，然後選擇在 Facebook 上分享。如果開發人員稍後想要與其他社交網路服務整合，就必須進行額外的工作，加入更多分享按鈕。

Windows 市集應用程式 使用者永遠可以在一定的位置找到分享選項，無論使用什麼應用程式。 已經指定作為分享目標的任何已安裝應用程式都會顯示在 [分享] 窗格的應用程式清單中。例如，Socialite、Tweet@Rama、Notespace、PaintPlay 都是分享目標。 使用者可以分享各種內容類型。例如，使用者可以分享連結、相片，或者將資訊儲存到筆記應用程式。 最常用的分享目標會顯示在清單的最上方，幫助使用者快速完成工作。

 

我們設計的相片日誌應用程式除了作為分享來源之外，也可以做為分享目標。使用者可以輕易地將另一個應用程式的相片分享到相片日誌中的相片串流。這種連線也是透過分享協定啟動的。如需哪些應用程式是絕佳分享目標的詳細資訊，請參閱分享內容的指導方針和檢查清單。

範例：與相片日誌分享其他應用程式的相片 - 分享目標 (僅限 Windows 市集應用程式)

在這個範例中，另一個相片應用程式的使用者正在查看到墨西哥旅遊的相片。他們希望將相簿中的相片分享到自己的相片日誌應用程式集合，以便使用時間表檢視更輕易地查看這些相片。使用者開啟 [分享] 窗格後，他們看到相片日誌應用程式是其中一個分享目標，接著叫用分享工作流程。

 

使用檔案選擇器存取各個位置的檔案

檔案選擇器是全螢幕對話方塊，能讓使用者存取位於本機電腦、連接的存放裝置或 HomeGroup 中的檔案和資料夾。它也可以存取參與檔案選擇器協定的應用程式項目。

範例：上傳本機檔案系統中的相片

iPad 應用程式 iPad 應用程式支援存取本機相片媒體櫃及數個社交網路服務中的相片。

Windows 市集應用程式 A.使用者點選應用程式列中的 [上傳] 按鈕，檔案選擇器 UI 隨即開啟。這是一致的 UI 表面，只要使用者想要存取檔案時就會看到它。 B.點選 [檔案] 標頭，使用者就會看到所有可用檔案位置的飛出視窗，然後瀏覽到檔案資料夾。 C.使用者從資料夾選取多張相片後，左下方會出現一個顯示所選相片的縮圖清單。

 

範例：在其他應用程式中使用來自相片日誌的相片 (僅限 Windows 市集應用程式)

我們同時還會使用 Windows 市集應用程式的特有功能，加入在另一個應用程式內從相片日誌挑選相片內容的支援。 這樣可以省去先從相片日誌將相片下載到本機檔案系統，然後再上傳到另一個應用程式的步驟。 相片日誌會實作檔案選擇器協定，如此一來，系統會將它辨識為檔案儲存位置。

Windows 市集應用程式 使用者位於 [電腦設定] 畫面，點選 [瀏覽] 來自訂自己的帳戶相片。因為相片日誌實作檔案選擇器協定，所以使用者可以在檔案目錄中看到並存取這個應用程式。 接著，使用者可以選取他們儲存在相片日誌集合中的相片。

 

觸控

撥動邊緣以使用應用程式和系統的命令。

使用 Windows 8，使用者可以從邊緣撥動來存取命令以及在應用程式之間瀏覽。

• 從螢幕的下邊緣或上邊緣撥動，即可顯示應用程式命令。一律要在應用程式列上顯示應用程式命令。
• 從螢幕右邊緣向內撥動即可顯示包含系統命令的常用鍵。
• 從左邊緣向內撥動即可切換到先前使用的應用程式。
• 從螢幕的上邊緣向下邊緣撥動時，可讓您固定或關閉應用程式。

範例：在 Windows 市集應用程式中存取應用程式列與常用鍵

從螢幕的上邊緣或下邊緣撥動，即可存取應用程命令。	從螢幕的右邊緣向內撥動，即可顯示包含系統命令 (搜尋、分享、開始、裝置以及設定) 的常用鍵。

 

交叉滑動以選取物件

使用 Windows 8，使用者可以稍微滑動自己的手指 (與移動瀏覽方向垂直)，選取清單或格線上的物件。選取物件後會出現應用程式列，並自動顯示相關的命令。

範例：選取要刪除的多張相片

iPad 應用程式 使用者要進入特定編輯模式，來執行選取動作及其他編輯動作。這是因為會將點選保留起來供主要動作使用，例如啟動。 完成編輯後，使用者會離開編輯模式。	Windows 市集應用程式 使用者將物件往下撥動進行選取，然後會自動顯示應用程式列，其中包含內容關聯式相關命令。 使用者可以在物件上執行點選及選取兩個動作，且不用進入和結束另一個模式。 這個手勢是可以還原的，讓 Windows 8 應用程式中的選取更有效率。

 

捏合和伸展以進行語意式縮放

雖然在 iPad 與 Windows 市集應用程式中經常使用捏合和伸展手勢來重新調整大小，但是在 Windows 8 中它們還可以使用語意式縮放直接跳到內容的開頭、結尾或任何一處。語意式縮放能夠讓使用者縮小來查看相關群組中的資料，並提供深入查看的快速方式。針對這種類型的互動，請使用語意式縮放，而不要提供檢視冗長內容清單的瀏覽方式。當然，當使用者以全螢幕模式檢視相片時，可以使用捏合和伸展進行視覺化縮放。

範例：主畫面與月輪輻頁面上的語意式縮放

Windows 市集應用程式 A.主畫面上的語意式縮放能夠讓使用者快速跳到任何年份中的特定月份。 B.月檢視輪輻頁面上的語意式縮放，能夠讓使用者跳到特定的某一天，並提供資訊圖表，詳細說明該年有多少張相片。

 

方向和螢幕大小

設計彈性配置

設計人員在設計 iPad 應用程式時，需要考慮到它有兩種方向的固定螢幕大小和解析度。 而 Windows 8 則是可以在各種尺寸規格上執行，從可攜式平板電腦到全功能桌上型電腦。因此，您可以使用額外的螢幕空間為使用者顯示更多內容。重新設計相片日誌應用程式時，我們要考慮應用程式在兩種裝置方向上的呈現方式，以及不同的螢幕解析度和裝置大小。格線配置可以在直向配置和高解析度螢幕輕鬆縮放設計。例如，當有更多可用的垂直空間時，我們可以在每個月包含更多突出的相片。

範例：橫向、直向以及大型螢幕的主畫面設計 (僅限 Windows 市集應用程式)

iPad 應用程式 橫向與直向配置中顯示的內容相同。內容會以直式方向自動重排。

Windows 市集應用程式 在直向配置和更大的螢幕上，應用程式在中樞頁面上使用額外的空間在每個區段中顯示更多內容。 這與建立 iOS Retina 顯示器影像的方式類似，我們針對不同的 Windows 縮放比例 (100%、140% 及 180%) 建立多個影像。這些影像會自動載入到 HD 平板電腦上。

 

使用窄格式寬度來吸引您的使用者

Windows 8 讓使用者在螢幕上彼此相鄰放置多個應用程式，以便進行多工處理。 設計應用程式在窄格式寬度中能夠順暢運作，是增加應用程式在螢幕上停留時間以及更長時間吸引使用者的絕佳方式。使用者可藉由操控兩個應用程式之間的分隔線，輕鬆地變更應用程式的大小，因此務必在各種大小保留內容。我們不希望使用者在調整應用程式的大小後失去應用程式原本的狀態。

如需調整視窗大小的詳細資訊，請參閱視窗大小以及調整成螢幕大小的指導方針和將視窗大小調整為高窄格式配置的指導方針。

範例：窄格式寬度的主畫面

Windows 市集應用程式 當主畫面大小調整為窄格式寬度時，使用者仍然可以存取相同的內容。 在高窄格式大小中，使用者會垂直移動瀏覽來查看更多內容，因此沿著較長的邊緣移動瀏覽是較為舒適的做法。這與完整檢視中的水平移動瀏覽不同，完整檢視也是沿著較長邊緣可以獲得最佳的移動瀏覽功能。

 

通知

使用磚以進行持續且動態的更新

iOS 5 引入一個通知中心，可以讓新通知快速出現在螢幕頂端，且使用者可以從上邊緣向下撥動檢視中心內的所有訊息。此外，iOS Springboard 中的應用程式圖示附有數字徽章，可指出有新的訊息。Windows 8 [開始] 畫面上的磚結合了應用程式圖示數字徽章與 iPad 通知中心兩者的功能。使用者只需在一個地方就啟動應用程式並讀取通知。此外，iOS 的通知只有一種固定格式，但是 Windows 市集應用程式磚提供三種正方形大小及一種寬形大小，同時包含了各式各樣的範本，可供設計人員選擇。

範例：主畫面上的通知

iPad A.iPad Springboard 上包含數字徽章的應用程式圖示。 B.相片日誌通知的通知中心。	Windows 8 C.[開始] 畫面上的磚會顯示數字徽章與通知。有許多可用的磚範本。

 

針對暫時性和重要通知使用快顯通知

您可以使用快顯通知即時通知使用者各種事件。磚更新是被動的，而 Windows 市集應用程式中的快顯通知則不同，是會打斷使用者的重要更新。它們會顯示在螢幕的右上方，而且會在系統中的任何地方出現。一般來說，最好是讓使用者第一次執行應用程式時選擇想用的通知。如果可以的話，在通知還具有相關性時，於磚上顯示最新的快顯通知。快顯通知與 iOS 暫時性警示類似，會在螢幕頂端以橫幅顯示。但是設計人員可以從快顯通知範本集合中選擇，讓通知變得更具有相關性。

範例：當使用者收到來自家庭成員的註解時，相片日誌會通知他們

使用者設定在家人針對應用程式中的相片發表評論時收到快顯通知。

 

關於作者

	Bart Claeys 是 Ratio Interactive 的資深使用者經驗設計人員，專長領域是網頁與行動應用程式的 UI/UX。他曾經擔任 Saatchi & Saatchi Brussels 的互動式藝術總監，為 Toyota、Sony 以及其他幾個國際品牌建立互動式活動。Bart 擁有產品開發的碩士學位，並針對品牌管理接受額外的培訓。他是比利時領先創意工作網站 Creativeskills.be 的創始人。在 2006 年，Bart 贏得 "You are Flanders future" 獎項，這個獎項是由佛蘭芒政府為了推廣創業而設立的。
	Qixing Zheng 是 Microsoft 的使用者經驗計畫經理。她是負責建立 Windows 8 使用者介面的團隊成員之一，而且一直在協助設計人員學習 Microsoft 設計語言。她滿懷熱情，希望能協助人們改善每日所仰賴之技術的使用者經驗。加入 Windows 團隊之前，Qixing 是 Microsoft Canada 的第一位 UX 顧問，曾在大學、設計社群以及公司發表有關 Microsoft 投資 UX 的演講。她也致力於尋找傑出設計人員，以及從社群收集設計方面的故事。

 

在 Windows 8 中重新建立 iOS 應用程式設計

適用於 iOS 開發人員的資源