PaintCode 用戶操作指南(畫布和選項卡)
使用選項卡(Working with Tabs)
設(shè)計師能夠使用選項卡管理正在設(shè)計的 PaintCode 文檔。每個選項卡包含多個正在設(shè)計的畫布。
第一個選項卡——稱為樣式表,它非常特別并且提供給設(shè)計師通向樣式表的目錄——一個集繪制、顏色、漸變以及其他設(shè)計資源的庫,設(shè)計師能夠輕易的導(dǎo)出單獨的 Objective-C,Swift 以及C# 的類。樣式表使設(shè)計師在項目中,集中生成代碼變得十分簡單。
管理選項卡(Managing Tabs)
單擊前一選項卡后面的 + 圖標(biāo),就能夠添加一個新的選項卡。
把鼠標(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ū)域,每個畫布生成一個獨立的繪制方法。
移動畫布(Moving Canvases)
單擊并拖動畫布的標(biāo)題,就能夠在涉及區(qū)域中移動畫布。每一個畫布的標(biāo)題先是在畫布的頂部,在中間位置。
調(diào)整畫布大?。?/strong>Resizing Canvases)
首先,點擊畫布的標(biāo)題來選擇畫布。然后,設(shè)計師使用光標(biāo)拖拽畫布的邊緣來調(diào)整畫布大小。
或者,設(shè)計師可以在檢查器中設(shè)置畫布大小的數(shù)值。
添加畫布(Adding Canvases)
在 PaintCode 中,設(shè)計師在同一個選項卡中能夠擁有多個畫布。設(shè)計師通過菜單中的 畫布 ? 新建 ? 默認(rèn),或者按 Shift + Command + N,新建畫布。
又或者,設(shè)計師能夠在選項卡空白區(qū)域,激活上下文菜單,然后選擇新建畫布:
移除畫布(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è)計師還能夠使用中間工具欄中的縮放控制:
在畫布上移動(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)行切換。
非視網(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è)置各項:
命名畫布(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)
- 以上兩者
當(dāng)設(shè)計師選擇畫布,并生成一個返回圖像的方法,當(dāng)設(shè)計師的目標(biāo)是 iOS 的時候,將出現(xiàn)更多的設(shè)置。這些設(shè)置允許設(shè)計師定義生成圖像的內(nèi)部設(shè)置以及(如果需要的話)圖像的渲染模式。
設(shè)計師也可以設(shè)置選擇器,這個選擇器是添加的 IBOutletCollection,并由圖像方法生成的。
調(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)格顏色(Showing/Hiding 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)的時候是非常有用的。
行和列布局引導(dǎo),能夠讓設(shè)計師按照指定的列/行大小設(shè)計,并且能夠根據(jù)布局網(wǎng)格來方便的進(jìn)行復(fù)雜的設(shè)計。例如,這個網(wǎng)站就是使用 PaintCode 布局網(wǎng)格進(jìn)行設(shè)計的。
PaintCode 用戶操作指南系列文章
文章已經(jīng)完結(jié),敬請期待下一部《Sketch 3用戶操作指南及實戰(zhàn)案例全解》
本作品由人人都是產(chǎn)品經(jīng)理特邀專欄作家@鄭幾塊 翻譯并獨家授權(quán)發(fā)布,未經(jīng)許可禁止轉(zhuǎn)載
- 目前還沒評論,等你發(fā)揮!