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

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

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

一、問(wèn)題背景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

例如我們可以通過(guò)以下方式來(lái)增強(qiáng)界面的視覺(jué)對(duì)比度：

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

以上只是我總結(jié)的一部分方法，其實(shí)可以按照我上面所說(shuō)的設(shè)計(jì)核心理論，將其運(yùn)用到實(shí)際的PC端后臺(tái)的視覺(jué)設(shè)計(jì)中。

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

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

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

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

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

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

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