每次當你掌握了一種新的設(shè)計技術(shù),你是不是都迫不及待地希望嘗試應(yīng)用到你的網(wǎng)站上?我知道那種興奮的感覺。新的設(shè)計趨勢一直在延續(xù),作為一個市場營銷人員,我們應(yīng)該意識到當創(chuàng)建新的網(wǎng)頁或開始重新設(shè)計一個網(wǎng)站時,自己能夠從新的趨勢中學到什么。下面就讓我們趕快看看以下9個設(shè)計趨勢吧!
趨勢1:響應(yīng)式設(shè)計(Responsive Design)
響應(yīng)式設(shè)計是網(wǎng)站設(shè)計的最新趨勢之一。當一個網(wǎng)站運用響應(yīng)式設(shè)計,這意味著你的網(wǎng)頁的布局將適應(yīng)任何屏幕尺寸。這種靈活性使得你的網(wǎng)站,無論在智能手機、平板、桌面上顯示,都具有更好的用戶體驗。同時,也有利于設(shè)計人員和市場營銷人員去建立和日常維護網(wǎng)站,而免去不斷優(yōu)化和調(diào)整的煩惱。響應(yīng)式設(shè)計目前在郵件營銷設(shè)計中也得到越來越多的應(yīng)用。
webpower中國區(qū)提供出色的郵件與短信、微信、APP等多渠道個性化會員營銷服務(wù),其設(shè)計團隊與市場營銷團隊精心推送的每月Newsletter在不同屏幕上的顯示俱佳,看看下例,你就知道為什么需要使用響應(yīng)式設(shè)計:
趨勢2:視網(wǎng)膜支持(retina display)
在2010年,蘋果宣布iPhone4將有一個視網(wǎng)膜顯示屏,該屏幕的像素密度將達到326像素/英寸(ppi)。當時我們中的許多人根本不知道視網(wǎng)膜顯示是什么,但無論如何,設(shè)計師歡欣鼓舞!我們很快就發(fā)現(xiàn)了視網(wǎng)膜顯示意味著屏幕上的圖像會比我們之前見過的更加清晰。
當像素密度超過300ppi時,人眼就無法區(qū)分出單獨的像素,不會再出現(xiàn)顆粒感。視網(wǎng)膜顯示的極高像素密度意味著可以允許設(shè)計師創(chuàng)造更詳細的圖片,在設(shè)計中加入更多的細節(jié)。這對網(wǎng)站設(shè)計開通了另一扇大門。
趨勢3:大圖片背景
越來越多的企業(yè)正在把大照片作為其網(wǎng)站的背景,以給網(wǎng)站訪問者帶來一個企業(yè)整體的風貌。把大型照片作為網(wǎng)站的背景,這對于營銷來說是一個巨大的好處。訪問者在來網(wǎng)站在瞬間就能直觀的感受到所有關(guān)于你的公司、你的企業(yè)文化、產(chǎn)品服務(wù)或網(wǎng)站目的等關(guān)鍵信息。
例如,總部設(shè)在美國科羅拉多州的Sweet Basil,其網(wǎng)站背景是不同餐廳圖片之間的交替展示。
在上圖中,你馬上就能理解這家餐廳的文化和氛圍,然后決定是否值得一去。畢竟,企業(yè)只有幾秒鐘的時間向你的網(wǎng)站訪問者證明他們應(yīng)該留在網(wǎng)頁上。
趨勢4:無限滾動(Infinite Scrolling)
當你正在谷歌中尋找圖片的時候,你可能會認識到這個技術(shù)。無限滾動意味著你向下滾動頁面,該頁面會持續(xù)加載。簡單地說,無限滾動是為更好的用戶體驗而做。剛開始時,它可以讓用戶保持在同一頁上,而不需要在許多不同的網(wǎng)頁之間切換。在一個長頁面上持續(xù)的加載比在多個頁面上加載速度更快。當您的網(wǎng)頁上有大量的圖片時,考慮使用無限滾動,以使你的訪問者滾動內(nèi)容時可以持續(xù)下載。
在Cutest Paw的網(wǎng)站上,您不僅可以欣賞可愛的動物圖片,且該網(wǎng)站使用這種技術(shù),你一次可以加載很多圖片。
趨勢5:視差滾動
視差滾動是計算機圖形學中的一種技術(shù),能夠使背景以較慢的速度在前臺移動,創(chuàng)建一個看起來像3D的視覺錯覺。許多網(wǎng)站已經(jīng)開始使用這種技術(shù),利用這種技術(shù)讓你的網(wǎng)站與訪問者更加互動,但如果過度使用,它可能看起來花哨。
例如,電影《少年派的奇幻漂流》背后的營銷團隊在其網(wǎng)站上就應(yīng)用了視差滾動技術(shù)。
視差滾動使網(wǎng)站變得生動。它使2D圖像體驗起來像3D。因此,它有助于市場營銷人員在網(wǎng)站用于描述其營銷故事。當你向下滾動,隨著文本和圖像出現(xiàn)在不同地方,你會發(fā)現(xiàn)更多有關(guān)產(chǎn)品或服務(wù)的圖片和文字。這種技術(shù)非常強大,因為它真的可以為你的訪問者帶來更鮮活的業(yè)務(wù)體驗。
趨勢6:可伸縮矢量圖形
可伸縮矢量圖形(SVG)是基于XML的矢量圖像格式。利用SVG能夠創(chuàng)建更加豐富多彩的信息可視化和交互性的應(yīng)用,尤其是可以創(chuàng)建具有動態(tài)的、數(shù)據(jù)驅(qū)動的、交互式圖形、圖像。另外,由于是純文本格式的,SVG比傳統(tǒng)的圖形、圖像格式如GIF和JPEG占用更少的空間。查看示例http://svg-wow.org/camera/camera.xhtml
趨勢7:字體排印
字體排印,又稱“文字設(shè)計”,是一種涉及對字體、字號、縮進、行間距、字符間距進行設(shè)計、安排等方法來進行排版的一種工藝。它可以使一個實體的品牌在第一眼時就被容易辨認,也給網(wǎng)站營造一種有組織、利落的感覺?,F(xiàn)在很多設(shè)計師都選擇使用字體排印,以幫助訪問者瀏覽網(wǎng)站。網(wǎng)頁的字體排印包括能夠使網(wǎng)站看起來整齊美觀的網(wǎng)頁頁頭。設(shè)計師一直在他們的設(shè)計中使用字體排印,但目前字體的選擇突飛猛進。
使用字體排印的一個最典型的網(wǎng)站是“紐約客(The New Yorker)”。字體排印創(chuàng)建了一個簡潔的設(shè)計風格。在紐約客網(wǎng)站中,不雜亂、整潔、干凈、有足夠的信息,有助于讀者了解其內(nèi)容,當我們通讀第一頁,大的字體排印脫穎而出,使我們可以快速找出我們需要去的地方。
趨勢8:疊加下拉菜單
疊加下拉菜單是下拉菜單的一種形式,它直接覆蓋在網(wǎng)站的內(nèi)容上。這意味著,當你點擊網(wǎng)站上的一個導航選項,那么在你的菜單下面會彈出其他選項,而不需要你到不同的頁面去。
iOffice在其網(wǎng)站上使用這種技術(shù)。這種技術(shù)對于在主頁上想增加一些額外鏈接的企業(yè)真正有價值,避免了頁面中文本過度擁擠。當您在下拉菜單中選擇任何東西,你還是一直可以查看到該頁面的其余部分和其他內(nèi)容。
采用了響應(yīng)式設(shè)計布局的網(wǎng)站更適合使用這種下單菜單,因為它讓這些網(wǎng)站最大限度地提高了在移動設(shè)備和平板電腦上的顯示空間。
9.扁平化設(shè)計
扁平化就是摒棄高光、陰影等能造成透視感的效果,通過抽象、簡化、符號化的設(shè)計元素來表現(xiàn)。界面上極簡抽象、矩形色塊、大字體、光滑、現(xiàn)代感十足,讓你去意會這是個什么東西。其交互核心在于功能本身的使用,所以去掉了冗余的界面和交互。這個概念最核心的地方就是放棄一切裝飾效果,諸如陰影,透視,紋理,漸變等等能做出3D效果的元素一概不用。所有的元素的邊界都干凈利落,沒有任何羽化,漸變,或者陰影。尤其在手機上,更少的按鈕和選項使得界面干凈整齊,使用起來格外簡潔。可以更加簡單直接的將信息和事物的工作方式展示出來,減少認知障礙的產(chǎn)生。下面是webpower中國區(qū)(目前國內(nèi)最大的郵件營銷服務(wù)機構(gòu),郵件與短信、微信、APP等多渠道個性化會員營銷服務(wù)商)的扁平化設(shè)計官網(wǎng)頁面。
via:webpowerchina
相關(guān)閱讀