章節連結
近期於前端開發時常會被 PM 要求先提個 Mockup 來看看呈現效果之類的。有鑑於公司目前的人力配置一直沒有規劃到 UI / UX 這個領域,那就自己下來碰碰看吧。這篇筆記的是六角學院的 UI 設計入門:畫出有程式邏輯的設計稿 中關於 Spec 設計標註檔。
課程相關資訊
[連結]:https://courses.hexschool.com/courses/724307/lectures/13101904
本篇範圍:Chapter 9 ( 與工程師協作的必要文件 ) ,一共有 13 篇
請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。
筆記
1. 設計標註檔會附上介面中所有元件的尺寸和樣式細節
2. 若是透過專業工具如 Adobe XD, Figma…等,工程師可以透過滑鼠獲取相關的開發訊息。如:盒種網格系統、間距、標準色、字型樣式…等
3. 專業工具也會提供所見即所得的功能,將相關元件的 CSS 部分顯示出來,讓工程師得以方便複製使用
系列文章
延伸閱讀
- [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (39)
- [筆記] 六角學院 Node.js 2022 直播班記錄 – 11 Mongoose 實作運用
- [筆記] Ultimate AWS Certified Developer Associate (27)
- [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (38)
- [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (37)