01. 使用jQuery和CSS3實(shí)現(xiàn)翻轉(zhuǎn)滑塊

展示產(chǎn)品的方法有很多，其中之一是使用網(wǎng)格樣式的滑塊效果。

在本教程中，我將分享如何使用 jQuery  和 CSS3  變換實(shí)現(xiàn)翻轉(zhuǎn)滑塊效果的產(chǎn)品展示。

這篇文章向大家推薦8款時(shí)尚的 jQuery  圖片滾動(dòng)插件。jQuery 是最流行和使用最廣泛的 JavaScript  框架，它可以讓幫助你在你的項(xiàng)目中加入一些很炫的圖片滾動(dòng)效果。希望這些插件對(duì)你有所幫助，能夠幫助你節(jié)省時(shí)間和精力。

Smooth Div Scroll

效果非常平滑的鼠標(biāo)懸浮圖片切換效果，提供了非常詳細(xì)的使用幫助文檔和示例。

Elastic Image Slideshow

最后這款也是帶縮略圖功能 jQuery 幻燈片插件，效果很炫。

這篇文章向大家分享40套很漂亮的紋理背景圖片素材，如果你正在尋找高質(zhì)量的紋理背景，那么這篇文章你一定要記得收藏。紋理背景圖片對(duì)設(shè)計(jì)師來(lái)說(shuō)非常有用，個(gè)性的紋理背景可以讓你的網(wǎng)站看起來(lái)更加優(yōu)雅時(shí)髦，脫穎而出。

　　紋理背景圖片通常都是高質(zhì)量的圖片，一般有木質(zhì)紋理、布質(zhì)紋理、金屬紋理和石質(zhì)紋理等形式

紋理背景圖片通常都是高質(zhì)量的圖片，一般有木質(zhì)紋理、布質(zhì)紋理、金屬紋理和石質(zhì)紋理等形式。

在日常工作中，我們經(jīng)常會(huì)遇到一些設(shè)計(jì)的很”漂亮”的圖片不被用戶(hù)認(rèn)可，點(diǎn)擊率很低，這時(shí)候我們會(huì)暗地里抱怨，可卻沒(méi)明白問(wèn)題究竟出在哪？

網(wǎng)頁(yè)設(shè)計(jì)與平面設(shè)計(jì)究竟有啥區(qū)別，我們主觀的為頁(yè)面添加元素的時(shí)候是否有章可循，博主以前曾是一名視覺(jué)設(shè)計(jì)菜鳥(niǎo)，以自己的切身體會(huì)談?wù)勗赪eb頁(yè)面設(shè)計(jì)中的一些體會(huì)。

下面我們先看一個(gè)專(zhuān)題的banner：

第一眼看上去，畫(huà)面感好像還行，但細(xì)看后會(huì)發(fā)現(xiàn)整個(gè)畫(huà)面沒(méi)有一個(gè)視覺(jué)中心，這張圖片究竟想表達(dá)什么也沒(méi)有說(shuō)清楚，看看上面的元素：女人，模特架，燈光，展廳，衣服。好像表達(dá)了很多，其實(shí)除了設(shè)計(jì)師本人知道這是衣服與配件專(zhuān)題的banner，其他人都一頭霧水。

隨著互聯(lián)網(wǎng)信息爆炸式增長(zhǎng)，用戶(hù)瀏覽單個(gè)網(wǎng)頁(yè)時(shí)，并不像我們想象的如閱讀文章般從左到右、從上倒下逐一查看，為什么？

一、 視覺(jué)層級(jí)為什么重要

左側(cè)是設(shè)計(jì)師期望用戶(hù)的瀏覽方式，右側(cè)為用戶(hù)實(shí)際的瀏覽方式—摘自《Don’t make me think》

用戶(hù)來(lái)到一個(gè)網(wǎng)站有他自己特定的目標(biāo)，如閱讀新聞、購(gòu)物、查看新消息，然而信息量太大，逐一查看需要大量時(shí)間，這就要求網(wǎng)站能抓住主流用戶(hù)特征，將重點(diǎn)推送給他，用戶(hù)找到自己的目標(biāo)或感興趣的點(diǎn)，才有可能繼續(xù)瀏覽或產(chǎn)生下一步動(dòng)作，否則就會(huì)離開(kāi)。

有的時(shí)候，我常常無(wú)法進(jìn)入狀態(tài)，這個(gè)時(shí)候我會(huì)選擇看書(shū)。一本好書(shū)有一種力量，一種代入感的力量，會(huì)讓你隨著做著的邏輯一路陷入進(jìn)去，慢慢的將內(nèi)心的浮躁都洗去，讓你沉靜下來(lái)，然后整個(gè)人也跟著沉了下來(lái)。

高端設(shè)計(jì)盛宴FRAME-FPA論壇于2012年12月15日晚在北京東隅酒店完美落幕。

由《FRAME國(guó)際空間設(shè)計(jì)雜志》和新西蘭廚房電器品牌FisherPaykel斐雪派克聯(lián)合發(fā)起的集結(jié)高端設(shè)計(jì)、生活意見(jiàn)、美食分享和社交活動(dòng)的FPA論壇繼在北京+86設(shè)計(jì)博物館、上海源創(chuàng)創(chuàng)意園、深圳派意館成功舉辦后，于2012年年末回歸北京，與設(shè)計(jì)界的朋友再次相聚，共享年終設(shè)計(jì)盛宴。

藍(lán)藍(lán)寫(xiě)

分享廣告設(shè)計(jì)圈線下活動(dòng)專(zhuān)題好網(wǎng)站：第九課堂http://www.dijiuke.com/。

挺好！周六日及空余時(shí)間可以多學(xué)學(xué)、看看！

眨眼間，2012年又要過(guò)去了，長(zhǎng)期關(guān)注 WDL 的朋友都知道，每到年末，WDL 將發(fā)布一系列本年度 Web 開(kāi)發(fā)和設(shè)計(jì)領(lǐng)域的最佳資源。今天這篇文章與大家一起分享這一年來(lái)設(shè)計(jì)師們分享的最佳免費(fèi) PSD 用戶(hù)界面素材，包含滑塊、表單、按鈕、菜單、進(jìn)度條、播放器等等。這些免費(fèi)的 PSD   素材資源對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)都非常有用，既能節(jié)省時(shí)間又能有很好的效果。記得分享和推薦一下哦 :）

Light UI Kit in CSS and HTML

非常好的一套界面設(shè)計(jì)素材資源，提供了 PSD  源文件和HTML/CSS代碼下載。

Pure and Modern UI Kit

非常有質(zhì)感的一套現(xiàn)代風(fēng)格 UI 素材資源，包含音樂(lè)播放器、表單元素和各種操作按鈕。

最近微軟已經(jīng)正式發(fā)布了Windows8 操作系統(tǒng)，Window操作系統(tǒng)的風(fēng)格已經(jīng)完全改變成了瓦片狀的Metro UI。

對(duì)于微軟來(lái)說(shuō)這是一個(gè)巨大的改變，而且所有微軟的平臺(tái)包括，桌面，平板，移動(dòng)及其網(wǎng)站都使用這個(gè)UI風(fēng)格。

Metro UI包含了所有的現(xiàn)代Web設(shè)計(jì)的特點(diǎn)，包括了，簡(jiǎn)化，基于網(wǎng)格的界面，并且富有連續(xù)性。 大家如果有興趣可以看看這個(gè)界面設(shè)計(jì)說(shuō)明（http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx ）。

如果你也喜歡Metro風(fēng)格的話，這里我們收集了很多windows 8的Metro UI風(fēng)格布局資源，希望大家喜歡！

Metro風(fēng)格的網(wǎng)站框架和模板

Metro UI CSS

Metro UI CSS是一個(gè)非常完整的創(chuàng)建Metro風(fēng)格的網(wǎng)站的框架。使用LESS創(chuàng)建，并且擁有網(wǎng)格系統(tǒng)，排版樣式，表格，按鈕和圖片。

同時(shí)也擁有內(nèi)建的javascript組件，幫助你生成片狀，菜單，邊欄，進(jìn)度條，提示等等

etro UI CSS

BootMetro

BootMetro是一個(gè)Twitter Bootstrap的Metro風(fēng)格主題。你可以創(chuàng)建Metro風(fēng)格的樣式。例如，片狀UI，工具欄，其它組件。

metro-bootstrap