PC端后臺系統的視覺設計慎用扁平化風格

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

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

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

一、問題背景

之前大四實習的時候，有幸參與了某國企大型系統上線后的用戶體驗調研，以下簡稱為“系統”。

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

在收集和分析用戶體驗的問卷數據中發現：有部分用戶表示：“原來的系統雖然很丑，但是實際操作起來卻很爽”。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最后：“PC端后臺系統”幾乎是每個企業或者產品所涉及的，希望本文可以對PC端后臺的視覺設計有所參考或幫助。

本文為@運營喵原創，運營喵專欄作者。