解決Web前端開發的痛點-前端網頁開發技術應用案例(下)
繼上一篇章，介紹三大前端網頁技術：No-Code Tool (無程式碼工具)、Hand-Coding (手寫程式碼)、design-to-code(設計轉碼)後，本文章深入介紹design-to-code之應用案例，幫助設計師與工程師解決Web前端開發相關議題。
圖1 三大前端網頁技術
資料來源：本文作者整理
一般使用design-to-code的方法，建議在專案的早期階段進行需求訪談，邀請設計師和規劃師一同參與，以確保設計稿符合客戶的期望並達成共識。接著，透過工具將設計稿轉化為可程式化的代碼，開發人員可以直接使用這些代碼作為起點，來進行商業邏輯和架構的開發。這樣做可以使設計和開發之間的合作更加流暢，同時減少了溝通和修改的成本。
應用design-to-code之案例
以下分享團隊應用design-to-code於專案之案例，從四大部分來分析，分別是(1)功能和準確性；(2)程式碼品質及彈性；(3)響應式設計及(4)學習曲線，以說明實現更敏捷的前端開發。
(一)功能和準確性
將設計師提供的Figma（設計和協作工具）設計稿，分別匯出至Anima、pxCode和Locofy這三個工具，發現都能將設計稿準確地轉換為網頁，共測試了React.js、Vue和純HTML三個框架的版本。令人驚喜的是，這些轉換結果在視覺上完全符合預期，沒有出現任何跑版的情況，因此從轉換面向來看，這三個工具幾乎沒有什麼差異。其中，Anima幾乎不需要進行編輯就能快速匯出HTML，因其應用人工智能一鍵取得程式碼即可完成前端開發。
圖2 Anima一鍵轉換介面
資料來源：本文作者整理
(二)程式碼品質及彈性
Anima的一鍵轉換功能帶來了優點，但同時也有其限制。快速轉換導致生成單一Flexbox結構程式碼，無法靈活地指定輸出結果。單一Flexbox結構程式碼在響應式設計中會帶來一些侷限與挑戰。
圖3 設計有各種結構，正確與否取決於響應式需求
資料來源：本文作者整理
雖然Anima可以透過建立群組來調整結構，但要求設計師在設計稿中建立群組是一件不容易的事，因設計師通常有自己的習慣和方法來組織設計。同時，若要求設計師結構與切版結構得完全一致，這對設計師來說更是一項巨大挑戰。從專案分工角度來說，我們應該讓設計師專注於使用者的視覺美學體驗，而不應該讓他們為了工具而增加工作的複雜度。
Locofy也有和Anima類似問題，這兩個工具都非常依賴設計稿的正確結構，因編輯工具無法再調整結構，使用上較不具彈性。
圖4 Locofy亦無法在編輯器中改變結構
資料來源：本文作者整理
面對無法改變結構的問題，pxCode提供了一個解決方案。pxCode與其他兩個工具有完全不同的思維方式。當設計稿匯入到pxCode時，所有結構都會被展開，而且pxCode提供了強大的工具，可以自由重新結構整個設計，並根據需求進行結構化。
雖然pxCode是這三個工具中操作步驟最多的軟體，但它生成的程式碼具有最高的可用性。修正錯誤的結構所需的時間比重新結構的時間要多得多，因此pxCode的方法較具實用性，且具有很高的可客製化程度。
圖5 pxCode結構頁面
資料來源：本文作者整理
(三)響應式設計
響應式設計隨著智慧型手機興起變得非常重要，是一種讓網站或應用程式能夠自動適應不同設備和螢幕大小的設計方法。必須考慮到使用者可能使用桌面電腦、平板電腦、手機、其他各種設備。可分為兩種主要方法：Responsive Web Design（RWD）和Adaptive Web Design（AWD）。
RWD使用一套HTML結構，並使用CSS的媒體查詢（media query）來實現響應式效果。雖然這種方法開發難度較高，但最大的優點是工程師只需要維護一套結構的程式碼，而不需要像AWD那樣維護多套程式碼。
AWD則是根據不同的解析度使用不同的結構來實現樣式切換。這種方法相對較簡單，但需要維護多套程式碼，可能導致程式碼的複雜性增加。
雖然RWD具有較高的開發難度，但在長期維護和擴展性方面具有明顯的優勢，因為它只需要維護一套結構的程式碼。根據個人或團隊的需求和偏好，可以選擇適合的方法來實現響應式設計。
接下來，比較三個工具之間於響應式設計的差異。
- Anima完全不支援RWD，而是完全依賴AWD來實現響應式設計。這導致整合程式碼和工作量比其他兩種工具多出許多。原因在於Anima希望提供一鍵生成程式碼的便利性，但目前的人工智能技術尚無法處理響應式設計的複雜性。
圖6 Anima 只支援 AWD 不支援 RWD
資料來源：本文作者整理
- Locofy能夠實現 RWD 和 AWD，但編輯體驗有限制。原因在於 Locofy的編輯器直接嵌入在 Figma 中，而 Figma 本身無法模擬響應式的效果，這使得編輯體驗無法做到所見即所得，導致不便響應式設計。
圖7 Locofy 調整響應式無法做到所見即所得
資料來源：本文作者整理
- pxCode 能夠實現 RWD 和 AWD，並且具備獨立的編輯器，讓使用者可以進行所見即所得的編輯體驗。這種編輯方式類似於 Webflow 和 Elementor，功能也非常完整。使用 pxCode，你可以輕鬆編輯響應式行為，並且可以像使用 Bootstrap Grid 和 CSS Grid 一樣進行編輯，讓你難以想像這些視覺元素實際上是從 Figma 匯入的。pxCode 的編輯器提供了完善功能，能夠靈活地調整和定制設計的響應式行為。這種編輯方式使得設計師和開發人員可以更輕鬆地掌握網頁的外觀和響應式特性，同時還能保持程式碼的高效性和可維護性。
圖8 pxCode 能與 Bootstrap 相容
資料來源：本文作者整理
圖9 pxCode可到inner調整 Flexbox
資料來源：本文作者整理
綜合以上，pxCode 不僅能夠實現 RWD 和 AWD，而且提供了直觀易用的編輯器，可輕鬆編輯和調整設計的響應式行為，有效地轉換從 Figma 匯出的設計稿成為具有響應式能力的網頁。
(四)學習曲線
就學習難易度來說，Anima 容易上手，因為只需點擊一下按鈕即可完成匯出。然而，這也意味著它的使用範圍受到限制，因為它主要依賴純粹的人工智慧技術。對於 Locofy 和 pxCode，學習曲線較為陡峭，需花時間才能掌握，不過只要願意投入時間學習，這兩個工具都具有強大的編輯功能。特別是 pxCode，它可以建立 React 元件並定義 props，以便重複使用。此外，它還可以將設計元素替換為第三方已經設計好的套件，如 Ant Design、Element UI、Swiper、Bootstrap UI 等等，這些功能使得 pxCode 提供更靈活設計和使用組件，利於編輯和設計響應式網頁，促進敏捷開發。
善用design-to-code工具 提升團隊溝通效率
隨著網頁設計和開發的不斷發展，越來越多的工具和技術出現，其中最主要的趨勢是 design-to-code 工具的興起。這些工具改變了設計師和開發人員之間的工作流程，並加速從設計到實際網頁的轉換過程。它們有助於降低專案風險，實現敏捷開發，並提升團隊間的溝通效率。選擇優秀的解決方案導入專案，絕對可以事半功倍。我們相信並期待 Anima、Framer、pxCode 和 Locofy 等工具繼續優化，協助工程師或前端開發者提高工作效率，發展更好的產品與網頁開發過程。
參考資料
延伸閱讀
作者相關文章