在成千上萬的字體當中尋找合適的組合是一件非常艱難的事情。如果你也為之苦惱，那么試試「超大字體家族」吧！

通常所說的「超大字體家族」（SuperFamily）其實指的是一組被打包到一起可以互相搭配的襯線和非襯線體，它們風格和細節不一樣，但是互相搭配效果是頗為不錯的。

我個人強力推薦的是 Merriweather 和 Merriweather Sans、Roboto 以及 Roboto Slab 這樣的搭配。

「超大字體家族」最大的優勢在于，它是已經被驗證過的優質組合，用的時候不用擔心~

在標題文本中使用較大的字間距，是排版設計中最常見的禁忌之一！

在放大文本的時候，常規比例下的字間距會顯得更加明顯，視覺上會顯得有點「稀疏」，減小字間距能夠讓標題文本更加緊湊，在視覺上更加平衡，通常會讓人更加愉悅。

當你想讓整體排版的節奏感足夠好的時候，有必要針對性地重新調整行間距和段間距。

你需要根據靠近原則，讓相互關聯的標題和正文之間的段間距更加靠近一點，讓不相關的內容塊互相之間分開，間距拉遠，從而自然而然地進行區分。

通常而言，你可以讓標題上方的留白更大一些，標題下方的留白更小一些，這樣就可以了。

在英文為主的頁面當中，全大寫的文本辨識度其實相對更低的一些，較長的標題文本使用大寫字母更是難于辨認。不過對于僅有一兩個單詞的短標題而言，就容易識別多了。

另一方面，短標題使用小寫字母會顯得不夠飽滿，這個時候使用大寫字母能夠讓它在視覺上更加突出。

相應的，在使用全大寫的短標題當中，適當地拉開字間距，能夠增加呼吸感，降低壓迫感。

如果可以的話，標題盡量簡短有力一些。

比如「It’s your style, and your way」這樣的標題可以直接濃縮為「Your style. Your way.」。

這樣的標題更容易閱讀，也更加有力，更容易被消化和感知到。

當然，這樣的文案設計技巧是需要根據行業和領域進行優化的，這個方法并不適用于全部領域。

你所下載或者購買的字體，是否有很多不同的粗細/字重/樣式供你選擇？

如果你有的選，盡量購買或者選擇那種有很多不同字重的字體族。如果這款字體只有一種字重，建議你盡量避開它。

在很多不同的設計項目當中，不同的場合可能會用到不同的字重，如果它只有一種字重，那么你要么只能選擇別的字體，要么就需要額外購買，很麻煩。

即使這款字體包含兩三種不同的樣式或者字重，也足以應對很多不同的需求，創造出有韻律感的設計了。

不同的字體有不同的風格。有的字體粗壯有力，有的柔和自然，有的現代而規整，有的友好而舒適，有的則有趣且俏皮，等等等等。

每種字體都有不同的氣質，你需要把握字體的氣質特征，有意識地總結這些屬性，當你在應對不同的設計項目的時候，能夠快速找到氣質貼合的字體。

這似乎是一項艱巨的任務，但是從長遠來看，能夠幫你更快地搞定各種設計問題。

很多技巧都不復雜，甚至稱得上是微不足道。但是如果用好這些小技巧，能夠讓你的設計事半功倍。

原文地址：marcandrew.me

譯文地址：追波范兒（公眾號）

作者：Marc Andrew

譯者：terechen

轉載請注明：學UI網》這7個小技巧快速幫你改善UI界面

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

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

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

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

 

 

 

 

 

轉載請注明：學UI網》這是一份匯集全球優秀APP截圖的資源

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

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

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

1.什么時候開始競品分析

2.競品分析方法

3.寫在最后

大家看到我整篇文章里面，沒有提及市場調研分析，用戶分析等。網上很多文章講得特別全而大，我相信有部分設計師看完就很懵逼，怎么入手？因此今天給大家支一個曉招，聚焦一個點分析，但偶爾我們可以適當在拓寬一些維度。好了，本文就到這，大家還需要多去實戰練習，才能找到比較順手的方法。

01.  字體素材 

@叁月，適合圣誕使用的手寫英文字體

f

02.  圣誕素材 

@叁月，圣誕節設計素材大合集

f

03.  樣機素材 

@是瑩瑩啊~，海報拍攝場景樣機

w

04.  樣機素材 

@耳東，VI場景樣機

e

05.  字體素材 

@耳東，圣誕節字體素材

t

06.  海報素材 

@素箋書，酸性漸變元旦跨年3天倒計時海報

e

今天我們要講的主題

圖形與裝飾

01.增加裝飾

粉色的信紙，抒寫著我對你的思念

用唱片機包裹著愛情，播放著不會有人聽到的音樂，暗示著我們原來早已分開多年，而唱片機將簡陋的版面包裝成看似文藝感的設計。

02.增加圖形

純色的藍底配上皮衣搖滾，有點枯燥，貌似點燃不了我的激情。

不妨加入圖形試試看，一個圓，不夠。畫個山還是不夠。

干脆再加點不規則的圖形吧，仿佛是愛慕的觀眾將她層層包圍，配上裝飾與文字，活躍和青春的氣氛就有了。

 03.綜合示例

一張照片，我心意已久，切成圖形化讓她住進我的心房。

在心房外加點文字寄托我對你的想念

上下的色塊與圖形化的裝飾仿佛在告訴你，這就是我小鹿亂撞的樣子，加入文字切入喜歡的主題，讓這份喜悅保留下去。

圖形和裝飾就像夜店的音樂和燈光，假如失去這些，確定還能蹦的下去嗎？

04.案例實操

純色的紅底配上剛發完工資正在SHOPPING的女人，她可能不知道今天的開心是需要剩下的29天時間來填補的。

但缺少的節日氛圍和單一的畫面，讓她失去了購物所帶來的喜悅，有的只有孤獨和尷尬的笑容。

試著利用圖形與裝飾的方式，繪制圣誕樹圖形表達節日特征。

人物放置到圖形中間，給圖形的內部增加場景或者層次光源。

將人物穿插到圖形上從內而外的層次性，試著增加一些帶有透視角度的元素和有質感光澤的文字。

簡單但實用的設計更符合傳達最基本的商業化設計，當然你也可以給綠色的圖形加點光，畢竟綠色加點光，日子才不慌。

再來對比下該案例的效果，簡單的示例希望能啟發對設計中圖形與裝飾的運用方法。

這就是今天帶來排版那點事！

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

作者：修先森

轉載請注明：學UI網》利用圖形與裝飾，能讓設計化腐朽為神奇

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

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

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

福特創始人亨利·福特本人也十分喜愛小動物，將公益融入企業發展，踐行企業社會責任，這正是一個偉大品牌的開始。

CEGC在中國已經有20年的歷史，1983年首次在英國成立，2000年進入中國，而福特汽車進駐中國是在1995年，因此CEGC幾乎是和福特品牌一路同行至今，有著久遠的歷史足跡。

全新標識CEGC分別代表了四個形象象征：

C：陸地 — 雪豹 — 勇敢的精神
E：天空 — 斑頭雁 — 自由而博大的胸懷
G：水 — 江豚 — 生命的起源
C：萬物的尺度 — 人 — 深邃的愛

新的品牌形象，從定位、結構，以及LOGO的色彩進行了全新的設計，從不同空間構建品牌價值觀念。

福特公益多年來為改善地球環境做出努力，保護生態平衡，CEGC的內涵則是代表了區域性的生態、生物多樣化繁榮發展。

做任何一個公益項目，不是隨著一次評選活動結束而結束，環保項目應當是可持續的走下去，走得更遠。這次的品牌升級將助力福特汽車環保獎朝著更嶄新的階段邁進。

CEGC的設計理念，最終可以表達為，信息傳達與藝術的完美統一。

讓品牌有最清晰的識別力，代表生物多樣性。

CEGC不僅是視覺上的感受，希望以此也能帶來行動上的力量，讓設計的意義變的最大化，最終為品牌帶來最優的價值。

新的定位：

支持系統性變革、支持優秀民間環保力量可持續發展、保護生態資源與物種多樣性，在新的升級中，重練品牌的核心價值。

為公益品牌服務，賀冰凇團隊一直是踐行于實際幫助的，通過設計和藝術給這個世界帶來更好的一面，希望借此，吸納更多的力量，為環境保護發揮更大的作用。

©注：設計中使用的人物圖片皆來自CEGC官方公益項目資料，均有署名，僅供學術交流和作品呈現，不作任何商業用途。

原文地址：站酷

作者：賀冰凇

轉載請注明：學UI網》「福特汽車環保獎」升級LOGO，賀冰凇作品！

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

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

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

01.圖標是什么 

要做好圖標，首先我們要知道圖標是什么？在一般認知里，圖標可以定義為一種圖形化的符號或標識，用于幫助我們理解某些復雜功能或操作，尤其在數字化領域里，可視化的圖形符號，更利于高效的展示信息和引導人機操作交互。也有人稱之為icon或eikan。

a

▍1.圖標的發展史

圖標的歷史可以上溯到人類文明發源伊始，最早的象形文字，巖洞壁畫等都可以算作圖標的一種，為我們后代研究人類文明產生了珍貴的歷史意義。但今天我們研究的圖標主要以計算機系統發明為分界線，看看這短短幾十年間，圖標是如何演化的。

● 80年代的初期圖標還是黑白單色

● 90年代慢慢多了些色彩，形狀也更豐富

● 到2000年后，隨著顯示技術的發展，圖標也越來越形象

● 圖為iOS1-8圖標變化

從最早的Xerox Sta系統到最新的Mac os10，再到現在人手一臺的移動智能機，每個階段都擁有其獨特的圖標風格，2010年已經到了智能移動時代，拿最知名的iOS系統每個階段升級，圖標的變化來看，也歷經了初期的擬物-扁平-微質感的好幾個階段。

圖標作為UI必不可少的部分，能夠使界面更加精致，今天也分享給大家一些大公司的設計規范，其中包括很多系統的圖標規范和定義，幫助大家更好地參考和學習。

w

02.  圖標的分類 

圖標因其良好的辨識性和無障礙溝通特性，在各種場景下被廣泛應用，同樣，因使用場景的不同，圖標所代表的意義也不一樣。

▍1.應用圖標

● iOS14桌面應用圖標

a

應用圖標指的是我們設備界面上的應用入口，通常具有較強的品牌特性，可能與logo一致或與其核心功能一致， 如instagram 就是一個簡化的相機正視圖，亞馬遜則是一個購物車形象，國內也有不少產品直接使用了能夠代表產品的文字，需要注意的是，界面圖標必須遵循對應系統下的尺寸規范。

● 華為EMUI 10應用圖標

d

▍2.功能圖標

與應用圖標不同的是，它主要作為界面中的功能入口，一般為簡潔易辨識的符號，根據不同產品調性，圖標風格也可以多種多樣，并且不強制必須為標準形狀，異形圖標能讓界面更為生動，整體風格的發揮也有了更多空間。

d

▍3.輔助圖標

輔助性圖標通常存在于有較多長文字時，搭配作為輔助說明，在UI中，可能還具備一定情感化的作用，在提升用戶接收信息效率的同時安撫用戶情緒；所以整體可能需要具備更多細節，作為畫面補充的一部分。

● 如：缺省圖標

s

▍4.與logo的區別

雖然這兩者特性極為相似，都是圖形化的符號，但logo是為整體品牌服務的，具備其獨一無二的專利特性，甚至可以是IP形象或文字；兩者的關系可以理解為父子。

● 圖中的圖標就很好繼承了logo的特征和風格

● 但有的也只是普通的界面輔助，風格和樣式并不一致

a

03. 圖標的繪制 

能夠繪制出高質量的圖標是每個UI設計師必備的能力，本次我們以功能圖標為例，為大家展示具體的幾個繪制步驟和要點，希望幫大家在細節上避開影響圖 標精致度的一些小細節。

d

▍第一步：建立圖標網格

功能圖標因形態結構各異，難免存在尺寸不一的情況，必須考慮其整體視覺的協調一致，最好的辦法就是建立圖標網格，也可以稱為圖標盒子，當圖標形態分別為長、方、圓時，有一個合理的比例限制。

● 將常見圖標形態約束在圖標盒子內

當然，網格不是絕對的，要學會靈活運用，當與個別圖標形態無法完美匹配時，也不必拘泥，一切以達到視覺和諧為首要。我通常會在圖標網格外圍預留一個安全區域，可以規避切圖出現不完整的情況。

a

▍第二步：具象功能

有了網格，第二步則需要我們根據功能，找到與之對應的實物形象；如筆記本是記錄，電話是通話，時鐘代表時間，日歷代表日期等等。

這些功能相對比較容易找到現實中的實物，如果是比較抽象的功能呢？就需要我們發散思維，找與之相近含義的事物。如隱私功能，隱私是沒有實物的，但是我們可以通過“隱私”這個詞延伸：不公開的、隱藏的、鎖起來的、被保護的，繼續根據這些詞延展：就可能是密碼、盾、鎖、遮眼等等。

時刻記住一點：用大眾都能理解的物體形象去表達。如果用戶看到某個圖標過于復雜，需要反復思考它代表的含義，也無法預測點擊后的結果，那這個圖標就失去了提效的作用。

d

▍第三步：簡化結構

有了功能的具體形象，下一步就是思考如何讓圖標變得更簡潔易辨識。

● 畢加索《公牛》

畢加索創作《公?！窌r，從初稿到最終成品歷經了11個版本，最后只用寥寥幾條線來勾勒，但我們依然能一眼認出牛的形態。繪制圖標也一樣，需要我們思考如何省略無用細節，化繁為簡，提取他們的主要特征。

f

▍第四步：善用布爾運算

有了簡化的圖標形象，我們接下去應該思考如何讓圖標變得更為規范耐看。

● 如桃心圖標，就是兩個簡單圓角矩形組合而成

● 桃心圖標，也可以做的更圓潤

● 不同組合下的布爾運算，圖標形態特征也會不一樣

這一步的訣竅就是盡可能使用基礎圖形去組合拼貼，這樣做出來的圖標，尤其在適配不同尺寸大小切圖時不易拉伸變形。

f

▍第五步：處理細節

統一性

● 風格：線性、面性統一

● 斷點細節一致：平角、圓角

● 圖標氣質一致：是圓潤還是尖銳硬朗

隨著功能界面的不斷復雜化，大家早已不滿足于同一產品或同個界面中單一的使用面性或線性圖標，而是搭配使用便于層級劃分，故而這里只考慮在同一層級下圖標的統一性。

視覺平衡

如圖，三角形置于中間位置時，視覺重量會偏向左邊，在這個基礎上，我們就需要做出適當調整，以達到視覺重量平衡。

一致的視角

當你想讓自己的圖標變得更加出彩而采用了區別于正視圖的結構，那也一定要確保至少在同等層級下，這些圖標視角是一致的。

a

▍第六步：做出差異化

融入品牌DNA

● 韓國購物App 11 street，就很好的融合了品牌logo的箭頭符號

功能圖標因簡潔通俗，比較容易出現市場同質化嚴重的現象，故而很多App選擇在圖標中融入品牌基因，不僅做出差異性，還能提升品牌調性。

跟隨趨勢創新

通過對圖標風格質感的創新表達，讓人眼前一亮。這種方式更多需要你了解當下的流行趨勢和技法，根據產品的風格調性，對圖標進行量身打造。

圖標微動效

隨著5G時代來臨，微動效也早就出現在了大眾視野，基于圖標的微動效表達，能讓用戶更快注意到某個功能并去點擊它，如果你的動效還恰好有趣美觀，更能讓用戶感到愉悅。比較常見的loading和tab切換都讓我們有了很充足的發揮空間。

d

▍第七步：完善圖標庫

通常一個產品的功能圖標會多達幾十甚至幾百個，如何保證這些圖標的統一性需要提前去規劃。繪制的最后一步，就是在完成一部分圖標后，及時排列比對，確保整體視覺效果的統一；有條件的可以生成圖標庫，便于后續的團隊協作。

● Apple發布的SF Symbols中圖標，就劃分了9種寬度和3個比例尺寸

有了圖標庫后，協作設計師做到共用功能時可以直接調用；極大提高自己和團隊的效率，并保持整體規范的一致。

a

04.最后 

圖標繪制看似簡單，要做好卻并不容易；UI處處充滿細節，想要自己的界面更加精致，就不要忽略每一個可以提升的點。希望今天的這篇文章能夠幫到你。

最后給大家分享一些大公司的設計規范，其中包括很多系統的圖標規范和定義，幫助大家更好地參考和學習，需要的話可以點個“在看”，添加叮當貓回復“圖標”領取，已有叮當貓的無需重復添加。

s

作者：sky

轉載請注明：學UI網》研究了上百套圖標，總監卻告訴我圖標要這樣畫！

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

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

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