To-Do Calendar - Day4 網頁布局
這次是使用 Mockingbird ，來規劃版面設計與操作流程。
過去都有 UI / UX 設計師畫好視覺稿，做好 RWD，我再接著套 Vue、串 API，難得有機會從生畫面開始還挺有趣的，也發現一些設計時沒想到的盲點。像是登入是切到登入頁還是彈窗處理？如果進到設定頁是否有導覽列可以再回到別頁？編輯資料後是即時更新還是按儲存後才更新？各頁面相同行為的操作邏輯和元件樣式是否一致？列表的資料從哪裡撈？如果在草稿階段就能把這些操作流程、資料來源都規劃清楚，後面開發就會省事很多。
在線工具 Mockingbird
Mockingbird 是針對網頁的 Mockup 工具，提供的 UI 模型大部分都有對應到 Bootstrap 元件，方便把腦中抽象的想法，用簡單的線框圖拖曳排版、對齊，也有圖層（置前/置後/鎖）、頁面預覽功能，最大優點是免費+不用註冊+線上就能使用！
畫面草稿
以下是自我流版面排法，就是拉個大概位置+註記功能+操作流程，之後就可以照著草稿來刻畫面啦～
（備註：不用彈窗的操作都採即時更新）
功能地圖
有了畫面，就比較好盤點專案所有需要的功能，這邊畫了 Functional map，將第0天初列的功能清單再補更完整，提醒自己之後開發不要走偏（亂加不重要的功能），或在某個功能鑽研太久…😪
