|
如今,，越來越多的工具可以幫助我們?cè)谠O(shè)計(jì)工作上縮短時(shí)間，提高效率,。比如：之前需要我們手動(dòng)標(biāo)注的部分,，現(xiàn)在一個(gè)html文件就可以全部搞定；原來用AE制作好動(dòng)效需要我們批量導(dǎo)出圖片交給開發(fā),，現(xiàn)在一個(gè)代碼文件就可以輕松解決,。 不僅如此，很多優(yōu)秀的網(wǎng)站都在源源不斷地給我們提供優(yōu)質(zhì)的素材或靈感,，幫助我們完成日常工作,。下面就是我平日會(huì)使用到的一些工具和網(wǎng)站的分享。 插件 1.AE插件：GifGun 目前,，我所知道的最簡單高效的視頻轉(zhuǎn)GIF的插件,。 在使用這款插件之前，導(dǎo)出GIF最常見的方法一是通過AE導(dǎo)出視頻,，后用PS進(jìn)行再次導(dǎo)出。缺點(diǎn)是操作繁瑣,，而且文件很大的情況下非常吃內(nèi)存,。第二種是借助Adobe自家的media encoder進(jìn)行導(dǎo)出。缺點(diǎn)是你需要再裝一個(gè)軟件,，并且要導(dǎo)出最終滿意的效果需要反復(fù)調(diào)試,，操作并不簡單。 而這款插件完全傻瓜式操作,，還可以導(dǎo)出高質(zhì)量的GIF文件,。  2.AE插件：Motion 2 MG動(dòng)效神器,。不過,，我個(gè)人最常用到的功能是“錨點(diǎn)設(shè)置”,。軟件提供了九個(gè)位置的錨點(diǎn)選擇。無論是做MG動(dòng)效還是UI動(dòng)態(tài)演示稿,，在確定中心點(diǎn)位置的時(shí)候非常好用,。而且其他功能也非常豐富。比如：彈性動(dòng)效,、爆炸效果,、復(fù)制關(guān)鍵幀、批量命名等等,，功能非常全面且操作簡單,。  3.AE插件：Bodymovin 設(shè)計(jì)師在設(shè)計(jì)動(dòng)效時(shí)會(huì)有很多想法,。不過,，用AE軟件可以輕松制作出來的效果，在開發(fā)同學(xué)那里可就不一定了,。在工期緊張的情況下,，耗費(fèi)大量精力和時(shí)間去還原這些動(dòng)畫效果，顯然有些不切實(shí)際,。 不過,，當(dāng)Airbnb開發(fā)出Lottie并開源之后，這種情況就不同了,。設(shè)計(jì)師可以通過Bodymovin這款插件導(dǎo)出JSON格式文件,，讓工程師放入APP項(xiàng)目中，就可以百分百還原AE中所制作的效果了,。 雖然插件還并不是十分的完善,，一些復(fù)雜的效果還無法實(shí)現(xiàn)。但項(xiàng)目中90%的效果都是可以轉(zhuǎn)化導(dǎo)出的,。  4.PS插件：Cutterman、GuideMe,、Parker,、Psmirror四件套 Cut君開發(fā)的幾款PS插件。Cutterman切圖工具,；GuideMe自定義參考線工具,，個(gè)人在網(wǎng)頁端最常使用；Parker支持全方位標(biāo)注的插件,；Psmirror個(gè)人最常用的實(shí)時(shí)預(yù)覽工具,。 以上幾款插件有三款是收費(fèi)軟件。不過，考慮到都沒過百元,，可以購買永久且免費(fèi)升級(jí),，還是非常劃算的。插件均為中文,，并且自帶使用說明，非常的良心,。  5.PS插件：藍(lán)湖 藍(lán)湖本身的功能就非常強(qiáng)大。插件主要功能包括上傳設(shè)計(jì)稿和標(biāo)記切圖,。制作完成的設(shè)計(jì)稿上傳之后可以和團(tuán)隊(duì)其他成員共享,。并且網(wǎng)頁端會(huì)自動(dòng)標(biāo)注，十分方便,。標(biāo)記切圖功能也很簡單,。將要切圖的元素添加標(biāo)記，上傳之后開發(fā)人員可以一鍵下載切圖,，非常高效,。  6.Sketch插件：AutoFixiOSTextLineHeight  在公眾號(hào)中找到的一枚插件,，充分解決了開發(fā)與設(shè)計(jì)圖在行高上不統(tǒng)一的問題。為了使字體行高更加精準(zhǔn),，也為了避免反復(fù)調(diào)節(jié),，可以使用這款插件，能夠很好地幫助我們解決此類問題,。 7.Sketch插件：Sketch Measure 高效的切圖標(biāo)注工具,，和sketch軟件十分匹配。有各種標(biāo)注功能和切片功能,，可直接導(dǎo)出html格式,，里面包含全部規(guī)范細(xì)節(jié)和css格式等?？梢院芎玫慕档蜏贤ǔ杀?，提高效率。  軟件 1.堅(jiān)果云 非常適合快速存儲(chǔ)需求,。界面簡潔，功能強(qiáng)大,，操作簡單,，可全平臺(tái)同步。甚至不用打開客戶端，右鍵即可同步云端,，非常適合團(tuán)隊(duì)協(xié)作和臨時(shí)儲(chǔ)存需求,。  2.MindNode 一款思維導(dǎo)圖軟件,。我選擇它的理由很簡單,，“顏值夠高”。  3.有道云筆記 各種平臺(tái)均可同步,，界面簡潔清爽，功能豐富,。本人經(jīng)常把他當(dāng)做學(xué)習(xí)工具來使用,。是我整理筆記的首選軟件。  4.字由 云字庫功能非常方便,，省去了找字體和下載字體的麻煩。PS,、AI,、Sketch等可多軟件使用。  5. Design Camera 當(dāng)我們?cè)O(shè)計(jì)好界面之后,，總是喜歡套上各種樣機(jī)進(jìn)行展示。這款軟件可以省去我們?nèi)フ覙訖C(jī)的時(shí)間,。將我們的設(shè)計(jì)稿拖入界面中的3D樣機(jī)當(dāng)中就完成了,。手機(jī)顏色、背景顏色,、燈光,、畫面比例均可調(diào)節(jié)。同時(shí),，軟件還可以錄制視頻,，自定義視頻等。當(dāng)插上數(shù)據(jù)線,，還可以實(shí)時(shí)顯示記錄我們?cè)谑謾C(jī)上的操作,。 網(wǎng)站 1.圖庫 ① Unsplash--https:/// 免費(fèi)可商用 ② PIXABAY--https:/// 免費(fèi)可商用 ③ Pexels--https://www./ 免費(fèi)可商用 ④ UI Faces--https:/// UI頭像圖庫,。有豐富的內(nèi)容,，和多樣的篩選功能,。 2.壓縮工具 ① TinyPNG--https:/// 個(gè)人認(rèn)為最好用的圖片壓縮網(wǎng)站,。支持.png和.jpg格式圖片的導(dǎo)入,。 ② Smallpdf--https:/// pdf格式文件壓縮網(wǎng)站,。操作簡單,，文件拖入即可壓縮。同時(shí)還支持其他格式文件轉(zhuǎn)pdf等功能,。 3.字體 ① 字客網(wǎng)--https://www./ ② 站長素材--http://font.chinaz.com/ 4.矢量圖標(biāo) ① easyicon--https://www./ ② iconfont--https://www./ ③ FLATICON--https://www./ 5.顏色 ① Color Hunt--https:/// 提供了多種高質(zhì)量的配色方案。還可通過搜索得到與自己想法匹配的顏色,。 ② Adobe Color CC--https://color.adobe.com/zh/create/color-wheel/ ③ COOLORS+SKILLSHARE--https:/// 6.規(guī)范 頂級(jí)互聯(lián)網(wǎng)公司設(shè)計(jì)規(guī)范網(wǎng)站,。 ① Apple--https://developer.apple.com/design/resources/ ② Material Design--https://www./design/ ③ Microsoft--https://www.microsoft.com/design/ ④ 螞蟻金服--http://design.alipay.com/ ⑤ 微信小程序--https:/// 除此之外,，還有Airbnb,、Facebook、Uber等大廠,?？梢缘卿浰麄兊脑O(shè)計(jì)網(wǎng)站，去了解世界頂級(jí)互聯(lián)網(wǎng)公司的產(chǎn)品規(guī)范,。 7.可用性測(cè)試網(wǎng)站 https:///resources/contrastchecker/ 可以測(cè)試字體顏色在強(qiáng)光下是否清晰可見。數(shù)之比大于等于4.5：1為正常,。 8. 緩動(dòng)函數(shù)速查表 http://www./easeing/easeing/ 動(dòng)效設(shè)計(jì)工作中，可以作為動(dòng)態(tài)曲線的參考,。 9.素材下載 ① http://www. ② Mockupworld--https://www./ 11.賞析 1.pinterest、behance,、dribbble 設(shè)計(jì)網(wǎng)站三件套不必多說了,。 2.http:/// 3.https:/// 4.http:/// 5.https:// 瀏覽器插件（Chrome） 1.muzli 設(shè)計(jì)靈感插件,。安裝之后,，每次打開瀏覽器，你就能從各大設(shè)計(jì)網(wǎng)站看到每日的精選推薦,。 2.Site Palette 可以快速分辨當(dāng)前網(wǎng)頁的主色，中間色調(diào)和MD配色搭配等,。同時(shí),，可以下載色板供PS或Sketch等軟件使用。 3.截圖大師 非常方便的網(wǎng)頁端截圖插件,。 到這里,，我個(gè)人平時(shí)常用的設(shè)計(jì)軟件,、插件、網(wǎng)站大部分都總結(jié)完畢了,。后面有新的發(fā)現(xiàn),，或是好用的軟件我也會(huì)陸續(xù)分享，來不斷擴(kuò)充自己的「武器庫」,。 |
|
|
