徽標的四種類型

徽標組件有純圓點、數值、文字、圖標4種常見的類型：

純圓點

純圓點徽標是最常用的類型，作為一個輕量級的提醒，引導用戶點擊某些特定的功能。

純圓點徽標還可以用來區分用戶的狀態，顯示用戶是否在線。

數值

帶有數值的徽標用來表示具體的數量，主要用在消息通知、添加購物車、外賣點餐等場景。例如在消息通知的場景中，消息icon上顯示的數值可以用來告訴用戶有幾條未讀的新消息。

又或者在網購或點餐等場景中，通過購物車的數值徽標的變化，就能知道已經選擇了多少商品或食物。

文字

文字主要有兩種使用類型，一種是單獨的文字徽標，多用在電商運營等活動場景中，通過顯示優惠促銷來吸引用戶。例如在某多多首頁的功能圖標區域，通過加入不同的文字徽標，能夠告訴用戶有新的“限時秒殺”活動和“立減2元”的充值優惠，鼓勵用戶采取行動。

另一種是作為文字標簽，放在UI卡片的任意一角，用來展示某個熱門的話題或者顯示瀏覽量等。

或者放在內容中，用來突出重要的活動。關于標簽組件，還有很有需要注意的設計點，后期設計夾會單獨出一篇文章展開講講標簽設計。

圖標

在元素基礎上疊加一個圖標來顯示當前的狀態，或者對用戶的反饋做出響應，常用的圖標狀態包括成功、失敗、警告。

在一些交友類產品中，可以用圖標徽標表示哪些用戶已經過實名認證。

Tips：根據使用場景的需要，一個UI頁面中可以包含多種徽標類型。在收件箱中，使用右上角的數值徽標展示新收到的郵件數量，下方純圓點提示可以明確區分出新郵件和已讀郵件。

徽標設計的五個要素

雖然徽標看起來很簡單，但想要得到一個獨特的徽標，仍然需要考慮顏色、圓角、描邊、陰影、位置等設計要素。

顏色填充

利用徽標顏色來調整內容優先級。背景色100%的徽標比半透明(不透明度為15–20%)的徽標視覺效果更明顯，那么重要的內容優先使用100%的顏色填充，相對次要的內容則使用半透明度的徽標。

徽標的顏色并不局限于某一種，更重要的是要靈活使用，做到在每個頁面中都能有效吸引用戶視線并且易于識別。

圓角半徑

調整徽標的圓角半徑來改變容器的外形。除了基礎的圓形、方形，也可以考慮使用長條狀矩形、氣泡形、不規則形狀等外形樣式。

輪廓描邊

仔細觀察就會發現，大多數徽標并沒有和原有元素貼在一起，而是相切一定距離的寬度。

通過給徽標加入與背景色相同的描邊，既能將徽標單獨展示出來，還能保證徽標在任何背景顏色上都能夠被看到。

添加陰影

 通過給徽標設置一個平滑的陰影(使用相同的顏色)，能夠得到一個微妙而優雅的懸停效果。

位置關系

徽標容器的長度根據根據內容量的多少而定，容器長度可以向左、向右或從中心擴展。當徽標向右延伸時，需要注意徽標距離右側相鄰的圖標之間的距離，避免徽標太長影響相鄰圖標的顯示。

靈活運用特定的文字縮寫可以有效減少內容量并節省空間，例如使用“99+”來表示超過100條的消息，用“4.8k”表示4800位關注者。

最后

以上就是徽標(Badge)設計容易忽略的設計點，希望通過這些細節能幫助你打磨和改善產品的體驗。

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

最后為大家分享一套微信 WeUI 官方組件庫，包括深淺兩個版本和詳細的設計規范，數據圖表源文件, 文件已打包好, 大家后臺回復關鍵詞即可領取。

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

資料參考: How to design Badges

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

作者：Clippp

轉載請注明：學UI網》APP上的“小紅點”設計，居然有這么多你不知道的設計細節

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

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

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

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

1. 真正去做了之后，你才會發現沒你想象中那么簡單！

我們在聽知識點的時候，看別人咔咔幾下就把效果做出來了，聽著也很簡單，感覺很容易嘛。

我們很有可能就陷在這個錯誤的思維里，知識點聽著很容易理解，是因為別人拆解的很透徹，看別人做效果做的很輕松，是因為別人已經私下做了不下于5遍的練習，以上這些和我們是沒有任何關系的，真正能和自己產生關系的，只有聽了知識點后去上手操作，我們才會發現，原來真的沒有那么簡單。

所以才會有以下這么多的版本：

所以，做起來的時候發現，挺不容易的。

2. 大氛圍海報，主體素材的底子很重要

在做大氛圍的時候，背景和元素很重要，需要有一定的空間感，除此之外，其實主體素材也很關鍵，我們一定要選擇一些底子比較好的素材，比如素材本身最好帶有一定的明暗關系、暗部最好能看到一些細節，不然全都是死黑死黑的，那就不好了。

所以我們可以看一下，我最開始找的素材和最后的素材：

很明顯，后者會更加立體飽滿，調整起來會相對容易一些。

3. 畫面的光源一定要統一

最開始我找的這張素材，其實光源是在左前方，但是我的背景光源是在后側偏上的位置，結果就導致畫面看起來不是很和諧：

左側光很大，上面的光也很大，我們雖然可以把兩個光源都留下來，但是一定要統一好，分清主次和強弱，比如我定的頂光是主光源，左測是試輔光源，在后面的調整之后：

就可以很明顯的分清楚光源主次了，素材光源和背景就很好的統一了。

4. 畫面千萬別曝光

畫面很怕曝光，一旦曝光，就會有很多純白色，純白色一多，就看不到細節，細節一旦缺失，畫面就不高級了。

我們看前面的版本，很多地方都曝光了：

這也是因為素材的限制，因為對比如果調整的太過，原版素材高亮的地方就會曝光過度。

但我們也有辦法彌補，其實很多太白的地方，我們完全可以去填充一些內容，比如我們下面這張圖，地方2本來是曝光過度的，后來我用仿制圖章工具，把地方1的內容給復制過來了：

這樣就好了很多。

切記，畫面別曝光過度哦！

5. 選擇的字體，一定要符合畫面氣質

我們不可能所有的畫面都去修字體，但即使選擇默認字體，也一定要選擇符合畫面氣質的，這個是必須的。

比如我這個畫面是相對比較男性的、戰斗熱血的，所以我們選字體盡量要方正機械一點，千萬不能隨便整上去一個，比如最開始我選的是這個字體：

最開始沒太注意，后來發現還是很違和的，因為這個字體有很多曲線，配合起來有點難受，所以最后我才選了這個字體：

要比那個和諧很多。

這個英文字體叫：Zilap Orion Personal Use Futuristic，文末有獲取方式。

總結

好了，以上就是今天分享的內容啦，最后說下，為什么我一個UI設計師，要去練視覺項的東西，其實所有和美術、視覺相關的東西，基礎都是一樣的，我們很多ui設計師，都很缺少對于視覺基礎的理解，透視、空間、配色、構成等等，我只是在不斷練習基礎，畢竟我的基礎太過薄弱了。

不足之處還有很多，繼續加油。

轉載請注明：學UI網》第一次做這種氛圍海報，挺難的！

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

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

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

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

色彩趨勢 

輕量漸變
首先值得一說的是輕量漸變，輕量漸變屬于弱漸變范疇，其特點為漸變色彩鄰近，幅度輕柔，節奏緩慢，融合感和細膩感較強。

因為輕量漸變多會選擇那些明度高、飽和度低的鄰近色，所以能很好地表達出設計中的“呼吸感”。這種呼吸感和通透感給人的感覺非常清新，所以在2022年應該還會持續地流行下去。

高飽和度撞色
高飽和度色系的應用在2020年就已經成為了重要趨勢之一，因為高飽和度的色彩更能吸引人的注意力，從而有效的吸引用戶的視覺落點。

可盡管“吸睛”對品牌來說非常重要，但我們在使用時仍需克制，因為過高飽和度的搭配，往往會給頁面的一體性造成一定程度上的背離，且非常容易帶來視覺疲勞。

所以設計師在使用這類顏色時，也通常會對其飽和度和明度進行一定程度的降低，讓顏色“豐盈卻不擁擠”，從而保證我們視覺上的舒適性。

另外，從高飽和的UI案例中我們也能夠看到，在搭配色彩時，選用大量的鄰近色營造氛圍，再用一兩個對比色產生沖突，就會使得整個頁面輕重相平衡，帶來不錯的視覺體驗。

糖果色
糖果色以粉色、粉藍色、粉綠色、粉黃色、明艷紫、檸檬黃、寶石藍和芥末綠等甜蜜的女性色彩為主色調，它能帶來一種纖細,柔軟的感覺。所以哪怕一個畫面中出現過多的色彩，也不會讓人覺得很沖突和背離！

圖形趨勢 

emoji表情
表情符號在現如今是一個超越文本并且能夠得到廣泛認知、跨越文化和多領域的一種視覺語言，在文字段落的末尾加上 Emoji 能夠更好傳達情緒，這使得表情符號不僅在網頁、文本甚至在海報中作為主視覺，都能帶來非常不錯的氛圍感。

在2021年，emoji不僅被廣泛應用起來，還被廣泛3D化。加上陰影效果的emoji，其情緒的傳達也變得更加豐富。

2022，emoji的表達依舊會持續進行，只是其形式會更加豐富，例如這種“假3D”效果等

3D化
說到了emoji的3D表達，就不得不說2021最為流行的一個設計趨勢，那就是大量的平面內容通過增加了陰影的效果而被立體的表達了出來。

像我們熟悉的蘋果應用程序icon等，其設計細節都因此變得更加的豐富而有層次。

而2022，3D設計趨勢也會通過不斷的發展進一步明確了其自身的地位。它能夠為設計師提供無限的可能性，為任何你能想象的東西提供更多可發揮的空間。

2022年我們也會看到更多關于2D和3D之間完美結合的設計，像下圖的案例，手繪線條的手指和球體表情之間的互動，不僅讓整個頁面顯得更加有趣生動，還能使2D3D這兩種設計方式的優點都能得到更充分的展現。

玻璃擬態
同樣，在2021年超級流行的毛玻璃效果，我們也會在2022年看見更加豐富的表達~

比如最近在dribble上很火的這組效果圖，就是在平面的基礎上，將毛玻璃的效果運用在3D的物體上，讓整體的虛實感更加的生動，也會給設計增加一點與眾不同的活力。

除此以外，我們還可以看到的，這一趨勢已經明顯轉移到了玻璃和水晶質感上，而且以令人難以置信的用立體擬真度將圖形設計提升到了一個全新的高度。所以，2022我們也將看到更多與全息和3D趨勢相輔相成的透明質感和逼真的玻璃背景等元素的設計。

幾何抽象
完全不同于寫實的3D風格，2022年的設計風格可能也會開始往抽象發展。用幾何圖形來表達意象，用色彩傳達情感。少了繁瑣的裝飾，用更簡潔有力的方式去傳達設計理念。

當分形形狀與色彩完美結合時，就可以創建出極具吸引力的視覺效果。

結語 

的確，每年的設計趨勢似乎總有相似的地方，2022年的設計風格也是在2021的基礎上進行演變和發展的。所以更重要的是，我們要學會持續地積累這些設計素材，并不斷地審視自己的設計作品，學會將他人的設計思路結合在自己的設計靈感上，才能成為一個一直擁有輸出能力的設計師~

原文地址：CSDN

作者：摹客

轉載請注明：學UI網》2022最新盤點，這些設計趨勢今年會怎樣？

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

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

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

色彩規范 

色彩規范一般包含品牌色、輔助色和中性色，在B端產品中，顏色除了迎來傳達品牌調性，更多的用來傳達一些提示或警告，通過不同的顏色給予用戶信息反饋，不同的狀態運用不同的顏色展示，比如：

綠色通常代表成功、已發送、已簽到等狀態；

紅色通常代表失敗、未發布、未簽到等狀態。

另外，通過顏色可以對內容進行分層級展示，提高用戶閱讀信息的效率。

品牌主色

一套產品只有一個品牌主色，是界面中出現最多的顏色。在需要用色強調而且沒有其他要求時，一般都會選擇主色。

網絡上很多人說B端產品大部分用藍色或者偏冷色系作為主色，可以帶給用戶一種嚴肅冷靜的感覺，但在工作日常中，很多企業會要求顏色必須是公司的品牌色。

例如當前任職的公司品牌色是飽和度較高的紫色，那么在定主色時，我們就不能跳脫這個色彩范圍，在這樣的情況下，我們可以考慮將品牌色飽和度降低或者用其他暗色系的顏色進行搭配，從而在觀感上盡量顯得不是那么刺眼，降低用戶眼睛疲勞度。

輔助色

用于提示其他場景，比如：成功、失敗、警告、無效等，輔助色主要是幫助用戶高效獲得信息。

中性色

常用于文本、背景、邊框、分割線等。

字體規范 

在B端的設計上，文字的字體，字重，字號，行號、顏色用來區分界面信息的層級關系。

字體

中文字體一般用蘋方體、思源黑體、微軟雅黑，英文字體一般為Helvetica Neue、思源黑體、微軟雅黑。

字號

系統中字體大小為：12px、14px、16px、18px、20px、24px、26px、28px、30px、36px…

在開發中，瀏覽器最小字體一般為12px，注意設計中不可以低于最小字體設計。

行高

行高上，可以采用行高=文字大小+8px，例如14px字體，則14px+8px=22px，則行高為22px。

字重

通常采用regular、medium、semibold三個字重。

顏色

目前最常用的字體顏色是#333333、#666666、#999999，區分標題、正文、輔助文字，具體可根據設計進行調節。

圖標規范 

在B端設計中，圖標要簡潔易懂，用來幫助用戶更快導航，提高用戶使用產品的效率。

在繪制完圖標后，可以存儲成svg方式上傳至Iconfont，這樣方便和開發進行對接，也可以打造自己的圖標庫，在后續的項目中，方便直接運用或修改。

布局柵格 

B端系統的主流分辨率主要為1920、1440和1366，個別系統存在1280的顯示設備，通過適配布局來完成在不同分辨率下展示內容。

一般選用24柵格布局，不同柵格結構中柵格區域也會有所不同，固定區域會存在于響應式網格之外，不隨著頁面的變化而改變大小。

組件規范 

B端組件庫的建立，常用的組件包括按鈕組件、面包屑、導航菜單、分頁、下拉控件、上下左右滑條、日期選擇框、單選復選框、樹形選擇、標簽頁、輸入框、表單、上傳樣式、氣泡卡片、表格列表、警告提示、彈窗等。

按鈕

按鈕的五種樣式：主按鈕、默認按鈕、虛線按鈕、文本按鈕、鏈接按鈕。

按鈕的四種狀態：常規、懸停、選中、禁用。

面包屑

顯示當前頁面在系統層級結構中的位置，并能向上返回，用于系統擁有超過兩層以上的層級結構，同時可以告訴用戶當前頁面在哪里，并提供導航功能。

導航菜單

導航菜單為頁面和功能提供導航的菜單功能，用戶依賴導航在各個頁面中進行跳轉。

分頁

采用分頁的形式分隔長列表數據，每次只加載一個頁面。當加載/渲染所有數據將花費很多時間時可采用分頁。

下拉菜單

當選項過多時，使用下拉菜單展示并選擇內容。

時間日期選擇器

用于選擇或輸入日期，分為固定時間點&范圍、任意時間點&范圍、選擇日/月/年范圍。

選擇框

用于在一組備選項中進行選擇，包括單選框和多選框。

標簽頁

通過切換不同的選項標簽，查看不同的頁面內容。

輸入框

需要注意輸入框在輸入前、輸入中、輸入后三種不同的狀態。

上傳

通過點擊或拖拽上傳文件。

表格

用于展示多條結構類似數據，可對數據進行排序、篩選、對比或其他自定義操作。

警告提示

用于頁面中展示重要的提示信息。警告提示一般分為四個狀態：成功、信息注釋、警告、錯誤(失敗)。

彈窗

用于消息提示、成功提示、錯誤提示、詢問信息、填寫表單。

最后 

希望通過這套B端設計規范，能讓你對B端系統有一個全面的了解。在之后的文章中，設計夾會持續分享這些設計規范的具體用法。

例如那么多的B端組件，實際上每個組件都值得單獨用一篇文章來仔細研究如何使用。

如果你想學習更多關于「B端設計」的知識，記得及時關注文章推送哦~

最后設計夾分享一套簡約風格樣機模型供大伙包裝作品時使用，這套樣機包含手機端、Pad端、手表端、PC端等多種尺寸，有PSD、Al、XD三種格式，樣機已打包好, 大家后臺回復關鍵詞即可領取。

領取方式：關注公眾號，后臺回復【樣機】獲取源文件

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

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

作者：Fix-

轉載請注明：學UI網》從設計實戰中，總結了這份B端產品設計規范

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

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

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

我們為什么要使用GSM模型

常規工作中，需求往往由PM發起，UE團隊到底如何跟PM、FE等團隊成員協同，達成目標共識，是我們值得討論的。

因此建立一套科學的模型，通過對目標的設定來倒推過程，結合定性和定量研究，與項目組就目標可以達成共識，并且更加準確的反應出產品目標中的用戶體驗質量，這套模型就是GSM模型。

GSM模型的簡介與定義

“GSM”是Google提出的一種自上而下度量用戶行為的方法，通常用于衡量產品/項目目標的實現程度。通過對目標的設定來倒推過程，精準設定指標體系的一種量化研究方法。適用于產品設計中的各個角色。

• 目標：需要解決的問題，通過對產品（項目）目標拆解推導出用戶體驗目標，體驗目標輔助產品目標達成；
• 信號：設計目標實現后所產生出的現象，設計目標是信號的必要條件；
• 指標：是對用戶現象的量化，也就是信號所得出的可衡量的數據化現象。

GSM模型的使用場景

GSM模型可適用于產品設計中的各個角色，對交互設計師尤為重要，交互設計師作為連接產品、用戶、設計的中間一環，不斷在業務和體驗之間博弈，尋找平衡點。

通過GSM模型對產品目標進行分析，結合業務目標與用戶需求，找到改進機會點，在設計中幫我們斧正設計思路，對方案不斷優化，上線后進行方案效果回收。

GSM模型帶來的價值

綜上所述，GSM模型基于項目目標，找出設計目標。并且可以辨別設計的優良。

GSM模型的具體實施步驟

通過對目標的設定來倒推過程，并精準設定指標體系。

| step 1 識別并明確目標（Goal）

業務目標、用戶目標、設計目標是什么？

用戶要完成什么任務？我們希望他們按照什么路線走？希望他們執行什么操作？

這里以手機百度APP智能小程序業務端——創建小程序表單項目改版為例，提高表單審核通過率是整個項目目標，通過拆分項目，設計目標為表單填寫更快速和表單填寫更準確。通過確定設計目標繼續推到用戶表現。

| step 2 推導目標對應的表現（Signal）

什么用戶行為/態度指示了目標達成？什么樣的感受與目標失敗/成功相關？

從目標——信號可以是一對多的關系，根據用 戶行為在不同的行為階段會有不同的信號表現，以用戶不同階段觀測用戶的不同行為表現。

• 進入 —— 通過各種途徑進入頁面
• 發現 —— 在該頁面中瀏覽、查找自己所需要的信息
• 辨別 —— 然后通過圖片、標題等內容以及設計形式來識別有效信息
• 行動 —— 找到后用戶想了解詳情，點擊鏈接進入

這里還以手機百度APP智能小程序業務端——創建小程序表單項目改版為例，將設計目標轉化為用戶行為。

| step 3 找出關鍵的數據指標（Metric）

依照用戶的行為表現，觀測對應的數據指標，通過這些可量化、可衡量的數據指標進行數據分析并指導下一步的優化迭代。

1. 進入 —— 作為用戶進入的頁面，在這一步經常發生的問題是退出，往往會產生兩個對應的指標

• a. 作為用戶在網站或APP的著陸頁，用戶離開為跳出
• b. 非網站或APP的著陸頁，用戶離開為退出

往往，在這一行為中“跳出”指標可以衡量頁面內容傳達與用戶目的匹配程度，是否符合用戶的心理模型，這也是絕大多數網站首頁最重要的數據指標之一。

2. 發現 —— 用戶來到頁面中都要先瀏覽的過程

在這一步，設計師關注的問題是頁面中的用戶視覺流，關鍵信息能否被用戶快速鎖定。

關于識別性的指標，歸納出3點來進行衡量：

• a.鼠標懸停時間
• b.后臺報錯率
• c.人均點擊次數（適用特殊控件，如篩選器等）

4. 行動 —— 用戶在站內內容的點擊

在首頁的分流數據中，作為設計師主要關注兩個指標：

a.不同內容的點擊占比

b.其后續路徑中的目標轉化質量

再次回到我們的工作案例中，根據用戶行為表現拆分成數據指標。

綜上所示，通過表單可視化、精準引導、組件升級的方式，完成項目與設計目標，最終改版成功。

結語

GSM模型是一種綜合數據驗證模型，在使用過程中可以結合頭腦風暴、市場調研、可行性測試等方式共同使用。

1.我們的思考方式

如果想要快速有效的提升我們的思考能力，那么首先需要了解，我們平時在遇到問題時是如何思考的。

比如，領導叫你去負責一個產品的設計語言定義，這時候，出現最多的可能會有以下兩種情況（完全不知道的已經排除）：

第一種情況：腦袋里面有一些不完整的零散知識，也不知道怎么組織運用。

第二種情況：腦袋里面有完整的零散知識，并且能組織成一套完整的方法論，還能很好的推動實現。

這兩種最根本的區別是第二種知識結構已經有了明確的解決方案，第一種非常零散的知識。

可能有人說，第二種都是很資深的設計師了，肯定能做出來，其實大部分人都可以，只要你的知識圖書館里面有相關可組織起來的知識。

任何人都是這樣的，在我們在遇到問題時，一般都是從知識圖書館中去搜索解決策略。

這時候，假如你搜索范圍有限，知識圖書館存量較少，那么此時就會很難繼續下去，沒有足夠的知識來支撐你完成下一步行動。相反，如果你的知識圖書館非常豐富，涉及到多個領域，那么你給出的解決方案就會更系統，更完整，更具創新性。

說到這里，那么要如何才能擁有豐富的知識圖書館，下面我們來看看，如何在日常工作學習中積累，不斷壯大我們的知識圖書館。

2.如何豐富知識圖書館

我們解決任何問題時候，其實都在調用我們的知識圖書館里面的知識。有人可能會說是想象力，其實想象力都是基于已有的龐大知識圖書館，然后從里面挑選出來各種排列組合出來的新解決方案。

越是知識圖書館豐富的人，他們給出的解決方案就會越多且豐富，創新度也會很高。

這就是為何，我們身邊有些設計師面對一個問題，能有多種解法，甚至有些設計師給出的解法會讓你很感嘆為何他能這么厲害。

那么如何在短時間豐富強化我們知識圖書館？最有效且最快的方式有以下幾種：

1.需要定期，定計劃的豐富你專業領域的知識，比如你是一名UI設計師，那么這個領域的知識你都需要了解，并且把最常用的知識多熟練，最好能掌握這個領域的幾個牛逼的方法論。

2.找一本書籍，這個書籍能覆蓋這個領域知識基本介紹80%以上知識，那么你就知道這個領域知識架構，然后逐步去填充，形成你的知識網絡。

3.找個可靠的導師，行業專家，跟著練，提升也最快。

保持學習態度，不斷訓練和豐富我們知識圖書館，這樣我們在遇到問題時候，就可以輕松從里面調取來應用，你的思維也會更開竅。

創新思考怎么來的？就是將你的龐大知識圖書館里面的知識，重新拿出來排列組合，就是創新。

如果想要自己在短時間有明顯的提高，那么開始定個目標去逐步實現。

3.寫在最后

今天我們說了一個很重要的關鍵詞：“知識圖書館”，我們在生活中解決任何問題都是在不斷調用知識圖書館里面存儲的知識。

如果你現在還是遇到問題，腦袋一片空白，不知道怎么解決，那并不是因為你笨，而是因為你的 知識圖書館的存量太少。沒關系，就現在，下個決心去豐富。

分享一句話給大家：你要相信看似不起波瀾的日復一日，會突然在某一天讓人看到堅持的意義。

案例一

 

案例二

加上簡單的文字編排，一張很有品牌形象的海報就做出來了。

案例三

構成網格的關鍵要素：版心、頁邊距、欄和欄間距

頁邊距與版心

頁邊距是指版面上下左右留“白”的范圍。

版心是指頁邊距所包裹的區域。目的是為了使內容看上去處于安全范圍內，也符合人的視覺習慣

注：所有元素都應該在版心內編排，但并不是絕對不能超出版心，在已有規則下，我們可以將部分重要性低的元素放置到版心之外，從而為畫面帶來動感與張力

欄和欄間距：

“欄”就是放置文字或圖片模塊的范圍，“欄間距”就是欄與欄之間的距離。

在建立好“欄”的標準范圍之后，主觀將元素和內容進行占比分配，根據實際需要跨欄應用，讓排版更具靈活性。

在PS中繪制

在PS默認的單位為“像素”，而我們做的海報、畫冊等印刷品使用的單位為“毫米”。所以要先執行【編輯】—【首選項】—【單位與標尺】，把“標尺”單位改為“毫米”。

再執行【視圖】—【新建參考線版面】”，分別設置列、行數、裝訂線（欄間距）、邊距。如本次我們要設置的是5X8，欄間距為5毫米、邊距為10毫米的網格：

新建好的網格如下：（快捷鍵Ctrl+；可以顯示或隱藏網格）

在AI中繪制

在AI中沒有繪制參考線的命令，可以先使用“矩形工具”，繪制矩形邊框作為版心。

打開【對象】-【路徑】-【分割為網格】。點擊“預覽”，行的數量選擇8，欄的數量選擇5，間距選擇5，點擊確定后按“ctrl+5”,轉成參考線。

新建好的網格如下：（快捷鍵Ctrl+；可以顯示或隱藏網格）

在ID中繪制

ID為專業的圖文排版軟件，在進行書籍畫冊排版時，一般只設置豎向的分欄。在新建文件時，選擇“邊距和分欄”。

在對話框中分別設置邊距、欄間距和欄數即可：

然后執行【版面】—【創建參考線】，

分別設置行數、欄數、欄間距：

設置好的網格如下：（按W鍵可以隱藏或顯示網格）

設計時設置網格是為了幫助你讓頁面中元素布局更加規范且統一，易于用戶理解，靈活運用網格不僅不會限制編排形式，還會使版面變得更加清晰、生動、統一、有條理。

原文地址：藝海拾貝Design（公眾號）

作者：鄧海貝

轉載請注明：學UI網》如何在PS、AI、ID中快速繪制“網格”

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

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

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

漫畫作品資源圖往往承載了這個故事的內容、情感關系、又或者是人物性格等…，而設計者的任務就是去制造這個畫面賦予它意義使用戶能夠迅速的得到想要傳達的信息以及情感。

我們所有行為的背后其實都是情感的驅動，情感塑造了我們的思維感受，以及回應整個世界的方式。所以當我們的設計激發了用戶的回憶以及想象力，也就觸發了情感鏈接。

視覺設計師余肉圓圍繞【什么是情感的傳遞者】，【傳遞情感的4個要點】以及【如何利用情感傳遞使畫面更有故事性】展開了分享。

她認為設計師不單單需要的是設計技能的提升，更重要的是要捕捉事物本身的情感。再去傳遞給大家，這才是設計師需要做的。

還向我們展示了一個嘗試突破的完整案例-獵愛誤殺，探索他們是如何主導視覺走向。

漫畫logo設計不單單是字體設計，往往還要結合故事劇情去設計，快看設計師宋宇瀟從設計背景、設計原則、品類概覽、女頻品類分析設計思路、男頻品類分析設計思路5個方面去分享他做漫畫字形設計的思路和經驗。

最后MEUX的資深設計師慶爺介紹如何運用環境、信息和行為、三步掌握運營設計理論體系，結合自身參與的設計案例，希望能幫助設計師輕松掌握運營的底層邏輯，徹底解決視覺風格與活動的關系等問題。

快看的交流在2個小時激烈討論中結束，同學們都意猶未盡，表示開拓了自己的思路。

原文地址：百度MEUX（公眾號）

作者：愛分享交流的

轉載請注明：學UI網》對話設計圓桌會-快看漫畫

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

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

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

一、理解品牌對產品的重要性

品牌是運營中非常重要的部分，產品是品牌的生存基礎，而品牌是產品的認知升華，它代表了產品在用戶心中的形象，同時影響著用戶自身認知世界的構建。

好看視頻是一個為用戶提供海量優質短視頻內容的專業聚合平臺。我們希望通過好看品牌運營升級強化產品調性，提升產品氣質。于是針對“如何找到適合好看視頻的品牌道路”進行了全面的思考和分析。

二、好看視頻品牌化的目標

通過對好看視頻視覺語言的探索與應用，形成統一品牌感知，深化用戶與產品的情感鏈接。向用戶傳遞產品理念，為產品建立優質形象。

三、好看視頻品牌設計框架

在設計初期，我們對同類型產品與用戶類型進行了分析，現在很多品牌的活動視覺不只是單純的畫面展示，都開始有更加明確的設計背景和理念，但品牌不是千篇一律的，需要突出產品的特色，明確自身定位。

好看視頻在升級后主打“知識傳播”的內容，我們從這個角度出發，將“輕松有收獲”作為貫穿產品的設計理念，思考如何通過設計來傳達品牌感知。

品牌不是單一樣式的體現，包含了多種表現形式。在這個過程中，需要重點考慮通過哪幾個維度來支撐整個品牌體系。我們梳理了以知識傳播為中心觀點，邏輯統一、情感滲透、個性風格、表現手法和知識內容五維一心的傳播框架，運用以超級符號提取、輔助圖形重構、字體、色彩、排版、動效等設計手段，將產品理念傳遞給用戶，建立好看視頻在用戶心中的優質視頻聚合平臺形象。

四、好看視頻品牌升級

1、好看視頻品牌升級海報

品牌海報是好看視頻品牌升級中最重要的環節之一，我們為好看視頻九大垂類設計了九個相對應的概念場景。每個場景的中心主體均與品牌logo形狀強關聯，強化超級符號在用戶群中的記憶度，擴大品牌影響力。

我們對九大垂類進行了發散性思考，確認了“以好看視頻logo符號為主體，通過材質、元素的結合表現垂類感受”的設計方向，帶著這樣的思考收集了每個垂類對應的一些情緒圖。

在測試階段，以美妝為例，可以看出元素的羅列或許更加直接，但缺乏了想象力，形式上偏向“電商”。經過多次的嘗試，最終的設計邏輯我們決定以材質為主要突破口，柔軟的皮毛、細膩的膏體等具有想象空間的質感會更加觸動人的感官。

我們通過質感與元素的組合，形成中心主體畫面。在字體設計上，為了適配多垂類海報的應用及后續調整，在版權字庫中選擇了方正摩登體作為本次設計的通用字體。背景結合趣味貼紙強調輕松有收獲的品牌調性。

按照同樣的思路完成了9張海報設計，我們以品牌logo作為容器承載不同的真實質感，結合拼貼+故障風的排版，體現品牌調性的同時，打破固有思維，注重細節和質感帶來的沉浸式視覺體驗。

2、好看視頻品牌升級概念片

在完成9張垂類海報的同時，我們還規劃為本次品牌升級做了一支品牌概念片，多維度對好看視頻品牌擴大影響力。

如何在保持景別不變的前提下，讓整條片子富有趣味性，是本次設計的最大難點。我們通過拆解優秀的動態作品，總結出了一個貫穿全片的動態邏輯。通過“元素動勢、攝像機動勢、太陽光動勢”的相互配合，形成強關聯且具備故事性的銜接轉場。

例如，利用旅游垂類的攝像機旋轉，承接美妝場景。用睫毛刷的動勢，銜接杠鈴動勢的同時，在中間直接加入剪輯的氣口。

將評測與人文垂類設定為正反桌面，通過翻轉進行鏡頭切換。設定筆筒與咖啡袋同樣倒下的動畫，加入太陽光方向的延續，同時，將攝像機調配為速率相接。

除了轉場，每個場景的細節動畫都給予了充分的表達。通過多種動態手法的組合，緊密銜接了每一個場景，保證強化品牌符號感知的同時，提高了視頻的動態細節。

本次品牌設計在發布會、萬象大會中都得到了很好的反饋，我們的設計影響力在內外都有了非常大的提升，為后續設計樹立了標桿。

總結

在品牌運營越來越重要的今天，成體系的設計打法，不僅規范化了設計側的執行流程，也統一了整體的品牌感知，使得向用戶傳遞產品理念變得更加直觀，向外建立優質形象擴大影響力也變得更加簡單。

轉載請注明：學UI網》好看視頻品牌升級運營設計

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

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

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