中文總教學 1:pxCode 是什麼?

更新於 發佈於 閱讀時間約 3 分鐘
總的來說,pxCode 的目標,以及想要解決的問題就是切版。
「列出切版的痛點」和「pxCode的好處」

「列出切版的痛點」和「pxCode的好處」

為什麼使用 pxCode?

1. 【優化生產力與溝通效率 Efficiency】

目前在市面上,並沒有什麼有效的切版工具,幾乎都必須經歷耗時的「手動切版」。這是非常煎熬、也消耗時間的,並且需要大量的溝通。pxCode 提供了有效的切版介面,讓我們可以在短時間內產出完善的響應式網頁(RWD)。

2. 【像素精準品質 不會跑版 Pixel Perfect】

pxCode 的誕生,幫助你的切版效率,提高生產力。我們甚至可以直接在編輯器上編輯 RWD、甚至預覽 RWD,提供多種快速完成切版的功能。因此可以說,在 pxCode 進行切版,就是可以達到精準的象素,且不會跑版。

3. 【產出易理解可維護的程式碼 Clean Code】

另外,pxCode 也堅持所生產出來的程式碼是清楚且可以維護的。我們也知道,AI(人工技術) 所生產的程式碼是並不是完全精確的,而且 RD(網頁開發師)接手之後也不能改,這對切版並沒有幫助。

因此為了達到產出可以維護使用的程式碼,我們提供簡單的方法讓使用者去自行編輯。

pxCode 的切版流程

pxCode 的切版流程

【編輯流程簡介】

在 pxCode 裡,我們支援 Sketch 和 Figma。導入設計稿進行編輯之後,就會自動產生 HTML 和 CSS 的程式碼。

【切版概念】

一個 Figma 或 Sketch 設計稿原本是定稿的,而我們在 pxCode 裡就必須讓他變成彈性變化的狀態,也就是所謂的 RWD。因此,當產出的網頁在不同解析度的裝置上時,都可以讓內容進行配合,呈現一個舒服的網頁視覺狀態。

**其中,當我們將設計稿導入 pxCode 後,所有內容元件的結構都會自動被攤平。這個原因是,雖然設計稿在設計軟體裡已有本身的結構,不過為了產生最好的結構(HTML程式碼),我們決定讓使用者在 pxCode 進行一個結構整理,來達到最完好的程式碼狀態。

因此簡單而言,就是將【絕對定位的設計稿】轉化成【有結構且適配的網頁程式】。

-

【關注 pxCode】
FB:https://www.facebook.com/pxCode
Medium:https://medium.com/pxcode
官網:https://www.pxcode.io/




留言
avatar-img
留言分享你的想法!
avatar-img
pxCode Team的沙龍
8會員
8內容數
以全中文介紹 pxCode 的內部功能,並進行細節的分段教學。
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
你看的出來這張圖片的上下紋路有何不同嗎?這是我把兩張同樣的圖片接在一起,你可以放大來看紋路都是一樣的,差別只在於其中一個步驟採用別的方式,但是在結果上卻產生肉眼可見的差異,這一篇會先解釋我在圖像運算上的理解,後半段則說明如何運用在寫作上。
Thumbnail
你看的出來這張圖片的上下紋路有何不同嗎?這是我把兩張同樣的圖片接在一起,你可以放大來看紋路都是一樣的,差別只在於其中一個步驟採用別的方式,但是在結果上卻產生肉眼可見的差異,這一篇會先解釋我在圖像運算上的理解,後半段則說明如何運用在寫作上。
Thumbnail
在pxCode裡,只要有了Posize+Flex,無論什麼樣的設計稿,都可以用最有效率的方式進行切版編輯,大大提升了效率。
Thumbnail
在pxCode裡,只要有了Posize+Flex,無論什麼樣的設計稿,都可以用最有效率的方式進行切版編輯,大大提升了效率。
Thumbnail
你或許會好奇,為什麼早已在設計軟體完成的設計稿,還要進行修正?—— 沒錯,因為這中間的切換,經常會有元件不適應(也可能是設計稿本身)的問題。
Thumbnail
你或許會好奇,為什麼早已在設計軟體完成的設計稿,還要進行修正?—— 沒錯,因為這中間的切換,經常會有元件不適應(也可能是設計稿本身)的問題。
Thumbnail
在 pxCode 裡,我們支援 Sketch 和 Figma。導入設計稿進行編輯之後,就會自動產生 HTML 和 CSS 的程式碼。
Thumbnail
在 pxCode 裡,我們支援 Sketch 和 Figma。導入設計稿進行編輯之後,就會自動產生 HTML 和 CSS 的程式碼。
Thumbnail
沒有PS、AI的基礎,也想要快速製作一張張屬於自己的網站圖片嗎?或是只想花少少的時間,就完成圖片的編輯及上架嗎?你需要的是這5款免費線上編輯、壓縮及去背軟體;這次TinyBook 將會向大家介紹,2021年推薦的線上圖片編輯工具及使用流程,讓沒有設計底子的你,也可以快速完成圖片製作哦!
Thumbnail
沒有PS、AI的基礎,也想要快速製作一張張屬於自己的網站圖片嗎?或是只想花少少的時間,就完成圖片的編輯及上架嗎?你需要的是這5款免費線上編輯、壓縮及去背軟體;這次TinyBook 將會向大家介紹,2021年推薦的線上圖片編輯工具及使用流程,讓沒有設計底子的你,也可以快速完成圖片製作哦!
Thumbnail
Step1. 開啟範例練習檔,為文字圖層加上斜角浮雕效果,設定樣式:內斜角、技術:雕鑿硬邊、尺寸:43像素、光澤輪廓選擇如圖、亮部模式不透明:52%。 Step2. 新增圖層1,按住Ctrl、滑鼠點取文字圖層建立文字選取區,執行 [ 選取> 修改> 擴張]選取區擴張2像素,同樣在選取區內填入#8
Thumbnail
Step1. 開啟範例練習檔,為文字圖層加上斜角浮雕效果,設定樣式:內斜角、技術:雕鑿硬邊、尺寸:43像素、光澤輪廓選擇如圖、亮部模式不透明:52%。 Step2. 新增圖層1,按住Ctrl、滑鼠點取文字圖層建立文字選取區,執行 [ 選取> 修改> 擴張]選取區擴張2像素,同樣在選取區內填入#8
Thumbnail
利用形狀繪圖工具,並搭配變形處理,完成具立體感的影像繪圖。 STEP1. 開啟新檔選擇網頁,寬高均為500像素、解析度72像素/英吋,並取消工作畫板選項。 執行【檢視>尺標】在尺標刻度上按下滑鼠右鍵,選擇執行【像素】,即是將介面設定值單位固定為像素單位。 STEP2. 在圖層上新增圖層1,使用
Thumbnail
利用形狀繪圖工具,並搭配變形處理,完成具立體感的影像繪圖。 STEP1. 開啟新檔選擇網頁,寬高均為500像素、解析度72像素/英吋,並取消工作畫板選項。 執行【檢視>尺標】在尺標刻度上按下滑鼠右鍵,選擇執行【像素】,即是將介面設定值單位固定為像素單位。 STEP2. 在圖層上新增圖層1,使用
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News