在移動端設計風起云涌的今天,移動端的UI和UX設計師任重而道遠。巧婦難為無米之炊,好素材就是設計師的底氣。這次搜集的移動端免費素材覆蓋全面,從教學資源到UI Kit,從開發工具到圖標合集,一應俱全。
年度總結好資源:
學習資源
UX Design for Mobile Developers
移動端開發的用戶體驗設計是Udacity所推出的課程,教授移動端應用開發用戶體驗設計的技術和案例,主要是針對移動端開發者,提高他們對于設計和用戶體驗的知識和意識,讓他們開發的APP兼具好功能和好體驗,不過編程開發的體驗設計并不在課程范疇以內。
課程本身是免費的,但是如果你需要一個一對一的教練那么你就得付費了。
對于開發者而言,這是學習用戶體驗設計和移動端UI設計的絕佳課程。盡管課程主要的案例都圍繞著Android平臺,但是設計思想和原則符合所有的移動端平臺。
Android Design in Action
Android Design 實踐(Android Design in Action)同樣是Youtube上Android Developers 頻道的課程,課程中谷歌設計師Nick Butcher, Adam Koch 與 Roman Nurik 會與你一同探討Android Design中的各種設計元素。
每一次課程,三位設計師會找來許多APP,將其分割肢解分析它們的UI和UX設計,解釋這些設計哪些可行哪些不行,之后他們會基于這些應用的需求和特色進行重新設計,并且展示整個設計的流程并解釋設計的理由。對于設計師而言,尤其是Android平臺的UI設計師而言,這些課程絕對靠譜,你可以將課程中傳授的技巧應用在自己的APP設計中。
Hack Design
對于任何想借助網絡來學習設計的設計初學者而言,Hack Design 網站絕對可以稱之為業界良心,它可以幫你將設計基礎知識全部補上來。幾位業界著名的設計師為Hack Design 設計了包括博客、圖書、視頻、游戲以及教程等多種類型的內容,并且將這些以設計為核心的內容分割為50個不同的課時。你可以按部就班地學習,也可以直接訪問網站尋找自己想學的內容。
不知道出于什么原因,這個網站在上線之初就已經被GFW給擋在墻外。怎么訪問,相信你懂的。
獲取靈感
接下來的資源,可以幫你獲取設計靈感。多看別人家的設計,了解哪些設計可行,哪些不可行,了解不同的風格,學習不一樣的設計方法,然后應用在自己的設計中。
CAPPTIVATE.co
和許多傳統的UI設計分享站不一樣,它所提供的不僅僅是iOS 應用的截圖,而是通過5秒鐘的視頻來展示APP中的過度效果和動效。預覽視頻也很簡單,只需要將鼠標光標移動到界面上,就可以看到這些動效。這些視頻是按照界面類型(導航界面、加載過度、刷新特效等等)和動效類型(褪色、視差、波紋等等)來分類。如果你正在為你的APP尋找可靠的動效設計,那么這個網站你不能錯過。
Android Niceties
Android Niceties這個網站將那些最漂亮的Android APP的截圖搜集到了一起,你可以在這里查看各種優秀的APP截圖,獲取靈感。
Mobile Patterns
這個網站搜集了Android和iOS兩大主流平臺應用的UI截圖,你可以通過篩選選項單獨瀏覽一個平臺的截圖,也可以同時瀏覽兩者。你還可以按照界面類型來篩選,比如時間軸、圖片瀏覽、注冊流程等等。
Pttrns
Pttrns 主要展示了iOS平臺上的界面樣式,分iPhone版和iPad版。你可以在這里根據類型來篩選截圖,比如著陸頁、個人信息、評論、列表,等等。
優質素材
工具
Android Asset Studio
Android Asset Studio能幫你方便快捷地整合管理你的Android項目所設計的素材和工具。它自帶了一系列的圖標生成器,可以直接用它調用圖片、剪貼畫、文本圖標等。借助Android Asset Studio可以幫你制作Launcher、Smartbar、標簽欄、通知、通用圖標等。
選擇合適的圖片、前貼畫或者文本圖標之后,稍加設定就能生成圖標或者界面,然后下載調用。這些素材會生成不同的分辨率,比如xxxhdpi、xxhdpi、xhdpi、hdpi和mdpi。
除此之外,其中還有其他的實用工具,比如Android ActionBar 樣式生成器,Android Holo色彩生成器和Device Art生成器。
Sketch Plugins
越來越多的UI設計師開始使用Sketch來做設計。Sketch Plugins是一個搜集整理實用的Sketch插件的網站,幫你提升設計效率。
UI Kits
Teehan+lax
Teehan+lax是一個設計機構,并且提供一系列免費的工具來幫你做設計。比如他們提供iPhone和iPad版iOS7的UIKit,包括PSD和Sketch兩種格式。從iOS5時代開始,他們就開始隨著蘋果公司的更新進度來更新他們的UI Kit,很快我們將會看到他們推出的iOS8 UI Kit。
Tethr
Tethr是一個免費的iOS UI Kit,組件全面廣泛,包含了多媒體、社交、導航和電子商務等多個領域。它包含了138個模板、250個組件總計8個PSD文檔,絕對實用。
Mercury
你能從Mercury下載iOS8的矢量UI Kit,其中包含了iPhone和iPad的UI組件。
圖標合集
Flat Icon
Flat Icon是最大的免費矢量圖標合集,你可以在這里下載到SVG、EPS、PSD和PNG格式的圖標,為了方便使用,你可以在PS、AI和AE中裝上它的插件。
Android Icons
這一唯一推薦的收費資源,因為它確實很便宜,而且圖標品質非常高,絕對物超所值。Android Icons提供了一組專門為Andorid系統設計的優質圖標,包含250個圖標,每個圖標有5個尺寸14種顏色,已制作成矢量素材,并包含友好的授權許可,售價25美元。
Pixel Love
Pixel Love是一個優質的免費圖標合集。你可以下載一組60個免費的iOS和Android圖標,另外還有40個免費的社交媒體圖標。
Icon Beast
Icon Beast 包含了一組500個免費的iOS Tab Bar 圖標,可以運用在iPhone和iPad上。
Appzger Clear Icons
這組Appzger 的極簡風圖標共計500個,并非免費,但是你可以用多少買多少。整套圖標包含不同的格式,包括PSD、PNG、SVG和CSH。
Line Icon Sets
在這里你能找到各種不同來源的免費的線條構成的圖標集。
字體
字體用好了,能讓網站加分不少。一款高大上的英文字體能讓網站的視覺更為高大上。下面就是互聯網上的高品質字體。
Font Squirrel
你在這里可以找到免費商用的優質字體。
Google Webfonts
Google Fonts 是眾所周知的優質免費英文字體集中地。
動效
Facebook Pop
Facebook Pop 是一個可拓展的iOS和OSX動效庫,你可以借助它輕松地在應用中加入動效。Facebook也正是借助這個庫來創建Facebook Paper中的動效和過度效果的。
Canvas
Canvas 是一個iOS庫,無需編寫代碼,你就可以從這個庫中調用動效應用到APP中。教程在這里。
聲效
在設計界面的時候,加入合適的聲效可能是最有趣的用戶體驗設計。音效可以用于通知,進入某個界面時候的提醒,或者破壞性操作(比如刪除)。
Octave
Octave 是一個免費的聲效庫,包含了許多有趣的聲效,大多是點擊、蜂鳴聲,適合應用在各種APP中。
結語
優秀的素材找不完。所以,以上的免費的設計資源只是諸多資源中的一小部分,但是這些優秀的素材足以支撐一個移動端設計師開始一個優秀的項目,逐步發現一個更大的世界。
回顧過去,展望未來:
回顧過去!什么網站才擔得上2014年最佳呢?
《愛不釋手!2014年最佳的20個優秀網頁設計》展望未來!什么設計會統領2015年的網頁呢?
《我的征程是未來!帶你展望2015年最重要的網頁設計趨勢》一起來看!網頁設計從誕生到現在的歷程!
《漲姿勢!寫給網頁設計師的網頁設計簡史》
本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。
【優設網 原創文章 投稿郵箱:2650232288@qq.com】
================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量87萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com
官方微信:想在手機上、被窩里獲取設計教程和各種意想不到的"福利"嗎?添加優設哥微信號:youshege
復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。
發評論!每天贏獎品
點擊 登錄 后,在評論區留言,系統會隨機派送獎品
2012年成立至今,是國內備受歡迎的設計師平臺,提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓