在「質(zhì)」與「量」的雙重需求之下，產(chǎn)品設(shè)計不僅要保持高效的迭代速度，搶占新興應(yīng)用市場，更要不斷打磨產(chǎn)品細節(jié)，提供更加極致的用戶體驗。

Pixso作為新一代產(chǎn)品設(shè)計工具，一直將產(chǎn)品設(shè)計的效率放在首位，通過在線協(xié)作、規(guī)范組件庫、自動布局等功能，改變原有的生產(chǎn)協(xié)作方式。在用戶的反饋和建議中，帶來了很多行之有效的提效方法。

本期內(nèi)容，給大家總結(jié)了10個Pixso設(shè)計提效技巧，都是日常設(shè)計中高頻使用到的功能，幫你告別繁瑣的操作步驟，早日擺脫無盡的加班痛苦。

下面，就一起探索這些設(shè)計中的寶藏技巧吧！

組件化思維是通過對功能和視覺中元素的拆解、歸納、重組等，并基于可復(fù)用的目的，形成規(guī)范化的模板。組件化思維可以避免一次性設(shè)計，同時保持團隊設(shè)計的一致性，讓設(shè)計師專注到業(yè)務(wù)體驗的提升。

組件庫

與傳統(tǒng)的組件庫相比，Pixso組件庫最大的優(yōu)勢就是協(xié)作屬性，它可以降低組件傳輸和同步的成本，同時與設(shè)計軟件深度集成，讓組件庫的創(chuàng)建和復(fù)用都更加便捷。

完成規(guī)范組件庫的設(shè)計后，只需要選中對應(yīng)的組件，在「右鍵」菜單欄中選擇「創(chuàng)建組件」，將組件上傳到「本地組件庫」中，即可在文件內(nèi)部復(fù)用。

想要在其他文件或團隊中復(fù)用，可以點擊管理資源庫內(nèi)的「發(fā)布」按鈕，將組件上傳到團隊組件庫。也可以點擊「管理資源庫」，查看團隊所有組件資源，可以更具需求開啟組件庫，方便組件的高效管理。

后期需要創(chuàng)建新的項目，可以點擊畫布左側(cè)「組件」按鈕，通過簡單拖拽的方式，在新頁面中復(fù)用規(guī)范組件，減少頁面搭建的成本。也可以使用組件搜索功能，高效獲取所需的組件。

樣式

在設(shè)計文件中，顏色、文字、字號、邊距、效果等，都可以稱之為樣式。我們可以通過創(chuàng)建樣式的方式，形成單一樣式的設(shè)計規(guī)范，并在其他設(shè)計元素中高效復(fù)用。

這里就以單一顏色樣式為例，給大家演示樣式的創(chuàng)建方法：

Step1：選中需要共享的樣式；

Step2：選擇對于屬性面板「樣式」按鈕；

Step3：點擊創(chuàng)建樣式；

Step4：輸入對應(yīng)的樣式名稱，如藍色。

完成樣式的創(chuàng)建后，即可在其他元素上復(fù)用：

Step1：選中想復(fù)用樣式的對象；

Step2：點擊「樣式」按鈕；

Step3：選中目標(biāo)樣式，點擊復(fù)用。

我們可以看到，當(dāng)選擇任意組件和元素，右側(cè)功能面板對應(yīng)屬性的右側(cè)就會出現(xiàn)「樣式」按鈕，點擊就可以完成對應(yīng)屬性樣式的創(chuàng)建和復(fù)用啦~

通過組件庫和樣式的搭建，可以幫助設(shè)計師構(gòu)建組件化思維，當(dāng)遇到一些新的設(shè)計項目，可以直接調(diào)用規(guī)范組件和樣式，減少重復(fù)設(shè)計的現(xiàn)象，節(jié)省出來大量的設(shè)計時間，專注到設(shè)計體驗的提升。

一套完整的設(shè)計方案，通常會包含多種配色模式，如「深色」和「淺色」模式等，假如想要創(chuàng)建一套新的配色，傳統(tǒng)的方式是將頁面的配色進行逐一替換，過程繁瑣還容易造成錯漏。

使用Pixso組件庫替換功能，只需要創(chuàng)建一套新的配色方案，就可以一鍵替換對應(yīng)組件庫，實例中的組件、樣式、配色等也會自動同步，免除手動替換的困擾。

下面就給大家演示一下：

Step1：打開「組件」面板；

Step2：點擊「管理資源庫」圖標(biāo)；

Step3：選擇想要用于替換的組件庫；

Step4：點擊「替換」按鈕，等待替換完成即可。

組件變體是把多個引用組件合并為一個整體，通過對屬性的設(shè)置制作可以切換不同狀態(tài)的超級組件。在一些特定場景下，組件需要在不同操作邏輯下呈現(xiàn)不同形態(tài)，就要使用組件變體功能。

Pixso組件變體的創(chuàng)建非常簡單，例如設(shè)置面板「按鈕狀態(tài)」的組件，只需要通過以下5步：

Step1：繪制不同形態(tài)的按鈕，將按鈕復(fù)制出來；

Step2：選中某個按鈕，點擊右鍵選擇「創(chuàng)建組件」，將三個按鈕分別生成組件；

Step3：依次選中三個組件，點擊右側(cè)「創(chuàng)建變體組件」，然后將組件命名成它們對應(yīng)的狀態(tài)；

Step4：點擊變體欄右側(cè)的「更多」按鈕，選擇「新增屬性」創(chuàng)建變體屬性。然后選中組件，依次修改它們的屬性狀態(tài)（如開啟、關(guān)閉屬性）；

Step5：將創(chuàng)建的組件集拖拽到界面中對應(yīng)的位置，組件就創(chuàng)建完成啦。

設(shè)計的過程中經(jīng)常遇到多個占符的情況，不少小伙伴還在一張張的填充內(nèi)容，或者將圖片拖入Pixso在逐一填充。使用快速填充功能，只要按下「Ctrl + Shift + K」選中多張圖片或動圖，就可以依次填充圖片啦。

如上圖所示，光標(biāo)下方會顯示剩余填充的圖片數(shù)量，每填充一張圖片數(shù)字逐一變小，清晰呈現(xiàn)剩余填充的圖片數(shù)量。

自動布局能夠建立高效的設(shè)計規(guī)范，在增加、刪除、修改某些元素時，無需調(diào)整相鄰元素位置和尺寸，并自動適配成為最佳狀態(tài)，避免牽一發(fā)而動全身的狀況。

在設(shè)計師的日常工作，除了20%在發(fā)揮創(chuàng)意，剩下的80%都是在重復(fù)勞動；而這80%的重復(fù)勞動中，又有80%和布局相關(guān)。掌握自動布局的技巧，如同掌握設(shè)計提效的關(guān)鍵技能。

添加/刪除

例如APP菜單欄的設(shè)計，需要添加或刪除一個icon，使用自動布局功能，選中icon添加「自動布局」選項，對齊方式改為「均勻分布」，icon就會自動適配到欄目中，方便后期隨時添加和刪除。

響應(yīng)式布局

遇到不同屏幕尺寸的適配，需要對一些元素做拉伸處理，如何讓父級元素跟隨規(guī)則自適應(yīng)變化呢？

我們可以為頁面添加自動布局，選擇左上角對齊方式，將分布方式改為均勻分布，上下方內(nèi)嵌的兩個父級就會跟隨自適應(yīng)，不用手動進行逐一適配。

當(dāng)你對文字進行新增或刪除后，文本框的高度變化也會被視為拉伸，卡片也會跟隨自適應(yīng)變化。

絕對定位

遇到消息通知、播放按鈕等設(shè)計，需要把對于元素插入自動布局中，元素一般會自動吸附在現(xiàn)有布局，按照現(xiàn)有布局關(guān)系自動排列，很難靈活調(diào)整位置。

這時候我們可以使用絕對定位功能，將對應(yīng)元素拖入自動布局內(nèi)，就會觸發(fā)「絕對定位」按鈕，點擊即可不受現(xiàn)有布局約束，任意擺放到任意位置。

在同一個設(shè)計界面中，通常會有很多相同的設(shè)計樣式，這些樣式可能涵蓋數(shù)十個屬性，如果每個圖標(biāo)都重新設(shè)置屬性，必然造成大量重復(fù)勞動。

使用復(fù)制屬性功能，元素包含的文本屬性、描邊屬性、效果屬性、填充屬性等，可以一鍵復(fù)制元素的所有屬性，并粘貼應(yīng)用到其他設(shè)計元素，原本需要幾步甚至幾十步才能完成的工作，只需要復(fù)制、粘貼即可完成。

復(fù)制屬性：Ctrl+Alt+C；

粘貼屬性：Ctrl+Alt+V。

面對一些大型設(shè)計項目，因為圖層的層級過多，想要選中下層的元素，通常需要反復(fù)雙擊，面對元素的批量調(diào)整時，這種選中方式就很費力。

你可以按照 Command 的同時用鼠標(biāo)點擊，這樣可以直接選擇最里層的元素。但如果你想選中不是最里層，而是倒數(shù)的N層，建議嘗試使用以下快捷鍵：

選擇下層：回車鍵

選擇上層：Shift + 回車鍵

選擇下一個：Tab

取消選擇：Esc

相信很多設(shè)計師一定看過一些快捷鍵操作，但是實際操作起來總是讓人摸不著頭腦。可以點擊菜單欄選項中的「快捷鍵指南」按鈕，即可打開快捷鍵面板，清晰呈現(xiàn)所有的快捷鍵內(nèi)容，幫助大家更加高效的設(shè)計。

你也可以點擊最右邊「自定義快捷鍵」，即可在面板自定義設(shè)置快捷鍵，適配用戶個性化使用需求。

優(yōu)秀的產(chǎn)品設(shè)計，需要學(xué)會借助優(yōu)質(zhì)的素材資源。Pixso資源社區(qū)集成騰訊、阿里、百度、京東、華為、微軟、蘋果等大廠資源，涵蓋APP設(shè)計、網(wǎng)頁設(shè)計、UI組件、圖標(biāo)、插畫、線框圖、矢量圖標(biāo)等，都是開源的免費矢量圖資源，所有用戶都可以任意使用。

你可以在「資源社區(qū)」找到合適的模板，點擊「復(fù)制」或「調(diào)用」，也可以點擊編輯器左側(cè)「資源」欄目，將資源拖拽到畫布內(nèi)使用。

Pixso資源社區(qū)還集成覆蓋產(chǎn)設(shè)研全流程的插件，在「插件廣場」點擊安裝，拓展設(shè)計更多可能性。

隨著項目的不斷向前推進，就會衍生出大量的歷史版本文件，遇到一些特殊的定稿需求，版本會不斷堆積，管理起來非常麻煩。

使用「歷史版本管理」功能，完成定稿需求后，點擊菜單欄選項「保存為歷史版本」，一個文件即可覆蓋所有版本的管理。點擊菜單欄「顯示歷史版本」按鈕，即可對歷史版本進行篩選、修改備注、分享、還原、拷貝等，滿足定制化管理需求。

以上就是10個設(shè)計提效技巧，尤其是設(shè)計系統(tǒng)的構(gòu)建、自動布局等功能，搭配上Pixso的協(xié)助能力，對效率的提升不止一點點。同時也帶來很多好用的寶藏功能，幫助用戶快速產(chǎn)出設(shè)計解決方案。

節(jié)省出來更多的時間，可以專注到業(yè)務(wù)體驗的升級，也可以用來學(xué)習(xí)更多新的實物。