2016 年末就出現(xiàn)的很多新年設(shè)計(jì)趨勢(shì)文章，無(wú)論是 5 大趨勢(shì)，還是 10 大趨勢(shì)，其中都出現(xiàn)了固定的一條——在網(wǎng)頁(yè)設(shè)計(jì)中使用抽象幾何形狀。小編分析，這也是不無(wú)原因的，扁平化設(shè)計(jì)的流行，幾何元素和純色色塊大放異彩，純 CSS 能夠?qū)崿F(xiàn)各種幾何形狀效果，這無(wú)疑都催化著抽象幾何形狀在設(shè)計(jì)中的發(fā)酵。By Gene Ross首先，我們一起來(lái)看看，這些運(yùn)用在設(shè)計(jì)中的幾何形狀。1、方形包括正方形和矩形，是網(wǎng)頁(yè)布局中最常見(jiàn)和最受歡迎的幾何元素。對(duì)于卡片式布局來(lái)講，就是一個(gè)個(gè)方形的排列。在大多數(shù)情況下，方形代表了平衡、正規(guī)，這也是

2016 年末就出現(xiàn)的很多新年設(shè)計(jì)趨勢(shì)文章，無(wú)論是 5 大趨勢(shì)，還是 10 大趨勢(shì)，其中都出現(xiàn)了固定的一條——在網(wǎng)頁(yè)設(shè)計(jì)中使用抽象幾何形狀。小編分析，這也是不無(wú)原因的，扁平化設(shè)計(jì)的流行，幾何元素和純色色塊大放異彩，純 CSS 能夠?qū)崿F(xiàn)各種幾何形狀效果，這無(wú)疑都催化著抽象幾何形狀在設(shè)計(jì)中的發(fā)酵。

By Gene Ross

首先，我們一起來(lái)看看，這些運(yùn)用在設(shè)計(jì)中的幾何形狀。

1、方形

包括正方形和矩形，是網(wǎng)頁(yè)布局中最常見(jiàn)和最受歡迎的幾何元素。對(duì)于卡片式布局來(lái)講，就是一個(gè)個(gè)方形的排列。在大多數(shù)情況下，方形代表了平衡、正規(guī)，這也是很多官方企業(yè)選擇方形的因素。一般情況下，文本會(huì)被寫(xiě)在方形框內(nèi)，這也是為什么方形被大量應(yīng)用在導(dǎo)航欄內(nèi)。

2、圓形

包括正圓和橢圓，圓形是一切的開(kāi)始，是源頭，而一切的結(jié)束也會(huì)是圓形，是圓滿的句號(hào)。圓形在設(shè)計(jì)中常被使用，在網(wǎng)頁(yè)布局中大部分以正圓的情況出現(xiàn)。圓形相較于方形，有靈動(dòng)的視覺(jué)感受，另一方面，圓形能夠在方形的界面中脫穎而出，圓形與方形的巧妙結(jié)合，能夠在實(shí)現(xiàn)功能引導(dǎo)的同時(shí)，顯得頁(yè)面活潑靈動(dòng)。

3、三角形

從幾何的角度講，三角形被認(rèn)為是最穩(wěn)固的形狀，在設(shè)計(jì)中，它被認(rèn)為是穩(wěn)定、能量，也因?yàn)槠浼怃J的外形，被大量運(yùn)用于運(yùn)動(dòng)、前衛(wèi)和時(shí)尚的領(lǐng)域。倒三角形相對(duì)正三角形而言更加新穎，但畫(huà)面的穩(wěn)定和均衡感沒(méi)有正三角形強(qiáng)烈，相比之下，它更能表現(xiàn)一種張力和壓迫感，使畫(huà)面更富有視覺(jué)沖擊力。在網(wǎng)頁(yè)設(shè)計(jì)中使用三角形元素會(huì)讓頁(yè)面不拘一格，快速抓住用戶的注意力，打破慣性的設(shè)計(jì)思維，創(chuàng)造出新奇的視覺(jué)效果。

4、多邊形

五角形和六邊形也是經(jīng)常被使用的形狀，五角星的星星形狀和六邊形的蜂巢形狀很容易與自然的主題相切合。還有一種情況，低多邊形風(fēng)格的流行使得多邊形在網(wǎng)頁(yè)設(shè)計(jì)中更加常見(jiàn)，低多邊形風(fēng)格是使用少量的多邊形來(lái)表現(xiàn)出棱角分明的矢量晶格化藝術(shù)風(fēng)格，讓圖片看起來(lái)有點(diǎn)像折紙工藝品，產(chǎn)生極具簡(jiǎn)約的視覺(jué)效果。

5、線

包括直線和曲線，一般網(wǎng)頁(yè)中常見(jiàn)的是直線切割，想要打破傳統(tǒng)布局，可以嘗試使用斜線和曲線，在網(wǎng)頁(yè)中使用斜線進(jìn)行切割，能夠呈現(xiàn)一種不對(duì)稱感，使用曲線則讓整個(gè)畫(huà)面變得動(dòng)感圓潤(rùn)，呈現(xiàn)一種自由的即視感。

By Eddie Lobanovskiy

上面我們說(shuō)到幾何元素如此盛行，我們就可以大膽探索，把它們運(yùn)用在合適的領(lǐng)域，這會(huì)讓你得到意想不到的效果。

1、Logo

幾何形狀有著先天的辨識(shí)度，也能讓你的網(wǎng)站更容易被識(shí)別。選擇一個(gè)簡(jiǎn)單的幾何形狀，譬如圓形的結(jié)構(gòu)加上纖細(xì)的字體就能夠打造一個(gè)充滿復(fù)古感的 Logo 。

By Armando Rinaldi

2、導(dǎo)航

導(dǎo)航是網(wǎng)站的關(guān)鍵元素，能夠引導(dǎo)用戶快速的了解網(wǎng)頁(yè)。導(dǎo)航多位于頂部與左欄，常規(guī)的水平菜單、垂直導(dǎo)向、滾動(dòng)動(dòng)效等方面都有不少區(qū)別。常見(jiàn)的導(dǎo)航以矩形為主，現(xiàn)在很多地圖類 App 界面中，很多以圖釘式形狀、圓形作為定位導(dǎo)航。

By Thunderrise

3、網(wǎng)頁(yè)背景

小編知道現(xiàn)在最流行的背景形式是圖片式背景設(shè)計(jì)，但如果你想要出其不意，也可以試試純色與幾何形狀疊加的網(wǎng)站背景?；ㄉ趲缀渭y理的使用可以讓網(wǎng)站變得很時(shí)尚，增添動(dòng)感，特別適合電商類網(wǎng)頁(yè)設(shè)計(jì)。

4、圖標(biāo)

圓形元素被廣泛的運(yùn)用于界面設(shè)計(jì)中，可以使用統(tǒng)一中的差異來(lái)進(jìn)行區(qū)別化設(shè)計(jì)，下圖在鼠標(biāo)滑動(dòng)時(shí)，圖標(biāo)也會(huì)改變顏色和形狀。用戶在瀏覽網(wǎng)站時(shí)是基于視覺(jué)感受，好的圖標(biāo)能夠吸引用戶閱讀文本內(nèi)容。使用不同幾何形狀、色彩斑斕的圖標(biāo)可以成功的引導(dǎo)用戶操作，同時(shí)關(guān)聯(lián)可視化構(gòu)建，優(yōu)秀的圖標(biāo)能夠深入人心、代替文本，譬如購(gòu)物車的圖標(biāo)不會(huì)再多此一舉的寫(xiě)上購(gòu)物車文本。

5、網(wǎng)頁(yè)塊狀內(nèi)容

在網(wǎng)頁(yè)內(nèi)容中打破傳統(tǒng)的瀑布流形式，使用幾何塊狀結(jié)構(gòu)，能讓用戶的眼睛重新獲得新鮮感，在設(shè)計(jì)過(guò)程中，使用幾何形狀的拼貼，把裁剪好的圖形打亂，重現(xiàn)整合在一起，可以獲得一個(gè)與眾不同的畫(huà)面；或者通過(guò)幾何形狀對(duì)內(nèi)容進(jìn)行切割，加上高飽和度的色塊配合，時(shí)尚、有視覺(jué)沖突的頁(yè)面也很容易實(shí)現(xiàn)。

By Martin Strba

作為設(shè)計(jì)師，我們固然想要脫離一種流行形式，創(chuàng)造出一個(gè)獨(dú)特的設(shè)計(jì)風(fēng)格，但是小編同時(shí)也認(rèn)為，之所以會(huì)出現(xiàn)“設(shè)計(jì)趨勢(shì)”這樣的文章，一定是基于用戶的喜好，以用戶為中心才是我們作為設(shè)計(jì)師首先要考慮的，既然幾何形式激發(fā)用戶想象力的能力如此之大，不妨考慮一下，使用適合的元素加入在你的網(wǎng)頁(yè)之中。

加入不規(guī)則幾何形狀也許能讓你的眼睛重獲新鮮感。最后再來(lái)欣賞 9 個(gè)運(yùn)用了幾何元素的優(yōu)秀網(wǎng)站設(shè)計(jì)（來(lái)自優(yōu)設(shè)）。

1、Ondo

2、Wildlife

3、Wixel

4、Kinder Fotografie

5、LIGAYA SCAFF

6、VISIONARE

7、Lacca

8、Kocha

9、Fiescupcakes

-end-