手把手教你從3方面提升設計效率

 

　　編者按：優秀的設計師手藝不一定比你好，但效率 肯定比你高。想提升設計效率 ，完全可以從積累素材、設計過程、完稿、文檔的整理下手。具體的讓@Ping 老師手把手來教你吧~

　　最近明明(人家真叫明明)和我抱怨說：老大總是說我設計東西慢，效率 低，真是煩死了，要知道設計的好又快的東西這個世界上是沒有的!然後發了一張大家都看過很多遍的圖片：

　　在安慰明明情緒之余，我也思考起設計的效率問題來，在我看來設計其實與其他的工作並沒有太大的區別，不過是問題的解決之道，首要的是解決問題，然後再去做更上層的情感和靈魂性的東西，如果這樣的思路理解，那麼設計一定有效率高低之分。

　　閒暇的時候我會下廚，其實做設計和下廚真的很像，下廚你需要准備食材、然後烹饪、然後出品、最後整理廚房，再來看設計：積累素材、設計過程、完稿、文檔的整理。有的人做飯快，比如我媽就比我快，後來我發現原因不僅僅是她的手藝比我高超，從菜品的搭配、切菜娴熟度、配料的齊備等等都比我做的好，比我快就是自然而然的事情了。說回設計，想提升設計效率，那就完全可以從積累素材、設計過程、完稿、文檔的整理下手。

　　素材積累

　　素材目的與分類方法

　　素材的整理應該很多設計師都有做，當然我也是，我整理素材主要是這樣的三個出發點：

　　1. 尋找靈感

　　2. 設計模式、形式參考

　　3. 素材用於設計內容填充

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

　　人人都可以用板斧，但是還要看你能不能耍的開，先看看素材**如何分類**來提高設計效率：

　　用途一：尋找靈感與參考

　　這個主要是要將你平時的場景進行分類，比如這樣的分類：Awesome App、Website、Logo、Illustrator、Typesetting 等等通過內容進行分類，這類的內容主要是圖片，方便尋找靈感和設計參考，比如我做個 Profiles 的界面，就可以去Awesome App/Profile s裡面找參考了。

　　用途二：設計文件標准模板

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

　　用途三：設計內容填充

　　在做 UI 設計的時候經常會用到各種圖片素材，比如做社交軟件的時候需要好看的頭像，做分享軟件時候需要好看風景圖、美食圖片，做電商軟件需要各種商品圖片，總之很多，而做設計稿一定要力求內容真實性，那麼不重復而優質的圖片素材非常重要，如果平時有收集整理，做圖的時候直接拿來使用, 臨時尋找的不僅浪費時間質量也差。

　　素材的分類方法

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

　　我的 Ember：

　　平時沒有整理素材怎麼辦

　　有的人平時可能很少整理素材，或者才意識到這個事情，其實有很多的網站已經幫幫我們做了這樣的事情，下面的幾個網站就是專門針對 UI 設計的內容整理的素材庫：

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

　　- Android： Android Niceties 、 Android Pattern

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

　　- 頭像素材： UI-face

　　- 風景素材： 500px

　　- iOS iocn： iOS icon Gallery

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

　　設計的一些Tips

　　「工欲善其事，必先利其器」，如果說我們的素材是我們的「彈藥庫」，那 Photoshop 就是那桿槍了。其實設計中的技巧大多是圍繞習慣培養、自動處理、善用某些功能來進行的。下面我就按這幾個思路舉些例子。

　　PS模塊的布局設置(針對UI設計)

　　每個人的習慣都不一樣，UI 設計這塊，我的布局是這樣的：

　　簡單的解釋下我的布局：

　　UI 設計的界面通常都是細長的，所以我們不需要太多的橫向區域，所以我選擇將工具設置成2列區域

　　因為圖層多，並且也是最多選擇整理的內容，所以單獨一列，而歷史記錄和圖層一樣有多的特點，但是卻不常使用，所以放在同一個列表中，默認顯示圖層面板

　　屬性、信息、色板、字符樣式模塊較小但是確都是經常調整的內容，所以把他們集中在一起

　　整體看就是：常用的調整設置放在右邊，而工具條完全金可以用快捷鍵操作，這樣再設計的過程中就不用鼠標指針飛來飛去了，很小的滑動距離就能完成相應的操作。

　　Photoshop CC 2015 快捷鍵：

　　堅持良好的圖層命名

　　很多設計師都怕去修改別人的 PSD，很大的一個原因是無法理清各個圖層!保證良好的圖層命名和層級是一個設計師的基本素養。

　　PS的動作使用

　　PS的功能很多很多，平時設計的過程中用的只是冰山一角，比如動作很少人去使用，然而這個是提高效率的一大利器。我就簡單的舉幾個例子吧!(設置方法自己搜索下吧，這裡不贅述了)

　　1、快速拉參考線，設定 App 框架

　　做 UI 設計的都知道，任何平台的 APP 都有其規范性，有著各個平台的柵格，這樣不僅能保證界面整潔，還能讓設計有一定的節奏感，那麼我們每每開始設計一個新的界面的時候免不了去設定他們的框架，這樣可以很快的開始一個 App 的界面設計。

　　BTW： 如果是規范的參考線設置可以使用這兩個插件：GuideGuide、Griddify

　　快速設定字體

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

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

　　我的動作：

　　Photoshop CC 庫的使用

　　現在很多人應該都在用 CC 的版本了吧，其實這裡面有個非常強大的功能(前提是你用的是正版)：Creat Cloud庫 ，而這個能保存你的一切素材：圖片、矢量文件、顏色、字體樣式等。

　　其中顏色的可以去這網站設計：Adobe Color CC

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

　　文檔的管理

　　很多設計師一定遇到過這樣的問題：設計的版本多、文件雜亂，導致後期無法回顧和查找文件。那麼如何規范自己的設計文件顯的極其重要。之前我整理了一份設計文件管理規范，用於設計團隊整體的文件管理，並且做到每一個月一次備份和整理，無論人員變動還是機器損壞都保證設計文件萬無一失。文檔的結構是這樣的：

　　舉個實際的例子：

　　尾巴

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