關(guān)于教程

對(duì)應(yīng)MacOS上的（符號(hào)）功能，雖然有智能物體的功能，但我見過很多設(shè)計(jì)師更愿意吐槽它是“智障物體”。 因?yàn)樵赨I設(shè)計(jì)工作流程中，它簡直就是一個(gè)省時(shí)神器。 一個(gè)按鈕樣式，轉(zhuǎn)換后，修改文案只是改變輸入框的內(nèi)容而已。

本文致力于通過靈活的方法讓擁有類似的設(shè)計(jì)和實(shí)現(xiàn)能力成為可能。

先展示一個(gè)應(yīng)用效果：

是不是覺得有點(diǎn)意思呢？ 請(qǐng)繼續(xù)閱讀。

關(guān)于智能對(duì)象

假設(shè)此時(shí)網(wǎng)頁中有幾個(gè)復(fù)選框需要勾勒出來。 PSD設(shè)計(jì)稿中需要多少個(gè)智能對(duì)象才能達(dá)到畫面中的療效？

你可能可以自信地說sketch智能對(duì)象，兩個(gè)。 一項(xiàng)已選中，一項(xiàng)未選中。 盡管只需要 1 個(gè)具有 2 個(gè)視口復(fù)合狀態(tài)的智能對(duì)象。 本教程就是為了解決這個(gè)問題。

制作智能對(duì)象

1. 勾選復(fù)選框，通過右鍵單擊相應(yīng)視口或自定義快捷鍵將其轉(zhuǎn)換為智能對(duì)象。

2. 然后雙擊視口列表中智能對(duì)象的縮略圖，或者通過屬性面板編輯智能對(duì)象，進(jìn)入智能對(duì)象的編輯畫布。

3、在復(fù)選框中間畫對(duì)號(hào)，復(fù)選框的未選中狀態(tài)和選中狀態(tài)。

構(gòu)建不同的視口復(fù)合狀態(tài)

1、通過-Layer 的菜單，使 的選項(xiàng)卡可見：

2、這一步是最重要的。 此時(shí)，三個(gè)視口的可見性就按照要求進(jìn)行了處理。 之后sketch智能對(duì)象，單擊“視口合成”面板中的“新建”圖標(biāo)（與新視口相同的圖標(biāo)）。

圖中的“應(yīng)用到視口”有可見性、位置和外觀（視口樣式）的選項(xiàng)，你可以通過選擇你需要的來切換不同的狀態(tài)。 編輯名稱，如“未勾選”（使設(shè)計(jì)稿更加規(guī)范）。 然后單擊“確定”。 以同樣的方式，使未選定的視口不可見，選定的視口可見，并創(chuàng)建一個(gè)新的視口復(fù)合“”。

3. 按快捷鍵Ctrl+S 或通過文件存儲(chǔ)保存智能對(duì)象，并返回Web 界面。

4、此時(shí)，選中這個(gè)復(fù)選框智能對(duì)象，你會(huì)發(fā)現(xiàn)你已經(jīng)可以在屬性面板中選擇不同的狀態(tài)了。

你完成了

最后一步是用Ctrl+J復(fù)制并排列這個(gè)智能對(duì)象，然后根據(jù)需要選擇視口復(fù)合狀態(tài)：

舉一反三，舉一反三，我相信這是很多設(shè)計(jì)師已經(jīng)具備的能力。 所以你一定已經(jīng)看到，教程中提到的反例可以應(yīng)用于很多場景。 歡迎大家集思廣益，在文章下方發(fā)表你的看法。

結(jié)語

本次教程就到這里了。 希望大家在實(shí)踐中多思考、多理解生產(chǎn)思路和操作方法，并靈活學(xué)習(xí)和運(yùn)用。

如有侵權(quán)請(qǐng)聯(lián)系刪除！