隨著Athens版本的發(fā)布，我們引入了兩個(gè)新的容器——"框架 "和 "圖形"。它們共同代表了 Sketch 工作流程的重大變化（和改進(jìn)）。這里有很多內(nèi)容要介紹，所以請(qǐng)喝杯咖啡，我們將帶您徹底了解這一切。

 

在Athens版本中，我們用兩個(gè)新的容器——"框架"和 "圖形"取代了 "畫板"。它們與堆棧（Stacks）的上線標(biāo)志著Sketch做出了近幾年以來對(duì)設(shè)計(jì)師工作流的最大改動(dòng)。在內(nèi)部，我們常說 Sketch "感覺就像一個(gè)新的應(yīng)用程序"。

 

那么，什么是框架？它與藝術(shù)板有何不同？什么是圖形？這對(duì)組有什么影響？文檔和工作流程會(huì)發(fā)生什么變化？

 

這些我們都會(huì)講到，但還是從我們想要解決的問題開始吧。

 

我們?yōu)槭裁匆谱骺蚣芎蛨D形？

想象一下：你正在為一個(gè)網(wǎng)絡(luò)應(yīng)用程序設(shè)計(jì)用戶資料卡。

 

• 您繪制了一個(gè)矩形背景，添加了文字和按鈕，然后將它們分組。您添加了一個(gè)圖標(biāo)，然后移動(dòng)了卡片，但圖標(biāo)卻落在了后面——它在分組的頂部，但不在里面。
• 你在圖層列表中修正了這一點(diǎn)，然后調(diào)整了卡片的大小，但所有的東西都拉伸了。所以你需要撤消，然后用圖釘固定卡片中每個(gè)圖層的大小，并檢查大小是否調(diào)整正確。
• 后來，你點(diǎn)擊卡片并移動(dòng)它，但只有背景矩形移動(dòng)了。于是你撤銷操作，按 Esc 鍵選中卡片，然后移動(dòng)它。

 

我還可以繼續(xù)說下去，但你已經(jīng)明白了。絆腳石很多。也許你學(xué)會(huì)了避開它們，或者只是接受了它們——即便如此，最好的情況是讓您感到枯燥，但最壞的情況是使您感到沮喪。但情況并非總是如此。如果你在設(shè)計(jì)一個(gè)圖標(biāo)，這些行為實(shí)際上會(huì)讓你感覺很自然。

 

關(guān)鍵的挑戰(zhàn)在于界面設(shè)計(jì)和圖形設(shè)計(jì)在機(jī)制上有很大的不同。Sketch 歷來偏愛圖形工作——這就是為什么設(shè)計(jì)一張簡單的資料卡都如此費(fèi)事。

 

矩形和組的工作流程并不適合界面工作，也不適合堆棧。但我們并不想全部推倒重來，降低圖形設(shè)計(jì)工作的重要性。我們希望界面和圖形工作都能得到適當(dāng)?shù)?、專門的支持。我們的解決方案是讓它們各自擁有自己的容器：

 

• 框架：界面設(shè)計(jì)和布局工作的容器。
• 圖形：圖標(biāo)、插圖和其他圖形作品的容器。

 

框架 101

 

框架有幾個(gè)重要的特性：

 

1.可嵌套。它們可以包含其他層，也可以被其他層包含。

2.它們支持樣式設(shè)計(jì)。填充、邊框、圓角、陰影，應(yīng)有盡有。

3.它們會(huì)重新支持圖層。在框架上添加或移動(dòng)內(nèi)容會(huì)將其嵌套到框架中。

4.定義大小。通常是固定大小，但也可以根據(jù)堆棧布局來調(diào)整內(nèi)容。

 

如果你熟悉 Sketch，就會(huì)認(rèn)為框架是畫板的自然演化。事實(shí)上，畫板已不復(fù)存在。在Athens打開現(xiàn)有文檔時(shí)，您的畫板和符號(hào)源現(xiàn)在都是框架。

 

如何創(chuàng)建框架

按 F，使用 "插入"菜單或工具欄按鈕使用 "框架"工具，然后：

 

• 繪制任意大小的框架
• 在 "檢查器 "中選擇一個(gè)模板作為頂層框架插入
• 或者點(diǎn)擊畫布，插入一個(gè)與您上次互動(dòng)的畫框大小相同的畫框。

您還可以用 ?F 將選區(qū)包在一個(gè)新框中。

 

我們將直接放置在畫布上的框架稱為頂層框架。在其他框架內(nèi)繪制的框架稱為嵌套框架。頂層框架在畫布上顯示其名稱，單擊可選擇其內(nèi)容。

 

使用框架工具 (F)，您可以用幾種不同的方式插入框架。

 

框架有明確的尺寸（寬和高），不會(huì)自動(dòng)調(diào)整大小以適應(yīng)其內(nèi)容。你可以使用調(diào)整大小 ??F，但你的框架不會(huì)隨著內(nèi)容的改變而自動(dòng)調(diào)整大小。你可以設(shè)置堆棧（應(yīng)用了堆棧布局的框架）始終適合其內(nèi)容。

 

您可以將圖層部分或全部置于框架邊界之外?？蚣艿?quot;剪切內(nèi)容"屬性可以控制邊界外的內(nèi)容是否可見。在原型設(shè)計(jì)中，將內(nèi)容置于邊界之外非常有用。

 使用框架工具 (F)，您可以用幾種不同的方式插入框架。

 

框架有明確的尺寸（寬和高），不會(huì)自動(dòng)調(diào)整大小以適應(yīng)其內(nèi)容。你可以使用調(diào)整大小 ??F，但你的框架不會(huì)隨著內(nèi)容的改變而自動(dòng)調(diào)整大小。你可以設(shè)置堆棧（應(yīng)用了堆棧布局的框架）始終適合其內(nèi)容。

 

您可以將圖層部分或全部置于框架邊界之外。框架的"剪切內(nèi)容"屬性可以控制邊界外的內(nèi)容是否可見。在原型設(shè)計(jì)中，將內(nèi)容置于邊界之外非常有用。

 

剪切畫框內(nèi)容會(huì)隱藏畫布上任何超出邊界的內(nèi)容。

 

如何設(shè)計(jì)框架

你可以像設(shè)計(jì)圖形一樣設(shè)計(jì)邊框的樣式，包括不透明度、邊角、填充、邊框和陰影。你還可以為它們添加模糊效果和色調(diào)。還可以應(yīng)用圖層樣式。

 

根據(jù)制作方式的不同，框架可能會(huì)有默認(rèn)樣式：

 

• 插入頂層框架時(shí)，會(huì)對(duì)其進(jìn)行白色填充。
• 插入嵌套框后，藍(lán)色填充會(huì)交替出現(xiàn)，因此多個(gè)嵌套框會(huì)形成鮮明對(duì)比。
• 讓所有內(nèi)容都包含在框架中。使用?F ，就不會(huì)應(yīng)用任何樣式。

 

畫布上的框架總是反映其樣式。頂層框架只有在有白色填充時(shí)才會(huì)顯示為白色，如果沒有填充，其背景就是透明的。

 

插入邊框時(shí)，默認(rèn)填充顏色會(huì)有所不同，以形成更好的對(duì)比。

 

有時(shí)，您可能希望填充頂層框架以便看清楚其中的內(nèi)容，但是設(shè)計(jì)本身并不需要填充。在這種情況下，在檢查器中禁用 "填充為內(nèi)容"意味著它不會(huì)顯示在導(dǎo)出、原型或?qū)嵗校ㄈ绻且粋€(gè)符號(hào)）。

 

最后，在使用陰影時(shí)要注意一些細(xì)微差別：如果一個(gè)框架只有一個(gè)陰影，且沒有填充、邊框或模糊，陰影就會(huì)應(yīng)用于其內(nèi)容（如組）。否則，陰影適用于框架本身。

 

框架的陰影可以投射到框架本身，如果框架沒有其他可見的樣式，也可以投射到框架的內(nèi)容上。

 

框架、圖層和父層

在使用框架的過程中，你會(huì)發(fā)現(xiàn)一些問題：

 

• 在現(xiàn)有圖層周圍繪制框架時(shí)，這些圖層將成為新框架的子圖層。
• 插入一個(gè)新圖層后，它就會(huì)成為與其最接近的框架的子圖層。
• 拖動(dòng)圖層時(shí)，其父框架會(huì)發(fā)生變化。

 

你甚至不需要學(xué)習(xí)這些規(guī)則，因?yàn)槲覀円呀?jīng)將其形象化了。當(dāng)你選擇一個(gè)圖層時(shí)，我們會(huì)用虛線邊框突出顯示其父框架。創(chuàng)建或移動(dòng)圖層時(shí)，我們會(huì)用實(shí)線邊框突出顯示其新的父框架。

 

在框架中插入或移動(dòng)圖層會(huì)自動(dòng)將其置于框架內(nèi)，并在視覺上突出顯示。

 

父層的目的是使畫布上的視覺層次結(jié)構(gòu)與圖層列表中的層次結(jié)構(gòu)保持同步。通過使兩者自動(dòng)匹配，您就不必對(duì)圖層列表進(jìn)行過多的操作，也不必一直操心著要牢記最新的圖層結(jié)構(gòu)。

 

在實(shí)際操作中，如果一個(gè)元素看起來位于畫布上另一個(gè)元素的內(nèi)部，那么它在圖層樹中就應(yīng)該位于該元素的內(nèi)部——因此，當(dāng)您移動(dòng)它時(shí)，它內(nèi)部的所有元素（也只有它內(nèi)部的元素）也會(huì)移動(dòng)。

 

如果不想讓 Sketch 自動(dòng)為圖層建立父層，可以按空格鍵跳過重新建立父層?；蛘?，您也可以調(diào)整圖層列表中的層次結(jié)構(gòu)。

 

選擇框架及其內(nèi)容

您可以通過單擊邊框范圍內(nèi)的任意位置（包括空白處）來選擇邊框，即使它沒有可見樣式（與組不同）。如果頂層框架有內(nèi)容，在其范圍內(nèi)單擊將選擇該內(nèi)容。按住 ? 并單擊將直接選擇任何框架。

 

要快速選擇框架內(nèi)的內(nèi)容，請(qǐng)按 X，然后單擊并拖動(dòng)來框選一個(gè)區(qū)域。這會(huì)選擇其中任何層級(jí)的任何圖層，但不會(huì)選擇框架本身。也可以在點(diǎn)擊和拖動(dòng)時(shí)按住 X。

 

按住 X 鍵可在框架上執(zhí)行選區(qū)選擇，選擇內(nèi)容而非框架本身。

 

如果您選擇了一個(gè)框架（或任何其他容器），可以按 Enter 鍵選擇其所有子層。全選?A 可以選擇與所選圖層位于同一容器中的所有其他圖層，如果沒有選擇任何圖層，則選擇頁面上的所有頂層圖層。右鍵單擊畫布上的圖層時(shí)，這些操作也會(huì)出現(xiàn)在 "選擇"菜單中。

 

框架使用指南

使用框架進(jìn)行布局設(shè)計(jì)時(shí)，尺寸調(diào)整和固定是核心內(nèi)容。

 

除了作為堆棧布局的容器外，框架之所以是界面設(shè)計(jì)的專用工具，還在于你如何使用其內(nèi)容。在框架中添加一個(gè)圖層，你會(huì)注意到兩件事：

 

• 檢查器中 "寬度 "和 "高度 "的下拉菜單。
• 在它們旁邊，是一個(gè)矩形控件，上面有一個(gè)由四條 T 形線環(huán)繞的 A；在畫布上，從你框選的區(qū)域到框出父框架的虛線方框會(huì)有虛線

 

這些元素可以控制大小和縮放——這是在框架中進(jìn)行布局工作的兩個(gè)重要因素。我們?cè)谶@里做了一些非常重要的改動(dòng)，這些改動(dòng)會(huì)影響 Sketch 中的所有圖層。

 

邊框內(nèi)容尺寸選項(xiàng)

尺寸反映了某個(gè)圖層相較于父圖層的大小，或者其相較于該圖層內(nèi)容的大小。我們很早就有了控制圖層大小的方法，但在這里我們做了一些重大改進(jìn)。

 

尺寸標(biāo)準(zhǔn)化且突出

圖層的寬度和高度可以是 "固定""適合""填充 "或 "相對(duì)"，具體取決于上下文：

 

• 固定：圖層的大小是絕對(duì)的，在調(diào)整其父層大小時(shí)不會(huì)按比例調(diào)整。如果將圖層兩端固定在父圖層上，則仍可調(diào)整其大小，詳情請(qǐng)見下文。
• 適合：圖層的大小始終適合其內(nèi)容。適用于堆疊和文本。
• 填充：圖層的大小將填充其父層。適用于堆棧內(nèi)的圖層。
• 相對(duì)：圖層的大小相對(duì)于其父層。當(dāng)父圖層調(diào)整大小時(shí)，它也會(huì)隨之調(diào)整。

 

這將我們擁有的兩種不同屬性結(jié)合在一起：調(diào)整大小面板中的固定大小控件，以及文本面板中的純文本自動(dòng)寬度/自動(dòng)高度/固定大小分段控件。

 

固定尺寸是默認(rèn)尺寸選項(xiàng)

每個(gè)新圖層都有固定的寬度和高度，但通過單擊或粘貼創(chuàng)建的文本圖層除外，這些圖層默認(rèn)為 "適合"。

 

調(diào)整框架大小時(shí)，默認(rèn)大小設(shè)置（固定或適合）的圖層不會(huì)按比例調(diào)整大小。這是界面工作的一個(gè)更好的起點(diǎn)。

 

默認(rèn)情況下，大多數(shù)圖層都有 "固定大小"選項(xiàng)，但根據(jù)具體情況，還有更多選項(xiàng)可供選擇。

 

您還可以使用以下簡便方式進(jìn)行尺寸調(diào)整：

 

• 懸停或拖動(dòng)圖層的邊緣/角落時(shí)，我們會(huì)在光標(biāo)旁邊顯示 "適合 "或 "填充 "圖層的寬度和高度。固定尺寸和相對(duì)尺寸只顯示其大小。
• 直接調(diào)整 "合適 "尺寸圖層的大小，可使其在調(diào)整后的軸上變?yōu)?"固定"。
• 雙擊框架、圖形或文本圖層的邊緣/角落，可調(diào)整大小以適應(yīng)其內(nèi)容。如果圖層支持"適合"，這也會(huì)將圖層的大小調(diào)整為 "適合"。你也可以通過 ??F、檢查器、圖層菜單或命令欄來實(shí)現(xiàn)。
• 在堆棧中支持 "填充"的圖層上，可以?-雙擊邊緣/角落將其設(shè)置為 "填充"。

 

固定框架內(nèi)容

固定反映了某圖層相較于父圖層尺寸的位置，或相較于該圖層自身尺寸的位置。這只適用于非堆棧的框架，在這種情況下，固定是不適用的。

 

我們一直都有“固定”操作，就像尺寸調(diào)整一樣，但我們對(duì)其進(jìn)行了一些重大改進(jìn)。

 

默認(rèn)情況下，圖層的固定點(diǎn)位于左上角

創(chuàng)建新圖層時(shí)，默認(rèn)其左上角是固定點(diǎn)。因此，當(dāng)你調(diào)整一個(gè)框架的大小時(shí)，它的內(nèi)容（以及默認(rèn)固定點(diǎn)）不會(huì)被重新定位，而是保持在左上角。再配合固定尺寸，這對(duì)于界面設(shè)計(jì)工作更加友好。

 

使用自動(dòng)固定可以加快速度

在進(jìn)行動(dòng)態(tài)設(shè)計(jì)時(shí)，你不會(huì)希望所有圖層都固定在左上角。你更可能將圖層固定在它們最靠近的邊緣，而手動(dòng)操作非常繁瑣。為此，我們添加了自動(dòng)固定功能。它會(huì)考慮圖層的大小和相對(duì)于父容器的位置，自動(dòng)為你應(yīng)用固定。

 

要使用自動(dòng)固定，請(qǐng)單擊檢查器中固定控件中心的 [A] 按鈕，或按 ?A 鍵。按鈕周圍的小標(biāo)記會(huì)顯示應(yīng)用哪些自動(dòng)固定點(diǎn)，為你提供有用的預(yù)覽。

 

考慮到圖層的大小和在其容器中的位置，自動(dòng)為您應(yīng)用固定。

 

在框架部分的標(biāo)題中，你會(huì)發(fā)現(xiàn)一個(gè)按鈕，可以一次性自動(dòng)固定框架的全部內(nèi)容。懸停該按鈕可在畫布上預(yù)覽應(yīng)用了哪些固定點(diǎn)。你也可以在菜單或命令欄中找到 "自動(dòng)固定內(nèi)容"，或通過快捷鍵 ??A 找到。

 

使用固定不止能調(diào)整尺寸

圖層固定不僅適用于調(diào)整圖層父對(duì)象的大小。當(dāng)你編輯圖層的寬度或高度、使用方向鍵調(diào)整圖層大小、交換符號(hào)以及使用不同的粘貼操作時(shí)，我們都會(huì)尊重圖層的固定位置，這樣你的設(shè)計(jì)就能保持原樣。

 

最后，我們?cè)黾恿艘恍┦褂霉潭ǖ暮啽惴绞剑?/p>

 

• 當(dāng)您將圖層對(duì)齊到其容器的邊緣或中心時(shí)（例如向右對(duì)齊或垂直對(duì)齊），我們會(huì)相應(yīng)地調(diào)整固定點(diǎn)。
• 通過右鍵單擊檢查器的圖層固定控件、"圖層 > 引腳"菜單或 "命令欄"，可以快速設(shè)置圖層所有、無或默認(rèn)固定。
• 如果圖層被固定在一條邊上，在固定控件中?單擊對(duì)邊可以切換固定，而不是同時(shí)添加兩條邊。如果兩邊都沒有固定住，? 單擊會(huì)同時(shí)固定住兩邊；如果兩邊都固定住了，? 單擊會(huì)移除它們。
• 要暫時(shí)隱藏表示固定點(diǎn)和父容器的虛線，請(qǐng)按住空格鍵（空格拖動(dòng)平移也會(huì)隱藏高光部分）。

 

尺寸和固定如何配合使用

調(diào)整任何框架（包括頂層框架）的大小時(shí)，其內(nèi)容也會(huì)基于固定設(shè)置和尺寸設(shè)置而變化，調(diào)整會(huì)影響到內(nèi)部的內(nèi)容，等等。

 

在默認(rèn)的大小和固定設(shè)置（固定/適合大小，左上角固定）下，不會(huì)發(fā)生很多情況；框架的大小會(huì)調(diào)整，但其中的所有內(nèi)容都會(huì)保持其相對(duì)于左上角的大小和位置。

 

不過，通過正確的固定和大小設(shè)置，您可以讓設(shè)計(jì)流暢地適應(yīng)環(huán)境：

 

• 在一端固定的固定層或貼合層尺寸不變，位置固定不變
• 兩端都固定的圖層會(huì)調(diào)整尺寸，以保持到邊緣的距離
• 未固定的圖層會(huì)按比例調(diào)整位置（居中的圖層需要這樣做）
• 相對(duì)大小圖層按比例調(diào)整框架大小。

 

調(diào)整框架的大小時(shí)，其內(nèi)容也會(huì)依據(jù)尺寸和固定屬性而變化。

 

有時(shí)您想調(diào)整框架的大小，但又不想改變框架內(nèi)的任何內(nèi)容，我們?yōu)槟峁┝藥追N方法。您可以：

 

• 用光標(biāo)調(diào)整框架大小時(shí)，按住 ? 不放
• 使用??箭頭按你的推移量調(diào)整大小（添加 ? 以獲得更大的推移量）
• 按?? 鍵進(jìn)入框架的編輯模式。你也可以雙擊框架的背景，按下工具欄上的編輯，或圖層 > 編輯。在這里，你可以調(diào)整它的大小，或使用箭頭鍵移動(dòng)框架的邊界與其內(nèi)容的關(guān)系。

 

在框架上使用 "按尺寸調(diào)整 "也會(huì)使其內(nèi)容保持原樣，使框架與內(nèi)容相匹配。

 

在框架上使用 "編輯 "模式是調(diào)整其大小而不調(diào)整其內(nèi)容的方法之一。

 

框架和原型

由于框架有固定的大小，這使它們成為滾動(dòng)的完美容器。你可以通過檢查器的 "原型 "選項(xiàng)卡、"原型 "菜單或 "命令欄 "為任何框架（包括頂層框架和嵌套框架）啟用滾動(dòng)功能。

 

要實(shí)現(xiàn)滾動(dòng)，框架的內(nèi)容必須超出其邊界，否則滾動(dòng)后不會(huì)出現(xiàn)新內(nèi)容。您可以使用 "剪切內(nèi)容 "復(fù)選框在畫布上顯示或隱藏超出邊界的內(nèi)容，但這并不會(huì)影響滾動(dòng)行為。

 

您可以輕松地在框架（包括嵌套框架）中創(chuàng)建滾動(dòng)交互原型。

 

對(duì)于頂層框架來說，如果有大量內(nèi)容超出邊界，就很難處理，因此可以定義它們的滾動(dòng)視口（播放原型時(shí)滾動(dòng)的區(qū)域）。有兩種選擇：

 

• 框架：默認(rèn)選項(xiàng)，如上所述。框架邊界定義了滾動(dòng)視口的大小，任何超出邊界的內(nèi)容都會(huì)在其范圍內(nèi)滾動(dòng)。
• 自定義：你可以為滾動(dòng)視口設(shè)置寬度和高度，或使用模板尺寸，然后讓你的框架更高或更寬，以定義滾動(dòng)的距離。這就是滾動(dòng)畫板的工作原理。

 

頂層框架可以自定義滾動(dòng)視口，這樣就可以在其范圍內(nèi)處理所有內(nèi)容。

 

我們移除了“建立滾動(dòng)分組”的選項(xiàng)?，F(xiàn)有的滾動(dòng)組可繼續(xù)使用，但您將無法創(chuàng)建新的滾動(dòng)組，并且我們建議您將滾動(dòng)組轉(zhuǎn)變?yōu)榭蚣堋?/p>

 

坐標(biāo)、標(biāo)尺、指南和粘貼

我們還做了其他一些事情，讓您能更好地使用框架。

 

圖層的 X 和 Y 坐標(biāo)是相對(duì)于其框架而言的

圖層的 X 坐標(biāo)和 Y 坐標(biāo)是相對(duì)于最接近的框架，而不是頂層框架。

 

例如：如果將一個(gè)圖層放置在距離其父框架左上角 8px 的位置，那么即使父框架嵌套了很多層，在檢查器中也會(huì)顯示 X:8 和 Y:8。組不會(huì)影響這一點(diǎn)，因此組內(nèi)圖層的坐標(biāo)仍然是相對(duì)于框架的。

 

粘貼容器時(shí)將粘貼到容器內(nèi)部

如果你選擇了一個(gè)容器（框架、圖形、組），標(biāo)準(zhǔn)的粘貼操作 ?V 會(huì)將圖層粘貼到容器內(nèi)——這是對(duì)組的改變。要粘貼為容器的同級(jí)層，可以粘貼過 ??V，或選擇其父層，然后粘貼到其內(nèi)部。

 

粘貼時(shí)保留固定邊設(shè)置

 

粘貼會(huì)將圖層放在容器內(nèi)，并保留它們相對(duì)于原始容器的位置。

 

剪切/復(fù)制一個(gè)圖層并粘貼到其他地方時(shí)，我們會(huì)保留它原來的布局。例如，復(fù)制一個(gè)圖層并將其粘貼到距其框架右邊緣 20px 的位置，然后將其粘貼到另一個(gè)容器中，就會(huì)將其置于距右邊緣 20px 的位置。如果無法實(shí)現(xiàn)時(shí)（例如，因?yàn)槟阋獜囊粋€(gè)大框架復(fù)制到一個(gè)小得多的框架），我們就會(huì)把它放在中心位置。

 

我們還添加了 "粘貼和替換"??R，它可以用你粘貼的內(nèi)容替換你選擇的圖層。在這種情況下，我們會(huì)保留要替換的原始圖層的固定點(diǎn)和位置。

 

框架定義標(biāo)尺原點(diǎn)并 "擁有"其參考線

我們已經(jīng)介紹過框架和圖形如何為其內(nèi)容定義坐標(biāo)原點(diǎn)，標(biāo)尺的原點(diǎn)也是如此，即您選擇的任何框架的左上角。

 

如果你選擇了一個(gè)圖層并放置了一個(gè)參考線，那么它就被包含它的框架所 "擁有"。如果您選擇了一個(gè)框架并想在其中放置導(dǎo)圖，只需確保先選擇框架中的某項(xiàng)內(nèi)容即可。

 

由于每個(gè)框架都包含自己的參考線，因此移動(dòng)一個(gè)框架會(huì)帶來它所擁有的參考線。當(dāng)你選擇一個(gè)圖層時(shí)，你會(huì)看到其包含的框架的參考線，以及圖層樹上所有祖先框架的參考線。

 

網(wǎng)格的工作原理類似：每個(gè)框架都有自己的網(wǎng)格，可以獨(dú)立控制。

 

什么是圖形（graphics）？

圖形與框架有許多共同點(diǎn)：可嵌套、支持樣式、支持多級(jí)圖層，并且有自己的尺寸。創(chuàng)建圖形的方法類似（按 G 鍵即可），選擇圖形的操作也完全相同。

 

從表面上看，它們之間的差異似乎很?。?/p>

 

• 其選中控制點(diǎn)是圓形的，而不是方形的。
• 頂層圖形默認(rèn)情況下不輸出白色填充。
• 真正的區(qū)別——也是圖形存在的全部理由——在于它們的內(nèi)容。

 

圖形（graphics）是什么？

作為提醒，下面介紹了框架內(nèi)容的使用特點(diǎn)：

• 框架內(nèi)容具有可見的布局屬性（大小和固定）。
• 框架根據(jù)大小和固定屬性調(diào)整其內(nèi)容的大小。
• 框架支持堆棧布局和智能布局（傳統(tǒng)）。

 

圖形的情況則完全不同：

• 圖形沒有可見的布局屬性（只有文本有大小選項(xiàng)）。
• 圖形會(huì)按比例調(diào)整其內(nèi)容的大?。ㄆ浣M也是如此）。
• 圖形不支持堆?；蛑悄懿季帧?/li>

 

框架和圖形的不同用途體現(xiàn)在它們?nèi)绾握{(diào)整內(nèi)容的大小。

 

換句話說，“圖形”有意移除了適用于界面設(shè)計(jì)和布局設(shè)計(jì)的框架特性。它沒有布局屬性，畫布上沒有固定標(biāo)識(shí)，檢查器更緊湊，有更多的樣式空間，也不需要按比例調(diào)整大小。因此，它是一個(gè)專為圖標(biāo)、插圖和其他圖形工作而設(shè)計(jì)的容器。

 

如何使用圖形

那么，哪些情況適合使用圖形呢？

 

• 獨(dú)立設(shè)計(jì)圖標(biāo)和插圖按 G 鍵，你就能在檢查器中找到圖形專用模板，其中包含常用尺寸的圖標(biāo)等，或者直接繪制圖形。
• 將它們用作符號(hào)。事實(shí)上，圖形也可以是符號(hào)。將它們放入框架或其他任何地方。實(shí)例還可以按比例調(diào)整大小，如果你使用的是可縮放圖標(biāo)，那就再好不過了。
• 就地設(shè)計(jì)。您可能更喜歡在用戶界面元素中要用到圖標(biāo)的地方設(shè)計(jì)新圖標(biāo)。圖形是可以嵌套的，所以你可以在一個(gè)框架內(nèi)畫一個(gè)圖形，然后在那里設(shè)計(jì)你的圖標(biāo)。

 

我們非常重視圖標(biāo)設(shè)計(jì)和插圖，因此打造一個(gè)易用好用的工作流程對(duì)我們來說非常重要。盡管如此，你可能會(huì)覺得缺少了一些東西，比如圖形縮放，而不僅僅是按比例調(diào)整大??；或者單獨(dú)瀏覽圖形符號(hào)。我們也有同感！我們不會(huì)在這里做出任何具體的承諾，但我們確實(shí)認(rèn)為這個(gè)版本是圖形故事的開端。

 

分組呢？

看了這么多關(guān)于框架和圖形的介紹，你可能會(huì)想：“現(xiàn)在群組還有什么用？”這是一個(gè)合理的問題，但沒錯(cuò)——群組在 Sketch 中仍然發(fā)揮作用。

 

首先，讓我們來看看組在新容器中是如何運(yùn)行的。

 

如何在框架和圖形中使用分組

以前，群組會(huì)根據(jù)尺寸設(shè)置限制調(diào)整其內(nèi)容——默認(rèn)情況下不啟用這些限制設(shè)置，因此內(nèi)容會(huì)按比例調(diào)整大小，除非你另有設(shè)置。有了 Athens，框架和圖形可以設(shè)置這些規(guī)則，而組只需遵循這些規(guī)則即可：

 

• 框架具有大小和固定功能，因此組會(huì)根據(jù)這些設(shè)置調(diào)整內(nèi)容。
• 圖形按比例調(diào)整大小，因此組也按比例調(diào)整內(nèi)容大小。

 

如何使用分組

那么，分組有什么用呢？對(duì)于框架和圖形來說，答案各不相同。

 

在圖形設(shè)計(jì)中，群組在設(shè)計(jì)圖標(biāo)、插圖等方面仍然非常有用。它們將相關(guān)元素組合在一起，因此你可以一次性移動(dòng)它們，并將它們作為一個(gè)整體調(diào)整大小。

 

在框架中，組的使用可能會(huì)少很多，但它們?nèi)匀缓苡杏?。如果你想把一些圖層集中在一個(gè)容器中，而這個(gè)容器又沒有自己的樣式或大小，也不是一個(gè)堆棧，那么組就是一個(gè)很好的選擇。

 

例如，在一個(gè)畫面中，有一些文字需要移動(dòng)到一起。在這種情況下，如果你將這些文字圖層分組，然后需要將其中一個(gè)向下移動(dòng)幾個(gè)像素，你就不必調(diào)整分組來停止剪切，因?yàn)槿航M不會(huì)應(yīng)用自己的尺寸。

 

全新的設(shè)計(jì)工作流程

框架和圖形將是設(shè)計(jì)工作流程的重大升級(jí)。雖然我們也重視用戶長期以來形成的習(xí)慣——否則我們自己的設(shè)計(jì)師也會(huì)抱怨——但還是需要進(jìn)行一些調(diào)整。為了在這一過程中為您提供幫助，在下文中我將：

 

1.解釋打開現(xiàn)有文檔時(shí)會(huì)發(fā)生什么情況

2.提醒您需要注意的變化，包括在現(xiàn)有文檔中

3.給你一些采用框架和圖形工作流程的提示。

 

用Athens打開現(xiàn)有文件

當(dāng)您打開現(xiàn)有文檔時(shí)，Sketch 對(duì)其幾乎不做任何處理：

 

• 畫板會(huì)變成框架。如果沒有背景色，它們會(huì)被填充為白色。任何有滾動(dòng)功能的圖板都會(huì)以其原始模板作為滾動(dòng)視口進(jìn)行垂直滾動(dòng)。符號(hào)源也會(huì)變成框架，因?yàn)樗鼈冊(cè)诩夹g(shù)上也是藝術(shù)圖板。
• 層采用新的尺寸屬性：

-畫板：現(xiàn)在的框架，可獲得固定寬度和高度。

-文本：尺寸自適應(yīng)取代了 "自動(dòng)"（尺寸）。非自動(dòng)尺寸遵循下述規(guī)則。

-其他圖層：根據(jù)固定尺寸約束獲取固定或相對(duì)寬度/高度——如果某個(gè)軸啟用了固定尺寸約束，則該軸為固定軸；如果未啟用，則為相對(duì)軸。

 

其他一切保持原樣：組還是組，固定保持不變，等等。我們不想對(duì)你的文檔進(jìn)行大規(guī)模的改動(dòng)，我們認(rèn)為最好還是由你來控制將文檔升級(jí)為框架和圖形的工作流程。

 

現(xiàn)有文檔中的組仍然是組，但我們會(huì)建議您將其轉(zhuǎn)換為框架。

 

打開舊文檔時(shí)，您可能會(huì)看到 "將組轉(zhuǎn)換為框架 "的建議。它會(huì)引導(dǎo)你查看我們認(rèn)為可以從框架中受益的組，你可以單獨(dú)轉(zhuǎn)換、跳過或全部轉(zhuǎn)換。如果時(shí)機(jī)不對(duì)，請(qǐng)將其刪除，它就不會(huì)再出現(xiàn)在該文檔中。你可以隨時(shí)在文件菜單中找到這項(xiàng)功能。

 

逐一查看組別，將其轉(zhuǎn)換為框架或跳過，或一次性全部轉(zhuǎn)換。

 

您還可以通過點(diǎn)擊組部分標(biāo)題、選擇排列 > 容器菜單或命令欄將任何組更改為框架或圖形。

 

您可以在檢查器的頂部輕松查看和更改容器的類型。

 

新方法，舊文件

如果您打開了Athens版本前的文件，請(qǐng)注意以下以下突出變化：

 

• 調(diào)整頂層框架的大小可調(diào)整其內(nèi)容。以前，這是一個(gè)選擇性屬性。如果框架的內(nèi)容具有相對(duì)大小或沒有固定（這很有可能），那么調(diào)整框架大小就會(huì)調(diào)整這些內(nèi)容。因此，將框架的所有子代設(shè)置為固定大小，并固定（或自動(dòng)固定）它們?；蛘甙醋?? 鍵調(diào)整框架大小，但不調(diào)整其內(nèi)容。
• 分離符號(hào)后會(huì)得到一個(gè)框架。而在以前，這樣做后會(huì)得到一個(gè)分組。
• 修改器 ? 已更改。現(xiàn)在它可以調(diào)整容器的大小，而無需調(diào)整其內(nèi)容。要旋轉(zhuǎn)畫布上的圖層，請(qǐng)將鼠標(biāo)懸停在其邊界外，直到出現(xiàn)旋轉(zhuǎn)光標(biāo)。要在畫布上調(diào)整圖層大小或移動(dòng)圖層時(shí)忽略折疊，請(qǐng)按住 ?。
• 更改了多個(gè)快捷鍵。搜索圖層現(xiàn)在是??F，因?yàn)?F 將圖層包裹在框架中。切換填充現(xiàn)在是 ?F，因?yàn)?F 激活了框架工具。您可在更新日志中查看所有更改。

 

采用全新的工作流程

希望框架和圖形對(duì)您有意義，但舊習(xí)難改。工作流程發(fā)生了如此大的轉(zhuǎn)變，需要一點(diǎn)時(shí)間來適應(yīng)是很正常的。以下是我們?cè)谶@方面的最佳建議：

 

1.了解你需要的設(shè)計(jì)類型。用于界面和布局工作的框架。用于圖標(biāo)、插圖和其他圖形工作的圖形。用于進(jìn)一步組織圖層的組。

2.按 F 繪制用戶界面。按 R 可能是最難改掉的習(xí)慣，但卻能帶來最大的回報(bào)。在界面工作中使用框架會(huì)讓你的生活更輕松，而不會(huì)有那些煩人的絆腳石。

3.讓自動(dòng)固定來做。固定尺寸是默認(rèn)設(shè)置，如果進(jìn)行自由布局，固定是你需要調(diào)整最多的部分——而自動(dòng)固定可以節(jié)省你大量的時(shí)間。習(xí)慣?A，你就會(huì)喜歡上它。

4.堆棧，堆棧，堆棧。我們?cè)谶@里沒有介紹堆棧，但堆棧是一種強(qiáng)大的布局工具：按鈕、菜單、導(dǎo)航、列表、整個(gè)屏幕……它們無所不能。去讀讀吧。你會(huì)經(jīng)常點(diǎn)擊?L。

 

我們希望您同意，這一版本讓 Sketch 感覺像是 "一個(gè)全新的應(yīng)用程序"。開始使用框架和圖形后，您很快就會(huì)想繼續(xù)探索如果用一種新的方式使用Sketch。

 

我們很高興看到您使用 "框架"、"圖形 "和 "堆棧 "進(jìn)行創(chuàng)作，請(qǐng)?jiān)囉肁thens，并告訴我們它是如何影響您的工作流程的——您的反饋將推動(dòng)我們下一步的工作。