1. 程式人生 > >教你從3方面提升設計效率

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

從3方面提升設計效率

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

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

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

素材積累

素材目的與分類方法

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

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設計的內容整理的素材庫:

– iOSAndroid 按模組分類介面素材: pttrns.com

– 風景素材: 500px

設計的一些Tips

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

PS模組的佈局設定(針對UI設計)

每個人的習慣都不一樣,UI設計這塊,我的佈局是這樣的:

簡單的解釋下我的佈局:

  1. UI設計的介面通常都是細長的,所以我們不需要太多的橫向區域,所以我選擇將工具設定成2列區域
  2. 因為圖層多,並且也是最多選擇整理的內容,所以單獨一列,而歷史記錄和圖層一樣有多的特點,但是卻不常使用,所以放在同一個列表中,預設顯示圖層面板
  3. 屬性、資訊、色板、字元樣式模組較小但是確都是經常調整的內容,所以把他們集中在一起
  4. 整體看就是:常用的調整設定放在右邊,而工具條完全金可以用快捷鍵操作,這樣再設計的過程中就不用滑鼠指標飛來飛去了,很小的滑動距離就能完成相應的操作。

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庫 ,而這個能儲存你的一切素材:圖片、向量檔案、顏色、字型樣式等。

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

文件的管理

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

舉個實際的例子:

尾巴

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