首页

10年经验设计师教你如何寻找高质量素材

博博

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

我们平时做设计的时候,都会遇到挑选素材这个难题。

做UI的同学,会浏览动效网站寻找灵感又或者去挑选适合的图标;做平面的同学,特别是电商广告的同学,就会下载电商banner,还有高质量的图片;另外还有绝大部分的人都会在做报告的时候,下载漂亮的PPT和Word模版。如果刚好那时候你在找工作,还需要找精美的简历模版……

但这些素材到底在什么地方找呢,又在什么地方找到高质量又免费好用的素材呢?

这次,我早已为大家准备好。下面是我花费大量时间精力整理而成的素材网站,全部都是亲身试用后的精选出来的。希望能帮大家在找素材这条路上节省更多的时间,找到更适合自己的那些素材。

懒人福利

如果你觉得这些网站下载太麻烦

可以直接翻到文末

专门为大家整理好的

1000G高质量精选设计素材

免费送!

机会就一次,错过可以不用等下年了

因为活动就这一次

常用素材

一、免费可商用图片

1、https://pixabay.com

10年经验设计师教你如何寻找高质量素材

全网共一百多万张免费图片素材,且质量非常高,种类繁多,适合每一个行业使用。

10年经验设计师教你如何寻找高质量素材

优点:种类很多,质量高

缺点:下载需注册,加载慢

推荐指数:★★★★★ 4.5

2、https://unsplash.com

10年经验设计师教你如何寻找高质量素材

全世界的优秀图片网站,所以图片风格很丰富,而且大部分质量都很高,分分种可以用来做壁纸!

10年经验设计师教你如何寻找高质量素材

优点:质量高且优秀,数量多,风格独特

缺点:加载慢

推荐指数:★★★★ 4

3、https://www.pexels.com

10年经验设计师教你如何寻找高质量素材

每日会更新100张高质量的照片在首页展示,无论风光还是人物,这里应有尽有。

10年经验设计师教你如何寻找高质量素材

优点:种类多,每日更新,不需注册

缺点:加载慢

推荐指数:★★★★ 4

4、http://foter.com

10年经验设计师教你如何寻找高质量素材

网站开始会将素材分为商业、动物和风景三大类,如果你需要寻找其他图片,可以直接在搜索栏直接搜索关键词。

这里的图片给我的感觉就是有趣,独特,有很多图片都很适合做海报。

10年经验设计师教你如何寻找高质量素材

优点:分类明确,质量很高

缺点:加载超慢,种类不多

推荐指数:★★★★ 4

5、https://burst.shopify.com

10年经验设计师教你如何寻找高质量素材

网站最大好处在于帮你分成非常多的类别,尽管数量比不上其他网站那么多,但这里的图片风格都很统一,很有质量,感觉看上去就很年轻化。

10年经验设计师教你如何寻找高质量素材

优点:风格独特,质量高,分类明确

缺点:数量不多

推荐指数:★★★★ 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年经验设计师教你如何寻找高质量素材

优点:种类多,质量高,免费下载

缺点:加载稍慢,广告有点多

推荐指数:★★★★ 4.5

2、http://www.myfonts.com

10年经验设计师教你如何寻找高质量素材

网站提供的商业字体,质量很高很漂亮,数量也很多。

10年经验设计师教你如何寻找高质量素材

优点:种类多,质量高

缺点:付费

推荐指数:★★★★ 4

3、http://comicneue.com

10年经验设计师教你如何寻找高质量素材

免费手写可爱字体下载

优点:质量高,字体可爱

缺点:数量较少,下载稍麻烦

推荐指数:★★★★ 3.5

4、http://www.zhaozi.cn

10年经验设计师教你如何寻找高质量素材

找字网,种类丰富,基本上可以找到市面上的所有字体。

10年经验设计师教你如何寻找高质量素材

优点:种类很多,方便查阅

缺点:使用时注意商用版权,仅中文字体

推荐指数:★★★★ 4

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

10年经验设计师教你如何寻找高质量素材

综合性字体下载网站,里面包括英文字体、中文字体,甚至是手机字体。数量很多,唯一不足就是没有注明版权范围,所以商用的时候要注意。

10年经验设计师教你如何寻找高质量素材

优点:覆盖中英文字体、种类多

缺点:网站广告稍多,没有注明版权范围

推荐指数:★★★★ 4

UI设计素材

一、图标类

1、http://www.iconfont.cn

10年经验设计师教你如何寻找高质量素材

阿里妈妈MUX倾力打造的矢量图标管理、交流平台,内含一百多万个图标!

设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。

10年经验设计师教你如何寻找高质量素材

优点:种类丰富,质量超高,免费下载,中文界面,阿里旗下

缺点:不能打包下载、需注册

推荐指数:★★★★★ 4.5(满分5星,下同)

2、https://www.flaticon.com

10年经验设计师教你如何寻找高质量素材

大型图标网站,里面拥有将近50万个图标,一万多个图标集!种类丰富,质量超高,且支持在线编辑。

优点:种类丰富,质量可靠,免费下载

缺点:英文搜索,加载稍慢,打包下载需注册(科学上网)

推荐指数:★★★★★ 4.5

3、http://fontello.com

覆盖绝大部分网上可能应用到的图标,也就是说任何你需要的网站类图标都可以在这里找到。

优点:网站图标齐全,质量高,免费下载

缺点:加载稍慢,仅有黑白图标

推荐指数:★★★★ 4

4、https://thenounproject.com

拥有一百多万个图标的大型图标网站,而且图标都是由全世界各地设计师设计,质量非常高!而且里面有很多有趣的图标,例如下面鸟笼类图标集,非常卡哇伊!

优点:种类丰富,质量超高,免费下载

缺点:英文搜索,加载慢,不能打包下载

推荐指数:★★★★ 4

5、https://icomoon.io

聚合类图标网站,里面集合了不同网站的不同图标,付费免费都有,种类超多。

优点:种类丰富,质量一般,免费下载

缺点:英文搜索,加载超慢,操作复杂

推荐指数:★★★★ 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年经验设计师教你如何寻找高质量素材

优点:质量高,免费下载

缺点:种类少,部分素材有重复

推荐指数:★★★★ 4

2、TOSKETCH.COM

10年经验设计师教你如何寻找高质量素材

网站给我的感觉就是干净,高大上!里面提供了工具包,网页,移动,模型和图标等其他素材,而且这些素材都有一个特点,就是质量高且新鲜!所有素材都是上传的,这个有点了不起。

10年经验设计师教你如何寻找高质量素材

优点:质量超高,更新快,中文界面,百度云下载

缺点:只提供Sketch资源

推荐指数:★★★★ 4

3、UI8.NET

10年经验设计师教你如何寻找高质量素材

U18是设计素材圈的网红,提供大量漂亮的超高质量商业设计素材,但并非免费,绝大部分都需要付费。

10年经验设计师教你如何寻找高质量素材

优点:质量超高、数量丰富、界面清爽

缺点:付费(充值是个问题),加载稍慢,下载稍麻烦

推荐指数:★★★★ 4

4、PRINCIPLEREPO.COM

10年经验设计师教你如何寻找高质量素材

高质量Principle原型和动效设计资源的网站,特别是动效,每一个都非常漂亮,很有参考价值。

优点:质量高,数量丰富,免费下载

缺点:加载很慢,只有动效资源

推荐指数:★★★★ 3.5

5、UISHE.CN

10年经验设计师教你如何寻找高质量素材

UI社,网站提供主题包、图标、界面和样机素材等素材,属于综合性的素材下载网站。因为国内的网站,大家不用担心加载慢等问题啦。

优点:种类很多,质量高,下载方便

缺点:付费

推荐指数:★★★★ 4

6、MOCKUP.ZONE

7、GRAPHBERRY.COM

8、GRAPHICTWISTER.COM

9、SKETCHAPPSOURCES.COM

10、DUNNK.COM

平面设计素材

1、千图网(www.58pic.com)

国内大型素材网站,素材几乎覆盖所有类目、广告设计、电商设计和办公室素材等。逢节假日都有提供主题素材提供下载,且质量很高!

优点:种类超多、质量高、免费下载、主题分类

缺点:非会员每日有数量限制

推荐指数:★★★★★ 4.5

2、包图网(http://ibaotu.com)

包图网,大型素材下载网站。全网站提供原创免费可商用的素材下载,种类齐全且质量超高,每日更新1000张!

10年经验设计师教你如何寻找高质量素材

优点:种类齐全,质量超高,免费下载,全站正版可商用

缺点:非会员每日有数量限制

推荐指数:★★★★★ 4.5

3、千库网(http://588ku.com/)

10年经验设计师教你如何寻找高质量素材

大型素材网站,可能是国内唯一一家专业设计师提供免抠图PNG素材,全站2000万+高质量素材无限下载,推荐!

10年经验设计师教你如何寻找高质量素材

优点:种类多,专业提供免抠PNG源文件

缺点:非会员每日有数量限制

推荐指数:★★★★ 4.5

另外国内还有付费的昵图网和我图网,免费的有站长素材等等素材网站,数量很多这里就不一一举例了。

7条产品设计原则:纯干货总结,实用到没朋友

博博


人人都是产品经理 2016-05-16 10:07:04

来人人都是产品经理【起点学院】,BAT实战派产品总监手把手系统带你学产品、学运营。

一定有很多朋友在和我思考过一个同样的问题:优秀的产品是怎样定义的?周鸿祎给出答案:第一满足刚需、痛点、高频,第二要有良好的用户体验。第一点很好理解,我们今天主要来聊聊第二点。

7条产品设计原则:纯干货总结,实用到没朋友

参照产品设计原则,可避免产品设计师走弯路,设计出具有良好用户体验的产品。产品设计原则会随着社会的进步而更新迭代,以下是我在学习和工作中对产品设计原则的思考总结,希望可以给你带来参考和启发。

一、减少用户出错

错误对话框是最令人讨厌的交互方式,也是很多产品中滥用最多的。错误对话框一般不会给用户指明正确的道路,仅仅在保护程序不陷入麻烦。而且错误对话框打断了用户的注意流,愚蠢地停止了进度。用户犯错误的时候,不应该受到训斥,这个时候,他需要的是帮助和正确的引导,那么我们要做的就是帮助用户避免错误,告诉用户如何把事情做好。

7条产品设计原则:纯干货总结,实用到没朋友

二、易学性

好的应用像极了蓝颜知已,能看透你的心,在你需要的时候或者合适的的时间,用合适的方式提供暖心的帮助,指引你披荆斩棘,打怪升级。

帮助界面大概分为两种,导览教程和覆盖式教程。

1、导览教程是通过一组有序的图片介绍应用功能,或者指引用户完成一个目标。

新应用或者更新后用户,为了解决用户初始问题,绝大部分应用采用了帮助引导页面,然而真的是必要的么?我觉得未必。可能有的产品经理也觉得没必要,但这是种主流,所以还是选择加上。有的则仅仅为告诉用户产品是做什么的。其实用户可能根本没有那么多耐心去阅读好几页的产品说明,就算有耐心看完,也大多记不准。所以把引导放到使用情景中,在用户使用到此功能时展示给用户,也可把引导收起来,用户需要帮助时呼出。微习惯在引导方面,给用户惊喜。

7条产品设计原则:纯干货总结,实用到没朋友

2、覆盖式教程是另一种介绍方式,很简单的透明薄皮,少许箭头,少许注释,指出关键重点之处。

此方法不错,用户看起来明了易学。免费日程极简的箭头和引导告诉用户功能及使用。

7条产品设计原则:纯干货总结,实用到没朋友

做好后可以自我检测思考,用户学习的成本是不是足够低了?给用户的学习方式是不是最科学合理的?还有没有什么地方需要修改?还有没有更好的方式?用户学过一次后还需不需要重复学习?文案确定通俗易懂?

三、美学一致性、完整性

应用的完整性一致性就是外观和里面不同模块之间都有相似的外观、感觉和气质。产品的完整性一致性会让产品更易学易用。

1、从应用外部看,产品完整性一致性,容易培养用户围绕这点形成强烈的品牌意识,传播产品风格就是在传播品牌,可深入人心。一致不代表僵化,可围绕产品主线进行成长和演化。

2、从应用内部看,一致的用词、风格、色调、图标会给用户建立具有凝聚力的视觉系统,带来在产品上一致的体验。

7条产品设计原则:纯干货总结,实用到没朋友

四、输入方式更简单

移动端产品的使用场景,公车上,行走中,单手操作等,导致用户在使用手机时受到很多环境上的干扰,所以注定会在输入方式上给用户造成很多的不便和出错,为使用户减少使用手写或者键盘输入,减少浪费更多的时间和精力,改变移动端的输入方式就变得尤为关键。

1、减少移动端的文字输入,输入时可采用建议或者事件记忆。聪明的应用会根据用户之前的行为和信息给用户提出建议,根据记忆灵活地为用户当前的行为显示信息,使得用户在效率和满意度方面得到大大的提升。

7条产品设计原则:纯干货总结,实用到没朋友

2、为提供用户完成目标的效率,更为了减少用户出错,转变输入方式,改输入为选择或手势方式。

7条产品设计原则:纯干货总结,实用到没朋友

3、使用手机已有的传感器输入。输入文字搜索关注二维码,改变成长按识别二维码,减少输入麻烦和出错的问题。

五、为停止做准备

当人们全身心的投入到活动场景中,会对周围的干扰视而不见,这种状态被称为“流”,用户在这种状态下会有轻松的、温和的快感,处理任务,完成目标也是会非常的,但是很不幸的是,我们使用的手机,使用移动应用的场景,就是会因为各种事情而打断。想象一下,录下精彩的视频,发送时网络卡住了,不响应了;发微博发到一半手机停电了;网购付款时老板的电话来了,这在我们日常生活中太常见,所以聪明的、体贴的产品,是随时为停止做好准备的。

1、编辑中断、网络中断时,尽可能地保持之前状态,并存储好用户数据。我们总的原则就是让用户付出的劳动不至于付之东流,也减少用户的重复操作。例如美拍上传视频时网络中断,可帮用户存到草稿箱,用户稍后可重新编辑上传。

2、误操作或其他原因跳到错误页时,不要让用户无路可走,最好给用户下一步的选择。产品程序无法使用,那么告诉用户发生错误的原因是什么,给出用户选择,他们还能做点什么,并给出解决方法。百度之前有个很好的体验,在找不到页面的时候,展示帮找失联儿童的页面,页面找不到,可以帮忙找找孩子,很人性化的体验。

六、做好反馈

反馈是用产品的语言告诉用户应用正在做什么,进展怎么样了,接下来的操作会有什么结果。我们使用应用,就像用户与应用的交谈,用户肯定不希望应用是冷冰冰,无回应的。

反馈可以分为过程反馈和结果反馈。

1、过程反馈。用户在操作过程中,界面对操作进行反馈,告诉用户操作的状态变化,用户可根据反馈对任务进行下一步选择操作,一定要做到轻量,不突兀,细腻地反馈。富视觉非模态反馈,是用的比较多的一种反馈方式,通常为动态,视觉上很轻松地显示反馈,不需要用户做其他操作。我们看IOS的下载更新,就是这样。免费日程的发送邀约等待也是一种富视觉非模态反馈。

7条产品设计原则:纯干货总结,实用到没朋友

2、结果反馈。用户在完成操作后,告诉用户操作结果,使得产品看起来很贴心,很有生命力。结果反馈也避免了用户因为不确认而造成重新操作。连贯的动画和声音都可以为用户提供反馈。举个删除的例子,例如mac在删除成功后,会有收走到垃圾桶的动画,伴随着粉碎的声音,这种标志性反馈会给用户留下独特的印象。

七、内容为先

《移动优先》作者Luke,说设计原则为“内容优先,之后才是导航”。这句话是什么意思,这是在产品设计中一个经常容易犯的错误。如何让用户找到内容,所以造成了导航优先,而忽略了用户真正关心的内容。在移动设计中,可能你的产品界面很美观,图标很精致,动画很流畅,设计独到到令人耳目一新,用户可能会对此充满新鲜感,但是新鲜感终究有期限,用户不会为了这个而去一直使用你的产品,没有内容的产品就像一本只有华丽封面却没有内容的书,所以用户内容才是最核心的。

1、突出内容,使界面内容更开阔,使用户完成目标更专注。IOS备忘录中,采用点聚式导航,用户需要时才呼出,没有无关杂乱的内容,给界面一种开阔的感觉。

7条产品设计原则:纯干货总结,实用到没朋友

2、提升屏幕利用率,把焦点放在用户更注重的内容上。对于手机来说,屏幕资源利用率的提升要做到优化提升。知乎是以UGC为主的产品,用户在上划浏览内容时搜索消失,当用户需要时向下滑即可显现。

7条产品设计原则:纯干货总结,实用到没朋友

人人都是产品经理也是以UGC为主的产品,正所谓内容为王,吧啦吧啦,算了不说了,投稿去了。

设计师大福利:UI设计软件Sketch,PS,AI,AE快捷键大全

博博


我是你们的学霸姐 2018-04-20 14:19:23

在学软件操作的时候,要说什么最繁琐?那当然是软件操作的指令了。

学霸姐姐在网络上搜集许久,终于搜集完整了快捷方式的图解!今天就用图解的方式帮助大家将快捷方式一网打尽!

UI设计需要学习的主体软件:Sketch,PS,AI,AE,每一个软件的快捷方式都用图表总结的方式送给大家,希望大家喜欢。

这么全的快捷方式,还不快快收藏转发?

如果有喜欢UI设计的同学,可以私信学霸姐姐:UI设计,即可领取超过600G的UI设计零基础高清教学视频,学霸姐姐会一一回复的!

快快行动起来,将快捷方式转发给你的同学朋友们吧!

  1. SKETCH

设计师大福利:UI设计软件Sketch,PS,AI,AE快捷键大全

2.PS

设计师大福利:UI设计软件Sketch,PS,AI,AE快捷键大全

3.AI

设计师大福利:UI设计软件Sketch,PS,AI,AE快捷键大全

4.AE

设计师大福利:UI设计软件Sketch,PS,AI,AE快捷键大全

用智能化登录页面提升数字营销转化率,Instapage获1500万美元A轮融资

博博


36氪 

今日,登录页面制作初创公司Instapage宣布他们完成了Morgan Stanley Expansion Capital投资的1500万美元的A轮。

Instapage是一家由数据分析引擎驱动的,提供个性化登录页面模板,帮助企业提高数字营销转化率的公司。Instapage目前拥有超过15,000名客户,平均转化率约为22%。

设计登陆页面似乎并不是创业者感兴趣的风口,但Instapage创始人兼首席执行官Tyson Quick表示,这对于营销人员来说却是一个真正的问题。

登陆页面(Landing Page)又被称为引导页,是指在数字营销中,当潜在用户点击广告或者利用搜索引擎搜索后显示给用户的网页。而在网站运营的逻辑里,最重要的三个因素是拉新、转化和留存,那么,作为第一个关卡的登录页面就显得尤为重要。

Quick之前曾在一家名为Jounce的营销产品上工作,他发现,即使有人点击了Jounce广告并最终进入了公司网站,其中只有3%的转化率。

“这有点荒谬,因为他们已经点击了广告,往往具有明确的消费意向。”Quick说。而采用针对核心客户群的个性化登录页面之后,Jounce转化率提高到了20%左右。

2012年,Quick决定将公司业务的重点转移到Instapage,现在Instapage成为了一个更广泛的平台,用于创建和测试针对不同访问者个性化目标网页。

“我们可以成为广告技术与传统营销和销售技术之间的桥梁,”Quick说,“这些技术能够帮助广告投放商锁定核心用户。一旦用户点击广告,自动化营销就会启动,将这些用户纳入企业的CRM系统。这是以往的技术中缺失的转换点。“

用智能化登录页面提升数字营销转化率,Instapage获1500万美元A轮融资

围绕Quick所谓的“点击广告后就引导转化”,Instapage开发了三个关键组件——可扩展创建,页面优化和个性化。而像Optimizely可能只会解决其中的一些问题,而Instapage将三者结合了起来。

而谈及如何采集用户数据,为企业订制个性化登录页面时,Quick认为公司不需要详细的用户数据:“个性化的标签来自广告本身。我们可以从他们点击的广告中收集到数据。“

之前,Instapage已经获得了200万美元的种子资金。而且目前该公司盈利,Quick说每年的经常性收入为1200万美元,并没有融资需求。但是,他发现Morgan Stanley Expansion Capital愿意挖掘并了解Instapage的业务。

Morgan Stanley Expansion Capital主管Pete Chung表示,“Instapage专注于提高数字营销效率这个细分领域,并且可以在不需要外部或技术资源的情况下进行更精准的广告活动,创造了令人印象深刻的产品。”


JS中作用域的销毁和不销毁的情况总结

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

window全局作用域->页面关掉才销毁
函数执行会形成私有的作用域

1)作用域的销毁
一般情况下,函数执行形成一个私有的作用域,当执行完成后就销毁了->节省内存空间

2)作用域的不立即销毁
function fn(){
var i=10;
return function(n){
console.log(n+i++);
}
}
fn()(15);//->先执行fn,有一个私有的变量i=10,返回一个堆内存地址 xxxfff111,我们发现这个地址还用到了一次,那么当前的这个fn形成私有作用域(A)就不能立即销毁了,xxxfff111(15)->输出25,A中的i变为11;当xxxfff111执行完了,发现这个地址没用了,浏览器就把A、xxxfff111都释放了

fn()(20);//->在执行fn的时候一切都从新开始了,和上面的步骤是一样的->输出30

3)作用域的不销毁:形成一个私有作用域,里面的内容被外面占用了
function fn(){
var i=10;
return function(n){
console.log(n+i++);
}
}
var f=fn();//->fn执行形成一个私有的作用域A,A中有一个私有的变量i=10,A中返回一个地址xxxfff11,被外面的f占用了,那么当前的A就不能销毁了
f(15);//->输出25,让A中的i=11
f(20);//->输出31,让A中的i=12

当我们知道f用完的时候,为了优化性能,我们让f=null,这样的话A中的xxxfff111没人占用了,浏览器会把A和xxxfff111都释放了


几种不销毁常用到的形式:
1)函数执行,返回一个引用数据类型的值,并且在函数的外面被别人接收了,那么当前函数形成的私有作用域就不在销毁了–>例如上面的案例

2)在函数执行的时候,里面的一个小函数的地址赋值给了我们的外面元素的点击事件,那么当前小函数也相当于被外面占用了,大函数执行形成的私有的作用域也不销毁了
//每一次循环都执行自执行函数形成一个私有的作用域(循环三次就有三个作用域,每一个作用域中都有一个i,第一个存储的是0,第二个存数的是1..),在每一个私有的作用域中都把里面的函数绑定给了外面元素的点击事件,这样的话每一次形成的作用域都不销毁了(三个不销毁的作用域)
var oLis=document.getElementsByTagName(“li”);
for(var i=0;i<oLis.length;i++){
~function(i){
oLis[i].onclick=function(){
tabChange(i);
}
}(i);
}

3)在使用setTimeout实现轮询动画的时候,我们如果move需要传递参数值,那么像下面这样的写法会行成很多的不销毁的作用域,非常的耗性能
function move(tar){
<js code>

//window.setTimeout(move,10); ->第二次执行move的时候我们没有给它传值(这样写不行)
window.setTimeout(function(){
move(tar);
},10);//->这样写实现了,但是每一次执行定时器都会形成一个私有的所用域(匿名函数形成的)A,在A中使用了上级作用域中的tar的值,而且执行了move又形成了一个小的作用域(而在小的作用域中会使用tar的值),这样每一次定时器形成的A都不能销毁了
}
move(100);//->第一次这样执行传递100

//解决办法:
function move(tar){
~function _move(){
<js code>
window.setTimeout(_move,10);
}();
}
move(100);//->第一次这样执行传递100


JS中内存空间释放的问题(堆内存、栈内存)
[谷歌浏览器]
我们开辟一个内存,可能或有一些其他的变量等占用了这个内存,谷歌浏览器都会间隔一段时间看这个内存还有没有被占用,如果发现有没有被占用的内存了,就自己帮我们回收了(内存释放)

[火狐和IE]
我们开个内存,当我们引用了它,就在内存中记录一个数,增加一个引用浏览器就把这个数+1,减少一个引用,浏览器就把这个数-1…当减到零的时候浏览器就把这个内存释放了;但是有些情况下(尤其是IE)记着记着就弄乱了,内存就不能释放了–>浏览器的内存泄露

var obj={};
我们养成一个好的习惯,当我们obj这个对象使用完成了,我们手动的obj=null (null空对象指针),浏览器会自己把刚才的堆内存释放掉


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

前端常用class命名

之晨

头:header

内容:content/container

尾:footer

导航:nav

侧边栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

左中右:left center right

登录条:loginbar

标志:logo

版心:banner

页面主体:main

热点:hot

新闻:news

下载:download

子导航:subnav

菜单:menu

子菜单:submenu

搜索:search

友情链接:friendlink

页脚:footer

版权:copyright

滚动:scroll

标签页:tab

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

加入:joinUS

指南:guide

服务:service

注册:regsiter

状态:status

投票:vote

合作伙伴:partner

卡片式UI设计欣赏

蓝蓝设计的小编

在设计中,卡片上设计是屡见不鲜的,比如:用在UI产品的包装排版、APP/web的列表排版、banner轮播的设计、导航的切换等。在这些上做出很多别出心裁的卡片视觉设计及炫酷的动画效果,都能带给用户很好的体验。

前端js中动态添加的元素不能触发绑定事件解决方法

seo达人

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

问题描述:在页面选择关键词时,需要将关键词元素绑定点击事件使同一类型的关键词只有一个固定class,使其随点击更换,目的是为了让这一类型的关键词的值可以由class获取。在原本写死的关键词上绑定的事件是可用的,但是换成动态加载后发现只能适用于写死的情况。很无奈,在网上搜索一番后花了点时间终于解决了,下面奉上。  

参考文章:https://blog.csdn.net/qq_35129893/article/details/78363211?locationNum=2&fps=1

原本绑定事件如下:

[javascript] view plain copy
  1. //查询条件class的加载和移除(不能绑定动态加载的标签)  
  2. $('.value_list').children.click(function(){     
  3.     $(this).addClass('a-time').siblings().removeClass('a-time');  

针对的HTML元素如下:

[html] view plain copy
  1. <div class="value_list value_list1" style="width: 80%;" id="subject">  
  2.     <span class="mr36" onclick="selectTopic(0)" value="0">全部</span>  
  3.     <a href="javascript:;" onclick="selectTopic("6eac9783353d40bba49e6b253e73f285")" value="dayu" types="subject" class="a-time">dayu</a>  
  4.     <a href="javascript:;" onclick="selectTopic("f9cbaa888cf34a99b6c50bf393e1a859")" value="天下会" types="subject" class="">天下会</a>  
  5.     <a href="javascript:;" onclick="selectTopic("3f4aa8924c88466dafc63d52aa57e7a6")" value="大雨" types="subject">大雨</a>  
  6.     <a href="javascript:;" onclick="selectTopic("87259765e9174a3b9d97f00a461e90bd")" value="士大夫" types="subject" class="">士大夫</a>  
  7. </div>  

但是发现,原先的事件不能用于动态加载的元素,如上面加载的,加载形式如下:

[javascript] view plain copy
  1. //获取关键词列表  
  2. function getlist(){  
  3.     $("#subject").html("");  
  4.     $.ajax({  
  5.         type: "POST",  
  6.         url:path+"/key/queryKeys.php",  
  7.         dataType : "json",  
  8.         success: function(result) {  
  9.             var data = result.data;  
  10.             console.log(data+" 888");  
  11.             if(data!=''){  
  12.                 var html='<span class="a-time mr36" onclick="selectTopic(0)" value="0">全部</span>';  
  13.                 for(var i=0;i<data.length;i++){//如果不加"则只能传递数字变量而不能传递带有字母的变量,加上"则无影响  
  14.                 //  html+='<li class="fl"><i class="iconfont close" onclick="del("'+data[i].kw_id+'")"></i>'+data[i].kw_word+'</li>';  
  15.                     html+='<a href="javascript:;" onclick="selectTopic("'+data[i].kw_id+'")" value="'+data[i].kw_word+'" types="subject">'+data[i].kw_word+'</a>'  
  16.                 }                             
  17.                 $("#subject").html(html);  
  18.             }else{  
  19.                 alert("请先登陆!");   
  20.             }  
  21.         }  
  22.          });   
  23. }  

无奈,只能上网寻求万能的大神了。

基本上提供的解决方案就两个,使用

$('element').live('click',function(){})

或者

$('父元素').on('click', '子元素', function(){})

我先是使用.live尝试了下,发现gg,心灰意冷ing;本着试一试不要钱的心态又用.on试了下,结果令人惊喜啊!可以使用了,哎,这鬼玩意坑死人。

下面上针对我加载的界面元素写的绑定事件:

[javascript] view plain copy
  1. //查询条件class的加载和移除(适用于动态加载标签的情况--on事件需要jquery在1.6以上)  
  2. $('.value_list').on('click','a,span',function(){  
  3.     $(this).addClass('a-time').siblings().removeClass('a-time');  
  4. ;  

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

懒加载封装实现

之晨

1.什么是懒加载?
         当访问一个页面的时候,先把img元素背景图片路径替换成一张替代图片的路径(这样就只需请求一次,占位图),将图片的真实路径存储在img自定义属性中,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。
2.为什么要用懒加载?
       很多页面,内容很丰富,页面很长,图片较多。比如说各种商城页面。这些页面图片数量多,而且比较大,少说百来K,多则上兆。要是页面载入就一次性加载完毕,提高首屏加载速度,可以减轻服务器压力,节约流量,用户体验好。
3.懒加载实现封装?

    lazyLoad由四个函数组成,init(初始化函数),checkShow(判断图片是否加载),shouldShow(将要展示的图片),showImg(展示图片)。

(1)初始化函数(init)  由于滚动事件太消耗性能,所以用定时器替换,不是滚动就触发,而是滚动后200毫秒后触发。

                var timer;
                function init(){
                    $(window).on("scroll",function(){
                        if(timer){
                            clearTimeout(timer);
                        }
                        timer = setTimeout(function(){
                            checkShow();  //
                        },200);
                    });
                }

(2)判断”图片是否加载“(checkshow)函数,如果图片有isload属性,就说明图片已经加载过了,直接return。如果图片没有isload属性,进入将要展示图片shouldshow函数

                function checkShow(){
                    $lazyLoad.each(function(){
                        $cur = $(this);
                        if($cur.attr('isLoaded')){
                            return;
                        }
                        if(shouldShow($cur)){
                            showImg($cur);
                        }
                    });
                }

(3)将要展示图片shouldshow函数,获取屏幕可视宽度,滚动高度,要展示的元素到文档的高度,如果元素到文档的高度小于屏幕的可视高度加上滚动高度,说明元素已在可视区内,返回true,否则返回false。

               function shouldShow ($node){
                    var scrollH = $(window).scrollTop(),
                        windowH = $(window).height(),
                        top = $node.offset().top;
                    if(top < windowH + scrollH){
                        return true;
                    } else {
                        return false;
                    }

                }

(4)“展示图片”函数,将元素的src属性替换为自定义属性data-src(真正图片的地址)。

                function showImg ($node){
                    $node.find("img").attr("src",$node.data("src"));
                    $node.attr("isLoaded",true);
                }

(5)函数返回一个对象

              return {
                        init : init
           }

      这样就实现懒加载封装了!

MIUI 10月底发布,界面UI抢先看,网友:千万别太臃肿

蓝蓝设计的小编

今天上午小米MIUI正式宣布,在5月31日的年度旗舰发布会上同时发布MIUI 10,相信不少的小伙伴已经饥渴难耐了吧。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档