設計指示性 UI 的指導方針

Applies to Windows and Windows Phone

設計指示性使用者介面 (UI),教導使用者如何使用您的 Windows 市集應用程式。

可行與禁止事項

  • 使用指示性 UI,為新的使用者介紹您的應用程式用途。
  • 用於新功能上的提示或應用程式更新後變更項目的特定詳細資料。
  • 整合指示性 UI 與特定工作。
  • 不要封鎖與應用程式 UI 的互動。

其他用法指導方針

在某些情況中,協助使用者與您 Windows 市集應用程式互動的最佳方式是在應用程式的 UI 中教導他們。我們使用「指示性 UI」這個詞來代表這類引導。最佳範例是使用 UI 元素 (例如內嵌文字或飛出視窗) 來告知使用者,他們何時需要使用觸控互動來完成工作。

請記住,指示性 UI 不可能取代周全的設計。如果您太過頻繁地使用它或者與目前操作環境無關,就會干擾應用程式的流程並降低它的有效性。新增指示性 UI 之前,請先探索吸引使用者進入您應用程式的其他方式。請參閱相關主題,以取得配置、瀏覽及控制項的詳細資訊。

以下是指示性 UI 可協助使用者學習的一些實例:

  • 協助使用者探索觸控互動。 下列螢幕擷取畫面顯示指示性 UI 如何教導玩家在 Cut the Rope 遊戲中使用觸控手勢。

    遊戲的螢幕擷取畫面顯示指示性 UI 訊息 "Slide acress to cut the rope"

  • 塑造良好的第一印象。 考慮使用指示性 UI,為新的使用者介紹您的應用程式用途。例如,當「影片時刻」第一次啟動時,指示性 UI 會提示使用者開始建立影片。

    影片時刻應用程式的啟動畫面

  • 引導使用者執行複雜工作中的下一步。 在 Windows 郵件應用程式中,收件匣底部的提示會引導使用者進入 [設定] 以存取較舊的郵件。

    顯示指示性 UI 訊息的 Windows 郵件應用程式的裁剪螢幕擷取畫面

    使用者按一下訊息時,應用程式的 [設定] 飛出視窗會顯示在畫面的右側,讓使用者完成工作。這些螢幕擷取畫面會顯示使用者按一下指示性 UI 訊息之前與之後,郵件應用程式的情況。

    之前之後
    Windows 郵件應用程式的螢幕擷取畫面顯示延伸式 [設定] 飛出視窗的 Windows 郵件應用程式螢幕擷取畫面

     

  • 介紹 UI 的變更。如果您在最新版本的應用程式中做了大幅的 UI 變更,使用者可能需要新功能的提示,或應用程式變更的具體詳細資訊。

指示性 UI 的設計原則

  • 保持簡單。一次只介紹一個基本概念,盡可能使用影像。考慮在 Windows 市集應用程式的 [設定] 飛出視窗中新增 [說明] 區段,用來處理複雜的功能。
  • 以關聯的內容教導使用者。將指示性 UI 與工作整合,協助使用者完成工作。在使用者最需要該內容時進行介紹,更易於讓使用者記住概念。
  • 不要封鎖互動。確定使用者在指示性 UI 出現時仍然可以繼續與您的應用程式進行互動。指示性 UI 應該為使用者提供協助,而不是以妨礙的方式來干擾使用者。
  • 教導完之後就消失。只要指示性 UI 不再相關後就將它移除,或允許使用者將它關閉。 另外,在大部分的情況中,使用者只需要指示性 UI 顯示一次。避免重複顯示同一個指示性 UI。
  • 謹慎使用。周全的設計和 [說明] 區段通常能夠教導使用者享受您的應用程式時需要了解的所有知識。將指示性 UI 新增到應用程式之前,請考慮設計選項的廣度。

相關主題

適用於設計者
Microsoft 設計原則
配置
控制項
應用程式說明的指導方針
適用於開發人員 (HTML)
建立 UI (JavaScript)
適用於開發人員 (XAML)
建立 UI (C#/C++/VB)

 

 

顯示:
© 2014 Microsoft