設計師必備！網頁/UI 設計資源總整理＃有這些可以早點下班回 ...

網頁/UI 設計資源總整理＃有這些可以早點下班回家” is published by Nomi - 我是狐狸犬來 ... 花瓣網— 陪你做生活的设计师— 如果說UI中國是可以讓我吸收產業知識重要的 ... 狐狸犬來福設計思考與方法啃書旅遊人類圖療癒之旅狐狸犬來福臉書設計師必備！網頁/UI設計資源總整理＃有這些可以早點下班回家Nomi-我是狐狸犬來福設計師FollowJan24,2018·15minread2020/08/26新增UI動態效果靈感庫有四大動畫工具：AE\Figma\InVision\Principle做出的動態效果參考UIMovementUIMovementisacommunityofdesignenthusiastswhoshareanddiscussthemostinterestinganduniqueUIdesigns.uimovement.com2019/11/14新增樂分享-各種素材資源乐分享素材网_psd素材_平面素材_png素材_免费素材_ppt模板_灵感库乐分享素材网_psd素材_平面素材_png素材_免费素材_ppt模板_灵感库乐分享素材网_psd素材_平面素材_png素材_免费素材_ppt模板_灵感库lfx20.comLli設UI素材-UI社全部|主题包|界面|图标|网页模板|样机素材|菜单导航|影音播放|时间日期|表单按钮|进度条|其他www.uishe.cn2019/11/13新增可應用在blog的插畫圖片（要註明出處）OpenDoodles-FreesketchyillustrationsAlibraryofsketchyillustrationsofpeoplefreeforpersonalandcommercialuse.www.opendoodles.com2019/7/31新增Muzli—有出google的擴充功能，直接安裝每天即時吸收新的設計靈感。

Muzli2-StayInspiredThefreshestlinksaboutdesignandinteractive,fromaroundtheweb.Adesigner'smust!chrome.google.comMuzli-DesignInspirationAllthedesigninspirationyouneed.It'slikecrackfordesigners.Andgoodforyoutoo!#design#ux#ui#inspiration…medium.muz.li每天打開google瀏覽器的頁面，直接給你滿滿的新點子你可以選擇要follow哪些國外知名的設計網站，會隨機出現在你的首頁（每天更新）2.黃金比例線上算的網站—設計時很有幫助，包括文字行距用黃金比例算1x1.414或是直接+4，也就是字體如果是18，行距為22或X1.414再取整數，閱讀起來才會舒服。

黄金比例在线计算工具黄金分割具有严格的比例性、艺术性、和谐性，蕴藏着丰富的美学价值，而且呈现于不少动物和植物的外观。

现今很多工业产品、电子产品、建筑物或艺术品均普遍应用黄金分割，展现其功能性与美观性。

「金属比例」除了黄金比（Golden…www.shejidaren.com包山包海通通都有類型致設計—最常去看的網站，有乾貨，有靈感，有教學!(閉站中2019/11/7更新)致设计-百万电商设计师交流平台,我们是电商设计师,不是淘宝美工致设计网(www.zhisheji.com),百万电商设计师交流平台.电商设计大师们都潜伏于此，聚集了超过50万80,90新锐电商设计师,在此分享了他们的店铺设计,创意设计,美工设计和淘宝首页设计等优秀作品。

www.zhisheji.com2.站酷https://www.zcool.com.cn3.花瓣網—陪你做生活的设计师—如果說UI中國是可以讓我吸收產業知識重要的地方，那麼花瓣網絕對是找尋靈感的最佳所在～玲瑯滿目各種風格的ＵＩ隨你找，而且還有採集的功能可以直接存在你的帳戶裡，通常會先蒐集，做到那個項目再去點開來看就好。

花瓣网_陪你做生活的设计师（创意灵感天堂，搜索、发现设计灵感、设计素材）花瓣网,设计师寻找灵感的天堂！图片素材领导者，帮你采集、发现网络上你喜欢的事物。

你可以用它收集灵感,保存有用的素材,计划旅行,晒晒自己想要的东西huaban.com4.pinterest—咦..?這個經典網站應該不需要介紹了吧https://www.pinterest.com/5.優設大學堂—線上學習網站，有很多線上課程可以在家自主學習。

优设大课堂每一课，都是突破！优设旗下在线辅导品牌优设大课堂，每一课都是突破！优设旗下在线辅导品牌，携优质讲师，致力于设计师成长。

xue.uisdc.com6.Mobbin—日本的設計教學網站，有很多實用技巧。

Mobbin-LatestMobileDesignPatternsCheckoutthehand-pickedcollectionoflatestmobiledesignpatternsfromappsthatreflectthebestindesign.mobbin.design7.圖司機—各種UI.GIF.短視頻.音效模板參考。

图司机-专业海报背景png图片下载图司机专注免费设计素材下载，为您提供高质的提供海报，png，矢量背景图片，办公文档和多媒体模板等，找素材就上图司机988pic.com網頁設計版面參考類BM—蒐集很多網站版型的日本網站，找網站製作靈感的好地方！straightlinebookmarkWebデザインの参考・お手本となるサイトを集めた、大きなサムネイルが特徴のWebデザイナー向けWebサイトギャラリー・リンク集。

素敵なwebサイトを見つけて、新しいwebデザインのインスピレーションを手にしてください。

bm.straightline.jp2.S5-Style—日本搜集好看的網站的導航站，作品都很美很有質感。

【S5-Style】Webデザインギャラリー/WebDesignInspiration優れたWebサイトのデザインギャラリー/Beinspiredforwebdesignfromjapanandglobal.bm.s5-style.com3.LaPA—國外蒐集一頁式網站（landingPage）版型的網站，偏歐美風。

2088LandingPageDesignInspiration-LapaNinjaThebestlandingpagedesigninspirationfromaroundtheweb.LapaNinjaiscreatedtohelpdesignersfindinspiration…www.lapa.ninja4.MovingLetter—蒐集了很多字型動畫，看到喜歡的可以直接點選會有html/css/Js可直接COPY使用(不用去codepen大海撈針..哈哈哈)。

MovingLettersTextanimatedwithJavaScript&anime.jstobiasahlin.com5.AddWebPAGE+—蒐集有趣網站的粉專，每篇文章有詳細的細節介紹網站製作技巧和美感等等，有時候也會參考下。

SecurityCheckRequiredEditdescriptionwww.facebook.com電商banner設計稿定設計—各種banner參考【设计模板】简单好用的在线设计工具，提供丰富精美的设计图片素材简单免费的在线设计工具，提供丰富精美的设计图片素材，无需PS技术，小白也能轻松搞定海报、邀请函、贺卡、banner、表情包等设计模板制作。

www.gaoding.comUI設計類UI設計參考—做APPUI之前總會先survey同業競品APP或相似功能的APP頁面，這個國外網站清楚地將每個APP功能類別分開出來，方便找來參考。

CollectUIDailyinspirationcollectedfromdailyuiarchiveandbeyond.BasedonDribbbleshots,handpicked,updatingdaily.collectui.com2.SKETCHAPPSOURCE-很多免費的mockupsketch檔案可下載SketchAppSources-Freedesignresourcesandplugins-Icons,UIKits,Wireframes,iOS,Android…ThelargestcollectionoffreeandpremiumSketchresourcesformobile,web,UI,andUXdesignersworkingwithSketch…www.sketchappsources.com3.漸層網站—可挑選APP配色～～美！！ウェブデザイナー必見！美しいCSSグラデーションをコピペできる無料ツール17選まとめ-PhotoshopVIPデザインでもっとも頭を悩ますことの多い「配色えらび」。

配色を決まらずに、時間だけが過ぎてしまったという経験のあるひとも多いでしょう。

...photoshopvip.net4.UIMovement—APPUI動態設計參考，可參考做APP小動畫。

UIMovementUIMovementisacommunityofdesignenthusiastswhoshareanddiscussthemostinterestinganduniqueUIdesigns.uimovement.com6.學UI—有UI的乾貨教學。

学UI网-UI设计师学习教程平台学UI网，UI学习教程网站www.xueui.cnUI的設計真的就是要多看～～多吸收才能快速變化出滿意的設計。

UX類1.UX四神湯—偏重訪談與事前規劃類UXeastmeetswestWearefourpassionateUXersfromTaiwan,workingacrossChinaandtheU.S.Weshareourthoughtsandworkexperiences…medium.com2.原型工具—miro可以online直接做原型，介面也都很美，而且也可以匯入sketch！推SignupSignupusingyourOffice365,Slack,GoogleorFacebookaccounts.miro.com素材類unsplash—無著作權(CC0)的高解析圖片，可任意在個人專案或商業使用BeautifulFreeImages&Pictures|UnsplashBeautiful,freeimagesandphotosthatyoucandownloadanduseforanyproject.Betterthananyroyaltyfreeorstock…unsplash.com2.千圖網—(每天可下二張圖)千图网_专注免费设计素材下载的网站_免费设计图片素材千图网(www.58pic.com)是专注免费设计素材下载的网站！提供矢量图素材,矢量背景图片,矢量图库,还有psd素材,PS素材,设计模板,设计素材,PPT素材,以及网页素材,网站素材,网页图标免费下载www.58pic.com3.字體下載—用字型圖片線上找字型名稱字体下载-求字体网提供中文和英文字体库下载、识别与预览服务，找字体的好帮手求字体网免费提供上传图片找字体、字体实时预览及字体下载服务，本网站可识别中文、英文、日韩、书法等多种类字体。

只要上传图片或输入字体名称，就可以帮您找字体。

www.qiuziti.comWhatTheFont!"MyFontsSeenafontinuseandwanttoknowwhatitis?UploadanimagetoWhatTheFonttofindtheclosestmatchesinour…www.myfonts.com4.毛筆字—線上產生書法字體毛笔字在线生成器毛笔字体转换器毛笔书法字体在线转换汉仪毛笔隶书繁汉仪毛笔字清茶体汉仪趣报书法字汉仪尚巍流云书法体汉仪孙万民毛笔草书默陌老屋手迹默陌山魂手迹腾祥伯当毛笔字行书汉仪苏泽立行楷圆润露锋芒李太平根隶书学贞简帛体颜世举隶书张士超魏碑黄庭坚书法…www.akuziti.com5.Mockup—各種行動裝置的mockupFreemockuptemplatesandphotosBrowse100%freeiPhone,iPad,Android,tablet,postermockuptemplatesmockup.photos粉絲團經營1.PicSee—YOUTUBER縮網址，FB點選影片可直接播放PicSee|URLShortenerwithCustomize/EnlargeThumbnailonSocialSitesCustomizeyourlinksbysettingyourownthumbnailimage!EnlargeYouTubevideoonFacebook.SupportedonFacebook…picsee.co2.GIFMaker—圖片製作成ＧＩＦ檔案FreeOnlineAnimatedGIFMaker-MakeGIFImagesEasilyHolddownCtrlorCommandtoselectmultipleimages.Youcanuploadupto300JPG,PNGorGIFimages.ControlPanel…gifmaker.mehttps://gifmake.com(這個只能傳十張)3.在FB發表GIF動畫-點選copylink複製網址GIPHY|SearchAlltheGIFs&MakeYourOwnAnimatedGIFGIPHYisyourtopsourceforthebest&newestGIFs&AnimatedStickersonline.FindeverythingfromfunnyGIFs…giphy.com檢測類1.簡化CSSCSSCompressorUseCSSCompressortocompressCSS(CSS1,CSS2,CSS2.1&CSS3)toreduceCSScodesizeandmakeyourwebsiteload…csscompressor.com2.簡化JQClosureCompilerServiceEditdescriptionclosure-compiler.appspot.com3.壓縮CSS和JQ(通用)HTML在线压缩工具HTML在线压缩工具，是haorooms博客小工具之一，可以在线压缩你的htmlwww.haorooms.com4.線上測GOOGLE分析網站優化程度https://developers.google.com/speed/pagespeed/insights/?hl=zh-tw乾貨類騰訊CDC—騰訊設計的一些文章。

腾讯CDC腾讯CDC是一个设计团队，做世界一流的互联网设计团队，为用户创造优质在线生活体验。

CDC关注于互联网视觉设计、交互设计、用户研究、前端开发。

cdc.tencent.com2.設計導航—類似Muzli，也是各設計網站知識的聚集地。

设计订阅-腾讯设计导航腾讯设计导航云集高质量设计网站的内容，云集大量设计素材，随时随地访问收藏为设计灵感保驾护航。

每天定时更新，网罗全网高逼格的设计站点，是最优秀的设计资讯网站。

idesign.qq.com3.人人都是產品經理—很多關於設計與PM面的乾貨，值得去閱讀。

人人都是产品经理|产品经理、产品爱好者学习交流平台人人都是产品经理致力为产品新人、产品经理等广大产品爱好者打造一个良好的学习交流平台。

深度剖析国内外互联网业内动态，分享产品设计、交互设计、视觉设计、用户体验设计、产品运营、产品市场和项目管理等专业产品知识。

www.woshipm.com專案流程管控TrelloInfinitelyflexible.Incrediblyeasytouse.Greatmobileapps.It'sfree.Trellokeepstrackofeverything,fromthe…trello.comQuipQuipchangesthewayteamsworktogether.Realworkgetsdone,faster,smarter.quip.comTaskManagementforTeams-MeisterTaskMeisterTaskisthemostintuitivecollaborationandtaskmanagementtoolontheweb.Signup,inviteyourteamand…www.meistertask.com流量分析Bitly—查看各縮址的被點擊次數，可以看各曝光管道曝光效果如何Bitly.Thepowerofthelink.Editdescriptionapp.bitly.com各位～～準時下班的路不遠了～～（揮手帕）▲來福FB▲來福IG▲來福LINE貼圖nomichuang_fufu66Nomi/療癒系插畫家/APP視覺設計師/UIUX講師129DesignUIDesignUiUxDesignWebdesignTools129 claps129nomichuang_fufu66Nomi/療癒系插畫家/APP視覺設計師/UIUX講師WrittenbyNomi-我是狐狸犬來福設計師FollowNomi糯米/療癒系插畫家/APP視覺設計師/UIUX講師/看起來不資深的資深設計師，擔任2隻狐狸犬的特助，經營「我是狐狸犬來福」粉絲團7年，把相處的生活趣事畫成插畫，療癒粉絲每一天。

nomichuang_fufu66Nomi/療癒系插畫家/APP視覺設計師/UIUX講師