iT邦幫忙

2024 iThome 鐵人賽

DAY 4
0
佛心分享-SideProject30

房東不給養鸚鵡 - 那就用 Nuxt + Express + MongoDB 30 天寫一個全端鸚鵡專案系列 第 4

[ DAY4 ] 翱翔於需求與設計之間:鸚鵡網站的使用者故事與流程圖

  • 分享至 

  • xImage
  •  

哈囉大家好!2魚又來啦~今天是鐵人賽的第四天,我們要來聊聊使用者故事和流程圖這兩個超級實用的工具!別擔心,雖然聽起來很專業,但我會用最簡單的方式解釋給大家聽喔!

使用者故事:站在使用者的角度思考

首先,讓我們來認識一下「使用者故事」吧!
使用者故事是什麼呢?簡單來說,就是用一句話來描述「誰」要做「什麼事」,以及「為什麼」要這麼做。聽起來很簡單吧?但正是這種簡單的方式,讓我們能夠更容易地理解使用者的需求呢!

使用者故事通常長這樣:
「作為一個【角色】,我想要【行動】,以便【達到某個目的】。」

舉個例子:
「作為一位鸚鵡飼主,我想要使用食物計算機,以便準確計算我的鸚鵡每天應攝取的食物量。」
是不是一看就懂啦?這就是使用者故事的魔力!它簡單直接,讓我們能夠快速抓住重點,知道我們要為誰設計、設計什麼功能、以及這個功能的目的是什麼。
對了,使用者故事還有一個超厲害的地方!它能幫助我們專注在真正重要的事情上。畢竟,我們的目標是讓使用者開心,而不是堆砌一堆沒人要用的功能,對吧?
好啦,既然知道使用者故事這麼棒,那我們就來看看我們的「鸚鸚食堂」網站有哪些使用者故事吧!

💡 鸚鸚食堂網站的使用者故事:

  • 作為一位網站訪客,我希望能夠瀏覽首頁,以快速了解網站的主要功能和內容。
  • 作為一位鸚鵡飼主,我想要使用食物計算機,以計算我的鸚鵡每天應攝取的食物量。
  • 作為一位關心鸚鵡健康的飼主,我希望能夠瀏覽營養指南頁面,以了解鸚鵡可食用和不可食用的食物。
  • 作為一位鸚鵡愛好者,我想要瀏覽百科全書頁面,以認識更多不同品種的鸚鵡。
  • 作為一位需要尋找獸醫的飼主,我希望能在醫護站頁面篩選我所在地區的醫院資訊。
  • 作為一位網站使用者,我想要通過聯絡我們頁面填寫表單,以提供使用網站的反饋和建議。
    看完這些使用者故事,是不是對我們的網站要做什麼更清楚了呢?每一個故事都代表了一個重要的功能或頁面,這些都是我們接下來要努力實現的目標喔!

流程圖:讓想法變得更清晰

接下來,讓我們來認識另一個超級好用的工具:流程圖!

流程圖聽起來很高深,但其實就是用一些簡單的圖形和箭頭,把一個過程或系統畫出來啦!它就像是我們思考的地圖,幫助我們整理腦中的想法,讓複雜的事情變得簡單明瞭。

在流程圖中,我們會看到一些特定的圖形符號:

  1. 橢圓形:就像是起跑線和終點線,標誌著流程的開始和結束。
  2. 矩形:這是我們的主角!代表具體的處理步驟或行動。
  3. 菱形:遇到它就要做選擇啦!表示需要做出決策的判斷點。
  4. 平行四邊形:負責資料的進出,代表數據的輸入或輸出。
  5. 箭頭:指引方向的小幫手,告訴我們下一步該往哪走。

流程圖在網站開發中特別有用,它可以幫助我們:

  1. 設計用戶體驗:規劃使用者怎麼跟網站互動。
  2. 設計功能:詳細規劃每個功能要怎麼運作。
  3. 規劃後端邏輯:思考資料要怎麼處理。
  4. 規劃測試:設計全面的測試方案。
  5. 處理錯誤:預想可能出錯的地方,並想出解決方法。

畫流程圖就像是在為我們的網站畫設計圖,讓我們能夠更清楚地看到整個網站的結構和運作方式。這樣不只能幫助我們做出更好的設計,還能讓團隊的溝通更順暢呢!

https://ithelp.ithome.com.tw/upload/images/20240913/20159686zZXF6BXWc5.png

如果你對流程圖的製作技巧感興趣,可以參考這篇超詳細的教學文章:【流程圖製作教學】流程圖符號規範+圖示說明 | Flow Chart範例 - ProjectManager。裡面有更多關於流程圖的小技巧喔!

結語:用故事和圖畫,打造夢想中的網站!

今天我們學到了使用者故事和流程圖這兩個超強工具!使用者故事幫助我們站在使用者的角度思考,而流程圖則讓我們的想法變得更加清晰。
接下來,我會為每個使用者故事畫一張流程圖,這樣不只能幫助我更好地理解每個功能該怎麼實現,也能讓大家更清楚地看到我的想法。期待之後能和大家分享這些流程圖喔!
記住,無論是寫程式還是規劃專案,最重要的就是把複雜的事情變簡單。使用者故事和流程圖就是幫助我們做到這一點的好幫手!
好啦,今天的分享就到這裡。如果你對使用者故事或流程圖有什麼想法,或是有什麼不懂的地方,歡迎在下面留言跟我討論喔!我們明天見~掰掰!
(喔對了,如果你覺得今天的內容對你有幫助,別忘了給我一個讚喔!這會是我繼續努力的動力呢~)


上一篇
[ DAY3 ] 網站規劃三部曲:發想、收斂、畫網站地圖
下一篇
[ DAY5 ] 當線條開始敘事:用線稿圖探索網站設計的起點
系列文
房東不給養鸚鵡 - 那就用 Nuxt + Express + MongoDB 30 天寫一個全端鸚鵡專案18
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言