哈囉大家好！我是 2魚，今天是鐵人賽的第五天啦！今天我們要來聊聊一個超級有趣又實用的東西：線稿圖（Wireframe）！沒錯，就是那個看起來像草稿，卻能讓你的網站設計事半功倍的神奇工具！
房東不給養鸚鵡 - 那就用 Nuxt + Express + MongoDB 30 天寫一個全端鸚鵡專案。
挑戰人生第一次鐵人賽，就來個佛心分享 side project，從專案發想、規劃、設計、資料庫、開發到部署，技術使用 Nuxt 3、Tailwind CSS、Pinia、Axios、Express、MongoDB，製作一個前後端分離的鸚鵡專案，功能主要介紹食物計算機和聯絡我們，希望可以讓更多人瞭解專案的完整流程 ✨
IT 全文章連結線稿圖：把腦中的想法變成圖！
首先，讓我們來認識一下什麼是線稿圖吧！
線稿圖就像是網頁或 APP 的設計草圖。它用簡單的線條和方框展示頁面的結構、功能佈局和內容層次。簡單來說，就是把我們腦中的想法，用最簡單的方式畫出來啦！
為什麼線稿圖這麼重要呢？讓我們來看看它的神奇之處：
- 溝通神器：它能幫助設計師、工程師和老闆們達成共識，避免「你說你的，我做我的」的尷尬情況。
- 快速修改：因為很簡單，所以很容易改。想到新點子？馬上就能畫出來！
- 專注重點：不會被漂亮的顏色和花俏的設計分心，讓我們能專心思考功能和使用者體驗。
- 省時省錢：在早期就發現問題，比等到做好才發現問題省下超多時間和金錢！
線稿圖的特色：簡單就是美！
線稿圖有幾個重要的特點：
- 簡潔：就像速寫一樣，用最簡單的線條和方框表達想法。
- 快速：能迅速把腦中的想法變成圖，方便團隊討論和修改。
- 重點突出：突顯頁面結構和功能，不被漂亮的視覺設計分散注意力。
- 靈活：很容易調整和優化，隨時跟上設計需求的變化。
- 清晰：清楚地展示內容的層次和重要性，讓人一目了然。
我的選擇：Whimsical
這次我選擇了 Whimsical 作為主要的線稿圖工具。為什麼選它呢？原因如下：
- 超級簡單好上手：對我這種新手來說，學習曲線超平緩的！
- 元素庫超豐富：各種現成的線稿圖元素，讓我畫圖速度飛快！
- 支援團隊協作：雖然我是一人開發團隊啦，但想到以後可能會用到，就先學起來！
- 免費版功能就很夠用：身為一個剛出社會的菜鳥工程師，錢包還是要精打細算的嘛！
當然，市面上還有其他不錯的工具，像是 Miro（適合大型專案）和 Figma（可以從線稿圖一路做到高保真原型）。不過對現在的我來說，Whimsical 已經很夠用啦！
實戰經驗：線稿圖繪製小撇步
在實際畫線稿圖的過程中，我整理了幾個小技巧，跟大家分享：
- 對照流程圖：一定要時不時看看之前畫的流程圖，確保沒有漏掉重要的功能。
- 別忘了「返回」：每個頁面都要有明確的返回選項，讓使用者不會迷路。
- 用真實文案：儘量用真的文字內容，不要全部都是 Lorem Ipsum。這樣更能感受實際效果！
- 重視結構不重視美觀：這時候不用在意美不美，重點是結構對不對！
- 先畫電腦版：先把電腦版的頁面畫好，手機版可以之後再調整。
- 標註互動行為：比如說點擊後會怎樣，這樣開發時就不會搞錯意思啦！
- 考慮極端情況：想像一下如果內容超級多或超級少，頁面會變成什麼樣子。
意外收穫：鸚鵡食量計算公式
在畫線稿圖的過程中，我遇到了一個有趣的小挑戰。身為一個沒養過鸚鵡的人，我突然發現我對鸚鵡的日常飲食需求一無所知！這可怎麼辦？
於是我開始了一段驚奇的網路衝浪之旅。在翻閱了無數鸚鵡飼養網站和論壇後，我終於找到了這個寶貴的公式：
$BMR = 70 * (體重) ^ 0.75 = ＿＿ kcal/日
看到這個公式時，我真的鬆了一口氣！原來鸚鵡的食量計算也是有科學根據的呀！這次的小插曲不僅解決了我的設計難題，還讓我對鸚鵡的日常生活有了新的認識。
這次經歷讓我意識到，在設計過程中，我們有時候需要學習一些意料之外的知識。即使是看似不相關的資訊，也可能對我們的設計和規劃有意想不到的幫助呢！
我的線稿圖成果
經過一番努力，我終於完成了「鸚鸚食堂」的主要頁面線稿圖。雖然還沒有畫首頁（我打算等確定完整功能後再畫），但其他頁面已經有了大致的樣子。
至於我畫的長什麼樣子，獻醜了 qq
結語：從腦中的想法到具體的圖
今天我們學習了線稿圖這個超級實用的工具。它幫助我們把腦中模糊的想法變成具體的圖形，為後續的設計和開發鋪平了道路。
通過繪製線稿圖，我不僅更清楚地看到了「鸚鸚食堂」的樣子，還意外學到了鸚鵡的食量計算方法！這再次證明，在開發過程中，我們總是能學到意想不到的新知識。
記住，線稿圖的重點不在於美觀，而在於清晰地表達你的想法。所以不要怕畫得不夠漂亮，重要的是把你的構想表達出來！
好啦，今天的分享就到這裡。如果你對線稿圖有什麼想法，或是有什麼不懂的地方，歡迎在下面留言跟我討論喔！我們明天見～掰掰！
希望這篇文章有幫助到你，謝謝你的觀看，若有想看的系列也歡迎告訴我 😉