最簡單的前端切版工具!——只要掌握這四個編輯功能,就可以輕鬆RWD

更新於 發佈於 閱讀時間約 2 分鐘

身為一個前端工程師&設計師,不管你屬於前者或後者,我們都相信,你一定都曾經尋找過更快速的方法,去將手中的設計稿,編輯成擁有多種程式碼的RWD響應式網站(Responsive Web Design)。

而這一篇文中,就將對此分享我們所設計的一個全新編輯工具——pxCode

raw-image

透過Figma/Sketch將檔案直接輸出,並導入pxCode之後,pxCode就會提供許多獨創的視覺編輯方式,讓甚至沒有任何資訊或設計背景的用戶,都可以輕易上手——(這句話是真的喔)

然而,我們都知道,要在最有效率的時間下完成切版,有兩個方式:
一、技術強大
二、掌握工具

而pxCode作為一個致力於提供最快速切版方法的工具,裡頭也設計了最有效率的功能介面。因此只要在掌握了pxCode所設計的功能,基本上就可以很大幅度地提升切版速度。

在這篇文中,將會重點介紹網pxCode裡,使用者介面的四大功能項目,分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas

.

➤ pxCode 使用者介面:只要個編輯工具,你就可以完成 RWD


如此一來,掌握了功能細項,不只是讓你免去寫程式的困擾,還用視覺編輯的方式,讓你比其他人快個10倍!

歡迎收看以上這支教學影片,並提出任何疑惑,我們都會為你解決。 ;)

⏱ Timeline:

🔵 0:06:編輯介面
.
🔵 0:21:導覽列 Navigator
🔵 0:39:屬性 Inspector
🔵 0:47:排版類屬性
🔵 1:01:樣式類屬性
🔵 1:16:工具列 Toolbar
🔵 2:13:編輯區 Editing Canvas
.
🔵 2:54:總結

.

📲 歡迎任何問題與合作邀約: pxCode官方網站, Facebook, YouTube

留言
avatar-img
留言分享你的想法!
avatar-img
pxCode Team的沙龍
8會員
8內容數
以全中文介紹 pxCode 的內部功能,並進行細節的分段教學。
pxCode Team的沙龍的其他內容
2022/01/28
在pxCode裡,只要有了Posize+Flex,無論什麼樣的設計稿,都可以用最有效率的方式進行切版編輯,大大提升了效率。
Thumbnail
2022/01/28
在pxCode裡,只要有了Posize+Flex,無論什麼樣的設計稿,都可以用最有效率的方式進行切版編輯,大大提升了效率。
Thumbnail
2022/01/28
你或許會好奇,為什麼早已在設計軟體完成的設計稿,還要進行修正?—— 沒錯,因為這中間的切換,經常會有元件不適應(也可能是設計稿本身)的問題。
Thumbnail
2022/01/28
你或許會好奇,為什麼早已在設計軟體完成的設計稿,還要進行修正?—— 沒錯,因為這中間的切換,經常會有元件不適應(也可能是設計稿本身)的問題。
Thumbnail
2022/01/26
在pxCode裡,和其他編輯工具的共同點.,就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整,都必須先把結構(既HTML)的基礎打好。
Thumbnail
2022/01/26
在pxCode裡,和其他編輯工具的共同點.,就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整,都必須先把結構(既HTML)的基礎打好。
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
  編輯器是寫XQ最核心的位置,在開始學習時若能清楚知道這邊每個功能,相信往後寫程式時會順利許多,接來下我將解說XQ編輯器常見的使用與說明,希望新手朋友能好好了解。 Step1我們先找到XS編輯器的位置 Step2-瞭解XS編輯器各位置的功能是甚麼 上述的附圖與註解是幾個Xscipt編輯器比
Thumbnail
  編輯器是寫XQ最核心的位置,在開始學習時若能清楚知道這邊每個功能,相信往後寫程式時會順利許多,接來下我將解說XQ編輯器常見的使用與說明,希望新手朋友能好好了解。 Step1我們先找到XS編輯器的位置 Step2-瞭解XS編輯器各位置的功能是甚麼 上述的附圖與註解是幾個Xscipt編輯器比
Thumbnail
這是教你插入野頁碼從簡報的第3頁開始為編碼第1頁, 我把第2頁設計成目錄頁我不想讓他有編碼,所以從第3頁開始,這樣有懂嗎?呵呵 首先到最上方的功能選項 [ 插入 ]然後 [ 頁首及頁尾 ] ☑勾選投影片編號 ☑標題投影片中不顯示 然後按全部套用 再來到功能選項的 [ 設計 ] 然後 [ 投影片大小
Thumbnail
這是教你插入野頁碼從簡報的第3頁開始為編碼第1頁, 我把第2頁設計成目錄頁我不想讓他有編碼,所以從第3頁開始,這樣有懂嗎?呵呵 首先到最上方的功能選項 [ 插入 ]然後 [ 頁首及頁尾 ] ☑勾選投影片編號 ☑標題投影片中不顯示 然後按全部套用 再來到功能選項的 [ 設計 ] 然後 [ 投影片大小
Thumbnail
這篇文中,將會重點介紹網pxCode裡,使用者介面的四大功能項目,分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas
Thumbnail
這篇文中,將會重點介紹網pxCode裡,使用者介面的四大功能項目,分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas
Thumbnail
在pxCode裡,和其他編輯工具的共同點.,就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整,都必須先把結構(既HTML)的基礎打好。
Thumbnail
在pxCode裡,和其他編輯工具的共同點.,就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整,都必須先把結構(既HTML)的基礎打好。
Thumbnail
對於剛入門的新手來說,有一些細節概念或許不是那麼清楚的,例如說什麼時候應該做出怎麼樣的調整,來進入下一步調整?
Thumbnail
對於剛入門的新手來說,有一些細節概念或許不是那麼清楚的,例如說什麼時候應該做出怎麼樣的調整,來進入下一步調整?
Thumbnail
pxCode就會提供許多獨創的視覺編輯方式,讓甚至沒有任何資訊或設計背景的用戶,都可以輕易上手。
Thumbnail
pxCode就會提供許多獨創的視覺編輯方式,讓甚至沒有任何資訊或設計背景的用戶,都可以輕易上手。
Thumbnail
在 pxCode 裡,我們也建議應用相同的概念 —— 在切版前先進行一輪的【思考切版】。當有了結構概念之後,再動手執行,會更有效率!
Thumbnail
在 pxCode 裡,我們也建議應用相同的概念 —— 在切版前先進行一輪的【思考切版】。當有了結構概念之後,再動手執行,會更有效率!
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News