分享現(xiàn)階段網(wǎng)頁設(shè)計潮流的趨勢和風格
六道中國 | 發(fā)表于 2019-09-25
一個優(yōu)秀的網(wǎng)站設(shè)計師設(shè)計出來的網(wǎng)頁要能充分吸引訪問者的注意力，讓訪問者產(chǎn)生視覺之上的愉悅感。所以于網(wǎng)頁創(chuàng)作的時候便必需把網(wǎng)站的整體設(shè)計和網(wǎng)頁設(shè)計的相關(guān)原理緊密結(jié)合起來。如今隨著互聯(lián)網(wǎng)技術(shù)的急速革新，亦帶動了設(shè)計行業(yè)的的迅猛發(fā)展，這使得設(shè)計師與開發(fā)者有了越來越廣闊的的探索天地。因而佛山網(wǎng)頁設(shè)計亦愈發(fā)不必那么循規(guī)蹈矩，許多團隊與專業(yè)的設(shè)計師們亦均做了很多思考與創(chuàng)意。
一、網(wǎng)頁設(shè)計潮流新趨勢
上面我便依次與大家介紹一下，今年互聯(lián)網(wǎng)的網(wǎng)頁設(shè)計新趨勢：
1、響應(yīng)式網(wǎng)頁設(shè)計（Responsive Web Design）
現(xiàn)在愈來愈多用戶均擁有多種終端，比如：臺式機，筆記本，平板電腦，手機，能夠適應(yīng)不同尺寸顯示屏的網(wǎng)頁是現(xiàn)在的潮流，而且是未來非常長一段時間的設(shè)計趨勢。那麼響應(yīng)式網(wǎng)頁設(shè)計便是來解決這個問題的。這種特別的開發(fā)方式能保證網(wǎng)頁適應(yīng)不同的分辨率，讓網(wǎng)頁要素重組，使其不論于垂直的平板電腦仍然智能手機之上，均能達到最為好的視覺效果。具體的實現(xiàn)方法大家可以參考六道網(wǎng)上的《響應(yīng)式網(wǎng)頁布局的實現(xiàn)方法原理》一文。
除多終端的多樣化，我們也可以看到我們的電腦屏幕，手機屏幕均于急速變大，因而于對于未來生活的預(yù)測、概念設(shè)計里面，“屏幕”這個產(chǎn)物尤為遭運用到多種新平臺之上。例如微軟發(fā)布的“未來生活概念視頻”里面，廚房、室內(nèi)墻壁、辦公室玻璃墻面均成為了交互平臺。因此我們可以發(fā)現(xiàn)，響應(yīng)式網(wǎng)頁設(shè)計所具備的良好的適應(yīng)性與可塑性，于未來的網(wǎng)頁設(shè)計里面把占有舉足輕重的位置。
2、全屏網(wǎng)頁設(shè)計（Full Screen Design）
所謂設(shè)計不分家，近年來平面設(shè)計里面“純凈”“留白”等概念亦遭互聯(lián)網(wǎng)設(shè)計吸取，借以越來越簡單明了的突出主體，提供越來越舒適的感官感受，很多網(wǎng)站開始采用全屏網(wǎng)頁設(shè)計，利用精心挑選設(shè)計的漂亮背景，加上合理的頁面布局，視覺沖擊力小可非常好的吸引觀者注意。一般頁面之內(nèi)的文字內(nèi)容絕不會尤其多（所出現(xiàn)的少量文字加上精美的排版把會變得更為吸引人），重要以此圖片展示為主。這個樣子的網(wǎng)站余用于攝影團隊或是個人作品集展示會較常見。盡管簡單養(yǎng)眼，不過承載信息有限，企業(yè)門戶的主頁非常少見這樣的設(shè)計。
3、視差滾動設(shè)計（Parallax Design）
視差設(shè)計可以說是近年來網(wǎng)頁設(shè)計之中的一大突破，亦備受推崇。視差滾動是讓多層背景以此不同速度滾動，以此形成一種3D立體的運動效果，予觀者帶來一種獨特的視覺感受。
除了此之外，鼠標滾輪的流暢體驗，讓用戶于觀看此類網(wǎng)站時有一種控制感，簡單來說這是有響應(yīng)的交互體驗。便好像童年看到走馬燈，轉(zhuǎn)動它你便能看到人物動起來，也能欣賞故事。視差滾動設(shè)計的趣味亦在于此。因此不論是網(wǎng)站仍然電商商品宣傳頁均常常采用視差設(shè)計，吸引眼球亦非常受用戶喜愛。
4、扁平化設(shè)計（Flat Design）
扁平化設(shè)計可以說是去繁從簡的設(shè)計美學。去掉所有裝飾性的設(shè)計，可以說是對于以前所推崇的擬物化設(shè)計的顛覆。我們于六道網(wǎng)上暫且絕不去妄加評論說這是好仍然不好，只能說它提供了一種新的設(shè)計思維。扁平化設(shè)計是否會成為將來的趨勢我們亦無法回答，雖然褒貶不一，備受爭議，不過便現(xiàn)在來說它是當下的一種潮流。
5、滾動偵測網(wǎng)頁設(shè)計（Scrollspy）
利用CSS的實現(xiàn)把導(dǎo)航欄固定于網(wǎng)頁底部（大多數(shù)是頂部，或許亦有尾部或是頂部），并且把版面內(nèi)容依照導(dǎo)航順序垂直或是橫向排布，使得用戶點擊相應(yīng)導(dǎo)航tab時網(wǎng)頁手動滑到相應(yīng)頁面，因而若點擊內(nèi)容，導(dǎo)航亦把逐漸改變。這樣的網(wǎng)頁設(shè)計頁面基本絕不會跳轉(zhuǎn)，每一個tab所指向的頁面內(nèi)容亦基本一屏顯示完整，因此于頁面呈現(xiàn)的內(nèi)容之上會有所局限。作為絕不影響布局一般亦會伴隨自適應(yīng)。
滾動偵測式的網(wǎng)頁會予設(shè)計師帶來了非常大挑戰(zhàn)——要于有限空間之內(nèi)保證內(nèi)容呈現(xiàn)的完整性，故而佛山網(wǎng)絡(luò)公司設(shè)計師會于版面兩邊足功夫。因而這類網(wǎng)站結(jié)構(gòu)與視差設(shè)計有異曲同工之處，因此我們發(fā)現(xiàn)很多網(wǎng)站會結(jié)合兩者，予觀者帶來絕不一樣的視覺感受與用戶體驗。
6、無限滾動模式（瀑布流）
有一些網(wǎng)站內(nèi)容很多，但是他們并且沒有簡單分頁，或者采用的是一種垂直瀑布流的方式布局（對瀑布流我曾經(jīng)于六道網(wǎng)上的《2012年網(wǎng)站體驗設(shè)計趨勢回顧》詳細的與大家介紹過了）。把那些內(nèi)容垂直排布，如果用戶縱向滾動時，內(nèi)容會不斷更新好像永無止境。這樣的瀑布流非常早以前便開始流行，最為早采用該布局的是pinterest。這樣的滾動頁面便大大減少了分頁的數(shù)量，個人認為對這類信息量大，每日更新數(shù)據(jù)快的網(wǎng)站是較不錯的方案。
二、網(wǎng)頁的風格化設(shè)計
現(xiàn)在的網(wǎng)頁已不必像過去受諸多條件與技術(shù)限制了。其呈現(xiàn)方式十分豐富。風格自清新至復(fù)古，插畫手繪到擬真設(shè)計，無奇絕不有。不論是版面版式，仍然設(shè)計元素，使用標新立異這個詞形容決不為過。依據(jù)自己撇到的冰山一角，提一下對于我感觸最為深的一些變化：
1、平面設(shè)計感的加強
佛山網(wǎng)頁設(shè)計隨著設(shè)備與技術(shù)的革新，已突破了過去單一框架的限制，變得更為靈活。因此便頁面風格越來越多地開始往平面設(shè)計靠近，許多頁面設(shè)計得極賦海報與雜志的版式感。時尚因而富有沖擊力。
2、注重字體設(shè)計
近年來很多設(shè)計師把字體設(shè)計亦融入了網(wǎng)頁設(shè)計之中，并且當作設(shè)計的一個重要元素提升整個網(wǎng)頁品味。透過使用CSS3設(shè)計師可以擁有許多自從定義的字體，這予網(wǎng)頁的視覺設(shè)計亦增加了一個重要的設(shè)計思路。
3、豐富靈活的動畫
Html5與flash的廣泛應(yīng)用，讓網(wǎng)頁的交互動畫變得更為生動有趣。
4、合理的廣告設(shè)置
作為主要的盈利方式之一，廣告已經(jīng)于網(wǎng)站之中贏取了重要的地位。沒安裝廣告屏蔽插件的用戶會于每天Web沖浪之中遭受無數(shù)廣告地狂轟濫炸。聽起來這顯然是一個非常糟糕的用戶體驗，但是我們所喜愛的很多網(wǎng)站均是依靠廣告來盈利的。
設(shè)計者所要做的是，使廣告的安放絕不會影響到用戶于網(wǎng)站之中的體驗。
a、把內(nèi)容和廣告混排
如果你瀏覽某些網(wǎng)站，比如Twitter，你會發(fā)現(xiàn)它們的廣告混合于內(nèi)容主體之中。假如方法得當，這一做法仍然非常容易遭用戶接受的。
該方法的關(guān)鍵點是，使廣告看起來越來越像內(nèi)容，但是要明確指出它是一條廣告。的話，用戶會感到自己遭誤導(dǎo)去點擊廣告，進而對于此網(wǎng)站失去信任。引入該方法的網(wǎng)站還有Reddit、Tumblr與Facebook。
b、于內(nèi)容以外，巧妙地安放廣告
盡管下面的將內(nèi)容和廣告混排方法愈來愈流行，但是很多網(wǎng)站亦引入了其他方法，如Dribbble，把廣告放在網(wǎng)頁的頂部與側(cè)欄處。廣告仍遭安放于不起眼的位置，但是它們?nèi)匀豢伞安东@”至普通的游客。
該方法盡管亦正在遭漸漸接受，但是一些廣告商覺得它的力度不夠。這些廣告應(yīng)該融入網(wǎng)站之中，除此之外亦絕不會影響到主要內(nèi)容。Dribbble于這方面做得非常好，另一方面保證了內(nèi)容獲得最為主要的關(guān)注，除此之外單一突出廣告區(qū)域，進而獲得收入。
在線幫助
