|
在過去的2013年及2012年，網(wǎng)頁設(shè)計理念或多或少都受到大公司設(shè)計風格的影響。Google過去幾年中也在搜索算法上做出很多調(diào)整——更注重網(wǎng)站內(nèi)容原創(chuàng)性及可用性。HTML 5釋放了設(shè)計師的思維，有利有弊，HTML 5 動畫有時也玩過火了。隨著移動Web的訪問不斷增大，響應式設(shè)計變得愈加重要了。 下面我們通過簡單的一些案例闡述2014年的Web設(shè)計趨勢。但是，記住，不要過度使用。不是每一種趨勢都適合你的客戶。作為設(shè)計師或Web開發(fā)人員，你有責任緊跟趨勢，并量身定做你客戶的網(wǎng)站。 準備好，跟隨我們的腳步來看看今年的流行走向，然后決定你要如何使用它們。 一、扁平化設(shè)計當蘋果放出iOS 7的時候，不是每個人都喜歡這種全新的扁平設(shè)計的。然后，喬納森·艾維知道這是去掉擬物化的最佳時機，引進了極簡、干凈、硬朗的設(shè)計風。iOS 7發(fā)布后，大量的扁平化風格出現(xiàn)在網(wǎng)絡(luò)上，今年也不例外。這不僅對移動友好，而且更能體現(xiàn)設(shè)計的本質(zhì)——有效組織外觀和感覺。
Mostlyserious
完全的扁平化設(shè)計及少量動畫效果 Belancio
扁平化的案例設(shè)計 不是每個網(wǎng)站都適合扁平化設(shè)計，比如你客戶會要求使用擬物化或3D元素等。對于其他內(nèi)容比較多的網(wǎng)站，你扁平化一些元素，往往可以起到簡化網(wǎng)站的作用。 二、定制化今天定制化更突出，互聯(lián)網(wǎng)品牌競爭更需要尋找一種獨特的方法來捕捉相同的目標市場。針對客戶定制獨特的網(wǎng)頁設(shè)計已成為一種趨勢，特別是使用HTML5、CSS3、jQuery等技術(shù)。很多網(wǎng)站使用的圖片進行了比如顏色覆蓋，模糊等效果。單頁網(wǎng)站使用的覆蓋，圖片燈箱效果，滾動視差，及其它交互效果也很普遍。設(shè)計師設(shè)計網(wǎng)站考慮藝術(shù)字體（下面介紹）、混合字體或其它方式也很多。 試試這些資源，讓定制化更加方便： Dolox
整站使用視差定制化，非常有創(chuàng)意。 Hellomonday
頭部的羅盤定位和一個可愛的獨特的視差滾動。 定制是為了避免過分的謹慎，有時你只要簡單的原始項目讓你的網(wǎng)站脫穎而出。 三、藝術(shù)字體網(wǎng)頁字體開啟了創(chuàng)造性的Web排版方式?，F(xiàn)在，網(wǎng)頁設(shè)計師已不再局限于使用僅有幾種系統(tǒng)字體，過去一年，我們也看到越多網(wǎng)站使用創(chuàng)意字體。另一個好處是Web字體也能打印，這大大方便了品牌的統(tǒng)一性。
Fixedagency
匹配公司形象的手寫字體 Princeink
使用獨特的字體組織結(jié)構(gòu) 藝術(shù)字體有時容易走向極端，大量文本內(nèi)容時不宜使用藝術(shù)字體，否則難于閱讀。這種情況下，你可以選擇標題使用藝術(shù)字體，或作為點綴。 四、滾動講故事越來越多的網(wǎng)站，包括某種形式的一個滾動故事。 這種方式一般使用在單頁網(wǎng)站上（盡管這一趨勢也用在關(guān)于頁面或主要頁面上），用戶通過向下滾動的方式查看故事的主要信息。過去，通常都是用視差講故事，不過近來更多也使用文本和圖像進行視差講故事了，主要是移動化。
Everylastdrop
通過單頁網(wǎng)站設(shè)計創(chuàng)建故事讓用戶意識到社會或環(huán)境問題和解決方案。使用豐富的動畫，讓訪客更加娛樂。 Sweez
電子商務(wù)類也可以使用滾動視差來講故事。 實際上，圖像類故事滾動比文本多，它有好處也有壞處。文本過少不青睞搜索引擎，作為設(shè)計師，你需要權(quán)衡，通過設(shè)置一些標簽使SEO優(yōu)化更友好。 五、主題區(qū)主題區(qū)或者主角區(qū)源自平面設(shè)計領(lǐng)域的術(shù)語，意思是頁面設(shè)計頭部使用大圖片和少量文字。這種方式通過簡短的網(wǎng)站快照，在幾秒鐘內(nèi)吸引訪客注意力，使人眼前一亮，產(chǎn)生好奇心。個人網(wǎng)站經(jīng)常會用到主題區(qū)設(shè)計，可能是他們的偉大的工作能產(chǎn)生巨大的影響。 Moresleep
非常簡潔地使用盡可能少的文字告訴他們做什么，以及他們?nèi)绾问箍蛻羰芤妗?/p> Plainmade
使用一兩句吸引觀眾。 甚至大多數(shù)電子商務(wù)網(wǎng)站都使用主題區(qū)，通常使用很特殊的圖像來吸引受眾。如果你不能把訪問者帶到主題區(qū)域的下方，那就危險了。如果用戶需要滾動很多才能看到更多，那么可能容易迷路。如果是這樣，你可以選擇固定住主導航。 六、視頻許多網(wǎng)站正在使用視頻而不是文本來講述他們的故事，介紹他們的產(chǎn)品，或提供產(chǎn)品的使用說明。視頻的偉大之處是同時提高了網(wǎng)站的搜索可見性，特別是提供了必要SEO搜索標簽。視頻的一個壞處是有些訪客更愿意看標題和文字說明，而不是30秒到2分鐘的視頻，意味著你需要提供一個文本替換版本。
Onlycoin
主題區(qū)展示視頻，文本和圖形向下滾動講故事，以及讓訪客選擇喜歡的方式。 Savelli-geneve
上下導航自動隱藏，讓視頻顯示最大化。 七、移動優(yōu)先2014年，我們將看到更多偏向移動化的設(shè)計。不僅僅是響應式，而是轉(zhuǎn)為移動定制的網(wǎng)頁設(shè)計。通常字體很大，很長的滾動，卡片式的內(nèi)容組織，強調(diào)社會化媒體等。一些網(wǎng)站不僅對移動友好，而且希望網(wǎng)站做成移動應用形式。所以你也應該學習一下移動應用的設(shè)計了。
卡片式的風格展示 Mottau
從上到下，大字體，大按鈕，大表單，更利于移動閱覽。 創(chuàng)建一個移動版的網(wǎng)站吧，現(xiàn)在大多數(shù)使用智能手機的頻率已經(jīng)遠遠超過電腦了。響應式設(shè)計也一樣，在PC端訪問也在逐漸減少。所以，問一下你的客戶他們的受眾是用什么客戶端訪問網(wǎng)站的，基于數(shù)字，推薦他們移動為先進行網(wǎng)站設(shè)計，或者有一個移動應用APP。 八、極簡設(shè)計極簡設(shè)計的趨勢已經(jīng)存在很長一段時間，網(wǎng)站只有極少的內(nèi)容。隨著越來越多的網(wǎng)站強調(diào)可用性，最小化元素，即使大型電子商務(wù)網(wǎng)站也已經(jīng)開始發(fā)揮作用。這類型的網(wǎng)站更多使用比較單一的一兩種配色，導航保持簡潔和有效組織下來菜單。圖片正在取代文本塊，甚至很多人放棄側(cè)邊欄給讀者更流暢的閱讀體驗。
Danebowen
單一的色彩，簡易的導航 Madeofsundays
即使這些電子商務(wù)網(wǎng)站可以保持非常簡約。 大多數(shù)設(shè)計師都知道，極簡的網(wǎng)站更重視內(nèi)容的體現(xiàn)。極簡的設(shè)計剔除不必要的元素，回歸設(shè)計為內(nèi)容服務(wù)。然而，有些客戶要求在某些區(qū)域精簡，比如導航，使用可愛的插畫或字體加強品牌形象。 十、交互設(shè)計網(wǎng)站的交互越來越突出，有組織的交互體驗能產(chǎn)生與客戶建立情感聯(lián)系。不需要借助Flash ,HTML 5 和CSS 3結(jié)合就能創(chuàng)造出豐富的動畫效果。事實上，在移動上HTML 5 也是替代Flash的最佳技術(shù)。
Thirdthrone
主題區(qū)獨特的指示和文本，向下滾動獨特的剪頭指向。 Minon
電子商務(wù)網(wǎng)站的簡單和創(chuàng)意交互效果，通過拖動食物到面包上試試。 Puma
把加載慢做的有意義的交換特效 游戲，翻滾的動畫按鈕，滾動的動畫，都成用戶體驗難忘的一部分。網(wǎng)站使用一系列交互效果能幫助客戶更好找到他們所需要的，但是，小心處理加載網(wǎng)站，否則就是個繁重的HTML 5網(wǎng)站了。如果你的訪客不喜歡等待（我想大多數(shù)都是），應盡量減少交互效果。 十一、固定導航一個迅速的新興趨勢的可用性研究是固定導航菜單。這類型通常是固定頂部菜單，然后是長滾動，或者點擊菜單到達頁面的某個區(qū)域。 Wedgeandlever
固定導航欄增加可用性 Justinaguilar
通過不同的工作樣本菜單進入不同區(qū)域。 Rook
使用一個大的固定導航。 并不是所有的網(wǎng)站都需要一個固定的導航。如果有大量需要快速訪問的內(nèi)容，可以考慮導航固頂。實際上，有多少網(wǎng)站應該固定的（頭部或側(cè)邊欄）而沒有選擇固定呢？ 還有哪些2014年的設(shè)計趨勢，你來預測，在下面的評論里與我們分享。 原文地址：enqoo 非特殊說明，本文版權(quán)歸原作者所有，轉(zhuǎn)載請注明出處
【推薦！設(shè)計師必備網(wǎng)址導航】http://hao.uisdc.com
|
|
|
