學做UI設計已經有一年的時間了,不長不短剛剛入門。把自己關于設計流程優化的一些思考寫在這里,權當是對于過去一年的歸納與總結。
我的設計工作流程
以上是我的工作流程,我將分八個部分總結我的工作經驗,拋磚引玉希望得到大神的指點。
一、素材的收集和整理
臺上一分鐘,臺下十年功。高效的設計來源于日復一日的積累、觀看,每天到公司第一件事就是打開電腦收集好看的素材,素材一多便開始思考如何整理這些好看的各類圖片。如何能做到既在自己需要的時候方便的找到自己想要的素材,又能做到不會被整理所累贅。
我的選擇是在本地進行管理,下面是我的文件夾分類方式:
dashboard:收集后臺管理UI設計
GIF:一些loading之類的動效
icon:好看的擬物化、扁平化圖標
Kit&登錄:網頁和移動端的登錄界面以及一些小控件
GUI:沒有明確分類的界面
移動端:收集各種好看的移動端UI
線性icon:線性圖標也有很多配色很多玩法可以收集,不只是單色調
引導頁&閃屏:收集有意思的好看的引導頁
主題:移動端主題
狀態空:移動端APP狀態空時有意思的圖
網頁:收集各類B端C端網站設計
404:錯誤狀態下的有意思的圖片
彈出框:主要是移動端的彈出框UI
電商:收集詳情頁設計,能為網頁的設計帶來很多靈感
好看的:一些好看的東西哪些分類都不屬于,一股腦拖到這里
平面設計:主要是吸取一下排版方面的知識
這樣的分類基本就把平時工作中可能會遇到的所有類型的素材都包括了,但是素材少的時候還好,一旦多了,很容易就迷失在海量的圖片里面了。
那如何能更快地查看、整理和搜索這些素材呢?系統的文件夾功能肯定不夠用,所以決定選擇一款素材管理軟件。
在軟件上我的需求是:
1.容易打理的(下載后隨便拖一拖就可以整理好,步驟不要麻煩)
2.方便遷移(假如換電腦,不會太麻煩)
3.分類和加標簽簡單(方便快遞篩選對自己設計有幫助的素材)
4.免費
一條免費的要求就去掉了要價超高的Ember等軟件,而且這類軟件都需要將素材導入到軟件里面,一旦更換電腦或者更換管理軟件非常非常麻煩。
最后我選擇的是Adobe 出的Bridge ,優點如下:
1.基于原有的系統文件夾,遷移成本幾乎沒有
2.給素材加的關鍵字直接寫入文件,換臺電腦裝上bridge依然可以看見
3.強大的篩選和搜索
4.可以自定義工作區,方便隨時切換查找和整理兩個工作視圖
5.自由的設置縮略圖的大小,不會像Ember,圖越多縮略圖越小
第一點基于系統文件夾沒什么好說的,不管是電腦內的整理還是電腦之間的遷移都是和普通文件夾沒區別
第二點很重要,一定要養成良好的習慣,就是進入素材庫的圖片一定要加上關鍵字,這是后面利用Bridge快速篩選的前提。
我設置的關鍵字包括兩個類型:風格(沉穩、活潑、清新)和技法(擬物、扁平、輕質感),如下圖,選中要加的圖片后點擊紅框里面的關鍵字就可以了
著重說一下第三點,經過上一步的添加關鍵字,就可以利用強大的篩選功能了。比如我想找扁平化、清新的網頁,那點擊左側的關鍵字過濾器就可以選擇將滿足這兩個條件的所有素材都顯示出來。
那如果不想只看網頁這個文件夾,而想看整個素材庫里面的扁平化、活潑的素材呢,這就要用到右上角的搜索框,先輸入扁平化,再點擊搜索結果上面的『新建搜索』就可以精確地檢索整個文件夾了,還可以選擇是要同時滿足兩個條件還是滿足其一就可以。
第四點就是使用Bridge時候的兩種視圖
這是視圖就是上面說的篩選時用到
第二種就是整理這些素材的時候用到,上下鍵直接就可以翻閱素材,覺得不好看的直接Delete刪掉,如果右邊的圖不夠大看不清空格鍵全屏查看(收集后每段時間都要重新的看一遍自己收集的這些素材,把已經覺得不好看的刪掉,對提高自己的審美非常有好處)
第五種方法都知道了,Adobe標配,ctrl+加減號放大縮小縮略圖
再整理下這個素材庫的使用方法:
1.素材統一下載到待整理文件夾
2.把素材加上關鍵字后放入分類文件夾
3.定期進行回顧、整理
4.查找篩選所需素材
就寫到這里,下一篇總結拿到原型,如何進行梳理,從而為自己的設計制定計劃