在用戶的存量時(shí)代，產(chǎn)品設(shè)計(jì)不僅要保持高效的迭代速度，搶占新興應(yīng)用市場(chǎng)，更要不斷打磨產(chǎn)品細(xì)節(jié)，提供更加極致的用戶體驗(yàn)。在「質(zhì)」與「量」的雙重需求之下，設(shè)計(jì)師該如何擺脫加班的命運(yùn)呢？
協(xié)作設(shè)計(jì)軟件的變革，帶來(lái)了全新的生產(chǎn)和協(xié)作方式，規(guī)范組件庫(kù)、自動(dòng)布局、屬性復(fù)制、設(shè)計(jì)插件、組件替換等功能的上線，帶來(lái)了很多行之有效的提效方法。
本期內(nèi)容，以協(xié)作設(shè)計(jì)軟件Pixso為例，給大家總結(jié)了10個(gè)設(shè)計(jì)提效技巧，都是日常設(shè)計(jì)中高頻使用到的功能，幫你告別繁瑣的操作步驟，早日擺脫無(wú)盡的加班痛苦。
下面，就一起探索這些設(shè)計(jì)中的寶藏技巧吧！
01.構(gòu)建「組件化」思維
組件化思維是通過(guò)對(duì)功能和視覺中元素的拆解、歸納、重組等，并基于可復(fù)用的目的，形成規(guī)范化的模板。組件化思維可以避免一次性設(shè)計(jì)，同時(shí)保持團(tuán)隊(duì)設(shè)計(jì)的一致性，讓設(shè)計(jì)師專注到業(yè)務(wù)體驗(yàn)的提升。
組件庫(kù)
與傳統(tǒng)的組件庫(kù)相比，Pixso組件庫(kù)最大的優(yōu)勢(shì)就是協(xié)作屬性，它可以降低組件傳輸和同步的成本，同時(shí)與設(shè)計(jì)軟件深度集成，讓組件庫(kù)的創(chuàng)建和復(fù)用都更加便捷。
完成規(guī)范組件庫(kù)的設(shè)計(jì)后，只需要選中對(duì)應(yīng)的組件，在「右鍵」菜單欄中選擇「創(chuàng)建組件」，將組件上傳到「本地組件庫(kù)」中，即可在文件內(nèi)部復(fù)用。
想要在其他文件或團(tuán)隊(duì)中復(fù)用，可以點(diǎn)擊Pixso管理資源庫(kù)內(nèi)的「發(fā)布」按鈕，將組件上傳到團(tuán)隊(duì)組件庫(kù)。也可以點(diǎn)擊「管理資源庫(kù)」，查看團(tuán)隊(duì)所有組件資源，可以更具需求開啟組件庫(kù)，方便組件的高效管理。
后期需要?jiǎng)?chuàng)建新的項(xiàng)目，可以點(diǎn)擊Pixso畫布左側(cè)「組件」按鈕，通過(guò)簡(jiǎn)單拖拽的方式，使用規(guī)范組件像搭積木一樣搭建頁(yè)面，減少頁(yè)面搭建的成本。也可以使用組件搜索功能，高效獲取所需的組件。
樣式
在設(shè)計(jì)文件中，顏色、文字、字號(hào)、邊距、效果等，都可以稱之為樣式。我們可以通過(guò)創(chuàng)建樣式的方式，形成單一樣式的設(shè)計(jì)規(guī)范，并在其他設(shè)計(jì)元素中高效復(fù)用。
這里就以單一顏色樣式為例，給大家演示Pixso樣式的創(chuàng)建方法：
Step1：選中需要共享的樣式；
Step2：選擇對(duì)于屬性面板「樣式」按鈕；
Step3：點(diǎn)擊創(chuàng)建樣式；
Step4：輸入對(duì)應(yīng)的樣式名稱，如藍(lán)色。
完成樣式的創(chuàng)建后，即可在其他元素上復(fù)用：
Step1：選中想復(fù)用樣式的對(duì)象；
Step2：點(diǎn)擊「樣式」按鈕；
Step3：選中目標(biāo)樣式，點(diǎn)擊復(fù)用。
我們可以看到，當(dāng)選擇任意組件和元素，右側(cè)功能面板對(duì)應(yīng)屬性的右側(cè)就會(huì)出現(xiàn)「樣式」按鈕，點(diǎn)擊就可以完成對(duì)應(yīng)屬性樣式的創(chuàng)建和復(fù)用啦~
通過(guò)組件庫(kù)和樣式的搭建，可以幫助設(shè)計(jì)師構(gòu)建組件化思維，當(dāng)遇到一些新的設(shè)計(jì)項(xiàng)目，可以直接調(diào)用規(guī)范組件和樣式，減少重復(fù)設(shè)計(jì)的現(xiàn)象，節(jié)省出來(lái)大量的設(shè)計(jì)時(shí)間，專注到設(shè)計(jì)體驗(yàn)的提升。
02.組件庫(kù)替換功能
一套完整的設(shè)計(jì)方案，通常會(huì)包含多種配色模式，如「深色」和「淺色」模式等，假如想要?jiǎng)?chuàng)建一套新的配色，傳統(tǒng)的方式是將頁(yè)面的配色進(jìn)行逐一替換，過(guò)程繁瑣還容易造成錯(cuò)漏。
使用Pixso組件庫(kù)替換功能，只需要?jiǎng)?chuàng)建一套新的配色方案，就可以一鍵替換對(duì)應(yīng)組件庫(kù)，實(shí)例中的組件、樣式、配色等也會(huì)自動(dòng)同步，免除手動(dòng)替換的困擾。
下面就給大家演示一下：
Step1：打開「組件」面板；
Step2：點(diǎn)擊「管理資源庫(kù)」圖標(biāo)；
Step3：選擇想要用于替換的組件庫(kù)；
Step4：點(diǎn)擊「替換」按鈕，等待替換完成即可。
03.組件變體
組件變體是把多個(gè)引用組件合并為一個(gè)整體，通過(guò)對(duì)屬性的設(shè)置制作可以切換不同狀態(tài)的超級(jí)組件。在一些特定場(chǎng)景下，組件需要在不同操作邏輯下呈現(xiàn)不同形態(tài)，就要使用組件變體功能。
Pixso組件變體的創(chuàng)建非常簡(jiǎn)單，例如設(shè)置面板「按鈕狀態(tài)」的組件，只需要通過(guò)以下5步：
Step1：繪制不同形態(tài)的按鈕，將按鈕復(fù)制出來(lái)；
Step2：選中某個(gè)按鈕，點(diǎn)擊右鍵選擇「創(chuàng)建組件」，將三個(gè)按鈕分別生成組件；
Step3：依次選中三個(gè)組件，點(diǎn)擊右側(cè)「創(chuàng)建變體組件」，然后將組件命名成它們對(duì)應(yīng)的狀態(tài)；
Step4：點(diǎn)擊變體欄右側(cè)的「更多」按鈕，選擇「新增屬性」創(chuàng)建變體屬性。然后選中組件，依次修改它們的屬性狀態(tài)（如開啟、關(guān)閉屬性）；
Step5：將創(chuàng)建的組件集拖拽到界面中對(duì)應(yīng)的位置，組件就創(chuàng)建完成啦。
04.一鍵填充多張照片
設(shè)計(jì)的過(guò)程中經(jīng)常遇到多個(gè)占符的情況，不少小伙伴還在一張張的填充內(nèi)容，或者將圖片拖入Pixso在逐一填充。使用快速填充功能，只要按下「Ctrl + Shift + K」選中多張圖片或動(dòng)圖，就可以依次填充圖片啦。
如上圖所示，光標(biāo)下方會(huì)顯示剩余填充的圖片數(shù)量，每填充一張圖片數(shù)字逐一變小，清晰呈現(xiàn)剩余填充的圖片數(shù)量。
05、自動(dòng)布局
自動(dòng)布局能夠建立高效的設(shè)計(jì)規(guī)范，在增加、刪除、修改某些元素時(shí)，無(wú)需調(diào)整相鄰元素位置和尺寸，并自動(dòng)適配成為最佳狀態(tài)，避免牽一發(fā)而動(dòng)全身的狀況。
在設(shè)計(jì)師的日常工作，除了20%在發(fā)揮創(chuàng)意，剩下的80%都是在重復(fù)勞動(dòng)；而這80%的重復(fù)勞動(dòng)中，又有80%和布局相關(guān)。掌握自動(dòng)布局的技巧，如同掌握設(shè)計(jì)提效的關(guān)鍵技能。
添加/刪除
例如APP菜單欄的設(shè)計(jì)，需要添加或刪除一個(gè)icon，使用Pixso自動(dòng)布局功能，選中icon添加「自動(dòng)布局」選項(xiàng)，對(duì)齊方式改為「均勻分布」，icon就會(huì)自動(dòng)適配到欄目中，方便后期隨時(shí)添加和刪除。
響應(yīng)式布局
遇到不同屏幕尺寸的適配，需要對(duì)一些元素做拉伸處理，如何讓父級(jí)元素跟隨規(guī)則自適應(yīng)變化呢？
我們可以為頁(yè)面添加自動(dòng)布局，選擇Pixso自動(dòng)布局左上角對(duì)齊方式，將分布方式改為均勻分布，上下方內(nèi)嵌的兩個(gè)父級(jí)就會(huì)跟隨自適應(yīng)，不用手動(dòng)進(jìn)行逐一適配。
當(dāng)你對(duì)文字進(jìn)行新增或刪除后，文本框的高度變化也會(huì)被視為拉伸，卡片也會(huì)跟隨自適應(yīng)變化。
絕對(duì)定位
遇到消息通知、播放按鈕等設(shè)計(jì)，需要把對(duì)于元素插入自動(dòng)布局中，元素一般會(huì)自動(dòng)吸附在現(xiàn)有布局，按照現(xiàn)有布局關(guān)系自動(dòng)排列，很難靈活調(diào)整位置。
這時(shí)候我們可以使用Pixso絕對(duì)定位功能，將對(duì)應(yīng)元素拖入自動(dòng)布局內(nèi)，就會(huì)觸發(fā)「絕對(duì)定位」按鈕，點(diǎn)擊即可不受現(xiàn)有布局約束，任意擺放到任意位置。
06.自動(dòng)填充樣式
在同一個(gè)設(shè)計(jì)界面中，通常會(huì)有很多相同的設(shè)計(jì)樣式，這些樣式可能涵蓋數(shù)十個(gè)屬性，如果每個(gè)圖標(biāo)都重新設(shè)置屬性，必然造成大量重復(fù)勞動(dòng)。
使用Pixso復(fù)制屬性功能，元素包含的文本屬性、描邊屬性、效果屬性、填充屬性等，可以一鍵復(fù)制元素的所有屬性，并粘貼應(yīng)用到其他設(shè)計(jì)元素，原本需要幾步甚至幾十步才能完成的工作，只需要復(fù)制、粘貼即可完成。
復(fù)制屬性：Ctrl+Alt+C；
粘貼屬性：Ctrl+Alt+V。
07、快速選擇元素
面對(duì)一些大型設(shè)計(jì)項(xiàng)目，因?yàn)閳D層的層級(jí)過(guò)多，想要選中下層的元素，通常需要反復(fù)雙擊，面對(duì)元素的批量調(diào)整時(shí)，這種選中方式就很費(fèi)力。
使用Pixso，可以按照 Command 的同時(shí)用鼠標(biāo)點(diǎn)擊，這樣可以直接選擇最里層的元素。但如果你想選中不是最里層，而是倒數(shù)的N層，建議嘗試使用以下快捷鍵：
選擇下層：回車鍵
選擇上層：Shift + 回車鍵
選擇下一個(gè)：Tab
取消選擇：Esc
08.快捷鍵指南
相信很多設(shè)計(jì)師一定看過(guò)一些快捷鍵操作，但是實(shí)際操作起來(lái)總是讓人摸不著頭腦?？梢渣c(diǎn)擊Pixso菜單欄選項(xiàng)中的「快捷鍵指南」按鈕，即可打開快捷鍵面板，清晰呈現(xiàn)所有的快捷鍵內(nèi)容，幫助大家更加高效的設(shè)計(jì)。
你也可以點(diǎn)擊最右邊「自定義快捷鍵」，即可在面板自定義設(shè)置快捷鍵，適配用戶個(gè)性化使用需求。
09、社區(qū)/插件
優(yōu)秀的產(chǎn)品設(shè)計(jì)，需要學(xué)會(huì)借助優(yōu)質(zhì)的素材資源。Pixso資源社區(qū)集成騰訊、阿里、百度、京東、華為、微軟、蘋果等大廠資源，涵蓋APP設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、UI組件、圖標(biāo)、插畫、線框圖、矢量圖標(biāo)等，都是開源的免費(fèi)矢量圖資源，所有用戶都可以任意使用。
你可以在「資源社區(qū)」找到合適的模板，點(diǎn)擊「復(fù)制」或「調(diào)用」，也可以點(diǎn)擊編輯器左側(cè)「資源」欄目，將資源拖拽到畫布內(nèi)使用。
Pixso資源社區(qū)還集成覆蓋產(chǎn)設(shè)研全流程的插件，在「插件廣場(chǎng)」點(diǎn)擊安裝，拓展設(shè)計(jì)更多可能性。
10.歷史版本管理
隨著項(xiàng)目的不斷向前推進(jìn)，就會(huì)衍生出大量的歷史版本文件，遇到一些特殊的定稿需求，版本會(huì)不斷堆積，管理起來(lái)非常麻煩。
使用Pixso「歷史版本管理」功能，完成定稿需求后，點(diǎn)擊Pixso菜單欄選項(xiàng)「保存為歷史版本」，一個(gè)文件即可覆蓋所有版本的管理。點(diǎn)擊菜單欄「顯示歷史版本」按鈕，即可對(duì)歷史版本進(jìn)行篩選、修改備注、分享、還原、拷貝等，滿足定制化管理需求。
以上就是10個(gè)設(shè)計(jì)提效技巧，尤其是設(shè)計(jì)系統(tǒng)的構(gòu)建、自動(dòng)布局等功能，搭配上Pixso的協(xié)助能力，對(duì)效率的提升不止一點(diǎn)點(diǎn)。同時(shí)也帶來(lái)很多好用的寶藏功能，幫助用戶快速產(chǎn)出設(shè)計(jì)解決方案。
節(jié)省出來(lái)更多的時(shí)間，可以專注到業(yè)務(wù)體驗(yàn)的升級(jí)，也可以用來(lái)學(xué)習(xí)更多新的實(shí)物。
（免責(zé)聲明：本網(wǎng)站內(nèi)容主要來(lái)自原創(chuàng)、合作伙伴供稿和第三方自媒體作者投稿，凡在本網(wǎng)站出現(xiàn)的信息，均僅供參考。本網(wǎng)站將盡力確保所提供信息的準(zhǔn)確性及可靠性，但不保證有關(guān)資料的準(zhǔn)確性及可靠性，讀者在使用前請(qǐng)進(jìn)一步核實(shí)，并對(duì)任何自主決定的行為負(fù)責(zé)。本網(wǎng)站對(duì)有關(guān)資料所引致的錯(cuò)誤、不確或遺漏，概不負(fù)任何法律責(zé)任。
任何單位或個(gè)人認(rèn)為本網(wǎng)站中的網(wǎng)頁(yè)或鏈接內(nèi)容可能涉嫌侵犯其知識(shí)產(chǎn)權(quán)或存在不實(shí)內(nèi)容時(shí)，應(yīng)及時(shí)向本網(wǎng)站提出書面權(quán)利通知或不實(shí)情況說(shuō)明，并提供身份證明、權(quán)屬證明及詳細(xì)侵權(quán)或不實(shí)情況證明。本網(wǎng)站在收到上述法律文件后，將會(huì)依法盡快聯(lián)系相關(guān)文章源頭核實(shí)，溝通刪除相關(guān)內(nèi)容或斷開相關(guān)鏈接。 ）
