成果範例
Dental clinic home page built from its design
Before: the design the client sent
After: the working page
Files: a ZIP archive with index.html, the styles and 2 pictures for the page, ready to upload to the client's hosting. The pictures here are screenshots of the page.
Client: Bright Smile Dental. Task: turn the home page design into a working HTML page with the same layout, colours and texts, and booking buttons that call the clinic.
客戶與所有細節皆為虛構。
關於此服務
您的設計已在 Figma 完成，現在需要把它變成可運作的網頁。請以 1x 或 2x 將畫面（frame）匯出為 PNG 並上傳，我們會用 HTML 與 CSS 製作：相同的區塊、網格、間距、色彩與按鈕，文字是真正的文字，而不是文字的圖片。如果您有手機版畫面，我們會依照它製作；沒有的話，則依桌面版畫面製作手機版。我們無法開啟 .fig 檔案或 Figma 連結，因此圖層、元件、變體與原型連結都不會被讀取：匯出圖中看不到的內容，例如滑鼠移上去時的顏色，請寫在需求說明中。除非您上傳照片，否則照片會重新繪製。不含動畫、後端、CMS 或主機服務。
包含內容
- 您會拿到什麼一個 ZIP 壓縮檔，內含頁面、樣式與圖片，可直接上傳到您的主機；訂單頁面上也能預覽每一頁。
- 忠於您的畫面區塊、網格、間距、色彩與字級皆依匯出圖呈現
- 手機版依據您的手機版畫面，或由桌面版畫面製作
- 真正的文字標題與段落以搜尋引擎能讀取的 HTML 呈現
- 使用您提供的圖片另外匯出的照片與圖示會原樣放入；其餘則重新繪製
- 乾淨的程式碼純 HTML 與 CSS，沒有框架，也不會從其他網站載入任何內容
服務流程
- 1匯出您將畫面匯出為 PNG、上傳，並註明圖中看不到的內容
- 2製作我們建置頁面，並繪製缺少的圖片
- 3預覽與壓縮檔您在電腦和手機上將頁面與設計稿比對，下載壓縮檔，並可在方案範圍內提出修改
需要您提供的資料
最多 5 張 PNG、JPEG 或 WebP 圖片：從 Figma 以 1x 或 2x 匯出的畫面，每個檔案一個頁面；另可附上另外匯出、要原樣使用的照片、插圖或標誌。請說明哪個畫面對應哪個頁面、使用的字型名稱、匯出圖中沒有呈現的滑鼠移上或展開狀態，以及每個按鈕要連到哪裡。不接受 .fig 檔案或 Figma 連結。
我們會詢問您：
- 哪個畫面對應哪個頁面？
- 設計中使用的字型
- 匯出圖中沒有呈現的狀態
- 每個按鈕要連到哪裡？
- 設計是您的嗎？
比較方案
付款保障
下單時付款，但只有在驗收成果後，款項才會撥付。
- 固定價格付款後，方案價格不會變動。
- 款項先行保留付款時，金額只會先保留，在您驗收後才會撥付給服務。
- 交付前檢查每份成果在交到您手上之前都會經過品質檢查，您也可以在驗收前於訂單頁面查看成果。
- 免費修改在需求說明範圍內，可依方案允許的次數提出修改。
- 3 天後自動驗收若您在交付後 3 天內未驗收也未提出修改，成果將自動驗收。若您在交付後於訂單聊天室留言，訂單會暫停自動驗收；我們回覆後，可能會重新起算 3 天，並會在聊天室中告知。
- 重新製作或全額退款若成果不符合您的需求說明且修改後仍未改善，或製作時間超過交付期限的兩倍，請在訂單聊天室留言：我們將重新製作，或全額退還款項。
常見問題
如何從 Figma 匯出？
選取畫面（frame），在右側面板的 Export 區塊新增匯出設定，選擇 1x 或 2x 的 PNG，再按下 Export。長頁面可以是一個很高的畫面；特別高的畫面用 1x 匯出效果更好。
可以直接用我的 Figma 連結嗎？
不行，我們只處理上傳的圖片，不處理連結或 .fig 檔案，也不會登入您的帳號。
會使用我的字型嗎？
由於不會從其他網站載入任何內容，頁面會使用外觀接近的系統字型。請告訴我們字型名稱，我們會挑選最接近的；如果授權允許，之後您也可以自行加入網頁字型檔案。
能與我的設計稿一模一樣嗎？
版面、色彩、尺寸與區塊順序會非常接近，但無法精確到像素：字型是相近的系統字型，而且除非您上傳自己的照片，否則照片會重新繪製。修改功能可以調整您在意的地方。
原型的互動會運作嗎？
連結、按鈕與手機版選單可以運作。原型流程、浮層、動畫與轉場效果不包含在這項服務內。
沒有找到您要的答案？