|
知識(shí)普及 ? 什么是扁平化網(wǎng)站設(shè)計(jì)風(fēng)格
|
|
什么是扁平化網(wǎng)站設(shè)計(jì)風(fēng)格
|
|
奈薇網(wǎng)站制作
|
于2020-05-24 12:28發(fā)表
|
|
閱讀次數(shù)
|
2322次
|
|
網(wǎng)站設(shè)計(jì)經(jīng)過幾十年的發(fā)展，由簡單的文字顯示走到現(xiàn)在豐富的圖文和動(dòng)畫顯示，而正是這種滿屏的圖片和花俏的修飾，讓網(wǎng)頁的實(shí)用的本質(zhì)越來越少。而就在這種花俏的修飾達(dá)到一定程度后，扁平化設(shè)計(jì)就出現(xiàn)了，扁平化的特點(diǎn)就是摒棄了這些花哨和過度的修飾，讓頁面返璞歸真。
因此，扁平化設(shè)計(jì)，對(duì)于過度設(shè)計(jì)來說是一種進(jìn)步，甚至可以說是一次革命。過度設(shè)計(jì)來源于這樣一種心態(tài)：一些設(shè)計(jì)師為了吸引網(wǎng)站的訪客并且保持訪客的興趣。結(jié)果就是，他們會(huì)將各種花哨的（盡管不一定是有用的）東西放到網(wǎng)站上去，如華麗的動(dòng)畫和插圖。
簡而言之，扁平化設(shè)計(jì)可以總結(jié)為一個(gè)眾所周知的原則K.I.S.S,即“keepitsimple，stupid。”
有些被稱作扁平化設(shè)計(jì)的對(duì)用戶來說很友好，那是因?yàn)樗麄兪且杂脩魹橹行牡?，使用這種設(shè)計(jì)方法時(shí)用戶是第一位的和最重要的。
曾經(jīng)，skeuomorphic設(shè)計(jì)正是這么做的，他們把現(xiàn)實(shí)生活的熟悉的畫面搬到界面上，采用仿真的陰影形成更多的噱頭，以及假亂真的紋理，甚至于使用真正物體。
扁平化設(shè)計(jì)基礎(chǔ)
簡約和簡單可以用來描述扁平化設(shè)計(jì)的特性，這意味著它很自然地促進(jìn)可用性。它具有鮮明的色彩，清晰的邊緣，開放空間，干凈，當(dāng)然，二維或平面化的插圖。它是指任何過度設(shè)計(jì)以外的東西。
windows8，微軟最新發(fā)布的操作系統(tǒng)，是扁平化設(shè)計(jì)的基本例子。
微軟應(yīng)該說是大力使用這種風(fēng)格最早的公司之一。顯然，這可以被看作是最近已經(jīng)遭到非議的蘋果過度使用擬物化設(shè)計(jì)的一個(gè)回應(yīng)。你會(huì)注意到，從上面windows8的例子中，扁平化設(shè)計(jì)強(qiáng)調(diào)了基本的，像圖標(biāo)一樣的圖形設(shè)計(jì)，而不是把真實(shí)世界的物體變小一點(diǎn)或者使用仿真的圖形。這意味著扁平化設(shè)計(jì)使得真實(shí)的世界和科技世界之間產(chǎn)生更大的鴻溝。
摒棄圖層效果
扁平化設(shè)計(jì)的名稱來源于它使用2維度的設(shè)計(jì)方法和平面化的設(shè)計(jì)元素，這意味這它不會(huì)過度設(shè)計(jì)。同時(shí)也意味著不會(huì)有倒角，投影，漸變或者其他更多的效果應(yīng)用到一個(gè)圖層上去?？纯茨切┦褂帽馄交O(shè)計(jì)的網(wǎng)頁框或者元素：它們只有清晰的邊緣而沒有什么投影。
看看triplagent，它全面詮釋了這些特點(diǎn)。
扁平化設(shè)計(jì)之所以成功，因?yàn)樗匀皇欠浅＊?dú)特的，而且它不必使用過分夸張的花招吸引網(wǎng)站訪問者。在外觀和元素排布上，它是組織良好層次清楚的，所以這個(gè)網(wǎng)站對(duì)用戶來說是非常易于交互的。
色彩是讓人難忘的要素
花一點(diǎn)時(shí)間去看看一些扁平化設(shè)計(jì)的網(wǎng)頁，你會(huì)馬上發(fā)現(xiàn)，他們使用的色彩比那些非扁平化設(shè)計(jì)的網(wǎng)頁更加明亮和充滿活力。在如此的聚焦于簡潔之后，
扁平化設(shè)計(jì)給予網(wǎng)頁色彩這樣的基本設(shè)計(jì)元素以更加散發(fā)光彩的機(jī)會(huì)。
扁平化設(shè)計(jì)可以溯源到調(diào)色板的使用。除了更加充滿活力，他們通常使用更多的顏色。例如，傳統(tǒng)的色板通常使用2-3種顏色，扁平化設(shè)計(jì)可以使用多達(dá)8種顏色。
在基本色和輔助色已經(jīng)是很流行的常見色的情況下，多色相即使沒有什么多余的元素就已經(jīng)是充滿活力的。至于現(xiàn)在，有些顏色似乎比其他的顏色更受歡迎：復(fù)古的顏色(藍(lán)色，綠色，紫色，橙色）
這些顏色在扁平化設(shè)計(jì)的網(wǎng)站上已經(jīng)都非常常見。在Wistia的網(wǎng)站上，你可以清楚的看見所有這些方面，色彩是無縫銜接在一起的。
排版是重點(diǎn)
毫不奇怪的是，由于沒有多余元素的存在和干擾，排版的重要性被顯得更加突出。在扁平化設(shè)計(jì)中，排版以前從未被作為一個(gè)設(shè)計(jì)元素顯得這么重要過，也許因?yàn)橛脩舻难劬^少為這方面分心。
文字的風(fēng)格和扁平化設(shè)計(jì)的外在表現(xiàn)需要是和諧共存的，一個(gè)花哨的字體會(huì)和其他簡單的設(shè)計(jì)元素形成鮮明的對(duì)比。同樣需要強(qiáng)調(diào)的是字體的簡潔大方。一個(gè)成功的扁平化設(shè)計(jì)的靠譜的選擇是sansserif這種字體?？梢詫⒁粋€(gè)高度創(chuàng)造性的字體作為一種藝術(shù)元素與極簡主義保持和諧，這樣做也許不會(huì)讓用戶覺得很夸張。但是，請(qǐng)不要做的過火。
平面設(shè)計(jì)中的字體必須教會(huì)用戶學(xué)會(huì)如何獲得最大的設(shè)計(jì)收益。因此，在網(wǎng)頁上的元素和按鈕應(yīng)該顯得易用和易于交互。
下面是平面設(shè)計(jì)的一個(gè)很好的例子。這是Flatmate，一個(gè)瑞典的公司。
扁平化設(shè)計(jì)是一次變革
總而言之，扁平化設(shè)計(jì)應(yīng)該是對(duì)一些設(shè)計(jì)者在過去幾年里過度裝飾的反抗。這應(yīng)該是一個(gè)很好的進(jìn)步，因?yàn)楹芏嗑W(wǎng)站都是過度的裝飾著動(dòng)畫和插圖。
而這些對(duì)用戶體驗(yàn)來說是毫無用處的。扁平化設(shè)計(jì)給網(wǎng)站的設(shè)計(jì)帶來的簡潔之美，雖然它仍然在尋找更好的視覺表現(xiàn)以及怎樣才能給用戶帶來更好的體驗(yàn)的的方法。
最后，你覺得扁平化設(shè)計(jì)是怎樣的？現(xiàn)在到了扁平化設(shè)計(jì)的時(shí)代了么，還是只是暫時(shí)對(duì)擬物化的過度設(shè)計(jì)的一個(gè)回應(yīng)？你是否喜愛扁平化設(shè)計(jì)超過了擬物化設(shè)計(jì)？
擬物化設(shè)計(jì)：正好相反
如果你仍然不清楚扁平化設(shè)計(jì)是什么，那么就看看和它相反的設(shè)計(jì)手法：擬物化設(shè)計(jì)；這是個(gè)很好的辦法將兩者區(qū)分開來?；緛碚f，擬物化設(shè)計(jì)的特點(diǎn)是通過把真實(shí)世界的觸覺和物理感受和網(wǎng)站設(shè)計(jì)結(jié)合起來。
例如：Findmyfriends的設(shè)計(jì)，它是蘋果公司設(shè)計(jì)的一個(gè)應(yīng)用，它可以讓用戶發(fā)現(xiàn)其他用戶和跟蹤他們的IOS設(shè)備，看看它在主界面上那仿皮革制品的紋理的界面，是擬物化設(shè)計(jì)的絕佳例子。
有些人認(rèn)為擬物化設(shè)計(jì)失寵了。這是因?yàn)樘O果在推廣ios操作系統(tǒng)的時(shí)候也推廣了這種設(shè)計(jì)，而當(dāng)前，他們也要摒棄擬物化設(shè)計(jì)了，這應(yīng)該主要是
因?yàn)橥瞥邕@種設(shè)計(jì)的前蘋果的高級(jí)副總裁ScottForstall離職了。
如果在青島網(wǎng)站建設(shè)中要做到扁平化設(shè)計(jì)，就需要基于這樣的設(shè)計(jì)原則：設(shè)計(jì)應(yīng)該是簡潔的，讓頁面內(nèi)容返璞歸真。
|