序言

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

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

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

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

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

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

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

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

方向區別：

長短的區別：

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

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

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

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

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

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

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

① 利用高斯模糊制作。

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

② 利用光圈模糊工具

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

類似的案例還有：

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

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

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

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

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

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

類似的案例還有很多：

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

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

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

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

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

再改個配色形式試試：

來波紅配綠：

花里胡哨再來一個：

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

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

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

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

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

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

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

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

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

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

在案例中的表現：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

作者：老張

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

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

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

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

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

很多人做的設計過于平庸，主要原因是圖形部分太常規，比如單純以產品圖片、人物圖片、某個元素或者是一幅普通插畫作品作為畫面的圖形。這類圖形缺少變化、缺少視覺沖突，所以很難有眼前一亮的感覺，也很難讓人產生興趣。而有一個簡單的技巧，可以輕松解決這一問題，即異質同構。

這個技巧大家肯定不陌生，這樣的作品比比皆是，但是對于該技巧的使用還是有很多講究的，首先，從設計的形式上來看，異質同構主要分為三種形式：

1.置換材質

即只保留一個事物原本的造型，而其材質用另一類元素進行置換，比如水材質的面膜、牛奶材質的人、云材質的鞋子等等。

▲把鞋子做成云的質感，以表達該鞋子輕盈、舒適的賣點。

常見的材質有金、木、水、土、玻璃、皮、塑料、紙等等，如果通過材質就能識別出某些產品或者素材，那么就具備了使用這一技巧的基本條件。

▲把甜菜置換成甜菜汁材質，表達了榨汁機超強的榨汁功能。

▲把腿的材質換成仙人掌，腿毛則變成了仙人掌上的刺，表達了刮毛器超強的刮毛功能。

另外，想要置換材質的效果很好，那么對設計師的執行能力要求比較高，通常是通過合成或者3Ｄ渲染來完成。

2.組合堆積

即按照事物B的造型，用數量眾多的事物A來進行有序的排列組合或者是堆積，比如把塑料瓶堆積成一座小雪山，用葡萄堆出一瓶果汁，用蔬菜組成一個漢堡等等。

▲用純蔬菜堆出兩個漢堡，以表達蔬菜漢堡這一訴求。

在做堆積或者組合時，首先要能保證元素A與B的識別性，另外元素的排列要有序，而不是胡亂堆砌，要注意圖形的美感和質感。

▲鮮紅的心臟細看卻是用拳擊手套組成，創意概念是：為生命而戰。

▲用蘑菇以及手動加工的工具、配料等元素組合成蘑菇的造型，表達了該產品真材實料、純手工制作、品質絕佳等訴求。

3.質感對比

即把某一事物的局部置換成符合原有造型，但質感不同的另一種或另幾種事物，以形成鮮明的對比效果，比如上本身是男人、下半身是女人，左邊是汽車、右邊是滑滑梯，一邊是導彈、一邊是鉛筆等等。

▲把男士維修工人的上半身與女芭蕾舞者的下半身結合起來，以表達捐獻器官可以讓你擁有兩次不同人生的訴求，這是一個器官捐獻組織的公益廣告，畫風奇特的畫面很有視覺沖擊力。

▲把導彈的前半部分用鉛筆的筆尖替代，以表達語言可以消滅戰爭的訴求。

質感對比的做法有兩種形式，一種是對稱圖形，即左右兩個不同材質的元素在造型上是相同或相似的，組合起來又是一個整體。

▲ 把燈泡圖形的左邊置換成大腦圖形，以表達點亮創意的概念。

另一種是非對稱圖形，即圖片中的幾個部分組合在一起剛好是一個完整的圖形，它們各自完成圖形的某一個部分，造型上并不相同。

▲ 把釣起的魚浸在水里的部分置換成海洋垃圾，號召大家要愛護海洋，減少對海洋的污染。

▲ 上半部分為巴西里約的耶穌像，下半部分為美國紐約的自由女神像，二者結合起來也相似一個完整的雕像，中間的分割線被設計成飛機的輪廓形狀，巧妙地表達出該航空公司“速度快”的訴求。

異質同構雖然是一個挺不錯的圖形設計技巧，但如果所用的素材、組合的方式、構圖太過常規，那么做出來的作品還是會很普通，所以我們要盡量做出一些改變，嘗試一些新的素材、新的組合方式、新的風格、新的創意概念，才能真正做出讓人眼前一亮的效果。

原文地址：蔥爺（公眾號）

作者：蔥爺

轉載請注明：學UI網》萬物皆可異質同構

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

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

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

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

很多人做的設計過于平庸，主要原因是圖形部分太常規，比如單純以產品圖片、人物圖片、某個元素或者是一幅普通插畫作品作為畫面的圖形。這類圖形缺少變化、缺少視覺沖突，所以很難有眼前一亮的感覺，也很難讓人產生興趣。而有一個簡單的技巧，可以輕松解決這一問題，即異質同構。

這個技巧大家肯定不陌生，這樣的作品比比皆是，但是對于該技巧的使用還是有很多講究的，首先，從設計的形式上來看，異質同構主要分為三種形式：

1.置換材質

即只保留一個事物原本的造型，而其材質用另一類元素進行置換，比如水材質的面膜、牛奶材質的人、云材質的鞋子等等。

▲把鞋子做成云的質感，以表達該鞋子輕盈、舒適的賣點。

常見的材質有金、木、水、土、玻璃、皮、塑料、紙等等，如果通過材質就能識別出某些產品或者素材，那么就具備了使用這一技巧的基本條件。

▲把甜菜置換成甜菜汁材質，表達了榨汁機超強的榨汁功能。

▲把腿的材質換成仙人掌，腿毛則變成了仙人掌上的刺，表達了刮毛器超強的刮毛功能。

另外，想要置換材質的效果很好，那么對設計師的執行能力要求比較高，通常是通過合成或者3Ｄ渲染來完成。

2.組合堆積

即按照事物B的造型，用數量眾多的事物A來進行有序的排列組合或者是堆積，比如把塑料瓶堆積成一座小雪山，用葡萄堆出一瓶果汁，用蔬菜組成一個漢堡等等。

▲用純蔬菜堆出兩個漢堡，以表達蔬菜漢堡這一訴求。

在做堆積或者組合時，首先要能保證元素A與B的識別性，另外元素的排列要有序，而不是胡亂堆砌，要注意圖形的美感和質感。

▲鮮紅的心臟細看卻是用拳擊手套組成，創意概念是：為生命而戰。

▲用蘑菇以及手動加工的工具、配料等元素組合成蘑菇的造型，表達了該產品真材實料、純手工制作、品質絕佳等訴求。

3.質感對比

即把某一事物的局部置換成符合原有造型，但質感不同的另一種或另幾種事物，以形成鮮明的對比效果，比如上本身是男人、下半身是女人，左邊是汽車、右邊是滑滑梯，一邊是導彈、一邊是鉛筆等等。

▲把男士維修工人的上半身與女芭蕾舞者的下半身結合起來，以表達捐獻器官可以讓你擁有兩次不同人生的訴求，這是一個器官捐獻組織的公益廣告，畫風奇特的畫面很有視覺沖擊力。

▲把導彈的前半部分用鉛筆的筆尖替代，以表達語言可以消滅戰爭的訴求。

質感對比的做法有兩種形式，一種是對稱圖形，即左右兩個不同材質的元素在造型上是相同或相似的，組合起來又是一個整體。

▲ 把燈泡圖形的左邊置換成大腦圖形，以表達點亮創意的概念。

另一種是非對稱圖形，即圖片中的幾個部分組合在一起剛好是一個完整的圖形，它們各自完成圖形的某一個部分，造型上并不相同。

▲ 把釣起的魚浸在水里的部分置換成海洋垃圾，號召大家要愛護海洋，減少對海洋的污染。

▲ 上半部分為巴西里約的耶穌像，下半部分為美國紐約的自由女神像，二者結合起來也相似一個完整的雕像，中間的分割線被設計成飛機的輪廓形狀，巧妙地表達出該航空公司“速度快”的訴求。

異質同構雖然是一個挺不錯的圖形設計技巧，但如果所用的素材、組合的方式、構圖太過常規，那么做出來的作品還是會很普通，所以我們要盡量做出一些改變，嘗試一些新的素材、新的組合方式、新的風格、新的創意概念，才能真正做出讓人眼前一亮的效果。

原文地址：蔥爺（公眾號）

作者：蔥爺

轉載請注明：學UI網 ?萬物皆可異質同構

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

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

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

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

兩套風格各有優劣，“三維風格”細節豐富，但如果把控不好，容易使視覺顯得“過重”，因而對視覺掌控力的要求較高。而“矢量風格”視覺較輕量，不容易對內容產生干擾，無論是繪制難度還是使用場景對設計師的要求都相對較低，因而泛用性更高。

決定使用何種風格，往往和團隊成員配置相掛鉤。比如在以前的公司，視覺部分的設計由外包團隊負責，那么就會面臨設計質量不好把控的風險。在這樣的環境下，三魚選擇以“矢量風格”為主，并制定了一套視覺設計規范：

首先我沉淀了一批泛用性較高的素材，方便團隊成員快速取用。

接下來，面向團隊中一些更為“高階”的設計玩家，三魚制定了一套易于上手的創作規則，方便讓他們加入進來一起創作，從而豐富素材庫。于是我把矢量插圖拆解為“模型”、“貼圖”、“傳輸介質”，各沉淀出常見的基礎物料(如下圖)。

最終輸出給團隊一套包含了各種基礎模型的psd、一套包含了貼圖和介質的透明底逐幀動畫。

最后，我只需要通過一段使用教程，就能夠教會團隊上手這套素材模板。它實在是太簡單了，只需要以下兩步：

1. 在PS中用“基礎模型”繪制出靜態的效果；

2. 在AE中將“貼紙”“介質”利用“邊角定位”功能貼到圖形上，即可完成動畫的制作。

（當然，如果不需要做動畫，步驟二里面的操作也完全可以放到PS中完成）

通過這套規范與教程，三魚把矢量繪制的難度大幅度降低，其他設計同學也能順利地在此基礎上展開創作，設計效果遍地開花，設計師和業務方都很開心。

不知道大家有沒有發現，雖然這套風格被稱為“矢量”，但三魚在其中虛虛實實地穿插了很多三維渲染。下圖是以前的作品，二者靈活搭配在我的作品中很常見。

https://www.zcool.com.cn/work/ZMjkzMzUzOTY=.html

后來我還嘗試加入人物規范?？上呐挛野岩幏蹲龅搅祟^、手、腳可以自由拼接組合，大家還是只愿意用我提供的那幾個“范例素材”。這時“矢量風格”的缺點漸漸暴露出來：素材使用的靈活性較低，三魚已經無法通過完善素材庫來提升大家的工作效率了。

于是我嘗試制作3D素材。3D素材有個特點：即制作過程雖然很繁瑣，但制作完成后，素材使用起來很輕松。比如人體模型，雖然建模的過程很繁瑣，但大家只需要拿到成品去擺Pose就成了。

果然，模型建好以后，擺Pose的難度就很低了，于是順利產出了一系列B端常用的動畫循環。(想玩玩的可以找我要人模源文件，你會發現模型一旦做出來，后續的創意空間是源源不斷的)。

我們把這些小動畫應用于業務場景中，順利投入工作。

后續的創作成本已經變得可控，甚至還可以自由地切換質感，根據需要來決定它是“矢量”還是“三維”。(暴露了沒有仔細觀察生活，姿勢不太自然，見笑了…)

咳咳… 越聊越遠了。不過大家也發現了，不管是我還是我的團隊，隨著我們對質量與效率的進一步追求，視覺風格中融入“三維”的一環是遲早的事了。相比于PS繪制，“三維風格”需要在立體的空間內設定構圖，然后是建模+材質+布光，制作的成本明顯高了很多。

雖然制作成本較高，但模型的細節度也是PS繪制所達不到的，而且一旦建模完成，后續的擴展自由度會非常高。比如自由地變換角度/顏色。

3D更大的優勢還在于豐富的動畫演繹空間。

但就像前面說的，“三維風格”對設計師的要求明顯高了很多，而三魚面對的依然是一個沒有3D基礎的設計團隊。但這一次三魚選擇了另一種方式——面向團隊成員開展3D軟件培訓，而且是一場有別于常規課程的培訓。

很久以前，在三魚還是個美術老師的時候，在每屆學生的第一堂課上，我都會講這么一段話：“這節課我所講的內容，就是你們學畫畫所需要掌握的所有理論知識。接下來的時間里，我會不斷重復它們，并和你們一起反復練習，直到你們熟能生巧！”這就是三魚對掌握一個視覺技能的經驗：唯手熟爾。只有反復且高質量的練習才是掌握視覺技能的關鍵。

因此我對團隊的培訓方式很特別，開課的第一天我就坦言：“三魚掌握的C4D功能不超過10個，所以各位不要有壓力，我只教10個功能，傻子都能學會。而且三魚能把這10個功能用到天花板，只要你們徹底掌握這10個功能，那么三魚過往的99%的作品你們就都會做了。所以你們也看到了，三魚并非一個“百科全書”式的老師，倘若你們對這10個以外的功能感興趣，去網上搜教程會比問我效果更好… 當然，雖然我只教這不到10個功能，但我會用無數個高質量的案例來反復教這10個功能，直到你們徹底掌握它…”

這種培訓方式效果還不錯。課程進行沒多久，已經有同學能將技能應用到業務中了。而且隨著可復用的場景、材質、模型資源越來越豐富，如今我們團隊的3D制作效率已遠超PS繪制，當設計師可以靈活選擇視覺表現形式時，手上功夫便不再是制約創意的瓶頸。

其實我團隊有一位設計師之前曾學過3D，但因為“沒有應用場景”，學會以后又漸漸忘光了。

誒？…這哪是說他啊，分明也是在說你對吧？哈哈哈哈！

在第一堂課前，三魚臨時讓大家做了個小測試，內容很簡單：“鋼筆工具”人人都會吧？那好，我現在在網上隨便搜一張“魚”的圖片，給大家5分鐘的時間，用鋼筆工具把它的外輪廓描下來。

你們猜測試結果怎么樣？居然沒人能在5分鐘內熟練地把外輪廓描下來，可“鋼筆工具”不應該是每個設計師都必須掌握的基本技能嗎？其實這就是問題點：“會”和“掌握”是兩碼事，大部分設計師所謂的“會”，可能僅僅只是了解“兩個卯點控制一段曲線”而已，很少有人思考過如何以最少的卯點繪制出想要的效果吧。熟練使用鋼筆工具的人，往往可以很準確地放置卯點，不熟練的人，則需要反復試錯，耗費了很多精力和時間成本。

講到這里你可能已經意識到了：不同熟練度的人使用“鋼筆工具”耗費的成本是不同的，熟練度越低，成本越不可控，而當我們面對有限的項目排期時，我們就更傾向于使用成本可控的自己熟悉的手法來解決問題，于是這個方案每次都被繞開，被其它解決方案替代，其熟練度永遠練不上來。

明白三魚要說什么了嗎？不是沒有應用場景，而是以你目前的熟練度，根本無法控制成本。這就是為什么我只教10個功能，卻要求大家反復練習反復刷題的原因，熟練度才是最重要的。

噢對了，那套人模我后來又試著用來詮釋音視頻場景，比如直播(Live Brodcast)、視頻會議(Video Conference)、連麥(Real-Time Communication)、主播PK(Anchor Player Killing)、視頻發布(Video Posted)中。還挺有意思的的，大家可以拿去試著結合自己的場景玩玩。

今天就聊到這吧，來看看我都講了啥：

一開始我分享了兩套B段反饋頁的風格，并分享了源文件，算是比較正經的設計技法交流；

接下來我站在管理者的角度，講了講我在把控團隊視覺風格的經驗，以及我做事方式的轉變過程，穿插分享了人模的設計技法交流(感興趣的可以問我要源文件)；

再后來，隨著做事方式的轉變，我也從一名管理者變成了一名人民教師… emm

看來管理的盡頭，竟然是當老師… 也不知道今天三魚講的這些對大家有沒有幫助。

原文地址：站酷

作者：三魚先生

轉載請注明：學UI網》干貨雖然遲到了，但三魚還有私貨

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

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

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

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

 

一、利用手勢交互實現自動跳轉 

二、手勢交互帶來的切歌體驗

 

三、拖動進度條實時預覽畫面

 

四、底部功能區的延伸設計

 

五、情感化的功能引導設計

 

六、推薦模塊的輪播翻頁設計

 

七、提高圖文布局視野感的設計

 

八、微動效增強簽到設計的關注度

 

九、輔助圖形強化品牌感

 

十、懸浮動效式空狀態設計

 

小結

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

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

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

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

為什么我們讀小學時候，每天很早去學校晨讀，目的通過這樣刻意練習加深學習記憶。

長久以往，我們對文字理解，對寫作文就會構建起豐富的背景知識。

那么在設計中也是一樣的，在前期，一定要每天堅持大量的閱讀，培養你的眼界。

閱讀什么呢？我覺得可以針對性一些，比如：

a.大量看UI設計作品

網上因為作品有好有壞，如果你早期無法判定好的作品，可以去看一些獲獎的作品，比如kdesignaward、Adobe設計大獎，IF設計大獎等。

2.什么情況下知道，我的審美提高了？

前期大量閱讀了很多作品，這時候你需要把牛逼的作品收集起來，等半個月后，再去看看之前搜集的作品，如果發現有部分很丑，那么恭喜你又往前走了一步。

成長是需要一個過程，切忌操之過急，關鍵是需要自己動手去執行，不能等著被改變。

我們可以去建立一個圖板，雖然很多人有這樣做，但是真正做到復盤，然后去刪除之前采集的人很少。

如果不去復盤，不去思考，進步當然會緩慢，抱怨也是沒用的。

低頭趕路，也不要忘了抬頭路，我們要隨時知道是朝著正確的方向努力。

3.學習一些理論

當看了大量的作品，對美有些認知，但是你還是不知道怎么表達美？這時候，你需要學習一些理論的支撐。

我們通過閱讀大量作品構建審美認知，通過閱讀書籍、文章理論構建審美體系。

比如，德國工業設計師迪特·拉姆斯提出好設計十項原則：

又或者：

我們可以從形、色、質、字、構、動等6個維度去拆解，又或者可以利用格式塔心理學來進行設計質量的評估，比如我們常說的相似性、親密性、連續性、焦點歸一等。

再比如，當你看到一個吸引你的設計作品，你可以這樣思考吸引你的點在哪？

比如：是圖形運用很巧妙還是質感表達很新潮？又或者色彩創意很棒，一般一個好的設計都會滿足形、色、質、字、構等，至少要3個以上維度。

當然還可以通過看書積累對設計美的表達，總之就是要大量輸入，構建豐富的知識庫。

4.推薦一些網站

提升審美必須每天堅持看，這個是毋庸置疑的事情。這里，推薦一些我常常去看的網站。

a.savee

b.pinterest

https://www.pinterest.com/

c.designweek

https://www.designweek.co.uk/

https://designcollector.xyz/design

寫在最后

提升設計審美，前期大量閱讀只是一個開始，我們還需要做的是不斷思考總結。

同時還需要學習設計理論，這些我們可以通過看書或者和別人交流，在討論過程中，你自然知道他們是怎么評價這個設計的。

路漫漫其修遠兮，學習是一個長期的過程，培養審美也是。

積小步，成大步，沒有一蹴而就的成功，一切都是量變的積累。

原文地址：功夫體驗設計 （公眾號）

作者：Tony

轉載請注明：學UI網》如何培養設計美感，這個方法掌握了，想不進步都難??！

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

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

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

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

1.1 基本概念

2012年，Google公司為實現更智能的搜索引擎，提出知識圖譜的概念，2013年后在行業內和學術界開始普及。

知識圖譜的定義：是結構化的語義知識庫，本質上是一個語義網絡（Semantic Network），用于描述物理世界中的概念及其相互關系。在技術層面，通過對錯綜復雜數據的有效加工、處理、整合，轉化為數據關系來聚合大量知識，從而實現知識的快速響應和推理；在可視化的應用中，知識圖譜表現為多關系圖（Multi-relational Graph），在圖形化界面中可讓用戶查看和互動（如圖1）。

圖1（引用自企查查app截圖）

1.2 知識圖譜的特點：

其特點主要包含以下兩方面內容：

1. 它是由“節點”和“邊”構成的三元組

三元組是知識圖譜的基本單位， 由節點和邊構成（圖2）。其中節點代表實體，是指具有區別性且獨立存在的客觀事物，如：圖1中的馬云、華誼兄弟傳媒有限公司，圖3中的美國、平方公里數等；邊代表兩個實體間的關系，是指客觀存在或推理得到的實體間的聯系，如圖1中的董事、監視、投資，圖3中的面積、人口、首都等。

圖2（作者依據知識圖譜相關概念繪制）

圖3（引用自網絡圖片）

2. 它的數據以知識的角度呈現。

知識是一種人類對于客觀世界的認知，包括事實、信息描述或教育實踐中獲得的結果的綜合。三元組也被稱為“一條語句”，或知識圖譜中的一條知識。在圖4的國家信息關系三元組中，我們就可以讀出一條語句（或是知識）為：“中國的土地面積有9,634,057平方公理”。知識圖譜可以集成Web上大量的數據及數據關系，通過有效的加工、整合和處理，將其轉化為易于計算和理解的語義知識庫，可用于描述客觀世界中的概念及相互關系。

1.3 知識圖譜的作用

1. 信息篩選，精確檢索范圍。

2. 信息拓展，提供更豐富的信息內容。

3. 信息連接，構建有深度和廣度的知識系統。

1.4 為什么需要對知識圖譜進行可視化

1. 知識圖譜的技術架構-側重在數據關系模型和機器學習，普通用戶很難讀取和理解。

知識圖譜的核心技術邏輯，是由整體的“數據輸入-數據處理-知識圖譜生成”三個大環節構成。數據輸入環節包含“結構化數據、半結構化數據、非結構化數據”；數據構建環節包含“信息抽取、知識融合、知識加工”；知識圖譜系統的生成環節，是整個技術架構往復迭代、不斷更新和積累，慢慢形成的結果。數據輸入是對數據源的挖掘，數據構建是底層的模型算法應用，知識圖譜生成是數據處理結果的呈現（如圖4）。

圖4（作者依據知識圖譜相關概念繪制）

這個過程在底層數據模型中運轉，對用戶可見的往往是最終的結果。比如：搜索引擎中，用戶看不到搜索過程，但可得到最匹配的搜索結果；在音樂平臺中，看不到內容匹配邏輯，但可以被推薦感興趣的歌曲。如果想利用過程數據為用戶提供服務，就需要進行可視化處理。

2. 傳統的信息可視化-側重在數據結果的展示和篩選，較少涉及數據關系的干預。

傳統信息可視化的方法，在設計側更多強調數據信息與圖像、色彩的信息傳達上。其方法通常集中在“如何對已經確定的數據進行圖形映射”和“如何處理信息層級”的視覺表現上，較少參與設計數據關系或影響數據結構。然而，這讓用戶知道數據“是什么”，卻不能呈現數據“為什么”。知識圖譜的可視化，可以讓數據處理過程被用戶可見、可用，從而更好的分析和使用數據。

圖5（作者依據傳統信息可視化方法相關概念繪制）

3. 知識圖譜的可視化-側重在數據關系構建和處理過程的可視化

知識圖譜技術廣泛應用在情報學、檢索引擎、自動問答、金融反欺詐等領域。目前已擴展到智能醫療、證券投資、大數據風控、聊天機器人、個性化推薦系統等更多方向[1]。這種關系語義網絡也逐漸從技術底層應用向可視化用戶界面上發展，各行各業也在探索如何時其在終端界面中被用戶可讀和可用。比如：在文化研究領域，圖譜呈現更有助于用戶對于文化知識的理解和再創造；在商品市場領域，視覺化的圖譜可讓商家洞察更多“人-貨-場”之間的內在聯系。

對知識圖譜信息的可視化，重心落在數據信息的提取和關系構建上，將數據信息的編譯過程呈現給用戶。知識圖譜信息可視化和傳統信息可視化方法之間的關系，如圖6。

圖6（作者依據信息可視化方法相關概念繪制）

二、知識圖譜的可視化設計方法

知識圖譜在底層算法和數據模型上提供有效的技術邏輯，進而構建豐富龐大的語義網絡，但如果要在具體應用場景中給用戶可見的模式，則需要圖形化界面的呈現。在實際工作中，設計側的核心任務是“多關系圖”的信息可視化。結合知識圖譜的特征、技術原理和傳統信息可視化方法，可以將知識圖譜可視化的過程，歸納為“確定知識主題（主題層）-處理與分析數據（數據層）-構建數據三元組（關系層）-進行可視化映射（可視層）”四個步驟。

2.1 【主題層】確定知識主題/可視化目標

確定主題的過程，也是定義核心概念或目標的過程，這一環節是是知識圖譜可視化的出發點和落腳點。傳統可視化為了可視而可視，只是讓用戶更好的讀取數據，而較少考慮讀到后有什么用，怎么用。沒有主題的數據是無意義的，任何一類知識的描述，都需要圍繞某一特定主題展開。在項目實踐角度，也可以將其視為梳理業務核心訴求或定義設計目標的過程，如確定要闡述什么類型的知識、最終的可視化效果對目標用戶有什么價值、業務要利用數據達到什么目的，所有數據的設計都將圍繞著主題展開。

確定主題的方法有很多，包括傳統的用戶需求分析方法、文獻綜述、行業研究等，可根據不同的項目訴求，選擇合適的方法和工具。如，要做電商行業的知識圖譜，通過行業研究、對用戶特征和行為動機的分析，發現電商領域用戶最關心人貨場的知識，人和貨特征及其關系就是核心要表達的主題。再如，老師想了解網絡時代的大學生都具備怎樣的社交特征，通過對學生學習、娛樂、社交等不同生活要素分類調研，選擇“學生使用社交軟件的行為特征”作為主題。

同時，主題要清晰明確，避免模糊和過于宏大。以文化領域為例，如想呈現京劇之美，這個概念就大而泛，很難去組織數據，就有創作者將其主題拆分為：歷史之美、劇目之美、舞臺意向之美、傳承之美等幾個主題。然后再逐一分析每個主題的數據。

2.2 【數據層】對數據進行提取與加工

在未經處理前，與主題相關的可用數據是多樣且龐雜的。由知識圖譜的技術框架可知，技術模型經過信息提取、知識融合和知識加工后，才使原始數據變得有用和有效，同樣在可視化的過程中，也離不開信息提取與數據加工。

1. 數據提取-圍繞知識主題進行數據信息的提取。

信息提取，也就是先羅列可能有用的相關數據類型。每個主題都是一大類目的知識領域，需要經過收集、歸納、拆解后再能夠清晰的進行解釋和傳播。如，圍繞“學生使用社交軟件的行為特征”這一主題，可歸納出“好友關系、互動行為、在線狀態、信息發布”等特征。進一步，好友關系又可拆分為：好友量、關注量、粉絲量；互動行為又可拆分為：聊天次數/頻率、點贊數、評論數等。數據收集一般通過桌面研究的手工收集、數據爬蟲兩種方式。歸納和拆解數據可以使用卡片分類、思維導圖的方式。

2. 數據加工-進行知識語義加工。

數據加工的過程，就是將羅列出的數據進行分類和篩選，確定最能夠表現知識主題的描述緯度或數據類型。如圖7，通過分析影響因素的關聯程度，選擇具備直接影響因素的數據，或劃定數據范圍后，再進行細分?？梢岳每ㄖZ模型、波士頓矩陣等方法找到數據對主題影響程度的優先級，具體的挑選方法無定式，只要能整理出適合的數據類型。

圖7（作者依據相關案例繪制）

3. 數據清洗-進行數據篩選和最終確認

定義出有用的數據類型后，并不是所有數據都能完美符合我們的訴求，比如數據挖掘能力限制，不能挖到更精準的數據或有數據缺失；比如數據解析能力不足，數據類型混雜，或有錯誤數據等。排除不足量、精準度差、錯誤率高等不可用的數據，盤點出能夠被應用于可視化的最終數據。在實際工作中，需要跟團隊的數據挖掘工程師、或業務產品負責人明確數據能力和質量。例如，“京劇傳承之美”的數據選擇過程中，作者對京劇藝術傳承上存在的“流派師承、藝學家傳、科班教育等”多種方式進行進行分類和篩選，最終提取了京劇51個流派的創始人數據、師徒數據、家族成員數據。

2.3 【關系層】構建數據關系三元組

在知識圖譜的技術架構中，這一環節體現在本體構建上，本體是個專業概念，本體構建也有多種可用的成熟模型，屬于技術側內容，本文不展開論述，僅闡述設計層面的思路。技術是讓數據更精準，而面向用戶的設計是讓數據更有用和好用。

設計數據的關系層，也就是給不同數據類型建立關系的過程，通過確定節點和邊的內容來構建能夠解釋主題和符合其邏輯關系的三元組。數據關系的建立一般主要圍繞兩個層面，一是能夠闡述知識主題，二是通過關系三元組可推理得到更多的知識內容。比如，在“學生使用社交軟件的行為特征”這個主題中，可定義“學生（實體）-網絡社交特征（屬性）-具體行為（屬性值）“是一組關系結構，體現在數據為“張三-在線時長-5小時/天”，描述成知識語意為：張三同學社交軟件每天會在線亮起5個小時；又如，圍繞“商品銷售信息”這一主題，“產品（實體）-集合（關系）-商品（實體）”是一組關系結構，體現在具體數據為“手機-包含-華為手機”，描述成知識語義為：華為手機是眾多手機中的一種。

當我們定義了這種數據關系，獨立的數據就變成了可描述的知識語意，當這些語義聯系在一起，用戶通過一段段知識洞察到不同的現象，或解讀出不同的結論。這種知識語義的可視化，或者說這種數據關系結構的可視化，能夠幫助用戶了解業務現象，或產品底層看不到但卻有用的信息。比如京劇文化中師承的演變，可以通過不同人物之間的關系脈絡，構建出“師承關系、家族關系、聯姻關系”幾種三元組模式，從相同節點中解讀到某個京劇演員擅長某個角色的師承因素。再比如，將某班級每個學生的聊天頻率、好友數量、QQ在線時長等網絡社交行為關系一一對應，就會勾畫出集中在某個學生身上的不同特征，把這些學生再放在一起，就呈現出一個班級學生在網絡世界的不同社交特點。（如圖8）

圖8: 由數據構建的三元組關系圖（作者依據相關案例繪制）

2.4 【可視層】可視化圖形語義轉換/可視化映射

當關系構建好以后，簡單的三元組是容易讀取的，但眾多三元組集成在一起，也會涉及到信息讀取效率的問題，就需要將關系結構圖形化，這一步驟也是傳統信息可視化方法中的必然環節。根據已經構建好的數據關系結構，可通過“圖表映射”和“視圖設計”兩種方式，進行可視化的語義轉換。

1. 可視化圖表映射

可視化圖表，是指具備通用性的標準化圖表?？傮w分為統計類圖表和關系類圖表，本文主要闡述關系類圖表。關系類圖表又可分為網狀關系和層次關系。網狀關系圖包括：關系圖、弦圖、弧長鏈接圖等；層次關系圖包括：樹圖、旭日圖、矩形樹圖等。詳細的標準化圖表，可以借助E-chart、Tableau Public、Smartbi等軟件進行參考選擇（如圖9）。

圖9:網狀關系圖（引用自E-chart網站截圖）

圖9:層次關系圖（引用自E-chart網站截圖）

如果數據關系比較清晰簡單，能夠被這兩類標準化圖表所覆蓋，則可以直接選擇把節點和關系直接映射其中。如果你的數據關系比較復雜，或個性化，則可對標準化圖標進行組合或變化，或設計個性化視圖。

例如，在北京郵電大學彭國雁的論文《面向京劇知識圖譜的信息可視化研究與設計》的案例中，“京劇傳承之美”這一主題，“師承關系、家族關系、聯姻關系”的三元組關系較復雜，如果直接用可視化圖表映射來展示，會產生易讀性差和頁面布局難以控制的問題。于是論文作者采用不同圖表相結合的方式，并將圖形的視覺元素進行改造：1 主體采用和弦圖，人物點構成和弦圖的圓，人物關系類別采用不同顏色線條進行連接（圖10）。2 根據人物出生時間的向性特點，將人物按照某一方向進行排列，即可隱喻師徒或者親屬關系的有向性。3 采用樹形圖形式的線條表達主次人物的關系（圖11）。4 將幾種基礎關系做好映射后，再把相關節點整合在一起，就表達了整體的師承關系結構圖，最終形成“傳承之美”整體的可視化知識圖譜（圖12）。

圖10: 人物師承、親屬、聯姻關系和弦圖（引用自論文《面向京劇知識圖譜的信息可視化研究與設計》截圖）

圖11: 京劇流派師承樹形關系表（引用自論文《面向京劇知識圖譜的信息可視化研究與設計》截圖）

圖12:最終映射后的 “京劇傳承之美”可視化知識圖譜（引用自論文《面向京劇知識圖譜的信息可視化研究與設計》截圖）

2. 可視化視圖設計

本文所述的可視化視圖，是指能表達標準化圖表以外的，不同類型數據特征的語義圖形，由設計師根據與主題相關的數據類型進行構思，并關聯其不同類型數據間的關系語境，最終形成的信息圖。比如（圖13），清華大學副教授向帆老師在對“學生互聯網社交行為”這一主題的研究中，作者選擇QQ使用狀態的相關數據，將每個學生用QQ企鵝的輪廓圖形表示，在線時長為企鵝形狀大小、聊天次數為圓形嘴巴、好友數量為頭發多少，呈現出“學生-網絡社交特征-具體行為”的可視化關系圖，在最終的視圖中，可直觀的看到完全不同的每個人。

圖13:同班級不同的學生網絡社交行為圖譜（引用自演講《秘密的設計》截圖）

這類自定義的可視化視圖具有獨特性和意向性的特征。獨特性是指圖形針對具體的主題和數據關系，而不能夠廣泛的為其他主題復用；意向性是指一個視圖內的圖形有一定的意向概念傳達，比如圓形代表聊天次數，也是象征嘴巴，嘴巴跟聊天相關（盡管網絡聊天用文字，但卻表達出了這種交流意向）。同時個性化圖形元素相關聯來表達數據關系，也可以直觀、高效的洞察出用單純的標準化圖表看不到的現象，比如說圖14的三個學生，一個在線時間很長但聊天很少、好友也很少；一個在線時間很短，但好友和交流時間卻很多；另一個基本不說話，但是卻有很多好朋友。這樣的現象更容易觸發同理心，從而啟發老師在教學中因材施教。

圖14:發現網絡社交行為最為奇特的三個學生（引用自演講《秘密的設計》截圖）

經過以上四個步驟，就完成了對知識圖譜數據進行可視化。它不是單純的以視覺效果展示數據信息，而是從數據關系提取到關系呈現為一體的設計過程。

三、結語

綜上所述，基于知識圖譜的技術架構、傳統數據可視化的方法和交互設計的工作流程，本文分享了一種可在工作中易于操作的知識圖譜可視化方法。與傳統數據信息可視化相比，知識圖譜可視化更傾向于數據之間三元組關系的視覺表達，所謂“整體大于局部之和”，有了關系的建立，則更能夠發現單一數據之外的延展信息和潛在機會。希望能夠通過設計的力量，讓普通用戶也能更好的使用數據和洞察數據。

參考文獻：

1. 彭國雁，《面向京劇知識圖譜的信息可視化研究與設計》
2. 1. 通俗易懂解釋知識圖譜（Knowledge Graph） – hyc339408769 – 博客園
3. 領域本體的構建方法研究_u013263092的專欄-CSDN博客_本體構建
4. 王昊奮，《知識圖譜技術原理介紹》
5. 劉知遠 ，《面向大規模知識圖譜的表示學習技術》
6. 【干貨】最全知識圖譜綜述#1: 概念以及構建技術
7. 【干貨】最全知識圖譜綜述#2: 構建技術與典型應用
8. 向帆，一席演講《秘密的設計》

轉載請注明：學UI網》知識圖譜的信息可視化設計方法

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

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

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

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

一、日常積累

設計師日常除了應對當下的需求，每天可以拿出一定時間保持學習的習慣。不僅可以讓我們緊跟最近的設計趨勢、設計潮流、設計方法，也可以讓我們潛移默化中得到提升。

Panda｜全而美的設計訂閱平臺

Panda幫助設計師不錯過每天的設計靈感和資訊，包括新的設計方法理念、流行潮流、也有一些新產品推出。我們可以把Panda替換Chrome主頁，每次打開瀏覽器頁面都可以隨時看到最新的設計資訊。一些英文的訂閱也可以用chrome瀏覽器的翻譯功能可以粗略查看。

地址：https://app.usepanda.com/#

Topys｜創意內容平臺

全球頂尖創意內容平臺，作為中國成立最早、最受歡迎的創意垂直網站，以 “Open Your Mind” 為宗旨，始終專注在全球創意、藝術、靈感、人文領域尋找最有質感的聲音。

地址：https://www.topys.cn

Voicer｜分享生活和設計的美學

我們總在生活中與「一瞬間的感動」相遇。Voicer的理念即是發現這「感動」， 將它傳遞給更多熱愛生活的人們。內容包括創意內容品牌、在線雜志等。致力于分享生活和設計之美。

地址：https://www.voicer.me

Design better｜優質設計讀物網站

涵蓋設計商業思維、產品設計原則、設計系統等關于推動設計團隊前進的實踐讀物，同時提供PDF和有聲格式。

地址：https://www.designbetter.co

二、研究分析

設計師在調研過程會研究用戶、記錄用戶的行為和需求，會使用一些高效的記錄工具。同時繁多的調研的信息需要匯總整理，協作整理，這里會推薦一些記錄和整理的工具給大家。

Noted｜錄音筆記好工具

Noted 是一款將錄音和筆記相機相結合的軟件。我們做訪談用戶或做會議紀要的時候，經常錯過記錄的內容，如果通過一些軟件錄音的話，后期回聽需要比較多時間成本。Noted可以在記錄筆記的同時記錄輸入文字的時間點所對應的錄音，輸入的每個字的時間點都會對應到。當內容沒記錄下來時可以隨時跳到對應時間的錄音進行回聽，方便在漫長的錄音文件中快速檢索。

Marginnote｜文獻收集箱

重塑學習方式的閱讀筆記工具，更加高效閱讀書籍和學習，可以在閱讀時摘錄筆記，制作學習卡，提取關鍵詞，根據筆記生成思維導圖，梳理知識框架。非常適合閱讀專業書籍，閱讀論文以及復習。

地址：https://www.marginnote.com/chinese/home

GoodNotes｜手寫筆記

一款功能強大的手寫筆記軟件，擁有多種筆記封面和紙張模板可以選擇，支持自定義模板，可以簡單處理圖片，可以導入pdf、ppt等文稿并做標記，也適合做電子手賬。

地址：https://www.goodnotes.com/zh-cn

騰訊文檔｜在線協作

調研階段方便多人一起搜集資料和匯總，多人同時在線編輯，內容實時同步。隨時隨地高效協作，輕松創作。

地址：https://docs.qq.com/home

Xmind｜思維導圖

功能強大的思維導圖軟件，極簡設計，流暢體驗，多種結構圖風格選擇，方便資料的匯集和思路的整理。

地址：https://www.xmind.cn

三、設計創作

當設計目標確定時，接下來進行具體的創意設計。設計師除了通過腦暴進行發散方案以外，一些高效的設計工具可以讓我們事半工倍。

3.1 靈感搜集

Collect UI｜界面靈感

UI設計靈感庫，基于dribbble平臺精心挑選優質內容，提高效率便捷，為設計師提供專項更好的靈感。同時支持郵件訂閱推送。

地址：https://collectui.com

Adobe Color｜配色靈感

Adobe color不僅從各個維度解決了我們的配色需求，同時也提供找圖需求。其中包含 9 種智能調色模式可以選擇。拾取主題色、拾取圖片中的漸變色、協助工具可以合理幫助檢查不同顏色的對比、探索behance趨勢。

地址：https://color.adobe.com/zh/create

Useanimations｜圖標動效靈感

圖標動態效果庫，當繪制的圖標需要一些巧妙的微動態效果時可以參考。

地址：https://useanimations.com/index.html

3.2 設計打磨

FigmaEX｜插件可視化

當插件特別多時候，FigmaEX極大的改善了Figma中使用插件的體驗，將插件可視化。可以進行展開，同時顯示插件的名稱與圖標。可以通過拖拽調整插件的順序，調節高度。

Autoflow｜流程圖插件

輸出交互設計稿的時候，方便快捷的在不同畫板之間連線，提升輸出效率。

地址：https://www.figma.com/community/plugin/733902567457592893/Autoflow

Skewdat｜傾斜插

這是一個非常簡單實用的 Figma 插件，它可以幫你將任何形狀元素傾斜過來。

地址：https://www.figma.com/c/plugin/741472919529947576/SkewDat?ref=prototyprio

Undraw｜插畫素材

最棒最全的插畫庫，支持快速搜索，一鍵調整顏色。

地址：https://undraw.co/illustrations

Magic Eraser｜輕松移除雜物

一款免費的在線服務，它通過 AI 自動去除圖片中不需要的部分，只需要上傳圖片，等待幾秒鐘即可。用鼠標把不要的部分劃掉，松開鼠標就會閃幾下，被劃掉的部分就消失了，比如去水印之類的小東西，如果用 PS 的圖章，估計要十來分鐘，而用 Magic Eraser 就幾秒鐘，簡單易用，推薦使用。

地址：https://www.magiceraser.io

3.3 設計驗證

Checklist Design｜設計清單

設計輸出后可以通過這個清單去做最后的檢查。網站列舉了一些通用場景（頁面、元素、流程、主題、品牌）下的基本設計要素?？梢詸z查你的設計在這些場景下是否符合規范。樣式、顏色、命名、易用性等是否合適。

地址：https://www.checklist.design/?ref=prototyprio

四、測試評估

好的方案不是一蹴而就的，設計方案需要不斷的打磨和迭代。方案需要持續和用戶進行溝通和測試，才能得到完善的方案。也需要和開發工程師不斷溝通，以達到最佳的實現效果。

4.1 用戶測試

騰訊文檔｜在線收集表

用戶測試階段方便高效的收集用戶反饋，一般用于定量的用戶測試。

地址：https://docs.qq.com/

Hawkeye｜眼動追蹤工具

一般的眼動跟蹤設備比較昂貴，使用繁瑣。這個名為鷹眼的眼動追蹤APP，可以通過手機前置攝像頭捕捉用戶在使用產品時的視覺動向。

地址：https://www.usehawkeye.com/?ref=prototyprio

4.2 評估還原

CoDesign｜騰訊自研設計協作平臺

覆蓋產品經理、設計師、工程師協作需求。設計交付更輕松，有效管理和使用設計資產。

地址：https://codesign.qq.com/

Pixel Eye｜高效視覺還原

在項目上線前設計師都會對最終的產品實現效果進行走查，以保證設計還原的準確性，體驗的流暢性。這是一款視覺還原工具，幫助前端工程師在頁面重構階段就能快速發現開發稿與視覺稿的差異，實時對比、實時修改，減少工程師與設計師的溝通成本，提升整體開發效率。

地址：pixeleye.暫未對外開放敬請期待

五、對外宣傳

設計完成后匯報展示、產品的宣傳包裝等，提供更便捷優秀的展示形式。

5.1 效果展示

Mockup World

樣機的類型全面而且免費，綜合質量很高。

地址：https://www.mockupworld.co

ls.graphics

素材非常優質精美，有免費和付費的資源。

地址：https://www.ls.graphics/#UI

5.2 在線作品集制作

Adobe Portfolio

主要面向設計師群體，幫助設計師建立個人在線作品集。幾分鐘就可以建好一個作品集網站，提供精美模板選擇。最大的特點是易于操作，無需懂網頁程式，都能在建立一個網站。最重要的是你可以使用自己的域名。Adobe Portfolio需要收費。已訂閱用戶可免費使用。

地址：https://portfolio.adobe.com/start

Portfoliobox

針對設計師或者創意人員的作品展示工具，可以直接在網頁瀏覽器中搭建屬于你的作品展示平臺。

地址：https://www.portfoliobox.net/cn/

結語

此綜述篇大家有了比較整體的了解，在設計流程中每個環節，介紹了一些比較好用的工具，后續的設計工具系列文章會針對某一環節進行更深入的探索。

感謝閱讀，以上文章由騰訊ISUX團隊創作，版權歸騰訊ISUX所有,轉載請注明出處，違者必究，謝謝您的合作。 

原文地址：騰訊ISUX

作者：ISUX設計

轉載請注明：學UI網》設計效率工具趨勢 ｜ 綜述篇

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

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

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

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