原文地址：Martin_K（站酷）

作者：Martin_K

轉載請注明：學UI網》為什么你始終做不好版式設計？

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

qiu~

變成了沈騰。

看到那根點燃的火柴嗎？

qiu~

變成了火腿腸。

從賈玲變成沈騰，將火柴變成火腿腸，有趣的同時卻沒有影響到整個畫面的調性，這便是移花接木的方法，設計理論叫做置換同構。 

這是一個8,這是一個蘋果，

你想到了什么？

利用蘋果置換成8的形狀，但顯然看起來有些粗糙，融合調整下，讓蘋果有了8的樣貌，當然還可以此類推成其他的樣式。

一個冰淇淋與一座富士山，找到近似相同可置換的區域。

在原有結構不變的基礎上，將冰淇淋替換成了富士山，創意就是這么簡單。

置換的理念是將兩個毫無關聯的圖像，比如這樣，將其中一部分與另一個部分替代，

形成一種新的組合形式，替代后的物體和原來造型保持相對的一致，置換的設計就產生了，當然這都是相對簡單的。

由此我們可以嘗試更多腦洞的置換設計，比如人在蛋黃里游泳，農場種在蛋黃里。

水壺倒出來的不是水而是云朵，順著這樣的思路還可以增加場景元素形成全新的創意設計。

置換同構的商業案例

▽

看到這樣一個場景，如果要做一個手機的海報，

你想到怎么置換嗎。

將場景調整成手機外邊的形狀，手機平躺在場景中。

放置主題文字，再利用相關的場景元素增加融合的真實感，這樣簡單、有趣、創意的設計就做好了。

原文地址：修先森撩設計（公眾號）

作者：修先森

轉載請注明：學UI網》還在為沒靈感發愁？那是沒學過移花接木這招！

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

以下作品主要是練習通過 Sketch & Adobe Illustrator 軟件配合實現立體圖標設計，掌握通過色彩的變化營造質感和光感。 

 

以下作品主要是練習圓柱體的繪制和光影的處理，以此來表現排行榜。配色比較趨向于年輕化，青春活潑的風格探索年輕化的設計趨勢。

 

這一組作品主要是研究極光風的配色和磨砂玻璃效果的結合，用磨砂玻璃層作為圖標的保護罩，帶來朦朧美的感官體驗。

 

隨著網民年輕化的趨勢，UI設計也逐漸趨近于更加青春活潑的風格。探索了一組低飽和度高明度的圖標配色，利用不透明度漸變實現晶白風格圖標。

 

這是在五一假期前繪制的一個相機 APP LOGO，探索多色環形組合來進行色感營造，利用簡單的內陰影和蒙版工具刻畫效果。

 

一組帶給大家好心情的 IP 表情設計作品，超橢圓的造型和青春可愛的風格結合，練習表情設計的能力和光影把控的技巧。情感化設計的技能被逐步放大，也是提高作品亮點和視覺感的一個不錯的方向。

 

想要休息的時候來了一個靈感，大家都喜歡喝咖啡，我還是比較喜歡喝茶~O(∩_∩)O哈哈~有感而發繪制了一個關于茶的 APP LOGO。

 

帶有紋理的球體繪制，你可以想象這是一個瑜伽球。利用 AI 軟件的 3D 功能進行造型繪制，然后利用 Sketch 軟件進行質感細節的刻畫完成。

 

這組作品主要是研究 B 端設計的柵格化系統，以及配色風格的嘗試。隨著 B 端 C 化的趨勢，在 UI設計層面的風格探索中，將會變得更為大膽，突破風格定義的束縛。

 

以上是近期輸出的一些 UI設計探索作品，后期將會繼續探索更多設計風格和細節的刻畫。

原文地址：黑馬家族（公眾號）

作者：黑馬青年

轉載請注明：學UI網》近期輸出的一些UI設計探索作品

  風格

常見的圖標風格有線性、面性、彩色、寫實、3D等，圖標的選用因頁面的設計風格、圖標的位置等原因會有所差異，主要的作用是反饋動作和吸引用戶更多注意力。

線形/面性：最基本也是做常用的風格，廣泛用在頁面設計中。

彩色：通常用于反饋用戶的操作或者增加用戶的注意力。

3D/寫實：當頁面中的某哥內容需要引起用戶高度注意時使用，一下抓住用戶的視線。

Tips: 現在字節、百度新推出的一些年輕化產品中，有很多精致的3D寫實圖標，極具個性，很好地迎合了年輕用戶的喜好。在扁平風格流行的當下，這樣的嘗試也是一種突破。

重量

簡單的線性圖標重量輕，看起來更簡約，不會給頁面帶來太大的視覺負擔。比如當頁面中已經有很豐富的圖片和內容，那么更適合選用簡約的、重量輕的線性/面形圖標，防止頁面過于雜亂。

相反，如果當前的頁面中只有文字，信息量很少，那么更適合利用重量大的彩色甚至3D圖標來增加頁面的豐富性，讓頁面看起來更有設計感，給用戶帶來視覺上的愉悅，簡約而不簡單。

屬性

構成圖標的元素包括描邊的粗細、端點的方圓、圓角的大小、色彩的輕重等，表達式規則是統一的，以便只給觀看者識別圖標所需的最小更改。

描邊粗細：手機上常用到的描邊粗細有2px、3px、4px。2px的看起來會顯得更加精致，4px的描邊視覺較重，可以用在優先級較高的區域作為功能性圖標,。

端點/節點：圖標的端點有平頭、圓頭和方頭，圖標的節點有斜接連接、圓角連接、斜角連接，具體使用哪種樣式要根據頁面的情況統一設置。

圓角半徑：方形的圖標邊角過于鋒利，用戶有時候看起來會不舒服，圓角圖標更圓滑，相對來說更容易讓用戶接受。雖然圓角用的更普遍，但具體使用哪種，還是要考慮頁面的整體風格再決定。

網格

圖標的外形有圓形、方形、三角形甚至不規則形狀的，所以我們很難將不同形狀的圖標尺寸完全統一。

這個時候網格就起到很關鍵的作用，有了網格相當于提前將圖標限定范圍，在網格范圍內根據圖標的重量和重心靈活調整大小，這樣會讓不同形狀的圖標看起來更統一。

視覺校正

由于設計軟件的局限性，雖然有些圖形已經居中對齊，但有時候還需要進行視覺校正。

最典型的圖標案例是“播放”圖標，利用設計軟件對齊中間的三角形后，會發現三角形的位置看起來偏左。

利用軟件對齊后，我們還需要再用眼睛確認一遍，我們可以將三角形向右移動，保證三角形的重心與圓形的重心一致，這樣整個播放圖標看起來會更舒服。

角度

設計圖標時，我們的第一反應是不帶透視的二維圖形。因為我們觀看手機的視角都是平視，所以大多數的圖標都沒有透視，看起來會更簡潔。

帶透視的圖標會給用戶營造一種空間感，可能會感到認知失調。雖然這種帶透視的圖標能引發用戶關注，但不建議這么設計。

比例

圖標比例通常使用8的倍數作為基準，例如8px、16px、24px和32px，以便在各種環境中進行流暢地切換。除此之外，在移動端等屏幕尺寸較小的頁面中，還會使用4px的倍數，來實現多功能性。

清晰

圖標的設計要使用用戶能夠快速理解的且最簡潔的元素。圖標的尺寸通常很小，要盡可能做到對用戶友好，可以使用一些簡單的隱喻設計，但含義不能過于復雜。

一個圖形能說明的問題，沒必要再添加多余的圖形。復雜的圖標可能需要花費用戶很長時間才能理解它們的含義，這樣反而會影響用戶的操作。

細節

這一點和剛才說到的圖標清晰道理一樣。圖標最重要的目標是快速傳遞信息，特別是對于尺寸很小的系統圖標，最好只保留最基本的內容，移除多余的裝飾元素。

一致性

這里說得一致性，并不是指一個產品中所有頁面都只能使用一種圖標風格。一個產品有很多頁面，線性、面性等多種圖標風格可以一起使用。

但在同一個頁面場景中，執行相同功能的圖標應該保持相同的樣式。

熟悉感

面對不同的操作系統，例如iOS和Android，同一功能對應的圖標也會有差異。針對不同的系統，我們可以選用大多數用戶熟悉的圖標，這樣用戶能更快地理解圖標的含義

最后

以上就是常用卻容易忽略的圖標設計細節，希望通過這些內容能幫助你對圖標設計有更深的認識。

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

作者：Clippp

轉載請注明：學YUI網》如何更好的設計圖標？優先注意這些容易被忽略的細節

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

我們先來分析一下這個 LOGO：

1. 基本形狀為字母 D；

2. 一大一小、一長一短均勻的進行向外發散漸變。

如果我們把一大一小、一長一短分別單拿出來，都是比較方便做出來的，先做出兩個不一樣的線然后繞著 D 的外輪廓混合就好，但是同時滿足這兩個條件的話，就需要采取其他的辦法，ok，下面我們來看一下演示步驟。

第一步，我們先把字母 D 的外輪廓畫出來，直接用一個方形右邊拉圓角即可！

然后我們選擇【對象】??【路徑】??【偏移路徑】，數值改為負數，向內縮小復制一個。

將里面的 D 左邊斷開，并連接到外面的 D 里面。

用上面同樣的方法再次向內整一個小 D。畫好后我們就可以直接刪掉它了…不是，刪一半就行，因為圖形是上下對稱的，我們先畫一半直接鏡像！可以事半功倍，能偷懶就偷懶。

畫完這三條線有啥用呢？不急，我們先從最外面的入手，先在左右兩個端點出分別畫一大一小的圓。

然后對這兩個圓進行混合，用【混合工具】分別點擊兩個圓，指定步數改為 9，然后再【替換混合軸】，就可以讓圓沿著我們畫好的路徑進行大小重復排列。

然后我們在最小的線的兩頭端點處分別畫一個很小很小的圓，再次執行前面同樣的操作，混合 9 步，替換混合軸。

然后我們分別讓上面的大圓對下面的小圓進行混合，步數給的大一些，這樣就會出現發散效果的圖形啦。（別忘了先擴展和取消編組）

那一大一小的發散該怎么實現呢？這就用到了我們第二根線了，我們分別把單數混合上面的圓向下移動到第二根線上，然后調整一下間距，就搞定了！

畫好一半了，直接鏡像復制一下，整體就出來了，然后我們給每一根線添加上漸變色。

最后加上排版就搞定了，這個 logo 的難點在于他是一大一小的進行發散，所以直接用單個線來混合達不到這個效果，所以我們就采取單一作戰模式，用同樣的方法，選擇不同的混合對象，會實現不同的效果。

紅點獎作為世界三大設計獎之一，一直以來都是設計師們夢寐以求想要獲得的獎項，它的 logo 大家應該都很熟悉，但這種球形環繞式 LOGO 很多同學都不知道應該怎么實現，ok，下面我們就來設計一個紅點獎頒給日夜操勞卻依舊菜 b 的自己…

首先第一步我們先畫兩條相等長方形，其中第一個填充為紅色，第二個去掉填充色和描邊。

然后我們就向下復制多個，但也不用太多，給太多不好…

之后調出符號窗口，將這個圖形編組后整體移動到符號窗口里面，也可以取一個好聽的名字，雖然沒什么用。

放完后先不管它，我們額外畫一個圓形，注意用描邊模式，之后砍掉它的一半。

選擇【效果】??【3D】??【繞轉】

先選擇【貼圖】，將符號部分改成我們剛才設置的圖形，然后點擊【縮放適用】及【三維模型不可見】，可以適當拉高拉寬，之后確定回到繞轉頁面，拖動左邊的方塊更改它的繞轉方向，然后選擇下方【表面】改為無底紋。

得到新的圖形之后，是漫長的取消編組和擴展，多操作幾次，你就可以得到下面兩個部分。

將他們居中對齊，然后給下面的圖形增加一個漸變，這樣效果就出來了！

最后就是更改一下細節了，將上面和下面的部分可以單獨切一下，做出一個角度。ok，基本的方法就是這樣啦，雖然最終效果和紅點的原 logo 不太一樣，有點像破產版，但沒辦法，想得到真正的紅點獎，還得靠你自己的努力！?。?

我們在遇到相對比較復雜的圖形的時候，一般就會用到形狀生成器工具，它可以通過合并或刪減簡單形狀創建出復雜的形狀，掌握了這個工具，可以說你的 logo 就多了無數種可能性。下面我們通過一個看起來比較復雜案例來演示一下如何使用它！

越是看似復雜的東西，往往越具備一定的規律性，我們看一下這個圖形，可以發現它是由一個部件通過旋轉復制得到的，如下圖：

所以我們只需要把這紅色部分先繪制出來，就很容易畫出來了！我們看一下操作步驟。

第一步先畫出他的網格，先畫出橫線部分，再傾斜 60 得到右斜線，然后將有斜線鏡像復制出左，最后三組居中對齊。

接著我們畫出它的圓形框架，注意與線段的對齊關系。

ok，這樣就把所有的網格線全部繪制好啦！這個時候就可以回到開始的時候講的，我們只繪制那六分之一的圖形即可。選擇【形狀生成器工具】按住 alt，將多余的線刪除（記得提前復制一份圓備用）。

得到這個圖形后，我們將它描邊加粗一些，然后擴展，之后繞大圓圓心旋轉 60 度復制一圈（為了方便切割，我們把線往外延伸一些）。

這時候我們再次請出形狀生成器工具，一是將大圓外圈的部分刪掉，二是將內部閉合的地方填充上。

最后我們再在中間連接一個矩形色塊，就做好啦！為了充分體現形狀生成工具的強大功能，特意選了這么個復雜的 logo，真是累瞎了我的狗眼… 總之總之，形狀生成器工具的作用有很多，可以提取閉合圖形，可以刪除多余圖形，線或者面都可以進行操作！

我們無論是在做 logo 還是做輔助圖形的時候，這種異形扭曲空間圖形真的很常見，它們看似復雜，其實用一個工具就可以搞定，就是封套扭曲工具。

他一共有三種表現形式，第一個是用變形建立，也就是我們在效果中看到的旗形、波形、魚形等，常用于文字；

第二種是用頂層對象建立，比如先畫一個蘋果，然后打上文字介紹，用這個建立就可以讓文字扭曲成蘋果的形狀；

而第三種，用網格建立，是可控性非常強的扭曲變形，我們通過建立網格體系產生大量的錨點，拖動任意一個都可以產生不同的變化，下面我們就用這個方法來做一下這個 logo。

第一步，我們先畫一個長方形，向下均勻復制多個，形成多個等距的長條。（也可以用混合工具）。

第二步，給圖形添加漸變色。

第三步，我們選擇圖形，執行【對象】?【封套扭曲】?【用網格建立】，行數和列數均設為 1。

然后就是關鍵的一步了，我們用直接選擇工具（A）拖動調整網格的錨點和手柄，得到一個扭曲的圖形（如下圖 1234 各點的位置變換）。

調整完之后將圖形擴展，用形狀生成器工具將中間重合多余的地方刪掉（按住 alt 刪除）。

ok，最后加上排版，一個通過扭曲得到的抽象鳥 logo 就做好了，這個方法基本的套路就是這樣了，主要在于錨點搖桿的調節和把控，另外，在設置網格半徑時，數值越大，可操作的空間及難度也就越大，大家可以多去試試看。

參加過波波品牌課的同學們應該都知道，這類 logo 就是貴為九大構成之一的重復構成！因為特有的重復性和規則性，使它呈現出來的效果會很高級很實用。但是我看很多同學在做的時候都是單個的縮小放大擺放…這樣往往是很不標準的，下面給大家安利一個簡便高效的方法！

首先第一步我們還是先把基礎圖形畫出來，用鋼筆工具勾一個造型即可，注意線條要絲滑一些！

然后就是重點部分了，我們選擇【效果】??【扭曲和變換】??【變換】依次調整一下的參數（參數不是固定的，要打開預覽根據自己的實際情況來設置）

縮放：控制變換的大小對比

移動：控制變換的路徑方向

旋轉：控制變換的路徑角度

副本：變化添加的圖形數量

ok，調整完后就可以得到下面這個造型了！

然后我們給它添加顏色啦，這里再來一個快速設置漸變色塊的方式，先做好最深色和最淺色，然后用混合工具很容易就做出來了。

做好顏色后我們就一個一個的給它上色就可以了。

最后加上底色和排版就搞定啦！

變換這個方法真的非常好用，非常適合重復構成的 logo，這里給大家留個小作業，可以用這個方法試著自己做一下華為的 logo。

立體 logo 往往擁有比純扁平 logo 更加良好的視覺展示，在色彩上也更多運用漸變色進行搭配，使其更具吸引力。

但是實現起來往往比扁平 logo 要困難的多。下面我們通過這個案例來演示一下繪制立體 logo 常用方法。

先簡單分析一下：

由三個立方體堆積搭配漸變色形成視覺錯位感，ok，我們第一個思路就是先從單個立方體入手，下面我們就來繪制一下立方體。

首先我們畫一個正方形，大小給到 80px（也可以是其他數值，但要記住這個數值）。

點擊【效果】??【3D】??【凸出與斜角】，執行三步操作：

1. 將位置改為等角上方；

2. 凸出厚度改為 80 的兩倍也就是 160；

3. 表面材質選擇無底紋。之后點擊確定。

這樣一個基礎立方體就出現啦，為了方便后面的操作，我們可以換成描邊模式。然后通過這個立方體進行旋轉，分別旋轉 -30、-150，90 度得到三個不同傾斜角度的立方體。

將他們組合在一起，然后用形狀生成工具繪制出錯位感。

再依次給每個面添加上漸變色，就完成啦！

那除了這個方法還可以怎么做呢？假設我們已經畫好了草圖，在草圖的基礎上繪制 3Dlogo 的時候，可以使用網格大法！

可以看到這個圖形的斜邊是直線傾斜 30 度來完成的，那我們就可以用這個角度先把網格繪制出來。

然后通過網格可以直接用【形狀生成工具】或【實時上色工具】將視覺錯位之后的圖形繪制出來，省去了 3D 的步驟。

之后就和第一種方法一樣添加漸變就完成了，這個方法比較適用于在已經有草圖或想法的基礎上來繪制，會更精確更快捷，如果是想單純的繪制立體圖形，那還是更多的用第一種 3D 凸出與斜角的方式。

這是全球市場調研咨詢公司 PRS IN VIVO 推出全新品牌 LOGO，相信大家看到它應該不會陌生，沒錯，它就是運用了彩色半調效果來進行視覺設計。它會幫你生成一個波點圓形點陣，呈現出一種像素化感覺，同時也是波普藝術中重要的變現形式，下面我們就看一下如何做出彩色半調效果的 logo。

我們在進行設計前，先新建一個 cmyk 模式的畫板，分辨率也給的大一點。

我們畫一個正圓，給它添加一個黑白漸變。

將漸變模式改為徑向漸變，再點擊反向漸變，再將黑色部分改的稍微灰一點，得到一個新的漸變圓形。

然后我們就用這個圖形進行彩色半調。【效果】?【像素化】?【彩色半調】

那么如何控制點陣中原點的排列疏密和數量呢？

我們在進行彩色半調的時候，會添加一個半徑參數，這里數值就決定了點陣的數量（也可以隨便輸入一個數值，然后放大縮小圓形進行控制）而疏密程度，則是由一開始我們給予黑色的黑度所控制的，越黑越密，越淺越疏。

OK，調整完參數后，我們將它變成矢量圖形。具體操作為：

1.【對象】?【柵格化】

2.【圖像描摹】?【黑白徽標】?【擴展】

這樣一個矢量的彩色半調圓形點陣就做好了，之后添加一個粗一點描邊的圓框，將圓框與之前的圓重復部分用形狀生成工具提取出來，刪除多余的波點，再添加漸變和文字排版，就得到了這個 logo 圖形。

彩色半調不僅僅局限于圓形哦，其他任何形狀都可以用這個方法進行點狀像素化，還不快去試試？

上面這些圖，雖然可能沒有見過，但大家一定都不會太陌生，是的，上面的圖形都是用黃金比例圓來完成的，只要是做過 logo 有一定時長的同學就一定會接觸。我也曾經遇到過好多次客戶直接在設計需求中點出了要用黃金分割比例做設計圖形…至于它為什么好看，那不是我們今天所研究的，今天只負責教會你該怎么用！

工欲善其事，必先利其器。想要用黃金比例來繪制圖形，那首先你得把黃金分割比例的圓先做出來，這里介紹兩種比較方便快速的繪制方法：

第一種是黃金比例分割，也就是通過繪制 0.618 倍數的多個圖形，如下圖。

但是我們在實操中沒有必要用這么規整的來方形堆積來繪制，只需用一個工具就可輕松搞定！

雙擊【比例縮放工具】，等比數值改為 61.8%，點擊復制。

這樣就得到了 1：0.618 的兩個圓啦，我們只需按住 CTRL+D，重復復制多個，一個黃金比例圓就畫好了！

第二種方法是利用斐波那契數列繪制。斐波那契數列指的是：1，1，2，3，5，8，13，21，34，55，89…這樣從第三項開始，每一項都等于前兩項只和。換算成設計語言的話就是這么個圖形：

我們用這個結構，把每一個正方形都換成圓形，組合起來就是一個黃金分割比例的圓形環。

以上兩種方法哪一種都可以！靈活運用！下面我們就用畫好的黃金比例圓來繪制 logo。

首先，你得先畫一個草圖…紙上或者 PS 都可以，將它墊底。

然后我們把黃金比例圓放進來，注意不要隨意放大縮小，先整體編組，將最大的圓環對準圖形最大的弧線部分，之后就可以將剩下的圓進行一一對應擺放了。（可無限重復使用，一些小細節可以適當拉大拉小一點點）

擺完之后我們用【形狀生成工具】或【實時上色工具】，將切割得到的大象繪制出來！

黃金比例固然好，但是我們在設計的過程中不能過度的去依賴它，畢竟無論你用不用它，只要 logo 是好看的，那就有價值！PS：不過它確確實實能夠為你的提案加分…很多客戶都吃這一套，噓…

好勒，八個案例全部完事了，不知道大家吸收的怎么樣，其實雖然分了八個方向，但有很多技法都是互相通用的，而且AI中隱藏的小技法遠遠不止這些，相信跟著一起實操過來的你，一定可以豐富自己的武器庫，給自己的LOGO作品集，增添一大波可能性！

好了，時候不早了，做 AI（Adobe illustrator）也做的有些累了，大家晚安！記得實操！

作者： 告白天

轉載請注明：學UI網》拿捏8種LOGO設計技法！

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

準備好了嗎？

工具：Photoshop、手繪板

筆刷：art-markers：Round kyle 70（文末附筆刷下載鏈接）

適合：板繪零基礎入門

馬克筆筆刷的亮點：疊色

打開PS，新建一個2000px*2000px的文檔，顏色模式為RGB。

我們不要急著開始畫，先試試用馬克筆筆刷Round kyle 70畫出藍色的水平線和波浪線，熟悉一下筆刷畫出的效果，和筆刷培養一下感情。

這個過程中，你會發現，這個筆刷如果只是從頭到尾畫一條線，看起來很平淡，但如果在藍色線條之上多畫上另一條紅色線，兩條線的交叉位置就出現一個顏色更深的“點”，我們把它叫做疊色區，它能讓整個造型變得不俗氣，高級起來了~

盆，盆栽的盆

這時，我們正式開始畫小盆栽啦，用筆刷畫出一條藍綠色水平線。然后再畫出整個容器的“身體”。

step 01

這里要營造一個小心機，不要讓水平線和容器身體連接起來，這樣就能制造一個斷線，斷線表示我們下筆也是要休息的，這是一種線條的呼吸，極簡的感覺就是這樣來的。

step 02

用亮藍色畫出盆上的花紋，這里我用了波浪線，還可以把它畫出框。

畫的是植物沒錯

高級的感覺靠的就是“有技巧的畫不像”來制造的，比如植物大都是綠色，但我們這里用了紅色。這種故意用錯顏色的方法，就會讓畫面看起來很時尚。

step 03

試一下，用紅色線條畫出植物。植物葉片很簡單，由一條線加一個圓圈組成。

這里注意一下，相同的顏色也可以制造疊色效果哦。

第二幅，來多一點裝飾

有點感覺了嗎？再來試試另一個盆栽吧~

step 04

這個花盆的造型是個六邊形，用亮藍色先畫花盆的上下兩條等長的水平線，然后用紅色畫出花盆的左邊和右邊的折線，框出一個花盆輪廓。

step 05

再用黑色畫出花盆內部的線條，花盆中間就不會顯得空空蕩蕩。

step 06

在花盆上面的左右兩邊分別畫上兩片葉子，像兩個貓耳朵。然后再畫出中間的葉片，葉片和葉片之間可以疊色表現，看起來就像一頂皇冠。最后再在上方繼續畫葉子，類似菠蘿頭的造型。

step 07

最后，我們再用紅色在每片葉子尖上畫一個小線條，就像給葉子涂指甲油。這是一個點睛之筆，多肉的顏值就又提升了。

最后把畫好的兩幅小盆栽放在一起，看看效果~每幅小畫我們都可以配點文字，有點儀式感，這樣畫起來也很有趣。

拿去練吧~從簡單開始

最后，這里的有我畫好的一頁簡筆畫練習，不焦，不躁，一天進步一點點吧~

長圖版更適合臨?。?

筆刷下載地址

百度網盤下載

鏈接：https://pan.baidu.com/s/1OdfNVJID_Cq3UbgawGQxbw

提取碼：aqdb

原文地址：飛屋設計

作者：飛屋睿UIdesign

轉載請注明：學UI網》超級可愛！插畫萌新必學的PS極簡馬克筆簡筆畫：盆栽篇

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

在團隊活動時，從搭檔的一個眼神我們就能預判他接下來的動作，相互的默契配合能讓我們順利地完成任務，在產品設計中的預判設計也可以得到事半功倍的效果。

我們可以從歷史記錄、效果預知、智能輔助和行為慣性4個方面進行設計，輔助用戶決策，提升操作效率。

1.歷史記錄

a.用戶操作行為記錄

廣告優化師通常會管理幾十至上百個賬號，需要在多個賬號之間頻繁切換去盯盤和新建廣告，頻繁的操作難免會造成信息遺忘和決策卡頓，從而會影響操作效率。在管理后臺的設計中可以通過記錄用戶最近操作行為，恰合時宜地為用戶提供幫助。

案例：在新建計劃環節，標識出本賬號上次的選擇記錄（最近一次的投放目標），輔助優化師快速做決策。

b.基于操作習慣的系統預測

平臺系統可基于個體操作習慣和大數據分析來預測用戶需求，提供高概率的操作建議，給予用戶貼心指導。

案例：針對廣告平臺表格信息密集，不易快速獲取關鍵指標的問題，Google提供了用戶自定義欄，而Facebook的表格欄會根據用戶列操作習慣和自定義欄行為進行大數據分析，預置一些高頻意圖的組合欄，一鍵切換即可查看關鍵指標，操作更便捷。

2.效果預知

a.效果預覽

表單頁對填寫的物料內容進行映射，展示真實效果預覽，降低用戶心理的不確定性。

案例：在進行廣告創意創建的過程中，優化師填寫完標題和上傳完物料后很難知道廣告投放到手機端用戶看的真實效果。而所見即所得的可視化編輯方法支持創意樣式實時預覽，可以輔助優化師更好地進行創意優化。

b.效益預估

針對一些需要效力評估的頁面，平臺通過預置好的算法對用戶內容的表達及時給出估算值，給出建議，從而提高內容填寫質量，降低填寫的盲目性。

案例：Google廣告平臺在新建創意環節，對廣告素材資源的組合方式和數量進行估算，呈現當前廣告與高質量廣告設置的差距，輔助用戶進行高質量的廣告制作。

3.智能輔助

用戶在進行輸入等操作時可以提供智能輔助，例如表單填寫時對需要錄入信息的區域提供輔助提示，通過自動補全或聯想詞來幫助用戶快速錄入信息，在保持用戶的操作自由度的情況下提效。

4.行為慣性

在一些場景里，用戶的行為具有很強的關聯慣性，例如上班時間進到辦公區域打開辦公APP首要目的一般是打卡簽到。通過梳理主線任務或整理用戶體驗地圖可以挖掘出很多基于行為預判的設計機會點。

案例：預判用戶在工作臺內截屏后大概率是去反饋遇到的問題，適時將反饋入口透出，可以提高反饋的效率和用戶體驗。

二、表達清晰

現實生活中，在與他人交往時，清晰的表達尤為重要。同樣是演講，有的演講者“詞不達意”沒有重點，或者內容晦澀難懂讓聽眾感覺索然無味；而好的演講者則會用場景化的方式將邏輯復雜的事情講給聽眾，讓聽眾有身臨其境的畫面感。

好的設計也應該是清晰好用的，能讓用戶沉浸其中輕松高效地完成自己的任務。

如何讓用戶通俗易懂地了解產品功能，并能快速上手？我們可以從功能易理解、內容強吸引和選擇無負擔三個方面來降低用戶的操作門檻。

1.功能易理解

a.術語轉換

將一些晦澀難懂的詞匯轉化表達方式，轉化為更貼近用戶視角的文案描述，傳遞細節感受；

b.信息有效展示

透過需求背后的真實意圖分析和高效率的信息展示可以讓用戶更方便地獲取更多信息，提升產品的服務效益。

案例：服務器預警平臺從傳統的表格形式優化成拓撲圖。將所有的云服務器都抽象成一個個矩形，矩形的顏色代表服務器監控指標的狀況。當方塊顏色顯示為黃色，則表示該云服務器內有監控指標出現了異常，這個時候目標用戶就需要重點關注。

2.內容強吸引

對于老用戶來說，從之前習慣的平臺遷移到新的平臺一般會有很大的抵觸心理。遷移前用戶考慮的關鍵點包括：不遷移是否有影響？新平臺有什么優勢嗎？遷移起來麻煩嗎？

以百度營銷客戶中心遷移引導頁方案為例，初期方案首屏只告訴用戶平臺升級了，但是不能快速了解到升級后的核心優勢有哪些，同時遷移按鈕設計得很弱，傳達的信息是遷移可能會很麻煩，很容易讓用戶止步于此。

所以在進入遷移導流頁面時，首屏首先要講清楚新版平臺的能力和遷移方式。對于當下想遷移的用戶，明確遷移方式和入口；對于徘徊不定的用戶，告知遷移后的好處并做好最后下線時間的提示。這些信息不僅能夠消除用戶遷移前關于成本的顧慮，也能吸引用戶立即開始遷移行動。

3.選擇無負擔

B端產品操作鏈路通常比較長，用戶很容易迷失其中。對于邏輯復雜的功能在做頁面設計時需要突出主次和流程引導，盡可能提供一個主要觸發的主按鈕，讓客戶不用過多思考就知道模塊和操作的隸屬關系，降低認知的負擔。

三、操作可控

我們在執行任務時總是希望有過往經驗可借鑒，如果事情按照自己的預期發展了會覺得很踏實有可控感。同理，用戶在操作一個系統界面時也會有類似的心理變化，對于自己熟悉的功能希望主動權在自己手里，能復用之前的經驗無需額外的學習成本；對自己不熟悉的功能希望有及時的引導，能很快地上手并能掌握主動權。

不可控的操作體驗會讓用戶在使用過程中產生很強的挫敗感，一旦有了這樣的心理感受就很難被扭轉。那如何保障體驗的基線確保用戶正向的感受呢？下面就結合操作一致性和明確指引性兩方面進行說明。

1.操作一致性

針對同類型的功能，在交互設計上要盡可能地保持邏輯對齊，保證平臺的一致性同時降低用戶的學習成本。一致性設計對產研提效也有很大的益處。

案例：下例中的批量操作項的邏輯，都是通過選中復選框之后在模塊上方展示批量操作欄且支持一鍵關閉。這樣該平臺的用戶無論在任何場景下只要注意到復選框就對批量操作功能有了預期，沒有額外的學習成本。

2.明確指引性

對于復雜的使?流程，最好能夠在客戶使?的過程中建立統一的指引，引導客戶?步步完成操作，從而提高任務的完成率，促成業務目標達成。

案例：當一個平臺需要用戶完成的任務繁多且流程性強時，需要把所有的核心任務按照層級進行呈現，并作為一個固定模塊展示在醒目位置。這樣用戶既可全局視角理解業務又能作為功能入口快速觸達。

寫在最后

B端業務中，交互設計的核心在于為特定場景設計擇優的行為路徑；通過分析用戶當前所處的階段和場景來判斷此刻遇到的關鍵問題。針對不同的問題去選擇對應的解決策略，例如對于新手來說降門檻會是首要任務，對于熟手來說操作的效率會顯得更為重要。結合預判設計、表達清晰、操作可控三個維度的案例可以讓我們在對業務理解有限的情況下，產品設計能有更多思考角度，也能有更明確的設計主張。

原文地址：百度MEUX（公眾號）

作者：商業用戶體驗部

轉載請注明：學UI網》這些設計小妙招，助力B端產品體驗提升

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

序言

咦，同樣是用Figma，為什么同桌小花早早下班，隔壁二狗歲月靜好，而你卻在Figma中焦頭爛額？設計提速的秘訣就在于Figma中功能各異的插件。但當打開Figma插件庫，海量插件讓人頭暈眼花，究竟哪一款才是最適合你的呢？為此QQ設計師在日常工作中反復實驗，終于找到了這些寶藏插件，讓UI設計領域的你成為高效的設計師。

1、Skale-縮放能力增強工具

很多設計師在從Sketch轉換使用Figma的時候，找不到對應Sketch里的縮放功能。此時你就需要Skale，這是一款熱門好用的縮放插件，可以設置元素縮放中心，縮放比例或者縮放到特定的寬度、高度（包括該對象的所有屬性也會隨之縮放）。

下載地址：https://www.figma.com/community/plugin/808289809557716614/skale

2、To Path-路徑上創建圖形和文字

經常做平面的設計師會遇到的一個問題，Figma內要如何在創建曲線的文字呢？你不妨可以使用To Path插件，它的功能是可以按照指定的路徑來變換圖形和文字。

下載地址：https://www.figma.com/community/plugin/751576264585242935/To-Path

3、Morph-快速創建特殊效果

Morph可以在Figma內快速創建一些特殊視覺效果，如浮雕，霓虹燈，抖音故障效果，倒影，玻璃等?？梢詭椭O計師快速進行一些風格化的嘗試和探索。

下載地址：https://www.figma.com/community/plugin/906950256777348534/Morph

4、Mesh Gradient-網格漸變工具

當我們需要多種顏色混合漸變的效果時，Mesh Gradient的作用是可以在Figma內以網格的形式編輯漸變，你可以編輯、拖動、填充這些網格點，做出極光的效果。

下載地址：https://www.figma.com/community/plugin/958202093377483021/Mesh-Gradient

5、Webgradients-配色靈感工具

做設計非常常用的一個方法就是多去嘗試，當我們在做某個界面的時候不知道配色該如何處理的時候，可以使用Webgradients插件內置的多種高級配色，或許你的靈感就此誕生。

下載地址：https://www.figma.com/community/plugin/802147585857776440/Webgradients

6、Auto Layout Styles-自動布局管理

相比Sketch，Figma在Auto layou方面極大的提升了設計靈活度。而Auto Layout Styles插件可以很好的管理或者單獨對某幾個元素配置Auto Layout，設計師可以在插件內設置好布局關系并進行命名，然后應用到設計中。還可以對已經設置好的布局樣式進行修改，Auto Layout Styles會同步到所有調用過這個布局樣式的元素中。

下載地址：https://www.figma.com/community/plugin/939173063111899081/Auto-Layout-Styles

7、Batch Styler-批量修改文本和顏色樣式

大家在工作中經常會需要去修改大量樣式，這時候你就可以使用Batch Styler插件，它的主要提效點在于可以批量修改顏色屬性樣式，批量更改排版樣式，批量刪除、重命名樣式。

下載地址：https://www.figma.com/community/plugin/818203235789864127/Batch-Styler

8、Styler-快速創建樣式

當需要批量創建樣式的時候，手動逐個去創建并不是有效的做法，而Styler插件可以快速批量創建樣式（包括文本，顏色，效果等），它可以基于圖層屬性批量創建、修改或更新樣式，當設計師在搭建組件庫樣式的時候，Styler可以大大提高工作效率。

下載地址：https://www.figma.com/community/plugin/820660579767995949/Styler

9、Design System Organizer-管理設計系統

設計師在Figma內搭建組件庫時，Design System Organizer插件可以更方便設計師創建，管理和修改組件庫。超級提效實用的功能包含：1.像文件管理器一般管理組件內容。2.項目在類別樹之間拖拽移動。3.文件之前批量轉移樣式。4.批量重新鏈接實例和樣式。

下載地址：https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer

10、Breakpoints-響應式斷點插件

在Figma內，當需要展示界面因為拉伸拖拽而發生響應變化的效果時，使用口頭描述和各種靜態界面標注并不是最優解，使用Breakpoints插件，可以做一些響應式動態布局的效果，并共享動畫原型。即使團隊其他設計師沒有安裝這個插件，也可以在拉伸界面時預覽到動態布局。

下載地址：https://www.figma.com/community/plugin/824289601590456356/Breakpoints

11、Themer-UI界面主題管理

同時設計深色模式和淺色模式的視覺稿會耗費設計師不必要的精力，Themer的主要功能包括一鍵切換樣式，主題管理，團隊共享主題。能夠從團隊庫中的已發布的組件創建和交換主題。將其作用于顏色、文本和效果樣式的替換。設計師使用Themer可以一鍵切換成深色模式和淺色模式的設計稿，避免無效的適配模式工作。

下載地址：https://www.figma.com/community/plugin/731176732337510831/Themer 

12、Motion-關鍵幀動畫

當需要在做界面的動畫時，很多設計師會問，Figma要如何導入AE？其實未必要導入AE才能做動畫。Motion插件的作用是可以直接在Figma內完成關鍵幀動畫設計，將大部分圖層屬性創建成關鍵幀動畫，避免設計師做動畫時需要不停切換設計工具，在Figma內就可以輕松愉快的完成靜態和動態的設計稿。

下載地址：https://www.figma.com/community/plugin/889777319208467032/Motion

13、LottieFiles-導入和瀏覽Lottie資源

在Figma內使用LottieFiles可以將自己的dotLottie（.lottie）和Lottie JSON（.json）文件導入Figma作為gif動畫或高質量的svg圖層，且可以訪問和預覽免費Lottie動畫庫內的資源，意味著有時候設計師甚至不需要使用其他設計軟件來配合展示UI動畫。

下載地址：https://www.figma.com/community/plugin/809860933081065308/LottieFiles

結語

設計工具與設計師是相輔相成的。所有的設計工具本身都有局限，但合理利用插件可以放大工具的價值，為設計提效，讓設計師有更多的時間去思考設計方案本身。

你在設計中是否也遇到過一些寶藏插件呢？歡迎在評論區分享給我們，大家一起做最高效的設計師~

Tips：

配合上期“工具趨勢”閱讀，收獲更多噢~

設計效率工具趨勢 ｜ 綜述篇

原文地址：騰訊ISUX

作者：ISUX設計

轉載請注明：學UI網》設計提效-Figma插件篇

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

對于漸變一詞的解釋：“一種有規律性的變化”。作為設計師我們提到漸變，首先想到的就是漸變色，在工作中漸變色的使用隨處可見，比如色彩搭配、文字處理、圖形圖標等等。

那么在設計中使用漸變色具體有哪些作用呢？希望本期文章對你有所幫助。

你也許不止一次的在工作中使用漸變色，但你對漸變色的了解有多少？它有哪些屬性？如何分類？

接下來讓我們重新認識一下漸變色。漸變可分為有規則和不規則兩種。

所謂有規則，顧名思義就是可以通過一些具體參數進行調整的。

首先從基礎屬性上來看，漸變色會根據方向、長短的不同，呈現出不同的視覺表現形式。

方向區別：

長短的區別：

在保證其他屬性不變，只改變其長度時：漸變越長，色彩的變化越平緩；反之就會越急促。

如果將設計中的漸變色進行簡單分類的話，可以根據漸變呈現的樣式和顏色屬性作為分類切入點。

從呈現樣式上區分的話，可以將常用的漸變色分為線性、徑向、角度、對稱、菱形。

根據色彩色相數量的不同，可以將漸變色分為：無彩色、單色、多色。

同理可以根據色彩的明度和飽和度不同，將漸變色分為高明度、低明度、高飽和度、低飽和度。

再來說下不規則的，就是沒有太多規律、主觀性比較強，工作中常用的就是通過濾鏡中的模糊或模糊畫廊里的模糊工具，制作不規則漸變。

下面列舉幾個比較常用的制作不規則漸變的方法：

① 利用高斯模糊制作。

方法：繪制圖形填充合適的顏色，通過模糊工具調整。

② 利用光圈模糊工具

方法：繪制圖形之后，通過模糊畫廊里的光圈模糊工具，對其每個圖形進行模糊處理，多調整即可。

③ 利用液化、路徑模糊工具

方法：簡單畫幾個圖形，填充顏色之后用液化工具隨便涂抹兩下，再通過路徑模糊進行調整。

這里給大家提供幾個制作思路，工具使用的先后順序不同，得到的結果也不同，都是嘗試嘗試，也許會有意想不到的效果。

所以你會發現，漸變色的表現形式是多種多樣的，就跟我們上學時候學習排列組合一樣，每種不同的組合都會產生不一樣的結果。

重新認識漸變色，目的是讓你對其有更系統的理解和認知，那么接下來就詳細說下：漸變色在設計中的妙用有哪些？

對于“質感”一詞，百科上是這么解釋的：指造型藝術中運用不同的表現手段表現出的各種不同物體所具有的特質。

如金屬、竹木、陶瓷、玻璃、呢絨等的軟硬、輕重、粗細、糙滑等真實感覺。

而漸變色對于我們營造整體設計質感，有一定的輔助作用，用最簡單的漸變色和純色對比：

單純只看背景的話，很明顯右側漸變色背景在視覺表現上質感更強、也更加豐富，下面結合案例來看，你認為哪款海報質感更強？

比如我們經常會看到一些工業設計，在展示產品時經常會用到一些單色漸變或無彩色漸變作為背景。

如上圖所示，背景使用漸變色的目的也很明顯，更利于產品質感的凸顯，與產品本身形成視覺上的呼應。

接下來我們用AirPods耳機做個演示：

不改變整體元素，只在其背景上拉個簡單的灰到白的漸變：

是不是感覺質感提升了很多？

類似的案例還有：

綜合來看，一般當漸變色的目的是提升整體質感時，多為無彩色漸變或單色漸變。

在設計工作中，畫面空、枯燥乏味是很多設計師容易碰到的棘手問題，面對“空”最常見的解決方式就是做加法，也就是說增加視覺元素，而色彩也是視覺元素的一種。

漸變色在視覺上會給人很強的節奏感和審美情趣，通俗來講：相比純色，漸變色在視覺上的變化更豐富、層次感更強。

人們對于色彩的感知度是非常敏感的，所以當我們的設計作品出現單調、缺少層次感時，通過改變色彩屬性，營造更多視覺上的變化，也能幫助我們解決問題。

比如使用漸變色，就是能很好的解決上述問題，下面看個簡單的案例：

通過案例對比我們不難發現：在只改變背景配色的情況下，漸變色背景讓作品整體在視覺上變得更加豐富、有層次感。

類似的案例還有很多：

不僅如此，豐富畫面的漸變色不只是局限于背景，還可以是文字、裝飾元素、圖形等等，前提是要兼顧整體性，以免出現亂的現象。

下面做個案例，用最近很火的歌曲《漠河舞廳》擼個簡單的海報，先把文字和構圖確定好。

整體略顯單調，簡單做下調整，適當的加些裝飾的元素。

這樣就有點感覺了，但整體視覺上還是不夠豐富，給背景加點漸變試試。

適當的加點雜色，會不會更有質感一些？

再改個配色形式試試：

來波紅配綠：

花里胡哨再來一個：

當使用漸變色的目的是豐富畫面時，不管是單色、多色，線性還是徑向、規則與否等等，對其就沒有太多的限制。

聚焦，理解起來很容易，就是視線、注意力等集中于某處，舉個例子：

我們將其看做兩塊黑色的幕布，左側除了漆黑一片，沒有其他任何視覺元素，這就導致我們的眼睛會一直在這塊幕布上來回游離，視線沒有著落點。

而右側幕布上出現了一個綠色的亮點，與周圍大面積的漆黑形成了強烈的視覺反差，此時我們看這塊幕布時，視線就會不由自主的落在綠色亮點上，這就形成了視覺上的聚焦。

正如無印良品的這組“地平線”系列海報一樣，視線總有著落點。

所以在商業設計中，一直在強調主次、層次，目的就是為了讓用戶看懂你的設計，而不是一味的炫技。

我們也可以把設計上的聚焦理解為強調突出，使得作品整體主次分明，視覺富有邏輯感。

而說到強調突出，很多人都會想到放大、加粗、變色等，常見的表現手法有：對比、留白、光效等等。

另外，漸變中有個模式叫徑向漸變，由四周向中間過渡，給人最直觀的視覺感受就聚焦，很適合用于強調、突出，比如：

把漸變色用于強調突出作用時，其表現形式有很多種，比如：給需要突顯的標題、文字添加醒目的漸變色、或者是通過使用漸變色塊、圖形、形狀營造視覺差異化，從而達成強調突出的意圖。

在案例中的表現：

想要在設計中實現聚焦，核心還是營造視覺差異，只有這樣在視覺才能形成層次、節奏、主次，這對于商業設計來說是非常重要的。

有氛圍感的畫面，即便沒有太多精細化的處理，也能通過整體營造出獨特的美感。

比如暖色調的畫面會給人一種溫馨、陽光、浪漫的感覺；提到春節我們就會想到喜慶、快樂等等，這就是氛圍帶來的特殊感受。

舉個簡單的例子：看到下面的漸變色，第一時間你會想到什么？

應該會有很多人想到：夕陽、落日、黃昏等等，就像下面這張圖一樣。

這就是有氛圍感的畫面，即便是簡單的兩個顏色形成的漸變，也能給人帶來無限的遐想。

漸變色本身在視覺上就富有一定的節奏感和層次感，所以用于提升畫面整體氛圍感是再合適不過了。

這也是為什么在電商設計中，一提到大促活動、氛圍感要求強些的專題，設計師都會想到藍紫、紅黃、藍青等漸變色的原因。

漸變色之所以對提升畫面氛圍感有幫助，主要是因為不同色彩屬性變化帶來的視覺差異化感受。

所以當漸變色用于提升作品氛圍感時，無彩色漸變和單色漸變出現的相對會少一些。

通過整篇文章的見解，你是不是對漸變色又有了新的認知？

漸變色對于設計師來說都不陌生，甚至是不起眼的，但卻能幫助我們解決很多設計中的棘手問題。

當然，漸變色還有其他作用，比如：傳遞品牌價值、體現設計美學等等。

你會發現，很多時候并不是說你遇到的問題有多難解決，而是你缺少系統性的知識，不能將單個知識點串聯起來，所以才導致你每次看到文章知識點時都會恍然大悟，到工作中又是不知該怎么辦。

所以一定要利用非工作時間，多做練習，只有大量的練習、總結，才能真正將理論知識變成自己的。

原文地址：美工美邦（公眾號）

作者：老張

轉載請注明：學UI網》硬核干貨！漸變色在設計中有哪些妙用？

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

我究竟要用哪一個插件？我不知道，每一個插件的是用來做什么的？我不清楚。因為身邊的同學不停的給我推薦插件，而我便不停的安裝，導致這么很多插件，我都沒怎么用。今天為了解決這個問題，花了一下午的時間整理，分享一下我最常用的7款Figma 插件，大家也可以跟著我的思路，一起來整理一下你的 figma 插件

Contento

Contento 是一款內容填充插件，當然，在插件市場上你會發現，類似這樣的插件非常多，但是我在使用過一段時間過后我都放棄了

有的是因為 操作過于復雜，比如：Content Reel ，他沒辦法做到本土化的數據，因此不能 開箱即用

有的是因為功能簡單，比如：Chinese User Data Generator，我沒辦法做到自定義數據內容

使用Contento主要能夠滿足我三個需求

1.內容簡單：

其實在日常的使用當中，我們要填充的無外乎就是常見的 “姓名、地址、電話、郵箱”等內容，在常用功能當中，我們最主要的是想要功能地快速上手，當我打開 Contento 就可以直接進行使用

2.社區強大：

如果系統預設的內容不滿足你的需求時，你也可以打開社區，在社區里作者會更新一些較為常用的圖庫和文本，然后你只需要這樣點擊，即可擁有這個素材內容

3.自定義：

假設 系統自帶 以及 社區的內容庫 還不能夠滿足你的需求，你還可以利用 Contento 進行系統的自定義，在插件當中點擊這里的 “加號”，選擇想要添加的 文本、圖片 等格式，進而將自己產品獨有的內容放到里面，下一次就可以直接使用

Chinese Font Picker

Figma 的中文字體選擇，真的無力吐槽，Figma 你看看其他同學，像 PS、Sketch、甚至是 PPT、Axure

別人字體選擇是怎么做的，再看看你，Figma，長點心吧！

因為 Figma 軟件本身自帶有很多種字體，而這些系統字體也就造成了我們很難從眾多字體的字體當中，選擇用戶想要的字體內容

另一方面，我們沒辦法快速預覽字體，因此只能夠通過 猜測這款中文字體的英文名字，來進行尋找

因此被逼無奈，只能夠曲線救國，使用字體選擇插件來解決這個問題

Chinese Font Picker 插件就能夠快速呼出字體選擇器，并且這里展示的字體都是經過篩選，會主要展示支持中文的字體

通過每一款字體，我們可以預覽字體具體的樣式，方便我們快速的做出判斷，Chinese Font Picker 是我使用頻率最高的插件

FigmaEX

Figma 當中使用插件也會非常的麻煩（專業一點來說應該是操作路徑過長 : ），因為 Figma 本身插件呼出非常低效，再加上很多設計師并不會記住插件的名字，導致尋找插件非常雞肋

在 Figma 當中，比較難使用的便是如何高效的切換插件。這其實是一個交互問題，恰好 FigmaEX 解決了這個問題

我們都知道電腦屏幕的布局本身就是以寬屏的形式存在，也就意味著，FigmaEX利用了橫向的寬度，在右側固定一個區域用于展示基礎的信息，這樣就能夠固定快速你想要的figma插件，并且這款插件是國人產出的，也更令人驕傲

不過Figma EX 需要單獨安裝，不過這類插件確實已經超過 Figma 可以開放權限的范疇，只能夠單獨安裝

NB Charts

在我們B端需求當中，一定會存在很多圖表類的需求，這時候便可以使用 NB Charts 這款軟件來快速實現頁面，方便與團隊明確這樣的方案是否能夠接受

并且還可以根據圖表進行內容的調整，導入對應的數據 JSON等等…，可謂是非常強大

Measure

這款老牌插件，含金量自然不必多說，因為我平時也只是簡單用一用標注功能，因此這款插件還是非常不錯

Auto follower

流程圖怎么辦？有的時候想要快速連接原型之間的交互，便可以使用它，可以快速連接不同的頁面，還可以自定義這條流程線條的顏色、粗細、圓角大小等等

雖然比不了傳統的流程圖工具，但是解一解燃眉之急還是非常不錯的

SkewDat

如果想要把一個頁面稍稍傾斜一下，你會怎么辦？在沒使用 這款插件，我需要將這個圖片導出、打開PS、通過PS來對圖片進行調整，然后導出，再導入到 Figma 里面，整個操作方式可謂是“一氣呵成”

SkewDat  恰好能夠解決這個問題，同樣，它可以斜切：圖片、形狀、文本 等內容，在使用上可以更加方便，并且這里的傾斜操作是非破壞性的，也就是說我們可以傾斜了過后繼續調整字體

當然上面的所有插件都可以在 Figma 社區找到，大家按照名字自行下載即可，不過在公眾號放這么多動圖真的痛苦，后續做一個視頻詳細給大家分享一下…

原文鏈接：CE青年Youthce（公眾號）

作者：CE青年

轉載請注明：學UI網》B端設計師常用的七款 Figma 插件

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

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

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司