Posize 和 Flex?——pxCode 兩個簡單功能,掌握 RWD 切版的關鍵要素

更新於 發佈於 閱讀時間約 1 分鐘
而這一篇文中,就將對此分享我們所設計的一個全新編輯工具——pxCode
透過Figma/Sketch將檔案直接輸出,並導入pxCode之後,pxCode就會提供許多獨創的視覺編輯方式,讓甚至沒有任何工程或設計背景的用戶,都可以輕易上手——(這句話是真的喔)
這支影片中,將會詳細地為pxCode用戶分享【Posize & Flex】這個獨創功能。
說是「獨創」其實也並不完全,因為從「Posize」一詞來看,顧名思義就是 Position+Size。這是不少設計工具都會有的概念。
因此,就是將原本的兩個功能做結合,透過一個清晰的版面,就可以做出相當豐富的變化,最後再於「Size」進行更細節的設定。
.

➤ 加速網頁切版的過程?——這兩個工具,讓你比其他工具快上10倍

如此一來,就可以在非常視覺化/直覺式的編輯方法之下,來達到使用者最期望的切版結果!
於是在pxCode裡,只要有了Posize+Flex,無論什麼樣的設計稿,都可以用最有效率的方式進行切版編輯,大大提升了效率!
歡迎收看以上教學影片,並提出任何疑惑,我們都會為你解決。 ;)
⏱ Timeline:
🔵 0:09 Group 的類別
🔵 0:20 Posize
🔵 1:10 Posize 的操作
🔵 1:54 Posize 與程式碼
🔵 2:06 Flex
🔵 3:15 Fusion Flex
🔵 4:46 總結
.
📲 歡迎任何問題與合作邀約: pxCode官方網站, Facebook, YouTube
為什麼會看到廣告
avatar-img
8會員
8內容數
以全中文介紹 pxCode 的內部功能,並進行細節的分段教學。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
pxCode Team的沙龍 的其他內容
你或許會好奇,為什麼早已在設計軟體完成的設計稿,還要進行修正?—— 沒錯,因為這中間的切換,經常會有元件不適應(也可能是設計稿本身)的問題。
這篇文中,將會重點介紹網pxCode裡,使用者介面的四大功能項目,分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas
在pxCode裡,和其他編輯工具的共同點.,就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整,都必須先把結構(既HTML)的基礎打好。
對於剛入門的新手來說,有一些細節概念或許不是那麼清楚的,例如說什麼時候應該做出怎麼樣的調整,來進入下一步調整?
pxCode就會提供許多獨創的視覺編輯方式,讓甚至沒有任何資訊或設計背景的用戶,都可以輕易上手。
在 pxCode 裡,我們也建議應用相同的概念 —— 在切版前先進行一輪的【思考切版】。當有了結構概念之後,再動手執行,會更有效率!
你或許會好奇,為什麼早已在設計軟體完成的設計稿,還要進行修正?—— 沒錯,因為這中間的切換,經常會有元件不適應(也可能是設計稿本身)的問題。
這篇文中,將會重點介紹網pxCode裡,使用者介面的四大功能項目,分別是——導覽列 Navigator、屬性 Inspector、工具列 Toolbor、編輯區 Editing Canvas
在pxCode裡,和其他編輯工具的共同點.,就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整,都必須先把結構(既HTML)的基礎打好。
對於剛入門的新手來說,有一些細節概念或許不是那麼清楚的,例如說什麼時候應該做出怎麼樣的調整,來進入下一步調整?
pxCode就會提供許多獨創的視覺編輯方式,讓甚至沒有任何資訊或設計背景的用戶,都可以輕易上手。
在 pxCode 裡,我們也建議應用相同的概念 —— 在切版前先進行一輪的【思考切版】。當有了結構概念之後,再動手執行,會更有效率!
你可能也想看
Google News 追蹤
Thumbnail
/ 大家現在出門買東西還會帶錢包嗎 鴨鴨發現自己好像快一個禮拜沒帶錢包出門 還是可以天天買滿買好回家(? 因此為了記錄手機消費跟各種紅利優惠 鴨鴨都會特別注意銀行的App好不好用! 像是介面設計就是會很在意的地方 很多銀行通常會為了要滿足不同客群 會推出很多App讓使用者下載 每次
Thumbnail
這篇「橫濱親子住宿攻略」是以自己的到橫濱自由行的經驗,推薦10家適合親子旅遊的橫濱飯店,主要以小孩不佔床可以免費同住、交通便利附近好買好逛等原則去比較,評價很高的橫濱親子住宿、橫濱親子友善飯店給大家參考。
Thumbnail
富士山之所以令人稱道,絕非沒有理由。孔子周遊列國,或許並不僅僅是為了說服君王,更是透過與當地商家和居民的交流,汲取不同的見解。 旅人騎著駿馬來到山區,發現這裡有連接兩地的空中纜車,但因地形關係,部分路段受到限制,原本計畫中的地點也因此做了調整。旅人的特點在於,他們不像私塾的學子那般受到約束,而
荷蘭2023年7月1號通過退休金新法,由確定給付制改成確定提撥制。新法也規定所有的退休基金要在2028年1月1號前轉換成新制度。 目前第一個轉換為新制的為荷蘭職業退休基金Loodsen,他們的會員,不論是已經在領的,或是仍在職的,全部都會在今年1月1號轉為新制。 每個退休基金的參與人數與基金規模
Thumbnail
佛教徒雖不歸依諸天,但對諸天保持恭敬禮遇。這是因為諸天皆已皈依佛陀,恪守正法,護持正教,並且精進修持善業,遠離惡行。親受如來法旨,誓願恆常守護那些受持、讀誦、書寫《金光明經》的人們。諸天以其神力為眾生驅邪除惡,降福消災,扶持修行者圓證佛果。
Thumbnail
FlexClip是一個功能豐富且使用方便的影片剪輯軟體,結合最新的AI技術,使影片剪輯變得更加簡單。文章介紹了FlexClip的功能、價格、使用方式,以及線上剪輯影片的方法。
Thumbnail
這篇文章分享了 CSS Battle 第 38 題的解法,並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
Thumbnail
PixVerse是一款AI工具,推出了全新的〝魔術刷〞功能,讓使用者能夠輕鬆生成動態圖像。同時,PixVerse每天還會贈送免費的20積分,歡迎透過本文提供的連結前往官方網站體驗。
Thumbnail
Canva近年來成為設計界的熱門工具,其新擴張功能讓設計人員可以快速將設計的logo、圖案套用在各種商品上,操作簡便實用。本文將介紹Canva的新擴張功能,如何套用在不同的商品上,以及如何使用細部編輯模式調整大小和位置。
Thumbnail
在數位辦公環境中,PDF文件是日常工作不可或缺的一部分。pdftopdf.ai是一款強大的PDF編輯工具,可以壓縮文件,讓PDF文件更易編輯和管理。本文將探討PDF編輯工具的功能、優勢及在不同場景中的應用。
Thumbnail
/ 大家現在出門買東西還會帶錢包嗎 鴨鴨發現自己好像快一個禮拜沒帶錢包出門 還是可以天天買滿買好回家(? 因此為了記錄手機消費跟各種紅利優惠 鴨鴨都會特別注意銀行的App好不好用! 像是介面設計就是會很在意的地方 很多銀行通常會為了要滿足不同客群 會推出很多App讓使用者下載 每次
Thumbnail
這篇「橫濱親子住宿攻略」是以自己的到橫濱自由行的經驗,推薦10家適合親子旅遊的橫濱飯店,主要以小孩不佔床可以免費同住、交通便利附近好買好逛等原則去比較,評價很高的橫濱親子住宿、橫濱親子友善飯店給大家參考。
Thumbnail
富士山之所以令人稱道,絕非沒有理由。孔子周遊列國,或許並不僅僅是為了說服君王,更是透過與當地商家和居民的交流,汲取不同的見解。 旅人騎著駿馬來到山區,發現這裡有連接兩地的空中纜車,但因地形關係,部分路段受到限制,原本計畫中的地點也因此做了調整。旅人的特點在於,他們不像私塾的學子那般受到約束,而
荷蘭2023年7月1號通過退休金新法,由確定給付制改成確定提撥制。新法也規定所有的退休基金要在2028年1月1號前轉換成新制度。 目前第一個轉換為新制的為荷蘭職業退休基金Loodsen,他們的會員,不論是已經在領的,或是仍在職的,全部都會在今年1月1號轉為新制。 每個退休基金的參與人數與基金規模
Thumbnail
佛教徒雖不歸依諸天,但對諸天保持恭敬禮遇。這是因為諸天皆已皈依佛陀,恪守正法,護持正教,並且精進修持善業,遠離惡行。親受如來法旨,誓願恆常守護那些受持、讀誦、書寫《金光明經》的人們。諸天以其神力為眾生驅邪除惡,降福消災,扶持修行者圓證佛果。
Thumbnail
FlexClip是一個功能豐富且使用方便的影片剪輯軟體,結合最新的AI技術,使影片剪輯變得更加簡單。文章介紹了FlexClip的功能、價格、使用方式,以及線上剪輯影片的方法。
Thumbnail
這篇文章分享了 CSS Battle 第 38 題的解法,並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
Thumbnail
PixVerse是一款AI工具,推出了全新的〝魔術刷〞功能,讓使用者能夠輕鬆生成動態圖像。同時,PixVerse每天還會贈送免費的20積分,歡迎透過本文提供的連結前往官方網站體驗。
Thumbnail
Canva近年來成為設計界的熱門工具,其新擴張功能讓設計人員可以快速將設計的logo、圖案套用在各種商品上,操作簡便實用。本文將介紹Canva的新擴張功能,如何套用在不同的商品上,以及如何使用細部編輯模式調整大小和位置。
Thumbnail
在數位辦公環境中,PDF文件是日常工作不可或缺的一部分。pdftopdf.ai是一款強大的PDF編輯工具,可以壓縮文件,讓PDF文件更易編輯和管理。本文將探討PDF編輯工具的功能、優勢及在不同場景中的應用。