5分鐘教你快速設計網易云banner

▽

▲往下繼續看文章，內含設計實操案例干貨！

作為老網抑云的鐵粉，最近的2020年度報告刷紅了朋友圈，不看不知道，原來這一年小編一共聽了954小時3089首歌，如果24小時不間斷也要40天才能聽完，不知道這算不算老網抑云了，如果有聽歌時間比我長的可以留言batter一下！

▲小編的2020歌單

為什么偏偏網易云成為了年輕人和大眾的最愛

網易云做對了兩件事情

-懂音樂

聽著歌曲，看著評論，有無數個故事在治愈和慰藉那些深夜不眠的孤獨患者，總能有一句話戳到你早已滿目瘡痍的內心，吃著火鍋眼眶里含著淚水，發送了分手文字的短信，所以在網易云里聽的不只是音樂，還有故事。

▲評論來自網易云

-懂設計

打開網易云，我們可以從banner的設計中感受到聽取音樂的風格，甚至發行EP所要闡述的理念都能在一張小小的banner設計中有效讀取，在小編認為這是與音樂融合出來的設計，而不只是為了設計和推廣這首歌曲的目的。

▲圖片來自網易云

1、讓色彩情緒化

色彩并不只是用來配合文字和圖片的工具，而是需要賦予設計靈魂，讓色彩變得富有深度和畫面感，小編稱為色彩屬性，每一首歌不管是流行、民謠、搖滾、電子、獨立音樂類型，都有著背后的創作故事和曲風類型，從色彩屬性最直觀的將故事里的情緒化表現出來，讓觀者看到畫面就能知道這首歌大概是什么曲風，是悲傷的還是開心的歌曲。

▲圖片來自網易云

圖上歌曲想要體現的是一場與自由的角逐，曲風也偏向于Hip-Ho說唱和電音的一種結合，代表著勇敢與激情的紅色調鋪滿了整個畫面，結合展露的肌肉身材，從中釋放出想要自由和尋找自由的情緒性。當顏色調整為黑白配色后，原本代表著勇敢和自由的感覺突然消失了，從畫面中反而獲取了一種孤獨和悲傷的情緒感。

▲圖片來自網易云

再看圖上的banner結合歌曲名，我想大部分人都能判斷出這首歌是寫的對另一伴的不舍和留念，雨天昏暗的深夜加大了對于觀者的理解與感受，而如果整個畫面的色彩調整為黑白色，只留出燈、紅酒、相框的顏色后，那種失去的強烈是不是會更加的明顯和深刻。

▲圖片來自網易云

2、控制畫面留白

留白的目的除了解決畫面內容層次的一種梳理以外，還會為設計增加很多藝術美感和想象空間。

▲圖片來自網易云

我們可以看到兩張圖的對比，從本身版式的理解上，文字居左對齊，將文字的大小、粗細通過層次分開得到流暢的閱讀感，本身是沒有問題，但卻失去了音樂特性的本質，而留白就是改變和拆分版式編排的結構，將其原有連串起來的主題文字拆分重組，讓版式內部得到一個流通。

▲圖片來自網易云

3、讓設計變得有趣

設計不是表格也不是冷冰冰的數字，設計是為了讓人們感受人和生活的理想化，所以有趣就變成了一種特質化標簽，可以提升對于大眾的新鮮感。利用字體之間的變化，符合主題的元素圖形或者涂描來放大畫面設計的趣味性，就像烤羊肉一定要放孜然或者椒鹽才算吃的夠爽是一個意思。

▲圖片來自網易云

實操案例步驟

▲實操案例分享

設計詮釋：”破碎的光線在水彩浸潤過你的臉，Tsing River，it will wash me” 這是白皮書樂隊里關于《清河》歌曲里的一段歌詞。從歌詞中感受到人浮在水面上，斑斕的色彩光照進全身，又隨著余暉漸漸消失殆盡的感受。所以在設計中利用了雙色漸變將整體的畫面顏色變成了涂抹色彩，扭曲和波瀾的水面塑造出與眾不同的設計感。

步驟1：

利用參考線找到中心區域，并放置主體圖片。

步驟2：

• 【漸變隱射】工具繪制綠色與藍色的漸變
• 【漸變隱射】工具繪制紫色與藍色的漸變并選擇圖層模式中的【飽和度】
• 【色彩平衡】將整體的顏色往青色與藍色兩塊區域拉伸參數

步驟3：

使用濾鏡>液化工具，選擇左側工具欄的「褶皺」將重心的畫面拉出層次距離，在將湖面做變形處理，得到扭曲的畫面效果。

步驟4：

將文字的字間距拉松并且放置到中心區域，將英文字母拉出高度形成設計元素與文字融合成整體。

步驟5：

復制畫面中的一部分進行變形處理得到一個類似紙張飄散在空間的效果，放置到文字框架的中間，與白皮書樂隊得到一個很好的風格統一。

步驟6：

用類似毛筆字筆刷的字體繪制出清河的歌曲名，再分散到左右兩側，形成一個版式上的平衡，否則會顯得兩側過于留白過多，當然中心區域與兩側之間形成的留白區域是作為一個空間進行想象。

注意事項

▽

設計版式中的留白和文字段的分拆和組合處理對于banner設計來說非常重要，可以很有效的體現設計感的美觀。

原文地址：修先森撩設計

作者：修先森

轉載請注明：學UI網》都在聽網易云，卻不知道banner設計這么好用

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

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

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

教程示范：

1.打草稿

首先，選擇一個硬筆刷打一個草稿，花花和葉子注意一下疏密大小關系。

2.草稿基礎上再打線稿

這一步依然是選擇一個硬筆把藤枝畫出來。

3.畫花瓣

畫花花的部分選擇一個勾線筆刷，用打圈的方式先定好花瓣的位置，然后再去一層一層畫花瓣。

我這里的話因為筆刷選擇的有點大，所以畫出來的線條有點粗，大家在畫的時候要把筆刷刷頭縮小一些。因為這里沒有打草稿，所以我畫的時候是邊畫邊修線稿。

4.畫葉子

葉片也是選擇一個硬筆筆刷直接去把大型畫出來就可以了。注意葉子形狀要好看哦~

5.上色

在花花線稿圖層下面新建一個圖層填充顏色，然后再整體把線稿的顏色修改一下。

這個地方是我覺得花枝在整個疏密大小上還不夠好看，所以在做調整修改。

6.繼續上色

接著給葉子上色，選擇一個透明筆刷刷一些漸變色在葉子上，花花上面也刷刷漸變色。

7.添加陰影

然后開始細化加花花的陰影，直接在有花瓣遮擋的部分添加陰影之后，選擇水彩筆或者涂抹筆刷把剛剛畫好的陰影涂抹開（注意不要過度涂抹哦！）

8.勾線

接著把葉子勾一下線，然后稍微細化一下。

最后整體也可以再調一調顏色。

那我們的花花就畫好了，希望對大家有所幫助，我們下一期再見，如果有收獲記得分享給身邊畫畫的朋友哦！

原文地址：空青肆繪（公眾號）

作者：Tcat

轉載請注明：學UI網》插畫教程 | PS 手繪板~日系薔薇花

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

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

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

【視頻完整版觀看可抖音搜索: 野川設計】

今天我們講講，好的設計如如何被借鑒出來的！

▽

我們先來這兩張電影海報，發現什么端倪沒？

尼瑪不能說是毫無關系,只能說是一模一樣！

不著急，我們再來看這一組！

–

我試著把兩張海報的人物扣掉對調一下

竟然還無違和感啊，這親媽都分不出來吧？

以上幾組設計抄襲的例子，很多人問這抄襲它等同于借鑒嗎？我想說：肯定不等于。

但就是這么很明確對抄襲與借鑒劃分的判斷，在度娘上竟然搜出了一千多萬條相似信息。代表著大部分設計師還是無法判斷抄襲與借鑒具體的界限在哪里，于是作為專注傳播設計內容的我來說，促使了做今天文章的原因。

這是A作品，這是B作品，發現相似度基本可以達到90%以上，而抄襲的意思是指竊取他人的作品當作自己的，在相同的使用方式下，完全照抄他人作品和在一定程度上改變其形式或內容的行為。

最直接的案例就是汽車行業里的攬勝極光告陸風X7抄襲，據說當年把攬勝極光的車主氣的半死。

但要屬抄襲界的最強騷操作，非眾泰改裝保時捷莫屬，當年眾泰最輝煌的時候還成為屌絲把妹專用車，甚至連保時捷車主都無法分辨。

這些相似度極高，且沒有原創而只是在原有構架上使用相同方式來改成自己設計的都屬于抄襲，甚至都可以說原封不動的套娃！

其背后原因僅僅是因為：方便！

這就像X音一個視頻火了，接著你會在一周內刷到成千上萬條同樣的視頻，你甚至誤以為X音開啟了重復模式，其目的也只有一個，方便出效果！

但試問如果都以這樣的方式展現給大眾，其帶來的后果就是以后所有人都缺少原創精神，當你要做一件事情時，不是想如何去創作，做成不一樣，而是說：“那么麻煩干嘛，現成的東西直接抄啊！”

這是A作品，這是B作品，以A作為原型做到舉一反三，透過別人作品中的某些元素提取靈感進行深度再創作，對作品的創意做了更多延展空間，使之有了自己設計的靈魂。

雖然一切設計的起源本質都來自于模仿與再創造，但是模仿的目的是為了鍛煉初期的扎實基礎，為了能夠讓之后的設計可以舉一反三。

并且不作為商用途徑來源，而抄襲是指不但模仿他人作品還作為商用途徑獲得利益，甚至在大眾不知情的眼下，有了一定行業名聲，這才是為什么人人都痛恨抄襲者的原因，是因為他不尊重設計，更不尊重原創者。

這里我一定要點出拼XX，每日燒香拜佛的，誰發砍一刀的立馬絕交，于是就這樣差點跟我媽絕交了，兒子不孝！

如何做到既能將好的設計借鑒到，又能原創出自己的設計呢？我們可以通過以下4個方向進行借鑒學習。

1、借鑒其設計技法及風格

比如這兩張海報中，對其畫面上繪制的線條與紋理的刻畫是原設計的特點，而技法是一種設計性的能力，可以作為創造的一種條件，以及整個帶有偏國風的設計風格都是可以汲取到借鑒上。

2、視覺構圖

左邊這張海報通過5:5對等構圖，在上半部做出了大量留白，而用三角構圖的原理將視覺引導至上方焦點，也就是飛出去的猴毛，解決了上半部分大量空白的問題，并且點出了是所要表達的故事劇情。

右邊的這張海報通過中心焦點的構圖，將視覺牢牢抓住在中心，再通過焦點所體現出的人物形象來傳達給觀眾。這兩張海報雖然構圖的方式不一樣，但是都有著相同之處就是，都不會讓主體視覺完整的展現出來，而是讓觀眾通過聯想的方式猜測這個形象，以此獲取觀眾對內容或海報的好奇觀感。

3、人物刻畫

觀察兩張海報，人物的設計或者繪制是使用水墨和毛筆墨跡等方式的結合融入。

4、畫面配色

使用有鮮明對比的配色，比如間隔色，互補色這樣的方式會讓畫面具有視覺穿透力，色彩的沖突可以把故事中的情緒化帶給觀眾。

綜合以上幾點，流體性的線條、墨態人物筆觸、局部性的展示視覺主體、以及強烈的色彩沖突，于是我作為借鑒方式設計出了這張電影海報。

對比之前的幾張海報，即從中獲取到了不同的借鑒元素，同時又保留了自己設計特色。

比如這張海報在左右對稱式的構圖基礎上，增加三角構圖的原理讓視覺有一種從上至下的引導閱讀，再利用鮮明對比的配色使畫面有了沖突感的色彩吸引。

最后說回抄襲問題，畢竟設計行業又不是宮斗劇，既要天天改稿被甲方來回折騰，還要處處防范被同行小人亂蹭，本是同根生，相煎何太急，何必呢！好好吃自己的飯他不香嗎！

原文地址：修先生撩設計

作者：修先森

轉載請注明：學UI網》借鑒=抄襲？好的設計是怎么借鑒出來的

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

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

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

1.清晰

大家先想想圖標在APP里的主要作用是什么呢？可以作為功能和信息的提示標識，引導用戶的操作。

而且我們通過看圖獲取信息的速度要比閱讀文字獲取快得多，圖標作為一種通用化的視覺語言，讓頁面更容易被閱讀。

▲ 圖標代表的隱喻越準確，就越容易被用戶準確識別。

2.簡潔

圖標本身的尺寸就特別小，如果在里面摻雜著大量沒必要的裝飾性元素，會讓圖標的閱讀變得很困難。

可以通過使用盡可能簡單的設計元素來創建圖標，保證形狀的簡潔易懂。

▲ 如果在設計過程中發現圖標變得很復雜，大膽嘗試去做減法，刪除不必要的細節，只留下最重要的部分。

3.風格統一

在Dribbble中搜索“icons”，會看到很多不同風格的圖標樣式，但同一個集合中的圖標都會保持統一的設計風格。

▲ 不同風格的圖標可以在設計中穿插使用。例如在APP底部導航中，使用線形風格的圖標作為基本狀態，點擊選中時可以變換為面性風格，用來區分不同的狀態。

4.基礎網格

網格有助于我們建立一個明確的尺寸規范，常見的網格尺寸有16×16、24×24、32×32、48×48、64×64、96×96。

▲ 所有的圖標都將建立在基礎網格之上，圖標的每個部分都應該放在像素網格內。

5.安全區域

圖標的主體部分應該保持在安全區域內，這種情況適用于大多數的場景。

安全區域可以作為設計建議，而不是一項必須的規則，如果有需要，我們完全可以在安全區域外擴展圖標的形狀。

6.關鍵形狀

如果想讓一組圖標放在一起看起來很和諧，那這些圖標的視覺權重應該保持一致。

在設計前首先確定圖標的基本形狀，例如圓形、正方形、矩形等，能有效幫助我們確定圖標的比例關系。

可以用數學面積公式來計算一下不同形狀圖標的權重，找出近似值。

來吧，先從圓形開始：

▲ 在這個例子中，直徑d是20px，半徑r是10px，圓的面積約等于314px2。

把圓的面積開個根號√，方形的邊長a大約為17.7px，四舍五入到整數，那么邊長a為18px，接下來算算方形的面積：

▲ 邊長a為18px，方形的面積為324px2。

最后算一下矩形的面積：

▲ 邊長b為20px，邊長c為16px。

最后我們根據這些科學的尺寸設計一組相對和諧的圖標：

7.描邊寬度

除了保持相同的視覺權重，圖標的描線寬度也應該保持一致，達到像素級統一，這里我建議描邊使用整數值，這樣更便于設計。

8.圓角

圖標的和諧還在于邊角的統一。尖角不用說了，保持統一的垂直90度就可以。

這里需要重要說的是圓角，不能所有的形狀都使用同一個圓角度數，而是要根據圖標形狀的不同靈活調節圓角度數。

▲ 例如一個圖標有里外兩個平行的圓角時，不能里外都使用1px的圓角，這樣會讓圖標看起來不統一。

正確的做法是讓外面的圓角更大，設置為3px，里面的圓角為1px，讓圖標看起來更和諧。

▲ 根據對象大小，設置不同的圓角數，保證視覺統一。

9.角度

轉載請注明：學UI網》如何強化圖標設計的細節？我總結了12個關鍵點！

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

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

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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

▍第三步：簡化結構

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

● 畢加索《公?！?/span>

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

@CANAAN，作品集封面3D素材

 s

02. 樣機素材 

@嗡嗡嗡起，高質量的手持設備樣機

f

03. 平面素材 

@南風知我意，潮流高級全息海報模板31款

 g

04. 樣機素材 

@是瑩瑩啊，蘋果13樣機+高端場景樣機合集+iPhone13樣機

w

05. 3D素材 

@落微，UI素材丨3d丨手勢丨psd

w

06. 3D素材 

@阿軒，11個3D圖標+png+3個拍攝角度

01.前言

總有一些人會讓你感覺格外親近，總有一些事會在不經意間打動你，慢慢的深入人心，是什么讓你感覺親近、愉悅、甚至興奮？今天這篇文章主要從產品設計的視角分享一下深入人心的產品設計方法。

a

02.事勢之流 相激使然

“世事的變化趨勢或態勢是各種因素、力量相互碰撞、激發的結果”。同樣想要讓你的產品深入人心，本質是我們的產品要給用戶提供獨特的價值，而價值的產生可以理解為一個形象在用戶心智中的建立，這里的形象類似于品牌VI，但絕不止于視覺層面，其實可以由多個維度構成。通過不同的維度影響用戶的使用體驗，最終形成產品的品牌價值。

我們可以把品牌價值理解為“人物個性”，美國心理協會(APA)將個性定義為“在各種場合、隨時間變化，能夠影響多種特征行為模式的個體的獨特心理特質?！?/span>

產品的個性會影響用戶的感受、思考、處理以及最終的結果。例如，當用戶挑選并投遞一個職位時，她希望聽你成熟的建議來引導她。將品牌與幾種典型的人物個性關聯起來，就能創造關聯性更強的故事，更容易使用戶投入。換言之：人與人更容易親近。如果你的品牌感覺像“人”，用戶就會更親近。

d

03.找到“人物個性” 明確品牌價值

定義“人物個性”，就是去思考如何面對用戶，如何以最好的姿態向用戶展示自己，首先要建立有效的價值體系。這里我們通過招聘業務的一個項目逐步講解一下。

我們知道下沉市場的招聘環境十分惡劣，存在各種虛假信息的問題。結合這個背景我們對藍領用戶的求職現狀進行了一系列詳細的調研，收集了用戶不同層級的需求（如下圖）。 

我們可以發現用戶最基礎的需求只是要求職位信息的內容真實，加分需求則是對職位品質提出了期望，在保障職位信息真實的前提下，需要提供更高質量的職位。結合需求的提及率和需求等級，我們輸出了產品的價值體系（如下圖）。 

如圖所示，產品的價值體系分為三個層級，分別是產品價值、用戶價值和品牌價值。

強調產品價值：我們結合用戶的基礎需求，根據需求內容定義“真實”內容，例如：真實的薪資、真實的工作環境、真實的工作內容等，第二步則是通過產品底層邏輯或用戶的評價反饋系統來創建這些“真實”。

提升用戶價值：用戶價值=產品價值-使用成本，例如：用戶要購買蘋果，A商店的蘋果質量較高，但距離較遠。B商店的蘋果質量一般，但距離很近。則用戶價值=蘋果質量-商店距離。通過傳遞“真實”的方法降低用戶選擇職位的成本，從而提升用戶價值。

形成品牌價值：品牌價值的形成則是通過多個體驗維度的同時影響，以及用戶不斷的使用產品感受用戶價值，長期積累形成的。

f

04.發掘用戶感知 拆解用戶認知

基于前面建立的產品價值體系，我們來試著思考以下幾個問題：

1.我們的品牌要說什么，怎么說？

2.在價值形成的不同階段，我們的品牌分別對用戶說什么？

3.用戶希望得到什么，用戶卻只能感受到什么？

4.用戶此刻正需要什么，用戶此刻最不擅長什么？

創造價值不是目的，只有將價值有效的傳遞給用戶，用戶通過感受價值，從而更好的理解和使用產品。我們通過感知+認知的方式重新構建用戶體驗。

結合用戶對直接/間接競品的場景舉例我們可以發現，用戶對價值感知可以分為四個維度： 

產品體驗：“產品”可以理解為我們售賣給用戶的商品，例如：京東的電器、招聘業務中的職位或者企業。

功能體驗：“功能”類似于服務，例如：7天無理由、簡歷優化。

文案體驗：“文案”指的是頁面中信息字段的表達方式，是否足夠詳細、精準、及時等。

界面體驗：“界面”其實就是頁面的UI風格視覺語言。

同時我們發現用戶認知的“真實”與以下幾個詞有很高的相關性 。

接著我們根據價值體系的目標，通過以上四個維度拆解具體的優化內容（如下圖） 。

05.體驗戰略建立有價值的連接

清楚了價值目標，以及用戶的認知和感知方式，我們開始將價值與用戶做連接，也就是前面提到的價值傳遞（傳遞“真實”）。根據下圖中的公式舉兩個例子。

打造產品體驗： 

左圖是舊版的首頁，右圖是優化后的頁面，我們可以直觀的感受到頁面兩個產品的調性或者說頁面的氣質截然不同。我們來分析一下兩者的區別，優化后的首頁，在主視覺的位置，打造了“每日嚴選”。通過這個模塊快速建立用戶對產品的初步認知。這個模塊的目的是為求職意圖強烈但職位選擇不明確的用戶提供高質量的職位。這類用戶在整體用戶中的占比最高，同時這類用戶的痛點十分明確，他們既希望選擇一個高質量的職位，但自身缺乏對職位品質的判斷能力。

打造服務體驗：

為求職者提供了“安心投”服務，在用戶投遞前、投遞中、投遞后三個節點分別展示求職相關的保障，降低用戶求職顧慮和心理擔憂，提高投遞率，服務包括：

A.求職保險：求職過程中被騙造成的經濟損失平臺會予以適當賠付

B.隱私保護：保護用戶的相關信息，并進行加密處理

C.免打擾保護：保障用戶的私人空間不被打擾

在職位描述（左圖）的模塊后面我們加入了“安心投”，用戶了解工作內容后的第一時間告知他投遞后我們會有哪些保障服務，從而減少他在投遞時的心理擔憂。

其次是在企業規模（右圖）的模塊中加入了“用戶評價”，露出更多真實性相關的信息輔助用戶對職位/企業的品質進行判斷。

同樣在后續的微聊頁面我們也加入了“安全投”的提示，并且在用戶投遞后會再次與他確認我們為他提供了哪些安全保障服務，進一步延伸用戶后續的操作流程。

06.總結

其實品牌形象建立的過程就是我們與用戶交朋友的過程，在這個過程中我們的個性（價值）被用戶逐漸發掘和欣賞，促使我們的關系越走越近。項目初期我們可以通過一些引導、開屏、二樓等方式對品牌進行宣傳和曝光，同時我們不斷提升自身的產品品質，提高產品價值。中期我們需要進一步優化用戶在多個維度的體驗感受，提升用戶價值（用戶價值=產品價值-使用成本），降低用戶使用成本，進而提高用戶使用頻次，以建立長期有效的價值連接。在這個過程中我們不斷優化體驗，與用戶共同成長，形成牢不可破的信任價值體系，即成功搭建了一款深入人心的產品。

原文地址： 58UXD（公眾號）

作者：環鐵藝術家

轉載請注明：學UI網》體驗設計構建品牌價值-打造影響用戶心智的價值連接

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

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

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

雖然粗看沒多大問題，但確實是一個很常規的設計，沒有亮點。

試想，我們是否可以在布局、圖標圖形、色彩質感等做一些細微的突破，這些地方稍微做些改變都可以使得界面變得更好。

再比如上面這個作品，也是同樣的問題，缺乏一絲靈魂。之前看很多設計師作品集里面包裝的作品，就是這樣設計的。

雖然現在UI趨于模式化設計，但是我們在確保體驗最優的同時時，還是可以做一些創新設計。比如布局、圖標、色彩、質感、雜志化等方向發力，下面我們來看看如何做一些差異化設計。

差異化圓角層疊布局

俗話說，當然不知道如何去做創新時，可以去找一些好的概念設計，從里面挖掘一些新的設計想法，用在自己項目中。

例如上圖，我們將卡片圓角化與底部地圖相呼應，整個設計看上去就有了細微縱深感。如果上下滑動時，再配上視差動態效果，那么細節也會更豐富。

上圖的設計也是同樣的思路，圓角圖片作為背景，大圓角卡片在上層疊加布局，增加細節豐富度。

再來看一些優秀案例

半圓角化布局設計的應用案例，只有一個邊用圓角來布局設計，另外一邊直角布局。

通過上面一些案例，可以提取一些布局方案用在項目上，如下圖所示。

打破常規的圖標

圖標可以說在設計中非常重要，承載著品牌性格傳遞，表達產品的氣質，但也是我們最容易忽略的地方。

如果纖細的圖標看膩了，是不是可以嘗試下這種粗線性圖標。

再或者就是將圖標logo化，設計更有趣味性一些。這些圖標應用場景可以是功能頁面，比如像智能家居、智能鏡等場景中。

Naver

彌散光感漸變背景

很多情況下會遇到需要做詳情頁或者個人頁面，這時候就會涉及到頭像與背景的關系設計。目前設計較多的方式就是高清大圖、品牌圖形、漸變色等。那么還可以用下面這種思路。

展開和收起屬于比較細節的問題，按照慣性思維，內容多了我就折疊一部分，用戶需要看更多內容就點擊「展開」，內容展開之后，相應的還應該支持內容的「收起」。

整個流程這樣看起來沒什么毛病，但是卻缺少一個重要的前提，哪些場景或者什么情況下才需要展開或收起呢？

如果只是單純給出一個流程，顯然缺乏對產品邏輯和用戶體驗上的思考?？赡芎芏嘣O計師之前沒怎么注意過這個地方的交互邏輯，或者深入思考需要注意的問題，這次借著答疑的機會咱們一起來深入探討下。

1、拋開展開和收起

雖然提出的問題是分析展開和收起的運用場景，但是我覺得不應該一上來就陷入到具體的細節里。

這個問題相對來說屬于比較小的點，直接鉆到細節里會讓我們只盯著這一小部分，缺少對全局的思考，因小失大。

盯著已有的設計進行推導，這樣多少帶有個人主觀的臆想。先不要盯著具體的展開和收起功能來想場景，反過來想，在設計過程中有哪些地方需要這樣的交互邏輯，為什么需要呢？

無論面對什么樣的設計需求，這樣的思考過程會一直伴隨著我們。

2、先場景后行為

先回到場景上，考慮哪些場景會觸發「展開和收起」行為，再具體問題具體分析。

場景一：當某段內容字數太多，占據了大面積的空間，如果用戶不想看這些長篇大論，想看下一個內容，要滑動屏幕很久才能略過這些內容，顯然我們不想給用戶帶來這樣的操作負擔，這時候就可以考慮添加收起功能，把多余的內容收起來。

這里的收起需要注意兩點：

• 內容被收起不代表被收起的內容不重要；
• 收起相對節約屏幕空間，用戶更方便上下滑動查看內容。

場景二：頁面上仍然有很多內容，但是這些內容有主次之分，我們想讓用戶最先看到前面的內容，后面的內容可以考慮收起來突出重點并節省空間。

這里的收起就和場景一有差異，可能被收起的內容相對沒這么重要，只露出重點/熱點內容或權益來吸引用戶，相對次要的內容被收起，這里的收起會涉及到內容重要程度的排序，這種排序就可以體現在排行榜設計中。

3、展開然后收起

展開和收起屬于一組行為，看到展開我們必然會聯想到收起。展開是為了看到完整的內容，收起則是內容看完的標志，點擊收起可以繼續下一個內容。

在知乎問答中，我們首先看到的是標題的問題，這些問題往往言簡意賅，通常光看標題我們就能知道這個問題想表達什么意思。

▲ 標題下面的問題簡介是對標題的進一步解釋和補充，這里的簡介作為說明性文字，就支持展開和收起。當簡介內容太多時，就要考慮折疊一部分簡介，這樣能保證在首屏上能同時看到問題和答案。

另外當內容很多，以信息流的形式呈現，并且需要上下滑動來瀏覽時，就可以考慮使用現展開后收起。

比如在微信朋友圈，如果文字內容較多，就會被收起一部分，想看完整的內容則需要點擊「全文」選項，看完后點擊「收起」，內容就會被折疊起來，方便我們繼續滑動瀏覽其他朋友圈。

4、展開后不收起

點完展開看到了全部內容，卻沒有收起選項，但是這樣并不影響我們的觀看體驗，而且展開這個動作給用戶和頁面帶來的反應都很小，不會讓用戶感到不適。之所以選擇「展開」，一個重要的原因是因為我們有想看完整內容的強烈需求。在這種意愿的號召下，我們會毫不猶豫地選擇展開功能。

▲ 在豆瓣電影介紹頁中，在劇情簡介區域會有「展開」提示，如果我們選擇展開，說明我們有觀看完整簡介的意愿，并且是主動選擇展開，不添加「收起」選項正好避免了給我們增加操作上的負擔。

另外，當內容相對沒那么多，能在一屏上顯示，不需要用戶上下滑動太多時，可以考慮省去收起，比如在QQ群介紹、抖音個人頁的簡介等。

 

最后

以上是我對展開和收起的運用場景的一些小思考，主要從場景角度來考慮交互邏輯。

授人以魚不如授人以漁，關于展開和收起的場景還有很多，希望大家能掌握這樣的思考邏輯，去發掘更深層的設計內容，當然有問題咱們可以隨時溝通～

 

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

作者：Clippp

轉載請注明：學UI網》展開全文后需要支持收起嗎？從運用場景分析交互邏輯

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

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

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

上圖就是這個神器制作出來的一些效果，之前看Dribble上面有很多類似的設計，現在終于知道它們大部分來源于這個神器。

下面我也找了一些案例，大家一起來看看。

這樣看，效果還是真的不錯，它支持顏色修改、樣式修改，目前一共有11種幾何樣式。

好了，現在下面正式介紹這個傳說中的神器，我相信大家一定會喜歡上的。

比如我可以選擇8X12列和行的幾何布局。

對顏色、列和行、開啟陰影調整，得到如上效果。

最終可以導出一張高清大圖（3240X4860），尺寸是完全夠用的。

隨便調整下又是一張不錯的幾何背景，還可以作為作品集封面。好了，關鍵時刻來了，神器的網址已經打包好，大家可以拿去使用。

領取方式如下：添加小編微信，備注：神器699，小編會將下載地址發給你（小編不是機器人，回復會慢一些，大家稍等）。

 

原文地址：功夫UX （公眾號）

作者： 功夫UX

轉載請注明：學UI網》2021 必備的超贊神器，用上它，效率都要提升三倍??！

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

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

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