1.三維圖形使用不當

雖然三維圖形帶來的立體感很強，但用在可視化設計中，很容易出現問題。

一方面，三維圖形具有X、Y和Z坐標，容易造成圖表間的遮擋關系，遮擋會掩蓋一部分的數據，讓精準比較數據信息變得困難。

另外，透視使對象看起來像是位于三維空間中，但在數據可視化中，它會造成錯誤的層次結構：前景圖形看起來很大，背景圖形很小，數據關系被不必要地扭曲。

 

設計要點：

三維圖形很有吸引力但可能會遮擋重要的數據信息，并扭曲數據間的比例關系；

如果沒有絕對需要盡可能使用二維圖形樣式。

 

2.數據太多

在設計中，很多人總想在一張圖表中盡可能多地展現內容，把各種數據信息聚合在一起。

這樣的想法本身沒什么錯誤，但重要的前提是要有清晰的認知，明確知道到底要展示哪些數據。

如果可視化中包含太多數據，信息的展現會變得不堪重負甚至難以理解，這樣的話包含的數據再多也沒有任何意義。

 

設計要點：

避免數據可視化的信息過載，如果一張圖表中包含的信息過多，反而會讓用戶混亂；

靈活結合多種可視化方式，讓數據的展現變得更有效。

 

3.省略基線

一組數據往往各不相同，數據差值的大小也不確定。為了使可視化效果看著更舒服，有的設計師通過改變坐標軸比例來展示數據關系。

最常見的例子就是讓Y軸代表的數據不是從0開始，借此夸大數據之間的差異，讓數據的變化更加明顯。

 

設計要點：

圖表的美感再怎么重要，也要服務于精準的數據表現；

避免通過省略基線來故意夸大或縮小數據差異，造成用戶誤解。 

 

4.選擇錯誤的可視化方法

每個數據可視化方法都有自己的特點。例如餅圖適合用來比較一個整體中的不同部分，但不適合用來比較幾組不同的數據。

通過餅圖的比例劃分，雖然可以直觀地顯示三家企業的收益，但使用條形圖會讓這三家企業之間的差異更加明顯。

如果目的是為了顯示一段時間內的收入，那么折線圖會是比條形圖更好的選擇。

 

設計要點：

數據可視化方法并非一刀切；明確可視化傳達的變量及最終目的。

 

5.混淆關聯

數據可視化更高的價值在于探索和發現不同數據間的相關性，通過比較幾組不同的數據關系，找出其中的關聯性，從而得到一個更有根據的驗證結果。

顯示相關性最常用的方法是將幾組不同的數據疊加在同一個圖表上，但當疊加的數據數量過多時，圖表會變得難以識別。

另外一旦強行關聯幾種相似的數據，有可能造成結果的混亂。一個有意思的例子是冰激凌銷量的增加與暴力犯罪的激增有關，因為這兩者都是因為氣候變化造成的結果。

 

設計要點：

透過數據間的關聯性發現事物本質是有意義的，但要考慮數據間的關聯是否有依據、是否合理；

數據有相關性并不等于有因果關系。

 

6.放大有利數據

數據的增長或下降和時間是不可分割的。放大時間范圍是很多公司經營中投機取巧的方法。

比如只在圖表上向用戶展示業績增長的4-6月份(上圖)，這樣看起來公司業績增長幅度特別大，但如果將X軸的時間縮小到一整年(下圖)，才會發現公司真實的經營狀況，4-6月份的業績增長僅僅代表了公司業績持續下跌中的小幅上漲。

 

設計要點：

避免放大的可視化效果與數據整體不一致；

短時間內放大的數據表現可能會讓用戶對信息的判斷產生錯誤。

 

7.避開常見的視覺聯想

視覺元素影響用戶的心理，圖標、色彩和字體都具有影響觀者感知的作用。

下圖的可視化描述了美國各個地區宗教信徒占所有居民的百分比，但使用的顏色與地圖的設計元素(藍色的水、綠色的植被和棕色的土地)太過相似。

▲ 分析數據可視化很耗費精力。在看到這樣的圖表時，我們第一時間聯想到的應該是國家的地形情況，可能很難在這個熟悉的認知下去重新理解這個圖表代表的其他含義。

 

設計要點：

避免強迫用戶重新理解常見的視覺聯想，造成對數據的注意力分散。

 

8.過分糾結于數據可視化

數據可視化將難以表現的數字關系賦予了易于理解的形式。最理想的方式是可以通過可視化清晰、簡潔地傳達數據關系。

但是并不是所有的數據都需要使用可視化來表現，有時候一個簡單的數據搭配一個流行的顏色就足以說明問題。

 

設計要點：

數據可視化是一種交流工具。像其他所有工具一樣，有時它是合適的，有時可能另一種工具更適合。

 

為回饋一直以來關注和支持Clip設計夾的讀者，將免費贈送3本《寫給UI設計師看的數據可視化設計》書籍給大家，幫助大家更好地學習數據可視化設計。

參與方式：詳見原文。

 

原文地址：Clip設計夾（公眾號）

作者：Clippp

轉載請注明：學UI網》數據可視化設計常出現的錯誤，你一定要避免！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

兼顧“突出”與“融合”兩方面

進行配色時，要從兩方面考慮，既突出提升的方面又融合平穩方面。

例如，以自己最喜歡的顏色為中心完成了初稿，然后應該檢查一下，是否過于沉重模糊，或者是否過于喧鬧令人不安。如果過于沉靜，則下點功夫突出一下即可；如果過于喧鬧，則向著沉靜、融合的方向調整即可。

1.1 突出型配色1

使主角更鮮明

畫面整體顯得模糊時，要放棄幾個要點，明確主題。大力強調作為主角的部分，并刪去曖昧模糊的地方。主題明確后，不僅氣氛被提升，畫面也會顯得清爽踏實。

減少黑色的分量，提高純度

感覺配色過于沉重壓抑時，應該減少黑色，增加鮮艷的顏色，配色將瞬間明朗起來。色調沉重是由于混入過多黑色，減少黑色后自然會呈現出鮮艷的色彩。這是最有代表性的突出配色的方法，也是效果最顯著的方法。

烘托畫面的中心

明確畫面主角

當畫面的中心部分被提升后，才會使配色給人深刻印象。我們還可以強化明度對比，加強畫面中心部分明度，這樣的畫面會格外令人印象深刻。

A海報帶點夢幻的感覺，但是主角不夠清晰。而B海報提升了背景亮度，擴大與中心人物的明度對比度，從而能強調了主角。

加強中心部分的方法

提高顏色純度

強化明度對比

強化色相對比

給畫面添加亮點

我們很多小伙伴喜歡沉穩踏實的配色，這種配色方法雖然是好的，但是畫面的配色過于均一則平淡無奇。那怎么解決這個問題呢？其實我們可以在畫面中心設置小面積的亮點，給畫面增添品味和活力。

抑制背景色，凸顯亮點

要記住，亮點的面積越小給人的印象就越深刻。如果你想更加凸顯亮點，那就要抑制周邊的背景色。只有這樣，即使在平穩不顯眼的配色中，這個亮點一樣很顯眼。

A圖中整體色調沉穩，但是總覺得少了點什么。而B圖中鮮艷的紅色成為寧靜配色的亮點，給原本平淡的畫面注入了活力。

制造亮點的方法

弱化背景色，突出亮點

控制好背景色，即使純度不高的亮點也有很好的效果

給畫面加入鮮艷色彩

鮮艷的色彩盡顯活力

如果你想增加配色的歡快感，就應該加入純度高的顏色。

A產品整體是暗色調，高雅莊重，但是似乎有些欠缺。而B產品加上了小面積的鮮艷色彩，高雅不變，華麗有余。

加入鮮艷色，變得活力

增加畫面色彩面

添加色彩，畫面變得生動

當人們看到無彩色畫面時，總會感到有所欠缺。如果在無彩色畫面當中加入一些色彩，畫面頓時變得歡快活躍。

A海報是無彩色的，畫面過于單調；而B海報只是在A海報的基礎上增加了色彩面，畫面頓時變得歡快活躍，生動了許多。

增加色彩面，變得明快

減少黑色

調整畫面部分明亮度

很多小伙伴喜歡把畫面背景色設為暗色調，因為這樣有踏實感。這樣做畫面雖然高雅卻有失歡快，我們不妨試試將背景色調亮一個等級，最后你會發現畫面變得明朗愉悅了許多。

因為A畫面沉穩有余，但過于灰暗，缺乏歡快氣氛；將A背景色中的黑色調到零就得到如圖B背景色，調整之后的畫面能給人明快的印象。

減少黑色使畫面明亮

如何創造有踏實感的明亮？

如果你希望畫面變得明亮，又不想破壞原有的踏實感時，則可以保留10%的黑色。

分離配色

什么是分離配色？

大家都知道按照色相、明度次序配色稱為“漸進配色”；那與之相對的配色方式就是“分離配色”，獨立配置每個顏色。

A圖采用的是漸進式配色，按色相順序排列，給人安靜平穩之感，但有失緊湊，略顯無趣。而B圖采用的是分離式配色，使用與A圖中相同的色彩，只是簡單變換順序，突出各色的獨立性，沖破秩序感，給人以活潑的感覺。

打破顏色順序，隨機分離，使之獨立，釋放出動感

1.2 突出型配色2

用對比色達到突出效果

在色相圖在相對的為對比色，相鄰的為鄰近色。單用鄰近色配色，則畫面感覺平穩；加入對比色，則頗具緊湊感。

在色相環中的相對位置創造出各樣的色彩表情

挑選色相環中的相對兩色，則帶來歡快的節日型配色。若組合在色相環圖中呈正三角形的紅、黃、藍，則得到理性安定的畫面。通過顏色在色相環中的形狀，能創造出各式各樣的色彩表情。

黑白制造緊湊感

不難想像加入黑色會起提升效果，其實白色同樣能在輕松氛圍中制造緊湊感。

給畫面加入對比色

對比色是主色的必要補充

色相環中相對的色相成為對比色，也叫補色，甚至可以說，配色的基本就在于補色，配色完成于補充顏色的過程之中。加入補色使人心情舒暢，缺乏補色的畫面容易令人覺得不自然。

A圖是以同色系為中心的平穩配色；圖B加入對比色藍色后，畫面效果加強了些許。

加入對比色，使畫面生動突出

終極純粹三角型

平衡的三角型

紅、黃、藍在色相環上組成一個正三角形，被稱為三原色，是特殊的顏色。綠色、紫色等顏色都可以通過混合這3種顏色得來，但是無論怎樣混合其他顏色都無法得到三原色。隨著畢加索、蒙德里安等現代派畫家們追求終極的純粹色，三原色的組合得到了重視。

蒙德里安《紅、黃、藍的構成》

這幅作于1930年的《紅、黃、藍的構成》是蒙德里安幾何抽象風格的代表作。蒙德里安將色彩、形狀純粹化的結果，是否定紅、黃、藍三色以外的一切色彩。線條的方向也限定于水平或垂直，排斥斜線。

三角型的效果，掌握好平衡即可

十字型配色

強烈的緊湊感

將兩組對比配色交叉組合后，便得到十字型配色。醒目安定的同時，又具有緊湊感。在一組對比色產生的緊湊感上加一組，自然成為最強配色型。

梵高《軍人》

A畫面只用了一組紅綠對比色，看上去很有緊湊感，但是過于硬朗。在A的基礎上增加了一組藍橙對比色，帶來有力的安定感及緊湊感，畫面豐富了許多。

由于把兩組補色組成十字型，達到了完全的平衡。

黑色起突出作用

無色彩的黑色是最有力的搭配色

黑色是“無色”的特殊色，純度、色相、明度都為零。但是，加入黑色會突出原有的顏色，使畫面有力度。黑色與其他色彩組合時，是最有力的配角色。

海報A藍綠色均為冷色，綠色背景下，表現出輕快自然、明亮卻趨于平淡。海報B背景變為黑色后，綠色變得深邃而閃爍。這時，黑色本身難掩的光輝甚至會使人誤將其當成主角，但是不會喧賓奪主掩蓋主角色。

黑色無論與任何色彩搭配，都起強調提升作用。使強色更加強烈，使淺色更加突出，產生生動醒目的效果。

 

白色起強調作用

作為中立色的白色，不會破壞其他顏色

白色是所有色彩中最中立、最無個性的顏色，但是可以通過特定的使用方法，使畫面整體更突出。在不破壞其他色彩感覺的基礎上提升整體。

白色與任何顏色的反差都很大。人眼對最明亮的白色頗為敏感。即使是相當低的明度下，白色的效果也顯而易見。海報B加入白色，瞬間被突出。

白色有著意想不到的效果。配上過于強硬的顏色則使之緩和，配上淺色則使之被強調。保持淺色原本的感覺，突出整體效果。

1.3 融合型配色

使用三屬性達到融合效果

與突出型配色一樣，我們采用三屬性（色相、純度、明度）來緩和過于喧鬧、醒目的顏色。突出時要增強三屬性的對比，融合時則要減弱對比色的對立。

靠近色相

使用同系色，畫面統一和諧

色相差越大越活潑，反之，色相越靠近越穩定。色彩給人感覺過于突出喧鬧時，可以靠近色相，協調各種色彩，使畫面穩定下來。

B圖使用近似色配色，表現出平穩安詳的感覺。而A圖紅綠色相之間變化幅度過大，流于散漫，給人一種不安定的感覺。

色相被靠近后稱為鄰近色，進一步靠近則稱為同系色，越偏離對比色、接近同系色，就越有平穩踏實感。

統一明度

明度差破壞安定感

即使色相差很大，只要明度統一，畫面整體就會給人以安定的感覺。這是在不破壞色相平衡、維持原有氣氛的同時，得到安定感的巧妙方法。

A圖明度差較大，產生活潑感。而B圖縮減明度差至零后，畫面整體變得和諧，給人一種安定的感覺。

無論多么松散的配色，統一明度后都會呈現出整齊穩定的效果。零明度差營造出踏實穩定的感覺，因此最好盡量擴大色相差，力求維持色彩之間的跳躍感。

色調靠近

氣氛的統一

色調也稱“調子”，表示色彩的感覺、品位。因此，可以把同一色調的色群歸為具有同一類色彩感覺。組合同一色調的顏色，則相當于統一了畫面氣氛。

A畫面組合有所偏高的色調，會破壞畫面的統一，而B畫面將鮮艷的色調換為明灰色調，畫面感覺統一和諧了許多。

如果畫面松散，缺乏統一感，則需要統一色調。統一至相同或相近色調后，原本混亂的配色將變得緩和穩定。

群化方法

通過群化法收斂混亂，將三屬性共通化

將混亂的配色群化會得到踏實的效果。所謂群化，就是賦予色相、色調、明度等以共通性，制造出整齊劃一的組合。畫面松散時，將三屬性的一部分共通化，會得到統一感。

A圖的配色過于混亂，色彩紛繁的效果使畫面整體顯得混亂。B圖的配色明度、色相以及色調都比較相近，畫面整體顯得統一和諧。

所謂群化，指的就是分組、共通化。將前面講述的明度、色相、色調等綜合地共通化后，產生群化效果，畫面收斂、緩和。

雙色調配色

同一色相的明暗兩色

所謂“雙色調”，指從相同或相近色相中抽出兩種色調的組合。最有代表性的雙色調是同一色相的單色與明色的組合。制造色差，或是組合進濁色，都能創造出豐富的色彩表情。

B圖的配色采用的是同一色相的淡色與暗色的組合雙色調；而A圖中的綠色與淡紅色的色相差過大，無法組合成相同或相近色相的雙色調。

雙色調組合類型

濃淡法

節奏感產生舒適感

濃淡法指按照色相或明度順序的配色。由于順序被明示出來，因此產生節奏感，給人以舒適的感覺。對畫面的一部分使用濃淡法配色，則該部分周報有著踏實的效果。

A圖中彩虹的配色排列松散，但頗為活潑；B圖中彩虹按色相順序排列后產生穩定感、節奏感，就會顯得既張揚又踏實。

色相的漸進

明度的漸進

莫里斯派·對比雙色調

莫里斯偏愛的配色

使兩組雙色調對比后，同時呈現出平穩與緊湊的畫面感，將雙色調具有的舒適感與色相對比具有的緊湊感調和至平衡，是活躍在19世紀的英國裝飾藝術大師威廉·莫里斯鐘愛的配色形式。

A圖由綠色的明、中、暗三階段構成的配色。由于是同一色相，所以畫面踏實，不過似乎太過單調而顯無趣。鑒于出現3個階段的顏色，應成為三色調，不過與雙色調效果大致相同。而B圖中加入對比色紅色系的雙色調。對比色效果強調了整體，雙色調的平穩感與色相對比的緊湊感共存。

組合身為對比色的雙色調，產生緊湊感，給人以自然的印象。

微差·品位浮雕裝飾

近似色相與小明度差

使用幾乎令人察覺不到的微笑色彩差別配色，會傳達出高雅寂靜的感覺。一般情況下，微差因其曖昧模糊感并不討好，不過一旦被有意圖地巧妙使用，會有意想不到的效果。想運用好微差，周邊色尤為關鍵。若不小心搭配進強色，則會瞬間破壞來之不易的靜感，稱為庸俗失敗的模糊配色。

A圖鮮艷的黃色破壞了整體的寧靜氣氛；而B圖去掉了鮮艷的色彩，包的色調具有微差的特點，微差配色表現靜謐。

微差配色可以營造出幽靜氣氛

重復法

通過重復融合整體，制造共同之處

在稍稍偏離的位置上放置統一色彩，會達到共鳴融合的效果。這就是重復法。一致的色彩不僅互相呼應，整個畫面也融為一體。

A圖頂部與下面的顏色沒有呼應，使得上下分離，破壞了畫面的整體效果；而B圖下面汽車的青藍色與頂部天空的青藍色呼應，形成一致的色相，上下便產生一體感，使得整體緊湊嚴密。

在偏離的位置上放置與主要色彩同色系的顏色，使得整體融合，產生統一感

利用白色間隔使畫面更柔和

在過于濃艷的配色在使用白色背景

白色的色彩度為零，可以說是完全中立的顏色，但是由于搭配方法不同，可以產生十分鮮艷的效果。白色可以令平淡的配色鮮明，也可以令濃艷的配色柔和。

A畫面全部是過于強烈的顏色，濃艷而令人膩煩；而B畫面換成白色背景去除了濃艷的感覺，畫面表現得柔和起來了。

如果強烈的帶有刺激性的色彩讓人感覺很浮躁的話，可以嘗試在中間插入白色間隔，這樣不僅減弱了壓迫感，也使這種顏色的特征更加鮮明生動

2.1 營造畫面氛圍

畫面的安排決定配色的成功與否

如果商品與畫面不一致的話，即使有了漂亮的配色也沒有任何價值。已完成配色的畫面能否與目光鎖定的方向一致是成功與否的關鍵。想要隨意表現一個快樂的畫面，如果用上等的格調和高雅的配色，就會令畫面混亂，無法傳達正確的意思。

大部分畫面由色調決定

決定畫面的三要素是色調、色相和對比強度。其中最重要的就是色調。色調換言之是“格調”，是和“心情、品位、興趣”具有相同語感的詞匯。選擇哪種色調進行畫面的配色，決定性因素就是心情。

色調

大部分畫面由色調決定

即使是相同的材料、相同風格的形狀，當色彩的色調發生變化時，畫面也會完全不同。色調在營造畫面氛圍的要素之中起決定性作用，如果錯誤地選擇了色調，無論在色相和明度上下多少工夫都無法修正畫面。

選擇的色調就決定了配色的畫面。如設計嬰兒產品，就不適合用鮮艷或嚴肅的色調。

色相

暖色與冷色

色相大致可以分為暖色和冷色。由紅色至橙色、黃色被稱為暖色，正如字面上的意義一樣，這些顏色給人溫暖的感覺。相反，由藍色至青紫色被稱為冷色，表現出清涼、冷靜的感覺。一方面，各自的顏色都與各自特有的氛圍相聯系。綠色、褐色是用來表現大自然的色彩，字色無論濃淡都散發著女性的氣息。

色相帶來不同的畫面效果

色相大致可以分為冷色與暖色，一級位于其中間的色相共4部分。以暖色為主體進行配色給人以溫暖健康的印象，以冷色為中心則給人寒冷的印象。

對比強度

加強對比凸顯活力

組合色彩之間的色相之差、明度之差和純度之差稱為對比強度。增加對比強度可以增添活力，減少對比強度則顯得沉穩。想要創造富予活力、精神飽滿的畫面就要增加對比強度，想要表現靜謐高雅的畫面，就要限制對比強度。

A圖中的運動鞋色相對比較小，給人穩重的印象；反觀B圖的配色色相對比強烈，表現年輕人的朝氣蓬勃。

面積比

利用大面積比使畫面鮮明銳利

即使使用相同顏色的搭配，當面積比例改變時印象也會隨之改變。增大面積比（大小差）可以產生輕快的動感，相反，減小面積就會帶給人輕松愉快的印象。

A圖中的橙色地面在畫面中占據了相當大的面積，給人以輕松舒適的印象。較少地面橙色的面積，畫面變得銳利鮮明起來。

2.2 色彩印象指南

檢查畫面的差別

如果想要傳達的內容與畫面的配色產生分歧，那么無論怎樣美麗的配色都不會有任何效果。觀看者的印象與配色所表達的畫面無法產生共鳴，那么無論怎樣美麗的配色都沒有任何意義了。

男性——冷靜且有力的形象

令人感覺到男性特征的色彩，必須具有強大的力量。表現強大力量的純色，接近純色的暗色都是符合男性形象的色彩。

女性——冷溫柔親切的形象

和藹、親切、溫柔的色調與保守色調的對比是關鍵因素。以紅色為中心的暖色十分有效。另外，紫色是可以表現女性溫柔的特殊色相。

寒冷

如果只用藍色為主的冷色進行配色，就可以營造出冰天雪地的寒冷感覺。增大明度差能夠進一步強調寒冷的感覺。

涼爽

以冷色為主的大部分色相，減小其對比強度即可減弱寒冷的程度，使畫面表現出涼爽的感覺。由于亮度是主要因素所以要避免使用強色調。

溫暖

橙色、紅色、茶色等以暖色為中心的色相用來表現溫暖。減小對比強度就可以營造出溫暖的感覺。使用任何色調均可。

炎熱

加入對比色相更能夠強調暖色。純色色調是基本要素，素雅的色調與明亮的色調都無法表現出炎熱的感覺。

活力

朝氣、活力、休閑

可愛·浪漫

都市氣息·優雅

略顯素雅的明亮色調帶給人平靜和安詳的感覺。表現出橙色生活的優雅氛圍。

豪華感·高級感

將暗色色調放置在純色的旁邊，表現出豪華氣質。即使是同樣的暗色，由于被放置在離純色較遠的位置上而失去了鮮艷色澤，豪華的氛圍也一下子消失不見了。

自然之美

樹木的綠色、大地的褐色使人直接聯想到大自然，心情也變得安定祥和。

力量·速度

充滿力量的畫面不可缺少重量感，但并不一定適合于表現速度感。速度感是以鮮艷的純色色調為基調，而力量感則與鮮艷的厚重色調相吻合。

幻想·神秘

同色系色彩帶來幻想世界的縹緲感。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

“價值”在百度百科的解釋是————“價值屬于關系范疇，從認識論上來說，是指客體能夠滿足主體需要的效益關系，是表示客體的屬性和功能與主體需要間的一種效用、效益或效應關系的哲學范疇。”
因為一些外部原因，讓我最近一段時間都在思考一個問題，作為一名設計師，我的價值是什么？？？我的設計能力。那我設計能力的價值是什么？？？完成產品視覺的呈現，幫助項目上線和產品落地？
當這個回答擺到我面前的時候，我竟然有了一絲的不安。
因為在我看來視覺呈現這只是能力，并不是真正的價值。如果作為設計師只是這樣的能力，你會發現在團隊的位置是很容易就會被頂替的。
那作為設計師的我，那如何才能讓自己不容易被頂替，體現自身價值到底是什么就成了重中之重的事情。
那體現自身價值之前，我需要去知道設計價值是什么。設計價值說到底就是解決問題，從而帶來了想要的效益。

那我需要思考的方向（我工作主要方向B端產品）

一、設計師解決了什么問題
1、發現問題
2、定義問題
3、分析問題
二、設計師如何解決的問題
1、明確設計目標
2、制定設計策略
三、設計師如何驗證問題是否解決
1、收集用戶反饋
2、跟蹤數據指標
四、舉個例子
五、總結一下

 

第一步：「設計師解決了什么問題」

發現問題、定義問題、分析問題
一開始工作的時候很長一段時間都是被動接需求、找參考、輸出設計稿，這樣一個流程下來，解決的問題無非就是如何用設計呈現需求的過程，設計師的價值發揮就會非常有限。所以如果想發掘更多設計價值，就需要轉被動為主動，將設計前置，從業務出發去發現問題（通過分析項目背景/目標、用戶調研、行業/競品分析等）、定義問題（問題出現的原因是什么？用戶的原因？還是產品本身的原因）并且分析問題（細化出現問題的原因，給出解決問題的方案）

第二步：「設計師如何解決的問題」

明確設計目標、制定設計策略
雖然如何解決問題每個人的側重點都不一樣的，但是設計目標作為體驗提升的開始，正確的設計目標決定了提升的方向，而設計目標可以由產品目標（提升某個具體的指標、提高用戶的操作效率）和用戶目標（用戶的想要得到什么、用戶使用產品的痛點是什么）的推導出來。目標有了就要落地去實現，作為設計師，設計策略是落地的重要一步：統一規范、縮短操作路徑、提升用戶滿意度等等

第三步：「設計師如何驗證問題解決與否」

收集用戶反饋、跟蹤數據指標
我們總是在主觀的評價這個設計好不好看、好不好用，導致設計的價值很難去真正的衡量。其實衡量價值最基本的方法無非就是你這樣做帶來了什么，結果導向是衡量設計最為標準的，也是流程閉環的最后一步，如果沒有結果，流程無法閉環，那設計價值也無法衡量。而產品上線后得到結果又是什么？無非就是用戶反饋是否滿意和數據指標是否達標。 

舉個例子

項目背景是在公司業務快速增長和用戶對于服務品質的訴求提升，加上客服團隊一直處于被動依靠人力處理用戶問題的服務模式的情況下，排除大幅度疊加人員的方案，希望通過數據驅動+服務產品智能化的方式來對客服體系的升級。從而提高客服人員的工作效率，減少公司的招聘成本的同時提升用戶的體驗，最終實現公司業務的快速增長。

第一步：「設計師解決了什么問題」

1、發現問題

通過項目背景不難發現其中問題所在：在不增加人員的情況下，當前客服團隊的服務模式，已經滿足不了現有的業務增長趨勢和客戶的品質訴求。

那我們需要做的就是解決服務模式的問題。

服務模式有什么問題呢？一直處于被動依靠人力處理用戶問題。

2、定義問題

為什么一直處于被動依靠人力處理用戶問題呢？

· 用戶一遇到問題就去找客服，用戶做不到遇到問題可以通過自我查詢或者其他不依賴客服的方式來解決。

· 客服人員能力有限，每天的用戶承接量大，重復性問題多，問題處理流程繁瑣，導致單個問題處理時間較長。

3、分析問題

排除人力堆加的方法以外，如何才能解決服務模式的問題呢？

方法就是

增強用戶自主解決能力：自主渠道的升級，實現渠道擴增和業務分流，通過內容分層，簡化用戶查找問題的流程，培養用戶自主解決能力的心智模型；引入智能機器人能力，實現簡單性、高頻率問題由機器人代理解決。

提升客服解決問題能力：調整問題的優先級排序，優先解決重要客戶的問題，減少重要客戶的投訴和流失；尋找問題處理流程的機會點，減少客服單個處理時長；分析不同程度客服同時處理問題量的數據，限制客服最大承接量。

既然問題已經確定了，那就要去解決問題。根據對問題的分析結果，該如何轉換為設計呢？

第二步：「設計師如何解決的問題」

1、確定設計目標

結合產品目標（自助渠道升級、產品智能化/數據化）+用戶目標=設計目標的推導公式

產品目標是產品經理/需求方給到你的，但是用戶目標則是設計師自己調研分析得來的

----用戶想做什么？

用戶想快速解決遇到的問題

----客服想做什么？

客服想輕松快速的幫助用戶解決遇到的問題，完成工作中的KPI指標

----用戶的痛點？

用戶在自助渠道找不到答案，于是遇到問題就找客服去解決問題，智能機器人的回答也解決不了問題，所以需要找人工客服，但是需要等待很長的時間

----客服的痛點？

每天高負壓的的工作環境，枯燥重復的工作流程，敏感繁多的考核指標。

2、制定設計策略

那在確定好設計目標之后，就需要通過制定設計策略，以達到設計目標。

注意：我們在做設計之前，必須要確定設計目標。因為目標是方向，不然做到最后發現自己做的設計沒有解決產品目標和用戶目標，那就是白白的浪費時間，也說明自己做的設計是又問題的。

第三步：「設計師如何驗證問題解決與否」

項目上線后，我們需要去收集用戶反饋，關注我們設定好的指標去衡量、驗證構建的設計方案是否解決用了用戶問題以及是否達成了產品目標，因為這樣設計工作才能實現一個閉環。

1、收集用戶反饋

可通過在產品上線初期以及上線一段時間后進行調查問卷的發放，通過調查問卷得到用戶在使用新的產品的感受，直觀感受產品迭代后的反響，同時也可以為下次的迭代提供方向和依據

2、跟蹤數據指標

從產品目標我們可以看出，我們的數據指標就是提高用戶對自主渠道的使用率，那我們只需要在自主渠道的頁面增加一定的數據埋點：頁面點擊率、頁面瀏覽時長等等

總結一下

寫了這么多，才發現自己現在欠缺的，還有環境欠缺的。所以冷靜的理一理自己的工作的流程，多關注業界的動態。主動的將設計前置，提升自己的價值，提高自己在團隊/項目中的話語權。不然如果只是簡簡單單的設計呈現，自己永遠處于被動挨打的狀態，沒有話語權，沒有價值體現，隨時都有可能被替代。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

如何選擇合適的B端設計風格？

1.B端后臺分類：

根據服務對象劃分：

一類支持有C端前臺，支持前臺產品管理各種資源。第二類服務企業，提高企業工作效率和營收。

根據后臺功能：

1.監控運營：時效性強，旨在實時反饋異常情況，快速判斷下達命令，回復信息、多用于數據控制中心。

2.數據分析：數據結果的對比和分析趨勢，時效性要求并不高，了解整體和各部分數據水平，助力決策。

3.記錄管理類：主要用于人員、設備、資產等增刪改查，文本信息容量大，頻繁便捷的操作。

4.系統配置：權限配置、設備功能配置，操作為主。

2.后臺深淺兩大風格分類：

淺色：

適合文本信息多密集的表單列表類后臺，淺色更符合人眼白底黑字的閱讀習慣，瀏覽速度更快，信息獲取效率更高。

深色：

圖像信息密集的后臺適合圖片、數據可視化圖表等；深色對彩色的圖像信息襯托更強。信息獲取速度較慢，長時間可能視疲勞。

3.作者常向產品方提供的風格參考

較常見

1.經典商務風（導航深、內容淺）——專業、高效、成熟、可信賴（對照深色西裝人物形象）

      優點：市面最常見的風格，普世性高，大多數用戶可快速接受，層次分明

      缺點：視覺缺乏記憶點

 2.輕量科技感（導航淺、內容淺）——簡潔、明快、輕量、年輕（對照白襯衫打領帶男性）

      優點：視覺清新明快更年輕化更輕量，對其他文本及圖形展示包容性高，就像A4白紙一樣容器存在感弱

      缺點：純白色導航+頁面層次略曖昧。

 3.藍色科技風（導航中、內容中）

      適合：適合科技屬性強的產品界面，圖像圖形展示

      缺點：對其他色彩信息有干擾，持續性長時間觀看易視覺疲勞

 4.暗黑科技風（導航深、內容深）

      優點：對色彩表現力強

      缺點：密集文本信息獲取速度會下降，持續性長時間觀看易視覺疲勞

4.精準選擇風格時可以進一步的考慮：

1.整體行業風格

比如美妝和科技行業的整體設計基調就不太相同。

2.產品想要傳達的氣質：

理性可靠 or  簡潔輕松輕量 or 關懷普世 or 酷炫吸睛….這個可以和相關產品經理、銷售共同商討

3.目標用戶的群體特點及喜好。

根據目標用戶的性別、年齡層、受教育水平，審美水平考量（可能包含多種角色，選取1.2個核心角色為參考）帶入目標用戶工作場景及愛用物常用物品味，去判斷基調。

如主要用戶群：40+男性用戶，本科以上受教育水平，使用windows電腦進行專業管理操作，審美傾向明確內斂。

如主要用戶群：20-40歲，男女比例約6：4；大專；操作水平參差

4.使用場景及高頻的操作。

例如：最常使用數據分析管理，需要快速閱覽多條數據，對數據進行比對，更適合淺色風格展示表單數據。

5.判斷獨立的平臺是否為獨立開發

獨立開發的，可以采取更獨特設計。若平臺很大需要不同外包公司的合作屬于整合類平臺則更注重設計的包容性。

5.如何讓后臺設計更具特色：

1.重點色的使用

“731配色比例”70%的面板色，30%的導航面板色，10%的強調色。（這里的用色比例可以根據內容具體再去調節只是大概比例）品牌色或重點色：強調行動關鍵點、重要信息高亮、圖形化說明等。強調色用就要用的像蛋糕上的櫻桃。起到畫龍點睛作用即可。

2.圖標的優化

后臺高頻出現的圖標，值得我們花時間去統一設計打磨，調整圓角粗細疏密，符合整體界面氣質。從圖標庫里拖出的圖標很多在線條粗細上是不統一的，好的設計在細節處也要動人。

B端工具類圖標識別性第一，美觀性第二。B端導航圖標更多是在基礎造型上打磨，不需要加花里胡哨的漸變、投影，導航圖標一般在24px-16px大小，太復雜反而看不清。在區分狀態的時候可以考慮加點品牌色

3.空狀態小插畫

空狀態插畫是B端設計師少有能發揮自己繪畫天賦小巧思的地方。

圖形化狀態語言，輔助用戶理解內容?？梢詫a品機械蒼白的文案設計表現的更加具有溫度，具有引導性。讓乏味的工作出現一些共情小彩蛋，有趣的插圖動畫可以緩解等待的焦慮。

4.登錄注冊頁

純色背景卡片式：簡單大方更聚焦登錄操作

插畫背景：場景化展示產品的功能及亮點，讓用戶更有心理預期

幾何圖形背景：最后和品牌圖形相關，加深用戶對產品的品牌印象。

照片背景：相關場景或產品類型，具象圖片信息更直觀

5.圓角的大小

不同大小的圓角傳達產品不同的氣質，大圓角親和、小圓角精致、中等圓角大眾中庸。

6.優化信息層級

優化信息層級，區分信息主次可以使閱讀更快，操作更快，界面更有節奏感。

這時候你就是那個考前畫重點的老師

判斷一個頁面里最重要的是那些信息或操作，強化它！并弱化輔助信息；

判斷一個模塊里那些是重要信息，強化它！

6.新人需要避免的雷點：

1.追求炫酷的視覺效果舍棄操作效率。比如追波風滿屏花里胡哨的卡片及面板，滿屏大投影及高飽和色彩。對于B端界面來說信息噪音太多，反而干擾信息獲取效率。

2.反常規用戶習慣的操作。尊重用戶習慣，不要為了個性化去嘗試改變，不要妄圖改變用戶的操作和認知的慣性。慣性思維大于設計思維，曾經遇到過產品因為右手操作所以要把導航放在右邊的離譜例子。

3.數量多，動靜大的夸張的動效。B端與C端不同的地方在于希望操作者沉浸式工作，遵循非必要不打擾。之前看過一個反面例子后臺，在每一步操作后都出現大的場景動效鼓勵完成，如果作為一個長期使用的工作者，我會覺得每次完成任務都需要等待動畫完成可能只需要2-3s也很浪費我的時間。

4.新人建議多看Antdesign和Element等成熟的組件，創新類組件樣式，最好和和開發商量是否能夠實現。

5.在確定主要風格及2-5張主要頁面后，就應該著手基礎規范（色彩字體等，不然后面越做越亂）。

6.一段時間一個審美，同一界面中的元素風格不統一。

7.避免大面積使用高飽和高明度的色彩，及曖昧含糊的臨近色彩。長時間使用眼睛會累，產生不耐煩焦躁的負面情緒。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務