最簡單快速的編輯概念:設計稿轉RWD之前,你應該要知道什麼?

更新 發佈閱讀 3 分鐘

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

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

raw-image

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

以下這支教學影片,就特別介紹了pxCode的編輯概念(Editing Concept)。

對於剛入門的新手來說,有一些細節概念或許不是那麼清楚的,例如說什麼時候應該做出怎麼樣的調整,來進入下一步調整?又或是說,怎麼樣的調整,才更適合一個設計稿?

以下這支教學影片,就特別全面地介紹了pxCode的編輯概念。歡迎收看,並提出任何疑惑,我們都會為你解決 ;)

.

➤ 從設計檔到RWD響應式網頁:Figma, Sketch 免費轉換成 HTML, CSS, React(不用寫程式)


這些或許不會有最標準的答案,不過在pxCode,我們提供了非常直接式的建議,不時提供『智慧式提點』,為你當下的調整步驟給出最適當的建議。

如此一來,你可以更快速的掌握一個設計稿的屬性,在最短的時間內,將客戶託付的設計稿,編輯轉換成擁有完好程式碼的響應式網頁(RWD)!

⏱ Timeline:

🔵 0:04 切版概念
.
🔵 0:12 pxCode 編輯流程
🔵 0:28 結構主要內容
🔵 0:50 Size, Direction, Cutline
🔵 1:16 Lucky Guess
🔵 1:35 HTML concept
🔵 1:46 pxCode 三種結構
.
🔵 2:27 總結

.

📲 歡迎任何問題與合作邀約: 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/28
這篇文中,將會重點介紹網pxCode裡,使用者介面的四大功能項目,分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas
Thumbnail
2022/01/28
這篇文中,將會重點介紹網pxCode裡,使用者介面的四大功能項目,分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas
Thumbnail
看更多
你可能也想看
Thumbnail
一位長期推廣閱讀寫作、經營多個平臺,也是《30Days愛自己的小練習》作者,分享首次親自體驗蝦皮購物的歷程。以「網購小白」的角度,詳細介紹了蝦皮平臺操作的便利性,分享了加入分潤的七大好處、賺錢的五大撇步。文章穿插了雙12活動、購物連結及分潤連結,極具參考價值。
Thumbnail
一位長期推廣閱讀寫作、經營多個平臺,也是《30Days愛自己的小練習》作者,分享首次親自體驗蝦皮購物的歷程。以「網購小白」的角度,詳細介紹了蝦皮平臺操作的便利性,分享了加入分潤的七大好處、賺錢的五大撇步。文章穿插了雙12活動、購物連結及分潤連結,極具參考價值。
Thumbnail
(一)分享曾經在蝦皮買過的好物 這是一個真實的故事,筆者大約每半年會去蝦皮網站購買一種叫做永樂健的酵素,這是日本製造原裝進口的酵素,有兩種以上的口味(橘子口味、優酪乳口味),我都買橘子口味的,比較好吃,因為是台灣出貨,很快就會寄來。每次買30包,店家又加贈2包,等於擁有32包。
Thumbnail
(一)分享曾經在蝦皮買過的好物 這是一個真實的故事,筆者大約每半年會去蝦皮網站購買一種叫做永樂健的酵素,這是日本製造原裝進口的酵素,有兩種以上的口味(橘子口味、優酪乳口味),我都買橘子口味的,比較好吃,因為是台灣出貨,很快就會寄來。每次買30包,店家又加贈2包,等於擁有32包。
Thumbnail
雙12即將來襲!今年不只是要買東買西,還要變身購物專家,就由我來推薦大家購物清單,裡面還有開箱文給大家參考。先來一個讓人逛街腳底舒服的「舒壓腳底按摩輪」,數位遊牧一定要帶的「無印良品筆電防震提袋」,讓我想去咖啡廳寫文章帶了就走,再來是居安思危、防災必備的 MVP「3Coins 手搖式收音機」,它還有
Thumbnail
雙12即將來襲!今年不只是要買東買西,還要變身購物專家,就由我來推薦大家購物清單,裡面還有開箱文給大家參考。先來一個讓人逛街腳底舒服的「舒壓腳底按摩輪」,數位遊牧一定要帶的「無印良品筆電防震提袋」,讓我想去咖啡廳寫文章帶了就走,再來是居安思危、防災必備的 MVP「3Coins 手搖式收音機」,它還有
Thumbnail
今天要來整理 Figma的免費課程!傳送門 Figma 是個很好用的製圖工具, 但在真正用 Figma 畫 UIUX時,最重要的第一步是「知道這個專案的目的」。 Wireframes 產品框線圖 Figma 可以用來畫 Wireframes 就像在寫文章一樣先有大鋼,再填內容。在做產品
Thumbnail
今天要來整理 Figma的免費課程!傳送門 Figma 是個很好用的製圖工具, 但在真正用 Figma 畫 UIUX時,最重要的第一步是「知道這個專案的目的」。 Wireframes 產品框線圖 Figma 可以用來畫 Wireframes 就像在寫文章一樣先有大鋼,再填內容。在做產品
Thumbnail
Figma是一個主要用來設計網頁的矢量設計軟件,與Wordpress,Shopify, Webflow等不同,Figma做出來的並不是實際的網站,而是一個雛型(Prototype)。 那你或許會想:“為什麼不直接使用類似Wordpress的工具呢?’’ 試想想以下這一個情況: 你用Wordpress
Thumbnail
Figma是一個主要用來設計網頁的矢量設計軟件,與Wordpress,Shopify, Webflow等不同,Figma做出來的並不是實際的網站,而是一個雛型(Prototype)。 那你或許會想:“為什麼不直接使用類似Wordpress的工具呢?’’ 試想想以下這一個情況: 你用Wordpress
Thumbnail
隨者Sketch(2010)、Adobe XD(2016)、Figma(2016)等等的向量圖形編輯器(Vector Graphics Editor, VGE)誕生後,UI設計邁向了一個全新階段。這些工具除了能使UI設計達到系統化、模組化的高效率開發以外,也同時讓前端工程師有更完整的樣式(Style
Thumbnail
隨者Sketch(2010)、Adobe XD(2016)、Figma(2016)等等的向量圖形編輯器(Vector Graphics Editor, VGE)誕生後,UI設計邁向了一個全新階段。這些工具除了能使UI設計達到系統化、模組化的高效率開發以外,也同時讓前端工程師有更完整的樣式(Style
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 裡,我們也建議應用相同的概念 —— 在切版前先進行一輪的【思考切版】。當有了結構概念之後,再動手執行,會更有效率!
Thumbnail
與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
Thumbnail
與HTML不同,CSS是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過HTML新增網頁內容後,再使用CSS去修改他的樣式,例如⋯⋯
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News