扁平化設計原則

　　扁平化設計 – 設計群體實在無法停止談論它。

　　這種設計感覺很強烈。大多數設計師既不能充分捕捉這個潮流，也不能完全討厭它。

　　我的態度中庸。好的設計是與創造一些有用的東西有關。如果答案在於扁平時尚的設計，那就順其自然。但這個趨勢可能不是對所有專案都行得通，因此這不應該是強制性的。

　　所以我們觀察一下是什麼使得事物變得扁平。有五個不同尋常的特點。我們逐一看一下，再加上一個“近似”扁平化設計的介紹。

　　去除特效

　　扁平化設計以其形命名。平的設計就是其獨特的二維風格，簡單地平。

　　這一概念不加點綴——陰影、稜臺、壓花、漸變、不用其他工具的增加色彩深度 . 每個元素、框,從影像幀到按鈕再到導航工具 , 注重乾淨利落 , 不使用邊緣羽化和陰影。

　　不新增額外的元素看起來更加逼真些 ，不同於skeuomorphic 設計專案中使用技巧來使元素更逼近3D 。扁平化的圖層反映在其他專案中，就是不設計另類的背景圖 、前景色或按鈕 、文字和導航.

　　那麼它是如何工作的捏 ？ 平面設計有獨特的外觀和感覺,但沒別的了。它需要設計明確的層次結構和元素放置 , 使使用者可以更加容易專注專案,理解互動。雖然越來越多的網站使用扁平化設計風格,或許移動設計和應用中的風格更受歡迎。較小的螢幕佔用 , 少的按鈕和選項 , 讓扁平介面的應用使用起來嘎嘎容易 (so easy?).

　　簡元素

　　平面設計使用一些簡單的使用者介面元素如按鈕和圖示。設計師只需找些簡單的形狀，如矩形、 圓形或正方形，保持每個形狀孤立。形狀邊緣可以完美地方角化或者包含一點點曲率。

　　每個 UI 元素應該只是簡單和容易單擊或切換。對使用者很直觀的互動，沒有一些為設計而作的過度設計。

　　除去簡單的樣式，鼓勵大膽的去可點選的按鈕上色。但不要混淆簡單元素和簡單設計，扁平設計的概念也可以像其他設計方案一樣複雜。

　　需要獲得幫助開始你的設計嗎(譯者注：下面是廣告)？Designmodo 提供了各式各樣的 UI 工具包使用平面樣式 —— 從 Square UI Free和Flat UI Free，包含一些簡單的 PSD/HTML 使用者介面工具包與基本元件，到Square UI 和Flat UI Pro 完整打包 PSD/HTML 使用者介面包的網站和應用的設計專案。

　　專心搞排版

　　由於 元素 在 平面 設計 中 的 簡單 特性 ， 排版 是 極其 重要 的 。

　　字型的定格 應 和 整體方案的 設計相符 — — 高度 點綴 的 字型 可能 看起來 奇怪 反對 一 種 超簡單 的 設計 。 使用加黑字型 和 簡單地 和 高效的單詞 來 使 最終 產品 具 有 一致 性 ， 可以在視覺化方式 和 文字上 作些 努力 。

　　考慮 一個 簡單 無 襯線 (sans serif)型別 族 有 很多 變化 和 權重 的 主 版式 的 使用 平面 設計 的 站點 。 新增 一些別緻的 觸點 ， 一個 新奇的 字型 來作為 設計 的 元素 ， 但 小心 別 使用過火 的 專業 字樣 。

　　專注於顏色

　　顏色 是 平面 設計 的 很 大 一部分 。不同於其他網站 設計，扁平設計中 顏色 調色盤 往往 是強調 很多 更亮 、 更 鮮豔 。

　　扁平設計中的顏色 調色盤 的 專案 通常 包含 更多的 色調 。 雖然 大多數 顏色 調色盤 最 專注 於 兩 三種 顏色 ， 但扁平 設計 中調色盤 通常 使用 六 至 八個 顏色 。

　　簡約的方法

　　扁平化的設計本質上是簡單的，它與整體簡約的設計方法相得益彰。

　　在網站的整體設計中避免太多花哨的東西。簡單的顏色與文字就已足夠。如果你要新增視覺效果，選擇簡單的影像。

　　有些零售網站，比如Svpply(見上)，使用效果很棒的扁平化設計，這是將一些條目放在一個簡單的背景上做到的。（提醒一下這些圖片確實具有一些自然深度，但仍然和諧融入到整個扁平化的設計中）

　　“接近”扁平化的設計

　　一個更多設計師都傾向於贊同的風格，就是“接近”扁平化的設計。

　　在“接近”扁平化的設計中，使用了扁平化風格的基本主題，但是一些特效被新增到設計方案中。例如按鈕，可能包含輕微的梯度或者陰影。設計師通常挑選一種特效並專門用在一種“接近”扁平化的專案中。

　　這個風格，相對於一些扁平化設計背後的、無特效思想中的剛性，容納了更多一些的彈性。

　　設計師們因為附加的深度和紋理而喜歡它。使用者們喜歡它是因為，這個風格沒有那麼生硬，並且有利於引導適當的互動。另一方面，設計師們不喜歡它是因為，它以一種方式結合了兩種風格，而這種方式可能缺少了對於一個真正風格的定義。

　　關於扁平化設計的更多資訊

　　Designmodo已經成為扁平化設計趨勢的討論中的領導者。閱讀我們之前的文章，瞭解關於扁平化設計的更多資訊。

• Flat Design: Can you Benefit from the Trend? （扁平化設計：你能從這個趨勢中獲益嗎？）
• Flat Web Design: Beautiful Examples of Websites （扁平化Web設計：網站的美麗例項）
• Beautiful Examples of Flat Icon Design （扁平化Icon設計的美麗例項）
• Making it Work: Flat Design and Color Trends （讓它生效：扁平化設計及色彩趨勢）

　　英文原文：Principles of Flat Design