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

更新 發佈閱讀 2 分鐘

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

raw-image

透過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
pxCode Team的沙龍
8會員
8內容數
以全中文介紹 pxCode 的內部功能,並進行細節的分段教學。
pxCode Team的沙龍的其他內容
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
2022/01/26
在pxCode裡,和其他編輯工具的共同點.,就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整,都必須先把結構(既HTML)的基礎打好。
Thumbnail
2022/01/26
在pxCode裡,和其他編輯工具的共同點.,就是所有的編輯調整都建立在結構之上。所以要進入更細節的調整,都必須先把結構(既HTML)的基礎打好。
Thumbnail
看更多
你可能也想看
Thumbnail
本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇:帕拉贊諾夫的十段殘篇》,如何以十段殘篇,結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭,探討藝術在儀式消失的現代社會如何承接意義,並展現不羈的自由靈魂。
Thumbnail
本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇:帕拉贊諾夫的十段殘篇》,如何以十段殘篇,結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭,探討藝術在儀式消失的現代社會如何承接意義,並展現不羈的自由靈魂。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
Resize是一種設計手法,設計師在設計的過程中,為設計品調整尺寸與內容,確保設計品在不同的環境中,都能夠呈現最佳的樣子,讓整體看起來更有一致性。
Thumbnail
Resize是一種設計手法,設計師在設計的過程中,為設計品調整尺寸與內容,確保設計品在不同的環境中,都能夠呈現最佳的樣子,讓整體看起來更有一致性。
Thumbnail
今天要講的這個同樣是Stable Diffusion web UI的插件:3D OpenPose Editor。 這個3D OpenPose Editor更好用,整合了更多東西並且同樣是3D視角,連手指控制的功能都被整合進來了。
Thumbnail
今天要講的這個同樣是Stable Diffusion web UI的插件:3D OpenPose Editor。 這個3D OpenPose Editor更好用,整合了更多東西並且同樣是3D視角,連手指控制的功能都被整合進來了。
Thumbnail
這篇我要教的一樣是我覺得重要且實用的東西,直接進入重點,先直接讓你們看看Posex是個什麼東西: 以網路上的曝光度來說,看的出來ControlNet這個Stable Diffusion web UI非常火紅,因為它解決了AI繪圖難以控制人物姿勢的問題,而ControlNet的附屬插件OpenPose
Thumbnail
這篇我要教的一樣是我覺得重要且實用的東西,直接進入重點,先直接讓你們看看Posex是個什麼東西: 以網路上的曝光度來說,看的出來ControlNet這個Stable Diffusion web UI非常火紅,因為它解決了AI繪圖難以控制人物姿勢的問題,而ControlNet的附屬插件OpenPose
Thumbnail
設計,就是在『有限版面』,置入『不同元素』的『組合』遊戲! 我們最傷腦筋的是:要如何組合,才能順眼好看? 我們這次介紹PPT的小功能:柔邊。 它能讓兩個元素的組合,更加『水乳交融』拼貼合成,模糊彼此的交界處!
Thumbnail
設計,就是在『有限版面』,置入『不同元素』的『組合』遊戲! 我們最傷腦筋的是:要如何組合,才能順眼好看? 我們這次介紹PPT的小功能:柔邊。 它能讓兩個元素的組合,更加『水乳交融』拼貼合成,模糊彼此的交界處!
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年推薦的線上圖片編輯工具及使用流程,讓沒有設計底子的你,也可以快速完成圖片製作哦!
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News