起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)PC端后臺(tái)系統(tǒng)的視覺(jué)設(shè)計(jì)慎用扁平化風(fēng)格
扁平化設(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)上線后的用戶體驗(yàn)調(diào)研，以下簡(jiǎn)稱為“系統(tǒng)”。
系統(tǒng)的迭代相比于上一版本，除了功能上的優(yōu)化外，在視覺(jué)上也做出了非常大的改動(dòng)；之所以說(shuō)是非常大，是因?yàn)閮?yōu)化后的視覺(jué)規(guī)范完全扁平化（類似于下圖），并且為此投入巨大的精力，不僅輸出了全新的UI組件，還為此單獨(dú)開(kāi)發(fā)了一整套的前端組件。
在收集和分析用戶體驗(yàn)的問(wèn)卷數(shù)據(jù)中發(fā)現(xiàn)：有部分用戶表示：“原來(lái)的系統(tǒng)雖然很丑，但是實(shí)際操作起來(lái)卻很爽”。
當(dāng)時(shí)我只是單純的認(rèn)為：“新系統(tǒng)存在一些功能上的bug，或者用戶習(xí)慣”等因素的影響，用戶才對(duì)老系統(tǒng)的操作有一絲留戀。
事情過(guò)去許久，直到后來(lái)有一天，我遇到一款丑丑的軟件“CINEMA 4D”，我才似乎理解當(dāng)初用戶對(duì)丑丑的老系統(tǒng)的一絲留戀。
這款來(lái)自德國(guó)的3D軟件，圖標(biāo)五顏六色，對(duì)比色的運(yùn)用使人很難感受到統(tǒng)一帶來(lái)的舒適，加上內(nèi)陰影的使用，軟件本身充滿著厚重的德國(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é)依賴更多。也就是：用戶在使用后臺(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ì)增加用戶的學(xué)習(xí)成本。
- 輕微漸變。漸變可以豐富頁(yè)面細(xì)節(jié)，漸變還可以營(yíng)造自然中的光線照射感。
- 卡片陰影?？ㄆ幱霸谝苿?dòng)端的使用非常廣泛，pc端的卡片陰影同樣可以營(yíng)造較好的立體感。
- 不用“無(wú)豎線”的表格樣式，表格是后臺(tái)系統(tǒng)出現(xiàn)頻率非常高的一個(gè)組件，有的表格樣式為了整體看上去更加干凈簡(jiǎn)約，表格沒(méi)有豎線只有橫線，但是在實(shí)際中不如橫豎線都有的表格好。
- 一般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)的好用程度更多的依賴功能完整、交互流暢等因素，與視覺(jué)設(shè)計(jì)關(guān)系不大”，確實(shí)是這樣的。本人第一次發(fā)文，想用盡可能的文字專門說(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è)不可忽略的用戶體驗(yàn)因素，多數(shù)的后臺(tái)系統(tǒng)都可以通過(guò)公司行政命令強(qiáng)制用戶去使用，而用戶也不得不使用，所以過(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é)議。
對(duì)于b端產(chǎn)品來(lái)說(shuō)，好用和不好用，根本上取決于前期產(chǎn)品的功能梳理和交互流程優(yōu)化，視覺(jué)是一個(gè)錦上添花的事。
首先扁平化的優(yōu)勢(shì)是，可以更大程度減輕頁(yè)面元素對(duì)用戶的干擾，讓用戶能更專注內(nèi)容本身。
扁平化降低用戶體驗(yàn)，實(shí)在沒(méi)明白這個(gè)理論的支撐點(diǎn)是什么，單純看它不爽？扁平化缺乏直觀實(shí)在不敢茍同，扁平化一個(gè)最明顯的特點(diǎn)就是信息傳達(dá)直觀簡(jiǎn)潔，很費(fèi)解。再一個(gè)，傳達(dá)情感不豐富，？？？作為一個(gè)后臺(tái)，您需要傳達(dá)什么樣的情感呢？溫柔？友愛(ài)？b端產(chǎn)品的最深層需求是解決效率問(wèn)題，結(jié)果為導(dǎo)向，不是來(lái)跟你談感情的，你說(shuō)效率，安全，統(tǒng)一，簡(jiǎn)潔我都能理解。
你好，看了你的一些分析和思考，我覺(jué)得還是有道理的。每個(gè)階段的風(fēng)格過(guò)度確實(shí)不能跨度太大。
我也看了下面的評(píng)論，他們的判斷太片面了。好用》交互》視覺(jué)，每個(gè)都有它應(yīng)該發(fā)揮的價(jià)值意義，只是再形成產(chǎn)品的時(shí)候?qū)λ龀龅耐度氤潭取?br /> 還有一點(diǎn)專業(yè)軟件本身改版的難度很大，當(dāng)用戶認(rèn)知了它，使用習(xí)慣了。如果盲目改版成扁平化或者其他風(fēng)格都不行。得考慮老用戶的認(rèn)知和習(xí)慣。
一種觀點(diǎn)不能滿足和服務(wù)所有問(wèn)題，具體問(wèn)題得具體分析，使用合適的方法來(lái)解決。
作者思考的文章都是有價(jià)值的，可以對(duì)周遭有價(jià)值，或者對(duì)自己成長(zhǎng)有價(jià)值。
那些覺(jué)得自己能力很強(qiáng)的讀者更應(yīng)該有寬廣的胸懷。如果是好心的高手會(huì)給道出問(wèn)題本質(zhì)和指引的方向。
我們嘗試著改變用戶 引導(dǎo)用戶 回過(guò)頭來(lái) 發(fā)現(xiàn)我們被用戶牽著鼻子走
這邊文章寫(xiě)到了我的痛處
細(xì)看文章，是有一些道理的，系統(tǒng)設(shè)計(jì)太過(guò)于扁平化，是有一些局限的，尤其在電腦端操作較復(fù)雜類的設(shè)計(jì)中，但是實(shí)際中，后臺(tái)一般都是內(nèi)部使用，用戶就那么一些，很少去在視覺(jué)上花功夫，較多的是參考一些知名的設(shè)計(jì)規(guī)范組件來(lái)做。對(duì)于那些用戶量大、或者對(duì)外銷售類的系統(tǒng)產(chǎn)品，可以有所參考吧
這是一篇低水平文章
沒(méi)有實(shí)際參考意義，扁平化只是一種風(fēng)格，后臺(tái)管理的目的是輸出可視化數(shù)據(jù)操作，是易用性
筆者想表達(dá)視覺(jué)風(fēng)格對(duì)于產(chǎn)品體驗(yàn)的作用和影響嗎？如果是，請(qǐng)繼續(xù)閱讀~
1、任何產(chǎn)品的體驗(yàn)度（如常說(shuō)的用的爽不爽、好不好用等）必然在一定程度上受視覺(jué)風(fēng)格的影響，但體驗(yàn)應(yīng)聚焦于產(chǎn)品核心（如內(nèi)容類產(chǎn)品聚焦于內(nèi)容，工具類產(chǎn)品聚焦于任務(wù)等），過(guò)度放大視覺(jué)風(fēng)格對(duì)體驗(yàn)的作用是不可取的（但是本人推崇應(yīng)在產(chǎn)品的表現(xiàn)層嚴(yán)格要求，提升品質(zhì)）。
2、筆者對(duì)扁平化在視覺(jué)設(shè)計(jì)中的應(yīng)用，總結(jié)的需要注意的這些內(nèi)容，雖然表達(dá)的過(guò)于絕對(duì)，但是也必須引起UI設(shè)計(jì)師足夠的重視，尤其是經(jīng)驗(yàn)不足的設(shè)計(jì)師。
想表達(dá)的只是：”PC端后臺(tái)系統(tǒng)“在使用扁平化風(fēng)格設(shè)計(jì)的時(shí)候應(yīng)該注意的事項(xiàng)，而這些在目前的系統(tǒng)設(shè)計(jì)很常見(jiàn)。 太多人批評(píng)說(shuō)我的文章太放大視覺(jué)設(shè)計(jì)對(duì)體驗(yàn)的作用了，我已經(jīng)在文章末尾做了補(bǔ)充 ??
不知所云，就拋出一個(gè)論點(diǎn)，沒(méi)有論據(jù)。
謝謝前面幾位前輩指出的問(wèn)題，讓我發(fā)現(xiàn)文章中的問(wèn)題。功能上的完整和交互上流暢確實(shí)是大于視覺(jué)因素的，這個(gè)有過(guò)實(shí)際上線產(chǎn)品經(jīng)驗(yàn)的人都知道。本文闡述的更像是馬斯諾需求上的較高層次的需求，針對(duì)于后臺(tái)系統(tǒng)的視覺(jué)設(shè)計(jì)上的建議。
另外，目前多數(shù)的后臺(tái)系統(tǒng)都可以通過(guò)公司行政命令強(qiáng)制用戶去使用，而用戶也不得不使用，所以過(guò)多的視覺(jué)優(yōu)化其實(shí)是一種成本溢出，不過(guò)慢慢開(kāi)始關(guān)注后臺(tái)系統(tǒng)的視覺(jué)設(shè)計(jì)本身就是一件好事，我只是針對(duì)之前的工作經(jīng)驗(yàn)，覺(jué)得后臺(tái)系統(tǒng)在扁平化的基礎(chǔ)上要增加一些視覺(jué)上的對(duì)比，這個(gè)觀點(diǎn)是有人感同身受的。
第一次發(fā)文，謝謝大家指出問(wèn)題，之后會(huì)把功能和交互的重要性補(bǔ)充進(jìn)文章，以免誤導(dǎo)他人。
哇……從您的文章中都能看得出來(lái)你對(duì)你們視覺(jué)組的不滿啊~~我們的后臺(tái)就全扁平化，我們客戶可喜歡了~前端后臺(tái)也很愛(ài)啊~是不是你們關(guān)系沒(méi)搞好?。?/p>
手機(jī)自帶系統(tǒng)鍵盤原本是沒(méi)有按鍵形狀的，只有一個(gè)個(gè)字母，開(kāi)始看著挺舒服，用起來(lái)卻很不便，經(jīng)常誤操作，后來(lái)改回到了按鍵樣式，體驗(yàn)才上升一大截。對(duì)于經(jīng)常操作的界面，有不同層次對(duì)比度的真的要比沒(méi)有的使用起來(lái)方便舒服
我一直覺(jué)得好不好用跟視覺(jué)設(shè)計(jì)關(guān)系不大。
講真的我也是這個(gè)覺(jué)得的。后臺(tái)注重的是實(shí)用和效率。好的視覺(jué)呈現(xiàn)，加上簡(jiǎn)單清晰的流程，便捷的操作就很不錯(cuò)了。全部扁平只要用好了設(shè)計(jì)的對(duì)比、重復(fù)、親密、對(duì)齊的原則一樣的可以達(dá)到預(yù)期的效果
畢竟頁(yè)面復(fù)原靠前端，功能實(shí)現(xiàn)靠后臺(tái)，好不好用還真不是視覺(jué)說(shuō)的算的~