什麼是故事地圖？

一個故事地圖是一種新型的設計文檔，顯示一目了然你的產品體驗大創意。

一個好的故事圖是您統一團隊，獲得高管支持並幫助您找到發貨方式的黃金之門。

它介於情節提要和藏寶圖之間，將您產品的價值和功能流程與人們在產品每一步中可能感到的愉悅結合在一起。它勾勒出UX流程而不將其鎖定，並在不過早地詳述細節的情況下傳達了思想的主旨和情感的格式像。

 

一個好的故事圖
可以一目了然地傳達您的項目可以做什麼。

故事圖描述了產品的工作原理以及重要性，但至關重要的是，它沒有明確說明最終設計，UI或雜草中的UX邏輯。但是，它確實保留了產品願景，並且可以作為一個原則，團隊可以據此制定更好，更快的決策。

 

一個好的故事地圖可以作為
決策機器。

故事圖不是模擬的，它是確保每個人在決策時都解決同一問題，構建相同產品並指向同一張紙的指南。抵製過早設計實際UI的誘惑，並堅決反對在時間到之前先進入最終的像素完美模擬的衝動。

 

模擬可以等待。
首先，您需要弄清楚您的故事。

故事圖傳達了核心思想的緊迫性和愉悅感，而沒有傲慢地假設您（或任何其他人）已經知道所有答案。換句話說，它是一個草圖，目的是可以成為真正的UX流程，模擬，產品流程和工程計劃的基礎。這是計劃，而不是說明列表。老實說？它是純金。

它打印出來，並與你攜帶它周圍，像一個海盜船長領導與現實生活中的藏寶圖船員上岸，所以，當你在談項目，設計師，工程師和項目經理可以指向同一個圖紙在同時間 並解釋他們如何看待挑戰以及他們如何嘗試解決挑戰。

另外，當您的CEO走過並問“大項目進展如何？”時，你剛剛交出的故事地圖，一目了然，她知道究竟發生了什麼。

 

 

如何做一個

主要有兩種類型或故事地圖：旅程和折磨（折磨是宇宙的功能模型）。我還提供了兩種樣式：“混合圖”和“結果圖”，以顯示如何使用此方法並將其應用於其他工作。

旅程

一個旅程的故事映射啟動與一個人誰與轉化的狀態結束初始的情感狀態。

在上面的示例中，描繪了Twitter最近的世界杯經歷的一部分，一個人開始在電視上觀看世界杯，並最終與一個充滿活力的粉絲，名人和發燒友社區建立了聯繫-全部通過短信註冊流程進行稱為“文字加入”。

關於此處描述的產品中工作的實際機制，有很多要討論的東西，我現在不再贅述，但總的想法是：我們給了人們一個直接告訴我們他們喜歡的東西的機會，然後我們交付了定制的直接通過短信將Twitter版本的Twitter信息發送到他們的手機上-所有信息均基於他們的意願。

事實證明，該機制非常棒，可以用於許多不同的利益。我以世界杯為例在“故事地圖”中，但是它可以滿足任何興趣。以上是我們與辛辛那提紅人隊一起進行的一項早期試驗。

 

有了故事圖可以幫助我們
更快地找到解決方案

現在，Twitter上參與該項目的許多不同團隊可能會在沒有地圖的情況下獲得最終體驗，實際上，有幾個團隊一直在獨立思考相似的想法，但每個團隊的想法都不同。

這些團隊尚未連接到一個統一的項目上（以某種方式提供故事圖可以幫助我們更快地找到解決方案），並且可以幫助我們一起工作。

一旦有了故事圖，每個人都可以指向同一張紙，討論每個人的想法如何適合整個體驗。

有了地圖，我們就可以像一個統一的團隊而不是五個不同的部門開始執行。當然，市場營銷，業務開發，產品，設計和工程都有各自的其他項目文檔，但是故事情節將我們凝聚在一起。

工程師甚至找到了一種在類似項目之間共享代碼的方法，因為我們在討論細節時都在談論大圖景，也許，在某種程度上，地圖可以幫助我們提高效率（在某些情況下，還可以使我們了解效率。我們認為確實需要解決的一些事情）。

最後，故事圖使高管們更容易說“是”並提供持續的支持。哪一個有意義，您是要查看一張藏寶圖和一個演示，還是一個電子表格和一個平台？

 

您想看一張藏寶圖和一個演示，
還是一個電子表格和一個甲板？

如何繪製“旅程”故事地圖

首先在左上角繪製初始狀態。這是體驗的切入點。畫出一個人可能進入的所有不同方式，並以一種暗示情緒狀態和背景環境的方式畫出。你在沙發上看電視嗎？在公共汽車上帶著電話出去嗎？您是在開會，晚餐還是遠足？初始狀態需要描繪情緒狀態和體驗開始的上下文。

接下來，開始繪製在隨後的每個步驟中將發生的事情—將繪圖擴展到整個頁面（並添加更多頁面，或者如果步驟比您最初預期的要多，請調整畫布的大小）。一直走下去，然後在右下角畫出最終的目的地，這是您對產品有著深刻體驗並準備分享，重新參與並永存愛情的人的最終，快樂，轉變的狀態。

奧列裡

故事地圖的第二種類型是奧列裡。這是我最喜歡的設計/科學詞彙之一。基本上，它是試圖解釋宇宙的模型或地圖。您可以在這裡看到一些：（鏈接到Google圖片上的“ Orrery”）

特別感謝@stop鼓勵我發布故事地圖過程，@ jbrewer相信故事是一種設計工具，並鼓勵我設計文字和像素，以及@samanthatoy慷慨地回饋社區，以及Twitter上的所有超級設計師，項目經理，工程師，營銷人員和執行人員。多虧了@ Ev，@ biz，@ goldman，@ jack和@dickc在四年前給我一個機會。

如果您製作了故事地圖，請告訴我！我希望看到您的工作，並聽到您對如何改進流程和結果的想法。在Twitter上找到我。

這就是旅途或折磨的秘密-創建一個宇宙，為每個人的偉大工作騰出空間，同時確保我們最終都能找到寶藏。

隨身攜帶。當有人問您情況如何時，請拉出地圖並顯示給他們。帶他們去尋找埋藏的寶藏。用手指追踪水流，讓他們發現小徑的盡頭。詢問有關如何使其更好以及它是否與她或他當前正在烹飪或即將發貨的任何項目相關的反饋，建議和想法。通常，一旦人們有了一個可以想像自己的作品的框架，其他互補項目就會浮出水面。

您會驚訝於擁有地圖如何將您從服務提供者轉變為有遠見的產品。設計師，項目經理，TPM和工程師（取決於公司）抱怨沒有權力。需要一些電源嗎？擁有地圖。因為它不是地圖，所以它是決定整個產品成功與否的決策機器。

會議結束後，返回Photoshop並重新繪製地圖。將當前版本郵寄給團隊，並為您的作戰室或項目區域打印一份大副本。

將您的故事圖帶到每次團隊會議。當所有人都在講話時，將其打印出來並放在桌子上。指向地圖的不同部分，以確保每個人都在談論相同的挑戰。如果缺少某些內容，請在打印輸出的頂部將其草繪。刪除元素，重新製作部分。給房間裡的每個人都用鋼筆，讓每個人在解決問題時聚在一起（在此處了解有關如何在會議上聚在一起的更多信息）。

超級重要：打印出來。

如何在會議中使用故事圖

當您告訴老闆您的設計/產品/游擊過程的故事時，向其展示結果圖。良好的結果圖可以幫助她重溫項目並在結束時感到轉變。

這就是旅途或折磨的秘密-創建一個宇宙，為每個人的偉大工作騰出空間，同時確保我們最終都能找到寶藏。

隨身攜帶。當有人問您情況如何時，請拉出地圖並顯示給他們。帶他們去尋找埋藏的寶藏。用手指追踪水流，讓他們發現小徑的盡頭。詢問有關如何使其更好以及它是否與她或他當前正在烹飪或即將發貨的任何項目相關的反饋，建議和想法。通常，一旦人們有了一個可以想像自己的作品的框架，其他互補項目就會浮出水面。

您會驚訝於擁有地圖如何將您從服務提供者轉變為有遠見的產品。設計師，項目經理，TPM和工程師（取決於公司）抱怨沒有權力。需要一些電源嗎？擁有地圖。因為它不是地圖，所以它是決定整個產品成功與否的決策機器。

會議結束後，返回Photoshop並重新繪製地圖。將當前版本郵寄給團隊，並為您的作戰室或項目區域打印一份大副本。

將您的故事圖帶到每次團隊會議。當所有人都在講話時，將其打印出來並放在桌子上。指向地圖的不同部分，以確保每個人都在談論相同的挑戰。如果缺少某些內容，請在打印輸出的頂部將其草繪。刪除元素，重新製作部分。給房間裡的每個人都用鋼筆，讓每個人在解決問題時聚在一起（在此處了解有關如何在會議上聚在一起的更多信息）。

超級重要：打印出來。

如何在會議中使用故事圖

當您告訴老闆您的設計/產品/游擊過程的故事時，向其展示結果圖。良好的結果圖可以幫助她重溫項目並在結束時感到轉變。

 

 

一旦您的項目取得巨大成功，您就可以從故事地圖方法中藉用以展示您的結果。這是上面的同一項目，顯示為“結果圖”。

結果圖

 

 

後來，我對流程進行了重新設計，以找到適合該項目的UX，並為流程中的每個步驟闡明了可能的設計。請注意，這些仍然不是像素完美的。目標仍然是創建地圖，而不是完成最終設計工作。

 

 

當您需要解釋整個系統如何協同工作時，請為故事地圖使用orrery樣式。這是奧斯卡頒獎典禮的苦難。

無論您的orrery是描述消費者體驗還是收益產品，始終將人們放在宇宙的中心。如果品牌或收入產品佔據中心位置，那麼您就錯過了傳遞價值的機會。人們，無論是用戶還是客戶，還是只是檢查商品，總會佔據orrery故事地圖的中心。

在這種情況下，位於宇宙中心的人們是聚集在一起參加奧斯卡派對的朋友。有些是活躍的Twitter用戶，有些則不是，都是在看電視並玩得開心。圍繞它們旋轉的是交互的軌道元素，包括用於名人自拍照的後台Twitter Mirror，帶有可愛照片的平台內投票和投票按鈕，它們變成了動畫的條形圖，嵌入式推文，廣播時刻，通過搜索引擎訪問的個人資料頁面，並擴大了Twitter平台和名人的觸媒。

雜種

有時，您已經有一些片段，並且需要拿出一個故事圖，將現有片段之間的點連接起來，從而在體驗中創建一個迷你循環。這是為世界杯發明的“點擊購買”體驗的迷你循環示例，它將您的@handle放在球衣的背面（然後讓您直接從Tweet購買）。