每次當你掌握了一種新的設計技術(shù)，你是不是都迫不及待地希望嘗試應用到你的網(wǎng)站上?我知道那種興奮的感覺(jué)。新的設計趨勢一直在延續，作為一個(gè)市場(chǎng)營(yíng)銷(xiāo)人員，我們應該意識到當創(chuàng )建新的網(wǎng)頁(yè)或開(kāi)始重新設計一個(gè)網(wǎng)站時(shí)，自己能夠從新的趨勢中學(xué)到什么。下面就讓我們趕快看看以下9個(gè)設計趨勢吧!

趨勢1：響應式設計(Responsive Design)

響應式設計是網(wǎng)站設計的最新趨勢之一。當一個(gè)網(wǎng)站運用響應式設計，這意味著(zhù)你的網(wǎng)頁(yè)的布局將適應任何屏幕尺寸。這種靈活性使得你的網(wǎng)站，無(wú)論在智能手機、平板、桌面上顯示，都具有更好的用戶(hù)體驗。同時(shí)，也有利于設計人員和市場(chǎng)營(yíng)銷(xiāo)人員去建立和日常維護網(wǎng)站，而免去不斷優(yōu)化和調整的煩惱。響應式設計目前在郵件營(yíng)銷(xiāo)設計中也得到越來(lái)越多的應用。

webpower中國區提供出色的郵件與短信、微信、APP等多渠道個(gè)性化會(huì )員營(yíng)銷(xiāo)服務(wù)，其設計團隊與市場(chǎng)營(yíng)銷(xiāo)團隊精心推送的每月Newsletter在不同屏幕上的顯示俱佳，看看下例，你就知道為什么需要使用響應式設計：

趨勢2：視網(wǎng)膜支持(retina display)

在2010年，蘋(píng)果宣布iPhone4將有一個(gè)視網(wǎng)膜顯示屏，該屏幕的像素密度將達到326像素/英寸(ppi)。當時(shí)我們中的許多人根本不知道視網(wǎng)膜顯示是什么，但無(wú)論如何，設計師歡欣鼓舞!我們很快就發(fā)現了視網(wǎng)膜顯示意味著(zhù)屏幕上的圖像會(huì )比我們之前見(jiàn)過(guò)的更加清晰。

當像素密度超過(guò)300ppi時(shí)，人眼就無(wú)法區分出單獨的像素，不會(huì )再出現顆粒感。視網(wǎng)膜顯示的極高像素密度意味著(zhù)可以允許設計師創(chuàng )造更詳細的圖片，在設計中加入更多的細節。這對網(wǎng)站設計開(kāi)通了另一扇大門(mén)。

趨勢3：大圖片背景

越來(lái)越多的企業(yè)正在把大照片作為其網(wǎng)站的背景，以給網(wǎng)站訪(fǎng)問(wèn)者帶來(lái)一個(gè)企業(yè)整體的風(fēng)貌。把大型照片作為網(wǎng)站的背景，這對于營(yíng)銷(xiāo)來(lái)說(shuō)是一個(gè)巨大的好處。訪(fǎng)問(wèn)者在來(lái)網(wǎng)站在瞬間就能直觀(guān)的感受到所有關(guān)于你的公司、你的企業(yè)文化、產(chǎn)品服務(wù)或網(wǎng)站目的等關(guān)鍵信息。

例如，總部設在美國科羅拉多州的Sweet Basil，其網(wǎng)站背景是不同餐廳圖片之間的交替展示。

在上圖中，你馬上就能理解這家餐廳的文化和氛圍，然后決定是否值得一去。畢竟，企業(yè)只有幾秒鐘的時(shí)間向你的網(wǎng)站訪(fǎng)問(wèn)者證明他們應該留在網(wǎng)頁(yè)上。

趨勢4：無(wú)限滾動(dòng)(Infinite Scrolling)

當你正在谷歌中尋找圖片的時(shí)候，你可能會(huì )認識到這個(gè)技術(shù)。無(wú)限滾動(dòng)意味著(zhù)你向下滾動(dòng)頁(yè)面，該頁(yè)面會(huì )持續加載。簡(jiǎn)單地說(shuō)，無(wú)限滾動(dòng)是為更好的用戶(hù)體驗而做。剛開(kāi)始時(shí)，它可以讓用戶(hù)保持在同一頁(yè)上，而不需要在許多不同的網(wǎng)頁(yè)之間切換。在一個(gè)長(cháng)頁(yè)面上持續的加載比在多個(gè)頁(yè)面上加載速度更快。當您的網(wǎng)頁(yè)上有大量的圖片時(shí)，考慮使用無(wú)限滾動(dòng)，以使你的訪(fǎng)問(wèn)者滾動(dòng)內容時(shí)可以持續下載。

在Cutest Paw的網(wǎng)站上，您不僅可以欣賞可愛(ài)的動(dòng)物圖片，且該網(wǎng)站使用這種技術(shù)，你一次可以加載很多圖片。

趨勢5：視差滾動(dòng)

視差滾動(dòng)是計算機圖形學(xué)中的一種技術(shù)，能夠使背景以較慢的速度在前臺移動(dòng)，創(chuàng )建一個(gè)看起來(lái)像3D的視覺(jué)錯覺(jué)。許多網(wǎng)站已經(jīng)開(kāi)始使用這種技術(shù)，利用這種技術(shù)讓你的網(wǎng)站與訪(fǎng)問(wèn)者更加互動(dòng)，但如果過(guò)度使用，它可能看起來(lái)花哨。

例如，電影《少年派的奇幻漂流》背后的營(yíng)銷(xiāo)團隊在其網(wǎng)站上就應用了視差滾動(dòng)技術(shù)。

視差滾動(dòng)使網(wǎng)站變得生動(dòng)。它使2D圖像體驗起來(lái)像3D。因此，它有助于市場(chǎng)營(yíng)銷(xiāo)人員在網(wǎng)站用于描述其營(yíng)銷(xiāo)故事。當你向下滾動(dòng)，隨著(zhù)文本和圖像出現在不同地方，你會(huì )發(fā)現更多有關(guān)產(chǎn)品或服務(wù)的圖片和文字。這種技術(shù)非常強大，因為它真的可以為你的訪(fǎng)問(wèn)者帶來(lái)更鮮活的業(yè)務(wù)體驗。

趨勢6：可伸縮矢量圖形

可伸縮矢量圖形(SVG)是基于XML的矢量圖像格式。利用SVG能夠創(chuàng )建更加豐富多彩的信息可視化和交互性的應用，尤其是可以創(chuàng )建具有動(dòng)態(tài)的、數據驅動(dòng)的、交互式圖形、圖像。另外，由于是純文本格式的，SVG比傳統的圖形、圖像格式如GIF和JPEG占用更少的空間。查看示例http://svg-wow.org/camera/camera.xhtml

趨勢7：字體排印

字體排印，又稱(chēng)“文字設計”，是一種涉及對字體、字號、縮進(jìn)、行間距、字符間距進(jìn)行設計、安排等方法來(lái)進(jìn)行排版的一種工藝。它可以使一個(gè)實(shí)體的品牌在第一眼時(shí)就被容易辨認，也給網(wǎng)站營(yíng)造一種有組織、利落的感覺(jué)?，F在很多設計師都選擇使用字體排印，以幫助訪(fǎng)問(wèn)者瀏覽網(wǎng)站。網(wǎng)頁(yè)的字體排印包括能夠使網(wǎng)站看起來(lái)整齊美觀(guān)的網(wǎng)頁(yè)頁(yè)頭。設計師一直在他們的設計中使用字體排印，但目前字體的選擇突飛猛進(jìn)。

使用字體排印的一個(gè)最典型的網(wǎng)站是“紐約客(The New Yorker)”。字體排印創(chuàng )建了一個(gè)簡(jiǎn)潔的設計風(fēng)格。在紐約客網(wǎng)站中，不雜亂、整潔、干凈、有足夠的信息，有助于讀者了解其內容，當我們通讀第一頁(yè)，大的字體排印脫穎而出，使我們可以快速找出我們需要去的地方。

趨勢8：疊加下拉菜單

疊加下拉菜單是下拉菜單的一種形式，它直接覆蓋在網(wǎng)站的內容上。這意味著(zhù)，當你點(diǎn)擊網(wǎng)站上的一個(gè)導航選項，那么在你的菜單下面會(huì )彈出其他選項，而不需要你到不同的頁(yè)面去。

iOffice在其網(wǎng)站上使用這種技術(shù)。這種技術(shù)對于在主頁(yè)上想增加一些額外鏈接的企業(yè)真正有價(jià)值，避免了頁(yè)面中文本過(guò)度擁擠。當您在下拉菜單中選擇任何東西，你還是一直可以查看到該頁(yè)面的其余部分和其他內容。

采用了響應式設計布局的網(wǎng)站更適合使用這種下單菜單，因為它讓這些網(wǎng)站最大限度地提高了在移動(dòng)設備和平板電腦上的顯示空間。

9.扁平化設計

扁平化就是摒棄高光、陰影等能造成透視感的效果，通過(guò)抽象、簡(jiǎn)化、符號化的設計元素來(lái)表現。界面上極簡(jiǎn)抽象、矩形色塊、大字體、光滑、現代感十足，讓你去意會(huì )這是個(gè)什么東西。其交互核心在于功能本身的使用，所以去掉了冗余的界面和交互。這個(gè)概念最核心的地方就是放棄一切裝飾效果，諸如陰影，透視，紋理，漸變等等能做出3D效果的元素一概不用。所有的元素的邊界都干凈利落，沒(méi)有任何羽化，漸變，或者陰影。尤其在手機上，更少的按鈕和選項使得界面干凈整齊，使用起來(lái)格外簡(jiǎn)潔?？梢愿雍?jiǎn)單直接的將信息和事物的工作方式展示出來(lái)，減少認知障礙的產(chǎn)生。下面是webpower中國區(目前國內最大的郵件營(yíng)銷(xiāo)服務(wù)機構，郵件與短信、微信、APP等多渠道個(gè)性化會(huì )員營(yíng)銷(xiāo)服務(wù)商)的扁平化設計官網(wǎng)頁(yè)面。

via：webpowerchina