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

更新 發佈閱讀 3 分鐘
總的來說,pxCode 的目標,以及想要解決的問題就是切版。
vocus|新世代的創作平台

為什麼使用 pxCode?

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

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

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

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

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

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

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

vocus|新世代的創作平台

【編輯流程簡介】

在 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
pxCode Team的沙龍
8會員
8內容數
以全中文介紹 pxCode 的內部功能,並進行細節的分段教學。
你可能也想看
Thumbnail
在 pxCode 裡,我們支援 Sketch 和 Figma。導入設計稿進行編輯之後,就會自動產生 HTML 和 CSS 的程式碼。
Thumbnail
在 pxCode 裡,我們支援 Sketch 和 Figma。導入設計稿進行編輯之後,就會自動產生 HTML 和 CSS 的程式碼。
Thumbnail
你看的出來這張圖片的上下紋路有何不同嗎?這是我把兩張同樣的圖片接在一起,你可以放大來看紋路都是一樣的,差別只在於其中一個步驟採用別的方式,但是在結果上卻產生肉眼可見的差異,這一篇會先解釋我在圖像運算上的理解,後半段則說明如何運用在寫作上。
Thumbnail
你看的出來這張圖片的上下紋路有何不同嗎?這是我把兩張同樣的圖片接在一起,你可以放大來看紋路都是一樣的,差別只在於其中一個步驟採用別的方式,但是在結果上卻產生肉眼可見的差異,這一篇會先解釋我在圖像運算上的理解,後半段則說明如何運用在寫作上。
Thumbnail
在pxCode裡,只要有了Posize+Flex,無論什麼樣的設計稿,都可以用最有效率的方式進行切版編輯,大大提升了效率。
Thumbnail
在pxCode裡,只要有了Posize+Flex,無論什麼樣的設計稿,都可以用最有效率的方式進行切版編輯,大大提升了效率。
Thumbnail
利用形狀繪圖工具,並搭配變形處理,完成具立體感的影像繪圖。 STEP1. 開啟新檔選擇網頁,寬高均為500像素、解析度72像素/英吋,並取消工作畫板選項。 執行【檢視>尺標】在尺標刻度上按下滑鼠右鍵,選擇執行【像素】,即是將介面設定值單位固定為像素單位。 STEP2. 在圖層上新增圖層1,使用
Thumbnail
利用形狀繪圖工具,並搭配變形處理,完成具立體感的影像繪圖。 STEP1. 開啟新檔選擇網頁,寬高均為500像素、解析度72像素/英吋,並取消工作畫板選項。 執行【檢視>尺標】在尺標刻度上按下滑鼠右鍵,選擇執行【像素】,即是將介面設定值單位固定為像素單位。 STEP2. 在圖層上新增圖層1,使用
Thumbnail
Step1. 開啟範例練習檔,為文字圖層加上斜角浮雕效果,設定樣式:內斜角、技術:雕鑿硬邊、尺寸:43像素、光澤輪廓選擇如圖、亮部模式不透明:52%。 Step2. 新增圖層1,按住Ctrl、滑鼠點取文字圖層建立文字選取區,執行 [ 選取> 修改> 擴張]選取區擴張2像素,同樣在選取區內填入#8
Thumbnail
Step1. 開啟範例練習檔,為文字圖層加上斜角浮雕效果,設定樣式:內斜角、技術:雕鑿硬邊、尺寸:43像素、光澤輪廓選擇如圖、亮部模式不透明:52%。 Step2. 新增圖層1,按住Ctrl、滑鼠點取文字圖層建立文字選取區,執行 [ 選取> 修改> 擴張]選取區擴張2像素,同樣在選取區內填入#8
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
你或許會好奇,為什麼早已在設計軟體完成的設計稿,還要進行修正?—— 沒錯,因為這中間的切換,經常會有元件不適應(也可能是設計稿本身)的問題。
Thumbnail
你或許會好奇,為什麼早已在設計軟體完成的設計稿,還要進行修正?—— 沒錯,因為這中間的切換,經常會有元件不適應(也可能是設計稿本身)的問題。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
沒有PS、AI的基礎,也想要快速製作一張張屬於自己的網站圖片嗎?或是只想花少少的時間,就完成圖片的編輯及上架嗎?你需要的是這5款免費線上編輯、壓縮及去背軟體;這次TinyBook 將會向大家介紹,2021年推薦的線上圖片編輯工具及使用流程,讓沒有設計底子的你,也可以快速完成圖片製作哦!
Thumbnail
沒有PS、AI的基礎,也想要快速製作一張張屬於自己的網站圖片嗎?或是只想花少少的時間,就完成圖片的編輯及上架嗎?你需要的是這5款免費線上編輯、壓縮及去背軟體;這次TinyBook 將會向大家介紹,2021年推薦的線上圖片編輯工具及使用流程,讓沒有設計底子的你,也可以快速完成圖片製作哦!
Thumbnail
約莫是大二最後一個課題開始,拋棄了手上的工程筆,嘗試利用數位軟體輔助設計的進行,如今無倫是應付學業,實習工作,玩攝影畫插圖,都離不開電腦,製圖桌也就此被封印。
Thumbnail
約莫是大二最後一個課題開始,拋棄了手上的工程筆,嘗試利用數位軟體輔助設計的進行,如今無倫是應付學業,實習工作,玩攝影畫插圖,都離不開電腦,製圖桌也就此被封印。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News