3萬用戶認可，pxCode如何解決網頁設計師痛苦的「切版」問題？

隨著瀏覽裝置越來越多元，網頁內容為了能在各個不同尺寸的裝置上完美呈現，「響應式網頁（RWD, Responsive Web Design）」是近幾年打造網頁時追求的設計目標。然而，要將響應式網頁製作出來並不容易，目前的唯一做法只有仰賴工程師進行「切版」，將原本的網頁切割成多個元素、寫程式並且重新編排，過程相當麻煩耗時。

「我一直在想，都要2023年了，切版怎麼還要一個一個刻出來，這麼辛苦、這麼痛苦？」pxCode創辦人張鑑泉說。這是身為工程師的他親身經歷的困擾，也是他與同事謝碩峯創辦pxCode的起點。

於是，在他們打造的pxCode平台中，把原先冗長的切版過程，簡化成只要簡單3個步驟就能精準完成響應式網頁，不只不必再手動寫程式，還能實現即時溝通、修正與測試，將整體效率提升至少10倍以上。

pxCode_2022_09_29_蔡仁譯攝-1 (3).jpg pxCode共同創辦人暨執行長張鑑泉（圖中）、共同創辦人暨技術長謝碩峯（圖右）與設計總監徐慶鐘（圖左）。攝影／蔡仁譯

響應式網頁只能靠手動切版，流程低效率、耗成本又難溝通

為什麼所有網站設計都在追求響應式網頁？

一個好理解的比喻是，將網站內容想成「水」，用戶瀏覽網站時使用的裝置就是「容器」。響應式網頁能讓網站像水一樣，不論進到什麼容器，都能直接轉換成符合規格的型態，讓瀏覽者在電腦、手機或平板上都能擁有最舒適的字體大小、最美觀的排版等最佳體驗。

但是要做出響應式網頁，只能請工程師手動切版，也就是工程師需照著設計師的要求，手寫程式來刻出不同尺寸的網頁模樣，比如網頁邊框和文字資訊之間的間隔需要幾個像素，或是同一張圖片在不同螢幕的尺寸像素等，就像雕刻一樣，得一刀刀雕塑出最終成品。

然而，這會導致整個網站開發過程變得很不流暢。張鑑泉舉例，普遍程序是先由設計師提供3到5個描述響應式行為（例如「平板上要如何排版」或「手機上哪邊的字體大小要改變」）的設計稿，接著交由前端工程師寫程式，光這段過程往往就得來回溝通好幾次，基本上得耗時1個月以上，才能做出真正符合設計師期望的成品。

而好不容易交出成品後也還沒結束，需要再由測試工程師檢查能否在各個裝置順利瀏覽，如果這時發現出錯或有任何狀況，又得再找來前端工程師去找出問題、重新寫程式，整個過程相當低效。

除了低效率的問題之外，對工程師本身而言，手動切版的過程也十分麻煩。也是因此，大多工程師進行響應式網頁時，只會提供適配電腦與手機2種尺寸的版本，其餘的螢幕尺寸則則無法一體適用。

從事軟體業15年跳出來創業，從親身痛點找出方向

張鑑泉與謝碩峯在創業前就是軟體專業背景，兩人曾任職友立資訊、HTC、獵豹移動等公司多年，起初懷著對軟體的熱忱，便決定嘗試自己跳出來創業開發產品。

張鑑泉分享，其實一開始他們只想著要從軟體出發，但一連想了幾個題目，都沒有十足信心能切合市場需求，光是找方向就花了一年的時間。直到他們轉換思維，才發覺與其從沒有把握的假想出發，去想像別人需要什麼，不如直接先以自身經驗作為起點，就能更精準地看清痛點輪廓。

而當兩人決定從自身經驗下手，第一個想到的軟體作業困擾，就是手動切版的不便，有了這個念頭後，當時又正好碰上Figma、Sketch等軟體設計工具越來被廣泛使用，看準時機成熟、市場夠大，產品瞄準的方向也終於確立——徹底翻轉痛苦的切版過程，讓建立響應式網頁不再是一件麻煩活。

不用再手寫程式切版，讓開發響應式網頁像做簡報一樣簡單

pxCode是改善手動切版一切缺點的解決方案，將響應式網頁的開發過程極致簡化：

將網站設計稿上傳後，系統會自動偵測該網頁的所有物件，並將其攤平成可選取的素材列表。
根據網頁排版的3種規則——「直式」、「橫式」或類似貼紙概念的「絕對定位」，將網站內容的物件一一按照系統指示群組起來。

當系統提示的「待編輯的元素」通通處理完畢後，即完成編輯，將生成可維護和理解的程式碼。

張鑑泉表示，pxCode將響應式網頁的開發步驟變得無比容易，在他們的私人測試中，即使是完全沒有寫程式背景的人，只要花個2天學習、3天練習，就能完全上手。平均來說，與手動切版相比，pxCode至少能節省10倍以上的時間，如果本身有軟體專業背景，甚至能高出20倍的效率。

另外，pxCode支援直接在平台上預覽網站在各種裝置呈現的樣貌，有需修改時直接回到編輯區修正即可，能讓設計師和工程師做到即時溝通；最後，當檔案確認無誤後，pxCode會生成出可編輯維護、適用多重裝置的高品質程式碼，由於是直接拿設計稿來改，能確保精準像素不跑版，同時具有跨瀏覽器高相容、適用多重裝置特性，免去測試成本。

支援Figma、Sketch兩大網頁設計工具，全球累積3萬用戶使用

pxCode於2021年上線，只要是由Figma與Sketch生成的網頁設計稿，就可直接上傳到pxCode轉換成可開發響應式網頁的狀態。目前pxCode開放免費註冊使用，至今全球用戶超過3萬人，主要的客群來自台灣、美國、印度與俄羅斯。

張鑑泉表示，過去一年來，pxCode專注累積用戶數量，並不斷改善功能，以確定產品確實能打中受眾的需要。舉例來說，在3、4個月前的版本中，pxCode的切版邏輯是「由上至下、由大至小」，操作時由系統自動判斷組合建議，使用者只要不斷按確認就好，但該版本才上線沒多久，他們就發現這種模式適用的設計稿相當有限，才再度修正，改成目前的操作方式。

商業模式部分，張鑑泉表示，不久前他們剛針對企業客戶推出專屬付費方案，現已有4、5家客戶訂閱使用，至於其餘個人用戶，目前也已累積到一定的使用數量，計畫近期就會將推出訂閱方案，提供使用者付費解鎖更完善的功能。