01.玻璃、琉璃質感

即把視覺主體做成玻璃質感或者是琉璃質感，并且在排版的時候，通常會把主體壓在文字上，通過透明的材質使文字發生折射，創造出強烈的視覺反差。

02.酸性風

酸性設計是一種結合了金屬質感、鐳色漸變、達達主義、機能素材等特性的設計風格，在視覺上會有一種“酸”的感覺。

03.不銹鋼質感

有很多設計會把這種不銹鋼質感的風格統統歸結為酸性風，其實我覺得二者的差別還是挺大的，首先，這種不銹鋼質感的顏色是黑白灰的，而不是彩色漸變；其次，整個海報的主色調通常也是黑白灰，視覺效果會低調、簡約一些，并沒有“酸”的感覺。

04.熒光風

因電影《蜘蛛俠之平行宇宙》的系列海報，熒光風也火了起來，畫風類似街頭涂鴉，并采用飽和度極高的對比色搭配，會有一種刺眼、眩暈的感覺，但視覺沖擊力確實強，而且很酷、很潮。

05.彌散漸變插畫

彌散漸變是一種通過模糊效果塑造的漸變效果，看上去像似水墨暈開的感覺，而且通常會加上一點雜色質感，使用這種漸變效果來繪制一些簡單的插畫，有一種清晰、時尚的感覺，常用于食品海報中。

06.扁平幾何插畫

即通過簡單的幾何圖形來繪制純二維的插畫，效果簡單而抽象，這種風格一直都是設計師的寵兒，所以并不是最近才開始流行的，但是RGB色彩的使用可以讓畫面更加具有視覺沖擊力，再配合靈活的描邊和排版處理，這種風格也變得越來越現代、時尚。

07.新丑風

這個備受爭議的設計風格，喜歡使用很大膽、很刺眼的配色風格，比如玫紅色配綠色，插畫很隨意，類似小孩的畫作，在排版和構圖上也很不嚴謹，完全不符合傳統優秀設計的定義，故被稱為新丑風，在商業設計中要慎用。

08.三維文字

這類設計通常以文字為主，沒有圖片元素，把主要的文字通過3Ｄ貼圖或者扭曲的方式，使其呈現出三維的視覺效果，這與文字通常呈現出來的狀態完全不同，所以視覺沖擊力也很強。

09.3D插畫

3Ｄ的世界是最接近真實的世界，所以3Ｄ是大的趨勢，而如果把3Ｄ和富有想象力的插畫結合起來，那么效果會更加的驚艷和震撼。

10.3D動效

在3Ｄ的基礎上繼續深化就是3Ｄ動效，被經常用在電商設計、線上海報設計和網頁設計中。

11.復古金屬

畫面中的圖形也是簡單的幾何圖形，但質感通常是用漸變工具做出的、比較粗暴的金屬效果，再加上復古的配合和雜色質感，看上去很像上個世紀的海報。

12.復古故障

即把早期的電腦、電子設備出現故障所呈現出來的畫面和效果，融入到設計當中，通常也會結合蒙太奇手法（拼貼風）使用，常用于藝術設計中。

13.機能風

機能風也不是這兩年才出現的，但最近也很火，畫面的氛圍比較科幻，通常以機器人或者被機械加工過的人物作為視覺主體，標題字體一般會用簡潔、硬朗的無襯線體。另外，類似電路板造型的界面框也是機能風常用的設計元素。

– over –

轉載請注明：學UI網》13種當下正火的設計風格，潮爆了！

藍藍設計建立了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咨詢、用戶體驗公司、軟件界面設計公司

 一、導航欄的構成 

整個導航欄通常分為左、中、右三部分，左側和右側主要用來放置功能控件，中間部分主要用來放置文字標題，接下里展開分析左中右三部分的構成。

左側導航

放置在APP頂部導航欄左側的控件很多都跟動作相關，例如執行返回動作、關閉動作或者點擊漢堡菜單進行展開動作等。

除了在左側放置表示動作的控件，還可以在放置頭像框、消息提示等優先級較高的內容，用來引起用戶的注意。

在網頁端的頂部導航欄中，左側都會放置品牌logo，因為網頁端頂部的空間更大，所以還可以在LOGO周圍結合徽標、搜索框、下拉菜單等空間。

中間部分

APP頂部導航欄的中間部分主要用于放置標題，當然根據使用場景的不同，還可以放置頭像、搜索框、下拉框、導航等控件。

1) 標題

最常見的是在中間使用加粗的文字作為標題，也可以使用主標題+副標題的形式來展示更多的信息。

還可以把標題區域做成支持下拉的樣式，擴展更多的功能全。

2) 用戶頭像

在社交類產品或對話框中，會在中間部分放置用戶的頭像和信息，用來展示用戶的詳細信息。

3) 產品Logo

有些產品還會將Logo放在導航欄的中心位置用來展示品牌形象，在APP的首頁可以考慮這樣設計，起到強調作用。

4) 分段控件

在移動端產品中，還可以在中間部分放置分段控件，通常2-3個標簽，在早期的網易云音樂APP中就用到了這樣的設計，通過點擊標簽或者左右滑動頁面完成內容切換。

5) 搜索框

導航欄中間經常能看到搜索框，然后搜索框左右兩邊放置其他的控件。當導航欄的內容太多，比如有文字標題、頭像、按鈕等控件，搜索欄和這些控件可能無法并排放置時，可以將搜索欄橫向拉長，放在下一行單獨展示。

現在淘寶APP首頁的導航欄就做成了兩行，上一行用來放置文字標題和功能圖標，搜素欄集合掃碼、拍照等功能單獨作為一行。

6) 導航選項

在網頁中，標簽、按鈕、面包屑導航等常見的導航組件，通常會固定在網頁導航的中心位置。當頁面縮小到移動端時，考慮到移動端尺寸較小，如果頂部導航內容太多，可以嘗試把功能組件放到第二層級。

右側導航

相對于左側和中間，APP導航欄的右側部分更加靈活，沒有固定的要求說必須放哪些內容，根據需求放置各種類型的功能控件。

1) 頭像

如果想調用與用戶屬性相關的功能，就可以將頭像放在導航欄的右側區域，點擊彈出相關的選項。

2) 圖標

在右側區域放置功能圖標是最常見的設計，把用戶最常使用的功能，例如消息圖標、搜索圖標，都可以集中到導航欄的右側區域。

如果右側需要展示的圖標太多，可以把這些圖標聚合在一起，處理成類似微信首頁右上角的設計，點擊之后出現更多功能。

3) 按鈕

按鈕也可以放在右側區域來引導用戶操作。當出現多個按鈕時，要使用樣式和顏色來靈活區分按鈕的主次關系。

按鈕的形狀包括圓形、方形、圓角矩形等，按鈕樣式包括顏色填充、描邊、圖標和文字結合等多種風格，通過靈活的設計抓住用戶的注意力。

4) 搜索框

在網頁端中會看到搜索框放在右側的設計，將搜索框作為單獨的控件或者和其他控件組合使用放在右側，方便用戶快速訪問。

5) 下拉菜單

在Pad端和網頁端中，可以使用嵌套在應用欄右側的下拉菜單進行切換帳戶、語言等操作。

 二、導航欄的5種設計風格 

頂部導航欄設計風格需要與與整個產品的UI相匹配，常見的導航欄設計樣式有

扁平風格、陰影懸浮效果、顏色填充效果、使用半透明導航等。

扁平風格

頂部導航區域完全融入到背景中，和整個頁面融為一個整體，頁面看起來比較簡約。

陰影懸浮風格

通過在導航欄下方增加一層陰影效果，讓導航欄有懸浮在頁面上的感覺，同時便于和頁面其他內容作區分。

顏色填充風格

將導航欄背景進行色彩填充，不透明度降低到8-12%，使用一些簡約而高級的色彩來增加頁面的豐富度，體現品牌特點。

深色風格

APP頁面的背景大多都是淺色，這個時候如果使用深色的導航，能夠產生很強烈的對比效果，用來突出導航中的內容。比如早期的微信APP頁面，頂部就是采用深色的導航，和淺色的頁面作對比。

透明風格

圖片詳情頁的UI設計中常用到透明的導航風格，既能避免導航欄將圖片內容遮擋，還能突出頁面的高級感。

三、導航欄交互狀態分析 

選中狀態

當用戶與導航欄交互時，導航欄上的控件要能夠動態切換來為用戶提供即時反饋，比如當選中頁面中的內容時，導航欄要出對應的操作提示，是否刪除、分享等。

滾動狀態

當頁面上下滾動時，原本扁平的APP導航欄出現陰影懸浮的升高效果，狀態的改變會讓操作看起來更自然。

背景模糊

當頁面滾動時，頂部導航出現毛玻璃的模糊效果，這是現在很流行的視覺效果，會讓整體的用戶體驗更流程。

尺寸調整

當頁面尺寸變小時，要考慮將多余的導航選項折疊并隱藏在“更多”圖標里面，這樣才會讓設計更合理。

最后 

以上就是導航欄(App Bar)設計中能用到的知識點和設計細節，希望通過這些內容能幫助你對導航欄有更多的設計想法和思考。

「組件系列」的其他文章，近期也會不斷更新，歡迎大家關注??

設計夾將近期分享的設計資源整理成了一份清單合集，如果其中有大家需要的資源，直接在公眾號后臺回復對應的關鍵詞即可免費領取，這份清單也會不斷更新更多的資源，建議大家收藏起來隨時查看。

慢慢來比較快，希望對你有幫助！

領取方式：關注公眾號，后臺回復【資源】獲取高清素材清單

轉載請注明：學UI網》APP導航欄設計分析：5種設計樣式+4種交互狀態

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

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

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

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

01  Cool Backgrounds

網站鏈接：https://coolbackgrounds.io/

網站介紹：Cool Background 是由5個開源生成器整理組成的彩色漸變圖像集合在一起的工具集，內置5種不同的背景風格，每一種風格還提供了簡單的參數配置。非常的炫酷美觀。

低模三角形

粒子

CSS漸變

階梯漸變

圖片

使用方式：左側選擇不規則形狀、圖形、漸變背景、圖片等，右側可以選擇不同的色彩組合，選擇適合自己的色彩風格后，點擊下載即可。

02 180種漸變背景

網站鏈接：https://www.fengtupic.com/colortool

網站介紹：內含180種漸變配色方案，特別好看美觀，適合各種場景模式下的背景使用。

使用方式：選擇適合自己場景的漸變色，可拷貝css格式，也可下載png格式。

03 Pigment

網站鏈接：https://pigment.shapefactory.co/

網站介紹：可通過改變飽和度、色溫和色系改變配色方案，還可通過查看場景效果觀察此配色方案呈現效果。

網站截圖

飽和度  亮度 顏色

選中和更多

使用方式：左側可以選擇不同的飽和度和亮度，選擇其他色調，右側放大可查看場景配色效果。

04 ColorSpace

網站鏈接：https://mycolor.space/

網站介紹：Color Space 是一款非常實用的漸變生成器，我們只需要選擇一個顏色，就可以快速生成20-30種不同風格的配色方案。同時還提供了梯度和三色漸變選項，可以快速生成配色并查看 CSS 代碼。

網站截圖

輸入顏色代碼或選擇顏色

生成方案

更多與修改

CSS代碼模式

三色漸變

使用方式：上面輸入色值，自動出來漸變方案，還可左右滑動選擇適合自己的搭配方案

05 Adobe Color

網站鏈接：https://color.adobe.com/zh/create/color-wheel

網站介紹：可自由選擇色環上不同的顏色值，依照類比、單色、三原色、補色等不同搭配模式進行搭配，下面展示一系列色值。同時可將看到的好的圖片色紙上傳上來，自動配比色值，同時，還能查看背景色與文字的對比度檢測，非常適合網站多色搭配。

色輪

輔助工具

使用方式：滑動多tab滑塊，選擇色環顏色做不同類型搭配；利用協助工具查看文字與背景的對比檢測。

06 BrandColors

網站鏈接：https://brandcolors.net/

網站介紹：這個網站是基于最大的官方品牌顏色做整理，包含了眾多品牌顏色官網的配色方案，可作為網站或者品牌配色的借鑒。

顏色方案

選中后復制下載

使用方式：選擇好相關品牌的色彩調性，可查看色值，可復制色值，也可以下載相關色值，超級方便。

07 Color Leap

網站鏈接：https://colorleap.app/home

網站介紹：一鍵生成復古風圖片色調分離，可以選擇年代搜索過去180種配色方案。

年份選擇

年份列表

代表圖片和查看顏色

查看顏色和查看圖片

使用方式：選擇年代，選擇圖片風格的配色方案，查看顏色，復制相關色調即可。

08 ColorBox

網站鏈接：https://www.colorbox.io/

網站介紹：ColorBox 是選擇一個顏色，會生成一個顏色系列的顏色工具?？梢詭椭覀冚p松地創建非常炫酷的色彩集，配色頁面還有大量的個性化選項，滿足我們的任何需求。

網站截圖

飽和

使用方式：左側可以添加不同的顏色分類值，右側調整搭配的顏色系列和同色系和補色系不同選擇，曲線直觀展示出色調和飽和度的變化幅度。

09 Eggradients

網站鏈接：https://www.eggradients.com/

網站介紹：Eggradients 是一款收錄了最新設計趨勢漸變色彩的配色網站，以雞蛋的形式展現，支持一鍵復制。

預選顏色

漸變調色板

使用方式：選擇適合自己設計場景的配色方案，復制即可。

10 CoolHue 2.0

網站鏈接：https://webkul.github.io/coolhue/sketch-plugin/

網站介紹：CoolHue 2.0是一款免費的 Sketch 漸變配色插件和收集工具。

使用方式：在sketch下載插件，直接點擊插件，選擇相關配色。

11 Free Mesh Gradient Collection

網站鏈接：https://www.ls.graphics/meshgradients

網站介紹：包含100多個免費的漸變色合集，支持 Sketch、PNG、AI、JPG、EPS 等多種格式下載。

網站截圖

翻譯截圖

漸變截圖

使用方式：可選擇ai、eps、jpg、png格式，選擇好看的漸變色下載即可。

12 Grabient

網站鏈接：https://www.grabient.com/

網站介紹：Grabient 一個非常漂亮且實用的漸變網站，支持 CSS 樣式代碼復制、360度漸變旋轉、自由增加或刪除漸變顏色等功能。

網站截圖

調整角度

調整顏色

漸變比例

使用方式：選擇適合自己風格的配色方案，點開調整漸變梯度，下載即可。

轉載請注明：學UI網》12種超級好用的-免費漸變神器

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

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

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

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

3種圓環圖樣式 

標準圓環圖

圖表中間空心的部分用來展示數據的總數，用圓環的弧長和顏色表示不同數據的占比，圖表旁邊有圖例用來解釋說明。

布爾圓環圖

布爾圓環圖就像是給圓環圖做了布爾運算，只表示正負兩個值。

比如想重點突出完成率，就使用綠色圓環來表示68%的完成率，圓環其他部分為灰色，同理想重點突出反彈率，就使用紅色圓環來表示83%的反彈率，圓環其他部分為灰色。

圓環中心部分用來顯示相關數值的百分比和標簽。此外布爾圓環圖不需要額外添加圖例。

標簽圓環圖

圓環圖交互狀態分析 

懸停狀態

在標準圓環圖中，鼠標懸停在圓環圖上時，跳出分段名稱+百分比+數量值的彈窗。在標簽圓環圖中，懸停的圓環部分突出顯示，其余部分淡出處理。

點選狀態

圖表段可以是交互式的，點擊對應的分段時，右側的圖例也會同步高亮顯示。

焦點狀態

焦點狀態和上面提到的懸停狀態類似，唯一的區別在于，焦點狀態選中分段后有一個放大+描邊的圓環效果，突出展示數據。

空狀態

當沒有可用的數據時，應該在圖表上表明這一點，并給出提示引導用戶去點擊。

錯誤狀態

圓環圖使用指南 

使用分類顏色

保持圓環圖每部分顏色都使用醒目的顏色且具有對比性。在圓環圖中不建議使用同色系顏色來顯示數據，同色系顏色常用在直方圖中。

最多使用五個分段

當圓環圖包含多個數據分段時，圖標會變得難以理解，為保證圖標的清晰，盡可能將分段控制在 2-3 段，不要超過5段。如果數據過多，可以考慮使用柱狀圖、條形圖等其他形式的圖表。

保證數據準確

圓環圖的所有分段加起來的數值應該始終為 100%，沒有有多段數據占比過小，可以一起匯總到“其他”分段中。

按順序排列數據

圓環圖的份分段應從12點位置開始按最大值排序，然后按順時針方向依次按大小排列每個數值。右側的圖例頁應該從上到下保持一致的排序。

不要將時間分段

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

作者：Clippp

轉載請注明：學UI網》數據可視化圖表設計指南：圓環圖

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

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

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

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