【親測】新手設計如何又快又高效？10個省時妙計幫你解決

如下內容由摹客團隊翻譯整理，僅供學習交流。摹客Mockplus是快速的原型設計工具。摹客iDoc是高效的在線協做設計平臺。

描述：本文將集中分享10個小編平常使用的UI設計技巧，省時又高效。你們能夠試試。

1.Sketch等比縮放工具，輕鬆避免設計變形失真的問題

平常使用Sketch設計的過程當中，爲節省時間，小編曾嘗試過設置整個圖層組的尺寸大小。最後卻悲催的發現: 設置以後，單個圖層的尺寸反而變得很是奇怪，而不得不從新逐個調整。尤爲是文本設計的等比縮放尤其困難。你是否也遇到過相似的問題呢？

不用擔憂。小編通過屢次嘗試，發現了一個很是實用的小技巧。簡單來說，就是在調整圖層組尺寸時， 使用Sketch自帶的縮放工具（Scale tool）。如此，即便批量調整圖層或組件尺寸，也無需返回逐個從新設置，十分高效。

並且，該工具操做起來也至關簡單。只需選中單個圖層或圖層組，點擊頂部導航欄的「縮放」或使用快捷鍵「CMD + K」， 便可快速設置其縮放百分比、寬、高等屬性。

2.Sketch對齊和自動佈局工具，快速對齊和佈局界面組件

Sketch的對齊工具，是小編最喜歡使用的Sketch功能之一。製做界面網格或列表類組件時，此類對其工具可以輕鬆省去不少麻煩的操做。簡單選中所需對齊的多個組件，點擊右上角對齊選項，便可一鍵按需居中、向右或向左對齊。

其自動佈局工具也很是好用。設計界面網格時，可經過固定寬高的方式，來達到響應式佈局的效果。

3.Sketch Symbol功能， 輕鬆製做不一樣設計狀態

Symbol是Sketch中一個很是實用的新功能。如上圖，設計過程當中，只需更改按鈕內的文本狀態，無需修改整個按鈕樣式和填充方式。

具體操做過程也很簡單。首先，製做一個須要不一樣狀態的按鈕，而後將按鈕轉化成符號，調整到須要的狀態。而上圖的按鈕設計，小編將其設置爲了水平居中的佈局狀態，就輕鬆作到了圖中的效果。

此外，利用該Symbol功能還可製做許多炫酷的設計效果。具體詳情你們可查看Sketch的教程。

4.PS快速導出設計稿和切圖

Mockplus iDoc的PS插件提供了很是實用的導出功能。設計師不只能夠經過該插件批量導出PS設計稿、上傳到iDoc、自動生成標註、在線協做設計、評論審覈、製做原型並實時交付， 還可輕鬆標記切圖並上傳。不一樣平臺切圖倍率也可快速設置。

設計過程當中，便可輕鬆選擇和標記切圖，無需過多等待。

5.Adobe Illustrator中快速生成最佳配色方案

UI設計過程當中，也可以使用Adobe Illustrator中的混合工具， 快速生成最佳配色方案。使用該工具，設計師們可直觀的查看各種色彩混合以後的效果，無需過多猜想，儘可能消除設計中的不肯定性。儘管，其它工具也能夠作到這一點，但該工具倒是最快的。

其具體操做步驟以下：

首先，利用矩形工具繪製兩個不一樣顏色的矩形。小編這裏將一個設置爲藍色，另外一個設置爲白色。

而後，選中兩個矩形並打開混合工具：對象 > 擴展 >混合選項。以後，將間距設置爲「平滑顏色」，並設置須要的色彩數量。

最後，再次選中兩個矩形，應用設置或直接使用快捷鍵「Option + CMD + B，色彩混合就完成了。

6.利用省略符號佔位，以維持界面佈局

如圖，界面設計中，可以使用省略號佔位，保持界面佈局

省略號是小編平常設計中，用以保持界面佈局的重要技巧。而之因此會在這裏分享這一技巧，主要是由於設計新手們很容易忽略這一點，而選擇更改界面佈局來呈現完整的界面功能。其實沒必要這麼麻煩。

就如上圖購買確認頁面的「Outback Steakho...」設計，雖然省略部分文本內容，但也足以幫助用戶確認產品信息。即便用戶還有疑慮，也可單擊省略號，查看完整的產品名「Outback Steakhouse」加以確認。

並且，值得注意的是：省略號只用於代替用戶不會當即使用，或者能夠輕鬆推斷的信息。若是是重要的信息，即便從新佈局，也最好不要使用省略號。否則，界面功能，甚至用戶體驗都會受到影響。因此，爲保證界面原有佈局，省略號使用須要多方考慮， 避免給用戶形成不便。

7.利用WhatFont快速識別各種字體設計

一次偶然的機會，小編在瀏覽網頁時，發現了一款很是喜歡的字體。不一樣於以往直接查看網頁源代碼的方式，小編直接查找並使用一款名爲WhatFont的Chrome擴展工具，快速搜尋其對應名稱。

今後以後，每當小編在網上看到任何喜歡的字體，都會打開該工具，快速查看其對應的字體類別和名稱。而後，根據其名稱進行搜索。如若免費，就直接下載，很是實用。

8.精確快速調整和縮放組件寬高和位置

現今不少工具，例如常見的Sketch、Adobe XD、Figma以及其它設計工具都提供相似的設計，容許設計師手動輸入數值，精準設置界面組件寬高和位置。並實現必定比例寬高或位置的縮放調整。

例如，當界面添加一個寬度爲100像素的矩形時， 設計師可簡單輸入「100/2」，將其寬度快速縮小爲50像素。

如圖，當設計中須要快速縮放組件尺寸（例如放大或縮小2倍）時，相似的輸入操做就至關便利。無需手動拖拽調整，費時費力，還不夠精確。

9.使用快捷鍵，快速調整透明度

當須要快速修改界面組件透明度時，快捷鍵操做能夠節省大量時間。

設計過程當中，設計師只需選中某個組件，而後點擊鍵盤上1到9的數字按鈕，該部件透明度就會相應變化。 例如，須要70%的透明度，點擊按鈕7便可。

並且， 這樣的快捷鍵操做適用於不少主流的設計工具。你如今使用的是哪一款工具呢？不如當即點擊數字按鈕試試看， 是否真的適用？

10.利用Iconjar進行圖標素材存儲和管理

Iconjar是一款簡單實用的圖標素材管理工具。支持圖標輕鬆導入、分類組合和管理。須要圖標時，無需臨時在線搜索或下載，打開Iconjar， 直接搜索，便可快速查找最佳的圖標進行設計。

其工做原理也十分簡單。瀏覽網頁時，發現任何喜歡的圖標素材包，例以下面這些小編經常使用的圖標素材包：

Box Icons

Noun Project

Feather

Material Icons

下載、導入併爲其命名， 即完成整個素材存儲過程。

須要任何圖標時，打開工具，搜索素材庫，而後將須要的圖標直接拖拽到設計中，便可快速使用。

以上就是小編平時設計過程當中總結省時技巧，但願能對你們有所幫助。

相關閱讀：

【自古套路得人心】最全UI圖表設計技巧和套路，分分鐘打造最優設計

【設計師必看】提升網站易訪問性的5個UI設計技巧

教你避雷！網頁設計中常見的17個UI設計錯誤集錦（附贈設計技巧）

做者：Danny Sapio

原文連接：uxdesign.cc/10-time-sav…

學習工具，但不受限於某種工具。摹客iDoc，高效協做，從產品到開發，只要一個文檔，讓你的團隊高效協做！