2017年仨最新網站設計趨勢 :小字體、幾何分層、模糊背景視頻
2017年仨最新網站設計趨勢 :小字體、幾何分層、模糊背景視頻
發布日期：2018-06-12
瀏覽次數：3661
2017年已經過半，今年的🀅網站中究竟流行哪些設計趨勢？除了老生常談的扁平化設計、經典的極簡主義、火熱的卡片式設計等，設計圈還有什么新風向嗎？據小飛仔細觀察，目前有一些比較小巧的設計趨勢正悄然興起，它們并不是什么新概念，而是涉及到網站中各種元素如排版、圖像等方面的小技巧。這些設計趨勢由于使用人數不多，簡單易用等特點還沒引起大家足夠的重視，但它們可不能小覷。俗話說的好，星星之火，可以燎原嘛！一點點小改變常常能帶來🌄大不同。這幾種設計趨勢也是一樣，雖然看上去不太起眼，但應用在網站中卻能讓其大變身，使網站更加出彩、更有設計感。話不多說，接下來就和小飛一起看看這些設計趨勢吧！
1.小字體排版
前段時間，網站設計師們都在追求超大的字體排版，認為大字體排版能夠給訪客帶來別具一格的視覺感受，給訪客留下深刻印象。其實這種設計趨勢也有自己的缺點，由于經常使用🍎粗大的字體或大寫英文字母，訪客在瀏覽時常常不能很快辨認出來，加重了閱讀負擔。而小字體排版就是這樣應運而生的，雖然一些設計師仍然使用大字體排版，但不少人已經開始投入小字體排版的懷抱了，在網站的各個元素開始使用這種設計，從標題、主題文本再到主體文本。
小文字排版有不少好處。較小的字體看上去更加柔和，能夠給用戶提供更加舒適💝的瀏覽體驗。另外，標題、主題、主體等文本字體較小可以給網站的其他元素騰出空間，讓設計師有更多發揮的余地。可能有些人會擔心字體較小會影響網站內容的可讀性，特別是將小字體排版應用在主體文本時。其實，這正是我們做小文本排版時需要注意的問題。在網站中使用較小的文字并不是一味、無底線的縮小字體，更重要的是根據網站的整體布局，合理的選擇字體類型，考慮到訪客瀏覽的舒適度以及有效復制的便捷性。下面是有關小文本排版的3個范例：
Moonfarmer
Moonfarmer在Logo上使用了較小的字體（相對大字體排版而言），而在二級副本上用的字體就更小了。這兩種不同的字體類型和大小形成了對比，但也不顯突兀。字體的處理（顏色等）也與網站的🍌整體基調相協調，給訪客提供了一致、舒適的閱讀體驗。
HTML Burger
HTML Burger在標題和二級文本上采取了截然相反的策略，標題使用超大字體、比較醒目，二級文本使用較小字體排版，形成了鮮明的對比。不過較小的二級文本也不影響內容的可讀性，這是因為這些描述文字很常見，比如HTML，CSS，電商等。這種設計方式既能給訪客留下眼前一亮的視覺效果，也能保證順暢的瀏覽體驗。ꦬ從這我們也可以看出，將超大文字排版與小文ᩚᩚᩚᩚᩚᩚᩚᩚᩚ𒀱ᩚᩚᩚ字排版相結合是一種理想的網頁設計方式。
Mountain Dew's NBA Design
Mountain Dew's NBA Design可能是小飛看過標題最小的一個網站了。除了標題以外，網站上其他的文本字體也很小。不過當這些文字與重疊的"X"以及視頻背景配合在一起，用戶是不會輕易忽略它們的。這種設計方式是有一定風險的，如果你沒有把握，還是不要輕易嘗試的好。
2.幾何分層
網站中的分層設計最早是由Google的Material Design（全新的設計語言）引進的，尤其是卡片式設計，這使得設計師更加注重網站的層次排版結構。現在做好元素分層的新方法層出不窮，幾何分層就是其中一種，受到很多設計師的追捧。這是因為幾何分層的設計不僅能夠將網站上各種元素以和諧的方式結合在一起，實現不同類型的內容的良好的適應，還可以利用幾何形狀的角或曲線作出指引，引導訪客按我們想要的方式進行瀏覽。它最大🥀的好處還在于對圖像非同凡響的處理效果，看看下面這些栗子吧！每個網站都以一個大膽的形狀作為框架，給平淡無奇的圖片增添了不一樣的色彩---建筑圖片、會議照片，人們工作的照片（下圖實例），讓它們給人眼前一亮的感覺。我們可以從中學習一下不同的設計師是怎樣利用幾何分層有效的將用戶的注意力從圖形轉移到網站內容上的，比如網站標題和品牌。
Salt Projects
Salt在網站的主頁使用了幻燈片，而每一ꦗ張圖片的右下角都有一塊正方形區域放置簡介文本，這種設計有點像卡片式設計的延伸，用卡片突出網站中最重要的元素。除此以外，就連它的滑動鍵和&quo🏅t;To Koop"也使用了幾何圖形。
Bailey and French
看到圖片右下角明亮的橘紅色三角形了嗎？Bailey and French在🤪主頁上使用這種顏色和形狀來創造不平衡的視覺焦點吸引用戶的注意力，激發訪客的探🌱索欲，瀏覽整個網站。而三角形的斜線也與下頁相銜接，延伸出其他內容，整個網站的幾何形狀和動畫的結合讓它充滿趣味。除了右側的三角形，你肯定也發現了網頁左下角還有一個小三角形，這個三角形使用了懸浮效果，當你將鼠標移上去時，它也會變成橘紅色，點擊時會帶領你前往下一頁。小飛十分喜歡這個網站的設計，如果你感興趣的話，可以去他們的網站體驗一下。
.png)
Alchemy Digital
除了有棱有角的三角形、正方形和多邊形等，我們在做幾何分層時還可以使用有弧度的圓形。其實，圓形在突出焦點方面更能發揮作用，Alchemy Digital就很聰明的利用了這一點，重點突出公司員工的圖片，拉近與訪客之間的距離。也許是怕單一的圖片太過單調，網頁的右下角還有一個小圓形相呼應。不管怎樣，它已經成功引起小飛的注意了。
.png)
3.使用模糊圖像或視頻背景
在網站中記得使用模糊的圖像或視頻背景！一聽到這個設計技巧，你是不是有點懵？是不是覺得小飛怎么這么善變？其實小飛在前面的文章中確實告誡過大家一定要在網站中使用高質高分辨率的圖片，不過那主要是針對背景圖片或產品圖片的。在某些情況下，我們反而需要在網站中使用模糊的圖像或視頻，這能給網站帶來一些神秘的色彩，讓用戶更有探索的欲望，也可以將人們在圖片或視頻上投放的關注力轉移到網站中的其他元素上（我們需要突出的元素上）。模糊圖像或視頻背景能夠服務于很多不同的目的，下面就一起來看看吧！
Digitalux
Digitalux將背景中人們工作的視頻設置成模糊的，這是因為他們覺得這個視頻沒有那么重要，看或不都看不會對訪客獲取信息造成影響，他們也害怕冗長的視頻會讓訪客覺得無聊。而且網站的主要重點在于網站上主題內容和行為引導按鈕，難怪它們還將行為引導按鈕設置成了顯眼的綠色。
.png)
Playkot
Playkot將背景模糊化是為了強調有趣的動畫形象以及獨特的字體排版。另外，Playkot是一家游戲公司，更能讓訪客感受到游戲背后設計師的形象，將虛擬與現實相融合！
.png)
ESPN's "We the Fans"
ESPN是一家體育網站，經常直播體育賽事。因此它的背景使用了模糊的體育場背景，更有朦朧感，更能營造那種深夜看球的氣氛，不管坐在哪個位置你都可以享受饕餮的視覺盛宴，這也是在給它們的網站品牌打廣告。
.png)
以上就是小飛最新發現的3種設計趨勢。不管是哪種設計趨勢，在應用到自己的網站前你都需要仔細評估，它是否能夠給網站帶來積極的作用？它能否引起目標用戶的互動？決定使用某種設計趨勢以后，你還需要不斷的調整、測試，這樣才能最大化設計的效用。網站設計趨勢總是處于不停的變化之中的，趕緊抓住先機，做出一個令人驚艷的網站吧！快來起飛頁自助建站平臺做一個響應式網站吧！