編者按：優(yōu)秀的設(shè)計(jì)師手藝不一定比你好，但效率肯定比你高。想提升設(shè)計(jì)效率，完全可以從積累素材、設(shè)計(jì)過(guò)程、完稿、文檔的整理下手。具體的讓@Ping?老師手把手來(lái)教你吧~

最近明明（人家真叫明明）和我抱怨說(shuō)：老大總是說(shuō)我設(shè)計(jì)東西慢，效率低，真是煩死了，要知道設(shè)計(jì)的好又快的東西這個(gè)世界上是沒(méi)有的！然后發(fā)了一張大家都看過(guò)很多遍的圖片：

在安慰明明情緒之余，我也思考起設(shè)計(jì)的效率問(wèn)題來(lái)，在我看來(lái)設(shè)計(jì)其實(shí)與其他的工作并沒(méi)有太大的區(qū)別，不過(guò)是問(wèn)題的解決之道，首要的是解決問(wèn)題，然后再去做更上層的情感和靈魂性的東西，如果這樣的思路理解，那么設(shè)計(jì)一定有效率高低之分。

閑暇的時(shí)候我會(huì)下廚，其實(shí)做設(shè)計(jì)和下廚真的很像，下廚你需要準(zhǔn)備食材、然后烹飪、然后出品、最后整理廚房，再來(lái)看設(shè)計(jì)：積累素材、設(shè)計(jì)過(guò)程、完稿、文檔的整理。有的人做飯快，比如我媽就比我快，后來(lái)我發(fā)現(xiàn)原因不僅僅是她的手藝比我高超，從菜品的搭配、切菜嫻熟度、配料的齊備等等都比我做的好，比我快就是自然而然的事情了。說(shuō)回設(shè)計(jì)，想提升設(shè)計(jì)效率，那就完全可以從積累素材、設(shè)計(jì)過(guò)程、完稿、文檔的整理下手。

素材積累

素材目的與分類方法

素材的整理應(yīng)該很多設(shè)計(jì)師都有做，當(dāng)然我也是，我整理素材主要是這樣的三個(gè)出發(fā)點(diǎn)：

1. 尋找靈感

2. 設(shè)計(jì)模式、形式參考

3. 素材用于設(shè)計(jì)內(nèi)容填充

我的一位同事的素材庫(kù)文件夾命名為「彈藥庫(kù)」，我覺(jué)得非常貼切，這些素材能在你的設(shè)計(jì)過(guò)程中起很大的作用，尋找靈感、快速搭建 App 框架、找素材等等。

人人都可以用板斧，但是還要看你能不能耍的開，先看看素材**如何分類**來(lái)提高設(shè)計(jì)效率：

用途一：尋找靈感與參考

這個(gè)主要是要將你平時(shí)的場(chǎng)景進(jìn)行分類，比如這樣的分類：Awesome App、Website、Logo、Illustrator、Typesetting 等等通過(guò)內(nèi)容進(jìn)行分類，這類的內(nèi)容主要是圖片，方便尋找靈感和設(shè)計(jì)參考，比如我做個(gè) Profiles 的界面，就可以去Awesome App/Profile s里面找參考了。

用途二：設(shè)計(jì)文件標(biāo)準(zhǔn)模板

這一類的素材主要都是源文件或者字體文件，比如：OS psd、設(shè)計(jì)規(guī)范文檔、字體、設(shè)備模板等，這些的文件是方便做設(shè)計(jì)的時(shí)候直接使用減少臨時(shí)去找的煩惱，可以快速的搭建 App 基礎(chǔ)框架，以及各個(gè)控件的大小尺寸。

用途三：設(shè)計(jì)內(nèi)容填充

在做 UI 設(shè)計(jì)的時(shí)候經(jīng)常會(huì)用到各種圖片素材，比如做社交軟件的時(shí)候需要好看的頭像，做分享軟件時(shí)候需要好看風(fēng)景圖、美食圖片，做電商軟件需要各種商品圖片，總之很多，而做設(shè)計(jì)稿一定要力求內(nèi)容真實(shí)性，那么不重復(fù)而優(yōu)質(zhì)的圖片素材非常重要，如果平時(shí)有收集整理，做圖的時(shí)候直接拿來(lái)使用, 臨時(shí)尋找的不僅浪費(fèi)時(shí)間質(zhì)量也差。

素材的分類方法

既然設(shè)計(jì)素材這么重要，那有什么好的方式整理呢？最普通的方式可能就是文件夾了，一層層的嵌套，但是稍微有些繁瑣，其實(shí)現(xiàn)在有很多的軟件可以滿足這些功能。 下面是這些軟件的截圖，大家可以去找一款最適合自己的，我目前用的是 RealMacsoftware（就是知名Todo軟件 Clear 的開發(fā)商） 出品的 Ember.

我的 Ember：

平時(shí)沒(méi)有整理素材怎么辦

有的人平時(shí)可能很少整理素材，或者才意識(shí)到這個(gè)事情，其實(shí)有很多的網(wǎng)站已經(jīng)幫幫我們做了這樣的事情，下面的幾個(gè)網(wǎng)站就是專門針對(duì) UI 設(shè)計(jì)的內(nèi)容整理的素材庫(kù)：

- iOS\Android 按模塊分類界面素材： pttrns.com

- Android： Android Niceties、 Android Pattern

- 尋找靈感：Pinterest 、花瓣、Calltoidea

- 頭像素材： UI-face

- 風(fēng)景素材： 500px

- iOS iocn： iOS icon Gallery

- 獲取 Apple 資源的大圖（專輯封面、電影封面、App icon 大圖）：iTunes Artwork Finder by Ben Dodson

設(shè)計(jì)的一些Tips

「工欲善其事，必先利其器」，如果說(shuō)我們的素材是我們的「彈藥庫(kù)」，那 Photoshop 就是那桿槍了。其實(shí)設(shè)計(jì)中的技巧大多是圍繞習(xí)慣培養(yǎng)、自動(dòng)處理、善用某些功能來(lái)進(jìn)行的。下面我就按這幾個(gè)思路舉些例子。

PS模塊的布局設(shè)置（針對(duì)UI設(shè)計(jì)）

每個(gè)人的習(xí)慣都不一樣，UI 設(shè)計(jì)這塊，我的布局是這樣的：

簡(jiǎn)單的解釋下我的布局：

1. UI 設(shè)計(jì)的界面通常都是細(xì)長(zhǎng)的，所以我們不需要太多的橫向區(qū)域，所以我選擇將工具設(shè)置成2列區(qū)域
2. 因?yàn)閳D層多，并且也是最多選擇整理的內(nèi)容，所以單獨(dú)一列，而歷史記錄和圖層一樣有多的特點(diǎn)，但是卻不常使用，所以放在同一個(gè)列表中，默認(rèn)顯示圖層面板
3. 屬性、信息、色板、字符樣式模塊較小但是確都是經(jīng)常調(diào)整的內(nèi)容，所以把他們集中在一起
4. 整體看就是：常用的調(diào)整設(shè)置放在右邊，而工具條完全金可以用快捷鍵操作，這樣再設(shè)計(jì)的過(guò)程中就不用鼠標(biāo)指針飛來(lái)飛去了，很小的滑動(dòng)距離就能完成相應(yīng)的操作。

Photoshop CC 2015 快捷鍵：

堅(jiān)持良好的圖層命名

很多設(shè)計(jì)師都怕去修改別人的 PSD，很大的一個(gè)原因是無(wú)法理清各個(gè)圖層！保證良好的圖層命名和層級(jí)是一個(gè)設(shè)計(jì)師的基本素養(yǎng)。

PS的動(dòng)作使用

PS的功能很多很多，平時(shí)設(shè)計(jì)的過(guò)程中用的只是冰山一角，比如動(dòng)作很少人去使用，然而這個(gè)是提高效率的一大利器。我就簡(jiǎn)單的舉幾個(gè)例子吧?。ㄔO(shè)置方法自己搜索下吧，這里不贅述了）

1、快速拉參考線，設(shè)定 App 框架

做 UI 設(shè)計(jì)的都知道，任何平臺(tái)的 APP 都有其規(guī)范性，有著各個(gè)平臺(tái)的柵格，這樣不僅能保證界面整潔，還能讓設(shè)計(jì)有一定的節(jié)奏感，那么我們每每開始設(shè)計(jì)一個(gè)新的界面的時(shí)候免不了去設(shè)定他們的框架，這樣可以很快的開始一個(gè) App 的界面設(shè)計(jì)。

BTW： 如果是規(guī)范的參考線設(shè)置可以使用這兩個(gè)插件：GuideGuide、Griddify

具體介紹可參見：

• 《PS 參考線插件GuideGuide下載及使用說(shuō)明》
• 《超方便!幫你快速生成Photoshop參考線的Griddify》

快速設(shè)定字體

iOS的設(shè)計(jì)字體用的是平方（中文）和 San Fransico（英文），而 Android的字體用的是思源黑體（中文）和 Roboto（英文）（別問(wèn)我Windows Phone）, 那么再涉及到中英文混排的時(shí)候，你的做法也許是這樣的：選定中文內(nèi)容 → 設(shè)置「平方」 → 選定英文內(nèi)容 → 設(shè)置「an Fransico」，而我只需要「One Click」！

看看是怎么樣做到的：我先會(huì)設(shè)置一個(gè)動(dòng)作，選定一個(gè)有中英文混排的段落字體，設(shè)置字體「 San Fransico」 → 設(shè)置字體「平方」，順序一定要對(duì)，聰明的你一定知道為什么吧，OK，保存動(dòng)作。然后下次你再也不用一個(gè)個(gè)的設(shè)置字體了，So easy!

我的動(dòng)作：

Photoshop CC 庫(kù)的使用

現(xiàn)在很多人應(yīng)該都在用 CC 的版本了吧，其實(shí)這里面有個(gè)非常強(qiáng)大的功能（前提是你用的是正版）：Creat Cloud庫(kù) ，而這個(gè)能保存你的一切素材：圖片、矢量文件、顏色、字體樣式等。

其中顏色的可以去這網(wǎng)站設(shè)計(jì)：Adobe Color CC

這個(gè)是我的庫(kù)的部分截圖，使用的場(chǎng)景其實(shí)非常多，比如我做一個(gè)新的 iPhone 軟件，那么我可以直接將「Statusbar」拖到設(shè)計(jì)稿中，我需要一個(gè)設(shè)計(jì)一個(gè)微博微信分享的功能，我直接拖出微信微博的矢量 icon，我需要使用某個(gè)顏色規(guī)范，直接雙擊就可以使用，比一個(gè)個(gè)去查找要方便的很多。

文檔的管理

很多設(shè)計(jì)師一定遇到過(guò)這樣的問(wèn)題：設(shè)計(jì)的版本多、文件雜亂，導(dǎo)致后期無(wú)法回顧和查找文件。那么如何規(guī)范自己的設(shè)計(jì)文件顯的極其重要。之前我整理了一份設(shè)計(jì)文件管理規(guī)范，用于設(shè)計(jì)團(tuán)隊(duì)整體的文件管理，并且做到每一個(gè)月一次備份和整理，無(wú)論人員變動(dòng)還是機(jī)器損壞都保證設(shè)計(jì)文件萬(wàn)無(wú)一失。文檔的結(jié)構(gòu)是這樣的：

舉個(gè)實(shí)際的例子：

尾巴

我們常常在討論設(shè)計(jì)的理性和感性，我想設(shè)計(jì)的效率就一定是設(shè)計(jì)的理性吧，用理性的思維和方式來(lái)輔助設(shè)計(jì)，一定能達(dá)到更好的效果。上文我提到的都是一些個(gè)人的習(xí)慣與積累，每個(gè)人都有自己的習(xí)慣和方式，最重要的是如何極大的降低無(wú)用性的時(shí)間浪費(fèi)，讓更多的時(shí)間放在設(shè)計(jì)本身上！

【校招季必備的職場(chǎng)最新好文】

找工作簡(jiǎn)歷為先！
《校招季必備！這些年我在設(shè)計(jì)師簡(jiǎn)歷中發(fā)現(xiàn)的10個(gè)問(wèn)題》

資深設(shè)計(jì)師教你全方位虐殺！
《九月校招專題！UI行業(yè)大學(xué)生就業(yè)完全手冊(cè)（一）》

一個(gè)月能成為交互設(shè)計(jì)師？阿里人教你！
《速成技巧篇！一個(gè)月內(nèi)如何學(xué)習(xí)才能應(yīng)聘交互設(shè)計(jì)實(shí)習(xí)生？》

原文地址：zhuanlan.zhihu
作者：@Ping

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量103萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com