PaintCode 用戶操作指南(動態(tài)圖形篇)

0 評論 10696 瀏覽 2 收藏 8 分鐘

調(diào)整大小限制(Resizing Constraints?

設(shè)計師能夠在檢查器中使用 縮放約束(Resizing Constraints)來定義圖形調(diào)整行為。

這個約束定義著圖形和框架之間的關(guān)系。主要有以下 6 種:靠左,靠右,靠上,靠下,寬和高。

0002

在定義圖形和框架之間的關(guān)系時,橫向約束(靠左、寬、靠右)是完全獨(dú)立的,垂直約束(靠上、高、靠下)也是一樣。為了清晰起見,在這里只描述水平約束行為。

每一個約束都是有剛性(尖的)和柔性(弧形)的。

靠左約束表示的是圖形的左側(cè)和圍框左邊的距離。當(dāng)靠左約束是剛性(尖的)的, PaintCode 將確保無論設(shè)計師如何調(diào)整框架的大小,圖形的左側(cè)與框架的左側(cè)將會保持一個恒定的距離。當(dāng)靠左約束是柔性(弧形)的,PaintCode 會使得相應(yīng)的距離盡可能的大,尊重其他兩種約束(寬、靠右)。

寬和靠右約束也和靠左約束類似。通過具體的 剛性(尖的)/柔性(弧形) 約束的組合,設(shè)計師能夠?qū)崿F(xiàn)各種有用的行為。

居中(Centering a fixed-width shape

0003

按比例調(diào)整(Making the shape resize proportionally

0004

0005

右對齊(Shape that sticks to the right

0006

左對齊并按照一定比例縮放(Shape that sticks to the left and resizes proportionally

0007

框架與圖形等級(Frame & Shape Hierarchy?

0008

  • 設(shè)計師能夠嵌套多框架
  • 框架也有大小限制

PaintCode 為設(shè)計師自動創(chuàng)建框架,并將框架的位置和大小帶入描述中。默認(rèn)情況下,所有的圖形是完全或者部分屬于某一框架的。

在某些情況下,框架通過它影響完全封閉的圖形。設(shè)計師可以在框架檢查器中通過檢查 只應(yīng)用到完全封閉的圖形(Apply only to entirely enclosed shapes)復(fù)選框來開啟這個行為。

0009

如果一個圖形屬于多個框架,這些框架中最小的會被用來做這個圖形的參考框架。

動態(tài)貝塞爾曲線(Dynamic Béziers?

對于簡單的圖形,像矩形和橢圓形,完全可以通過縮放約束來指定縮放行為。然而,設(shè)計師需要通過貝塞爾曲線來完成更精確的控制。

0010

它們之間的不同主要有:

  • 設(shè)計師能夠通過貝塞爾曲線為每個單獨(dú)的控制節(jié)點(diǎn)定義縮放限制
  • 不同的控制節(jié)點(diǎn)依托于不同的框架(對貝塞爾曲線來說沒有一個單獨(dú)的參考框架)

控制節(jié)點(diǎn)沒有寬和高,對它的控制更簡單:

0011

設(shè)計師能夠通過四個方向限制控制節(jié)點(diǎn):左、右、上、下,每個限制點(diǎn)都可以是剛性(尖的)或者柔性(弧形)。

當(dāng)靠左約束是剛性(尖的),控制節(jié)點(diǎn)會與參考框架的左側(cè)保持一個固定的距離。相同的,當(dāng)右約束是剛性(尖的),控制節(jié)點(diǎn)也會雨參考框架的右側(cè)保持一個固定的距離。

當(dāng)左、右約束都是柔性(弧形)的時候,控制節(jié)點(diǎn)會與參考框架保持在一個相對的位置。例如,想象一個 300 px 寬,控制點(diǎn)距離參考框架左側(cè) 100 px 的框架。當(dāng)設(shè)計師調(diào)整框架到 600 px 寬,控制節(jié)點(diǎn)距離參考框架左側(cè) 200 px。

一個框架不可能同時擁有左右約束。

能夠通過設(shè)置單獨(dú)控制節(jié)點(diǎn)的縮放約束,來實(shí)現(xiàn)復(fù)雜的縮放行為調(diào)整。此外,設(shè)計師可以使用多個(甚至嵌套)框架,創(chuàng)建更多有趣的行為變的容易。

0012

動態(tài)圖形和變換(Dynamic Shapes & Transforms

一旦圖形變換(例如,旋轉(zhuǎn)),將不再能對其進(jìn)行縮放限制,就像前面章節(jié)中提到的一樣。

0013

這種情況下,設(shè)計師仍然能夠指定變換源頭的位置行為。這允許設(shè)計師在框架中以某個中心點(diǎn)旋轉(zhuǎn)圖形,甚至設(shè)計師不再能夠控制它的尺寸。

這種情況下,縮放控制看起來會有些不同 – 在中間會有一個綠色變換原點(diǎn)符號:

0014

當(dāng)一個變量連接到其他圖形的變換屬性的時候,也會有同樣的限制。

PaintCode 用戶操作指南系列文章

PaintCode 用戶操作指南(概述篇)

PaintCode 用戶操作指南(庫篇)

PaintCode 用戶操作指南(繪制篇)

PaintCode 用戶操作指南(畫布和選項(xiàng)卡)

PaintCode 用戶操作指南(樣式表和代碼生成)

PaintCode 用戶操作指南(變量篇)

PaintCode 用戶操作指南(動態(tài)圖形篇)

PaintCode 用戶操作指南(符號篇)

文章已經(jīng)完結(jié),敬請期待下一部《Sketch 3用戶操作指南及實(shí)戰(zhàn)案例全解》

 

本作品由人人都是產(chǎn)品經(jīng)理特邀專欄作家@鄭幾塊 翻譯并獨(dú)家授權(quán)發(fā)布,未經(jīng)許可禁止轉(zhuǎn)載

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!