經(jīng)過一年的扁平化，學(xué)生們能清楚地理解嗎？今天我分享一篇關(guān)于將流行原因扁平化對界面設(shè)計的影響的文章，以及一些值得閱讀的設(shè)計技巧和注意事項。

在過去幾年中，我們目睹了從軟件和應(yīng)用程序界面設(shè)計從3D和準(zhǔn)實現(xiàn)到扁平化和極簡化的快速過渡。雖然這種趨勢現(xiàn)在無處不在，但我們可能希望花點時間思考今天的結(jié)果如何形成以及它如何影響整體界面設(shè)計。另外，我將分享有關(guān)設(shè)計平面界面的一些提示和注意事項。

Windows Phone 8和Apple iOS 7界面。

　　什么情況?

你怎么突然從大愛情材料，斜面和投射陰影變成平面顏色和簡單的字體？這種變化受到許多因素的推動。以下是一些更重要的內(nèi)容。

　　信息負(fù)荷過度

在今天無窮無盡的信息文化中，我們不斷地接觸各種信息，一些重要信息，一些不相關(guān)信息。對我們來說，不斷評估，過濾和創(chuàng)建各種內(nèi)容顯然非常麻煩。此外，我們攝取的許多內(nèi)容已經(jīng)轉(zhuǎn)移到小屏幕設(shè)備上，這進一步加劇了這種過載的感覺。因此，人們很容易被過多的信息所困擾，減少用戶界面（UI）中的元素可以帶來一點視覺上的平靜。

不再存在障礙：Geckoboard的可視化工具使您可以輕松地一目了然地解讀關(guān)鍵數(shù)據(jù)。

　　簡約是金

與上述趨勢類似，許多顛覆性Web應(yīng)用程序和服務(wù)提供了功能強大的工具。雖然傳統(tǒng)的軟件開發(fā)商家更傾向于為產(chǎn)品添加許多功能作為高價的借口，但集中式微應(yīng)用的趨勢更傾向于使用簡單的替代方案來實現(xiàn)各種功能組合。應(yīng)用程序越簡單，界面越簡單。

極簡主義：Oak's Blue天氣應(yīng)用程序。

　　內(nèi)容為王

每當(dāng)新設(shè)備和技術(shù)進入市場時，它們的功能和推動開發(fā)的交互水平將始終讓我們著迷。在界面引起混亂之后，我們一般會把注意力集中在內(nèi)容上。無論是文本，音頻還是視頻，媒體內(nèi)容的攝取可能是我們使用設(shè)備時的主要活動，在這種情況下，我們需要確保界面不會影響我們的攝入過程。

　　技術(shù)精通

隨著智能手機和平板電腦迅速傳播到各種用戶，該行業(yè)對其控制風(fēng)格的明顯擔(dān)憂正在消退。雖然我們曾經(jīng)擔(dān)心用戶會很難看到不顯眼的按鈕，但我們現(xiàn)在更愿意探索更微妙的互動內(nèi)容。 Windows 8和Chrome for Android甚至支持使用觸摸命令點亮屏幕，而無需視覺提示。

Fitbit的控制面板界面視覺上明亮，大膽且易于使用。

　　技術(shù)的影響

大多數(shù)軟件將受到您運行的平臺的限制。屏幕尺寸和像素密度是硬件限制。較小的界面極大地限制了設(shè)計調(diào)色板的范圍，這意味著界面上的每個元素都有自己的表現(xiàn)力。文本大小和字體大小將在很大程度上決定平面設(shè)計的美觀性和可用性。

如果您的目標(biāo)設(shè)備無法與此級別顯示任何細(xì)微差別，那么您很幸運。隨著移動設(shè)備屏幕尺寸和像素密度的不斷增加，更薄更小的設(shè)備將來會實現(xiàn)更高的分辨率。當(dāng)然，對@ font-face的支持極大地增強了極簡化文本核心設(shè)計的吸引力。

使用Wallmob進行實時銷售監(jiān)控：使用瀏覽器設(shè)備記錄所有銷售數(shù)據(jù)。

　　響應(yīng)式設(shè)計

隨著各種尺寸的網(wǎng)絡(luò)設(shè)備的普及，UI已經(jīng)趨勢趨勢并且變得更加流暢，并且相應(yīng)地，它是響應(yīng)式設(shè)計趨勢。雖然響應(yīng)式設(shè)計不需要特殊的美學(xué)，但可以說平面UI比其他風(fēng)格更容易協(xié)助響應(yīng)式設(shè)計的美學(xué)。簡化設(shè)計的另一個優(yōu)點是能夠減輕頁面重量并減少加載時間。

簡單但有點到位：OnSite

理想實踐

好的，理論說這個。我們來看看實際考慮因素。創(chuàng)建有效和簡化的設(shè)計非常困難。在對一些常規(guī)UI元素（投射陰影，斜面，材質(zhì)等）進行分層時，您會看到這些元素的重要性。以下提示雖然很常見，但對于展平UI特別有用。

　　開始之前

任何項目都是一樣的，第一步是確保您選擇的樣式合理。在開始平面設(shè)計之前，請確保您的設(shè)計符合目標(biāo)用戶的感知和目標(biāo)平臺，設(shè)備和應(yīng)用程序類型。如果它不適合您的項目，跟上趨勢是沒有意義的。

過程

無論您想使用哪種樣式，遵循該過程都非常重要。這里有一些技巧可以幫助您實現(xiàn)極簡主義效果。

1.在設(shè)計簡化的界面時，我通常會從PC出現(xiàn)之前的那個時代尋找靈感。當(dāng)時的設(shè)計師和藝術(shù)家經(jīng)常需要做“多快和省錢”。借此機會重溫過去的許多最佳設(shè)計，如JosefMüller-Brockmann和Wim Crouwel。此外，我還將介紹極簡主義畫家，如Ellsworth Kelly，Mies van der Rohe等建筑師以及Dieter Rams等工業(yè)設(shè)計師。

暫時離開工作也很有幫助。扁平化和簡化設(shè)計的核心在于細(xì)微差別。因此，在短暫休息之后重新開始工作有時比僅僅想出來更有效。

3.比較不同的版本也很有用。在輸入線上來回轉(zhuǎn)動接下來的5個像素20分鐘后，我將保留接下來的兩個不同版本進行比較，以便我可以立即看到它。

4.由于對象的相對大小非常關(guān)鍵，因此您需要盡早開始在不同類型的設(shè)備上設(shè)計設(shè)計概念，以確定它是否合適。

5.工作時，經(jīng)常會問自己：“我真的需要這個嗎？”人們總是很容易回憶起他們喜歡什么，但我們也必須經(jīng)常找出要削減或簡化的內(nèi)容。拋棄你用心做過的事情并不容易，但編輯也是必須的。

Global Closet：由國家地理教育研討會創(chuàng)建的互動游戲。

　　網(wǎng)格

網(wǎng)格在界面設(shè)計中起著非常重要的作用，也不例外。當(dāng)您持有一組受限制的視覺元素并嘗試確定其順序并使其更直觀時，網(wǎng)格可以提供很大的幫助。

網(wǎng)格確定的不僅僅是視覺順序。您還可以使用它來定義內(nèi)容和功能組。有時對一組對象進行分組不一定需要行或框。對它和空間的簡單調(diào)整通常可以幫助用戶理解界面的結(jié)構(gòu)。

您還可以嘗試使用具有一定重要性的元素來打破網(wǎng)格，以吸引用戶的注意力。

嘗試使用密度更高的網(wǎng)格。當(dāng)您大大簡化視覺調(diào)色板時，您可能會發(fā)現(xiàn)您的設(shè)計可以支持更復(fù)雜的結(jié)構(gòu)，而不會顯得凌亂。您還可以嘗試僅通過位置調(diào)整傳達哪些附加消息。

由app School Rossul Design開發(fā)的iPad應(yīng)用程序。

　　色彩

毫無疑問，色彩是視覺設(shè)計的關(guān)鍵組成部分。對于簡化的接口，意義更為重要。

考慮更廣泛的調(diào)色板。就個人而言，我認(rèn)為較窄的調(diào)色板通常會創(chuàng)建一個功能更強大的界面。創(chuàng)造炫目的色彩很容易。但是通過這種方法，您可以大大擴展選擇范圍;并且，考慮到要設(shè)計的少量元素，擴展調(diào)色板可以給你一種良好的感覺。

設(shè)置調(diào)色板時，您可以在各種顏色值上測試所選的色調(diào)，并確保它們在明亮和深色中都能正常顯示。

建議分別測試同一系統(tǒng)的色彩匹配和鮮明對比度。早期的調(diào)色板實驗將確保您能夠掌握細(xì)微和強烈對比元素所需的所有色彩匹配范圍。

TriplAgent的視覺設(shè)計采用了令人驚嘆的配色方案。

　　文字

在平面內(nèi)容驅(qū)動器網(wǎng)站上，文本是主角。

serif無疑是一種解決方案，但serif字體可以讓人感覺更簡潔。

您可以找到具有大量厚度和樣式的字體類型。雖然不一定包括所有內(nèi)容，但更廣泛的選擇范圍有助于更清晰地定義層次結(jié)構(gòu)。您可能還會發(fā)現(xiàn)在特定環(huán)境中某種厚度更好。

不要害怕使用大小和粗細(xì)的字體大小來構(gòu)建視覺順序。嘗試使用超大，超精細(xì)的標(biāo)題字體和中等大小的機身。

請注意，該字體易于閱讀和閱讀。雖然這聽起來有點不合理，但您對所選字體的依賴性非常強，因此請確保它可以輕松識別任何尺寸。

Siteleaf上新鮮，易讀的文字。

　　交互

在平面UI中，顯示哪些元素可以交互是學(xué)到的東西。以下是我使用的一些方法。

對比度如果布局內(nèi)容主要是白色，則可以向交互式元素添加其他顏色。如果您的設(shè)計是基于文本的，則可以使用簡單的圖標(biāo)來表示交互。如果標(biāo)題很大并且都是小寫字母，則鏈接部分可以更小并使用大寫字母。你懂。

傳統(tǒng)的位置放置方法也可以工作。例如，您的后箭頭由一個薄的V形表示，可以放在左上角，因為用戶通常會到這個位置找到后退按鈕。

隨著頁面上疊加內(nèi)容的增加，我們無法使所有交互元素看起來像按鈕。界面應(yīng)盡可能直觀。但是，如果交互過程復(fù)雜或非法，則應(yīng)提供方便的錯誤恢復(fù)方法。

下拉菜單，模擬窗口，彈出窗口和其他分層元件對于平面設(shè)計來說是麻煩的。您可以通過鮮明的對比，邊框或陰影區(qū)分不同級別的交互。

所呈現(xiàn)的設(shè)計元素布局簡單，對比度極佳：Taasky。

　　結(jié)尾

在設(shè)計領(lǐng)域沒有恒定的規(guī)范。令人興奮的是看到那些熱衷于投資非常簡化的用戶界面的設(shè)計師。但探索平面設(shè)計是否意味著從不使用漸變和陰影？當(dāng)然不是。事實上，我最近看到的一些有趣的作品以巧妙的方式展示了內(nèi)容，另一方面，交互是直觀且易于理解的，從而實現(xiàn)了平坦和直接的平衡。

在這個連通性，信息豐富性和功能豐富的數(shù)字時代，簡單設(shè)計的復(fù)興令人震驚。這自然不是一個包羅萬象的解決方案（沒有風(fēng)格可以做任何事情），但經(jīng)過深思熟慮和適當(dāng)?shù)膽?yīng)用，它可以用于舒適的數(shù)字體驗。