網站鏈接：https://squoosh.app/editor

Squoosh 是谷歌推出的一款在線圖像壓縮工具，可點擊選擇或直接往里面拖圖片，在左下方可選擇想要生成的圖片格式，右下方選擇圖片質量，再下載即可。

二、Bejson

網站鏈接：https://www.bejson.com/ui/compress_img/

非常全面的一個工具類網站，不但可以壓縮圖片還可以在線加水印、轉化格式、裁剪等。

三、iLoveIMG

網站鏈接：https://www.iloveimg.com/zh-cn

國外的一款工具網站可以提供圖片壓縮、裁剪、轉換文件，以及調整文件的大小等。還可以通過幾個點擊來制作GIF動圖！這些都是免費的。支持壓縮JPG, PNG，SVG或GIF等格式圖片。

四、TinyPNG

網站鏈接：https://tinypng.com/

之前老叫它“熊貓吃竹子”壓縮站，一個專門處理png格式的圖片壓縮網站非常好用，不過免費用戶單張圖片不能超過5m 單次不能超過20張。

五、圖好快

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

圖好快在線壓縮網站，可以有損壓縮手動控制圖片的壓縮質量，部分功能是收費的，普通用戶每天可掃描登錄免費試用一次。

六、Smallpdf

網站鏈接：https://smallpdf.com/compress-pdf

國外專門處理PDF在線壓縮、編輯的網站。

七、Optimizilla

網站鏈接：https://imagecompressor.com/zh/

國外JPEG、GIF、PNG格式圖片壓縮站。

八、Ezgif

網站鏈接：https://ezgif.com/

Ezgif.com 是一個簡單的在線 GIF 制作工具和用于基本動畫 GIF 編輯的工具集。在這里，您可以創建、調整大小、裁剪、反轉、優化和對 GIF 應用一些效果。

九、ilovepdf

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

在線處理PDF工具站。

十、易轉換

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

免費好用的文件轉換工具。

十一、Aconvert

網站鏈接：https://www.aconvert.com/cn/image/

Aconvert.com是一個寶藏工具站，可以在線轉換各類PDF，文檔，電子書，圖像，圖標，視頻，音頻等格式和壓縮文件，非常方便。

十二、bigjpg

網站鏈接：https://bigjpg.com/

通過AI算法可以在線放大圖片，提升圖片質量。你可以選擇在線上傳處理（較慢）或者下載客戶端。

十三、removeby

網站鏈接：https://www.remove.bg/zh/upload

自動摳圖神器，上傳圖片一鍵摳圖。

十四、搞定摳圖

網站鏈接：https://koutu.gaoding.com/

搞定設計出品的AI智能口摳圖工具，還有好多好玩的可以去探索。

十五、圖象

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

圖象是一個聚焦國內外可視化創意的社區，里面的作品質量都非常不錯，不管是工作中找靈感、還是上傳作品宣傳個人IP都是一個不錯的選擇。

原文地址：小六可視化設計（公眾號）

作者：Mr小六

轉載請注明：學UI網》效率必備！這15個圖像處理網站你收藏了嗎？

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

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

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

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

定義

其實內容創作平臺嚴格意義上來講，算是B端產品的運營管理類型的產品（如果不清楚運營管理類型的產品建議查看我之前文章 ），它主要依附于大型的C端產品，幫助這些產品去連接更多有價值的內容

B端設計指南 – 產品類型

在內容管理型產品當中，主要是作為平臺方，提供給在平臺當中創作的人們進行使用
舉一個例子，我在 Youtube 上傳了一個視頻，我想要了解我這個視頻用戶的真實反饋，以及對于自己的作品進行標簽、標題上的優化，這樣，我便可以打開 Youtube Studio 進行查看

而目前這類內容創作平臺，就是提供給這些內容創作者進行使用，因此這類型的產品主要分為兩類：

• 視頻：Youtube、Bilibili、抖音、快手、西瓜視頻…
• 文字：微信公眾號、頭條號、知乎、站酷、語雀…

內容創作平臺與CMS較為類似，CMS是 Content Management System 的縮寫，意思為“網站內容管理系統”， 用來管理網站后臺，編輯網站前臺

比如我們會經常聽到的 WordPress 就是一個非常典型的 CMS  產品，CMS大多數需要你自行搭建，而上方提到的內容創作平臺，則是別人已經提供好了對應的基礎功能，你只需要使用即可（這個概念與 SaaS 有一些些雷同）

而內容創作平臺更加垂類一些，主要針對的就是 作者投遞的管理平臺

業務

嚴格意義上來說，內容創作平臺只會有一個角色，也就是內容創作者，只是隨著平臺的不斷擴大，后續會有很多運營等相關職位，比如 微信公眾號，它本身只支持創作者進入，隨著平臺規模不斷擴大，逐漸演變成 三類固定角色 提供給用戶進行綁定

當然內容創作平臺的整體設計，一定要與之前平臺固有風格保持一直，這樣才能夠有統一的風格

頁面

在整個內容創作平臺當中，會有很多非常典型的頁面，作為設計師，我們就來看看典型頁面如何下手

1、內容編輯頁

在內容創作平臺當中，必須要提供的功能便是內容上傳，因為無論是文章、又或是視頻，都需要創作者進行上傳、編輯
因此作為設計師，我們首先應該關注的便是這個內容編輯頁的使用體驗

比如文章類的產品中，我們需要去編輯內容排版，那就一定會用到富文本編輯器。富文本編輯器目前會分為兩個流派，一類就是傳統的 頂部編輯器 ，一類是 Block 編輯器

頂部編輯器：其實這個我不知道專業的術語，根據外形隨意起的名字

Block 編輯器：畢竟我是深度 Notion+飛書的用戶，如果對這個感興趣，可以去到文末留言，我們之后單獨出一篇文章來講

不過目前，內容創作平臺的產品都是按照基本的 富文本頂部編輯器的方式來進行，Block 更多只在筆記軟件當中出現

這里分享一些開源的富文本編輯器，很多B端產品可以讓前端直接使用

https://www.wangeditor.com/

https://summernote.org/

https://dhtmlx.com/docs/products/dhtmlxRichText/

再比如視頻類的產品，就主要圍繞 上傳視頻、設置封面、標題、等內容進行展開，其實功能上都大同小異

因此你會發現，內容編輯部分，大家的功能都會比較趨同（因為無論是 視頻還是文字媒介，因為前臺系統對于內容的要求都基本一致，因此如果想要了解前后臺系統的邏輯關系，其實可以從基礎的內容創作平臺入手去做分析）

2、數據查看頁

數據查看頁在內容創作平臺非常重要，因為絕大多數內容創作者都會非常關心自己的內容數據情況，可以通過數據，來為自己的內容方向進行合理的規劃
可以把數據查看頁比作是一個小型的 數據分析 產品，區別的是 內容創作平臺 的數據查看，是已經提供了默認的分析維度與指標，你只能通過篩選去查看數據之間的關系，這里就不再贅述，給大家看看不同產品的數據查看頁，了解它們的設計方式

3、其他頁面

當然這類產品還會涉及到比如 常見話題、熱門話題、素材庫 等等…  完整的圖片內容我就打包放在圖庫平臺上，大家可以進入查看

花瓣：www.huaban.com/user/youthce

語雀：www.yuque.com/youthce/pic/

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

作者：CE青年

轉載請注明：學UI網》內容創作平臺的解析與分享

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

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

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

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

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

作者：黑馬青年

轉載請注明：學UI網》【UI設計作品總結】DJI 農業無人機 APP 頁面重構

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

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

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

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

首先給大家介紹一位來自塞爾維亞插畫家 Alex Krugli。他擅長通過豐富的圖形組合和絢麗的色彩表達，來使原本簡單的畫面內容變得層次豐富，百分百吸引你的眼球。

*圖片來自插畫師 Alex Krugli，僅供賞析

分析Alex Krugli的畫風特點 

我真是一個善于總結的好學生，下面開始畫起來吧~

本次的主題我想以建筑為主元素，構建一個室外場景畫面，首先我們可以去百度或者花瓣搜索些漂亮的房子照片，找找靈感，關鍵詞可以是歐式建筑，復古小房子等。

搜索建筑素材圖片時，需要注意兩點：

1、幾何感強

2、設計感強的建筑做參考

這里我找到了兩張建筑圖片，將其中一張作為主元素建筑，另一張作為遠景建筑群，然后可以再去找找場景相關的素材，如：車輛、郵筒、植物等，同樣也是靠百度啦~

圖片來源網絡，僅供賞析

在 Alex Krugli 的插畫作品中，非常注重畫面層次的劃分，我們可以先分析一張他的作品。

從顏色分區可以看出畫面分了四個層次，圖中的紅色區域是畫面的前景，藍色是中前景，綠色是中后景，紫色是遠景。

那如何把畫面安排的有序且豐富呢？

1. 劃分建筑層次，由近及遠。如圖，建筑可以有單體和建筑群兩種形式，相互穿插，區別各個層次建筑的大小寬窄高低，中景建筑一般占比最大，比較密集，前景建筑起遮擋作用，背景建筑概括，占比較小。

2. 拉開建筑大小等級，近大遠小。（如下圖中近似造型的建筑在畫面中大小變化）

3. 豐富建筑剪影形，高矮、粗細、方圓相互結合。

4. 近景的造型更復雜，背景簡化處理。

通過分析確定了我的構圖方向，利用搜集的素材，我們可以大致的擺放一下位置，將畫面分四個層次，藍色區域的中景建筑是這次畫面的主體元素，紅色前景區域起到遮擋作用，綠色中后景區域豐富了畫面的層次，紫色遠景作為背景襯托前面的元素。

• 主體建筑物的繪制

1. 抓住照片中建筑物最有特點的幾個地方

2. 根據構圖調整建筑的長寬比例，用幾何形體概括外形，扁平處理，不做透視的變化。注意：對參考照片做一些主觀的調整，不要完全一樣哦~

• 遠景建筑群的繪制

1. 概括建筑群中的幾種建筑形態

2. 將幾種建筑形重新組合，做高低大小的演變，形成新的建筑群，添加植物、臺階等元素豐富層次變化，并添加建筑內部的細節。

• 其他元素的繪制

1. 汽車的繪制：

② 用幾何圖形進行概括和演變，車輛主要用到的幾何形是半圓角矩形和圓形。

2. 郵筒的繪制：同樣也是對照片進行幾何圖形的概括，主要用到了半圓形、矩形以及圓形。

然后我們將二者和小植物做組合搭配，形成畫面的前景，元素組合的形式可以避免元素的單一，并且更有層次。

3. 植物：植物同樣可以從照片中提取幾何形，再進行演變，這里我通過照片提取了圓角矩形，三角形，圓形，再通過組合疊加的形式，演變成新的幾何形。植物在畫面中可以作為前景，或者穿插聯系其他單體，也可以作為點綴元素重復出現。

4. 人物：人物在畫面中也是起到點綴的作用，面積不大，不需要五官的刻畫，畫出基本動態即可。

① 從照片中提取動態。

線稿的繪制是在 illustrator 中完成，在草圖的基礎上添加物體內部細節并對整個畫面做最后的調整。

1. 建筑的屋頂造型用三角形、梯形、半圓做了統一的規范。

2. 在草圖的基礎上，用AI把線稿畫出來。

最后再檢查一下畫面的疏密關系，線稿就完成了。

1. 梳理黑白關系

因為畫面的層次比較多，我們可以先確定下畫面的黑白關系，場景設定是夜晚的場景，整體氛圍可以是暗色調，中景區域的顏色亮暗對比較強，是重點突出的地方，背景統一在暗調里，不做太強烈的亮暗對比，起襯托作用，前景壓暗，穩定畫面效果。

2. 配色：配色我選擇藍紫色調為畫面的主色，輔助色選取主色的鄰近色（綠色）來豐富顏色，互補色（深紅色）來增強畫面沖擊力，用純度高的橙色與紅色作為畫面的點綴色，使整體配色既和諧統一，又豐富多彩。

為了避免配色雜亂，可以將畫面分塊，大致安排下畫面顏色的占比，主色大概占到畫面的 65%，鄰近色 15%，互補色 15%，點綴色 5%。

結合之前的黑白關系，我們就可以完成色稿了，注意冷暖的變化也可以體現畫面的層次感，背景偏冷，過渡到前景，逐漸變暖，我們以植物的顏色變化為例。

最后整體觀察，注意顏色在畫面中要分布均衡，相互呼應。不要一種顏色只出現在一處（如下圖的紅色運用），飽和度高一點的點綴色，可以起到點亮畫面的作用。

• 建筑的刻畫

2. 加陰影：在房檐下方繪制陰影，陰影的添加可以豐富畫面層次，增加體積感。

3. 加裝飾：創建一些小的裝飾圖形作為花紋填補在塊面中，點面結合，使畫面裝飾細節更為豐富與細致。注意裝飾圖形的安排要有疏密變化，亮面圖形的顏色可以用物體暗面的顏色，暗面圖形的顏色可以用物體亮面的顏色，既不破壞整體色調，又使畫面更加豐富。

同理，遠景建筑也用同樣的步驟刻畫。

1. 加明暗：遠景的建筑塊面顏色對比可以減弱，相對更加統一。

只需將墻體做一個亮暗的區分，窗戶這些小的塊面就不用再做區分了。

2. 加陰影：在建筑交接處添加陰影，豐富層次。

3. 加裝飾：添加裝飾元素，種類可以不用很多，統一一些。

• 汽車刻畫

1. 加明暗：物體進行明暗的塊面區分。

● 人物刻畫

• 植物的刻畫

1. 圓角矩形樹的刻畫：首先對同組樹叢做顏色區分。

• 遠景的處理

遠景對整個畫面起襯托作用，先將背景做圖形的分割，在與建筑交接處做重色的襯托，在圖形上延用了 Z 形元素，與屋頂相呼應，再依次加入月亮星星云彩、小樹、小鳥、圖形裝飾等元素，點，線，面相結合，在統一中富有變化。

再這樣那樣之后，我們的畫面就完成了，啦啦啦~撒花~

1. 畫面構圖的層次安排

2. 照片元素的特征提取，幾何圖形概括及組合

3. 色調的統一和變化

4. 裝飾元素的添加

那么今天的教程到這里也就結束了，你學廢了嗎？喜歡記得點個贊哦，我們下次再見。

原文地址：胡曉波工作室（公眾號）

作者：藍貴蓮

轉載請注明：學UI網》設計師看了都會收藏的色塊矢量插畫教程來了！【零基礎】

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

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

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

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

高飽和度的顏色能形成強烈的對比。在暗黑模式下使用高飽和度會很刺眼，給用戶很不好的體驗。暗黑模式一般在晚上使用，因此對設計師來說，需要做的是讓整個配色相對柔和，讓用戶感到放松。基于此，在設計的時候應該將飽和度限制在200-500之間。

(彩云注：這里的200-500彩云去查了不少資料，但沒有找到最好的答案，這里引用的是Material Design中的顏色規范，感興趣的同學可以自行查找)

二、 按鈕要有優先級

在同一個界面，最理想的狀態是只有一個最主要的關鍵按鈕和緊跟著的次要按鈕。這是因為如果一個界面上有太多這種行動按鈕（CTA）按鈕，會讓關鍵操作淹沒在這些按鈕中，讓用戶不知所措。

三、簡化不必要的動詞

沒必要在菜單上增加動詞和短語，用最少的信息寫清楚功能就足夠讓用戶理解了。所以，在菜單設計上要盡量避免增加無關緊要的詞，這樣才不會影響用戶體驗。

四、字體尺寸類別越少越好

你可能注意到，很少有表單的字體大小不平衡，字體之間的類別盡量少一些看起來會更加平衡。在決定字體大小時，盡量規范字號的標準。比如標題（16px），副標題（12px），正文（10px），說明文字（8px），這些尺寸都是以2為倍數的。

五、不要混用圖標風格

盡管我知道要做好圖標一致性，但在實際工作中依然經常犯錯。很多設計師經常用不同風格的圖標混在一起，這樣會讓整個UI界面的設計顯得很不成熟。圖標是為了讓用戶更有效率地理解事物。在使用圖標的時候一定要注意圖標的一致性，尤其是一些是一些風格細節。

這里也跟大家分享2個我自己常用的figma圖標庫：

1)Unicorn    (https://www.figma.com/community/file/931512007012650048)

2)Basil Icons     (https://www.figma.com/community/file/931906394678748246)

六、不同背景下的顏色飽和度適當微調

通常情況下，我們會認為一個顏色在深色模式和亮色模式下是用的同一個顏色值，但這其實是錯誤的。一個顏色在亮色模式下看起來非常漂亮，但在深色模式看可能就太暗了，反之亦然。解決這個問題最好辦法是使用2套不同飽和度的顏色。

七、新手引導多給用戶自主權

App的新手引導決定了用戶第一次體驗產品時的感受。在設計的時候，試著公開需要哪些具體步驟，增加”跳過“和前后移動查看的能力對新用戶來說非常重要。

八、在圖片上增加疊加層

許多網站和App都是用圖片驅動的，但在圖片上直接增加文字內容有時候會被淹沒掉。在圖片上增加一個疊加層可以提升內容的可讀性。

九、信息部分露出

對于一些大屏設備來說，像筆記本電腦，平板電腦和智能電視，它們都有非常多閑置的空間。對于這些閑置的空間來說，盡量通過設計告訴它底部還有更多內容。這對UI和UX方面都有好處，因為空間的使用方式能夠讓用戶清晰的知道所有內容。

十、拆分大段文字

為了讓用戶聚焦閱讀，應盡量避免使用大段的長/寬行。保持短句和簡潔能夠增加內容的可讀性。（彩云注：這點用在你的作品集里也是很合適的，有些人經常使用大段的文字內容來描述，很可能直接勸退面試官）

十一、Z字形原理

Z字形原理，也就是大眾所熟知的”古騰堡原理“，它描述了當人們看到一個均勻分布元素的設計時，眼睛的總體運動情況。通過這個原理我們知道，用戶在內容上的視線是沿著Z字形來閱讀的，所以遵循這一原理設計你想要核心表達的內容。

十二、擴大可點擊范圍

擴大點擊區域，維護像按鈕、單選、多選等控件的響應尺寸，如果你設計的點擊區域太小會讓用戶點擊困難，造成流失。

十三、盡量使用簡潔的圖標

避免使用花俏和俗氣的圖標，它們會讓整個設計顯得非常不成熟，同時也是很難理解的。用上更簡單的圖標形式，會讓界面更高級。（彩云注：當然越簡單的圖標其實想畫出彩會更難，另外也需要區分不同的場景，像一些運營類的圖標可能會為了活動氛圍做的相對風格化一些。）

十四、正確的文案表達

選錯文案，會讓人們對于任務缺乏興趣，根據上下文使用更合適的詞組。

十五、考慮手勢操作

輕敲和點擊有時候很累人，可能不如使用滑動、拖拽等手勢操作，這些操作會讓界面更簡潔并且也能順利地完成既定任務。

十六、展示部分文案

在探索酒店、目的地甚至是閱讀任何文章時，用戶經常都需要點擊卡片。為了使得探索更加吸引人注目和干脆，避免使用長文本導致的滾動。相反，可以加一個閱讀更多的按鈕方便想看全所有內容的用戶。

十七、接近法則

”鄰近的物體往往被視為是同一組內容“。有時候為了把內容區分開的更清晰，嘗試用線對相關內容進行分組。（彩云注：其實有留白和不同顏色做區分也是可以的，建議根據自己的設計風格和具體內容來定）

十八、文字控件可視化

在設計控件時，如果可以用圖形可視化的地方就優先嘗試把控件圖形化，除了非常需要很精確的設置參數。對于價格范圍這種，很容易將它可視化為滑塊控件。

十九、占位符要接近要填寫內容

對一些人來說容易理解的東西，對某些人來說可能不是。因此，最好使用示例占位符來解釋輸入字段，這可以防止用戶在填寫內容時出錯。

二十、系列位置效應

根據”系列位置效應“，心理傾向于記住列表的第一項和最后一項，而不是中間項。因此，在任何App中設計導航時，根據應用的上下文保持最左和最右的選項。例如instagram，最左邊是”首頁“，而最右邊是”用戶“。（彩云注：這是一個心理學上的理論，人們對于一系列的材料更容易記住開頭的內容，也叫做首因效應或者首位效應；更容易記住末尾的內容，就叫近因效應。）

二十一、減少點擊次數

在設計任何體驗時，點擊次數都是非常重要的指標。統計用戶需要點擊多少次才能完成他的目標，額外的點擊會減慢整個操作過程。簡化過程，自然體驗就會更好，所以盡可能的減少點擊次數。（彩云注：下面的案例，增加可點擊符號也可以減少用戶思考的時間。）

二十二、少即是多

為了使內容突出，沒有必要使用多種字體類型，包括加粗、改色等等。只在最需要的位置使用增強的的文字層次結構、字體重量，同時只使用一種字體足以吸引用戶對內容的注意力。

二十三、留白定義重點

留白在設計中非常重要，太少或者沒有留白會使得設計非?；靵y。明智地使用留白可以明確地強調內容。

二十四、別讓用戶閑著

根據多爾蒂閾值(Doherty Threshold)這個理論：”系統需要在 400ms 內對使用者的操作做出響應，這樣才能夠讓使用者保持專注，并提高生產效率?！啊Ｒ虼?，我們可以使用動畫、圖像甚至文本來保持用戶的注意力。（彩云注：給用戶的提示可以先快速加載信息框架，讓用戶有事可做，而不是什么都看不到）

原文地址：彩云譯設計（公眾號）

作者：彩云Sky

轉載請注明：學UI網》用上這24個UI體驗優化經驗，果然做出來的設計更高級了！

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

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

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

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

寫在前面 

其實 dribble，Be 上有很多幾何化風格的 logo,大家多看看，其實可以發現都有一些共性。在這類 logo 風格占滿市場的時候，考慮怎么做，才能讓這一類更出彩。

我在這類 logo 的執行，分成三個階段。

1. 圖形的大概造型參考

簡單來說就是找圖形實物/繪制造型參考圖，這跟大多數風格 logo 的設計步驟是一致的。

2. 根據造型，用基礎幾何圖形表達

基礎幾何圖形，其實就是很常見的「矩形、圓形、三角形、菱形」等等，你找的一張造型，盡量用工具自帶的「矩形」「三角形」「圓形」去代替所有的部件。

3. 創意的加分

把大概的輪廓造型做出來以后，可以適當結合字母，或是添加一些小元素,把你的 logo 整活起來，讓它更生動，畫面感、故事感更強。

好了，現在我們開始講案例。

我們先試著觀察它，發現這個 logo 是貓頭鷹與 L 的結合，那這個 logo 從 0 到 1，是怎么做出來的呢？

老方法，我們先找一些貓頭鷹的圖片， 作為造型的參考。提取貓頭鷹特征。

找參考這步，我一般會分為找兩種圖片，1. 實物照片(為了觀察整體造型與提取特征)  ；2. 設計師處理好的造型圖片(為了借鑒和觀察別人的處理方式，但是需要注意的是不要過渡借鑒，會構成抄襲)

先看實物圖片，發現其特征

1. 眼睛

2. 頭上的小耳朵

3. 臉上的內輪廓

概括完貓頭鷹的特征以后，我們開始繪制整體輪廓(先不加細節)。

網上這張插圖，其實概括的很幾何化了，我們只需要在它的基礎上再修改、變化，就可以做出我們要的整體造型?？梢园l現，身體-矩形，翅膀-半圓，眼睛-雙圓。我們根據這些概括，開始實現這個 logo。

把基礎組件繪制出來，再把它們組合成一個初版造型。

到這里 01，發現貓頭鷹的感覺還是少了一點，原因在于最關鍵的臉部的內輪廓沒有繪制，這是能突顯貓頭鷹這個物種的很重要的元素；結合實物圖片與處理好的插圖，我們進行繪制，注意透視角度得到 02 圖。

繼續觀察，還差了一個小耳朵是不是，那我們就給它加上，這邊可以直接用矩形，也可以用三角形，可以輸出兩個效果，對比看看。

通過對比我發現，矩形看起來跟整個大體圖形,更能融合到一起，整體感更強，最終我選擇了矩形的小耳朵版本。

得到這個初版造型以后，我們再進行調整與創意結合；在翅膀與身體的連接處，我們可以做一個切割，讓翅膀與身體的輪廓更清晰；同時，眼睛的輪廓也可以調整，與臉的內輪廓斜線，可以做平行(這樣的處理，會讓整個圖形看起來更規則)。

繼續觀察、優化這個圖形，現在會感覺，小耳朵與身體的連接，稍顯生硬。臉內輪廓的直角連接同樣有這種感覺。那我們就可以給它加上圓角，這種平滑的處理，使得圖形視覺上看會顯得柔和。

最后，我們根據 logo名稱「L-OWL」，讓這個圖形加上 L 的小尾巴，再上個色~就完成了！

這個 logo 的誕生是之前我去吃海底撈的時候，服務員小姐姐送了我一個小玩具。當時看到，一陣狂喜 ，這不是很適合拿來做 LOGO 么!

在執行的時候，我發現按照原圖的繪制，整個造型會顯得的怪異，所以，我們可以試著把它改變一下。

我們盡可能先用矩形、圓形去繪制這個小恐龍減少原圖那些細節，比如腳指之類的，能簡化就簡化它得到這個輪廓，發現造型不太好看，特別是頭部，不說的話有點像狗子。那我們就可以給它改變下造型，嘗試減少線段。

嘗試找出可以刪除的錨點，讓形狀以最少的線段表達出最清晰的輪廓；在這一步的修改，做了比較大的改變，不僅改變了圖形的原始造型，也修改了側面頭部的角度(因為去掉了長開的嘴，所以把仰著的頭往下調整)。

這一步是一個嘗試的過程，也是一個試錯，需要耐心的過程，大家可以多找一些圖片參考，得出你想呈現的造型形態。

得到了這個圖形 01 以后，基本是完成了一半。接下來，我們需要做的是讓各個部件層次清晰點。比如，頭跟身子的連接處，需要一點切割或者是陰影；腹部與腿的分層，尾巴與身體，也需要陰影。這樣做的目的，是讓你的小恐龍各個部件更清晰，而不是一坨色塊 。

這個 LOGO 不知道大家能不能感受到，它很卡通，也很幾何。現在我們來講講這個案例。

老方法，我們第一步是要找到合適的造型參考。

在網上找到了這張插畫，是的，就是用它當造型參考。

然后，我們去拆分這個小女孩的各個部位。帽子、頭發、眼睛、鼻子、耳朵、臉型。我們用基礎幾何形狀，先嘗試組合一下初版的圖形。沒辦法用基礎形狀的，我們先用鋼筆大概勾勒一下。

初版造型出來以后，觀察一下發現是可行的。我們再把它們(描邊)轉化成面性色塊，再觀察調整。

這邊的小細節：耳朵被頭發蓋住，被蓋住這塊的線條，跟頭發的弧度呈平行狀態加上五官，( 這邊看你想賦予這個小女孩什么樣的性格，但是看裝扮來說，酷酷的氣質是比較符合的)想表達酷，可以加上墨鏡。歪嘴笑更加重了 cool，不屑的氣質。

用圓形去剪切，是很常用且好用的一種方式。它會讓你的圖形看起來更規整，更幾何化。

最后，我們得到這個圖形以后，在排版上，也做一些變化。對應圓形框內的圖形，我們用圓形的路徑文字，去排品牌名稱。

現在很多同學應該還是在大量做練習的階段，有時候不知道做什么，就感覺很頭疼。這個時候，知道了某種設計方法，那就可以把你看過的圖都變成你的 LOGO 了。這個 logo 也是我偶然看到的一張狗狗的照片。然后就有了把它做成這風格 logo 的想法。

我們先繪制這只小狗的頭部(身體的形態，是不是要按照這個照片來，完全取決于你，這邊我們先把頭部做出來)。

觀察照片狗各部分的形態，盡可能用基礎形狀去代替。頭部其實是比較簡單的，我們先暫且擱置一邊。接下來，我們來繪制身體。這邊我沒有按照原圖的形態去繪制，覺得太過于安靜了，就去網上找了一些，正在行動中的狗狗的形態。

可以多找幾張參考圖，方便我們結合調整。

因為這個小狗的頭部是比較可愛的，跟這個身子搭配不了。這個時候，我們可以先調整身子與頭部的大小比例，看看效果。

身子這么一縮小，是不是順眼多了？比例調整到和諧以后，我們再開始優化身子的部件。( 如果描邊模式你覺得很難觀察，那我們先把它轉成填充模式)

通過觀察找出問題，再優化。因為狗狗走路的時候，走路的后腿是一前一后，所以會有層次關系。

我們可以嘗試把初版的圖形，把一條腿與身子切割開，這樣處理就可以很好地表達前后層級關系。

優化處理以后，大概的形態已經完成了?？赡艽蠖鄶低瑢W到這步，就直接上色排版了。想做出有意思的圖形，姿態、動作是很關鍵的?，F在這個圖形，其實直接上色是沒什么問題的，但是就會少了那么一點靈性。

要讓你的圖形生動有趣，有時候只需要把你畫的動物/人物，頭部與四肢做一點點角度，就會比之前的生動很多。比如這個小狗，我們把它的頭，往上抬一下，就會比之前的更靈性了。

最后，我們可以調整確定好的圖形形態，比例關系與加點陰影細節。

我們在小狗的眼睛旁邊加個星星讓它 wink~ (誰會拒絕對你wink的小狗呢)增加調皮可愛屬性。大功告成~

設計來源于生活~善于發現， 善于聯想。

這個 LOGO，可能 80 后，90 后，看著都比較有親切感，還記得小時候玩過的鐵皮青蛙么~

老辦法，先用基礎形狀把青蛙的大概輪廓拼出來。我們在繪制初版輪廓的時候，先觀察你的這個參考圖片，比例，形態的長短是不是符合你心中所要，如果不適合，那你可以先復制一個圖片，再對它進行拉伸/縮短。

就像這個青蛙的圖，我就覺得身子有點過長了，咱們把它壓縮一下。

觀察我們勾勒出來的形狀，青蛙的后腿，稍顯長了一點兒，我們先調整后腿的長度調整腿與身體的比例關系。簡化線段，能平滑的地方，我們刪減錨點青蛙的肚子部分，我們用半圓去剪切規整盡量讓我們繪制出來的大輪廓飽滿得到這個輪廓以后，我們再繪制青蛙的蛙掌我們還是多搜一點青蛙的圖片，去觀察蛙掌的結構。

蛙掌還是比較容易概括的，只要幾個矩形跟圓點就可以繪制出來了我們把繪制好的蛙掌，跟上面繪制好的大體形態拼起來。

調整各個部件距離，適當加點圓角添補未繪制的眼球。

四肢與身子加點切割，增加部件結構清晰度。

加上我們的旋轉小開關，最后為了防止青蛙左下側的空間太大，會造成圖形不穩，我們加一條矩形橫線，去平衡版面。

生活當中的很多美好的事物，都值得我們去記錄，或許哪一天你沒有靈感的時候，它就能變成你筆下的一個 LOGO，一張插畫~

技法都不是最難的，需要你去歸納總結它。說了這么多，動筆試一試吧！行動才是硬道理!

原文地址：胡曉波工作室（公眾號）

作者：Douta

轉載請注明：學UI網》5 個案例帶你領悟幾何面性趣味LOGO

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

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

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

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

一、以下幾種情況適合使用漸變色 

1、想把背景當作天空 

如果你的背景有起到天空的作用，哪怕不是真實的天空，那么用漸變色都是比較合適的，通常是用單色漸變（色相一樣，只是明度和飽和度有變化，比如藍色到淺藍色）或類比色漸變（比如藍色到青色）。并且，即使是類比色漸變也是要有明度上的變化，因為這樣的漸變可以讓畫面更透氣、更有空間感。

▲漸變的方向通常是模擬真實天空的光感，即上暗下亮，或者中間亮四周暗。

2、想表現小清新的調性 

小清新在平面設計中通常是指視覺感受是自然、淡雅、靜謐的畫面，這樣的畫面其色調應該是柔和的，所以很適合使用漸變色，而且一般是使用明度比較高、飽和度比較低的單色漸變或類比色漸變，在飲料、護膚品、家居等品牌的設計中比較常見。

3、想表現科技感

諸如3C產品，或與AI、互聯網相關的品牌、產品或者主題，其設計通常需要表現出科技感，而科技感是一種怎樣的視覺感受呢？這類視覺有一個共同的特點就是光感很強，比如下面這些作品。

所以為了表現比較強的科技感，畫面中通常少不了使用漸變色，因為只有漸變色才能呈現出鮮明的明暗對比、強烈的光感，而且這種漸變色的明暗跨度會比較大，色彩的飽和度會比較高。色相以冷色為主，比如藍色、青色、綠色、紫色。

4、想表現食欲

食品海報最基礎的要求就是要能表現出食物的食欲，讓人看了會有想吃、想喝的欲望。我們都知道，在色彩中，暖色是比較有食欲的，比如紅色、橙色、黃色、粉色等。另外，如果是夏季，藍色綠色會給人清爽的感覺，所以也能加強食欲（通常指飲料、雪糕類產品）。

吃是人類的生理需求，也是最基礎的需求，所以對于食欲的表現肯定要樸實有親和力，漸變色就具有這樣的特質。而且食物的色彩通常也是漸變色，所以使用漸變色作為背景可以與實物圖片形成呼應。

食欲強的漸變色具有以下特點：

a.明度不會太低；

b.飽和度不會太高；

c.明度對比不會太大；

d.以單色漸變和類比色漸變為主。

二、怎樣的漸變色更有高級感? 

確實，很多視覺高大上的設計都喜歡用純色，但并不代表漸變色就表現不出高級感，蔥爺研究了大量奢侈品牌、中高端品牌的視覺設計，發現高端的漸變色通常具有以下幾個特點：

1、使用單色漸變

大家都知道高端的設計在色彩使用上是很克制的，即顏色的數量會比較少，而單色漸變相比多色漸變就要克制一些。

2、顏色明度較低

高端的設計喜歡用黑色作為背景，想必你也發現了，因為黑色具有高貴、神秘、厚重的感覺，所以容易營造出高端的氛圍，除了黑色，其他顏色的深色也具有這些特點，比如深藍、深紅、深綠等等。所以漸變色要想高端，整體的顏色也要偏暗，比如黑色到灰色漸變，深藍到藍色漸變等等。

3、顏色來源于畫面中的圖片

如果版面中是有圖片的，比如產品圖片或人物圖片，那么從圖片中吸取顏色用于填充背景，會使背景與圖片關聯性更強、更融合，畫面的效果會更和諧，否則容易出現生硬、拼湊的感覺。

三、時尚的漸變色有什么特點?  

自從進入數字營銷時代，各個品類的設計都在逐漸互聯網化，相比傳統營銷，數字營銷更講究年輕化和個性化，所以在視覺上通常也要求更潮、更時尚，特別是對于一些針對年輕人的品牌。時尚類的視覺設計中也很喜歡用漸變色，其特點如下：

1、顏色的飽和度和亮度較高

注意，亮度不是明度，亮度高不代表明度高，但是明度肯定不會太低(在ps拾色器面板中觀看HSB模式中的B值)。飽和度和亮度較高的漸變色更鮮艷、更張揚，更符合年輕人和互聯網的特性。

2、顏色對比較強

比如對比色和補色漸變是時尚類設計很喜歡用的顏色，這樣的顏色反差比較大，視覺沖擊力也更強。

3、幾種效果比較時尚的漸變

a.炫彩漸變

b.鐳射漸變

c.彌散漸變

最后，蔥爺有必要提醒一下，色彩只是影響設計調性的其中一個因素，調性不是一個漸變色就能左右的，想要表達出正確的調性，還需要有圖片素材、構圖、字體、排版、設計風格等多個因素的配合，否則你的色彩用得再好也起不了多大的作用。

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

作者：蔥爺

轉載請注明：學UI網》漸變色的正確打開方式

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

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

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

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

對于 UI 設計師來說，圖標設計的能力至關重要，也是提升感官體驗的重要方向。對于一些初入行業的設計師，習慣下載圖標素材應付項目需求，失去了動手能力培養的機會。甚至一些多年工作經驗的老司機，依然還擺脫不了使用素材的習慣，稍微復雜一點的技法就會難以駕馭。

一、切勿過度素材化 

對于初入職場的設計師來說，偶爾運用素材可以理解，但是一定要學會拆解和分析，掌握還原設計的技巧和能力。

過度依賴素材容易導致思維固化，不愿意去創造，失去創新設計的能力；也容易導致眼高手低，有想法卻實現不出來，極容易萌生放棄的念頭；素材拼貼形式完成的設計，在規范性和細節性上面也是大打折扣的，導致設計作品不夠精細化和規范性。

二、刻意練習強化

我們需要通過刻意練習來提升圖標設計的能力，根據一萬小時定律，技法層面的提升都是通過反復磨練達到的。

三、擺脫素材才能規范化

圖標設計從素材習慣過度到設計動手其實很容易，但是從會畫到畫好之間看似簡單卻很難掌握。擺脫素材是圖標設計規范化的關鍵，然后再統一風格和細節規范，掌握數字化關系也是需要我們反復研究的課題。

比如以這個天氣圖標來舉例，相信很多同學都能畫出來，但是有沒有把控里面的數字關系就難說了。通過以下示意圖我們可以看出來，大圓和小圓之間的比例關系是 4:3，而間距的關系也與圓形的大小有著數字關系。這些數字關系可以使得圖標設計更加精細化，也能引導我們去探索設計背后量化的標準和關系。

四、質感的層層強化

當我們繪制完圖標的造型之后，運用合適的風格進行質感強化也是尤為重要的。這里我先運用其中的一個風格來完成，選擇了磨砂玻璃質感的效果。為了質感和層級關系更加明顯，這里單獨對局部進行了光影強化和邊界處理，看看以下步驟拆解圖感受一下。

備注：運用的軟件功能是背景模糊，Sketch 或者 Figma 等軟件皆可實現。

五、延展界面場景

為了進一步強化圖標練習，延展了一個簡單的界面場景，一個由宮格布局組合成的界面設計。為了填充所需的內容，先把之前的一些圖標作品放進去占個位置。雖然都是質感一類的圖標，但是由于透視、配色、風格和細節規范等不一致，整體還是存在一定的排斥感。

六、根據界面環境重新調整

由于界面設計屬于深色主題，之前練習的天氣圖標放入場景中顯得過于突出，而且玻璃質感的通透性沒有得到很好的發揮。于是根據界面環境對天氣圖標進行了重新調整，以深色關系調整了云朵部分，針對太陽的配色和尺寸比例也進行了調整，如以下效果圖。

七、延續風格補全設計

以調整后的天氣圖標作為風格規范，延續了其它業務場景的圖標設計，在透視關系、細節規范、配色比例和光影效果等方面進行了直接延續。在光影方向上面選擇了縱向區分，左邊三個選擇左上角打光，右邊三個選擇右上角打光。（當然也可以統一一個方向設置光影）

八、統一性還是差異化

完成的整體設計視覺風格雖然比較統一，但是也有一些問題存在。圖標之間缺少差異化，過度統一容易視覺疲勞，于是在統一性和差異化上面開始糾結了。

為了既保障圖標設計表達的統一性，又能形成視覺感的差異化，做出了調整配色關系的決定。根據天氣圖標的配色關系延續出了其它色系，看看最終的效果如何。

你喜歡哪一版？

關于統一性和差異化因人而異，在朋友圈征集意見也是各有差異，那么你會喜歡哪一版呢？歡迎留言區一起互動交流。

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

作者：黑馬青年

轉載請注明：學UI網》畫圖標，我是認真的

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

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

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

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