從一個web前端開發(fā)者的角度來看扁平化設(shè)計的5大優(yōu)點

為什么扁平設(shè)計看起來真棒或可怕的?你知道為什么嗎?

扁平化設(shè)計就是我個人的理解就是把原來復(fù)雜的動機(jī)簡單的處理,放棄一些陰影,透視,紋理,漸變等等能做出3D效果的元素統(tǒng)統(tǒng)廢棄,所有的設(shè)計效果都做到干凈完美,沒有任何羽化,漸變,或者陰影。

自從iOS7的發(fā)布,扁平化設(shè)計也隨著遭到各界人士的吐槽。

今天25學(xué)堂跟大家強(qiáng)調(diào)下,這篇文章是站在web前端開發(fā)師的角度來看的簡約設(shè)計風(fēng)格的一些特別好的優(yōu)點。

?第一個優(yōu)點:給web前端開發(fā)者容易閱讀PSD文件和說明文檔

由于扁平設(shè)計通常包括像陰影,漸變和其他過濾器大幅減少的影響,根本就少,你不得不采取直接從Photoshop中繪制或任何其他圖形設(shè)計軟件轉(zhuǎn)換成HTML / CSS布局改造設(shè)計時的照顧。就個人而言,當(dāng)我設(shè)計的東西在一個最小的風(fēng)格,我也少用“救命層” - 圖層真的沒有一個語義感,但須達(dá)到特殊的效果,因為它們在某些覆蓋或掩蔽其他層方法。

擁有一個良好的組織設(shè)計文件沒有各種各樣的圖層蒙版,圖層樣式和顏色過濾器是純金的。它大大加快了出口的資產(chǎn)和轉(zhuǎn)化圖層樣式到CSS的工作流程。

 

?第二個優(yōu)點:減少了一些開發(fā)成本

由于扁平設(shè)計的重點內(nèi)容,在??很大程度上取決于最棒的印刷式樣往往使用一種更廣泛的調(diào)色板,以增加不同的領(lǐng)域和互動元素之間的反差,我們必須以形象資產(chǎn),如背景紋理成交較少。幾乎什么都可以復(fù)制或使用簡單的CSS樣式就可以解決。

 

?第三個優(yōu)點:簡化了SVG的資產(chǎn)和圖標(biāo)字體

由于簡單和最小的插圖,我們可以做出的可伸縮矢量圖形,而不是JPG或PNG格式的圖像畫面和圖標(biāo)字體大量使用。這將導(dǎo)致真正的獨立的解決方案,消除了在不同的分辨率需要多個圖像精靈(通常是正常的分辨率和視網(wǎng)膜顯示屏分辨率翻倍)。

iconExample

此外,SVGs以及圖標(biāo)的字體可以通過簡單的CSS或JS,這使我們能夠創(chuàng)造一些真正偉大的前瞻性動畫(無需額外的資產(chǎn)的需要,除了一些代碼行)和再利用同一資產(chǎn)在不同環(huán)境中簡單地進(jìn)行操作通過修飾它。

?第四個優(yōu)點:接口更容易主題化,方便擴(kuò)展

比方說,您的Web應(yīng)用程序或網(wǎng)站需要支持不同的主題,用戶可以從中選擇。如果你曾經(jīng)創(chuàng)建不同主題的skeumorphic設(shè)計,你就已經(jīng)知道,這可能是一個非常耗時的任務(wù) - 導(dǎo)出了一套全新的圖形和創(chuàng)建新的CSS文件應(yīng)用替代或新的效果需要一個嚴(yán)肅的金額額外的工作。有一臺設(shè)計中的這些問題幾乎完全消失了 - 在大多數(shù)情況下,你只需要改變一些顏色值(當(dāng)你使用一個CSS預(yù)處理器一樣都不能少,上海社會科學(xué)院或手寫筆,支持CSS的變量,變得更容易)。太神奇了!

 

?第五個優(yōu)點:瀏覽器之間的兼容性會更好

它可能不值得一提,但在某些情況下,我們可能仍然需要支持舊的瀏覽器無法處理的東西,如CSS漸變和箱陰影。由于這種視覺效果在最小的設(shè)計似乎很多時候,我們并沒有增加那么多的修正,以使我們的網(wǎng)站很好看舊的瀏覽器。不管怎么說,老問題可能會消失,但你可一定要找到新的,比如可伸縮矢量圖形不條條框框在Internet Explorer 8中的工作和更低的。

 

總的來說,25學(xué)堂認(rèn)為扁平化設(shè)計才能真正加快開發(fā)流程,讓生活更輕松。盡管如此,一個簡約的設(shè)計有時可能不是最好的選擇,還有其他的選擇,當(dāng)涉及到設(shè)計和開發(fā)現(xiàn)代web-site/app考慮。

擴(kuò)展閱讀扁平化設(shè)計的優(yōu)缺點:

扁平化設(shè)計的優(yōu)點:

簡單,簡潔,把事物更直接更本分的展現(xiàn)出來,減少一些設(shè)計效果的映襯,所帶來的模糊看不清的情況。隨著網(wǎng)站和應(yīng)用程序在許多平臺涵蓋了越來越多不同的屏幕尺寸,創(chuàng)建多個屏幕尺寸和分辨率的skeuomorphic設(shè)計既繁瑣又費時。設(shè)計正朝著更加扁平化的設(shè)計,你可以一次保證在所有的屏幕尺寸上它會很好看。扁平化設(shè)計更簡約,條理清晰,最重要的一點是,更好的適應(yīng)性。

扁平化設(shè)計缺點之一:

比如需要一定的學(xué)習(xí)成本,傳達(dá)的感情不豐富,甚至過于冰冷。不具備形象化的體驗。

 

每天更新,
全站高品質(zhì)素材免費下載!