首頁

動畫筆記06《文字路徑書寫MG動畫》

資深UI設計者

推薦一個做路徑動畫的腳本,還不錯,看看吧。

undefined

10年經驗設計師教你如何尋找高質量素材

博博

UI妹兒 2018-02-22 11:13:02

我們平時做設計的時候,都會遇到挑選素材這個難題。

做UI的同學,會瀏覽動效網站尋找靈感又或者去挑選適合的圖標;做平面的同學,特別是電商廣告的同學,就會下載電商banner,還有高質量的圖片;另外還有絕大部分的人都會在做報告的時候,下載漂亮的PPT和Word模版。如果剛好那時候你在找工作,還需要找精美的簡歷模版……

但這些素材到底在什么地方找呢,又在什么地方找到高質量又免費好用的素材呢?

這次,我早已為大家準備好。下面是我花費大量時間精力整理而成的素材網站,全部都是親身試用后的精選出來的。希望能幫大家在找素材這條路上節(jié)省更多的時間,找到更適合自己的那些素材。

懶人福利

如果你覺得這些網站下載太麻煩

可以直接翻到文末

專門為大家整理好的

1000G高質量精選設計素材

免費送!

機會就一次,錯過可以不用等下年了

因為活動就這一次

常用素材

一、免費可商用圖片

1、https://pixabay.com

10年經驗設計師教你如何尋找高質量素材

全網共一百多萬張免費圖片素材,且質量非常高,種類繁多,適合每一個行業(yè)使用。

10年經驗設計師教你如何尋找高質量素材

優(yōu)點:種類很多,質量高

缺點:下載需注冊,加載慢

推薦指數:★★★★★ 4.5

2、https://unsplash.com

10年經驗設計師教你如何尋找高質量素材

全世界的優(yōu)秀圖片網站,所以圖片風格很豐富,而且大部分質量都很高,分分種可以用來做壁紙!

10年經驗設計師教你如何尋找高質量素材

優(yōu)點:質量高且優(yōu)秀,數量多,風格獨特

缺點:加載慢

推薦指數:★★★★ 4

3、https://www.pexels.com

10年經驗設計師教你如何尋找高質量素材

每日會更新100張高質量的照片在首頁展示,無論風光還是人物,這里應有盡有。

10年經驗設計師教你如何尋找高質量素材

優(yōu)點:種類多,每日更新,不需注冊

缺點:加載慢

推薦指數:★★★★ 4

4、http://foter.com

10年經驗設計師教你如何尋找高質量素材

網站開始會將素材分為商業(yè)、動物和風景三大類,如果你需要尋找其他圖片,可以直接在搜索欄直接搜索關鍵詞。

這里的圖片給我的感覺就是有趣,獨特,有很多圖片都很適合做海報。

10年經驗設計師教你如何尋找高質量素材

優(yōu)點:分類明確,質量很高

缺點:加載超慢,種類不多

推薦指數:★★★★ 4

5、https://burst.shopify.com

10年經驗設計師教你如何尋找高質量素材

網站最大好處在于幫你分成非常多的類別,盡管數量比不上其他網站那么多,但這里的圖片風格都很統(tǒng)一,很有質量,感覺看上去就很年輕化。

10年經驗設計師教你如何尋找高質量素材

優(yōu)點:風格獨特,質量高,分類明確

缺點:數量不多

推薦指數:★★★★ 4

6、https://negativespace.co

7、http://superfamous.com

8、http://librestock.com

9、http://www.sozai-page.com(日本食物類網站)

10、https://www.foodiesfeed.com(美食)

11、https://www.sitebuilderreport.com(一次性搜索31多家免費可商用圖片的網站)

二、字體

1、https://fontsup.com

10年經驗設計師教你如何尋找高質量素材

提供大量免費的英文字體,質量很高,也很有特色,每個字體還有一個詳情頁,非常用心

10年經驗設計師教你如何尋找高質量素材

優(yōu)點:種類多,質量高,免費下載

缺點:加載稍慢,廣告有點多

推薦指數:★★★★ 4.5

2、http://www.myfonts.com

10年經驗設計師教你如何尋找高質量素材

網站提供的商業(yè)字體,質量很高很漂亮,數量也很多。

10年經驗設計師教你如何尋找高質量素材

優(yōu)點:種類多,質量高

缺點:付費

推薦指數:★★★★ 4

3、http://comicneue.com

10年經驗設計師教你如何尋找高質量素材

免費手寫可愛字體下載

優(yōu)點:質量高,字體可愛

缺點:數量較少,下載稍麻煩

推薦指數:★★★★ 3.5

4、http://www.zhaozi.cn

10年經驗設計師教你如何尋找高質量素材

找字網,種類豐富,基本上可以找到市面上的所有字體。

10年經驗設計師教你如何尋找高質量素材

優(yōu)點:種類很多,方便查閱

缺點:使用時注意商用版權,僅中文字體

推薦指數:★★★★ 4

5、http://www.17ziti.com

10年經驗設計師教你如何尋找高質量素材

綜合性字體下載網站,里面包括英文字體、中文字體,甚至是手機字體。數量很多,唯一不足就是沒有注明版權范圍,所以商用的時候要注意。

10年經驗設計師教你如何尋找高質量素材

優(yōu)點:覆蓋中英文字體、種類多

缺點:網站廣告稍多,沒有注明版權范圍

推薦指數:★★★★ 4

UI設計素材

一、圖標類

1、http://www.iconfont.cn

10年經驗設計師教你如何尋找高質量素材

阿里媽媽MUX傾力打造的矢量圖標管理、交流平臺,內含一百多萬個圖標!

設計師將圖標上傳到Iconfont平臺,用戶可以自定義下載多種格式的icon,平臺也可將圖標轉換為字體,便于前端工程師自由調整與調用。

10年經驗設計師教你如何尋找高質量素材

優(yōu)點:種類豐富,質量超高,免費下載,中文界面,阿里旗下

缺點:不能打包下載、需注冊

推薦指數:★★★★★ 4.5(滿分5星,下同)

2、https://www.flaticon.com

10年經驗設計師教你如何尋找高質量素材

大型圖標網站,里面擁有將近50萬個圖標,一萬多個圖標集!種類豐富,質量超高,且支持在線編輯。

優(yōu)點:種類豐富,質量可靠,免費下載

缺點:英文搜索,加載稍慢,打包下載需注冊(科學上網)

推薦指數:★★★★★ 4.5

3、http://fontello.com

覆蓋絕大部分網上可能應用到的圖標,也就是說任何你需要的網站類圖標都可以在這里找到。

優(yōu)點:網站圖標齊全,質量高,免費下載

缺點:加載稍慢,僅有黑白圖標

推薦指數:★★★★ 4

4、https://thenounproject.com

擁有一百多萬個圖標的大型圖標網站,而且圖標都是由全世界各地設計師設計,質量非常高!而且里面有很多有趣的圖標,例如下面鳥籠類圖標集,非??ㄍ垡粒?

優(yōu)點:種類豐富,質量超高,免費下載

缺點:英文搜索,加載慢,不能打包下載

推薦指數:★★★★ 4

5、https://icomoon.io

聚合類圖標網站,里面集合了不同網站的不同圖標,付費免費都有,種類超多。

優(yōu)點:種類豐富,質量一般,免費下載

缺點:英文搜索,加載超慢,操作復雜

推薦指數:★★★★ 3.5

6、https://useiconic.com/open

7、http://dryicons.com/free-icons

8、http://www.iconarchive.com

9、http://www.entypo.com

10、http://glyphicons.com

二、其他

1、UIKIT.ME

10年經驗設計師教你如何尋找高質量素材

各種免費高質量UI資源下載,Sketch、PSD甚至AE素材都有!

這個網站除了提供高質量的素材以外,還提供超人性化的下載方式:(百度云)

10年經驗設計師教你如何尋找高質量素材

優(yōu)點:質量高,免費下載

缺點:種類少,部分素材有重復

推薦指數:★★★★ 4

2、TOSKETCH.COM

10年經驗設計師教你如何尋找高質量素材

網站給我的感覺就是干凈,高大上!里面提供了工具包,網頁,移動,模型和圖標等其他素材,而且這些素材都有一個特點,就是質量高且新鮮!所有素材都是上傳的,這個有點了不起。

10年經驗設計師教你如何尋找高質量素材

優(yōu)點:質量超高,更新快,中文界面,百度云下載

缺點:只提供Sketch資源

推薦指數:★★★★ 4

3、UI8.NET

10年經驗設計師教你如何尋找高質量素材

U18是設計素材圈的網紅,提供大量漂亮的超高質量商業(yè)設計素材,但并非免費,絕大部分都需要付費。

10年經驗設計師教你如何尋找高質量素材

優(yōu)點:質量超高、數量豐富、界面清爽

缺點:付費(充值是個問題),加載稍慢,下載稍麻煩

推薦指數:★★★★ 4

4、PRINCIPLEREPO.COM

10年經驗設計師教你如何尋找高質量素材

高質量Principle原型和動效設計資源的網站,特別是動效,每一個都非常漂亮,很有參考價值。

優(yōu)點:質量高,數量豐富,免費下載

缺點:加載很慢,只有動效資源

推薦指數:★★★★ 3.5

5、UISHE.CN

10年經驗設計師教你如何尋找高質量素材

UI社,網站提供主題包、圖標、界面和樣機素材等素材,屬于綜合性的素材下載網站。因為國內的網站,大家不用擔心加載慢等問題啦。

優(yōu)點:種類很多,質量高,下載方便

缺點:付費

推薦指數:★★★★ 4

6、MOCKUP.ZONE

7、GRAPHBERRY.COM

8、GRAPHICTWISTER.COM

9、SKETCHAPPSOURCES.COM

10、DUNNK.COM

平面設計素材

1、千圖網(www.58pic.com)

國內大型素材網站,素材幾乎覆蓋所有類目、廣告設計、電商設計和辦公室素材等。逢節(jié)假日都有提供主題素材提供下載,且質量很高!

優(yōu)點:種類超多、質量高、免費下載、主題分類

缺點:非會員每日有數量限制

推薦指數:★★★★★ 4.5

2、包圖網(http://ibaotu.com)

包圖網,大型素材下載網站。全網站提供原創(chuàng)免費可商用的素材下載,種類齊全且質量超高,每日更新1000張!

10年經驗設計師教你如何尋找高質量素材

優(yōu)點:種類齊全,質量超高,免費下載,全站正版可商用

缺點:非會員每日有數量限制

推薦指數:★★★★★ 4.5

3、千庫網(http://588ku.com/)

10年經驗設計師教你如何尋找高質量素材

大型素材網站,可能是國內唯一一家專業(yè)設計師提供免摳圖PNG素材,全站2000萬+高質量素材無限下載,推薦!

10年經驗設計師教你如何尋找高質量素材

優(yōu)點:種類多,專業(yè)提供免摳PNG源文件

缺點:非會員每日有數量限制

推薦指數:★★★★ 4.5

另外國內還有付費的昵圖網和我圖網,免費的有站長素材等等素材網站,數量很多這里就不一一舉例了。

Loading設計思路分享

博博


UI妹兒 2018-05-04 10:44:21

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里

Loading設計思路分享

Loading作為一個常見,并且?guī)в信潘缘膭赢嫞呀洷桓髀反笊癖憩F的淋漓盡至。那么如何在眾優(yōu)秀作品下,做出一個性化的Loading動畫?

Loading設計思路分享

Loading種類:

1.狀態(tài)類(進度條):通常數據量很大,客戶端已知加載量,并能根據當前加載速度計算出何時加載完成。

狀態(tài)型的Loading以進度條類為基準,可以為用戶提供預期時間,多伴隨百分比進度出現。進度條的形式以線性的形式出現,已知總量,降低用戶對期待時間的感受。無聊的等待會讓人厭煩,作為一個UI設計師需要關注每一個細節(jié),尤其是用戶的情緒并將引導到加載后的頁面。

By Piotr Adam Kwiatkowski

2.無狀態(tài)類(菊花):通常數據量比較小,客戶端無法預知加載量。

Loading設計思路分享

無狀態(tài)類的Loaing以菊花為代表,通常都是一組可以無限循環(huán)播放的動畫。

無狀態(tài)類的Loaing如有需要可以做的特別一些:https://dribbble.com/search?q=loading

我們的App需要一個無狀態(tài)的Loading。

我始終相信設計的直覺很重要,抓住直覺的爆發(fā)點,是一個成熟設計師必備的素質。于是先按照最初的想法快速做了一版。

Loading設計思路分享

相信很多人對這個Loaing眼熟,當然,這肯定不是我們要的效果,不過在制作這Loading的時候不斷的推翻自己的想法,時而清醒時而模糊,感覺突然找到了方向但瞬間也可能煙消云散。這種不斷反復的過程中還是收獲了很多。

Loading設計思路分享

既然是無限,循環(huán),表現上就不能過于缺乏趣味,這個度很難把握。形式感上面設計要簡單,又要通過最直接的方法創(chuàng)造空間感,偶然間發(fā)現馬戲團的拋球表演。突然間有了靈感,于是就沿著這個思路開始動手設計:

我嘗試去直接模仿拋棄的運動,但是效果并不是很好,但是從Demo中可以看出,值得很入研究。

為此我們搜索了一下現實中的扔球效果:

Loading設計思路分享

經過分析我們得出了第一條小球的運動路經是一個無限的符號。

工作路經確定后,導入C4D中進行單球運動軌跡測

由于實例中,小球會受到重力以及加速度的影響,并非勻速運動,但在實際Loading制作過程中,為了視覺效果,我們希望小球做勻速運動

發(fā)現問題:小球在中心焦點位置出現明顯卡頓

起初我們認為是速度曲線沒有調整好所導致的,但我們嘗試幾版后發(fā)現并不是這樣,最后我們發(fā)現導致這個問題的原因是路經節(jié)點問題。

Loading設計思路分享

調整節(jié)點

通過調整節(jié)點后,不難發(fā)現,中心焦點處的卡頓明顯不見了

為了加強透視效果,我們將球的大小和顏色進行了關鍵幀處理,這已處理增加的景深對視覺的沖擊,使得空間感更強了。

看起來怪怪的。。。。。

為了使整個運動規(guī)律更加精準,我們發(fā)現運動的起點距離是關鍵,不懈的追求完美的情況下,總是會有頓悟的時刻,幸運的是找到了問題的所在

三個球勻速運動的情況下,應該保證每相鄰兩個球之間路經上的距離是相同的。

藍藍設計363858.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

設計流程與產品分析

藍藍設計的小編

為什么近期市場上會出現大片的方法論呢?究其原因:是一種壞的學術風氣或普通群眾的跟風心里導致的。


互聯網興起初期,沒有相應的專業(yè)或產品設計的學派,大部分設計師的出發(fā)點基本圍繞「解決問題」的角度來做產品設計。當時唯一的理論點就是現在所謂的「競品分析」。

谷歌對話式交互規(guī)范指南系列:對話式界面的概念和機制

資深UI設計者

語音交互是一個全新的體驗設計領域,目前各家機構、公司、設計組織還處于摸索設計范式的階段,Google提供了一份非常成熟、系統(tǒng)的交互規(guī)范文檔,其中包含了核心概念的詮釋以及諸多可以指導設計的實踐原則。最近正在做的項目中涉及到語音交互的部分,所以順手將這份文檔翻譯出來,給需要的設計師參考。

我的譯文盡量的貼合文檔中原有的表意,同時基于我個人對語音交互的理解對表達文字進行潤色。其中有個別概念名詞比較抽象,所以我也旁邊附上了英文單詞,以便大家理解。

我們正在進入一個有光明前景的全新計算領域,機器學習和人工智能激發(fā)著對話式界面和自然語言的進步,同時使對話式交互成為一種新的交互模式。

史上最詳細 iPad 插畫入門教程

用心設計

iPad 在很長一段時間內對于筆者來說,都是看視頻玩游戲的工具。但由于手機更易攜帶且功能接近,iPad
就逐漸被我忽略在了角落里安靜地吃灰。直到 iPad Pro 發(fā)布,我突然意識到了 iPad 是可以畫插畫的,即使是我的舊 iPad
也可以老樹逢春。于是我懷揣著「舊物利用」的環(huán)保理念開始了 iPad 插畫的研究之路。下面我把總結的入門經驗分享給大家。(教程適用于所有版本的
iPad 哦)。篇幅可能有點長,be patient, 好伐?

史上最詳細 iPad 插畫入門教程

設計中的中宮指什么?不懂這個談字體結構和造型都白搭

用心設計

字體設計中,新手設計師才說字體結構松散或緊湊,設計老司機只談中宮。



你肯定也有這樣的感受,因為談論字體結構松散或緊湊只是對字體造型的直觀描述,并無更多內涵或實際意義上的指導。



設計中的中宮指什么?不懂這個談字體結構和造型都白搭

字體設計的細節(jié)&形式感

用心設計



明明想法思路都對了,為什么最后呈現出的效果卻...略顯遺憾呢?字習時間的活動到七十多期了,其中發(fā)現很多作品想法思路是正確的,有些還很有意思,但整體視覺效果確一般,那為什么所想和所做會有如此差距?

所以有了本期要和大家聊的主題:字體設計的細節(jié)和形式感。本篇將會通過一些實例帶大家認識字體細節(jié)和形式感,所用大部分實例選自我課堂中的現場修改,時間短暫難免有瑕疵,望理解。

字體設計的細節(jié)&形式感

設計的溝通:每一步都算數

用心設計

寫在前面:

設計是一門溝通的藝術,跟信息的溝通,跟設計的溝通,跟人的溝通,都是在溝通中獲取信息,達到目的。

下面我分享幾個自身工作的經驗,希望對大家有所幫助。


設計的溝通:每一步都算數

我的排版套路——“方塊理論”

用心設計

前言:一直以來,我們都認為“點線面”是畫面構成最基礎的組成部分,而從廣義的角度來說并不完全是這樣。傳統(tǒng)的說法中,畫面最小面積是“點”,若干個“點”組成了“線”,若干條“線”組成了“面”,但真的是這樣嗎?假設我們把點放大,它其實也是一個面,而同樣的,我們把線放大,它同樣其實也是一個面,其實“點線面”在述說的是一個方塊(區(qū)域),而在一個畫面中,方塊與方塊之間是相互作用的,而使各個方塊達致平衡的理論,我稱之為“方塊理論”。

純干貨:我的排版套路——“方塊理論”(初探)

日歷

鏈接

個人資料

藍藍設計的小編 http://363858.cn

存檔