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

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

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

1.1 突出型配色1

使主角更鮮明

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

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

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

烘托畫面的中心

明確畫面主角

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

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

加強中心部分的方法

提高顏色純度

強化明度對比

強化色相對比

給畫面添加亮點

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

抑制背景色，凸顯亮點

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

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

制造亮點的方法

弱化背景色，突出亮點

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

給畫面加入鮮艷色彩

鮮艷的色彩盡顯活力

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

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

加入鮮艷色，變得活力

增加畫面色彩面

添加色彩，畫面變得生動

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

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

增加色彩面，變得明快

減少黑色

調(diào)整畫面部分明亮度

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

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

減少黑色使畫面明亮

如何創(chuàng)造有踏實感的明亮？

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

分離配色

什么是分離配色？

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

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

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

1.2 突出型配色2

用對比色達到突出效果

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

在色相環(huán)中的相對位置創(chuàng)造出各樣的色彩表情

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

黑白制造緊湊感

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

給畫面加入對比色

對比色是主色的必要補充

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

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

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

終極純粹三角型

平衡的三角型

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

蒙德里安《紅、黃、藍的構(gòu)成》

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

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

十字型配色

強烈的緊湊感

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

梵高《軍人》

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

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

黑色起突出作用

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

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

海報A藍綠色均為冷色，綠色背景下，表現(xiàn)出輕快自然、明亮卻趨于平淡。海報B背景變?yōu)楹谏?，綠色變得深邃而閃爍。這時，黑色本身難掩的光輝甚至?xí)谷苏`將其當(dāng)成主角，但是不會喧賓奪主掩蓋主角色。

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

 

白色起強調(diào)作用

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

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

白色與任何顏色的反差都很大。人眼對最明亮的白色頗為敏感。即使是相當(dāng)?shù)偷拿鞫认?，白色的效果也顯而易見。海報B加入白色，瞬間被突出。

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

1.3 融合型配色

使用三屬性達到融合效果

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

靠近色相

使用同系色，畫面統(tǒng)一和諧

色相差越大越活潑，反之，色相越靠近越穩(wěn)定。色彩給人感覺過于突出喧鬧時，可以靠近色相，協(xié)調(diào)各種色彩，使畫面穩(wěn)定下來。

B圖使用近似色配色，表現(xiàn)出平穩(wěn)安詳?shù)母杏X。而A圖紅綠色相之間變化幅度過大，流于散漫，給人一種不安定的感覺。

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

統(tǒng)一明度

明度差破壞安定感

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

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

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

色調(diào)靠近

氣氛的統(tǒng)一

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

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

如果畫面松散，缺乏統(tǒng)一感，則需要統(tǒng)一色調(diào)。統(tǒng)一至相同或相近色調(diào)后，原本混亂的配色將變得緩和穩(wěn)定。

群化方法

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

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

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

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

雙色調(diào)配色

同一色相的明暗兩色

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

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

雙色調(diào)組合類型

濃淡法

節(jié)奏感產(chǎn)生舒適感

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

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

色相的漸進

明度的漸進

莫里斯派·對比雙色調(diào)

莫里斯偏愛的配色

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

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

組合身為對比色的雙色調(diào)，產(chǎn)生緊湊感，給人以自然的印象。

微差·品位浮雕裝飾

近似色相與小明度差

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

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

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

重復(fù)法

通過重復(fù)融合整體，制造共同之處

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

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

在偏離的位置上放置與主要色彩同色系的顏色，使得整體融合，產(chǎn)生統(tǒng)一感

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

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

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

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

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

2.1 營造畫面氛圍

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

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

大部分畫面由色調(diào)決定

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

色調(diào)

大部分畫面由色調(diào)決定

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

選擇的色調(diào)就決定了配色的畫面。如設(shè)計嬰兒產(chǎn)品，就不適合用鮮艷或嚴(yán)肅的色調(diào)。

色相

暖色與冷色

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

色相帶來不同的畫面效果

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

對比強度

加強對比凸顯活力

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

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

面積比

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

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

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

2.2 色彩印象指南

檢查畫面的差別

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

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

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

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

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

寒冷

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

涼爽

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

溫暖

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

炎熱

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

活力

朝氣、活力、休閑

可愛·浪漫

都市氣息·優(yōu)雅

略顯素雅的明亮色調(diào)帶給人平靜和安詳?shù)母杏X。表現(xiàn)出橙色生活的優(yōu)雅氛圍。

豪華感·高級感

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

自然之美

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

力量·速度

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

幻想·神秘

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

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

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

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

那我需要思考的方向（我工作主要方向B端產(chǎn)品）

一、設(shè)計師解決了什么問題
1、發(fā)現(xiàn)問題
2、定義問題
3、分析問題
二、設(shè)計師如何解決的問題
1、明確設(shè)計目標(biāo)
2、制定設(shè)計策略
三、設(shè)計師如何驗證問題是否解決
1、收集用戶反饋
2、跟蹤數(shù)據(jù)指標(biāo)
四、舉個例子
五、總結(jié)一下

 

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

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

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

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

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

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

舉個例子

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

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

1、發(fā)現(xiàn)問題

通過項目背景不難發(fā)現(xiàn)其中問題所在：在不增加人員的情況下，當(dāng)前客服團隊的服務(wù)模式，已經(jīng)滿足不了現(xiàn)有的業(yè)務(wù)增長趨勢和客戶的品質(zhì)訴求。

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

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

2、定義問題

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

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

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

3、分析問題

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

方法就是

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

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

既然問題已經(jīng)確定了，那就要去解決問題。根據(jù)對問題的分析結(jié)果，該如何轉(zhuǎn)換為設(shè)計呢？

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

1、確定設(shè)計目標(biāo)

結(jié)合產(chǎn)品目標(biāo)（自助渠道升級、產(chǎn)品智能化/數(shù)據(jù)化）+用戶目標(biāo)=設(shè)計目標(biāo)的推導(dǎo)公式

產(chǎn)品目標(biāo)是產(chǎn)品經(jīng)理/需求方給到你的，但是用戶目標(biāo)則是設(shè)計師自己調(diào)研分析得來的

----用戶想做什么？

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

----客服想做什么？

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

----用戶的痛點？

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

----客服的痛點？

每天高負(fù)壓的的工作環(huán)境，枯燥重復(fù)的工作流程，敏感繁多的考核指標(biāo)。

2、制定設(shè)計策略

那在確定好設(shè)計目標(biāo)之后，就需要通過制定設(shè)計策略，以達到設(shè)計目標(biāo)。

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

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

項目上線后，我們需要去收集用戶反饋，關(guān)注我們設(shè)定好的指標(biāo)去衡量、驗證構(gòu)建的設(shè)計方案是否解決用了用戶問題以及是否達成了產(chǎn)品目標(biāo)，因為這樣設(shè)計工作才能實現(xiàn)一個閉環(huán)。

1、收集用戶反饋

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

2、跟蹤數(shù)據(jù)指標(biāo)

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

總結(jié)一下

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

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

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

如何選擇合適的B端設(shè)計風(fēng)格？

1.B端后臺分類：

根據(jù)服務(wù)對象劃分：

一類支持有C端前臺，支持前臺產(chǎn)品管理各種資源。第二類服務(wù)企業(yè)，提高企業(yè)工作效率和營收。

根據(jù)后臺功能：

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

2.數(shù)據(jù)分析：數(shù)據(jù)結(jié)果的對比和分析趨勢，時效性要求并不高，了解整體和各部分?jǐn)?shù)據(jù)水平，助力決策。

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

4.系統(tǒng)配置：權(quán)限配置、設(shè)備功能配置，操作為主。

2.后臺深淺兩大風(fēng)格分類：

淺色：

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

深色：

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

3.作者常向產(chǎn)品方提供的風(fēng)格參考

較常見

1.經(jīng)典商務(wù)風(fēng)（導(dǎo)航深、內(nèi)容淺）——專業(yè)、高效、成熟、可信賴（對照深色西裝人物形象）

      優(yōu)點：市面最常見的風(fēng)格，普世性高，大多數(shù)用戶可快速接受，層次分明

      缺點：視覺缺乏記憶點

 2.輕量科技感（導(dǎo)航淺、內(nèi)容淺）——簡潔、明快、輕量、年輕（對照白襯衫打領(lǐng)帶男性）

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

      缺點：純白色導(dǎo)航+頁面層次略曖昧。

 3.藍色科技風(fēng)（導(dǎo)航中、內(nèi)容中）

      適合：適合科技屬性強的產(chǎn)品界面，圖像圖形展示

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

 4.暗黑科技風(fēng)（導(dǎo)航深、內(nèi)容深）

      優(yōu)點：對色彩表現(xiàn)力強

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

4.精準(zhǔn)選擇風(fēng)格時可以進一步的考慮：

1.整體行業(yè)風(fēng)格

比如美妝和科技行業(yè)的整體設(shè)計基調(diào)就不太相同。

2.產(chǎn)品想要傳達的氣質(zhì)：

理性可靠 or  簡潔輕松輕量 or 關(guān)懷普世 or 酷炫吸睛….這個可以和相關(guān)產(chǎn)品經(jīng)理、銷售共同商討

3.目標(biāo)用戶的群體特點及喜好。

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

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

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

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

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

5.判斷獨立的平臺是否為獨立開發(fā)

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

5.如何讓后臺設(shè)計更具特色：

1.重點色的使用

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

2.圖標(biāo)的優(yōu)化

后臺高頻出現(xiàn)的圖標(biāo)，值得我們花時間去統(tǒng)一設(shè)計打磨，調(diào)整圓角粗細疏密，符合整體界面氣質(zhì)。從圖標(biāo)庫里拖出的圖標(biāo)很多在線條粗細上是不統(tǒng)一的，好的設(shè)計在細節(jié)處也要動人。

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

3.空狀態(tài)小插畫

空狀態(tài)插畫是B端設(shè)計師少有能發(fā)揮自己繪畫天賦小巧思的地方。

圖形化狀態(tài)語言，輔助用戶理解內(nèi)容。可以將產(chǎn)品機械蒼白的文案設(shè)計表現(xiàn)的更加具有溫度，具有引導(dǎo)性。讓乏味的工作出現(xiàn)一些共情小彩蛋，有趣的插圖動畫可以緩解等待的焦慮。

4.登錄注冊頁

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

插畫背景：場景化展示產(chǎn)品的功能及亮點，讓用戶更有心理預(yù)期

幾何圖形背景：最后和品牌圖形相關(guān)，加深用戶對產(chǎn)品的品牌印象。

照片背景：相關(guān)場景或產(chǎn)品類型，具象圖片信息更直觀

5.圓角的大小

不同大小的圓角傳達產(chǎn)品不同的氣質(zhì)，大圓角親和、小圓角精致、中等圓角大眾中庸。

6.優(yōu)化信息層級

優(yōu)化信息層級，區(qū)分信息主次可以使閱讀更快，操作更快，界面更有節(jié)奏感。

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

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

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

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

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

2.反常規(guī)用戶習(xí)慣的操作。尊重用戶習(xí)慣，不要為了個性化去嘗試改變，不要妄圖改變用戶的操作和認(rèn)知的慣性。慣性思維大于設(shè)計思維，曾經(jīng)遇到過產(chǎn)品因為右手操作所以要把導(dǎo)航放在右邊的離譜例子。

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

4.新人建議多看Antdesign和Element等成熟的組件，創(chuàng)新類組件樣式，最好和和開發(fā)商量是否能夠?qū)崿F(xiàn)。

5.在確定主要風(fēng)格及2-5張主要頁面后，就應(yīng)該著手基礎(chǔ)規(guī)范（色彩字體等，不然后面越做越亂）。

6.一段時間一個審美，同一界面中的元素風(fēng)格不統(tǒng)一。

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

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

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

本文將從理論到實踐，從軟件到插件，再到不同應(yīng)用場景拆解和團隊協(xié)同的重構(gòu)，一步步教你如何搭建產(chǎn)品KIT組件庫。也給大家?guī)砟嫣斓腁nima插件教程，組件化設(shè)計的必備插件，目前國內(nèi)還比較少有文章講到。手把手！嘴對嘴！堪稱全網(wǎng)最細保姆級教程！

01. 什么是KIT組件庫？

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

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

由Google推出的當(dāng)時媲美蘋果全新設(shè)計語言的Material Design，Material Design也是最為經(jīng)典組件庫設(shè)計?，F(xiàn)如今阿里的Ant Design和Element給我們提供了一套完整可復(fù)用的組件庫。

02. 原子設(shè)計理論

原子設(shè)計是將界面設(shè)計中最小元素——原子，組合嵌套為分子、組織、模板、頁面的系統(tǒng)規(guī)范化設(shè)計過程。

1.  原子 Atoms

原子Atoms，我們知道是指化學(xué)反應(yīng)不可再分的基本微粒。原子在化學(xué)反應(yīng)中不可分割，但在物理狀態(tài)中可以分割的。原子由原子核和繞核運動的電子組成，所以原子是構(gòu)成物質(zhì)的最小粒子這就不對了。

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

2. 分子 Molecules

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

3. 組織 Organisms

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

4. 模板 Templates

將組織與分子、原子進行特定的組合就形成了模板。這一步已經(jīng)能展示界面的主要功能和交互了。一般這一步得到的結(jié)果就是我們?nèi)粘９ぷ髦械脑蛨D，產(chǎn)品的大致形態(tài)也慢慢清晰。所以模板可以理解成未上色的界面。

5. 頁面 Pages

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

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

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

1.  命名規(guī)范

命名按照：一級分類 / 二級分類 / 三級分類 。例如：一級標(biāo)題樣式/蘋方/常規(guī)/灰階0

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

2. 樣式

（1）顏色樣式

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

（2）文字樣式

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

（3）樣式切換

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

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

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

1. 單個修改 - 解綁

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

2. 整體同步 - 更新

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

3. 組件

組件是將元素定義為標(biāo)準(zhǔn)化可復(fù)用的集合體，對組件進行規(guī)范的命名，形成高效設(shè)計的KIT組件庫。

（1）文本組件

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

（2）標(biāo)簽組件

1. 單個標(biāo)簽

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

2. 標(biāo)簽修改           
         

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

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

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

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

Tips：這里畫板的作用是

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

（2）畫板組件在創(chuàng)建后，調(diào)用時只固定大小和邊界。

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

3. 多個標(biāo)簽

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

4. Sketch素材調(diào)用

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

（3）容器組件整合

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

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

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

第三步：選中整體，在右側(cè)覆蓋層可對文本進行編輯，輸入文本字段，此時容器高度實現(xiàn)自適應(yīng)。

（4）組件的拆解與重構(gòu)

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

（5）Anima插件

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

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

1. PADDING功能

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

2. STACK功能

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

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

（1）統(tǒng)一（Unified）

1. 團隊不同成員或新來設(shè)計師之間協(xié)同配合，保證輸出的一致性和穩(wěn)定性。

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

（2）效率（Efficientcy）

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

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

（3）協(xié)同（Together）

1. 建立完善的設(shè)計規(guī)范和KIT組件庫，提高組件庫優(yōu)化迭代效率。組件庫團隊協(xié)同自動更新。

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

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

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

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

06. 團隊協(xié)同

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

第一步：新建一個Sketch文件，命名為「 *** KIT組件庫」，將組件都創(chuàng)建在新建文件內(nèi)。

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

第三步：直接調(diào)用定義好的組件。

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

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

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

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

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

1 公共藝術(shù)在地性觀念

“藝術(shù)是什么”

當(dāng)代藝術(shù)作品（圖片來源：網(wǎng)絡(luò)）

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

“什么是公共藝術(shù)”

公共藝術(shù)作品（圖片來源：網(wǎng)絡(luò)）

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

相較于說不清、道不明的“藝術(shù)”，公共藝術(shù)有別于純藝術(shù)“為我性”的情感抒發(fā)，更加強調(diào)藝術(shù)作品與空間、人之間有意識產(chǎn)生的情感聯(lián)系，用語言來概況其特性可以總結(jié)為：公共性、藝術(shù)性、在地性。

“什么是公共藝術(shù)在地性”

公共藝術(shù)作品《爬墻的熊貓》（圖片來源：網(wǎng)絡(luò)）

相較于“公共性”與“藝術(shù)性”的“基本性質(zhì)”，筆者認(rèn)為受“他人”影響而產(chǎn)生的“在地性”更能明顯地體現(xiàn)公共藝術(shù)中的文化關(guān)懷，什么是公共藝術(shù)在地性觀念，用一句話來概括：公共藝術(shù)與空間的關(guān)聯(lián)性。

縱觀藝術(shù)史，公共藝術(shù)的在地性范式可以總結(jié)為以下三類：

(一） 與空間的融合關(guān)聯(lián)性

古希臘帕特農(nóng)神廟（圖片來源：網(wǎng)絡(luò)）

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

(二） 與空間的沖突關(guān)聯(lián)性

藝術(shù)家佩爾施克策劃的公共藝術(shù)活動《紅球計劃》 （圖片來源：網(wǎng)絡(luò)）

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

藝術(shù)家奧登伯格創(chuàng)作的《世俗豐碑系列》（圖片來源：網(wǎng)絡(luò)）

(三） 與空間的無關(guān)聯(lián)性

《瑞秋豬》與《乳牛大游行》（圖片來源：網(wǎng)絡(luò)）

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

     

2 在地性藝術(shù)語言與UI設(shè)計-以沖突關(guān)聯(lián)性為例

(一）關(guān)聯(lián)性的意義

例子1

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

例子2

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

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

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

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

筆者認(rèn)為站在城市形象塑造的角度來看：

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

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

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

通俗性：大眾對其有相似的認(rèn)知與理解

原生性：夸張、未修飾的規(guī)模與形態(tài)來展示

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

(三）沖突關(guān)聯(lián)性語言在UI設(shè)計中的運用

例子1

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

例子2

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

例子3

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

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

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

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

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

  
  

簡而言之：

1、保證元素的通俗性，結(jié)合當(dāng)代語境，亦可以理解為#話題性#；

2、可跨領(lǐng)域找參考元素；

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

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

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

大綱

1、研究背景

2、案例分析

3、無障礙設(shè)計工具推薦

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

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

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

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

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

剛睡醒迷糊的你—暫時性的認(rèn)知障礙

 ……

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

城市無障礙坡道

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

傻傻分不清楚的洗發(fā)水和沐浴液

為了統(tǒng)一品牌設(shè)計語言，往往會將洗發(fā)水和沐浴液的瓶體設(shè)計成一樣，不僅是視障人士，任何人在閉上眼睛洗頭時都分辨不出來?；ㄍ踉?991年在瓶身做鋸齒狀處理用來區(qū)分兩個產(chǎn)品，通過觸感也可以輕松辨認(rèn)。

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

接下來就是軟件端的案例，軟件產(chǎn)品在無障礙設(shè)計的例子上也很多。

哈啰出行-司機端

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

滴滴-老年版

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

無障礙設(shè)計工具推薦

檢查色彩對比度

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

最權(quán)威的互聯(lián)網(wǎng)無障礙規(guī)范 —— WCAG2.1(Web Content Accessibility Guideline，Web內(nèi)容無障礙指南

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

對比度cheome插件：點擊這里

Funkify - 殘疾模擬器

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

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

屏幕閱讀器

用于在 Chrome 瀏覽器中朗讀內(nèi)容

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

Color Oracle-色弱；色盲模擬器

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

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

總結(jié)：

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

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

免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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