快速展示需求及UI 設計 - PowerPoint 將想法轉為分鏡腳本 (Storyboard)

各位夥伴們,

當有程式開發的新需求時,需與 User 頻繁討論 UI 及流程;或是你是PM、系統分析師,需要將需求及簡單的頁面流程/ UI 繪製下來,以供與相關 stakeholder (內部/外部user或老闆) 及團隊同仁 (Programmer、Designer、Tester....) 討論並展示你的概念呢? Yes,PowerPoint 大概是所有人最熟悉的簡報工具了,在 Visual Studio 及 TFS 2013 版本中,多了一個 PowerPoint 套件叫 「Storyboard 分鏡腳本」, 分鏡腳本可讓您將概念與目標轉變為視覺項目, 其他人更容易了解您的想法,因此可以更快提供具建設性的意見,更好的是,它可以與 TFS 整合,將繪製好的 Storyboard 簽入到 TFS 的 Work Item 工作項目,如此你就可以追蹤該需求與哪些工作項目有關連,更容易達到專案的 Visibility。 

您可以利用分鏡腳本圖形、文字、動畫和 PowerPoint 分鏡腳本提供的其他功能,生動地呈現您的想法!本文簡介如何使用 Storyboard。

微軟開發工具產品經理 Dann Wu 吳典璋

---------------------------------------------------------------------
1. 使用分鏡腳本圖形和 PowerPoint 功能

 

  1. 如果您沒有 Office PowerPoint 2007 (含) 以後版本,請安裝它

  2. 如果您尚未安裝 Visual Studio Premium 2013、VS Ultimate 2013 或 VS Test Professional 2013,則必須安裝其中一個版本才能建立和修改分鏡腳本。

    取得 TFS 分鏡腳本增益集唯一的方式是安裝其中一個 Visual Studio Premium Edition。

  3. 開啟 Power Point 分鏡腳本並從空白投影片開始。 您應該會看到 [分鏡腳本] 功能區和 [分鏡腳本圖形] 程式庫。 如果您沒有看到分鏡腳本功能區,請參閱第步驟 2。

    開啟 PowerPoint 分鏡腳本

    或者,您可以從待處理項目工作項目的 [ 分鏡腳本] 索引標籤開啟 PowerPoint 分鏡腳本。

    從工作項目啟動 PowerPoint 分鏡腳本

  4. 加入適合應用程式的背景圖形。 若要加入圖形,請將它拖曳至投影片上。

    將圖形拖曳到投影片上

  5. 搜尋其他圖形以完成您的設計。

    搜尋圖形

  6. 建立更多投影片以示範應用程式的流程。 與小組共用,提早取得對設計的意見。

    使用多個投影片開發您的分鏡腳本

提示 提示
  • 使用動畫將流程生動化。

  • 擷取應用程式的螢幕擷取畫面。 例如,將螢幕擷取畫面加入為母片投影片的背景。

  • 當您尚未準備好實際的文字時,使用 =lorem() 插入文字。

2. 您也可以將分鏡腳本連結至在 TFS 中的工作項目。

 

當您將分鏡腳本共用至共用網路位置時,您可以將分鏡腳本連結到支援的工作項目。 如此一來,您的小組成員可以從工作項目開啟分鏡腳本和加註他們的建議。

  1. 儲存或上傳分鏡腳本至每個小組成員都可以存取的共用位置。

     

  2. 如果您從待處理項目 (Backlog) 啟動了 Power Point 分鏡腳本,則您已經連結至初始項目,並且完成工作。

    否則,開啟 [分鏡腳本連結]。

    開啟分鏡腳本連結以連結到工作項目

  3. 如果您尚未連線至 TFS 和 Team 專案,請立即連線。 如果您無法連線,請加入做為成員

    連接到 TFS

  4. 然後連結至工作項目。

    選擇要連結到工作項目

  5. 選取要連結的工作項目。 下個螢幕擷取畫面顯示如何使用已儲存的查詢這麼做。 您也可以對標題進行簡單搜尋,或者只提供 ID.

    選取查詢以尋找工作項目

    從要連結的查詢尋找工作項目

    選擇要連結的工作項目

  6. 現在分鏡腳本已連結至工作項目。

    [分鏡腳本連結] 對話方塊中的連結工作項目

  7. 同時,任何檢視工作項目的人也都可以存取分鏡腳本。

    包含已連結之分鏡腳本的 [分鏡腳本] 索引標籤

PowerPoint 分鏡腳本可以讓您宣告新的或已修改的介面。 您可以擷取現有的使用者介面並從預先定義的分鏡腳本集合建置分鏡腳本。 此外,您也可以自訂網站、用戶端或電話應用程式的滑動配置。 然後您可以將分鏡腳本連結至 TFS 中儲存的工作項目,自動與小組共用它。

3. 接下來嘗試這個:

從可行軟體的檢閱者取得意見反應

<問答>

 

Hh409276.collapse_all(zh-tw,VS.120).gif是否需要一些有關使用其他功能的快速提示?

答: 您可以透過此處發佈的 1 到 2 分鐘的影片了解建立故事腳本的基本資訊: Storyboarding with PowerPoint – A Few Short Videos to Get You Started

Hh409276.collapse_all(zh-tw,VS.120).gif是否想要更多分鏡腳本圖形,增進您將想法轉換成分鏡腳本的能力?

答: 您可以 匯入分鏡腳本圖形,這些可供 Visual Studio 社群或小組成員使用。 此外,您可以將您建立的自訂形狀匯出到分鏡腳本圖形檔,以共用這些圖形。