六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

扁平化設(shè)計(jì)美學(xué)探討

2014-11-10    周周

扁平化設(shè)計(jì)美學(xué)探討


“扁平化設(shè)計(jì)”的使用正逐漸成為網(wǎng)頁和UI設(shè)計(jì)近期的大趨勢,同時也是時下的一個熱門話題,各種探討和學(xué)習(xí)研究紛至沓來。鑒于我本身一直鐘情于極簡主義,所以扁平化設(shè)計(jì)中的美學(xué)對我極有啟發(fā),特別是在近期對QuoteRobot(我在2010年與他人共同完成的一個提案書寫應(yīng)用)進(jìn)行重新設(shè)計(jì)時。

在本篇文章中,我將與大家探討什么是扁平化設(shè)計(jì),并審視其他設(shè)計(jì)師對扁平化設(shè)計(jì)的看法,然后為大家提供一些能用于自己設(shè)計(jì)工作的小建議。


什么是扁平化設(shè)計(jì)?

從實(shí)踐角度說,扁平化設(shè)計(jì)就是指不采用近幾年流行的漸變、像素完美陰影和擬物化方法(在后面的部分會詳細(xì)介紹)實(shí)現(xiàn)“扁平化”的界面。



Layervault的Allen Grinshtein也許算得上是“扁平化設(shè)計(jì)”一詞的始作俑者。他曾在HackerNews上大為流行的一篇文章中說道:

“Web端上廣受喜愛的產(chǎn)品都有著相似的設(shè)計(jì)審美,它們的斜面、插入陰影和投影都大致相同。對于設(shè)計(jì)師,達(dá)到這種讓人“垂涎”的界面水平也許值得驕傲。但是對我們,以及作為少數(shù)存在的UI設(shè)計(jì)師來說,這就大錯特錯了?!?/p>

~ Allan Grinshtein (Layervault)

以Layervault為例,其設(shè)計(jì)的美妙之處在于簡約,并且摒棄了我們作為設(shè)計(jì)師拼命想達(dá)到的很多額外的設(shè)計(jì)細(xì)節(jié)。我們當(dāng)下奉為UI設(shè)計(jì)潮流,并廣為使用的各種漸變和風(fēng)格正在潛移默化的發(fā)生著改變,而對這一潮流的學(xué)習(xí)和研究將充滿著趣味。

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


在Squarespace的新版本中,設(shè)計(jì)師選用了一套近乎完全扁平化的界面。想來他們一定在線框圖和UI上花費(fèi)了大量的時間,盡管設(shè)計(jì)過程如此復(fù)雜,但導(dǎo)航卻十分簡單。




我自己雖然從來沒用過LayerVault,但根據(jù)我的觀察,其的扁平化UI很簡單易用。




Facebook一直是扁平化設(shè)計(jì)審美的簇?fù)碚摺鋬H在近期才剛剛開始使用少量的斜面。




“Facebook是界面向扁平化發(fā)展的一個完美范例。其主要的操作按鈕雖然還留有少量的斜面,但大量的二級操作都已經(jīng)完全扁平化。鑒于他們一直沒有再修改界面樣式,這種方法肯定是成功的?!?/p>

Ian Storm Taylor (Segment.io)

盡管Facebook近些年因?yàn)轭l繁修改界面而備受批評,但扁平化仍然是互聯(lián)網(wǎng)上使用最多的網(wǎng)站樣式,想來大眾的口味是不會錯的。

的Rdio界面也采用了扁平化和極簡主義風(fēng)格,并幾乎完全拋棄了陰影、漸變甚至彩色。




我有幸曾為Nest的前端代碼做過一些小的貢獻(xiàn),并被他們推出的扁平化審美完全吸引住了。這些簇?fù)肀馄交O(shè)計(jì)的設(shè)計(jì)師對這一風(fēng)格還確實(shí)熱情滿滿。




“…作為交互設(shè)計(jì)師——我們應(yīng)該熱衷于自己所使用的方法,并堅(jiān)決拒絕擬物化和投影一類我們已經(jīng)深陷其中的玩意。”

~ Daniel Howell (Howells)


抵制擬物化


正如20世紀(jì)建筑界的極簡主義運(yùn)動強(qiáng)烈抵制先前幾個世紀(jì)的建筑裝飾主義一樣,扁平化設(shè)計(jì)審美也可能成為對多年來網(wǎng)站和界面過度設(shè)計(jì)或過渡修飾的抵制運(yùn)動。其中最常見的一個例子,就是Apple近年來飽受詬病的過度使用擬物化。




Apple因在日歷應(yīng)用中過度使用皮革材質(zhì)而備受設(shè)計(jì)師的批評。

維基百科將擬物化定義為:

對原產(chǎn)品設(shè)計(jì)中因功能性而存在的設(shè)計(jì)要素進(jìn)行模仿,并使之成為新設(shè)計(jì)中裝飾性元素的一種產(chǎn)品設(shè)計(jì)元素。

舉例來說,我們經(jīng)常對用做按鈕的元素應(yīng)用漸變和投影效果,因?yàn)檎鎸?shí)世界中的按鈕就具有這些屬性,但在計(jì)算機(jī)用戶界面環(huán)境中實(shí)際上這些屬性并非必要。

“一個天氣類應(yīng)用使用玻璃溫度計(jì)的圖片,這就是擬物化:玻璃在原始環(huán)境(真實(shí)世界的溫度計(jì))下是必要的,但在新的設(shè)計(jì)中卻純粹是個裝飾?!?/p>

Sacha Greif

在日歷應(yīng)用上使用皮革材質(zhì)是否真的必要?同樣,對按鈕應(yīng)用漸變和3d邊緣是否真的必要?難道不這樣用戶就不知道去點(diǎn)按鈕了嗎?裝飾到什么程度算是必要?沒有裝飾就不行了嗎?

“真實(shí)生活中,人在按按鈕時會感覺到彈性,但是在手機(jī)或者屏幕上卻沒有這種物理的反饋。雖然在你腦中能夠想象這種物理性,但在擬物化的現(xiàn)實(shí)中它并不真實(shí)存在。所以說,或者至少對我來說,擬物化在這一方面并不能達(dá)到期望的高度,這讓我很失望?!?/p>

~ Allan Yu (svpply / eBay)

因此,扁平化設(shè)計(jì)完全可以成為對界面設(shè)計(jì)濫用裝飾的抵制,正如極簡主義抵制過去華而不實(shí)的豪華建筑風(fēng)格。

功能決定形式,擁抱扁平化

20世紀(jì)建筑界的極簡主義運(yùn)動還產(chǎn)生了一些我們至今仍津津樂道的設(shè)計(jì)名言,例如“功能決定形式”、“少即是多”等等。同樣,雕塑家米開朗基羅在談到自己如何塑造其標(biāo)志性的大衛(wèi)像時,也有一句名言讓我大愛:

“很簡單。只要去掉看起來不像大衛(wèi)的石頭就行了?!?br style="padding-bottom:0px;padding-top:0px;padding-left:0px;margin:0px;padding-right:0px;" /> ~ Michaelangelo)

具體運(yùn)用到用戶界面設(shè)計(jì)中,這通常就是說要去掉讓界面貼近真實(shí)生活的內(nèi)容。37signals的團(tuán)隊(duì)因在其產(chǎn)品(如Basecamp)中運(yùn)用這一原則而名聲大振(而且大獲成功)。在扁平化設(shè)計(jì)界,“少即是多”是絕對的真理。為了表現(xiàn)出扁平化設(shè)計(jì)的美感,設(shè)計(jì)師必須注重于對象的功能,而不是外觀。這是關(guān)鍵,也是線框圖對設(shè)計(jì)流程如此重要的原因所在。

審美因人而異


在寫這篇文章前的調(diào)研過程中,我?guī)缀鯖]找到任何科學(xué)論斷來支持屏幕上的按鈕越真實(shí)就越顯得“可點(diǎn)”這一說法。雖然有很多證據(jù)為對比、顏色理論和層級理論提供支持,但我敢肯定的說,一個扁平化的橙色按鈕和一個斜面橙色按鈕放到恰當(dāng)?shù)谋尘跋滦Ч耆粫胁顒e。下面是一些其他設(shè)計(jì)師的看法:

“這就跟T臺的流行趨勢一樣——流行起來大家就都跟風(fēng),但是作為一名設(shè)計(jì)師,你恰恰需要避免這個。”

Cemre Güng?r (Branch)

“說擬物化設(shè)計(jì)差勁,就像說紫色很丑或者橢圓不適合web應(yīng)用一樣,完全沒意義的話?!?/p>

~ Sacha Greif

“為什么要在沒有證據(jù)的情況下大肆宣傳某個設(shè)計(jì)美學(xué)優(yōu)于其他美學(xué)?難道說為了提高美觀就可以降低使用性嗎?”

Geoff Stearns (formerly YouTube)

好設(shè)計(jì)就是好設(shè)計(jì),跟審美無關(guān)


那么,如果斜面、漸變和陰影只是因人而異的東西,到底什么才是一項(xiàng)好的設(shè)計(jì)呢?不論你是否要用扁平化的審美,用戶界面的關(guān)鍵都在于規(guī)劃。我想扁平化的設(shè)計(jì)能夠讓人更加輕松的識別出一項(xiàng)好的設(shè)計(jì),因?yàn)樵谠O(shè)計(jì)與功能之間雜七雜八的東西更少。

 下面是一些不錯的用戶界面設(shè)計(jì)建議:

一致性

使用通用的UI元素和樣式可以幫助用戶減少對產(chǎn)品的困惑,從而讓應(yīng)用的使用更加簡單。

對比

可點(diǎn)擊的元素應(yīng)該與不可點(diǎn)擊的元素形成對比。例如可以使用顏色、大小、位置和樣式等方法進(jìn)行對比。

布局

使用基于960g布局的網(wǎng)格是為你的設(shè)計(jì)界定某些視覺指導(dǎo)原則的好方法。你的眼睛會自然地跟隨內(nèi)容所建立起的線條和比率移動,因此,了解和使用網(wǎng)格是強(qiáng)化視覺平衡的好方法。

層級

我更傾向于把這一點(diǎn)看作是“用戶操作”。關(guān)于這一點(diǎn)我有一肚子話可說,總之,把最常見的用戶操作(有時也稱為用例)放在顯眼位置同時把不常見的操作隱藏起來是簡化界面,讓產(chǎn)品更加易用的絕佳方法。重要的東西要顯眼,這是一條通用的規(guī)則。

“根據(jù)我的經(jīng)驗(yàn),扁平化還是“現(xiàn)實(shí)化”并不重要。重要的是讓用戶一眼就能看明白應(yīng)用的層級,并能夠輕松找到下一個可以操作的對象?!?nbsp;

Caroline Keem (writer)

目標(biāo)受眾
不同的目標(biāo)受眾會傾向于不同的審美風(fēng)格。例如,建筑師、設(shè)計(jì)師和關(guān)注時尚的受眾可能會簇?fù)肀馄交O(shè)計(jì),而孩子、小丑等其他人可能喜歡比較好玩的材質(zhì)和顏色。

反饋

在進(jìn)行點(diǎn)擊時,快速、明確的反饋很重要。動畫通常是提供視覺反饋的好方法。例如,在點(diǎn)擊某個對象后旋轉(zhuǎn)加載圖標(biāo)。有關(guān)于反饋我要說的另外一點(diǎn)是,需要在恰當(dāng)?shù)臅r機(jī)提供吸引人并且內(nèi)容翔實(shí)的幫助和狀態(tài)信息。

減少阻力

一般來說,減少用戶實(shí)現(xiàn)某項(xiàng)目標(biāo)期間的操作步驟可以打造更加流暢的體驗(yàn)。任何打斷或額外的步驟都會降低產(chǎn)品的用戶轉(zhuǎn)化率。

鼓勵探索

在用戶結(jié)束對界面的最基本使用后,應(yīng)該在他們進(jìn)一步探索后給他們展現(xiàn)其預(yù)期的效果作為其自主探索的獎勵。

線框圖

如果你想打造一套有效的扁平化設(shè)計(jì),那么我還想再強(qiáng)調(diào)一次線框圖和規(guī)劃的重要性。確定最常見的用例,寫下來,然后反復(fù)修改線框圖直到一切完美。我個人喜歡在紙上做,但是現(xiàn)在也有很多不錯的線框圖工具。

“扁平化設(shè)計(jì)有著自己的位置,但是也不要忘記其只不過是眾多設(shè)計(jì)美學(xué)中的一種。光澤化設(shè)計(jì)、扁平化設(shè)計(jì)、啞光設(shè)計(jì)、木質(zhì)感設(shè)計(jì)等等,都只是放置在優(yōu)秀信息結(jié)構(gòu)和交互設(shè)計(jì)之上的樣式而已。

~ Mike Cuesta (carecloud)



分享本文至:

日歷

鏈接

個人資料

存檔