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

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

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

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.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

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

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

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

 

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

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

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

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

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

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

舉個例子

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

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

1、發現問題

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

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

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

2、定義問題

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

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

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

3、分析問題

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

方法就是

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

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

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

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

1、確定設計目標

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

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

----用戶想做什么？

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

----客服想做什么？

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

----用戶的痛點？

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

----客服的痛點？

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

2、制定設計策略

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

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

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

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

1、收集用戶反饋

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

2、跟蹤數據指標

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

總結一下

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

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

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

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

本文將從理論到實踐，從軟件到插件，再到不同應用場景拆解和團隊協同的重構，一步步教你如何搭建產品KIT組件庫。也給大家帶來逆天的Anima插件教程，組件化設計的必備插件，目前國內還比較少有文章講到。手把手！嘴對嘴！堪稱全網最細保姆級教程！

01. 什么是KIT組件庫？

一個成熟的設計團隊，都會為產品制定設計規范，搭建產品KIT組件庫，組件化思維也是設計師的必備思維之一。組件庫會讓團隊協作變得高效且一致，讓團隊成員專注于深耕體驗和細節，實現設計向產品賦能。極大的節省設計和開發成本，優化用戶在界面流轉間的感知差異體驗。

KIT組件庫本質上是一個集合的Sketch文件，由原子、分子、組織、模板、頁面組成。原子理論支撐可復用、可修改、易于協同和維護。

由Google推出的當時媲美蘋果全新設計語言的Material Design，Material Design也是最為經典組件庫設計。現如今阿里的Ant Design和Element給我們提供了一套完整可復用的組件庫。

02. 原子設計理論

原子設計是將界面設計中最小元素——原子，組合嵌套為分子、組織、模板、頁面的系統規范化設計過程。

1.  原子 Atoms

原子Atoms，我們知道是指化學反應不可再分的基本微粒。原子在化學反應中不可分割，但在物理狀態中可以分割的。原子由原子核和繞核運動的電子組成，所以原子是構成物質的最小粒子這就不對了。

但在界面設計中我們所說的原子是構成界面的最小顆粒度元素，在設計中無法再被拆分或者拆分下去已無意義的最小單位。比如不同顏色樣式、文字樣式、輸入框、icon圖標、分割線等。

2. 分子 Molecules

由原子按照一定的規律和目的組成的部分為分子，在界面設計中比如Button按鈕、swittch開關、非模態彈窗Toast等，可以理解為比較簡單的小組件。

3. 組織 Organisms

將不同的分子與原子組合就組成了組織。比如頭像與信息組成的聯系人容器卡片、Table列表、Nav-bar、Tab-bar等等。

4. 模板 Templates

將組織與分子、原子進行特定的組合就形成了模板。這一步已經能展示界面的主要功能和交互了。一般這一步得到的結果就是我們日常工作中的原型圖，產品的大致形態也慢慢清晰。所以模板可以理解成未上色的界面。

5. 頁面 Pages

最終輸出的高保真設計圖即為我們說的表現層的頁面Pages。將模板填充信息和圖片內容，就得到了高保真設計界面。

03. KIT組件庫搭建過程詳解

以最近做的一個NFT項目為例子，展示具體搭建細節的全過程。

1.  命名規范

命名按照：一級分類 / 二級分類 / 三級分類 。例如：一級標題樣式/蘋方/常規/灰階0

其中 “/” 為層級結構分隔符，Sketch會自動識別。組件庫的搭建需要按照層級規范命名，從最外層到最內層，就像一個抽屜，每一層都對應放著東西。規范的命名會使后期調用維護、團隊協同變得清晰高效。

2. 樣式

（1）顏色樣式

我們設計一般都需要定義顏色樣式，一般有主色調（Main tone）、輔助色（Minor）、漸變色（Gradient）、字體的灰階度（Gray scale）等。選中你需要創建樣式的顏色，點擊「外觀 - 創建」，在輸入框內輸入層級規范命名。

（2）文字樣式

定義文字樣式，文字具有字體、大小、字重、灰階等屬性，選中文字，點擊【外觀-新建】，在輸入框內輸入層級規范命名。

（3）樣式切換

當我們需要切換一個定義好的文字樣式時，比如從“閱讀文本樣式”更換為“一級標題樣式”，只需要選中文字 - 點擊「當前文檔」下定義的文字樣式 - 點擊需要更改的文字樣式即可。

（4）樣式修改 - 解綁與更新

當我們需要對定義好的文字樣式進行修改時，比如在設計的過程中突然感覺"閱讀文本樣式"字體小了點，為了優化閱讀體驗需要增大字號。

1. 單個修改 - 解綁

將文字調整更改為你需要的大小或字重，此時只對單個文本修改，不對其他文本產生影響，點擊解綁，便可與定義好的樣式分離。

2. 整體同步 - 更新

將文字調整更改為你需要的大小或字重，樣式名稱后會出現 "*" 星號，此時代表未保存，且更新按鈕激活，點擊更新按鈕則所有使用該樣式的字段都會更改，整體同步更新。

3. 組件

組件是將元素定義為標準化可復用的集合體，對組件進行規范的命名，形成高效設計的KIT組件庫。

（1）文本組件

選中我們需要定義的文本字段，注意！根據實際應用場景選擇合適的文本對齊方式，否則修改字段信息是會出錯。這里文本選擇左對齊，點擊 「創建控件」- 按照層級規范命名，選擇從左往右布局 - 點擊 「覆蓋層」即可對文本字段內容進行修改。

（2）標簽組件

1. 單個標簽

當設計完標簽后，對標簽創建組件。依次選中便簽中的文字“LIMIT”、“2000份”，依次將文本選擇左對齊，步驟同上。將整個標簽打組，點擊 「創建控件」- 按照層級規范命名，選擇從左往右布局（這里注意！從左往右布局表示標簽在更改字段信息后，便簽左邊固定不動，從左往右自適應） - 在覆蓋層修改文本字段信息，庫存標簽組件自適應。

2. 標簽修改           
         

如果我們覺得這個庫存標簽設計的不滿意，或者還需新增倒計時標簽、已售標簽，那怎樣又該怎么做的？

第一步：這時我們新建一個Sketch文件，命名為「 *** KIT 組件庫」。選中標簽圖標復制，將圖標粘貼到新建文件內，注意！此時需要給圖標添加合適的畫板，并按規范命名。

第二步：將Sketch文件保存到桌面，拖動到「首選項-組件庫」內。

第三步：選中組件，回車可進入控件（組件）頁面，可直接調用定義好的控件，進行修改。

Tips：這里畫板的作用是

（1）畫板是用來規范固定組件位置和大小的，成套系的KIT Library需要建立畫板。

（2）畫板組件在創建后，調用時只固定大小和邊界。

（2）如果只是做較少的界面，較少的復用的樣式，就可以不用做畫板。

3. 多個標簽

當頁面需要不止一個標簽時，就需要新增標簽，通常為左右或上下布局。若直接增加一個標簽修改字段，文本標簽不會自適應。 和之前操作一致，將新建的標簽新建組件后，可實現標簽文本自適應。

4. Sketch素材調用

繼續添加商品作者組件、價格組件。點擊右邊覆蓋層可修改文本字段。點擊文字右邊小icon可調用Sketch自帶的數據。

（3）容器組件整合

將前面定義好的所有組件整合到容器中，形成可直接復用的商品信息容器組件。

第一步：調用定義好的閱讀文本樣式，注意！直接拖過來即可，文本框的長度左右拉到合適的左右間距，這里不需要動文本框的高度，否則會出錯。將底部容器（卡片）的收起到合適的高度

第二步：選中整體打組，創建組件。注意! 此時選擇從上向下布局。

第三步：選中整體，在右側覆蓋層可對文本進行編輯，輸入文本字段，此時容器高度實現自適應。

（4）組件的拆解與重構

頁面可一步步拆解為模板、組織、分子到原子。原子和分子可組合嵌套重構為組織、模板和頁面。

（5）Anima插件

如果上下同時有卡片的情況該怎么呢? 當然，我們完全可以將它們一起定義組件，但有沒有其他更便捷，更靈活的方法呢？這里跟大家介紹Anima插件的使用，會使得大家在搭建組件庫時變得更加靈活高效。

Anima插件為一款在線自動響應式的插件，其中的STACK與PADDING功能簡直是Sketch設計必備，簡直逆天。

1. PADDING功能

新建一個文本，當點擊PADDING后，會自動生成一個底板，選中底板可對其進行編輯，更改顏色、原角度等。在PADDING輸入框內可輸入距離上下左右的邊距。此時注意文本的對其方式，左對齊一般適合標簽使用較多，而居中對齊適合一般的居中按鈕，如立即支付、立即報名等。

2. STACK功能

將三個標簽分別打組，再全選整體打一個組，點擊STACK，選擇左右排版和居中對齊，輸入你需要的間距。此時Anima插件最牛的STACK功能就是可以雙擊選中任一個標簽，拖拽可改變排列順序，松手后還可以自適應。

04. 為什么要搭建組件庫？

（1）統一（Unified）

1. 團隊不同成員或新來設計師之間協同配合，保證輸出的一致性和穩定性。

2. 統一的組件庫樣式，會減輕用戶在頁面流轉間的疑惑感和理解成本，使用戶體驗得到了提高。

（2）效率（Efficientcy）

1. 減少相同模塊的重復設計。一個產品功能流轉、頁面交互必定會涉及到大量的重復設計的樣式與組件。試想一下，如果每一個都重新設計將是一個巨大的時間成本浪費。

2. 如果從產品的全生命周期來看，搭建好設計中臺KIT組件庫，并與開發進行溝通，能減少前端開發樣式，將時間更多的放在功能交互體驗和項目推動上，極大提高了效率。

（3）協同（Together）

1. 建立完善的設計規范和KIT組件庫，提高組件庫優化迭代效率。組件庫團隊協同自動更新。

2. KIT組件庫一鍵修改，也可通過組件分離功能（解綁）單獨對樣式進行修改，工作中需要對設計反復調整打磨，可進行批量一鍵更改，單個模塊的單獨修改。

05. 什么時候搭建組件庫？

什么時候時候搭建組件庫？先定義規范都是扯淡！所謂實踐才是檢驗真理的唯一標準，“在設計開始之前就制定設計規范，是不切實際的做法，你會發現做好的規范在實際操作中是無用且白費精力的”摘自《破繭成蝶 用戶體驗設計師的成長之路》。所以組件庫中的組件必定是經過反復修改后適合產品以及可后期可復用的。

并不是所有的設計都需要做設計規范或者KIT組件庫。組件庫的搭建本身就是一個耗費時間人力的事情，如果是一次性項目那根本就沒有必要做組件庫了。是否需要創建樣式或組件取決于該樣式或組件在后續的工作中是否會被復用或復用的頻次。也會減少前端工程師重復開發CSS樣式以及后臺數據的封裝成本。

06. 團隊協同

將組件都定義在新建的Sketch文件中，將文件發給你的團隊其他成員。步驟同上。

第一步：新建一個Sketch文件，命名為「 *** KIT組件庫」，將組件都創建在新建文件內。

第二步：將Sketch文件發送給團隊其他成員，拖動到Sketch「首選項-組件庫」內。

第三步：直接調用定義好的組件。

共享組件庫個人使用 Sketch Cloud，但組件庫有更新Sketch右上角會有提示，及時溝通更新即可。

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

文章來源：站酷  作者：JI_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

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

如果將【UI設計】比喻成一位新型時髦的青年，那么【公共藝術】則是一位已在歷史長河中摸爬滾打數十載的老者，一位偉人曾說過：人類的發展從歷史中獲得啟迪，故筆者旨在從探討公共藝術在地性觀念的角度，來淺談如何在UI設計中凸顯情感關懷。

1 公共藝術在地性觀念

“藝術是什么”

當代藝術作品（圖片來源：網絡）

學者王瑞蕓認為當代藝術邊界模糊且藝術家創作手段任意， 不僅沒有一個能夠稱得上固定的風格，也不存在相應的美術主張，因此無法用語言對其進行概述。 而二十世紀實驗藝術的先鋒馬塞爾·杜尚 (Marcel Duchamp) 曾用種種藝術實踐行為向公眾宣告：經由藝術家之手創造的就是藝術。

“什么是公共藝術”

公共藝術作品（圖片來源：網絡）

學者金江波在其專著《地方重塑—公共藝術的挑戰與機遇》中指出：公共藝術體現的藝術主張依托于關注人文的公共理想。 復旦大學的湯筠冰教授曾在其公開課《城市公共藝術》中講述到，公共藝術與純藝術的不同之處體現在，公共藝術中包含了一種地域文化。

相較于說不清、道不明的“藝術”，公共藝術有別于純藝術“為我性”的情感抒發，更加強調藝術作品與空間、人之間有意識產生的情感聯系，用語言來概況其特性可以總結為：公共性、藝術性、在地性。

“什么是公共藝術在地性”

公共藝術作品《爬墻的熊貓》（圖片來源：網絡）

相較于“公共性”與“藝術性”的“基本性質”，筆者認為受“他人”影響而產生的“在地性”更能明顯地體現公共藝術中的文化關懷，什么是公共藝術在地性觀念，用一句話來概括：公共藝術與空間的關聯性。

縱觀藝術史，公共藝術的在地性范式可以總結為以下三類：

(一） 與空間的融合關聯性

古希臘帕特農神廟（圖片來源：網絡）

最常見的一種在地性范式，起源于人民的基本需求已得到滿足，開始追求更高層次的精神追求——對美的追求。例如古希臘帕特農神廟的建造依托于古希臘人民對細節美與民主性的崇尚與追求，以及中世紀的“城市美化運動”，“依附于建筑的藝術”，均是以在依托于周圍環境、融入當前環境的方式來體現公共藝術的藝術性價值。

(二） 與空間的沖突關聯性

藝術家佩爾施克策劃的公共藝術活動《紅球計劃》 （圖片來源：網絡）

主要集中在后現代主義時期，后現代主義藝術批判以往藝術的精英化，追求藝術“生活化”。這一時期許多藝術家將與需求空間格格不入的通俗化形象放大植入公共空間中，產生與當下空間沖突的視覺感官體驗，以“介入”空間的“逆向之美”的方式來體現出了公共藝術的藝術評判性價值。

藝術家奧登伯格創作的《世俗豐碑系列》（圖片來源：網絡）

(三） 與空間的無關聯性

《瑞秋豬》與《乳牛大游行》（圖片來源：網絡）

出現在后現代主義時期，此時藝術家致力于使藝術擺脫架上束縛，追求藝術的開放性，諸如《柏林熊》、《乳牛大游行》以及《瑞秋豬》等社區參與類公共藝術作品，以藝術家主導的活動形式讓大眾參與到藝術創作過程中，打破以往以藝術家為中心開展的藝術創作行為，去中心化，此類公共藝術擺脫空間的束縛，其在地性含義由參與者構成，其開放性藝術價值仿佛實現了大同之美。

     

2 在地性藝術語言與UI設計-以沖突關聯性為例

(一）關聯性的意義

例子1

上圖中左邊是由英國藝術家安尼什.卡普爾（Anish Kapoor）創作的公共藝術作品《云門》，將芝加哥市民引以為傲的摩天大樓與天際線的形象利用鏡像反射的原理映射在光滑的雕塑表面，凸顯城市文化與自信。右邊為新疆克拉瑪依油田新地標，似乎與芝加哥的《云門》沒有太大的區別，拋開是否購買版權這一點涉及到法律層面的考量，從藝術價值層面來考量這件“作品”，周遭土黃色的大樓并非是需要凸顯的城市文化與特質，強硬的植入只會削弱了作品的藝術價值。

例子2

再舉一個例子，以美的美居APP的缺省頁為例，在最新的版本中，美的美居設計團隊將缺省頁的視覺元素替換成了自身IP形象“小藍”，運用與產品相關聯的視覺元素，不僅在美化的基礎上增強了頁面與產品的關聯性，更是彰顯了品牌自信。

以上兩個例子也是為了說明，在UI設計中視覺元素的運用需站在“有理有據”的立場上，貫徹“取之有道 用之有理”的思想。以公共藝術中“與空間的沖突關聯性”藝術語言為例，來探討下此藝術語言在UI設計中的運用。而選擇沖突性藝術語言來探討的原因，主要在于該藝術語言包含的批判性、先鋒性與幽默性特質，能夠滿足當今人們對情感化產品的需求。

(二）公共藝術中的沖突性

聊到公共藝術，不得不提到的一位藝術家：致力于把生活用品變成藝術品——克萊斯.奧登伯格（Claes Oldenburg），其世俗豐碑系列作品運用幽默風趣的藝術手法，提取與日常生活中通俗的現成物的形象介入公共空間，是對藝術精英化以及國際主義千篇一律設計風格的不滿與批判，以及藝術生活化精神的體現。該藝術形式可以引起大眾對其的新鮮感以及體現出一種趣味性，但當好奇與新鮮感退卻之后，對其剩余價值的質疑也是各學者對這種藝術形式爭議不斷的原因，持有質疑態度的學者認為“沖突式”公共藝術具有時效限制性，只能在時代特定階段發揮其藝術作用。

筆者認為站在城市形象塑造的角度來看：

a、"沖突式”公共藝術能夠體現一個城市的包容性與開放性，萬千藝術姿態都能被接受與容納。

b、藝術家選取的藝術形象均來源于人們的日常生活形態，其藝術元素并不因地域等物質外在條件的不同，而對不同城市地區的人們產生不同意義，其體現的是一種全球共通性文化，其藝術性是針對城市公共空間而言。 

綜上所述，筆者認為在沖突式在地性語言中，運用的藝術元素具有以下幾點特征：

通俗性：大眾對其有相似的認知與理解

原生性：夸張、未修飾的規模與形態來展示

戲謔性：不按常理出牌，以“格格不入”的形式存在

(三）沖突關聯性語言在UI設計中的運用

例子1

針對上述三種特征，在一些APP的UI設計中，也可以找到相應的案例。例如B站番劇《總之就是非?？蓯邸返倪M度條的圖標設計案例之一，該案例的運用起因在于該番劇的劇情甜份過高，網友們紛紛用彈幕類似于表達“我酸了”的通俗網絡語言來刷屏，引起了B站的關注，于是就有了檸檬代替進度條的操作。

例子2

而Instagram推出的視頻產品「IGTV」，其加載頁借用了8090年代人們對老式電視信息收視不良的記憶——雪花屏元素，該元素與當前高科技信息技術時代的沖突性不僅營造出了炫酷的視覺效果，同時也使得產品飽含了懷舊的情感關懷，代表了一個時代的通俗回憶，得以與用戶產生共情。

例子3

嗶哩嗶哩閱讀的停更通知用更加通俗易懂的【請假】來代替，以及克拉克拉APP用【拔掉電線】的口語化用語來描述退出直播間的行為，不僅拉近了產品與生活的距離，也凸顯了幽默的情感化設計。

雖然藝術與設計的邊界日益模糊，但是二者之間仍然具有本質上的區別，那么我們在探討藝術語言在設計中的運用時，應把用戶體驗的良好與普適性也考慮其中，將藝術語言進行設計化的處理，結合上述藝術案例與設計案例來看，沖突式在地性藝術語言在UI設計中的運用時，其運用元素的特性可以歸納為：

• 基礎條件-通俗性：能夠引起大眾的共識與話題，大多數的靈感來源于生活；

• 必要條件-適應性：將原元素的特性進行特質提煉與設計化，與公共藝術不同，在UI設計中是將原元素的特征運用在設計中，同時注重例如提煉的雪花屏幕的閃爍特質，而不是直接將整個雪花屏幕運用在界面上；

• 增味條件-創新性：跨領域找參考元素。（舉個例子，從B領域提取一個元素運用在A領域上，但B領域和A領域的在大家通俗認知中的兼容性并不強，其創新性是由疏離性凸顯）

  
  

簡而言之：

1、保證元素的通俗性，結合當代語境，亦可以理解為#話題性#；

2、可跨領域找參考元素；

3、需要對元素的特質進行加工提??；

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

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

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

大綱

1、研究背景

2、案例分析

3、無障礙設計工具推薦

在特殊的場景下所有人都存在殘疾

一聽無障礙設計就覺得可能和殘障人士有關，其實不然；除了先天或后天出現的眼盲；耳聾的這種：永久性的障礙。在正常人身上也存在著情境式障礙；暫時性障礙；例如：

提著大包小包的你,想使用手機—情境式的肢體障礙

在喝熱粥時,霧氣遮擋住的眼鏡—情境式的視覺障礙

骨折的腿無法正常行走—暫時性的肢體障礙

剛睡醒迷糊的你—暫時性的認知障礙

 ……

所以即使你是正常人，在日常使用產品時也會受到和殘障人士一樣的局限性。而大家說的用戶體驗設計其實就在特定場景下解決給特定的人群產生的局限性。

城市無障礙坡道

先普及一個概念（curb cut effect）直譯過來就是“遏制分割效應”，其實意思就是機會共同體的概念、弱勢群體受益的法律和計劃往往最終使整個社會受益；最普適的就像是路緣處會做臨時的斜坡處理，目的是為了幫助坐輪椅和推薦不便的人出行順利通過，但是實際上，對于推著嬰兒車，和行李箱的人同樣受益。

傻傻分不清楚的洗發水和沐浴液

為了統一品牌設計語言，往往會將洗發水和沐浴液的瓶體設計成一樣，不僅是視障人士，任何人在閉上眼睛洗頭時都分辨不出來。花王在1991年在瓶身做鋸齒狀處理用來區分兩個產品，通過觸感也可以輕松辨認。

原文傳送門：シャンプーのきざみに込められた思い

接下來就是軟件端的案例，軟件產品在無障礙設計的例子上也很多。

哈啰出行-司機端

哈啰出行的司機端，在司機開始行程后，在司機端進行操作,APP會進行類似于IOS VoiceOver的語音播報，就是對你點擊的位置做中文的播報，規避對情景式障礙的分神的危險。

滴滴-老年版

滴滴打車首頁的“老人打車”，除了對布局的簡介化，對字體的放大化，還可以設置常用地址然后一鍵打車，或者通過電話聯系客服叫車，還是比較方便的。、對于60歲以上并通過實名認證的用戶，如果終點是醫院等特定目的地的話，后臺還會優先派單，為老年人提供救急服務。

無障礙設計工具推薦

檢查色彩對比度

色彩對比度意為：【識別對象】和【其背景顏色】之間的對比度，對比度越高，越清晰，對比度越低。越模糊。如把重要的文字信息的對比度設計到AAA.次級的文字信息的對比度設計到AA。 把色彩對比度量化的話，可以計算出比例值，最低1:1（黑底黑字）、最高21:1（白底黑字）。

最權威的互聯網無障礙規范 —— WCAG2.1(Web Content Accessibility Guideline，Web內容無障礙指南

對比度量化工具：點擊這里

對比度cheome插件：點擊這里

Funkify - 殘疾模擬器

通過極端用戶的視角來體驗網絡和界面，包括視線模糊、對比度下降（所有人的視覺對比度都會隨著年齡而下降）、雜色、白內障、糖尿病視網膜病變等。

殘疾模擬器cheome插件：點擊這里

屏幕閱讀器

用于在 Chrome 瀏覽器中朗讀內容

屏幕閱讀器cheome插件：點擊這里

Color Oracle-色弱；色盲模擬器

支持Mac / Win / Linux。大約8%的男人和0.5%的女人有色盲或色弱、是相當大的族群。當然，UI中不應該只通過顏色來區分信息，但有時無論如何會用到色彩區分（比如數據可視化），那么就一定要使用色盲友善的配色方案。一般來講，藍/黃、藍/橙是比較萬用的搭配。

色盲模擬器工具：點擊這里

總結：

雖然在現實的資本市場不太會在邊緣人群身上花那么大的資源，但是體驗設計存在的意義不就是為了解決各種因素給人產生的局限性么。

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

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

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