您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 交互設(shè)計(jì) >> 瀏覽設(shè)計(jì)教程

扁平化設(shè)計(jì)?MATERIAL DESIGN?

兩種相似的設(shè)計(jì)風(fēng)格,一個基于另一個。一個是新熱事物,另一個,有人猜測,已經(jīng)以自己的方式成為一種時尚。一個是自發(fā)的——適應(yīng)設(shè)計(jì)的趨勢,另一個卻是有目標(biāo)——專用的設(shè)計(jì)指導(dǎo)規(guī)范。

  你可能明白了扁平化與Material Design之間的沖突了。

  但是,他們之間不同是什么呢,本質(zhì)上是一個比另一個更好?在某些用途上更好?實(shí)際上,一些人想知道它們之間的差別有多大,讓我們從最基本的開始:擬物化設(shè)計(jì)的身影出現(xiàn)在每一個身上。

  擬物化設(shè)計(jì)

扁平化設(shè)計(jì)和MATERIAL DESIGN有什么不一樣? 三聯(lián)

  擬物化設(shè)計(jì), 在這個背景下,設(shè)計(jì)是為了模擬真實(shí)的物理世界。通常,這需要設(shè)計(jì)的在線應(yīng)用的形式看起來像他們的真實(shí)世界的變體,比如像電子合成器軟件,做的像鍵盤。這種界面的設(shè)計(jì)方式,在大部分的時間里占據(jù)了主導(dǎo)的地位。

  問題是,這不是基于數(shù)字設(shè)備可用性設(shè)計(jì)的,或者所有的旋鈕和按鈕可以用鼠標(biāo)或觸屏操作,它看著只是模仿真實(shí)事物的外觀。

  實(shí)際上,設(shè)計(jì)圈得到的結(jié)論是,需要其他東西,這將去掉所有的復(fù)古的裝飾元素,然后給他們留下的東西是,可用性放在第一位。所以他們從界面設(shè)計(jì)移除所有痕跡的擬物化設(shè)計(jì),創(chuàng)建了扁平化設(shè)計(jì)。

  扁平化設(shè)計(jì)

Flat Design

  扁平化設(shè)計(jì),在許多方面,基于最基本的元素進(jìn)行設(shè)計(jì)。它選擇刪除任何樣式,那些令人捧腹的三維表現(xiàn)方式,像投影,漸變與紋理。它只關(guān)注與圖標(biāo)之間的聯(lián)系,字體和顏色。

  這是第一個在數(shù)字媒體設(shè)計(jì)上連貫的風(fēng)格,一個利用互聯(lián)網(wǎng)的獨(dú)特的屬性和用戶的需求,快速發(fā)現(xiàn)的簡單按鈕,直接配色方案為了快速識別的元素,和簡潔的圖標(biāo)。

  外觀在扁平化設(shè)計(jì)里面是次要的:重點(diǎn)是原始的功能。簡單的圖標(biāo)隱喻甚至可以省略一些網(wǎng)站的內(nèi)容, 引導(dǎo)用戶進(jìn)行操作,僅僅基于它的顏色和圖片。此外,它加速加載時間和高或低分辨率屏幕上看起來顯示一樣好,提供更加可靠的用戶體驗(yàn)。正因?yàn)槿绱?,對設(shè)計(jì)者和用戶來說它會讓事情更容易。

  贊成的意見

  它擁抱了屏幕的限制基于這些去工作,而不是嘗試去做別的事情。

  流線型的設(shè)計(jì),擺脫不必要的圖形和動畫元素,減少加載時間。

  沒有擬物化元素,你的讀者能很快速度發(fā)現(xiàn)內(nèi)容。

  刪除所有不必要的設(shè)計(jì)選擇,使網(wǎng)站設(shè)計(jì)速度更多

  扁平化設(shè)計(jì)的簡化網(wǎng)站不斷地適應(yīng)瀏覽器,可以非常容易做出響應(yīng)。

  反對的觀點(diǎn)

  扁平化設(shè)計(jì)可能限制、約束你去使用簡單的顏色,形狀和圖標(biāo)。

  如果走得太遠(yuǎn),很容易不小心創(chuàng)建一個毫無特色的和看起來一般的網(wǎng)站

  一些網(wǎng)站,或應(yīng)用程序,需要復(fù)雜的視覺線索來指導(dǎo)用戶來進(jìn)行如何使用,這是扁平設(shè)計(jì)的一個主要的失敗點(diǎn)。一個常見的抱怨是,靜態(tài)的矢量圖形,它缺乏陰影,邊緣很難分辨是否可點(diǎn)擊按鈕

  它的普遍性很難創(chuàng)建一個看起來很獨(dú)特的網(wǎng)站或應(yīng)用程序。

  有一點(diǎn)需要注意,這是一個2010年代中期獨(dú)特的審美,你的網(wǎng)站很快會過時,如何你不計(jì)劃去重新設(shè)計(jì)你的網(wǎng)站,時間相對會很快。

  Material Design

Material Design

  扁平化設(shè)計(jì)的評論家,認(rèn)為這走的太遠(yuǎn)了,消除所有的擬物化比較激進(jìn),即使是有用的。進(jìn)入,借用Material Design層的概念,使用陰影,將數(shù)不清的圖像進(jìn)行編輯和分離;斜面和動畫,它利用自然交互關(guān)聯(lián)深度與重要性。

  Material Design,是由谷歌開發(fā)的一套設(shè)計(jì)標(biāo)準(zhǔn),在這個文檔中,它有無數(shù)獨(dú)特而有趣的特性,但也許是最明顯的是它提出了平面像素的Z軸概念。事實(shí)上,它在扁平化設(shè)計(jì)上面增加了一些擬物化,創(chuàng)造 了一種一群二維平面飛機(jī)浮動在對方指定的海拔印象。

  想象一張紙,能夠隨意隨意擴(kuò)展收縮,重塑自身,融合和分離。現(xiàn)在把它們一個個疊放起來(他們也可以漂浮空中),然后在每張上面畫一個網(wǎng)站要素。簡而言之,這就是Material Design的概念。

  然而Material Design并不是完美的設(shè)計(jì)文檔的特征。它也并非一成不變的鐵桿定律。試著更多的把它想成問我未來設(shè)計(jì)的物理框架和模板。它的設(shè)計(jì)具有普遍適應(yīng)性,就像安卓穿戴手表一樣,能響應(yīng)屏幕的各種尺寸,甚至是不同形狀。Material Design的應(yīng)用在其他app開發(fā)商中也在推廣。

  Material Design是安卓應(yīng)用設(shè)計(jì)的標(biāo)準(zhǔn),因?yàn)樗粦?yīng)用到提及的穿戴設(shè)備上。它是否應(yīng)該用到IOS上是引起不斷爭論的源頭。有人爭論說保持谷歌外形很有必要。其他人則認(rèn)為它和剩下的操作系統(tǒng)相互沖突。孰對孰錯,全看你自己的決定。

  贊成的意見

  三維安排讓程序更易于互動:比如陰影被安排用來顯示分層。

  和扁平化設(shè)計(jì)不同,Material Design都有詳盡明確的一套參考,沒有什么需要你去猜測。

  如果你想開發(fā)一個多平臺的東西,比如一個網(wǎng)站和一個安卓應(yīng)用,Material Design對所有設(shè)備都提供統(tǒng)一的體驗(yàn)。這樣的話就會增加用戶使用方便性,進(jìn)而巧妙地促進(jìn)你的品牌化。

  如果你對動畫感興趣,Material Design是個不錯的方法因?yàn)樗詭Я嗽S多這一類型的動畫。沒有它們你就只能動手畫了。

  反對的觀點(diǎn)

  不管喜歡與否,Material Design不可避免的和谷歌關(guān)聯(lián)。如果你想使自己遠(yuǎn)離這點(diǎn),為你的網(wǎng)站或應(yīng)用創(chuàng)造一個獨(dú)特的特性,使用谷歌指引來實(shí)現(xiàn)要困難的多。

  不是所有的系統(tǒng)都能實(shí)現(xiàn)預(yù)期幀頻。而且你很難知道該怎么做才能提高那些不可實(shí)現(xiàn)者的可用性。

  動畫會耗盡手機(jī)用戶的電池。

  強(qiáng)制開發(fā)者們遵守設(shè)計(jì)指南可能會進(jìn)一步扼殺個體創(chuàng)造力,阻礙更多動畫和裝飾特點(diǎn)的發(fā)展。

  總結(jié)

  Material Design和扁平化設(shè)計(jì)真的沒有那么大的天壤之別:兩個都用同樣干凈和最低的美感。當(dāng)扁平化界面被分割,你基本能從中想到質(zhì)感界面。盡管Material Design動畫廣泛收到表揚(yáng),但是總結(jié)起來也不過是更加用戶友好化。事實(shí)上,沒有人說你不能把二者的美感相結(jié)合,用Material Design激活一成不變的扁平化網(wǎng)站。

  在我看來,扁平化網(wǎng)站很實(shí)用。比起滿是動畫和復(fù)雜圖片的網(wǎng)站,它們的下載速度更快。如果你要設(shè)計(jì)一個極為簡單的網(wǎng)站,針對使用不同設(shè)備,技術(shù)經(jīng)驗(yàn)水平不等的各種用戶,或者只是重視用戶體驗(yàn)多于形式,扁平化設(shè)計(jì)正適合你。如果你對在網(wǎng)站上放各種動畫或動態(tài)圖片無感,主要對原始的簡單化和可用性有興趣,毫無疑問我會推薦你選擇扁平化設(shè)計(jì)。但是如果你想創(chuàng)建一個有動畫的更加花哨的網(wǎng)站,當(dāng)然要選擇Material Design。

[教程作者:designmodo]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/id2713.html
aliued:“觸動人心的設(shè)計(jì)”方法初步探究
用戶教育產(chǎn)品化:設(shè)計(jì)產(chǎn)品化的微型實(shí)踐
圖趣網(wǎng)微信
建議反饋
×