組件的命名方式

設計系統的基礎工作之一就是給組件命名。這個工作看上去并不起眼，似乎還有些機械重復，但實際上卻需要具備嚴謹的邏輯和對細節的錙銖必較。

組件的命名方式并不唯一，你可以按照你對組件構成的理解，來規劃你的命名邏輯。下圖以我工作中用到的一款組件庫為例，呈現出組件的命名邏輯：

可以看到，我們在命名時分了 5 個層級，依次是類別，元件，模式，等級，狀態。

1、類別

類別指的是組件最本質的作用和寬泛的應用場景。通常我們會分為：通用、導航、數據錄入、數據展示、反饋等幾個類別，類別以及其中的部分組件如下圖所示：

2、元件 / 組件

元件即具體的、單一的組件，比如 “導航” 這個類別下就包括了固釘（返回頂部）、面包屑、下拉菜單、導航菜單、分頁、頁頭、步驟條等幾個組件：

3、模式

目前的模式通常會分成暗黑模式（Dark Mode）和淺色模式（Light Mode）兩種，但隨著對用戶體驗的不斷重視，未來也有可能會出現 “護眼模式”、“色盲模式”、“高對比度模式” 等模式。

4、等級

等級的分類和數量由組件的基本功能和在產品的具體需求決定，有些組件比如 “分頁器”、“面包屑” 通常只有一個等級，在命名的時候就可以不體現；而有些組件如 “按鈕”、“標簽頁” 、“導航” 則會有多個等級：

5、狀態

狀態即組件在交互時的變化樣式，通常包括普通（默認）、懸?。☉彝＃?、點擊、失效（禁用）等，根據不同組件的特性，也可能會包括危險提示、聚焦等狀態。

根據上述這個規則，我們就可以對所有組件進行有規律的命名，下圖中組件懸停狀態的命名為：Navigation/Sidemenu/Light/Primary/hover

組件命名的注意事項

轉載請注明：學UI網》工作經驗｜設計資產庫中的組件，應該如何命名？

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

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

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

在我們平時的工作中，經常需要創建各種各樣的情緒板：用于品牌、App、海報、服裝……等涉及到設計領域，但我經常會發現在整理素材和歸納的時候，很容易遺漏某些步驟，或者創建過程晚了被客戶拒絕，所以我決定寫一篇總結文章，其中包含一系列技巧和工具。

什么是情緒板？

有些人將其稱為風格圖、參考圖，但它們之間的差異存在爭議，但總而言之，它是一組圖像，把它們匯總在一起代表品牌（或項目）將采用的視覺方向。

我們可以將情緒板的作用總結為三個主要目標：

• 為視覺設計過程奠定基礎
• 建立了品牌的世界觀
• 提供視覺標準，便于以后的視覺延展和一致性

如何制作情緒板

我在剛參加工作時的項目中所犯的第一個錯誤就是收到一個新的設計需求簡介后，就立即瘋狂收集參考圖，我想這是與品牌匹配的，沒有任何問題。（然而這樣的設計方式非常錯誤且痛苦）

現在看來，與之相反的，應該先花點時間分析下設計需求簡介，讓自己真正了解品牌的背景、歷史、未來計劃、行業、競爭、目標受眾、品牌信息和價值主張。如果以上任何一塊缺失并影響了創建情緒板，你最好都需要先跟需求方溝通清楚缺失部分的細節。針對這些缺失的細節發送品牌調查問卷，避免甲方推翻重新設計，影響設計進程。

情緒板在品牌推廣過程中占有一席之地，但在一開始的時候肯定是沒有的。假設你已經從客戶那里收集了所有信息，現在我們準備進一步推進情緒板創建的實際步驟：

1） 研究并搜集參考

2） 排版和優化

3） 情緒版展示（可選）

接下來，會詳細的為大家分享每一個步驟。

研究并搜集參考

在我開始找圖之前，我喜歡把需求介紹中的形容詞或其他關鍵詞放在自己面前，這樣我就可以檢查研究的內容是否與關鍵詞產生共鳴。

另外，不要忘記還要了解目標受眾和市場細節！

在我們談論研究之前，我想分享幾個我喜歡使用的圖像收集工具。

Pinterest 幾乎是圖像收集的首選工具之一。你們中的許多人可能已經在用了， 優點是很容易設置收集畫板，并且關聯圖片和以圖搜圖都非常方便，而且還是免費的。

Sample board from Pinterest 來自 Pinterest 的樣板

（彩云注：原作者這里還介紹了另外兩款工具，但經過彩云的研究，發現不那么好用，不符合中國設計師的使用習慣，所以我去掉了這部分的內容。）

你也可以直接保存到桌面。但我喜歡用工具進行整理，所以當我完成研究過程后，我至少對于搜集整理方面的工具有一個廣泛的了解。

一個非常新的收藏工具叫做  mymind ( https://mymind.com )，由設計師 Tobias van Schneider 開發。這是一個瀏覽器擴展程序，它可以幫助你保存圖像、文本、視頻、完整的文章、產品或其他內容，方法是使用插件擴展或右鍵單擊添加到一個大集合（收集上也可以用）。

這是對不太喜歡打標簽和分組的人做的工具，因為它會自動搜索已保存材料之間的聯系并添加標簽，因此在某些方面要比 Pinterest 更易于搜索

好了，工具夠用了！你準備好獲得靈感了嗎？在開始搜索之前，我們需要記住我們之前定義的那些品牌形容詞（工業、堅定、空靈等等）。

因為我知道搜索過程會讓我陷入困境，所以第一件事就是給自己設置一個計時器（對我來說大部分搜索收集圖片時間是 1.5 小時）。

我首選的工具是 Google 和 Pinterest，重要的是在這個階段不要把自己限制在任何事情上并保存所有吸引你眼球的東西，這樣你就有足夠的材料可以使用。

我會有針對性的找一些關鍵元素來向客戶（或我自己）展示并在以后為設計決策提供信息：顏色、排版、行業和整體氛圍、包裝、攝影、插圖風格、紋理、圖案、logo。

這聽起來很簡單，但如果品牌形容詞沒有太多引導作用呢？這里有一些提示可以嘗試：

• 搜索類似的詞。例如，在Solomo的例子中，一開始我試圖搜索功能，但這樣搜索出來的可能全是無聊的辦公場所，所以我會嘗試尋找同義詞。
• 如果沒想法的時候，嘗試關掉電腦并閉上眼睛想想，當我聽到這個詞時我會想到什么，這也有幫助。
• 如果你和和團隊有時間的話，可以組織一場腦爆會一起討論探索想法，讓更多人參與，這樣也能快速幫助你找到靈感。

分享一些我常用的額外資源：

[Designspriration] — 精選靈感搜索

[PICDIT] — 高級攝影作品網站（彩云看了下貌似近期沒有更新了,但以前的內容還是值得一看的）

[Flickgraphics] — 藝術排版靈感庫

[Adultartclub] — 藝術攝影靈感庫

[Dayinthelandofnobody] — 藝術攝影

[Visualgraphic] — 版式靈感

[typophile] — 排版靈感

[logos.ai] — 排版和logo

在你收集了一堆圖片之后，接下來我們將看看如何處理它們。

排版和優化

1. 選擇一個工具（Canva、Figma、Miro 等，彩云經常用sketch）

將圖片組合成可展示的格式。我建議選擇一些客戶無需安裝即可輕松使用的東西，這樣反饋周期會更短。如果平臺也有一些主題選項，那就太好了，例如，你可以根據客戶的品牌顏色對其進行定制，并且可以將相同的結構重新用于不同的產品。

2. 挑選和組織圖片

將每個圖片下載到本地并把它們歸納分配在相關的風格或品牌形容詞下。

如果只需要部分圖片，記得裁切好需要的部分。

3. 將圖片進行排版分組

在組織這些圖片時，首先要記住的是顏色。我們需要避免用戶在單個對象上花費太多時間，也不是自然地從一張圖流向另一張圖。

你可以嘗試限定好圖片的數量，對我來說10-15是一個很好的起點。

彩云也收集了一些比較優秀的情緒版排版供大家參考

4. 檢查并最終確定方案

如果你已經到了這個階段，那就太好了！現在是時候對最初的品牌形容詞做檢查標記，看看情緒版是否整體傳達了品牌氛圍。

在情緒版中有一個能自檢的列表非常不錯，我們要問自己的問題：

• 客戶可能會過于字面理解嗎？
• 情緒板是否反映了品牌氣質？（逐個檢查品牌形容詞）
• 有什么特別突出的地方嗎？
• 品牌所處的環境是否合適？

如果一切都考慮妥當，就該進行情緒板演示了。 最后，我收集了一些最終筆記，它們可能有助于你將其展示給其他人。

情緒板展示

如何與客戶交流情緒板？

提醒客戶不要從字面上理解任何內容，情緒板上的任何元素都不意味著要對他們的品牌(或項目)進行一對一的翻譯。例如，如果在一張圖片上有紫色的魔方飛來飛去，這并不意味著品牌會用魔方做任何事情，可能是形狀，也可能是顏色。

強調這是品牌所在的視覺世界，而不是具體的元素?？偠灾?，鼓勵客戶關注整體，而不是個別部分。

如果在這個階段一切都很糟糕并客戶不認同它怎么辦？

事情可能會出錯，但請記住，我們可以隨時后退一步，然后再前進。是時候回到關鍵詞了，尤其是基調部分。這時候與觀眾一起仔細閱讀每個詞，并質疑相同的詞是否仍然與品牌愿景產生共鳴，這是很有幫助的。

如果答案是肯定的，那么最好再進行一次會議，以了解觀眾根據關鍵詞所想象的內容，以便下次符合預期。我的經驗是，如果情緒板與觀眾或決策者一起策劃，很容易獲得早期支持以避免這種情況發生。

如果答案是否定的，可能要探索品牌愿景是否有任何變化，并從問卷開始回到開頭。盡管這一步看起來令人生畏，但客戶的舒適度確實至關重要，否則當你在整個設計過程中進一步推進時，他們將不會感到這是設計是為他們做的。

本文翻譯已獲得作者的正式授權（授權截圖如下）
原文地址：medium作者：Peter Javorkai譯文地址：彩云譯設計（公眾號）

譯者：彩云Sky

轉載請注明：學UI網》情緒版還能這樣做？難怪大廠的設計師那么強

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

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

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

01.破壞圖片

02.破壞文字

03.破壞版式

04.破壞背景

05.破壞文字/版式

06.破壞文字/圖片

07.破裂的效果

 

做多了干干凈凈、整整潔潔、很美好的設計，是不是覺得有點無聊、乏味，受眾估計也有這種感覺，所以何不搞搞破壞，打破這種安靜的狀態，給作品一點不一樣的東西，這樣的作品或許才更有生機。在設計的世界里，沒有哪種做法是絕對正確的，也沒有哪種做法是絕對不行的。當然這些出格的設計形式最好要吻合品牌的調性，或者能夠幫助表達設計內容，不是純粹為了破壞而破壞。

轉載請注明：學UI網》杰出的作品就是在普通的作品上“搞破壞”

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

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

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

什么是設計中的對比？

對比是設計中的一個重要設計原則，因為對比能夠有效組織界面信息，并構建設計層次，通過這樣來向用戶傳遞關鍵重要信息。

合理準確的運用對比原則可以有效的提高設計質感，當然如果過渡使用對比有時候也會適得其反，比如顏色對比過于強烈，反而影響了視覺閱讀。

#O1.顏色對比

色相環

如上圖，在色相環上，色相之間的角度大小就決定了對比的強烈程度，因此我們在選擇色彩對比時候需要注意。

例如，下面這張設計圖就是青綠色與紫色之間的對比，屬于色相對比

上圖配色色板中，分別應用色相和明度之間的對比。

#O2.形狀對比

形狀對比一般是有規則和無規則形狀，比如上面的圓形和液態的有機圖形進行組合，前者較為規整，后者往往彎曲且不對稱，二者搭配使用可形成良好的對比。

那么在UI設計中的形狀對比一般都是在棱角之間出現較多或者圖標符號。

Google的Materials you Android 12設計語言的出現，將不同形狀容器的組合在設計中，演變出多種組件容器，這樣的思路，值得我們深入思考與學習，為什么我們之前就想不到這樣的思路？

形狀對比在產品設計中的應用有更多無限可能，現在最難的還是大家的思維限制，希望以一種開放的心態去挑戰設計更多可能性。

#O3.大小對比

在UI設計中對比其實就是差異化，實現信息層次的一種方式。在使用大小對比時候，大的元素就需要更大，小的就讓它更小，不能拖泥帶水，不大不小。

當遇到顏色相同的版式設計，可以通過大小來做層級區分。

上圖界面設計中，標題文字最大，周邊運用留白，使得信息層級區分更明顯。

定位圖標最大化顯示在地圖中心區域，聚焦，引起用戶的關注和留意。

好了，今天文章差不多到這，我個人覺得圖形的對比用好后將是構建競爭力最有效的設計手段，突破同質化壁壘，大家下去可以多去練練，找到設計的感覺。

給大家分享一個在B站直播的小靜物的繪制過程。完整的無廣告演示請查看B站的視頻，也歡迎大家加我們的群，直播會在群內通知。 

教程案例：

一、草稿       

先動手畫草稿~選勾線-頭墨畫筆把果子的形狀畫出來，畫的時候可以輕松一些。注意疏密與大小變化，把節奏感畫出來。

二、填色

1.上色之前給背景填充了一個顏色，我一般不會在純白的畫布上填色。果子、樹枝、葉子都分圖層上固有色，方便后面修改。

2.果子圖層根據光源用噴槍筆刷畫出顏色的變化，離光源近的偏橙黃，遠的偏紅紫。

3.每塊的顏色上完之后，根據光源畫出投影。

三、刻畫

1.在果子的圖層上新建圖層，把把畫布放大了去畫出每個果子的形狀與遮擋關系，形狀不好的要及時去調整。

2.用噴槍畫筆把背景加上簡單的光影，讓背景不至于太單調。

3.繼續細化，不斷的去調整果子的關系，想把果子畫的晶瑩剔透一些，所以反光畫的比較強烈，最后再點上高光，水潤的感覺就馬上出來啦。

 4.給視覺中心的果子加了一些高光點，增加質感。

5.利用色階、色彩平衡等圖層調整畫面，讓光影更強烈，再用雜點筆刷加一點光點，最后打上id就完成啦。

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

作者： 風綻

轉載請注明：學UI網》插畫教程 | BlingBling小靜物繪制過程

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

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

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

一旦讓紅綠色接近，

就會被大眾蓋上紅配綠是最丑配色的罵名。

如此遙遠的紅綠色跨度，怎么配才會好看？

調整高低的純度進行配色，則是在告訴我們，感情上有一定的性格差異才能取長補短，讓兩者色彩的使用不在那么單一化，而明度的亮暗變化像是女生時常過山車的情緒，對錯完全看臉色。

當你用禮物表達情愫而不知如何使用時，紅綠不同的純度與明度配色下，可以找到最適合的那個情景幫助你俘獲對方的芳心。

還是那個禮物，加入紅綠配色和文字后，過高的純度配比使得產品變得尤為浮夸，加上本身產品的金色與高純度的紅綠結合在一起時，仿佛印證著那個永遠都無法靠近的詛咒。

阿綠深愛著阿紅，為了阿紅它可以舍棄自己鮮亮的外表，改變自身明度的亮暗，讓阿紅成為整張畫面的聚焦點，對比之下，我們看到的不是詛咒讓他們無法靠近，而是付出才是打破詛咒的唯一真理。

但是詛咒的封印過于強大，相同的配色換了一個產品后又回到了原點，面對困難，紅綠色選擇了共同進退，一起調低了純度的色彩，達到符合產品本身的調性。

多嘗試改變配色的比例是生活柴米油鹽之外所帶來的的儀式感，也是維護感情最可靠的良藥。

一個吹風機，紅綠對等的配色，像是在訴說著平淡無趣的生活。

試著改變配色的比例，給生活做出一些改變，讓吹風機下生活的樸素感，多些有趣的行為。

不僅這樣，還可以嘗試改變配色的方向和形狀，當阿綠跌跌撞撞的奔向你，對阿紅說著：你也不能一個人離去，我們無論如何要在一起。

紅配綠的詛咒在這一刻被真愛徹底瓦解，就像現在的配色質感，證明了紅配綠是真的好看。

正逢圣誕節更適合

紅配綠的案例

▽

步驟1：

在畫布中填充紅色底并用綠色作為描邊，將圣誕節英文放置到畫面最上方居中，并利用五角星填充到文字中形成獨特性。

步驟2：

阿綠愛上了阿紅，為了給阿紅過節日，想著法的變出圣誕樹的阿綠讓自己成為這個圣誕節最綠的仔。

步驟3：

線條繪制一個三角區域，利用三角結構的構圖方式，對齊進行放置文字編排。

步驟4：

合理使用參考線會幫助排版更加快捷，并且整個版式會顯得干凈利落，分布均衡，四角的小鈴鐺是阿綠給阿紅特地準備的小心思。

最后我們看下版式的框架，配色與構圖是相互存在的，好用的構圖如果沒有好的配色基礎，也依然難以做出好的設計，就是這樣，喵~~~

，

試著改變配色的比例，給生活做出一些改變，讓吹風機下生活的樸素感，多些有趣的行為。

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

作者：修先森

轉載請注明：學UI網》阿紅愛上了阿綠，要怎么配才會好看？

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

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

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

作者：Clippp

轉載請注明：學UI網》讓數據更美！5個實用的數據圖表設計技巧

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

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

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