編者按：扁平化網(wǎng)站想玩出創(chuàng)意，或借色彩之風(fēng)，或憑動(dòng)畫之趣，但兩者都得技術(shù)足夠扎實(shí)，新手設(shè)計(jì)師們，今天分享一個(gè)另辟蹊徑的創(chuàng)意技巧，利用花樣迭出的形狀與角度，也能將扁平化網(wǎng)站玩得風(fēng)生水起，具體方法，學(xué)了就知道！

擬物化設(shè)計(jì)也可以這么玩，而且已經(jīng)有前輩總結(jié)了玩法：《騰訊美女設(shè)計(jì)師傾囊相授：圓、方、三角（第二集）》

你的客戶需要：扁平化設(shè)計(jì)，但是要與眾不同充滿創(chuàng)意。這太難了，扁平化設(shè)計(jì)并不是，至少無法應(yīng)用很多創(chuàng)意。不過正如我們所期待的，設(shè)計(jì)師不斷挑戰(zhàn)極限以表達(dá)自己的創(chuàng)作才華，并讓他們的設(shè)計(jì)脫穎而出。

自從扁平化設(shè)計(jì)潮流大舉入侵，這已經(jīng)成為了一個(gè)日益艱巨的任務(wù)，但設(shè)計(jì)師們，當(dāng)然，成功了。他們的方法之一是是引入內(nèi)容元素，或者把鏈接和圖像放在有角度的容器中…比如旋轉(zhuǎn)了45度的正方形、三角形或者隨便什么形。我們?yōu)槟氵x出了一些使用不同尋常具有創(chuàng)造性角度的網(wǎng)頁設(shè)計(jì)?為你提供一些靈感。

網(wǎng)頁設(shè)計(jì)中不常用的形狀

Iron to Iron

這個(gè)網(wǎng)站是由兩個(gè)家伙做的，一個(gè)網(wǎng)站開發(fā)者和一個(gè)設(shè)計(jì)師（快樂組合?。?。他們使用對(duì)稱的菱形（或者旋轉(zhuǎn)的方塊）來構(gòu)成著陸頁，在下面他們使用相同的形狀展示他們的作品。

Rally Interactive

這個(gè)網(wǎng)站非常獨(dú)特，使用了三角形和鼠標(biāo)懸停動(dòng)畫。在鼠標(biāo)懸停之前，它們很小，而且是黑色的，當(dāng)鼠標(biāo)懸停在上面的時(shí)候，三角形發(fā)生了傾斜。

Arnaud Beelen

這個(gè)比利時(shí)平面設(shè)計(jì)師在他的斜插式布局的盒模型中添加了大約12.5度的傾斜，這使得它非常獨(dú)特。

NeoLab

這個(gè)網(wǎng)站使用菱形中的菱形作為它的獨(dú)特設(shè)計(jì)。當(dāng)你的鼠標(biāo)懸停在小菱形上的時(shí)候，一個(gè)黑色半透明的標(biāo)簽覆蓋在菱形上。

Wit Code

這個(gè)巴西網(wǎng)站有著真正靈動(dòng)的設(shè)計(jì)。把一張小方格圖案的紙樣作為背景，頁面里充滿了菱形以及滾動(dòng)動(dòng)畫。導(dǎo)航點(diǎn)使用手寫標(biāo)簽，并且隨著頁面滾動(dòng)向下移動(dòng)。與眾不同的是，我們?yōu)檫@個(gè)網(wǎng)站做了兩張截圖。

Forbi

這是另一個(gè)與眾不同的設(shè)計(jì)。整個(gè)設(shè)計(jì)使用了菱形、頂部和底部添加了額外角度的矩形，有角度的線…甚至還有一些普通的正方形和長(zhǎng)方形！

Qoob Room

這個(gè)俄羅斯網(wǎng)站使用了不少菱形的形狀，主要是僅供裝飾，盡管著陸頁的實(shí)心綠色菱形是個(gè)鏈接。在你瀏覽頁面的時(shí)候，里面也有很多不錯(cuò)的滾動(dòng)動(dòng)畫。

Peppermint

這個(gè)網(wǎng)站使用不同大小和形狀的五邊形，沒有填充或者填充了純色。一些小動(dòng)畫效果和手寫草圖為這個(gè)網(wǎng)站添加了獨(dú)特的外觀。

Be Visionare

著陸頁上形狀組成了一張非常精美的插畫，它們都是有著不同角度的矩形，加上像是右邊非常明顯的曲線。這個(gè)網(wǎng)站使用了柔和的復(fù)古色，幽靈按鈕和滾動(dòng)動(dòng)畫效果。

Clement Zezuka

這個(gè)作品集網(wǎng)站非常獨(dú)特。使用時(shí)間線組織內(nèi)容，當(dāng)你向下滾動(dòng)的時(shí)候，時(shí)間改變，頁面中間的菱形會(huì)展示當(dāng)月項(xiàng)目的名稱。背景的陰云也有微小的動(dòng)畫。

Von Vape

這個(gè)網(wǎng)站的設(shè)計(jì)從產(chǎn)品標(biāo)志演化而來，使用了一個(gè)正放的大V和一個(gè)小一些倒放的V。非常具有創(chuàng)意且獨(dú)特。

Airnauts

這家公司，首先有一個(gè)非常角度導(dǎo)向的標(biāo)志設(shè)計(jì)。著陸頁使用節(jié)點(diǎn)化的三角形形狀動(dòng)畫，屏幕的黑色區(qū)域和紅色區(qū)域都有。當(dāng)你向下滾動(dòng)頁面，兩部分旋轉(zhuǎn)并讓屏幕變成紅色，然后變成黑色。

Yamaha Ginza

這個(gè)網(wǎng)站和我們單子上之前的一個(gè)有點(diǎn)像，都是用斜插式布局，并且使用菱形來切割圖像及鏈接。它是一個(gè)垂直的、無限滾動(dòng)的網(wǎng)站，而且實(shí)際上，它自身也在慢慢滾動(dòng)。

Piropixel

這個(gè)西班牙網(wǎng)站使用旋轉(zhuǎn)的矩形作為所有形狀的容器。豐富的泥土色調(diào)為其設(shè)計(jì)增添了優(yōu)雅的感覺。注意咖啡杯中的那些菱形（Piropixel的標(biāo)志）！

Gleb Leksikov

這是一個(gè)很暗的設(shè)計(jì)，完全使用菱形布局，而中間的大菱形很好地切割了圖像（鏈接）。我增加了截圖的亮度以顯示頁面的層疊效果。

Wixel

這個(gè)網(wǎng)站的著陸頁完全由三角形組成，有一些放在一起組成了矩形。當(dāng)鼠標(biāo)懸停在鏈接上的時(shí)候，一個(gè)黑色標(biāo)簽覆蓋底部的三角形。懸停在導(dǎo)航菜單上的分類時(shí)，會(huì)出現(xiàn)一個(gè)黑色傾斜的矩形。

Perspective Woodworks & Design

網(wǎng)站中所有的圖像和內(nèi)容都放在了菱形里。著陸頁的圖像都只是裝飾，不過向下滾動(dòng)有一些菱形是鏈接。

Built by Buffalo

這個(gè)網(wǎng)站開發(fā)機(jī)構(gòu)使用了蜂窩式六邊形布局以展示他們的作品。

Jessica Caldwell

網(wǎng)站開發(fā)者Jessica Caldwell的作品集網(wǎng)站，這是具有勇氣和創(chuàng)意使用不尋常角度的網(wǎng)站例子。菱形網(wǎng)格布局只是白色背景上的灰線，在你鼠標(biāo)懸停在那些白色菱形上的時(shí)候才會(huì)出現(xiàn)內(nèi)容。然后當(dāng)你在鼠標(biāo)在菱形上劃過的時(shí)候，鏈接再次消失。簡(jiǎn)約至極的設(shè)計(jì)！

結(jié)論

角度和不尋常形狀是設(shè)計(jì)者們找到的為扁平化網(wǎng)頁設(shè)計(jì)添加創(chuàng)意和趣味的方式之一?，F(xiàn)在使用這些風(fēng)格的網(wǎng)站相對(duì)較少，不過在可見的將來，這么做的網(wǎng)站會(huì)越來越多。

你認(rèn)為這種風(fēng)格的網(wǎng)頁設(shè)計(jì)有前途嗎？你有沒有在你的頁面設(shè)計(jì)中使用過獨(dú)特的形狀和角度呢？請(qǐng)與我們分享你的想法和意見，并在下面留言。

玩轉(zhuǎn)扁平化的三大技巧！

高手的技巧，以色彩之名！
《秒變配色高手！怎么都不會(huì)錯(cuò)的6條網(wǎng)頁設(shè)計(jì)配色原則》

騰訊出品的動(dòng)效精選好文！
《超贊！高大上的動(dòng)效設(shè)計(jì)方法及流程總結(jié)》

優(yōu)秀案例學(xué)習(xí)！
《潮流推薦！新鮮漂亮的扁平化網(wǎng)站設(shè)計(jì)》

原文地址：OXP
優(yōu)設(shè)網(wǎng)譯者：@阿布
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量82萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：