欧美日韩国产女主播|久久青春操无码日韩va国产va|国语自产自偷拍|少妇视频一区在线精品 亚洲中文字幕无码vs色欲_在线观看视频免费国产成人_精品无码久久中文字幕_日韩AV中文字幕网址

首頁

如何看懂UI效果圖

藍(lán)藍(lán)設(shè)計(jì)的小編

客戶(老板/領(lǐng)導(dǎo))拿到軟件的第一個(gè)意見,幾乎都是關(guān)于UI的。有時(shí)得到的評價(jià)也挺簡潔明了的,一個(gè)字“矬”。

于是惶惶不安的開發(fā)小弟經(jīng)常想到的第一個(gè)解決方案:去問設(shè)計(jì)大神(美眉)要一幅詳細(xì)的標(biāo)注圖。結(jié)果他得到這么一幅標(biāo)注圖:

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

博博

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

我們平時(shí)做設(shè)計(jì)的時(shí)候,都會遇到挑選素材這個(gè)難題。

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

但這些素材到底在什么地方找呢,又在什么地方找到高質(zhì)量又免費(fèi)好用的素材呢?

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

懶人福利

如果你覺得這些網(wǎng)站下載太麻煩

可以直接翻到文末

專門為大家整理好的

1000G高質(zhì)量精選設(shè)計(jì)素材

免費(fèi)送!

機(jī)會就一次,錯(cuò)過可以不用等下年了

因?yàn)榛顒泳瓦@一次

常用素材

一、免費(fèi)可商用圖片

1、https://pixabay.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

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

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):種類很多,質(zhì)量高

缺點(diǎn):下載需注冊,加載慢

推薦指數(shù):★★★★★ 4.5

2、https://unsplash.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

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

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):質(zhì)量高且優(yōu)秀,數(shù)量多,風(fēng)格獨(dú)特

缺點(diǎn):加載慢

推薦指數(shù):★★★★ 4

3、https://www.pexels.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

每日會更新100張高質(zhì)量的照片在首頁展示,無論風(fēng)光還是人物,這里應(yīng)有盡有。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

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

缺點(diǎn):加載慢

推薦指數(shù):★★★★ 4

4、http://foter.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

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

這里的圖片給我的感覺就是有趣,獨(dú)特,有很多圖片都很適合做海報(bào)。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):分類明確,質(zhì)量很高

缺點(diǎn):加載超慢,種類不多

推薦指數(shù):★★★★ 4

5、https://burst.shopify.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

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

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):風(fēng)格獨(dú)特,質(zhì)量高,分類明確

缺點(diǎn):數(shù)量不多

推薦指數(shù):★★★★ 4

6、https://negativespace.co

7、http://superfamous.com

8、http://librestock.com

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

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

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

二、字體

1、https://fontsup.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

提供大量免費(fèi)的英文字體,質(zhì)量很高,也很有特色,每個(gè)字體還有一個(gè)詳情頁,非常用心

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):種類多,質(zhì)量高,免費(fèi)下載

缺點(diǎn):加載稍慢,廣告有點(diǎn)多

推薦指數(shù):★★★★ 4.5

2、http://www.myfonts.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

網(wǎng)站提供的商業(yè)字體,質(zhì)量很高很漂亮,數(shù)量也很多。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):種類多,質(zhì)量高

缺點(diǎn):付費(fèi)

推薦指數(shù):★★★★ 4

3、http://comicneue.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

免費(fèi)手寫可愛字體下載

優(yōu)點(diǎn):質(zhì)量高,字體可愛

缺點(diǎn):數(shù)量較少,下載稍麻煩

推薦指數(shù):★★★★ 3.5

4、http://www.zhaozi.cn

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

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

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

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

缺點(diǎn):使用時(shí)注意商用版權(quán),僅中文字體

推薦指數(shù):★★★★ 4

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

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

綜合性字體下載網(wǎng)站,里面包括英文字體、中文字體,甚至是手機(jī)字體。數(shù)量很多,唯一不足就是沒有注明版權(quán)范圍,所以商用的時(shí)候要注意。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

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

缺點(diǎn):網(wǎng)站廣告稍多,沒有注明版權(quán)范圍

推薦指數(shù):★★★★ 4

UI設(shè)計(jì)素材

一、圖標(biāo)類

1、http://www.iconfont.cn

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

阿里媽媽MUX傾力打造的矢量圖標(biāo)管理、交流平臺,內(nèi)含一百多萬個(gè)圖標(biāo)!

設(shè)計(jì)師將圖標(biāo)上傳到Iconfont平臺,用戶可以自定義下載多種格式的icon,平臺也可將圖標(biāo)轉(zhuǎn)換為字體,便于前端工程師自由調(diào)整與調(diào)用。

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):種類豐富,質(zhì)量超高,免費(fèi)下載,中文界面,阿里旗下

缺點(diǎn):不能打包下載、需注冊

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

2、https://www.flaticon.com

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

大型圖標(biāo)網(wǎng)站,里面擁有將近50萬個(gè)圖標(biāo),一萬多個(gè)圖標(biāo)集!種類豐富,質(zhì)量超高,且支持在線編輯。

優(yōu)點(diǎn):種類豐富,質(zhì)量可靠,免費(fèi)下載

缺點(diǎn):英文搜索,加載稍慢,打包下載需注冊(科學(xué)上網(wǎng))

推薦指數(shù):★★★★★ 4.5

3、http://fontello.com

覆蓋絕大部分網(wǎng)上可能應(yīng)用到的圖標(biāo),也就是說任何你需要的網(wǎng)站類圖標(biāo)都可以在這里找到。

優(yōu)點(diǎn):網(wǎng)站圖標(biāo)齊全,質(zhì)量高,免費(fèi)下載

缺點(diǎn):加載稍慢,僅有黑白圖標(biāo)

推薦指數(shù):★★★★ 4

4、https://thenounproject.com

擁有一百多萬個(gè)圖標(biāo)的大型圖標(biāo)網(wǎng)站,而且圖標(biāo)都是由全世界各地設(shè)計(jì)師設(shè)計(jì),質(zhì)量非常高!而且里面有很多有趣的圖標(biāo),例如下面鳥籠類圖標(biāo)集,非常卡哇伊!

優(yōu)點(diǎn):種類豐富,質(zhì)量超高,免費(fèi)下載

缺點(diǎn):英文搜索,加載慢,不能打包下載

推薦指數(shù):★★★★ 4

5、https://icomoon.io

聚合類圖標(biāo)網(wǎng)站,里面集合了不同網(wǎng)站的不同圖標(biāo),付費(fèi)免費(fèi)都有,種類超多。

優(yōu)點(diǎn):種類豐富,質(zhì)量一般,免費(fèi)下載

缺點(diǎn):英文搜索,加載超慢,操作復(fù)雜

推薦指數(shù):★★★★ 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年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

各種免費(fèi)高質(zhì)量UI資源下載,Sketch、PSD甚至AE素材都有!

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

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):質(zhì)量高,免費(fèi)下載

缺點(diǎn):種類少,部分素材有重復(fù)

推薦指數(shù):★★★★ 4

2、TOSKETCH.COM

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

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

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

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

缺點(diǎn):只提供Sketch資源

推薦指數(shù):★★★★ 4

3、UI8.NET

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

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

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):質(zhì)量超高、數(shù)量豐富、界面清爽

缺點(diǎn):付費(fèi)(充值是個(gè)問題),加載稍慢,下載稍麻煩

推薦指數(shù):★★★★ 4

4、PRINCIPLEREPO.COM

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

高質(zhì)量Principle原型和動效設(shè)計(jì)資源的網(wǎng)站,特別是動效,每一個(gè)都非常漂亮,很有參考價(jià)值。

優(yōu)點(diǎn):質(zhì)量高,數(shù)量豐富,免費(fèi)下載

缺點(diǎn):加載很慢,只有動效資源

推薦指數(shù):★★★★ 3.5

5、UISHE.CN

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

UI社,網(wǎng)站提供主題包、圖標(biāo)、界面和樣機(jī)素材等素材,屬于綜合性的素材下載網(wǎng)站。因?yàn)閲鴥?nèi)的網(wǎng)站,大家不用擔(dān)心加載慢等問題啦。

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

缺點(diǎn):付費(fèi)

推薦指數(shù):★★★★ 4

6、MOCKUP.ZONE

7、GRAPHBERRY.COM

8、GRAPHICTWISTER.COM

9、SKETCHAPPSOURCES.COM

10、DUNNK.COM

平面設(shè)計(jì)素材

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

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

優(yōu)點(diǎn):種類超多、質(zhì)量高、免費(fèi)下載、主題分類

缺點(diǎn):非會員每日有數(shù)量限制

推薦指數(shù):★★★★★ 4.5

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

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

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

優(yōu)點(diǎn):種類齊全,質(zhì)量超高,免費(fèi)下載,全站正版可商用

缺點(diǎn):非會員每日有數(shù)量限制

推薦指數(shù):★★★★★ 4.5

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

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

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

10年經(jīng)驗(yàn)設(shè)計(jì)師教你如何尋找高質(zhì)量素材

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

缺點(diǎn):非會員每日有數(shù)量限制

推薦指數(shù):★★★★ 4.5

另外國內(nèi)還有付費(fèi)的昵圖網(wǎng)和我圖網(wǎng),免費(fèi)的有站長素材等等素材網(wǎng)站,數(shù)量很多這里就不一一舉例了。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

博博


人人都是產(chǎn)品經(jīng)理 2016-05-16 10:07:04

來人人都是產(chǎn)品經(jīng)理【起點(diǎn)學(xué)院】,BAT實(shí)戰(zhàn)派產(chǎn)品總監(jiān)手把手系統(tǒng)帶你學(xué)產(chǎn)品、學(xué)運(yùn)營。

一定有很多朋友在和我思考過一個(gè)同樣的問題:優(yōu)秀的產(chǎn)品是怎樣定義的?周鴻祎給出答案:第一滿足剛需、痛點(diǎn)、高頻,第二要有良好的用戶體驗(yàn)。第一點(diǎn)很好理解,我們今天主要來聊聊第二點(diǎn)。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

參照產(chǎn)品設(shè)計(jì)原則,可避免產(chǎn)品設(shè)計(jì)師走彎路,設(shè)計(jì)出具有良好用戶體驗(yàn)的產(chǎn)品。產(chǎn)品設(shè)計(jì)原則會隨著社會的進(jìn)步而更新迭代,以下是我在學(xué)習(xí)和工作中對產(chǎn)品設(shè)計(jì)原則的思考總結(jié),希望可以給你帶來參考和啟發(fā)。

一、減少用戶出錯(cuò)

錯(cuò)誤對話框是最令人討厭的交互方式,也是很多產(chǎn)品中濫用最多的。錯(cuò)誤對話框一般不會給用戶指明正確的道路,僅僅在保護(hù)程序不陷入麻煩。而且錯(cuò)誤對話框打斷了用戶的注意流,愚蠢地停止了進(jìn)度。用戶犯錯(cuò)誤的時(shí)候,不應(yīng)該受到訓(xùn)斥,這個(gè)時(shí)候,他需要的是幫助和正確的引導(dǎo),那么我們要做的就是幫助用戶避免錯(cuò)誤,告訴用戶如何把事情做好。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

二、易學(xué)性

好的應(yīng)用像極了藍(lán)顏知已,能看透你的心,在你需要的時(shí)候或者合適的的時(shí)間,用合適的方式提供暖心的幫助,指引你披荊斬棘,打怪升級。

幫助界面大概分為兩種,導(dǎo)覽教程和覆蓋式教程。

1、導(dǎo)覽教程是通過一組有序的圖片介紹應(yīng)用功能,或者指引用戶完成一個(gè)目標(biāo)。

新應(yīng)用或者更新后用戶,為了解決用戶初始問題,絕大部分應(yīng)用采用了幫助引導(dǎo)頁面,然而真的是必要的么?我覺得未必。可能有的產(chǎn)品經(jīng)理也覺得沒必要,但這是種主流,所以還是選擇加上。有的則僅僅為告訴用戶產(chǎn)品是做什么的。其實(shí)用戶可能根本沒有那么多耐心去閱讀好幾頁的產(chǎn)品說明,就算有耐心看完,也大多記不準(zhǔn)。所以把引導(dǎo)放到使用情景中,在用戶使用到此功能時(shí)展示給用戶,也可把引導(dǎo)收起來,用戶需要幫助時(shí)呼出。微習(xí)慣在引導(dǎo)方面,給用戶驚喜。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

2、覆蓋式教程是另一種介紹方式,很簡單的透明薄皮,少許箭頭,少許注釋,指出關(guān)鍵重點(diǎn)之處。

此方法不錯(cuò),用戶看起來明了易學(xué)。免費(fèi)日程極簡的箭頭和引導(dǎo)告訴用戶功能及使用。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

做好后可以自我檢測思考,用戶學(xué)習(xí)的成本是不是足夠低了?給用戶的學(xué)習(xí)方式是不是最科學(xué)合理的?還有沒有什么地方需要修改?還有沒有更好的方式?用戶學(xué)過一次后還需不需要重復(fù)學(xué)習(xí)?文案確定通俗易懂?

三、美學(xué)一致性、完整性

應(yīng)用的完整性一致性就是外觀和里面不同模塊之間都有相似的外觀、感覺和氣質(zhì)。產(chǎn)品的完整性一致性會讓產(chǎn)品更易學(xué)易用。

1、從應(yīng)用外部看,產(chǎn)品完整性一致性,容易培養(yǎng)用戶圍繞這點(diǎn)形成強(qiáng)烈的品牌意識,傳播產(chǎn)品風(fēng)格就是在傳播品牌,可深入人心。一致不代表僵化,可圍繞產(chǎn)品主線進(jìn)行成長和演化。

2、從應(yīng)用內(nèi)部看,一致的用詞、風(fēng)格、色調(diào)、圖標(biāo)會給用戶建立具有凝聚力的視覺系統(tǒng),帶來在產(chǎn)品上一致的體驗(yàn)。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

四、輸入方式更簡單

移動端產(chǎn)品的使用場景,公車上,行走中,單手操作等,導(dǎo)致用戶在使用手機(jī)時(shí)受到很多環(huán)境上的干擾,所以注定會在輸入方式上給用戶造成很多的不便和出錯(cuò),為使用戶減少使用手寫或者鍵盤輸入,減少浪費(fèi)更多的時(shí)間和精力,改變移動端的輸入方式就變得尤為關(guān)鍵。

1、減少移動端的文字輸入,輸入時(shí)可采用建議或者事件記憶。聰明的應(yīng)用會根據(jù)用戶之前的行為和信息給用戶提出建議,根據(jù)記憶靈活地為用戶當(dāng)前的行為顯示信息,使得用戶在效率和滿意度方面得到大大的提升。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

2、為提供用戶完成目標(biāo)的效率,更為了減少用戶出錯(cuò),轉(zhuǎn)變輸入方式,改輸入為選擇或手勢方式。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

3、使用手機(jī)已有的傳感器輸入。輸入文字搜索關(guān)注二維碼,改變成長按識別二維碼,減少輸入麻煩和出錯(cuò)的問題。

五、為停止做準(zhǔn)備

當(dāng)人們?nèi)硇牡耐度氲交顒訄鼍爸?,會對周圍的干擾視而不見,這種狀態(tài)被稱為“流”,用戶在這種狀態(tài)下會有輕松的、溫和的快感,處理任務(wù),完成目標(biāo)也是會非常的,但是很不幸的是,我們使用的手機(jī),使用移動應(yīng)用的場景,就是會因?yàn)楦鞣N事情而打斷。想象一下,錄下精彩的視頻,發(fā)送時(shí)網(wǎng)絡(luò)卡住了,不響應(yīng)了;發(fā)微博發(fā)到一半手機(jī)停電了;網(wǎng)購付款時(shí)老板的電話來了,這在我們?nèi)粘I钪刑R?,所以聰明的、體貼的產(chǎn)品,是隨時(shí)為停止做好準(zhǔn)備的。

1、編輯中斷、網(wǎng)絡(luò)中斷時(shí),盡可能地保持之前狀態(tài),并存儲好用戶數(shù)據(jù)。我們總的原則就是讓用戶付出的勞動不至于付之東流,也減少用戶的重復(fù)操作。例如美拍上傳視頻時(shí)網(wǎng)絡(luò)中斷,可幫用戶存到草稿箱,用戶稍后可重新編輯上傳。

2、誤操作或其他原因跳到錯(cuò)誤頁時(shí),不要讓用戶無路可走,最好給用戶下一步的選擇。產(chǎn)品程序無法使用,那么告訴用戶發(fā)生錯(cuò)誤的原因是什么,給出用戶選擇,他們還能做點(diǎn)什么,并給出解決方法。百度之前有個(gè)很好的體驗(yàn),在找不到頁面的時(shí)候,展示幫找失聯(lián)兒童的頁面,頁面找不到,可以幫忙找找孩子,很人性化的體驗(yàn)。

六、做好反饋

反饋是用產(chǎn)品的語言告訴用戶應(yīng)用正在做什么,進(jìn)展怎么樣了,接下來的操作會有什么結(jié)果。我們使用應(yīng)用,就像用戶與應(yīng)用的交談,用戶肯定不希望應(yīng)用是冷冰冰,無回應(yīng)的。

反饋可以分為過程反饋和結(jié)果反饋。

1、過程反饋。用戶在操作過程中,界面對操作進(jìn)行反饋,告訴用戶操作的狀態(tài)變化,用戶可根據(jù)反饋對任務(wù)進(jìn)行下一步選擇操作,一定要做到輕量,不突兀,細(xì)膩地反饋。富視覺非模態(tài)反饋,是用的比較多的一種反饋方式,通常為動態(tài),視覺上很輕松地顯示反饋,不需要用戶做其他操作。我們看IOS的下載更新,就是這樣。免費(fèi)日程的發(fā)送邀約等待也是一種富視覺非模態(tài)反饋。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

2、結(jié)果反饋。用戶在完成操作后,告訴用戶操作結(jié)果,使得產(chǎn)品看起來很貼心,很有生命力。結(jié)果反饋也避免了用戶因?yàn)椴淮_認(rèn)而造成重新操作。連貫的動畫和聲音都可以為用戶提供反饋。舉個(gè)刪除的例子,例如mac在刪除成功后,會有收走到垃圾桶的動畫,伴隨著粉碎的聲音,這種標(biāo)志性反饋會給用戶留下獨(dú)特的印象。

七、內(nèi)容為先

《移動優(yōu)先》作者Luke,說設(shè)計(jì)原則為“內(nèi)容優(yōu)先,之后才是導(dǎo)航”。這句話是什么意思,這是在產(chǎn)品設(shè)計(jì)中一個(gè)經(jīng)常容易犯的錯(cuò)誤。如何讓用戶找到內(nèi)容,所以造成了導(dǎo)航優(yōu)先,而忽略了用戶真正關(guān)心的內(nèi)容。在移動設(shè)計(jì)中,可能你的產(chǎn)品界面很美觀,圖標(biāo)很精致,動畫很流暢,設(shè)計(jì)獨(dú)到到令人耳目一新,用戶可能會對此充滿新鮮感,但是新鮮感終究有期限,用戶不會為了這個(gè)而去一直使用你的產(chǎn)品,沒有內(nèi)容的產(chǎn)品就像一本只有華麗封面卻沒有內(nèi)容的書,所以用戶內(nèi)容才是最核心的。

1、突出內(nèi)容,使界面內(nèi)容更開闊,使用戶完成目標(biāo)更專注。IOS備忘錄中,采用點(diǎn)聚式導(dǎo)航,用戶需要時(shí)才呼出,沒有無關(guān)雜亂的內(nèi)容,給界面一種開闊的感覺。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

2、提升屏幕利用率,把焦點(diǎn)放在用戶更注重的內(nèi)容上。對于手機(jī)來說,屏幕資源利用率的提升要做到優(yōu)化提升。知乎是以UGC為主的產(chǎn)品,用戶在上劃瀏覽內(nèi)容時(shí)搜索消失,當(dāng)用戶需要時(shí)向下滑即可顯現(xiàn)。

7條產(chǎn)品設(shè)計(jì)原則:純干貨總結(jié),實(shí)用到?jīng)]朋友

人人都是產(chǎn)品經(jīng)理也是以UGC為主的產(chǎn)品,正所謂內(nèi)容為王,吧啦吧啦,算了不說了,投稿去了。

設(shè)計(jì)師大福利:UI設(shè)計(jì)軟件Sketch,PS,AI,AE快捷鍵大全

博博


我是你們的學(xué)霸姐 2018-04-20 14:19:23

在學(xué)軟件操作的時(shí)候,要說什么最繁瑣?那當(dāng)然是軟件操作的指令了。

學(xué)霸姐姐在網(wǎng)絡(luò)上搜集許久,終于搜集完整了快捷方式的圖解!今天就用圖解的方式幫助大家將快捷方式一網(wǎng)打盡!

UI設(shè)計(jì)需要學(xué)習(xí)的主體軟件:Sketch,PS,AI,AE,每一個(gè)軟件的快捷方式都用圖表總結(jié)的方式送給大家,希望大家喜歡。

這么全的快捷方式,還不快快收藏轉(zhuǎn)發(fā)?

如果有喜歡UI設(shè)計(jì)的同學(xué),可以私信學(xué)霸姐姐:UI設(shè)計(jì),即可領(lǐng)取超過600G的UI設(shè)計(jì)零基礎(chǔ)高清教學(xué)視頻,學(xué)霸姐姐會一一回復(fù)的!

快快行動起來,將快捷方式轉(zhuǎn)發(fā)給你的同學(xué)朋友們吧!

  1. SKETCH

設(shè)計(jì)師大福利:UI設(shè)計(jì)軟件Sketch,PS,AI,AE快捷鍵大全

2.PS

設(shè)計(jì)師大福利:UI設(shè)計(jì)軟件Sketch,PS,AI,AE快捷鍵大全

3.AI

設(shè)計(jì)師大福利:UI設(shè)計(jì)軟件Sketch,PS,AI,AE快捷鍵大全

4.AE

設(shè)計(jì)師大福利:UI設(shè)計(jì)軟件Sketch,PS,AI,AE快捷鍵大全

用智能化登錄頁面提升數(shù)字營銷轉(zhuǎn)化率,Instapage獲1500萬美元A輪融資

博博


36氪 

今日,登錄頁面制作初創(chuàng)公司Instapage宣布他們完成了Morgan Stanley Expansion Capital投資的1500萬美元的A輪。

Instapage是一家由數(shù)據(jù)分析引擎驅(qū)動的,提供個(gè)性化登錄頁面模板,幫助企業(yè)提高數(shù)字營銷轉(zhuǎn)化率的公司。Instapage目前擁有超過15,000名客戶,平均轉(zhuǎn)化率約為22%。

設(shè)計(jì)登陸頁面似乎并不是創(chuàng)業(yè)者感興趣的風(fēng)口,但I(xiàn)nstapage創(chuàng)始人兼首席執(zhí)行官Tyson Quick表示,這對于營銷人員來說卻是一個(gè)真正的問題。

登陸頁面(Landing Page)又被稱為引導(dǎo)頁,是指在數(shù)字營銷中,當(dāng)潛在用戶點(diǎn)擊廣告或者利用搜索引擎搜索后顯示給用戶的網(wǎng)頁。而在網(wǎng)站運(yùn)營的邏輯里,最重要的三個(gè)因素是拉新、轉(zhuǎn)化和留存,那么,作為第一個(gè)關(guān)卡的登錄頁面就顯得尤為重要。

Quick之前曾在一家名為Jounce的營銷產(chǎn)品上工作,他發(fā)現(xiàn),即使有人點(diǎn)擊了Jounce廣告并最終進(jìn)入了公司網(wǎng)站,其中只有3%的轉(zhuǎn)化率。

“這有點(diǎn)荒謬,因?yàn)樗麄円呀?jīng)點(diǎn)擊了廣告,往往具有明確的消費(fèi)意向。”Quick說。而采用針對核心客戶群的個(gè)性化登錄頁面之后,Jounce轉(zhuǎn)化率提高到了20%左右。

2012年,Quick決定將公司業(yè)務(wù)的重點(diǎn)轉(zhuǎn)移到Instapage,現(xiàn)在Instapage成為了一個(gè)更廣泛的平臺,用于創(chuàng)建和測試針對不同訪問者個(gè)性化目標(biāo)網(wǎng)頁。

“我們可以成為廣告技術(shù)與傳統(tǒng)營銷和銷售技術(shù)之間的橋梁,”Quick說,“這些技術(shù)能夠幫助廣告投放商鎖定核心用戶。一旦用戶點(diǎn)擊廣告,自動化營銷就會啟動,將這些用戶納入企業(yè)的CRM系統(tǒng)。這是以往的技術(shù)中缺失的轉(zhuǎn)換點(diǎn)?!?

用智能化登錄頁面提升數(shù)字營銷轉(zhuǎn)化率,Instapage獲1500萬美元A輪融資

圍繞Quick所謂的“點(diǎn)擊廣告后就引導(dǎo)轉(zhuǎn)化”,Instapage開發(fā)了三個(gè)關(guān)鍵組件——可擴(kuò)展創(chuàng)建,頁面優(yōu)化和個(gè)性化。而像Optimizely可能只會解決其中的一些問題,而Instapage將三者結(jié)合了起來。

而談及如何采集用戶數(shù)據(jù),為企業(yè)訂制個(gè)性化登錄頁面時(shí),Quick認(rèn)為公司不需要詳細(xì)的用戶數(shù)據(jù):“個(gè)性化的標(biāo)簽來自廣告本身。我們可以從他們點(diǎn)擊的廣告中收集到數(shù)據(jù)?!?

之前,Instapage已經(jīng)獲得了200萬美元的種子資金。而且目前該公司盈利,Quick說每年的經(jīng)常性收入為1200萬美元,并沒有融資需求。但是,他發(fā)現(xiàn)Morgan Stanley Expansion Capital愿意挖掘并了解Instapage的業(yè)務(wù)。

Morgan Stanley Expansion Capital主管Pete Chung表示,“Instapage專注于提高數(shù)字營銷效率這個(gè)細(xì)分領(lǐng)域,并且可以在不需要外部或技術(shù)資源的情況下進(jìn)行更精準(zhǔn)的廣告活動,創(chuàng)造了令人印象深刻的產(chǎn)品?!?


JS中作用域的銷毀和不銷毀的情況總結(jié)

seo達(dá)人

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

window全局作用域->頁面關(guān)掉才銷毀
函數(shù)執(zhí)行會形成私有的作用域

1)作用域的銷毀
一般情況下,函數(shù)執(zhí)行形成一個(gè)私有的作用域,當(dāng)執(zhí)行完成后就銷毀了->節(jié)省內(nèi)存空間

2)作用域的不立即銷毀
function fn(){
var i=10;
return function(n){
console.log(n+i++);
}
}
fn()(15);//->先執(zhí)行fn,有一個(gè)私有的變量i=10,返回一個(gè)堆內(nèi)存地址 xxxfff111,我們發(fā)現(xiàn)這個(gè)地址還用到了一次,那么當(dāng)前的這個(gè)fn形成私有作用域(A)就不能立即銷毀了,xxxfff111(15)->輸出25,A中的i變?yōu)?1;當(dāng)xxxfff111執(zhí)行完了,發(fā)現(xiàn)這個(gè)地址沒用了,瀏覽器就把A、xxxfff111都釋放了

fn()(20);//->在執(zhí)行fn的時(shí)候一切都從新開始了,和上面的步驟是一樣的->輸出30

3)作用域的不銷毀:形成一個(gè)私有作用域,里面的內(nèi)容被外面占用了
function fn(){
var i=10;
return function(n){
console.log(n+i++);
}
}
var f=fn();//->fn執(zhí)行形成一個(gè)私有的作用域A,A中有一個(gè)私有的變量i=10,A中返回一個(gè)地址xxxfff11,被外面的f占用了,那么當(dāng)前的A就不能銷毀了
f(15);//->輸出25,讓A中的i=11
f(20);//->輸出31,讓A中的i=12

當(dāng)我們知道f用完的時(shí)候,為了優(yōu)化性能,我們讓f=null,這樣的話A中的xxxfff111沒人占用了,瀏覽器會把A和xxxfff111都釋放了


幾種不銷毀常用到的形式:
1)函數(shù)執(zhí)行,返回一個(gè)引用數(shù)據(jù)類型的值,并且在函數(shù)的外面被別人接收了,那么當(dāng)前函數(shù)形成的私有作用域就不在銷毀了–>例如上面的案例

2)在函數(shù)執(zhí)行的時(shí)候,里面的一個(gè)小函數(shù)的地址賦值給了我們的外面元素的點(diǎn)擊事件,那么當(dāng)前小函數(shù)也相當(dāng)于被外面占用了,大函數(shù)執(zhí)行形成的私有的作用域也不銷毀了
//每一次循環(huán)都執(zhí)行自執(zhí)行函數(shù)形成一個(gè)私有的作用域(循環(huán)三次就有三個(gè)作用域,每一個(gè)作用域中都有一個(gè)i,第一個(gè)存儲的是0,第二個(gè)存數(shù)的是1..),在每一個(gè)私有的作用域中都把里面的函數(shù)綁定給了外面元素的點(diǎn)擊事件,這樣的話每一次形成的作用域都不銷毀了(三個(gè)不銷毀的作用域)
var oLis=document.getElementsByTagName(“l(fā)i”);
for(var i=0;i<oLis.length;i++){
~function(i){
oLis[i].onclick=function(){
tabChange(i);
}
}(i);
}

3)在使用setTimeout實(shí)現(xiàn)輪詢動畫的時(shí)候,我們?nèi)绻鹠ove需要傳遞參數(shù)值,那么像下面這樣的寫法會行成很多的不銷毀的作用域,非常的耗性能
function move(tar){
<js code>

//window.setTimeout(move,10); ->第二次執(zhí)行move的時(shí)候我們沒有給它傳值(這樣寫不行)
window.setTimeout(function(){
move(tar);
},10);//->這樣寫實(shí)現(xiàn)了,但是每一次執(zhí)行定時(shí)器都會形成一個(gè)私有的所用域(匿名函數(shù)形成的)A,在A中使用了上級作用域中的tar的值,而且執(zhí)行了move又形成了一個(gè)小的作用域(而在小的作用域中會使用tar的值),這樣每一次定時(shí)器形成的A都不能銷毀了
}
move(100);//->第一次這樣執(zhí)行傳遞100

//解決辦法:
function move(tar){
~function _move(){
<js code>
window.setTimeout(_move,10);
}();
}
move(100);//->第一次這樣執(zhí)行傳遞100


JS中內(nèi)存空間釋放的問題(堆內(nèi)存、棧內(nèi)存)
[谷歌瀏覽器]
我們開辟一個(gè)內(nèi)存,可能或有一些其他的變量等占用了這個(gè)內(nèi)存,谷歌瀏覽器都會間隔一段時(shí)間看這個(gè)內(nèi)存還有沒有被占用,如果發(fā)現(xiàn)有沒有被占用的內(nèi)存了,就自己幫我們回收了(內(nèi)存釋放)

[火狐和IE]
我們開個(gè)內(nèi)存,當(dāng)我們引用了它,就在內(nèi)存中記錄一個(gè)數(shù),增加一個(gè)引用瀏覽器就把這個(gè)數(shù)+1,減少一個(gè)引用,瀏覽器就把這個(gè)數(shù)-1…當(dāng)減到零的時(shí)候?yàn)g覽器就把這個(gè)內(nèi)存釋放了;但是有些情況下(尤其是IE)記著記著就弄亂了,內(nèi)存就不能釋放了–>瀏覽器的內(nèi)存泄露

var obj={};
我們養(yǎng)成一個(gè)好的習(xí)慣,當(dāng)我們obj這個(gè)對象使用完成了,我們手動的obj=null (null空對象指針),瀏覽器會自己把剛才的堆內(nèi)存釋放掉


藍(lán)藍(lán)設(shè)計(jì)www.bjlzjm.com.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

前端常用class命名

高勁

頭:header

內(nèi)容:content/container

尾:footer

導(dǎo)航:nav

側(cè)邊欄:sidebar

欄目:column

頁面外圍控制整體布局寬度:wrapper

左中右:left center right

登錄條:loginbar

標(biāo)志:logo

版心:banner

頁面主體:main

熱點(diǎn):hot

新聞:news

下載:download

子導(dǎo)航:subnav

菜單:menu

子菜單:submenu

搜索:search

友情鏈接:friendlink

頁腳:footer

版權(quán):copyright

滾動:scroll

標(biāo)簽頁:tab

文章列表:list

提示信息:msg

小技巧:tips

欄目標(biāo)題:title

加入:joinUS

指南:guide

服務(wù):service

注冊:regsiter

狀態(tài):status

投票:vote

合作伙伴:partner

卡片式UI設(shè)計(jì)欣賞

藍(lán)藍(lán)設(shè)計(jì)的小編

在設(shè)計(jì)中,卡片上設(shè)計(jì)是屢見不鮮的,比如:用在UI產(chǎn)品的包裝排版、APP/web的列表排版、banner輪播的設(shè)計(jì)、導(dǎo)航的切換等。在這些上做出很多別出心裁的卡片視覺設(shè)計(jì)及炫酷的動畫效果,都能帶給用戶很好的體驗(yàn)。

前端js中動態(tài)添加的元素不能觸發(fā)綁定事件解決方法

seo達(dá)人

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

問題描述:在頁面選擇關(guān)鍵詞時(shí),需要將關(guān)鍵詞元素綁定點(diǎn)擊事件使同一類型的關(guān)鍵詞只有一個(gè)固定class,使其隨點(diǎn)擊更換,目的是為了讓這一類型的關(guān)鍵詞的值可以由class獲取。在原本寫死的關(guān)鍵詞上綁定的事件是可用的,但是換成動態(tài)加載后發(fā)現(xiàn)只能適用于寫死的情況。很無奈,在網(wǎng)上搜索一番后花了點(diǎn)時(shí)間終于解決了,下面奉上。  

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

原本綁定事件如下:

[javascript] view plain copy
  1. //查詢條件class的加載和移除(不能綁定動態(tài)加載的標(biāo)簽)  
  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>  

但是發(fā)現(xiàn),原先的事件不能用于動態(tài)加載的元素,如上面加載的,加載形式如下:

[javascript] view plain copy
  1. //獲取關(guān)鍵詞列表  
  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++){//如果不加"則只能傳遞數(shù)字變量而不能傳遞帶有字母的變量,加上"則無影響  
  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. }  

無奈,只能上網(wǎng)尋求萬能的大神了。

基本上提供的解決方案就兩個(gè),使用

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

或者

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

我先是使用.live嘗試了下,發(fā)現(xiàn)gg,心灰意冷ing;本著試一試不要錢的心態(tài)又用.on試了下,結(jié)果令人驚喜??!可以使用了,哎,這鬼玩意坑死人。

下面上針對我加載的界面元素寫的綁定事件:

[javascript] view plain copy
  1. //查詢條件class的加載和移除(適用于動態(tài)加載標(biāo)簽的情況--on事件需要jquery在1.6以上)  
  2. $('.value_list').on('click','a,span',function(){  
  3.     $(this).addClass('a-time').siblings().removeClass('a-time');  
  4. ;  

藍(lán)藍(lán)設(shè)計(jì)www.bjlzjm.com.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

懶加載封裝實(shí)現(xiàn)

高勁

1.什么是懶加載?
         當(dāng)訪問一個(gè)頁面的時(shí)候,先把img元素背景圖片路徑替換成一張?zhí)娲鷪D片的路徑(這樣就只需請求一次,占位圖),將圖片的真實(shí)路徑存儲在img自定義屬性中,只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時(shí),才設(shè)置圖片正真的路徑,讓圖片顯示出來。這就是圖片懶加載。
2.為什么要用懶加載?
       很多頁面,內(nèi)容很豐富,頁面很長,圖片較多。比如說各種商城頁面。這些頁面圖片數(shù)量多,而且比較大,少說百來K,多則上兆。要是頁面載入就一次性加載完畢,提高首屏加載速度,可以減輕服務(wù)器壓力,節(jié)約流量,用戶體驗(yàn)好。
3.懶加載實(shí)現(xiàn)封裝?

    lazyLoad由四個(gè)函數(shù)組成,init(初始化函數(shù)),checkShow(判斷圖片是否加載),shouldShow(將要展示的圖片),showImg(展示圖片)。

(1)初始化函數(shù)(init)  由于滾動事件太消耗性能,所以用定時(shí)器替換,不是滾動就觸發(fā),而是滾動后200毫秒后觸發(fā)。

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

(2)判斷”圖片是否加載“(checkshow)函數(shù),如果圖片有isload屬性,就說明圖片已經(jīng)加載過了,直接return。如果圖片沒有isload屬性,進(jìn)入將要展示圖片shouldshow函數(shù)

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

(3)將要展示圖片shouldshow函數(shù),獲取屏幕可視寬度,滾動高度,要展示的元素到文檔的高度,如果元素到文檔的高度小于屏幕的可視高度加上滾動高度,說明元素已在可視區(qū)內(nèi),返回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)“展示圖片”函數(shù),將元素的src屬性替換為自定義屬性data-src(真正圖片的地址)。

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

(5)函數(shù)返回一個(gè)對象

              return {
                        init : init
           }

      這樣就實(shí)現(xiàn)懶加載封裝了!

日歷

鏈接

個(gè)人資料

存檔