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

0 評論 10892 瀏覽 1 收藏 12 分鐘

使用選項卡(Working with Tabs

設(shè)計師能夠使用選項卡管理正在設(shè)計的 PaintCode 文檔。每個選項卡包含多個正在設(shè)計的畫布。

第一個選項卡——稱為樣式表,它非常特別并且提供給設(shè)計師通向樣式表的目錄——一個集繪制、顏色、漸變以及其他設(shè)計資源的庫,設(shè)計師能夠輕易的導(dǎo)出單獨的 Objective-C,Swift 以及C# 的類。樣式表使設(shè)計師在項目中,集中生成代碼變得十分簡單。

管理選項卡(Managing Tabs

單擊前一選項卡后面的 + 圖標(biāo),就能夠添加一個新的選項卡。

002

把鼠標(biāo)懸停在選項卡上,就會出現(xiàn) X 圖標(biāo),點擊它,就能夠移除一個選項卡。

設(shè)計師通過拖拽,能夠輕易的重新排列選項卡。

注意,樣式表選項卡總是在第一個,并且不能被移除或者重新排列。當(dāng)設(shè)計師的文檔中有許多選項卡,不能在選項卡類表中顯示的時候,這時候后面的選項卡就會顯示為 …。一個上下文菜單就會顯示出來,并把隱藏的選項卡列出來。

重命名選項卡(Renaming Tabs

設(shè)計師可以通過雙擊選項卡來重命名?;蛘撸O(shè)計師可以徐小所有畫布上的工作,在這種情況下,檢查器中會出示給設(shè)計師一個文本框,顯示正在編輯的選項卡的名字。

使用畫布(Working with Canvases?

畫布是設(shè)計師用來創(chuàng)建設(shè)計的區(qū)域,每個畫布生成一個獨立的繪制方法。

003

移動畫布(Moving Canvases

單擊并拖動畫布的標(biāo)題,就能夠在涉及區(qū)域中移動畫布。每一個畫布的標(biāo)題先是在畫布的頂部,在中間位置。

調(diào)整畫布大?。?/strong>Resizing Canvases

首先,點擊畫布的標(biāo)題來選擇畫布。然后,設(shè)計師使用光標(biāo)拖拽畫布的邊緣來調(diào)整畫布大小。

或者,設(shè)計師可以在檢查器中設(shè)置畫布大小的數(shù)值。

004

添加畫布(Adding Canvases

在 PaintCode 中,設(shè)計師在同一個選項卡中能夠擁有多個畫布。設(shè)計師通過菜單中的 畫布 ? 新建 ? 默認(rèn),或者按 Shift + Command + N,新建畫布。

又或者,設(shè)計師能夠在選項卡空白區(qū)域,激活上下文菜單,然后選擇新建畫布:

005

移除畫布(Removing Canvases

在工作區(qū)中單擊畫布的標(biāo)題,然后點擊 Delete 或者 Backspace,來移除畫布。

縮放畫布(Zooming the Canvas

  • 點擊 Command + +,放大畫布
  • 點擊 Command + -,縮小畫布

或者,設(shè)計師能夠使用 Mac 的手觸板來縮放畫布。或者按住 Option 鍵不放,使用兩個手指滑動 Mac 的手觸板(或者是滾動鼠標(biāo)滾軸)來縮放畫布。這種方法取決于鼠標(biāo)位置,因此設(shè)計師能夠?qū)Ξ嫴嫉娜我馕恢眠M(jìn)行縮放。

當(dāng)然,設(shè)計師還能夠使用中間工具欄中的縮放控制:

006

在畫布上移動(Moving around the Canvas

設(shè)計師能夠使用滾動條或兩個手指滑動,移動畫布。還可以按住空格鍵并單擊和拖動鼠標(biāo)來移動畫布。

此外,還可以在畫布上使用預(yù)覽。如果點擊預(yù)覽圖上的一些點,畫布會自動選擇以此為中心。此外,設(shè)計師能夠單擊并拖動預(yù)覽來平滑的移動畫布。

畫布顯示模式(Canvas Display Modes

PaintCode 提供了三種不同的模式:

  • 非視網(wǎng)膜模式(non-Retina mode)
  • 視網(wǎng)膜模式(Retina mode)
  • 無限模式(Infinite mode)

設(shè)計師可以在中間的工具欄中選擇這些模式。也可以使用 Option + D 快捷鍵,在這三種模式中進(jìn)行切換。

007

非視網(wǎng)膜模式顯示設(shè)計師的設(shè)計開起來和非視網(wǎng)膜模式顯示器(大多數(shù) Mac 下)很像。視網(wǎng)膜模式是雙倍密度。設(shè)計師的設(shè)計將在視網(wǎng)膜模式顯示器下展示(大多數(shù) iOS 設(shè)備下)。最后,無限精度模式下,預(yù)覽設(shè)計師的設(shè)計,不管放大多少,設(shè)計都不會失真。

畫布上顯示模式的重要性(On the importance of Canvas Display Modes

在畫布上顯示模式,不會以任何方式影響生成的代碼。生成的代碼都是獨立的,在任何顯示器上都是完美的。PaintCode 設(shè)計這些模式主要是為了幫助設(shè)計師在設(shè)計過程中使用。

當(dāng)設(shè)計師調(diào)整設(shè)計為非視網(wǎng)膜模式像素網(wǎng)格,設(shè)計師能夠 100% 肯定,即便是在高像素密度的顯示器下,設(shè)計也會保持鋒利(對齊到像素網(wǎng)格)。另一方面,如果設(shè)計師使用視網(wǎng)膜模式或者無限模式,可能會出在視網(wǎng)膜顯示器下也比較清晰的設(shè)計,但在非視網(wǎng)膜設(shè)備上會是模糊的。

因此,設(shè)計師應(yīng)該使用非視網(wǎng)膜模式為默認(rèn)模式,只是偶爾切換到視網(wǎng)膜模式或者無限模式上,來檢查設(shè)計在高像素密度情況下的顯示情況就可以了。

畫布設(shè)置(Canvas Settings

畫布設(shè)置(Canvas Setting

點擊工作區(qū)中畫布的標(biāo)題,來設(shè)置畫布。或者,在圖形和組瀏覽器中點擊畫布,也能夠開啟畫布設(shè)置。

在檢查器中將現(xiàn)實畫布設(shè)置各項:

008

命名畫布(Naming Canvas

使用頂部的文本域,設(shè)計師能夠修改畫布的命名。新的命名作為生成繪圖方法的名稱,也能夠用在輸出畫布的圖像上。

調(diào)整畫布大?。?/strong>Changing Canvas Size

在相應(yīng)的文本域輸入所需要的尺寸,來調(diào)整畫布的大小?;蛘撸O(shè)計師也能夠通過拖動工作區(qū)中的畫布邊緣調(diào)整畫布大小。注意,這在沒有選定畫布中的圖形情況下,此能適用。

調(diào)整樣式表設(shè)置(Changing StyleKit Setting

適用樣式表彈出按鈕,設(shè)計師能夠調(diào)整畫布的樣式表代碼生成設(shè)置。最重要的事,設(shè)計師能夠選擇畫布,是否要生成代碼:

  • 沒有任何方法
  • 一個簡單(無效)的繪制方法
  • 一個生成圖像的方法(UIImage 或者 NSImage)
  • 以上兩者

009

當(dāng)設(shè)計師選擇畫布,并生成一個返回圖像的方法,當(dāng)設(shè)計師的目標(biāo)是 iOS 的時候,將出現(xiàn)更多的設(shè)置。這些設(shè)置允許設(shè)計師定義生成圖像的內(nèi)部設(shè)置以及(如果需要的話)圖像的渲染模式。

設(shè)計師也可以設(shè)置選擇器,這個選擇器是添加的 IBOutletCollection,并由圖像方法生成的。

010

調(diào)整畫布背景色(Changing Canvas background color

單擊顏色窗口,來調(diào)整畫布背景色。注意畫布背景色并不和生成的源代碼相關(guān)聯(lián)。

還有,當(dāng)設(shè)計師導(dǎo)出圖像為 TIFF,PDF 或者 PNG 格式的時候,顏色才會被使用。想要把導(dǎo)出的圖像設(shè)置為透明背景,將畫布背景設(shè)置為無,或者在導(dǎo)出的時候關(guān)閉 導(dǎo)出背景 檢查項。

調(diào)整畫布背景圖像(Changing canvas background image

首先,確保選中圖像顯示器復(fù)選框。然后,拖放所需要的圖像到圖像顯示器。還可以使用下方的空間來設(shè)置畫布的必經(jīng)圖像。

顯示/隱藏網(wǎng)格并調(diào)整網(wǎng)格顏色(ShowingHiding the grid and changing its color

在畫布設(shè)置中,使用 網(wǎng)格 復(fù)選框來控制 顯示/隱藏 畫布網(wǎng)格?;蛘呤褂?Option + G 快捷鍵組合。

PaintCode 自動調(diào)整網(wǎng)格的顏色來適應(yīng)畫布背景色。設(shè)計師可以設(shè)置網(wǎng)格的顏色,單擊顏色編輯器就可以了。

畫布引導(dǎo)(Canvas Guides

最后一項畫布設(shè)置允許設(shè)計師開啟一個正在建設(shè)的圖像的引導(dǎo):

  • iOS 7 圖標(biāo)網(wǎng)格布局引導(dǎo)
  • 列布局引導(dǎo)
  • 行布局引導(dǎo)
  • 列和行的布局引導(dǎo)

圖標(biāo)網(wǎng)格(在 iOS 7 中介紹)在設(shè)計 iOS 應(yīng)用程序圖標(biāo)的時候是非常有用的。

011

行和列布局引導(dǎo),能夠讓設(shè)計師按照指定的列/行大小設(shè)計,并且能夠根據(jù)布局網(wǎng)格來方便的進(jìn)行復(fù)雜的設(shè)計。例如,這個網(wǎng)站就是使用 PaintCode 布局網(wǎng)格進(jìn)行設(shè)計的。

 

PaintCode 用戶操作指南系列文章

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

PaintCode 用戶操作指南(庫篇)

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

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

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

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

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

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

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

 

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

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