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

0 評(píng)論 10837 瀏覽 1 收藏 12 分鐘

使用選項(xiàng)卡(Working with Tabs

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

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

管理選項(xiàng)卡(Managing Tabs

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

002

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

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

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

重命名選項(xiàng)卡(Renaming Tabs

設(shè)計(jì)師可以通過雙擊選項(xiàng)卡來重命名。或者,設(shè)計(jì)師可以徐小所有畫布上的工作,在這種情況下,檢查器中會(huì)出示給設(shè)計(jì)師一個(gè)文本框,顯示正在編輯的選項(xiàng)卡的名字。

使用畫布(Working with Canvases?

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

003

移動(dòng)畫布(Moving Canvases

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

調(diào)整畫布大小(Resizing Canvases

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

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

004

添加畫布(Adding Canvases

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

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

005

移除畫布(Removing Canvases

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

縮放畫布(Zooming the Canvas

  • 點(diǎn)擊 Command + +,放大畫布
  • 點(diǎn)擊 Command + -,縮小畫布

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

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

006

在畫布上移動(dòng)(Moving around the Canvas

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

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

畫布顯示模式(Canvas Display Modes

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

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

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

007

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

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

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

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

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

畫布設(shè)置(Canvas Settings

畫布設(shè)置(Canvas Setting

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

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

008

命名畫布(Naming Canvas

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

調(diào)整畫布大小(Changing Canvas Size

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

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

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

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

009

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

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

010

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

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

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

調(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 自動(dòng)調(diào)整網(wǎng)格的顏色來適應(yīng)畫布背景色。設(shè)計(jì)師可以設(shè)置網(wǎng)格的顏色,單擊顏色編輯器就可以了。

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

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

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

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

011

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

 

PaintCode 用戶操作指南系列文章

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

PaintCode 用戶操作指南(庫篇)

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

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

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

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

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

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

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

 

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

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