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

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

Windows Phone 8和Apple iOS 7界面。

　　什么情況?

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

　　信息負(fù)荷過(guò)度

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

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

　　簡(jiǎn)約是金

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

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

　　內(nèi)容為王

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

　　技術(shù)精通

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

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

　　技術(shù)的影響

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

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

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

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

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

簡(jiǎn)單但有點(diǎn)到位：OnSite

理想實(shí)踐

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

　　開(kāi)始之前

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

過(guò)程

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

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

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

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

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

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

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

　　網(wǎng)格

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

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

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

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

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

　　色彩

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

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

設(shè)置調(diào)色板時(shí)，您可以在各種顏色值上測(cè)試所選的色調(diào)，并確保它們?cè)诿髁梁蜕钌卸寄苷ｏ@示。

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

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

　　文字

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

serif無(wú)疑是一種解決方案，但serif字體可以讓人感覺(jué)更簡(jiǎn)潔。

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

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

請(qǐng)注意，該字體易于閱讀和閱讀。雖然這聽(tīng)起來(lái)有點(diǎn)不合理，但您對(duì)所選字體的依賴性非常強(qiáng)，因此請(qǐng)確保它可以輕松識(shí)別任何尺寸。

Siteleaf上新鮮，易讀的文字。

　　交互

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

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

傳統(tǒng)的位置放置方法也可以工作。例如，您的后箭頭由一個(gè)薄的V形表示，可以放在左上角，因?yàn)橛脩敉ǔ?huì)到這個(gè)位置找到后退按鈕。

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

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

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

　　結(jié)尾

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

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