網站設計必不可少的幾款珍藏軟件

日期:2020-01-11 17:28:19 作者:檸檬味 出自:内蒙古快3推荐开奖结果

作為網站設計師,我們可以選擇很多工具和軟件,網站設計師不僅僅需要設計網站原型圖,還需要設計網站效果圖,網站動態圖。所以就涉及到很多工具了,下面我們來說說一些非常好用,必備的軟件。

案繪制

image.png

Sketch

在方案繪制這個環節,大家應該不陌生。首推的是Sketch,配合它使用的還有插件CraftManage,在繪制圖片時使用它custom這個功能,可以隨機更換填充圖片,在做用戶頭像和APP里面的圖片時特別方便。

Photoshop

Photoshop的功能在這里不再強調,在交互設計中,用來繪制方案沒有sketch高效(原因我在之前的文章強調過多次)。但它強大的處理圖片的功能,讓人也忽視不了,經常能幫忙解決一些關于圖片的裁切、格式調整、顏色等等的一系列問題。

圖片處理

image.png

這里的圖片處理主要是指在導出供程序員使用的APP圖片資源。為了降低圖片所占內存大小,需要進行壓縮,ImageOptim是個不錯的選擇,但它有時候壓縮的大小并不是很大,因為是對圖片基本是無損壓縮。另外一個是在線工具TinyPNG,但對圖片耗損比較大,適合圖片透明區域比較多的情況。

gif制作主要是將一些小視頻(主要是APP的demo)其中的某一小段做成圖片,方便和運營的童鞋們進行溝通,他們在發文時有時候需要用到。GIPHYCapture,操作簡便,對錄制的gif也可以進行編輯,使用非常方便。

動效原型

Flinto

動效原型我試過很多種,最后剩下的是這三種,當然只供大家參考。Flinto是制作demo非常高效的工具,支持sketch導出。只要在sketch做好原型圖然后通過插件就可以導入到Flinto。但Flinto的缺點在于,它缺少邏輯判斷的功能。比如說點擊一個區域可能有兩張狀況出現,此時Flinto并不能表現出這種邏輯關系,于是有了Origami作為補充。

Origami

image.png

Origami是Facebook開發的一款動態工具,它的優點是能很細致地表達一款動效的狀態出來,支持各種邏輯的跳轉,并且可以調動手機攝像頭,模擬拍照功能,可以調用JS代碼。但它的缺點在于不能做太多的頁面,二十個頁面以上的效果就會卡,不支持sketch的導入,需要手動拷貝文件夾。對設計師來說,因為代碼思維操作,學起來也稍微顯得有點困難。

Framer

Framer比Origami更接近代碼。兼容sketch和ps的文件導入,熟悉以后按照適合Framer的操作來組織sketch圖層在導入Framer的話,非常便捷。有些重復的事情用結構控制使用代碼更方便,可實現的效果跟Origami差不多。程序員學起來特別容易上手。這個我也才剛接觸,很感興趣,希望有一天也能成為大神。

視頻相關

image.png

1.視頻制作

動效demo有時候需要輸出視頻文件,想我做視頻類的APP也經常接觸到視頻,所以這一塊也有些雞肋。視頻制作軟件功能最強大的就是AdobeAfterEffects,簡稱AE。學習成本不太高,跟其他視頻制作軟件的原理比較相似,就是在某個時間段內,將每個元素每個屬性的變化進行拆分,一個個進行實現。

FinalCut是Apple公司開發的視頻軟件,它更偏向于視頻的拼接與合成,作為交互設計師,并不像動畫師那樣去制作,在視頻這一塊很多功能它就可以搞定。但FinalCut做出來的視頻內存會非常大,一般5s左右1280x720px的視頻可能就有200MB。

(編輯:檸檬味)



上一篇:更好的提升用戶登錄體驗先解決標簽和資源占用問題 下一篇:在畫網站設計原型圖之前需要注意的事情有哪幾件
18585853123
在線留言