10個(gè)節(jié)省時(shí)間的UI設(shè)計(jì)方法

1、前言：這篇文章介紹了日常使用的10個(gè)省時(shí)間的小技巧，非常實(shí)用，一起來(lái)看看吧！1.用“scale”工具避免變形-你有沒(méi)有在Sketch中試著整組拉伸？然后所有的元素都變形了，文本不會(huì)隨著拖拽卡片而變大。這里提供一個(gè)非常節(jié)省時(shí)間的解決方案，一旦你使用了這個(gè)按比例變形的工具，就再也不用手動(dòng)調(diào)整每個(gè)元素的大小了。下面是使用方法：選中你想更改的整組元素，單擊頭部的“Scale”按鈕或者使用快捷鍵“CMD+K”。然后你可以設(shè)置百分比或者寬高，完成！2.用Craft插件自動(dòng)填充內(nèi)容-Sketch中的Craft插件有一系列的工作流程增強(qiáng)工具，除了上傳畫(huà)板到Invision, 我使用的最多的是自動(dòng)填充功能。使用

2、方法：你需要選中圖片或文字，然后選擇你想要添加的內(nèi)容，你也可以直接從電腦硬盤(pán)中直接拖動(dòng)內(nèi)容進(jìn)去。這個(gè)工具非常智能，它可以為我的設(shè)計(jì)圖自動(dòng)填充內(nèi)容，（填充功能主要有三類：圖文，網(wǎng)頁(yè)內(nèi)容，Json文件），可以節(jié)省大把的編造內(nèi)容的時(shí)間。3.用Illustrator輕松創(chuàng)建色板-使用Illustrator的混合工具，秒速創(chuàng)建色板。這個(gè)混合工具省去了很多制作色板的時(shí)間，當(dāng)然其他工具也能制作色板，但這個(gè)絕對(duì)是最快的。做法如下：第1步：做兩個(gè)矩形，其中一個(gè)填充你想要的顏色，然后另一個(gè)填上白色。第2步：選擇兩個(gè)矩形，然后打開(kāi)混合選項(xiàng)，ObjectBlendBlend Options，然后將間距設(shè)置為“spec

3、ified steps”然后設(shè)置你想要的顏色數(shù)量。第3步：選中兩個(gè)矩形，然后點(diǎn)擊ObjectBlendMake，或者使用快捷鍵Option+CMD+B，完成！4.Tidy up & Smart alignment-Tidy up 是我最喜歡的Sketch和Figma工具之一，如果我有一組內(nèi)容需要對(duì)齊，我可以選中他們?nèi)缓髥螕艚巧纤{(lán)色的整理icon，在Sketch中，點(diǎn)擊右上角的“Tidy”，再選中他們進(jìn)行拖拽到我需要的間距。Sketch和Figma中的智能排列是另一個(gè)很棒的工具，如果我有一組同樣尺寸排列的項(xiàng)目，我可以通過(guò)“點(diǎn)擊中間的圓點(diǎn)，然后拖動(dòng)到新的圓點(diǎn)上”，這樣就能快速的切換他們之間的位置，

4、非常簡(jiǎn)單！5.用ellipses避免破壞設(shè)計(jì)布局-使用ellipses是個(gè)很棒的技巧，我之所以提到它，是因?yàn)楹芏嘈率衷O(shè)計(jì)師會(huì)有類似需要改變背景卡片來(lái)容納所有元素的需求。在上面的例子中，“Outback Steakhouse”可以假定為用戶知道他們買的是什么，如果用戶不確定這是什么，他們可以點(diǎn)擊查看交易詳情。需要注意的是，我只推薦Ellipses用于用戶不會(huì)立即使用的信息呈現(xiàn)，或者不會(huì)打斷用戶的信息呈現(xiàn)，如果這是一個(gè)非常重要的信息，就不要用Ellipses。Ellipses通常來(lái)說(shuō)非常好用，但是考慮到交互體驗(yàn)，請(qǐng)保證它的使用不會(huì)讓用戶感到迷惑。6.WhatFont實(shí)時(shí)搜索字體-在我們?yōu)g覽網(wǎng)頁(yè)的時(shí)

5、候，有時(shí)候會(huì)看到特別喜歡的字體，相對(duì)于去檢查頁(yè)面源代碼，在Chrome瀏覽器中使用WhatFont插件更方便。當(dāng)我看見(jiàn)喜歡的字體時(shí)，點(diǎn)擊Chrome擴(kuò)展圖標(biāo)然后可以迅速找出這是什么字體，然后我在Google中搜索，如果是免費(fèi)字體就可以下載使用了。7.用計(jì)算器功能改變尺寸和位置-如果你還沒(méi)意識(shí)到，你可以在在任何Sketch的輸入框中使用計(jì)算器，計(jì)算器可以在Sketch，XD，F(xiàn)igma等很多設(shè)計(jì)軟件中使用。使用舉例：如果我有一個(gè)100px寬的矩形框，我可以快速的在寬度欄輸入100/2，然后就將矩形框的寬度變?yōu)?0px了。在我需要加倍或者縮小倍數(shù)時(shí)，計(jì)算器用起來(lái)非常順手。8.用數(shù)字鍵改變圖層透明度

6、-更改透明度的快捷鍵讓我在改變圖層的透明度的時(shí)候節(jié)省了大量時(shí)間。要應(yīng)用這個(gè)技能，你只需要選中想要改變的內(nèi)容，然后單擊鍵盤(pán)上的1-9即可，然后透明度就會(huì)立即實(shí)現(xiàn)出來(lái)，想要70%透明度，按下鍵盤(pán)上的7就OK了。這是我在很多設(shè)計(jì)項(xiàng)目中都會(huì)用到的技巧。9.Sketch智能輪廓-智能輪廓是Sketch中的新功能，如果你還沒(méi)有用過(guò)這個(gè)，那可就浪費(fèi)了太多時(shí)間了。智能輪廓可以根據(jù)內(nèi)容和你設(shè)定好的邊距自動(dòng)調(diào)整外輪廓。想要使用這個(gè)技巧，你只需要?jiǎng)?chuàng)建一個(gè)輪廓，然后點(diǎn)擊，創(chuàng)建symbol，然后根據(jù)你的喜好設(shè)定外輪廓，比如說(shuō)設(shè)計(jì)一個(gè)Button，我設(shè)定了從中心開(kāi)始拓展輪廓。使用這個(gè)工具可以做很多工作，查看Sketch的blog可以獲得更多使用方法。10.icon管理工具Iconjar-Iconjar是一個(gè)儲(chǔ)存和管理icon的簡(jiǎn)單應(yīng)用，節(jié)省了我下載icon的時(shí)間，不管什么時(shí)候我需要一個(gè)icon，直接去Iconjar里面找就好了。使用這個(gè)軟件非常簡(jiǎn)單：首先，我找到一個(gè)喜歡的icon庫(kù)，比如說(shuō)很多我喜歡的icon資源有：Box icons/Noun