扁平化設(shè)計的流行趨勢“勢不可擋”，越來越多的后臺系統(tǒng)也開始使用這種討人喜歡的設(shè)計風(fēng)格；但是扁平化設(shè)計在PC端后臺系統(tǒng)的設(shè)計上卻存在著一些缺陷和不可忽視的問題。

扁平化設(shè)計風(fēng)格是我入行時就接觸的風(fēng)格，并且我對它非常喜愛。這種設(shè)計風(fēng)格讓人的視覺非常舒服，我曾一度認為“至簡”就是世間萬物發(fā)展的趨勢。

而如今各種設(shè)計風(fēng)格，漸變色設(shè)計、2.5D設(shè)計、流體漸變設(shè)計，孟菲斯風(fēng)格等，在移動端的設(shè)計中流行起來。這些設(shè)計風(fēng)格的流行，很大程度是為了彌補扁平化在一定程度上的單調(diào)。

一、問題背景

之前大四實習(xí)的時候，有幸參與了某國企大型系統(tǒng)上線后的用戶體驗調(diào)研，以下簡稱為“系統(tǒng)”。

系統(tǒng)的迭代相比于上一版本，除了功能上的優(yōu)化外，在視覺上也做出了非常大的改動；之所以說是非常大，是因為優(yōu)化后的視覺規(guī)范完全扁平化（類似于下圖），并且為此投入巨大的精力，不僅輸出了全新的UI組件，還為此單獨開發(fā)了一整套的前端組件。

在收集和分析用戶體驗的問卷數(shù)據(jù)中發(fā)現(xiàn)：有部分用戶表示：“原來的系統(tǒng)雖然很丑，但是實際操作起來卻很爽”。

當(dāng)時我只是單純的認為：“新系統(tǒng)存在一些功能上的bug，或者用戶習(xí)慣”等因素的影響，用戶才對老系統(tǒng)的操作有一絲留戀。

事情過去許久，直到后來有一天，我遇到一款丑丑的軟件“CINEMA 4D”，我才似乎理解當(dāng)初用戶對丑丑的老系統(tǒng)的一絲留戀。

這款來自德國的3D軟件，圖標五顏六色，對比色的運用使人很難感受到統(tǒng)一帶來的舒適，加上內(nèi)陰影的使用，軟件本身充滿著厚重的德國工業(yè)風(fēng)，但這款設(shè)計風(fēng)格似乎從過去穿越而來軟件，卻在實際的操作上有著非常好的體驗（除了我，還有身邊同事也這么覺得）。

或許是對比色帶來的視覺突出、又或是內(nèi)陰影帶來的按鈕的真實感、又或是大家對于扁平化風(fēng)格的視覺疲勞？

但是這款軟件真的很“好用”。

于是我開始收集和觀察各大操作系統(tǒng)，發(fā)現(xiàn)即使Photoshop CC2018版本相比于之前的版本已經(jīng)非常扁平化，但是在操作界面，具體的按鈕和邊框依然保持著偏擬物化的感覺。

另外，大家可以仔細觀察一下Mac os系統(tǒng)的視覺細節(jié)，無論從圖標還是到具體的系統(tǒng)界面，完全扁平化是絕對不存在的。

Adobe和蘋果這樣的公司，在視覺風(fēng)格的探索上是極為認真和客觀的，它們的系統(tǒng)界面也沒有完全扁平化。

所以個人認為：之前的項目中將老系統(tǒng)視覺直接改為完全扁平化的風(fēng)格，設(shè)計迭代太過于用力，或者可以說是一種錯誤的決定。原因就是只考慮到了扁平化設(shè)計的種種優(yōu)點，而忽視了其缺點所在。

二、完全扁平化不適用于PC端的后臺系統(tǒng)設(shè)計

其實可以對比“移動端產(chǎn)品”和“PC端后臺系統(tǒng)”的實際使用場景，PC端后臺系統(tǒng)的操作對視覺依賴更多。也就是：用戶在使用后臺操作系統(tǒng)的時候是長時間持續(xù)性的，在使用中，視覺的疲勞會很快降臨，“視覺扁平”所帶來的缺點顯而易見，所以強烈的視覺沖擊更加符合之一使用場景。

另外扁平化風(fēng)格本身有很多優(yōu)點，例如更加干凈和簡約，但是扁平化本身卻有著一些不可忽視的缺點。

三、后臺系統(tǒng)的扁平化設(shè)計應(yīng)該注意

扁平化本身更加干凈和簡約，但扁平化本身的視覺對比不夠強烈，在扁平化的基礎(chǔ)上，進行視覺上的優(yōu)化，才是后臺系統(tǒng)UI設(shè)計正確選擇。我們可以借鑒過去系統(tǒng)設(shè)計的部分元素，例如在扁平化的基礎(chǔ)上增加視覺的對比度和擬物感。

PC端后臺系統(tǒng)的視覺設(shè)計核心：扁平化讓系統(tǒng)更加簡潔，整體視覺看上去很舒服，但是在扁平化設(shè)計的同時，一定要增強視覺上的對比度。

例如我們可以通過以下方式來增強界面的視覺對比度：

• 增強按鈕的視覺重量?？梢酝ㄟ^漸變，按鈕外陰影等樣式增強按鈕的立體感。
• 適量增加圖標的擬物化，豐富情感。圖標過于簡化的同時，還會增加用戶的學(xué)習(xí)成本。
• 輕微漸變。漸變可以豐富頁面細節(jié)，漸變還可以營造自然中的光線照射感。
• 卡片陰影。卡片陰影在移動端的使用非常廣泛，pc端的卡片陰影同樣可以營造較好的立體感。
• 不用“無豎線”的表格樣式，表格是后臺系統(tǒng)出現(xiàn)頻率非常高的一個組件，有的表格樣式為了整體看上去更加干凈簡約，表格沒有豎線只有橫線，但是在實際中不如橫豎線都有的表格好。
• 一般UI設(shè)計中，除了運營banner中采用對比色，來突出模塊，很少用到對比色。在系統(tǒng)設(shè)計中，運用對比色搭配，雖然損失整體頁面的美感，但是強烈的對比，在實際的操作中將起到好的作用。
• 注意避免大間距，和較大的文字間距。不同于其他頁面的設(shè)計，系統(tǒng)設(shè)計的界面更加注重實際的操作，比如很重要的一項就是：“在有限的空間中，可以獲取更多的內(nèi)容信息”。

以上只是我總結(jié)的一部分方法，其實可以按照我上面所說的設(shè)計核心理論，將其運用到實際的PC端后臺的視覺設(shè)計中。

最后：“PC端后臺系統(tǒng)”幾乎是每個企業(yè)或者產(chǎn)品所涉及的，希望本文可以對PC端后臺的視覺設(shè)計有所參考或幫助。

內(nèi)容補充（2018.10.25）

有太多的留言說到“后臺系統(tǒng)的好用程度更多的依賴功能完整、交互流暢等因素，與視覺設(shè)計關(guān)系不大”，確實是這樣的。本人第一次發(fā)文，想用盡可能的文字專門說明視覺設(shè)計的觀點，而忽略了前提的重要性，所以一定要做下補充，以免文章誤導(dǎo)他人。

視覺設(shè)計在系統(tǒng)設(shè)計中，更像是馬斯諾需求上的較高層次的需求，而本文只是針對于后臺系統(tǒng)的視覺設(shè)計上的建議，實際功能和交互的重要性要遠遠大于視覺設(shè)計本身。但是視覺本身是一個不可忽略的用戶體驗因素，多數(shù)的后臺系統(tǒng)都可以通過公司行政命令強制用戶去使用，而用戶也不得不使用，所以過多的視覺優(yōu)化其實是一種成本溢出。

不過慢慢開始關(guān)注后臺系統(tǒng)的視覺設(shè)計本身就是一件好事，是日趨成熟化的系統(tǒng)設(shè)計的一種趨勢。我只是針對之前的工作經(jīng)驗，覺得后臺系統(tǒng)在扁平化的基礎(chǔ)上應(yīng)該注意的因素，歡迎大家交流并且指出問題。

本文由 @盧瑟 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。