@騰訊ecd 星舊：作為未來網(wǎng)頁設(shè)計的熱點(diǎn)趨勢之一的“滾動視差”在近年來被越來越多網(wǎng)站所采用，特殊新穎的展示模式也讓許多用戶眼前一亮。網(wǎng)絡(luò)上也如雨后春筍一般出 現(xiàn)了很多像《30個讓人興奮的視差滾動網(wǎng)站》、《60個視差滾動網(wǎng)站賞析》……等一系列的視差滾動的文章，不過賞析的居多，真正指導(dǎo)設(shè)計師如何去設(shè)計，如 何去實現(xiàn)的實用型文章卻很少。于是萌發(fā)了自己寫一篇的想法，與感興趣的人共同交流下滾動視察設(shè)計時的一些心得。

什么是滾動視差？
視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運(yùn)動效果，帶來非常出色的視覺體驗。

視差效果，原本是一個天文學(xué)術(shù)語，當(dāng)我們觀察星空時，離我們遠(yuǎn)的星星移動速度較慢，離我們近的星星移動速度則較快。當(dāng)我們坐在車上向車窗外 看時，也會有這樣的感覺，遠(yuǎn)處的群山似乎沒有在動，而近處的稻田卻在飛速掠過。許多游戲中都使用視差效果來增加場景的立體感。說的簡單點(diǎn)就是網(wǎng)頁內(nèi)的元素 在滾動屏幕時發(fā)生的位置的變化，然而各個不同的元素位置變化的速度不同，導(dǎo)致網(wǎng)頁內(nèi)的元素有層次錯落的錯覺，這和我們?nèi)梭w的眼球效果很像。我看到多家產(chǎn)品 商用視差滾動效果來展示產(chǎn)品，從不同的空間角度和用戶體驗，起到了非常不錯的效果。

看似復(fù)雜其實這個早就不是什么新鮮事兒，這種設(shè)計思路早在80年代的小霸王學(xué)習(xí)機(jī)上就見過。

在這個畫面里通過人物馬里奧、前景、背景著三個部分的移動速率的不同來實現(xiàn)立體效果。類比網(wǎng)頁也是如此。一個滾動視察的網(wǎng)站至少會有以下幾層 ：背景層，內(nèi)容層，貼圖層。

本文總結(jié)了最近網(wǎng)頁設(shè)計領(lǐng)域比較熱門的幾種技術(shù)，代表了一定的趨勢，設(shè)計師們要跟市場接軌，緊跟潮流的腳步，可以閱讀這篇總結(jié)，肯定大有裨益。

騰訊cdc：技術(shù)的革新帶動了設(shè)計行業(yè)的的迅猛發(fā)展，這使得設(shè)計師和開發(fā)者有了更廣闊的的探索天地。而網(wǎng)頁設(shè)計也越發(fā)不再那么循規(guī)蹈矩，許多團(tuán)隊和公司都做了很多思考和創(chuàng)意。所以在我們適應(yīng)著現(xiàn)代設(shè)計潮流的同時，不妨也來看看現(xiàn)階段網(wǎng)頁設(shè)計大致的趨勢和風(fēng)格吧。

我不敢大言不慚的說這就是網(wǎng)頁設(shè)計的必然趨勢，這只是本人對當(dāng)下網(wǎng)頁設(shè)計做出的一些小總結(jié)。希望這樣的歸類總結(jié)能給你帶來更多的思路和想法。

01. 響應(yīng)式網(wǎng)頁設(shè)計（Responsive Web Design）

現(xiàn)在越來越多用戶都擁有多種終端：臺式機(jī)，筆記本，平板電腦，手機(jī)，能夠適應(yīng)不同尺寸顯示屏的網(wǎng)頁是現(xiàn)在的潮流，甚至是未來很長一段時間的設(shè)計趨勢。那么響應(yīng)式網(wǎng)頁設(shè)計就是來解決這個問題的。這種特別的開發(fā)方式能保證網(wǎng)頁適應(yīng)不同的分辨率，讓網(wǎng)頁要素重組，使其無論在垂直的平板電腦還是智能手機(jī)上，都能達(dá)到最好的視覺效果。

除了多終端的多樣化，我們還可以看到我們的電腦屏幕，手機(jī)屏幕都在不斷變大，而在對未來生活的預(yù)測、概念設(shè)計里，”屏幕”這個產(chǎn)物更是被運(yùn)用到多種新平臺上。例如微軟發(fā)布的”未來生活概念視頻”里，廚房、室內(nèi)墻壁、辦公室玻璃墻面都成為了交互平臺。所以我們可以發(fā)現(xiàn)，響應(yīng)式網(wǎng)頁設(shè)計所具備的良好的適應(yīng)性和可塑性，在未來的網(wǎng)頁設(shè)計里將占有舉足輕重的位置。

時代一直在變，一個又一個的創(chuàng)新讓我們感到驚訝萬分。網(wǎng)頁設(shè)計的趨勢如同流星，光芒耀眼，但來得快、去得也快。雖然跟風(fēng)很不好，顯得毫無設(shè)計主見，但很多設(shè)計潮流確實值得追隨。就像當(dāng)下響應(yīng)式設(shè)計、扁平化設(shè)計、以及滾動視差等。

可是呢，還有很多極為”糟粕”的設(shè)計趨勢，本文一一列舉，請君對號入座。

相關(guān)推薦：
《年終特典！當(dāng)下最熱門的網(wǎng)頁設(shè)計趨勢總結(jié)》
《網(wǎng)頁：滾動視差設(shè)計指南》

1. 除了電話線時代的老頑固，現(xiàn)在已經(jīng)沒人喜歡頁面跳轉(zhuǎn)了

“下一頁”、”下一張”，明明一頁就能展現(xiàn)的內(nèi)容，非要跳轉(zhuǎn)20多次才能看全，你把用戶當(dāng)傻子？操作繁瑣、浪費(fèi)時間、效率低下，沒人喜歡頁面跳轉(zhuǎn)過于頻繁的網(wǎng)頁。

2. 十面埋伏的廣告

確實有很多網(wǎng)站的維持依賴廣告收入，但是廣告的位置一定要合理，不要妨礙用戶瀏覽信息，用戶體驗永遠(yuǎn)位于廣告之上。沒有用戶訪問量，也就沒人找你打廣告。

不知不覺的，很多網(wǎng)頁設(shè)計中采用了圖標(biāo)式導(dǎo)航（Navigation）——一般使用三道杠作為圖標(biāo)，用以導(dǎo)航。
這種導(dǎo)航的好處是節(jié)省空間，讓界面更簡潔。

圖標(biāo)式導(dǎo)航的案例

這是YouTube 的圖標(biāo)式導(dǎo)航(移動版):

這是Squarespace的圖標(biāo)式導(dǎo)航：

AWARD的圖標(biāo)式導(dǎo)航不拘一格：

這不是天方夜譚！你不需要知道HTML、CSS、PHP和其余晦澀難懂的語言。這些工具就像一個圖像編輯器，只需繪制矩形、填充顏色。我知道這很難相信，但他們就是存在！而且全球備受贊譽(yù)！

1、IM Creator

聽我說，我們的IM Creator易用性和多功能性超越了很多客戶的預(yù)期。只需要你把控住超級菜單，根據(jù)您的需要做相應(yīng)的拖放和功能選擇。它們包括視頻、圖片、畫廊和幻燈片、按鈕、超鏈接、甚至一個HTML小部件。

最酷的地方在與你不需要創(chuàng)建繁瑣的帳戶，你可以輕松上路。嘮叨了半天，我差點(diǎn)沒有提到最好的部分：以上所有服務(wù)都是完全免費(fèi)的！

2、WebStartToday.com

如果你是一個細(xì)節(jié)癖，喜歡摳各種設(shè)計細(xì)節(jié)，那么你完全應(yīng)該來看看WebStartToday！這里提供了超過1000個不同的網(wǎng)頁模板來匹配你的需求！甚至那些很少見的模版：旅行、夜生活、豪華轎車服務(wù)、鎖匠、美食、琳瑯滿目數(shù)之不盡！

當(dāng)然這并不意味著我們的模版就是千篇一律，隨處可見的！在這里的模版，可以保證是獨(dú)此一家的，如果你在其他地方發(fā)現(xiàn)了，那一定是他們借了我們的寶貝，偷偷的！

每個網(wǎng)站有屬于自己的個性——它能反射出背后的個人或者團(tuán)隊。如何做到讓自己的網(wǎng)站顯得與眾不同、卓爾不群，讓用戶流連忘返或者立馬下單？

為了讓你的網(wǎng)站脫穎而出，不僅需要有豐富的高質(zhì)量內(nèi)容，同時也要兼顧網(wǎng)站的創(chuàng)新性和功能性。從用戶的角度出發(fā)好好想一下，怎樣讓你的網(wǎng)站用戶體驗更友好？簡單的搜索功能是需要的，或者你也可以精心設(shè)計一下網(wǎng)站的導(dǎo)航。同時，要注意保持整個網(wǎng)站設(shè)計語言的一致性。在這個html5狂潮涌進(jìn)的時代，誕生了很多優(yōu)秀的網(wǎng)頁設(shè)計作品，他們都有卓越的導(dǎo)航設(shè)計，接下來整理的這些網(wǎng)站將喚起你關(guān)于導(dǎo)航的極限創(chuàng)意，快來親自體驗下吧！

Toybox

在需要的時候?qū)Ш綑趹?yīng)該一直在那里，而當(dāng)用戶想要專注于某個特定的任務(wù)時，導(dǎo)航欄則應(yīng)該優(yōu)雅的隱藏起來。比如說，在設(shè)計一個網(wǎng)上商店的出納頁面時，網(wǎng)站的導(dǎo)航應(yīng)該可以隨時都易于使用，但同時也要注意突出像出納表單和按鈕控件之類的鮮明功能。Toybox的導(dǎo)航設(shè)計就恰好滿足了這些。

如下圖示，這個側(cè)邊導(dǎo)航給人的感覺就像是你在窺視頁面背后或者是掀開了一個玩具盒的蓋子看看里面到底有些什么。這個側(cè)邊導(dǎo)航非常方便使用，鼠標(biāo)懸停在瀏覽器左側(cè)即可出現(xiàn)，主體部分即時出現(xiàn)的旋轉(zhuǎn)效果也很帶感，可以很好的引導(dǎo)用戶的注意力。將導(dǎo)航隱藏起來同時也實現(xiàn)了界面的簡潔，使網(wǎng)站的瀏覽體驗非常的愉悅，因為網(wǎng)站并沒有留下太多無用的信息去分散用戶的注意力。

至于其他你想知道的信息，比如說Toybox公司的主營業(yè)務(wù)和地址，可以在頂部的一個直接呈現(xiàn)的導(dǎo)航欄里找到。首頁的磁貼鼠標(biāo)hover效果也非常的有趣，當(dāng)鼠標(biāo)懸停于某個項目的縮略圖時，其余的項目縮略圖都后退變暗并且產(chǎn)生景深的效果。

Olivier Bossel

交互設(shè)計師Olivier Bossel的個人作品博客非常有趣。該網(wǎng)站的導(dǎo)航元素在鼠標(biāo)hover狀態(tài)下會產(chǎn)生像素爆炸式的效果（譯者注：火狐瀏覽器測試通過，chrome測試無效果）。這個效果相對于網(wǎng)站其余的簡潔設(shè)計來說非常有動感，由此產(chǎn)生強(qiáng)烈的對比效果。作為一個視覺元素它非常有效的促進(jìn)了用戶繼續(xù)閱讀該網(wǎng)站，統(tǒng)一的視覺語言也彰顯了品牌的特點(diǎn)。

通過我們長期對設(shè)計類網(wǎng)站的發(fā)掘，總結(jié)出了一個現(xiàn)象，那就是很多關(guān)于響應(yīng)式設(shè)計的文章只給出了桌面版的網(wǎng)頁設(shè)計，卻沒有提供移動版網(wǎng)頁設(shè)計的對比，這在我們看來，多少顯得有點(diǎn)不夠?qū)I(yè)。

于是，我們在這里收集整理了25例優(yōu)秀的響應(yīng)式網(wǎng)頁設(shè)計，均有桌面版和移動版的對比。在方便您閱讀這篇文章的同時，您不妨也思考一下靈活性這個主題。
對了，如果您還不夠了解響應(yīng)式設(shè)計，請至我們這篇文章《經(jīng)驗分享：響應(yīng)式排版中的基礎(chǔ)知識》回顧學(xué)習(xí)。

Whisperism

World Wildlife

Naspa

有同學(xué)喜歡玩黑白配，但是卻一直不得要領(lǐng)，總設(shè)計不出讓人眼前一亮的佳作出來？今天就讓我們來這些優(yōu)秀案例里找原因。

深色的背景看起來具有神秘感，能提供前景元素、背景元素的高度對比。有了黑色的鋪墊渲染，任何一個色彩都可以輕易在它之上煥發(fā)光彩。
那么怎么才能更好的在網(wǎng)頁設(shè)計中運(yùn)用深色背景呢？想要成為一名”高級黑”設(shè)計師嗎？先來欣賞本文的絕贊范例吧。

The Blue Cube

外觀整潔干練，對照鮮明。黑色背景凸顯了白色文本。

最近看到一些剛接觸網(wǎng)絡(luò)營銷的朋友，對于網(wǎng)絡(luò)營銷一些常用的方法以及概念性的東西都不是很了解，在交談中說到軟文營銷、IM推廣等這些的方法時他們就不知道是什么意思。在此小篇整理一部分常用的網(wǎng)絡(luò)營銷方法和術(shù)語，希望對新人有幫助，高手看到就請繞行。

什么是網(wǎng)絡(luò)營銷？以國際互聯(lián)網(wǎng)絡(luò)為基礎(chǔ)，利用數(shù)字化的信息和網(wǎng)絡(luò)媒體的交互性來輔助營銷目標(biāo)實現(xiàn)的一種新型的市場營銷方式。簡單的說，網(wǎng)絡(luò)營銷就是以互聯(lián)網(wǎng)為主要手段進(jìn)行的，為達(dá)到一定營銷目的的營銷活動。（摘自百度百科）

搜索引擎優(yōu)化/SEO：利用搜索引擎的搜索規(guī)則來提高網(wǎng)站關(guān)鍵詞排名的方式。

搜索引擎營銷/SEM：利用搜索引擎進(jìn)行營銷推廣的，比如SEO、競價推廣等都屬于SEM。

百度網(wǎng)盟推廣：在百度的聯(lián)盟網(wǎng)站上以圖片或文字的形式展現(xiàn)廣告。

軟文營銷：以文章為主，專門通過文字去宣傳推廣產(chǎn)品，或以新聞稿來提升品牌知名度。

數(shù)據(jù)庫營銷：通過收集和積累會員信息，經(jīng)過分析篩選后有針對性的使用電子郵件、短信、電話等方式進(jìn)行客戶嘗試挖掘與關(guān)系維護(hù)的營銷方式。

郵件營銷：在用戶事先許可的前提下，通過電子郵件的方式向目標(biāo)用戶傳遞有價值信息的一種網(wǎng)絡(luò)營銷手段。

IM/即時通信營銷：利用QQ、MSN、YY等即時工具營銷推廣的。

博客營銷：利用新浪博客、百度空間等平臺進(jìn)行推廣的方法。

微博營銷：利用新浪微博、騰訊微博通過活動吸引粉絲關(guān)注，發(fā)布包含140字營銷信息、圖片、視頻的內(nèi)容。

微信營銷：伴隨微信的火熱產(chǎn)生的一種網(wǎng)絡(luò)營銷方式，用戶訂閱自己所需的信息，商家通過提供用戶需要的信息，推廣自己的產(chǎn)品的點(diǎn)對點(diǎn)的營銷方式。

作為一名網(wǎng)頁設(shè)計師，有時會使用很多不是必需的元素或者大量的復(fù)雜色調(diào)來使頁面脫穎而出。這樣做往往會使頁面看起來太過花哨和分散用戶的注意力，無法突出頁面的內(nèi)容。大多時候你會發(fā)現(xiàn)使用簡單的設(shè)計方法就會達(dá)到很好地效果。因此，今天我們收集了15個新鮮的用簡約風(fēng)格設(shè)計的頁面來啟發(fā)大家的靈感。

相關(guān)推薦：
《11個超炫的視差滾動網(wǎng)站欣賞（附神器推薦）》

《awwwards上推薦的20個擁有創(chuàng)意布局的網(wǎng)站》

Arko

Orchard Keepers