序言

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

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

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

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

2、To Path-路徑上創(chuàng)建圖形和文字

經(jīng)常做平面的設(shè)計師會遇到的一個問題，F(xiàn)igma內(nèi)要如何在創(chuàng)建曲線的文字呢？你不妨可以使用To Path插件，它的功能是可以按照指定的路徑來變換圖形和文字。

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

3、Morph-快速創(chuàng)建特殊效果

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

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

4、Mesh Gradient-網(wǎng)格漸變工具

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

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

5、Webgradients-配色靈感工具

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

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

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

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

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

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

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

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

8、Styler-快速創(chuàng)建樣式

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

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

9、Design System Organizer-管理設(shè)計系統(tǒng)

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

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

10、Breakpoints-響應(yīng)式斷點插件

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

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

11、Themer-UI界面主題管理

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

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

12、Motion-關(guān)鍵幀動畫

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

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

13、LottieFiles-導(dǎo)入和瀏覽Lottie資源

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

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

結(jié)語

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

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

Tips：

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

設(shè)計效率工具趨勢 ｜ 綜述篇

原文地址：騰訊ISUX

作者：ISUX設(shè)計

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》設(shè)計提效-Figma插件篇

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

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

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

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

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

所謂有規(guī)則，顧名思義就是可以通過一些具體參數(shù)進行調(diào)整的。

首先從基礎(chǔ)屬性上來看，漸變色會根據(jù)方向、長短的不同，呈現(xiàn)出不同的視覺表現(xiàn)形式。

方向區(qū)別：

長短的區(qū)別：

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

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

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

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

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

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

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

① 利用高斯模糊制作。

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

② 利用光圈模糊工具

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

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

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

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

所以你會發(fā)現(xiàn)，漸變色的表現(xiàn)形式是多種多樣的，就跟我們上學(xué)時候?qū)W習(xí)排列組合一樣，每種不同的組合都會產(chǎn)生不一樣的結(jié)果。

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

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

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

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

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

比如我們經(jīng)常會看到一些工業(yè)設(shè)計，在展示產(chǎn)品時經(jīng)常會用到一些單色漸變或無彩色漸變作為背景。

如上圖所示，背景使用漸變色的目的也很明顯，更利于產(chǎn)品質(zhì)感的凸顯，與產(chǎn)品本身形成視覺上的呼應(yīng)。

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

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

是不是感覺質(zhì)感提升了很多？

類似的案例還有：

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

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

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

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

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

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

類似的案例還有很多：

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

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

整體略顯單調(diào)，簡單做下調(diào)整，適當?shù)募有┭b飾的元素。

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

適當?shù)募狱c雜色，會不會更有質(zhì)感一些？

再改個配色形式試試：

來波紅配綠：

花里胡哨再來一個：

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

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

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

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

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

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

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

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

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

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

在案例中的表現(xiàn)：

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

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

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

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

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

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

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

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

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

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

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

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

當然，漸變色還有其他作用，比如：傳遞品牌價值、體現(xiàn)設(shè)計美學(xué)等等。

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

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

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

作者：老張

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》硬核干貨！漸變色在設(shè)計中有哪些妙用？

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

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

Contento

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

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

有的是因為功能簡單，比如：Chinese User Data Generator，我沒辦法做到自定義數(shù)據(jù)內(nèi)容

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

1.內(nèi)容簡單：

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

2.社區(qū)強大：

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

3.自定義：

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

Chinese Font Picker

Figma 的中文字體選擇，真的無力吐槽，F(xiàn)igma 你看看其他同學(xué)，像 PS、Sketch、甚至是 PPT、Axure

別人字體選擇是怎么做的，再看看你，F(xiàn)igma，長點心吧！

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

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

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

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

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

FigmaEX

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

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

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

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

NB Charts

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

并且還可以根據(jù)圖表進行內(nèi)容的調(diào)整，導(dǎo)入對應(yīng)的數(shù)據(jù) JSON等等…，可謂是非常強大

Measure

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

Auto follower

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

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

SkewDat

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

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

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

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

作者：CE青年

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》B端設(shè)計師常用的七款 Figma 插件

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

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

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

1.置換材質(zhì)

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

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

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

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

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

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

2.組合堆積

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

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

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

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

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

3.質(zhì)感對比

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

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

▲把導(dǎo)彈的前半部分用鉛筆的筆尖替代，以表達語言可以消滅戰(zhàn)爭的訴求。

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

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

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

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

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

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

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

作者：蔥爺

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》萬物皆可異質(zhì)同構(gòu)

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

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

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

1.置換材質(zhì)

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

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

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

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

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

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

2.組合堆積

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

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

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

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

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

3.質(zhì)感對比

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

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

▲把導(dǎo)彈的前半部分用鉛筆的筆尖替代，以表達語言可以消滅戰(zhàn)爭的訴求。

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

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

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

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

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

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

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

作者：蔥爺

轉(zhuǎn)載請注明：學(xué)UI網(wǎng) ?萬物皆可異質(zhì)同構(gòu)

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

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

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

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

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

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

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

1. 在PS中用“基礎(chǔ)模型”繪制出靜態(tài)的效果；

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

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

通過這套規(guī)范與教程，三魚把矢量繪制的難度大幅度降低，其他設(shè)計同學(xué)也能順利地在此基礎(chǔ)上展開創(chuàng)作，設(shè)計效果遍地開花，設(shè)計師和業(yè)務(wù)方都很開心。

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

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

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

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

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

我們把這些小動畫應(yīng)用于業(yè)務(wù)場景中，順利投入工作。

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

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

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

3D更大的優(yōu)勢還在于豐富的動畫演繹空間。

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

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

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

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

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

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

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

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

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

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

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

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

一開始我分享了兩套B段反饋頁的風(fēng)格，并分享了源文件，算是比較正經(jīng)的設(shè)計技法交流；

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

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

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

原文地址：站酷

作者：三魚先生

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》干貨雖然遲到了，但三魚還有私貨

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

 

一、利用手勢交互實現(xiàn)自動跳轉(zhuǎn) 

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

在 QQ 音樂主頁底部標簽欄上方會浮層展示播放器，方便用戶操作正在播放的歌曲?？梢酝ㄟ^左右滑動的手勢進行切歌體驗，對于盲選歌曲來說非常便利。在不改變當前布局結(jié)構(gòu)的基礎(chǔ)上新增功能操作，手勢交互是不錯的選擇，這個隱藏的手勢體驗?zāi)闶欠褡⒁獾侥兀?/section>

 

 

三、拖動進度條實時預(yù)覽畫面

從短視頻到長視頻，內(nèi)容量的豐富可以滿足用戶的觀看需求，針對長視頻來說進度的設(shè)計可以便于用戶選取感興趣的部分。

抖音的進度條設(shè)計也在不斷的探索新的體驗，最近更新的版本中在拖動進度條時，會隱藏其他附屬的功能，讓界面顯得更加簡潔。拖動進度條時也會實時預(yù)覽顯示視頻畫面，輔助用戶進行精準的內(nèi)容確定，提高用戶的操作效率。

 

 

四、底部功能區(qū)的延伸設(shè)計

底部功能區(qū)是手勢操作的最佳區(qū)域，近些年越來越多的產(chǎn)品對該區(qū)域進行延伸設(shè)計，滿足更多功能曝光的目的。

百度翻譯 APP 在底部標簽欄上方延伸了一個功能區(qū)，初次進入時呈現(xiàn)隱藏式設(shè)計，單擊或者上滑展開全部。延伸功能區(qū)為用戶提供了更多常用功能，便于進行頻繁操作，提升用戶的操作體驗和效率。

 

 

五、情感化的功能引導(dǎo)設(shè)計

初次使用一個產(chǎn)品時，針對一些重點功能都會進行引導(dǎo)設(shè)計，以此來提高功能的曝光度，降低用戶的學(xué)習(xí)成本。

百度翻譯 APP 通過情感化的 IP 形象進行功能引導(dǎo)，可愛的形象趴在功能區(qū)上，趣味性十足。情感化設(shè)計的融入相較于普通的文字浮層，更能吸引用戶的關(guān)注度。

 

 

六、推薦模塊的輪播翻頁設(shè)計

推薦模塊在產(chǎn)品設(shè)計中較為普遍，也呈現(xiàn)了各式各樣的設(shè)計解決方案，結(jié)合自身的內(nèi)容屬性進行設(shè)計，是體現(xiàn)差異化設(shè)計的關(guān)鍵。

最近在喜馬拉雅 APP 播客欄目發(fā)現(xiàn)了不一樣的設(shè)計表達，通過專輯封面形式結(jié)合輔助解釋來設(shè)計。不僅結(jié)合了自身內(nèi)容屬性，也能在強化視覺感的同時利用文案輔助讓解釋更加清楚。通過手勢滑動進行翻頁切換，動態(tài)效果也是非常的流暢自然。

 

 

七、提高圖文布局視野感的設(shè)計

在針對新聞、資訊、熱點等內(nèi)容進行布局時，通常有左圖右文、左文右圖、純文字布局、輪播圖等形式。設(shè)計表達考慮了閱讀引導(dǎo)和版面利用率，如果需要突出視覺感時，如何進行設(shè)計發(fā)揮呢？

最近在芒果 TV APP 首頁的看點專欄發(fā)現(xiàn)了一個感官體驗不錯的設(shè)計，將文字信息以卡片式進行布局，以大圖作為背景來襯托卡片?；瑒訒r也會有進度條式的控件提示，整體的視野感更強，更能吸引用戶的關(guān)注度。

 

 

八、微動效增強簽到設(shè)計的關(guān)注度

簽到的存在是為了提高用戶粘性，通過簽到獲得積分，兌換禮品或者升級功能服務(wù)等權(quán)益。提高簽到的曝光度才能吸引用戶參與，進而達到需求目的。

除了在簽到設(shè)計的視覺感上面進行強化以外，微動效的表達也是非常不錯的選擇?？炜?APP 就將代表簽到的圖標通過動效來強化，也能吸引到用戶的關(guān)注，提高簽到的點擊率和參與度。

 

 

九、輔助圖形強化品牌感

立足于品牌做設(shè)計，無論是那個方向的設(shè)計都需要從品牌的角度進行思考，特別是 UI設(shè)計。通過輔助圖形強化品牌感是一個方向，逐步被設(shè)計師加以運用。

比如考拉海購 APP 在多個局部區(qū)域融入了輔助圖形進行強化，將輔助圖形作為背景使用。輔助圖形結(jié)合到 UI 場景中，是 UI 設(shè)計師后期需要逐步探索的方向。

 

 

十、懸浮動效式空狀態(tài)設(shè)計

空狀態(tài)代表無數(shù)據(jù)狀態(tài)設(shè)計，通常形式有純文案提示、圖形加文案提示、情感化插畫融入、IP 形象結(jié)合、動效表達形式等。在體驗的眾多案例中，動效形式的表達相對較少，不過感官度也是不錯的。

在 COVES APP 中，采用動效式空狀態(tài)設(shè)計來表達無數(shù)據(jù)狀態(tài)。在局部的模塊還使用了懸浮動效式表達，無論是視覺感還是吸引力都呈現(xiàn)出不錯的效果。不僅吸引用戶的關(guān)注度，也融合了產(chǎn)品的設(shè)計風(fēng)格，是一個不錯的設(shè)計解決方案。

 

 

小結(jié)

每一次的體驗、分析、總結(jié)都能吸收新的思路和靈感，有助于我們提高設(shè)計的靈活性和解決需求的效率。希望本期的整理可以帶給你更多幫助，我們互相進步。 

 

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

 

作者：黑馬青年

 

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》一些被忽略的 UI 設(shè)計表現(xiàn)技巧

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

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

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

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

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

a.大量看UI設(shè)計作品

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

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

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

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

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

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

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

3.學(xué)習(xí)一些理論

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

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

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

又或者：

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

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

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

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

4.推薦一些網(wǎng)站

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

a.savee

b.pinterest

https://www.pinterest.com/

c.designweek

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

https://designcollector.xyz/design

寫在最后

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

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

路漫漫其修遠兮，學(xué)習(xí)是一個長期的過程，培養(yǎng)審美也是。

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

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

作者：Tony

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》如何培養(yǎng)設(shè)計美感，這個方法掌握了，想不進步都難！！

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

1.1 基本概念

2012年，Google公司為實現(xiàn)更智能的搜索引擎，提出知識圖譜的概念，2013年后在行業(yè)內(nèi)和學(xué)術(shù)界開始普及。

知識圖譜的定義：是結(jié)構(gòu)化的語義知識庫，本質(zhì)上是一個語義網(wǎng)絡(luò)（Semantic Network），用于描述物理世界中的概念及其相互關(guān)系。在技術(shù)層面，通過對錯綜復(fù)雜數(shù)據(jù)的有效加工、處理、整合，轉(zhuǎn)化為數(shù)據(jù)關(guān)系來聚合大量知識，從而實現(xiàn)知識的快速響應(yīng)和推理；在可視化的應(yīng)用中，知識圖譜表現(xiàn)為多關(guān)系圖（Multi-relational Graph），在圖形化界面中可讓用戶查看和互動（如圖1）。

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

1.2 知識圖譜的特點：

其特點主要包含以下兩方面內(nèi)容：

1. 它是由“節(jié)點”和“邊”構(gòu)成的三元組

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

圖2（作者依據(jù)知識圖譜相關(guān)概念繪制）

圖3（引用自網(wǎng)絡(luò)圖片）

2. 它的數(shù)據(jù)以知識的角度呈現(xiàn)。

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

1.3 知識圖譜的作用

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

2. 信息拓展，提供更豐富的信息內(nèi)容。

3. 信息連接，構(gòu)建有深度和廣度的知識系統(tǒng)。

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

1. 知識圖譜的技術(shù)架構(gòu)-側(cè)重在數(shù)據(jù)關(guān)系模型和機器學(xué)習(xí)，普通用戶很難讀取和理解。

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

圖4（作者依據(jù)知識圖譜相關(guān)概念繪制）

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

2. 傳統(tǒng)的信息可視化-側(cè)重在數(shù)據(jù)結(jié)果的展示和篩選，較少涉及數(shù)據(jù)關(guān)系的干預(yù)。

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

圖5（作者依據(jù)傳統(tǒng)信息可視化方法相關(guān)概念繪制）

3. 知識圖譜的可視化-側(cè)重在數(shù)據(jù)關(guān)系構(gòu)建和處理過程的可視化

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

對知識圖譜信息的可視化，重心落在數(shù)據(jù)信息的提取和關(guān)系構(gòu)建上，將數(shù)據(jù)信息的編譯過程呈現(xiàn)給用戶。知識圖譜信息可視化和傳統(tǒng)信息可視化方法之間的關(guān)系，如圖6。

圖6（作者依據(jù)信息可視化方法相關(guān)概念繪制）

二、知識圖譜的可視化設(shè)計方法

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

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

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

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

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

2.2 【數(shù)據(jù)層】對數(shù)據(jù)進行提取與加工

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

1. 數(shù)據(jù)提取-圍繞知識主題進行數(shù)據(jù)信息的提取。

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

2. 數(shù)據(jù)加工-進行知識語義加工。

數(shù)據(jù)加工的過程，就是將羅列出的數(shù)據(jù)進行分類和篩選，確定最能夠表現(xiàn)知識主題的描述緯度或數(shù)據(jù)類型。如圖7，通過分析影響因素的關(guān)聯(lián)程度，選擇具備直接影響因素的數(shù)據(jù)，或劃定數(shù)據(jù)范圍后，再進行細分。可以利用卡諾模型、波士頓矩陣等方法找到數(shù)據(jù)對主題影響程度的優(yōu)先級，具體的挑選方法無定式，只要能整理出適合的數(shù)據(jù)類型。

圖7（作者依據(jù)相關(guān)案例繪制）

3. 數(shù)據(jù)清洗-進行數(shù)據(jù)篩選和最終確認

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

2.3 【關(guān)系層】構(gòu)建數(shù)據(jù)關(guān)系三元組

在知識圖譜的技術(shù)架構(gòu)中，這一環(huán)節(jié)體現(xiàn)在本體構(gòu)建上，本體是個專業(yè)概念，本體構(gòu)建也有多種可用的成熟模型，屬于技術(shù)側(cè)內(nèi)容，本文不展開論述，僅闡述設(shè)計層面的思路。技術(shù)是讓數(shù)據(jù)更精準，而面向用戶的設(shè)計是讓數(shù)據(jù)更有用和好用。

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

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

圖8: 由數(shù)據(jù)構(gòu)建的三元組關(guān)系圖（作者依據(jù)相關(guān)案例繪制）

2.4 【可視層】可視化圖形語義轉(zhuǎn)換/可視化映射

當關(guān)系構(gòu)建好以后，簡單的三元組是容易讀取的，但眾多三元組集成在一起，也會涉及到信息讀取效率的問題，就需要將關(guān)系結(jié)構(gòu)圖形化，這一步驟也是傳統(tǒng)信息可視化方法中的必然環(huán)節(jié)。根據(jù)已經(jīng)構(gòu)建好的數(shù)據(jù)關(guān)系結(jié)構(gòu)，可通過“圖表映射”和“視圖設(shè)計”兩種方式，進行可視化的語義轉(zhuǎn)換。

1. 可視化圖表映射

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

圖9:網(wǎng)狀關(guān)系圖（引用自E-chart網(wǎng)站截圖）

圖9:層次關(guān)系圖（引用自E-chart網(wǎng)站截圖）

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

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

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

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

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

2. 可視化視圖設(shè)計

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

圖13:同班級不同的學(xué)生網(wǎng)絡(luò)社交行為圖譜（引用自演講《秘密的設(shè)計》截圖）

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

圖14:發(fā)現(xiàn)網(wǎng)絡(luò)社交行為最為奇特的三個學(xué)生（引用自演講《秘密的設(shè)計》截圖）

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

三、結(jié)語

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

參考文獻：

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

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》知識圖譜的信息可視化設(shè)計方法

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

一、日常積累

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

Panda｜全而美的設(shè)計訂閱平臺

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

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

Topys｜創(chuàng)意內(nèi)容平臺

全球頂尖創(chuàng)意內(nèi)容平臺，作為中國成立最早、最受歡迎的創(chuàng)意垂直網(wǎng)站，以 “Open Your Mind” 為宗旨，始終專注在全球創(chuàng)意、藝術(shù)、靈感、人文領(lǐng)域?qū)ふ易钣匈|(zhì)感的聲音。

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

Voicer｜分享生活和設(shè)計的美學(xué)

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

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

Design better｜優(yōu)質(zhì)設(shè)計讀物網(wǎng)站

涵蓋設(shè)計商業(yè)思維、產(chǎn)品設(shè)計原則、設(shè)計系統(tǒng)等關(guān)于推動設(shè)計團隊前進的實踐讀物，同時提供PDF和有聲格式。

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

二、研究分析

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

Noted｜錄音筆記好工具

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

Marginnote｜文獻收集箱

重塑學(xué)習(xí)方式的閱讀筆記工具，更加高效閱讀書籍和學(xué)習(xí)，可以在閱讀時摘錄筆記，制作學(xué)習(xí)卡，提取關(guān)鍵詞，根據(jù)筆記生成思維導(dǎo)圖，梳理知識框架。非常適合閱讀專業(yè)書籍，閱讀論文以及復(fù)習(xí)。

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

GoodNotes｜手寫筆記

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

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

騰訊文檔｜在線協(xié)作

調(diào)研階段方便多人一起搜集資料和匯總，多人同時在線編輯，內(nèi)容實時同步。隨時隨地高效協(xié)作，輕松創(chuàng)作。

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

Xmind｜思維導(dǎo)圖

功能強大的思維導(dǎo)圖軟件，極簡設(shè)計，流暢體驗，多種結(jié)構(gòu)圖風(fēng)格選擇，方便資料的匯集和思路的整理。

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

三、設(shè)計創(chuàng)作

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

3.1 靈感搜集

Collect UI｜界面靈感

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

地址：https://collectui.com

Adobe Color｜配色靈感

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

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

Useanimations｜圖標動效靈感

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

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

3.2 設(shè)計打磨

FigmaEX｜插件可視化

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

Autoflow｜流程圖插件

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

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

Skewdat｜傾斜插

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

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

Undraw｜插畫素材

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

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

Magic Eraser｜輕松移除雜物

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

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

3.3 設(shè)計驗證

Checklist Design｜設(shè)計清單

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

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

四、測試評估

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

4.1 用戶測試

騰訊文檔｜在線收集表

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

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

Hawkeye｜眼動追蹤工具

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

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

4.2 評估還原

CoDesign｜騰訊自研設(shè)計協(xié)作平臺

覆蓋產(chǎn)品經(jīng)理、設(shè)計師、工程師協(xié)作需求。設(shè)計交付更輕松，有效管理和使用設(shè)計資產(chǎn)。

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

Pixel Eye｜高效視覺還原

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

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

五、對外宣傳

設(shè)計完成后匯報展示、產(chǎn)品的宣傳包裝等，提供更便捷優(yōu)秀的展示形式。

5.1 效果展示

Mockup World

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

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

ls.graphics

素材非常優(yōu)質(zhì)精美，有免費和付費的資源。

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

5.2 在線作品集制作

Adobe Portfolio

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

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

Portfoliobox

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

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

結(jié)語

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

感謝閱讀，以上文章由騰訊ISUX團隊創(chuàng)作，版權(quán)歸騰訊ISUX所有,轉(zhuǎn)載請注明出處，違者必究，謝謝您的合作。 

原文地址：騰訊ISUX

作者：ISUX設(shè)計

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》設(shè)計效率工具趨勢 ｜ 綜述篇

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

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

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司