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
留言分享你的想法!
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
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
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年推薦的線上圖片編輯工具及使用流程,讓沒有設計底子的你,也可以快速完成圖片製作哦!
Thumbnail
利用形狀繪圖工具,並搭配變形處理,完成具立體感的影像繪圖。 STEP1. 開啟新檔選擇網頁,寬高均為500像素、解析度72像素/英吋,並取消工作畫板選項。 執行【檢視>尺標】在尺標刻度上按下滑鼠右鍵,選擇執行【像素】,即是將介面設定值單位固定為像素單位。 STEP2. 在圖層上新增圖層1,使用
Thumbnail
利用形狀繪圖工具,並搭配變形處理,完成具立體感的影像繪圖。 STEP1. 開啟新檔選擇網頁,寬高均為500像素、解析度72像素/英吋,並取消工作畫板選項。 執行【檢視>尺標】在尺標刻度上按下滑鼠右鍵,選擇執行【像素】,即是將介面設定值單位固定為像素單位。 STEP2. 在圖層上新增圖層1,使用
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News