漫談設計:扁平化設計原則
設計社區不停討論關于扁平風格。
這種風格很帶感,但大多數設計師不能彰顯這種風格,或者直接討厭這種風格。
我很現實,創件有用的設計才是好的設計.由于最近流行的扁平風格,而去設計這個風格,但它不適合所有的項目,所以別硬套這種設計風格。
我們來看一下,這有五個很獨特的扁平風格的例子。我們分析一下,再"戲說"一下什么叫扁平風格。
去除特效
扁平化設計以其形命名。平的設計就是其獨特的二維風格,簡單地平。
這一概念不加點綴——陰影、棱臺、壓花、漸變、不用其他工具的增加色彩深度.每個元素、框,從圖像幀到按鈕再到導航工具,注重干凈利落,不使用邊緣羽化和陰影。
不添加額外的元素看起來更加逼真些,不同于skeuomorphic設計項目中使用技巧來使元素更逼近3D。扁平化的圖層反映在其他項目中,就是不設計另類的背景圖、前景色或按鈕、文本和導航.
那么它是如何工作的捏?平面設計有獨特的外觀和感覺,但沒別的了。它需要設計明確的層次結構和元素放置,使用戶可以更加容易專注項目,理解交互。雖然越來越多的網站使用扁平化設計風格,或許移動設計和應用中的風格更受歡迎。較小的屏幕占用,少的按鈕和選項,讓扁平界面的應用使用起來嘎嘎容易(soeasy?).
簡元素
平面設計使用一些簡單的用戶界面元素如按鈕和圖標。設計師只需找些簡單的形狀,如矩形、圓形或正方形,保持每個形狀孤立。形狀邊緣可以***地方角化或者包含一點點曲率。
每個UI元素應該只是簡單和容易單擊或切換。對用戶很直觀的互動,沒有一些為設計而作的過度設計。
除去簡單的樣式,鼓勵大膽的去可點擊的按鈕上色。但不要混淆簡單元素和簡單設計,扁平設計的概念也可以像其他設計方案一樣復雜。
需要獲得幫助開始你的設計嗎(譯者注:下面是廣告)?Designmodo提供了各式各樣的UI工具包使用平面樣式——從SquareUIFree和FlatUIFree,包含一些簡單的PSD/HTML用戶界面工具包與基本組件,到SquareUI和FlatUIPro完整打包PSD/HTML用戶界面包的網站和應用的設計項目。
專心搞排版
由于元素在平面設計中的簡單特性,排版是極其重要的。
字型的定格應和整體方案的設計相符——高度點綴的字體可能看起來奇怪反對一種超簡單的設計。使用加黑字體和簡單地和高效的單詞來使最終產品具有一致性,可以在可視化方式和文本上作些努力。
考慮一個簡單無襯線(sansserif)類型族有很多變化和權重的主版式的使用平面設計的站點。添加一些別致的觸點,一個新奇的字體來作為設計的元素,但小心別使用過火的專業字樣。
字體設計中還應該告訴用戶如何使用該設計。標簽按鈕和其他元素增加引入的易用性和交互性。
專注于顏色
顏色是平面設計的很大一部分。不同于其他網站設計,扁平設計中顏色調色板往往是強調很多更亮、更鮮艷。
扁平設計中的顏色調色板的項目通常包含更多的色調。雖然大多數顏色調色板最專注于兩三種顏色,但扁平設計中調色板通常使用六至八個顏色。
扁平設計中色調趨向充滿活力——想想顏色轉盤—— 沒有淡色或最純色。初級和次級的顏色是***的。另外,一些特定顏色的使用頻率較高,在重復的扁平設計中,方位色,復古的顏色——包括鮮肉色、紫色、綠色和藍色—— 這些是較受歡迎。
#p#
簡約的方法
扁平化的設計本質上是簡單的,它與整體簡約的設計方法相得益彰。
在網站的整體設計中避免太多花哨的東西。簡單的顏色與文字就已足夠。如果你要添加視覺效果,選擇簡單的圖像。
有些零售網站,比如Svpply(見上),使用效果很棒的扁平化設計,這是將一些條目放在一個簡單的背景上做到的。(提醒一下這些圖片確實具有一些自然深度,但仍然和諧融入到整個扁平化的設計中)
“接近”扁平化的設計
一個更多設計師都傾向于贊同的風格,就是“接近”扁平化的設計。
在“接近”扁平化的設計中,使用了扁平化風格的基本主題,但是一些特效被添加到設計方案中。例如按鈕,可能包含輕微的梯度或者陰影。設計師通常挑選一種特效并專門用在一種“接近”扁平化的項目中。
這個風格,相對于一些扁平化設計背后的、無特效思想中的剛性,容納了更多一些的彈性。
設計師們因為附加的深度和紋理而喜歡它。用戶們喜歡它是因為,這個風格沒有那么生硬,并且有利于引導適當的交互。另一方面,設計師們不喜歡它是因為,它以一種方式結合了兩種風格,而這種方式可能缺少了對于一個真正風格的定義。
關于扁平化設計的更多信息
Designmodo已經成為扁平化設計趨勢的討論中的***。閱讀我們之前的文章,了解關于扁平化設計的更多信息。
- FlatDesign:CanyouBenefitfromtheTrend? (扁平化設計:你能從這個趨勢中獲益嗎?)
- FlatWebDesign:BeautifulExamplesofWebsites (扁平化Web設計:網站的美麗實例)
- BeautifulExamplesofFlatIconDesign (扁平化Icon設計的美麗實例)
- MakingitWork:FlatDesignandColorTrends (讓它生效:扁平化設計及色彩趨勢)
原文鏈接:http://www.oschina.net/translate/flat-design-principles