如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里

1、大家都知道vue是一種單頁應用,單頁應用就是僅在頁面初始化的時候加載相應的html/css/js一單頁面加載完成,不會因為用戶的操作而進行頁面的重新加載或者跳轉,用javascript動態(tài)的變化html的內容

如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里

環(huán)顧身邊常見的優(yōu)秀設計很多都使用了柵格系統(tǒng)，你可能非常贊同在界面中使用柵格系統(tǒng)，但卻沒有人告訴你應該如何使用它們。

印刷中也會用到柵格，但就本文而言，我主要想討論的是用于PC和移動設備上的柵格系統(tǒng)設計。

紫色塊放內容

內容塊包括文本，圖片或者是兩者的組合形式，背景顏色實際上不能算是內容元素，除非是作為文本或者圖片的容器。

上圖中的粉色塊作為柵格中的列，它們構成了內容寬度。一般來說，列寬是不會變的，只是列數(shù)會隨著設備的不同而變化，比如從PC端的12列變?yōu)槠桨咫娔X上的8列，然后在移動端變?yōu)?列。嚴格來說，你其實可以定義任何想要的列寬，但大多數(shù)情況下的網格列寬都設置在60-80px之間。選擇合適的列寬是最重要的，因為它是內容寬度的主要決定因素。

水槽是在列與列之間的空間。20px是一個常見的尺寸設置，當設計塊狀或者卡片元素的網格時，這種間距非常重要，比如做照片類設計的時候。有些系統(tǒng)會隨著設備寬度的增加而增加水槽的寬度，但也可以保持固定。

外邊距也稱為外水槽，是內容寬度之外的空白區(qū)域。為了更方便的設計，外邊距會隨著設備寬度的增加而增加。移動設備的邊距通常為20-30px，而在平板電腦和PC端，這個間距通常會差異很大。

下面會介紹一些基本的準則，但要明白在實際設計中其實沒有任何硬性的規(guī)定。

1. 內容元素必須位于若干列上

其核心思想是內容元素必須位于若干列上，你可以任意分割，比如6x2,3x4,4x3。下面的例子中，我展示了不同分割方式設計的信息卡片。

不同柵格設計展示

很棒，這看起來很簡單對吧。有的時候，你想把內容嚴格的套用在柵格布局上，會發(fā)現(xiàn)可能不夠美觀，比如下面的例子。

如果我們把內容都放在網格上，文本內容會顯得很長，最佳的位置是不嚴格在任何網格上，這也是可以的，只要理解了整個元素實際上是一個不可見的，更大的容器就行。

這也是4x3的布局，只是給了它內部不可見的填充。當把這樣的設計稿給到開發(fā)時，他們就能很直觀的知道這一點，所以這更利于去理解如何實際地分配好內容。

2. 不要將內容元素留在水槽中

內容元素應該要在列寬以內，而不能流出在水槽之外，這樣會違背柵格化的目的。

3. 只要父級元素對齊柵格，子級可以不完全對齊列

有些時候，你想要將設計和卡片分成兩部分，一半是圖片，一半是文字。你可能遇到這樣尷尬的情況，圖片沒有完全落在一列上，文字被迫以一種奇怪的方式自適應。其實不用擔心，只要“父”容器對齊柵格，這就沒有關系。

父子級內容柵格排版示意

4. 除非有意，否則不要把列作為外部填充

所有重要內容都應該與柵格列寬相適應。一開始會覺得奇怪，因為如果不習慣使用網格，可能會把網格寬度當成全部內容區(qū)域，所以還需要給它設定一定的內邊距。此時外邊距就起到了留白的作用，它們充當了內邊距。不要在網格內部利用列寬當成內邊距，而是要與網格最外面保持對齊，利用網格外的間距來當做留白區(qū)域。根據(jù)代碼實現(xiàn)方式，要么網格內的內容按比例縮放，邊距固定，要么外邊距與內容同時縮放。

正確的內容填充方式和不正確的把柵格當做邊距

所以如果有人說“我需要一個1200px寬的設計”，這并不意味著你的設計就是1200px寬，這其實是說設計內容寬度在1200px的畫布內，實際內容占位是960px，這樣就會有空間留出外邊距。

5. 完全出血的元素或紋理圖形應該設計在畫板邊緣，并理解為出血的列網格

這個頁面布局的頂部圖片被設計成完全出血

這是一個例外的規(guī)則，當背景顏色或者圖片在完全出血的情況下，開發(fā)同學會把它理解為一個全屏的內容元素。

如果設計的是裝飾元素之類的內容，可以接受它被裁切掉，此時也可以脫離柵格化的設計。

一些圖片和文字的出血設計

頁眉和頁腳有時也有例外，它們不被認為是內容的一部分。有些設計將它們固定在瀏覽器邊緣，有些則喜歡保持內容的寬度，這取決于自身功能和內容的情況。將它們保持在內容寬度內的好處是，當用戶在寬屏顯示器上看頁面時，不需要來回掃視；將它們固定在瀏覽器上的好處是可以為導航元素提供更多的空間。

柵格化布局如何做到響應式

圖片來源Intuit

在傳統(tǒng)的柵格化系統(tǒng)設計中，列的寬度和水槽的寬度是保持不變的，只是列的“數(shù)量”發(fā)生變化。為什么要這么處理呢？這是為了讓設計更簡單。如果一組三張卡片分別放在桌面的四列上，那么在平板電腦上，會顯示兩張卡片，并把第三張卡片進行折行顯示在第二行上。不需要做任何的調整，因為已經知道它位于第四列上了。在手機上，答案也很簡單，只需要一張卡片，其他的就會自動堆到下面的行中。如果你愿意，也可以變得有創(chuàng)意，選擇只在手機上顯示一張卡片，或者做一個水平滾動。這些列的自適應對于代碼來說就是很簡單的參考。

實際上，web必須呈現(xiàn)任何瀏覽器的寬度。例如，有一個大顯示器，它可以看到1600像素寬的東西，實際上pc端的網頁設計是1200px寬，平板電腦上是768px寬，手機是360px寬。所以你會看到一個小于1200px的設計，有大量的留白。但是當你的瀏覽器再小一個像素，1199px，會發(fā)生什么呢？

固定網格

固定柵格示意

如果開發(fā)那邊寫了一個固定柵格，當你從桌面縮小到平板電腦，就像是在900px的瀏覽器寬度時，你不會看到任何變化，設計就像是被剪掉了一樣。但當達到768px臨界點時，設計馬上就會改變，平板電腦上的顯示效果就會好起來。如果繼續(xù)減小這個值，同樣的事情也會發(fā)生，在到達另一個臨界值之前，設計看起來都是不變的。

流動網格

流動網格的示例

現(xiàn)在來看看流動網格的特點，當窗口縮小時，內容將動態(tài)的發(fā)生變化，文本會進行換行，元素也會變窄。然而，這些元素在內容寬度縮小到下一個臨界值之前，布局是不會變化的。

所以我想說的是，設計的臨界值只是一個更改布局的參考點。這就是為什么列寬和水槽在網格中不會改變的原因，因為我們想讓設計師在考慮布局時能夠更容易地創(chuàng)建一致性。

混合網格

在實際項目中，使用流動網格和固定網格的組合也是常見的做法。網站通常是流動網格，因為它要去適應各種不同終端的大小。

一些做的很酷的柵格系統(tǒng)

不需要太死板地去堅持傳統(tǒng)柵格套路，12、8、4這樣的分布，甚至不需要20px的水槽。下面是一些在設計中使用柵格系統(tǒng)做的很棒的設計靈感。

Invision’s Genome Project

可以看到，他們的設計故意不去使用任何的水槽，所以看起來是無縫的。

這個網站不僅設計的很好，他們還利用了在設計中展示他們自己的柵格系統(tǒng)來讓整體的設計變得更加酷炫。

Dropbox Design

他們沒有設計水槽和外邊距，相反，整個頁面被分成兩半，然后將內容填充到這兩部分。

Wordpress

Wordpress創(chuàng)建賬號頁面

使用網格的方式取決于你自己。你可以在主要內容部分使用網格，次要內容則不使用。在Wordpress的例子中，頁面中間的部分使用柵格化設計，左側的側邊欄則沒有使用。

The Mockup Club

內容和網格也并不總是從中間開始，對于模型網站，內容在左邊也未嘗不可。

Instagram

我非常確定的說，Instagram的PC端是用上了6列柵格布局。

要點總結

寫這篇文章的目的是想提供一些關于如何在響應式設計中使用柵格系統(tǒng)。我知道對于我自己來說，我花了很多年的時間寫了大量的代碼來理解網格是如何工作的。我在YouYube上看了很多視頻，也閱讀了大量的文章，但每個人都在關注它為什么重要，卻不去注重到底怎么在自己的項目中使用這些原則。

你要做的最好的事情就是從現(xiàn)在開始注意那些優(yōu)秀設計是如何對齊元素的，你將會開始看到這些模式。為了幫助理解，這里有一些設計系統(tǒng)概述了它們的網格使用：

Google’s Material Design System

Intuit’s Design System

IBM’s Carbon Design System

…And here’s huge list of other systems you can look through

在完全理解了網格的工作原理之后，我已經成為了一名更好的設計師，因為我知道我的設計將如何在臨界值之間進行轉換。我也可以落地我的設計，使它們能夠有一個完美的像素對齊。這樣的規(guī)范帶來了更一致，更簡潔的設計，當用戶從一個界面到另一個界面流轉時，這真的提升了產品的檔次。我建議在你的設計中去應用這些網格，并和開發(fā)一起，以相同的方式將它們落地，這將會是一個非常不錯的進步。

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

如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里

首頁重要性

首頁既是業(yè)務分流的中心場景，也是平臺賣家判斷平臺打法，買賣家感知平臺價值的重要「門面」。從 UED 專業(yè)視角來看，首頁是定義 APP 內體驗范式及視覺風格的核心場景。

如何改？

1. 盤點現(xiàn)象，定義問題

滿足業(yè)務新的訴求：平臺階段性戰(zhàn)略不同，1688 從曾經的信息平臺過渡到交易平臺，如今向數(shù)字營銷平臺轉型，舊的內容框架難以承載業(yè)務的新發(fā)展。

提升分流質量：從過去的數(shù)據(jù)效果來看，需重新判斷，在 For 特色采購需求和服務大面采購需求之前，如何平衡調優(yōu)，提升首頁的流量轉化效能。

體驗升級：移動端 APP 天然生長在手機系統(tǒng)上，系統(tǒng)的風格更迭也牽動著 APP 的變化和升級。在 8.0 升級前，1688APP 存在著 5.0、6.0、7.0 多個由不同設計師在不同時間點所設計的場景，到8.0，APP 趨待從框架層、表現(xiàn)層以及品牌等方面進行統(tǒng)一及升級。

改版策略

1. 聚焦用戶價值，基于業(yè)務打法升級內容框架

APP 升級前與業(yè)務對焦，我們收到三點訴求：

• 用算法的能力去承接首頁買家的轉化；
• 搜索是 B 類買家找品、選商的核心工具，需要引導更多用戶更高頻地使用搜索；
• 互聯(lián)網流量紅利到瓶頸期，需要進一步做好新用戶的承接。

在內容框架制定上，我們聚焦用戶價值，舍掉 7.0 時的內容版塊個性化，聚焦做商品的個性化，僅保留For大面用戶的營銷、內容場景，提升算法推薦區(qū)的曝光率，以此區(qū)域的商品做首頁的直接轉化。

2. 弱化容器，突出內容，塑造心智

視覺容器升級

做平視覺框架，選擇「大間距分隔」，為內容留出干凈、簡潔的視覺空間。

精簡內容柵格，避免形式給用戶閱讀帶來的負擔。

提高留白率，提升頁面整體的透氣性，為內容留出更清爽、輕松的閱讀空間。

拉大字體大小的梯度，加重字體顏色梯度，提升文字的清晰度和可讀性。

強調版塊特性，塑造買家心智感知，達成業(yè)務目標

強化搜索：7.0時，曾上線過將搜索做到「主觀上覺得顯眼」的測試方案，但相較于之前沉浸式搜索，數(shù)據(jù)幾乎沒變化。

8.0 階段，從視覺表現(xiàn)層跳出看：「強化搜索」并不意味把搜索設計得更「顯眼」，而是達成「讓更多用戶更高頻地使用搜索」這一目標。如提升搜索底紋詞、熱搜詞精準度和吸引力、增加搜索布點等，都可能助力達成業(yè)務目標。

基于用戶單手操作時，拇指在屏幕不同區(qū)域的點擊體驗，選擇將搜索組件移到更易于點擊、視線更聚焦的屏幕位置，上線后數(shù)據(jù)提升非常明顯。

Banner 升級：7.0 的 Banner 畫面豐富度高，加之描述字段多，用戶閱讀有一定成本，較難在 3 秒內掌握全 Banner 的信息。此外，相比于 C 類用戶，B 類用戶會更偏理性，我們選擇以更冷靜、克制的「視覺語氣」與 B 類商人對話，而非渲染氛圍引導點擊。（上線后，同樣的活動內容，按新、老兩版規(guī)范設計投放兩套 Banner，新版較老版 UV CTR 約高出 48%）

For 新人：以差異化的利益、個性化秒殺、新人攻略做用戶的承接。

營銷場景心智差異化表達：營銷由伙拼爆品、天天特賣兩部分組成，我們判斷爆品主打心智為「賣得火爆又便宜」，特賣主打心智是「限時限量搶便宜」，選擇將兩個區(qū)塊最關鍵的特質做強化表達。

內容場景（直播）動態(tài)化、互動感、實時性傳遞：抽象出直播間的方形版面+內容疊加形式來設計，大坑位以動圖傳遞給用戶直播的動態(tài)感，以紅包、個性化商品的多維實時輪播氣泡傳達直播的互動感、實時性。

3. 升級品牌，貫穿APP場景

為什么要做APP應用內的品牌設計？

品牌設計是將內容層（平臺價值）與接收層（用戶）做柔性鏈接的一環(huán)，譬如在 APP 場景中，由于有商品、商家、商機等「干貨」，即使不特意做品牌設計，用戶也能與平臺保持剛性、穩(wěn)定的連接。而反過來看，品牌做得很好，但平臺沒有「干貨」，用戶也不會單奔著品牌設計來平臺。我們認為，做 APP 應用內的品牌設計，核心價值在于助力用戶認知到平臺特性，感知平臺價值。從設計專業(yè)視角來看，APP 應用內的品牌設計，有利于定義并統(tǒng)一 APP 內體驗范式及視覺風格，保障用戶的體驗。

怎么做？

每位設計師所處的業(yè)務環(huán)境不一樣，解決問題策略和方式也千差萬別，在 APP 應用內的品牌設計中，個人選擇是通過厘清內容層（平臺）多層次訴求及 For 用戶的價值點，認知、感知接收層（用戶）特質及內容傾向，基于內容層底料+接收層用戶特質確定設計底層范式，塑造用戶感知。

1. 圖形范式

在阿里巴巴商業(yè)操作系統(tǒng)中，1688 聚焦做 B 類業(yè)務，直接服務對象是 B 類買賣家，業(yè)務細分出檔口尖貨、淘工廠、企業(yè)采購、淘貨源、微商代發(fā)、工業(yè)品超級店、跨境專供等，這些都是具有一定 B 類特質及體量感的場景，故在 APP 業(yè)務門洞及常規(guī)圖標的表達上，基于扁平 vs 寫實、輕盈 vs 厚重、活潑 vs 穩(wěn)重的維度，圖形選定輕擬物、弱對比的設計范式，塑造 B 類場景 For 買家的沉穩(wěn)、份量感。

此外，異常/空白場景也是平臺與用戶互動，塑造用戶感知品牌的機會。在空態(tài)情感化插圖部分的繪制上，力求塑形出有份量、易讀、有意味的場景以示對應空態(tài)，并佐以輕微動效，增強空態(tài)的互動感。（在收藏夾、我的供應商等工具型場景，基于空態(tài)信息的價值考慮，將空態(tài)與工具新手引導相結合，并未做常規(guī)的插圖。）

2. 色彩范式

標準色

隨著業(yè)務的發(fā)展，我們基于新的業(yè)務態(tài)勢，豐富了 1688 品牌色，以橙紅色作營銷、利益屬性的表達，以商務藍作服務、數(shù)字化屬性的表達，以金色作權益屬性的表達。

輔助色

在實際產品設計中，品牌色并不足以表達各類業(yè)務場景中的多層次的內容。因此，基于 VI 品牌色，裂變出不同重量、層次更豐富的品牌輔助色。

場景用色規(guī)則

基于買家角色及場景特征定義用色規(guī)則。

1688色域及選色示意

以 HSB 模式劃定出偏沉穩(wěn)的 1688 色域，在日常 banner 及業(yè)務場景中可靈活取用。

3. 動效范式及應用

動效是設計的重要手段，良好的動效表達能增強信息表達強度，清晰信息層級關系，提升用戶體驗的舒適度。做動效之前，將 APP 信息結構平整到三層，保障內容在頁面簡潔明暢地呈現(xiàn)。

在實際落地中，動效實現(xiàn)非常依賴技術資源，故動效設計之前，應考慮一個前提：動效設計增益內容表達，價值可論證，效果可衡量；同時，考慮接收層用戶的商人特質，我們期望動效表達給用戶以穩(wěn)定感，并且在設計表達上能兼顧效率。

在動效呈現(xiàn)部分，主要以緩入、緩出、緩動結合曲線來調節(jié)，總的來說，內容入場時節(jié)奏稍慢，速度緩，分層加載，交代清信息在 Z 軸上的層次關系，內容出場時節(jié)奏快，速度快，內容層級不用再做分層消失。

APP 內典型場景的動效案例及演示：

4. 業(yè)務品牌的價值傳遞

此外，除以上在圖形、色彩、動效等基礎維度收口外，我們也需要將業(yè)務品牌放聲給買賣家，以達成業(yè)務品牌的價值傳遞。在 1688 向數(shù)字營銷平臺轉型的階段，業(yè)務提出了「源頭廠貨通天下」的口號，我們通過設計手段，利用 APP 開機啟動頁及下拉刷新的空間，將「貨通天下」的概念強化表達。

結語

以上便是此次首頁改版階段性的記錄。在 8.0 的視覺體系里，為更好地突出內容，視覺容器選擇盡可能做輕、做平，以冷靜、克制的「視覺語氣」與 B 類商人對話。當然，這是設計師和業(yè)務同學階段性的選擇。后續(xù)品牌的完善及產品的優(yōu)化，仍需結合數(shù)據(jù)持續(xù)打磨。

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

如果您想訂閱本博客內容，每天自動發(fā)到

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

如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里

https://v.qq.com/x/page/l087071z1ua.html

01 概述 | Overview

QQ 20周年，是互聯(lián)網產品長青的一個傳說，也是家喻戶曉企鵝IP形象的成長，同時也代表了鵝廠精神的堅韌與奮進。即便已經陪伴大家20周年，但我們依舊懷揣初心，保持科技改變生活的熱衷。應運而生我們設計了太空企鵝探索科技作為本次20周年的品牌理念，來寓意新的里程碑到來。就像宇航員勇于探索未知宇宙知識一樣，QQ帶著初心不斷保持變革與成長，為用戶提供更具科技力與創(chuàng)新的服務！也寓意鵝廠不斷探索未來與科技向善的愿景！

02 logo設計?Logo Design

我們在設計的第一階段，logo設計，就是圍繞“有趣和科技”來展開發(fā)散設計。我們決定從數(shù)字“20”開始入手，把QQ和20不斷結合，同時融入宇宙太空元素，寓意QQ不斷的對外探索，從多個維度來看世界，尋找有趣的內容。我們?yōu)榱速N合“宇宙探索”這風格，為這次展覽設計了專屬徽章，徽章設計沿用了太空的概念，結合星球，星空，宇航員等科幻元素。簡約的幾何形狀和大膽的配色貼合“QQ更好玩”的年輕潮流氣息。

03 概念設計?Concept & Design

1. Space QQ

太空QQ的太空服設計指的是科幻電影如《星際穿越》和《火星救援》中的太空服，我們也將的時尚潮流，2018年以來運動鞋領域最為明顯的趨勢，將 ugly & oversize 的潮流風格注入到運動鞋的設計當中。這種將時尚潮流與太空服相結合的新型運動鞋,使整體設計看起來時尚而風趣。如果沒有它，太空服可能只是一個淺顯的概念。

太空QQ創(chuàng)意草圖

運動鞋設計草圖

3D原型

2. QQ X PUPU

本次設定，由兩只企鵝背靠背組成，20周歲的QQ與1周歲的PUPU，鵝廠擁有著各種企鵝IP形象，除了經典的企鵝QQ，還有各種其他特色企鵝，包括PUPU，BabyQ等等，同時PUPU來自外太空也是企鵝FM產品的主形象，經典企鵝QQ攜帶了新生代PUPU共同探索科技太空，寓意企鵝在不斷創(chuàng)新與擁抱新生代相互合力，為年輕用戶提供更具科技力與社交娛樂化的服務。

04 最終設計?Final Design

05 8米QQ模型制作?8m QQ Model 

對于實際生產出這個巨型模型是個大挑戰(zhàn)，我們先利用電腦三維模型生產出8米高的泡沫模型，反復檢查生產的泡沫模型是否和設計模型一致，不斷的打磨調整，待到確定泡沫模后開始翻模工作。

先給泡沫模噴上泥巴水，便于脫模，之后噴上石膏水，并加入麻絲增加石膏的牢固性，待石膏模晾干，把石膏里的泡沫模掏出后開始往里面涂一層泥巴水（便于后面玻璃鋼脫模），然后涂上樹脂和纖維布/氈，干了之后砸爛石膏模，里面的玻璃鋼模型就出來了。

玻璃鋼定型之后給內部焊接鋼鐵骨架，作為加固作用。剛脫模的玻璃鋼是非常粗糙的，于是對玻璃鋼的外觀進行打磨，使得表面光滑和調整細節(jié)，打磨完成后開始批灰和上底色，前后三次，為的是填補空隙瑕疵使模型更逼真完整。接著我們便調模型身上的顏色，在不斷嘗試中調出最接近效果圖的顏色，開始逐步上色。

上色完成后再噴保護漆防止褪色，待模型的漆干后清洗整個模型，為貼上專屬貼紙做準備，接著確定貼紙位置并逐一貼上。最后開始搭建安裝，因為在搭建過程中模型會有磨損，搭建完后再做最后的修補工作，最后巨型QQ模型完美地呈現(xiàn)出來。

06 貼紙設計?Sticker Design

配合QQ20周年慶，我們要給8m的巨型QQ模型搭配上了貼紙設計，以slogan “QQ更好玩” 為設計的出發(fā)點，希望把有趣好玩的態(tài)度注入各個品牌中，為品牌logo嚴肅的視覺帶來玩味感和潮流感。同時配合巨型QQ宇航員的造型，我們在設計貼紙時參考了航天飛機，科幻機器等機械圖案元素，每個品牌的設計方案除了有趣值得玩味外，同時需要貼合宇宙科技探險的風格。

我們針對這個大方向再進行了幾輪細化，選出能代表各個品牌的最終的設計方案，并把貼紙模擬在太空QQ模型上反復測試貼紙最適合的位置，讓貼紙和模型的整體風格可以完美契合。通過各個品牌的logo再設計貼紙和太空QQ的碰撞，把品牌推廣做到最大化。

07 搪膠玩具設計?Figure Design

作為QQ20周年慶的驚喜，我們制作了與巨型太空QQ同款的迷你搪膠玩具，在這次玩具設計上我們加入了小機關，在玩具內部放置了小磁鐵，使得QQ和PUPU可以方便拆卸組合。

同時為其設計了專屬包裝盒，包裝設計從“太空宇宙”的角度出發(fā)，以黑色為主基調，圖案印花設計選用了太空QQ來進行設計，把太空QQ模型線體化，配合QQ20周年logo進行設計，利用燙金工藝與醒目的圖形搭配，更有效的展現(xiàn)了QQ年輕化的品牌特點。同時為了減少后期生產制作之間的溝通誤會，我們同期將幾個較重要的角度的包裝3D效果圖快速渲染出來，有著非常直觀的參考對照作用。

08 品牌物料設計?Product Design

1. 海報設計

設計QQ20周年展的宣傳物料，我們采用了最能代表這次展覽的太空QQIP為主體，作為本次展覽的專屬元素，太空QQ貼近科技，同時又具有趣味性和潮流感。我們結合了太空探索的特性，提煉出宇宙元素作為宣傳的內容，讓海報設計具有更多內容可看性和觀賞性。

2. T恤設計

配合QQ20周年展，結合宇宙太空元素，并從QQ20周年logo圖形中延展設計出各類代表圖形，正面簡潔直接地顯示出本次主題，把醒目的圖形放置于T恤背后，利用坐標軸和經緯度的信息圖案配合各個抽象化的宇宙元素，增加T恤設計的科技感，更明確地展現(xiàn)了科技向善的愿景。

09 QQ20周年展覽?Exhibition Design

QQ聯(lián)合深圳福田星河COCO Park 舉辦了“QQ20周年主題展覽”，展館外形模擬宇宙太空站，以太空白灰色為主調，搭配簡潔的立方體造型，白色燈條勾勒大門，并以QQ20周年專屬徽章做門面，科技未來感撲面而來，就如大型QQ太空站坐落于地球。

展館大門旁的墻上安置了頗具科幻氣息的全息投影裝置，上面展示著QQ在不同時期的形象以及20年關鍵大事記。代表著不同時期的QQ形象用全息投影的方式展現(xiàn)出來，從最開始的胖QQ到現(xiàn)在的新版QQ，讓你一眼了解QQ演變史。中間放著QQ歷屆各個跨界Figure展示，總有一款捕獲你的心！

同時本次展覽還和% Arabica咖啡跨界合作，% Arabica咖啡展臺設計簡潔透氣與QQ20周年展覽風格完美融合。一邊喝美味咖啡，一邊暢游展館，兩全其美。

藍色發(fā)光的隧道科幻神秘，一進去馬上感受到了超強的氛圍感，仿佛時光碎片擦肩而過。用QQ掃描墻上的二維碼，立刻生成你的專屬時光隧道“QQ個人軌跡”，各種瞬間涌上心頭。

聯(lián)合天天P圖，用13個LED屏組成了“復古頭像畫廊”。走進互動裝置小屋里，往鏡頭前一站，稍作等待后，以你的形象即時合成的13個復古頭像就會出現(xiàn)在面前的13塊屏幕上，體驗即時“變臉”效果。讓自己的頭像和曾經用過的QQ經典頭像合二為一，形成專屬的復刻版頭像海報。

結語

QQ20周年展不僅包含了展館設計，還包含了市場營銷，運營活動，周邊商品等多個設計環(huán)節(jié)，環(huán)環(huán)相扣，缺一不可，一起構建了整個QQ20周年展的設計體系；展覽設計了太空企鵝攜帶著新生代PUPU共同探索科技，寓意鵝廠不斷創(chuàng)新探索與科技向善的愿景，為年輕用戶提供更具科技力與社交娛樂化的服務，在打造“QQ更好玩”的路上奮力前行。

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

如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里

現(xiàn)在我有如下需求，子組件 <user /> 中此時有一條用戶的信息（userInfo）；我要在父組件通過插槽展示這個用戶的姓名（userInfo.name）；

注意：這里的父組件并沒有這個用戶的信息，子組件中有，如果直接在父組件{{userInfo.name}} 獲取這條信息是獲取不到的；因為，只有 <user /> 組件可以訪問到 userInfo，而我們提供的內容是在父組件渲染的；
模板在哪寫，就是用哪里的變量，跟插槽用在哪無關
模板是在父組件中寫好，被編譯過后，傳到子組件的插槽中的

為了讓父組件的插槽內容可以讀取到子組件的數(shù)據(jù)，我們可以將userInfo 作為一個 <slot> 元素的特性綁定上去；

// 子組件
const card = {
    data() {
        return {
            userInfo: {name: '宮鑫'}
        }
    },
    template: `
    <div class='card'>
        <!-- 在插槽上綁定子組件的數(shù)據(jù) -->
        <slot :userInfo="userInfo"/>
    </div>
    `
};

綁定在 元素上的特性被稱為插槽 prop?，F(xiàn)在在父級作用域中，我們可以給v-slot帶一個值來定義我們提供的插槽 prop 的名字：

// 父組件
template: `
<div>
    <card>
        <template v-slot:default="userInfo">
            用戶姓名： {{userInfo}}
        </template>
    </card>
</div>
`

// 輸出：
// 用戶姓名： { "userInfo": { "name": "宮鑫" } }

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

如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里

其實幾年以前我就寫過一篇關于配色的文章，早期的面粉估計還有印象，在那篇文章里我基本已經把設計師需要用的關于色彩構成的主要精華內容都匯總出來了（文末會附上文章鏈接的，別著急）。

但是因為不同設計行業(yè)的工作內容是有差別的，而且每個人的基礎和理解能力也不一樣，所以僅憑一篇文章是無法解決所有人的難題的，所以今天這篇文章算是關于那篇配色知識講解文章的補充篇。

不過在講解如何配色之前，我們還是先應該先記住一些關于色彩的理論知識，因為有了理論依據(jù)我們才能在做設計的時候有理有據(jù)，而不是胡亂配色和瞎試浪費時間。

所以這篇文章主要分為了以下幾個部分：

• 普遍意義上的色彩是指什么？
• 設計流程和配色思路分享
• 我的其他配色法寶
• 總結

普遍意義上的色彩是指什么？

簡單點來說，色彩即顏色，顏色可以分成有彩色和無彩色兩大類，看有彩色主要看色相／純度／明度三個方面的屬性，無彩色也就是白色／黑色／各種深淺不同的灰色，也可以說無彩色是飽和度為零的色彩。

色相，即可以明確表示顏色色別的名稱，比如紅橙黃綠藍靛紫：

色彩有冷暖之分，我大致用溫度的概念標注一下，其中「0」是指中性色，「－0」是指中性偏冷，「＋0」是指中性偏暖（當然，這里的溫度是我自己為了具體化冷暖的概念而標記的，主要是方便大家理解，所以不用去糾結這個數(shù)值準不準確哈哈，你明白他們代表很冷／很熱／一般冷／一般熱就好了！～）

明度，就是指色彩的明亮程度（通俗點講，在某種色彩里添加的白色越多就越明亮，添加的黑色越多就越暗）。

純度（飽和度），就是指色彩的純凈度，我以紅色舉例，如下圖所示：

如果大家想看更加詳細的關于色彩構成原理的解說，可以看這個系列：《優(yōu)設獨家配色專題》

設計流程和配色思路分享

不管我們做什么方面的設計，設計練習也好，實際項目也好，在設計之前，我們最好是能先明確我們的設計目的是什么，然后確定一個主題，依據(jù)這個設計目的和主題，去構思創(chuàng)意，有了創(chuàng)意后再去去探討具體的落地執(zhí)行，其中包含了字體（標題文案）的設計排版配色、畫面整體的構圖和配色、細節(jié)優(yōu)化、氛圍渲染等等；

當然，這一次關于其他方面的內容我只會附帶著講一點，因為我們今天的主要內容是講配色。

以我最近做的一張照片海報設計為例：

下面是我前幾天用手機拍的一張照片，照片里的內容是我的手拿著一朵花。

1. 設計之前先確定主題

比如這一次我是確定了設計主題為：浪漫。

因為我看了下這張照片里面花是粉色的，我的手指甲油也是粉色系的，而我也是一個（年紀越大就越）喜歡粉色的女人～同時因為我喜歡嘗試各種不同的風格主題，浪漫這個主題我之前是沒有做過的，所以要不這一次就浪漫一回好咯。

那么說到浪漫，大家腦海里的第一反應會是什么呢？我不知道大家會想到什么，反正我會想到很多場景畫面，比如2002年的韓劇《冬季戀歌》里，男女主角在雪地里相擁的畫面，天上飄著雪花，同時背景音樂響起了《My memory》；

△ 《冬季戀歌》因為是2002年的韓劇，所以現(xiàn)在看海報是有點過時了，但劇是好劇的

再比如2017年的電影《愛樂之城》里，男女主角在繁星點點的絕妙夜空下翩翩起舞和擁吻的場景，同時背景音樂響起了《City Of Stars》；

△ 電影《愛樂之城》海報

再比如1995年上映的宮崎駿動漫《側耳傾聽》的結尾情節(jié)，時隔2個月才見面的男女主角一早就偷跑到一個可以俯瞰城市和日出的角落互相表白，微風輕拂著女主的短發(fā)，一棟棟高樓彌漫在朦朧的霧氣當中，日出的余輝映射在波瀾的水面，同時背景音樂響起了《Take Me Home, Country Roads》；

△ 宮崎駿動漫《側耳傾聽》劇照

等等等，還有很多浪漫有關的畫面我就不多說啦。

總之，浪漫是有很多種表現(xiàn)形式和配色的，但是有一點是有共通性的，那就是要想打造出浪漫的感覺，背景音樂、色彩搭配和氛圍渲染很重要。

比如除去聽覺上的背景音樂渲染氛圍以外，視覺上還有《冬季戀歌》里的白雪凱凱和雪花飄、《愛樂之城》的藍紫色夜空和繁星點點、《側耳傾聽》里的暖黃色日出和微風波瀾。

那么回到我自己拍的這張照片上面，這種大面積的灰白色背景只能讓人感覺很性冷淡，一點都不浪漫，所以這張照片我肯定是要摳圖才可以用的；從我自己的年齡、喜好、原照片內容限定等角度，可能走《愛樂之城》那種類型的浪漫色彩可能就更適合一點：用暗色調的紫色搭配我原本圖片就有的粉色系。

ok，分析到這里先打住，我們先不要繼續(xù)著急去細化到底該怎么去配色了這時候我們只需要有一個大概的色彩感覺就好了，因為配色之前，我們還有很重要的一步沒有做，那就是構圖。

2. 配色之前先構圖

很多人之所以總是說自己不會配色或不管怎么配色都感覺不對勁，其實是因為，搭配顏色這個動作不能為時太早了，你得先把你整個畫面的構圖和基本框架先敲定了再去考慮配色。

先構圖再配色，先構圖再配色，先構圖再配色，重要的事情說三遍！～

因為構圖相當于化妝的時候先打好底子，底子不打好，你再怎么化妝都是徒勞的。同理，如果你的構圖很亂或者基本型都沒出來，你就去考慮配色，很有可能就是你磨半天都設計不出一個滿意的結果，這就是很多人磨蹭半天，做出來的設計依舊不好看的很重要的一個原因。

因為你的設計步驟錯了。

比如我今天要拿這朵花做一幅海報，我先不考慮配色和氛圍渲染的事情，我就這樣光溜溜的排個版出來再說，這里的排版方式和字體選擇主要考慮樂個方面，一個是照片原本的條件限制，一個是圍繞著浪漫這個主題去做，最終排版如下圖所示：

一個淺色一個深色，大家可以對比看看效果。

這幅海報就這樣隨便看看其實也是可以看的，只是缺少細節(jié)和情感，也沒有特別的吸引力罷了，最重要的是不夠浪漫。

那么到這一步，我們就可以繼續(xù)細化配色方案，分配色彩比例，優(yōu)化細節(jié)，增加最重要的一些氛圍渲染步驟了。

所以我繼續(xù)優(yōu)化海報，最終得到了下面這幅海報：

這張海報的背景是我用ps自帶的筆刷刷出來的，順著一個方向刷出一種墜感，這就是起到一種氛圍渲染的作用。

然后，雖然粉色和紫色也算是同色系的顏色了，但是因為明亮的粉色與暗色調紫色在明度上有很大的落差，所以等他們組合在一起就會有一種碰撞的感覺，給人的視覺記憶力就會強一點，暗色也給人跟多神秘的感覺，讓人琢磨不透。

畢竟，讓人琢磨不透的人比一眼就能看穿的人給人更多聯(lián)想和猜測，有插曲有意外的浪漫愛情給人的印象才會比較深刻一點，對吧～

同時，為了方便大家理解，我又做了以下幾個版本，大家可以對比看看色彩的差異給人感覺上的變化。

比如，如果我改變畫面的明度，提高畫面的明度，如下圖所示：

這樣看，是不是畫面給人的感覺要少女很多？而且給人一種很溫柔的感覺，但是盯久了會覺得甜膩膩的。

如果前面第一版暗色調的是為20-40歲左右的女人而設計的浪漫，那么上面這一版則像是為20歲左右的小姑娘而設計的浪漫。

在這個基礎上，如果我既改變明度，也改變配色，給畫面加入非同色系的顏色，如下圖所示：

這樣看，其實感覺也很美對不對？美歸美，但是卻感覺比上面那一版還要膩，因為像是為兒童或小蘿莉小公主而設計的浪漫了，適用的心理年齡段更小了。

ok，我們接著往下看。

如果我將背景隨便換什么顏色，但是保持背景顏色是同色系不同明度的，畫面里有明也有暗，如下圖所示：

最后出來的感覺其實也是可以的，也很美，但就是少了一些抓眼球的感覺，覺得中規(guī)中矩的，沒什么特別之處，就好比那種平平淡淡的感情，缺少激情的感情。

但是這種同色系的做法，卻是平臺和品牌為了統(tǒng)一形象方便視覺規(guī)范化管理最喜歡使用的一種配色方式，對此，大家可以去留意一下天貓或京東的一些頻道頁面或者大型活動各個分會場的頁面配色。

ok，前面的配色技巧大家估計發(fā)現(xiàn)了，我要么是用同色系配色，要么是同色系改變明度和純度，要么是用不同色系不同純度但是保持明度一致，所以以這種方式去配色，無論你怎么配其實最后出來的感覺都是不會太差的，只是針對的受眾不同罷了，可以各取所需。

所以如果你不會配色的話，那么就在這些基本的框架規(guī)則里去變化就好了。這是非常保險的一種配色方法。

但是如果你不遵守這種規(guī)則，而是胡亂瞎配色，則很有可能會出現(xiàn)下面這種情況，要么是畫面顯得臟，要么是畫面顯得艷俗、花哨和亂，如下圖這些錯誤示范所示：

上面這幾幅圖雖然是一些錯誤的配色示范，但是很多對色彩不敏感的孩子可能也會覺得：「誒，其實也還行啊」，其實主要是因為有構圖的基礎在那里硬撐著，底子在那里，所以色彩即使配的不夠好糊弄一下也還行。

拿化妝舉個例子，為什么那些本身樣貌底子就好的人，即使亂穿衣或亂化妝你也覺得看起來還行，一旦她好好的打扮畫個妝，那簡直就是神仙顏值了，可底子不好的人呢？可能你就算再會穿衣打扮，你也只能變成看起來還行，到達不了神仙顏值的地步。

所以我再強調一遍，配色之前先構好圖，把底子打好，這很重要。

總結起來就是，做設計之前先確定主題，然后搭框架搞定排版樣式，接下來再考慮配色，再然后氛圍渲染，最后一步優(yōu)化細節(jié)，over。

我的其他配色法寶

下面這些知識點都是我平時總結出來的一些配色小心得，是我屢試不爽的一些方法，分享給大家。

總結來說，我的配色技巧主要有以下幾種：聯(lián)想法、提取法、目的導向法則。

1. 聯(lián)想法

所謂聯(lián)想法就是，類似于頭腦風暴那樣，當拿到設計需求或確定設計主題后，我會提取一些關鍵詞，根據(jù)關鍵詞去聯(lián)想很多相關的可能，然后再去篩選一些結果為我所用。

比如下面這張照片，原本照片的顏色是很簡單單一的。

但因為我給他確定的主題是「野花的回憶」，所以我就會去聯(lián)想：「野花都是什么樣的顏色？」「回憶又是什么樣的色調比較合適？」，后來我就確定了野花主要以比較艷麗的色彩居多，比如玫紅色、亮黃色、白色等等，至于回憶嘛，可能就是有年代感了，所以大的基調是暗色調的。

于是下面這幅海報的色彩搭配就出來了。

其他用聯(lián)想法配色的還有很多，比如下面這一組。

原照片：

做成海報后：

不過這里需要說明的是，聯(lián)想法要求你會聯(lián)想，所以大家平時最好是多留意身邊的事物，多觀察大自然什么的，還有適當去了解一下色彩心理學，你會明白每一種色彩都是可以代表不同的感情和事物的。

通過長時間的鍛煉自己對于色彩的敏銳度，可以幫助你快速的配出自己想要的色彩。

2. 提取法

所謂提取法，就是當我們拿到某一個產品或模特需要圍繞著它們做設計，我們就可以直接從它們身上吸取顏色，作為主色或點綴色都可以，這樣搭配顏色的好處就是：省時省事不容易出錯，而且還有呼應主題和畫龍點睛的效果。

比如下面這張照片，原本照片的顏色就是綠色和淡粉紫色。

那我最后做出來的海報配色也是這些顏色咯，只是文字部分單獨用了白色而已。

哦對了，一般白色和黑色這兩種無彩色都是最適合用來作為標題或文字內容部分的顏色的，也是最不容易出錯的，同時聯(lián)想法和提取法其實是可以互相搭配使用的，不沖突。

但是，有時候我們如果希望畫面可以更活潑一點，一般做那種比較卡哇伊風向的設計，標題也會用彩色，而不是黑白無彩色，至于標題用什么彩色，也是可以用聯(lián)想法和提取法啦，如下圖所示：

3. 目的導向法則

前面的聯(lián)想法和提取法的配色方法是教大家如何選取顏色，但具體到哪里該用什么顏色，該用什么明度什么色相的顏色，則就取決于你的設計目的是什么了，所以我將它稱之為目的導向法則。

比如，之前我給大家提到過，有的設計是走藝術路線（以傳遞情緒為主，重在情緒上的表達），而不是常人理解的一般的商業(yè)設計路線（以傳遞信息為主，重在信息產傳達準確），前者適用于一切與藝術有關的設計或設計師個人的自由創(chuàng)作，后者適用于所有以賣貨為目的的商業(yè)活動設計。

這2種類型的設計目的是不一樣的，面向的受眾群體也不一樣，所以在色彩選擇上就會有差異。

舉個例子，當我們提到某某平臺又做活動了打折了，他還做了一個賣場促銷頁面，你去看看，絕對基本是以紅色、橙色等暖色系為主色，并且頁面氛圍做的非常熱鬧，就跟你去逛商場，映入眼簾的就是各種sale、大減價標牌，并且還有人拿著喇叭大喊：「進來看看進來瞧瞧??！最后一天大減價買了不吃虧買了不上當?。　沟募匆暩?。

并且，頁面里一些特別希望消費者能注意到的信息，它一定會突出處理，不僅字號要夠大，而且在色彩上也會突出。

拿我的書《這么設計能熱賣》作為產品圖做個示范，我做了一個促銷海報，如下圖所示：

但是，如果你去看一些比較性冷淡或大牌畫風的店鋪或官網看看，它完全就是一副我根本就不care你買不買的調調，倒不是因為他不想做生意，而是他的調性就那樣，比較自我或端著。

好比人家的定位就是孤傲的，或則是你高攀不起的大小姐和公子哥類的，買ta東西的人本來也就是這種類型的，或者希望別人覺得自己就是這種類型的，畢竟要彰顯自己的身價和品味，不能掉價撒。

所以，你看ta基本不會給你看大大的字號，也不會用一些很花里胡哨的顏色在標題上，而是以黑白灰這些無彩色居多，更不會特地用一些突出的顏色去醒目的區(qū)分一些字眼，總之頁面看起來不會有太濃的促銷氛圍

雖然我的書籍封面設計本身其實就不是性冷淡和大牌的風格，但我依舊做個示范給大家看看，如下圖所示：

而介于這之間的，也就是那些時尚類型的，或時尚里帶點促銷的，或放得下身段走點接地氣路線的牌子，則是會在保持好看時尚的基礎上，依舊會適當?shù)挠么簏c的字號或顯眼的顏色去突出一些重要的信息，但色彩不會用的太花哨，如下圖所示：

而像上面這種比大牌感親切一點又比大賣場時尚一點這種介于之間的情況則是絕大多數(shù)的，畢竟小眾的是少數(shù)，成為大牌是少數(shù)，雖然現(xiàn)在是大賣場但是不想走大牌路線路線的是少數(shù)，不想賺錢的商家也幾乎沒有，于是最終都淪為了不高不低的大多數(shù)。

總結來說，目的導向法則可以分為2種情況：

如果你想低調一點內斂一點，你在配色上就保守一點，盡量少一點顏色比如三種顏色以內，或者是用同色系或柔和點的顏色等。

就像一個性格很溫和或者很內向的人一樣，沒有攻擊性，安安靜靜的。

拿我之前做的一幅照片海報為例。

原先我是考慮讓這幅海報看起來有視覺沖擊力一點，但是我又不想畫面太過于張揚，畢竟我那天穿的衣身衣服色彩是比較柔和的橘粉色，所以我用了對比色而沒有用同色系，同時控制畫面里的顏色不超過3種，并且這幅海報里色彩之間的明度是差不多的，如下圖所示：

但如果我用同色系不同明度和純度來配色，出來的感覺就是下面這樣的，你會感覺畫面更淑女安靜一點，沒有什么攻擊性：

可是如果你想更加高調張揚一點，那么你在配色上就可以多用一些顏色，比如三種以上顏色，或則是用對比色或互補色而不是同色系配色，或則是純度高一點明度高一點的顏色，然后不同明度純度的顏色互相碰撞。

就像一個脾氣火爆性格張揚的人，他們不愿意淹沒在人群里，而是要做人群中最醒目的那一個。

我還是那上面那張海報改個顏色給大家看看，結果如下圖所示：

如果我想繼續(xù)突出大標題文案，那么我還可以將標題的無彩色白色換成亮黃色，畫面里的顏色更多了，沖擊更大了，甚至你會覺得有點花哨：

ok，上面這幾張圖，大家對比一下就會知道這其中的差異了。

所以記住啊，配色不是亂來的，它一定是有章可循的，也是要依據(jù)你的目的來配的。

當然，可能有人會說：「有時客戶給的主題實在是太晦澀難懂了，我實在是聯(lián)想不出來啊」，或者給到你的產品本身的配色就丑的不行了，如果你直接吸取顏色那做出來的設計肯定也是丑爆了，那么，這時候就要看你是不是有一顆靈活的腦袋能夠隨機應變咯！～

如果聯(lián)想不出來說明你百度總可以吧，然后自己要多看多積累你的腦袋里才有貨的。

如果原產品本身配色就丑那你就分析它丑在哪里加以改進不就行了嘛？比如它是因為純度太高了很艷俗，那么用低一些純度的同色系是不是就可以了？比如如果它是因為本身的色彩太多了很花哨，那么我們只選取一兩種顏色用用是不是就可以了？

再比如還有人說，給我的產品根本就沒有顏色，純白、純黑、純灰色，那我該怎么吸顏色啊？

天哪！～這種類型最好搞定了，因為無彩色就是萬能色，無彩色無論是搭配無彩色或者其他任意有彩色都可以的，這就又回到我前面提到的目的法則了，不懂的可以回頭再仔細看看～

寫在最后

平時也經常會有人問我到底該看什么書來提高配色能力，其實我想說只要你掌握了我前面提到的基本的色彩構成原理這些基礎知識，剩下的其實都不需要你繼續(xù)去看其他的色彩書籍了。

因為看其他書籍無非就是要擴充你的知識面罷了，它只是其中一種增加知識儲備的途徑而已，但現(xiàn)實是很多人寫的書一看就讓人犯困，而且晦澀難懂，你買了也是浪費錢，倒不如通過看設計網站、看時尚雜志、看電影、多觀察大自然等有意思的途徑去培養(yǎng)自己對于色彩的敏銳度，然后看看我的干貨文章勤加練習，多實踐多思考來的有用。

尤其是大自然的色彩，那真的是一個超級大的配色寶藏啊，你隨便看看那些花花草草、藍天白云、日出日落、海底和大地，哪個配色不是美的讓人驚嘆？就連那些惡心的毛毛蟲都有一身好看的不行的顏色。

我們做的很多設計，不管是什么行業(yè)的設計有關顏色的，電影也好，三維也好，平面的也好，其實基本都是來源于大自然的。

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

如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里

信息時代，每個人都需要具備基本的「搜索」技能，尤其是設計師，你有沒有靈感枯竭不知所措的時候呢？今天我們召集了7位優(yōu)秀設計師，對他們的設計靈感來源進行揭秘，希望這一期的輕訪談能夠讓你輕松Get設計大佬的搜索技巧！

優(yōu)設輕訪談第八期，我們的話題是——不信息時代，能與我們分享一下你的搜索技巧么？平時的素材積累是如何進行的？

Dribbble 人氣最高：Mike

Dribbble：https://dribbble.com/creativemints

實際上，現(xiàn)在尋找靈感或資源變得非常容易。去Pinterest，你會獲取到任何你能想到的靈感！查看stock網站，獲取所有你需要的資源！

△ AGE / Online courses

盡管如此，我仍然建議從外部世界獲得靈感——請幾天假，去一個新的城鎮(zhèn)或國家旅行，逛逛博物館，你會發(fā)現(xiàn)真實生活會成為你最重要的靈感來源。

產品視覺設計總監(jiān)：Gleb Kuznetsov?

Dribbble: https://dribbble.com/glebich

是的，你是對的，搜索技巧對產品設計師來說是必不可少的。我在一家公司做了很長時間的分析師和研究部門工作，在那里我負責用戶體驗，這些經歷幫助我理解如何搜索有意義的數(shù)據(jù)和信息，并使用它來定義一個產品的關鍵指標。

但是搜索不僅僅是關于用戶分析和信息，也是關于設計語言——理解什么是可能的。最好的設計只有當你跨越了可能和不可能之間的界限時才會出現(xiàn)。這種平衡基本上是一種新的設計語言或產品的品牌。

我使用Pinterest進行圖像搜索。這個網站幫助我創(chuàng)建情緒板，并找到一些更具體更具象的東西，Dribbble的作品幫助我研究UI布局。然而，我不會使用Dribbble來作為我的色彩搭配靈感庫。

對于顏色，我使用自己的靈感素材庫，在我的職業(yè)生涯中，我花了大量的時間從互聯(lián)網上搜集素材，并進行創(chuàng)作和整理。我也有自己的平面設計素材庫，我創(chuàng)建并管理這些素材庫大約有10年了。我?guī)缀趺刻於荚诓蹲降脑O計靈感素材。問題不僅在于你如何搜索，還在于你如何將這個搜索結果應用到你的工作中。

△ Water waves simulation for 3d icon

那如何應用呢？例如，當我看到好的設計時，我將視覺圖像結構分離開來——有時我在情緒板中添加新圖像僅僅是因為我喜歡形狀，有時是因為我喜歡顏色，有時是因為圖形效果等。在將該引用添加到庫之前，設計人員需要了解在何處可以使用以及如何使用。對于設計師來說，搜索絕對是一項必不可少的技能，我通過創(chuàng)建情緒板促進了我的搜索。

頂尖設計團隊：Ramotion

• 官網： https://www.ramotion.com
• Instagram: http://instagram.com/ramotion
• Dribbble: https://dribbble.com/Ramotion
• Behance: http://behance.net/ramotion

我們相信靈感無處不在，當然也會取決于我們進行的項目類型。

我們在互聯(lián)網上會搜索很多，比如Behance和Dribbble。然而，我們周圍也有很多靈感。

△ Cellebrite Pictograms

例如，如果進行的是一個品牌項目，那么我們周圍的自然環(huán)境就是我們獲得靈感之所在。顏色、動效、形狀和所有這些的組合使一切都在一個愉快的和諧場景中工作，這就是我們努力傳遞的。

對于UI/UX項目、網站和App設計，我們也是這樣做的，但我們主要目的是理解用戶的最終目標和每個行動背后的動機。我們不僅在數(shù)字世界中研究類似的解決方案，在現(xiàn)實世界中也會尋找類似的解決方案。

頂尖設計團隊 FΛNTΛSY 總監(jiān)：Minh-Pham-?

Dribbble：https://dribbble.com/phamduyminh

我不在本地存儲靈感資源，因為想要方便瀏覽必須對其進行分類，而這對于本地存儲來說比較困難，所以我非常依賴于在線資源，它們有很好的搜索引擎，所以，為什么不呢？

基于不同的目的，我更喜歡從多種來源獲得靈感:

• Dribbble：是最好的互動、動效和插畫資源網站。它是快速獲得靈感的好地方，尤其是針對大項目中的某一個小部分。
• Behance：主要是為項目展示,所以如果你想要找一個地方尋找大的概念、設計系統(tǒng)、演示，那這絕對是最理想的。
• Pinterest：是一個豐富得多的資源，在這里你可以從中找到任何靈感。因此，當我需要尋找高層次的概時我會來這兒念（例如情緒板）。關于Pinterest，我最喜歡的是它能夠顯示我正在尋找的相關圖片。它真的幫助我驅動我的思維，形成概念，事半功倍。

服務設計機構：Zajno Crew

• Dribbble: https://dribbble.com/zajno
• 官網： https://zajno.com
• Medium: https://medium.com/zajnocrew
• 靈感郵件訂閱：https://upscri.be/2b7209/

說到尋找靈感，我認為有兩種人：使用Dribbble的人和使用Behance的人。Dribbble更像快餐，在這里你可以迅速的飽腹，Behance更像一家高檔餐廳，你可以在那里度過整個晚上。

我個人喜歡吃快餐。我喜歡每天早上上班前查看Dribbble，當我發(fā)現(xiàn)好東西的時候，我就把它存起來以后用。

△ Promo Website Animation for Pocket Multilingual Assistant

如果你正在尋找真正的案例，而不僅僅是概念稿，你可以在Awwwards上找到一些主流的東西，也可以在這里找到一些更奇怪的東西。

哦，還有Pinterest，它的優(yōu)勢是推薦你可能喜歡的東西。我經常用它來做情緒板和尋找參考素材。

如果是插畫資料，沒有比Dribbble和Behance更好的地方了。只要滾動鼠標，所有的好東西和你喜歡的藝術家都會一步添加到你喜歡的作品中，簡單!

△ Tempers Flare

Pinterest有利于發(fā)現(xiàn)新的想法、主題、不尋常的元素和靈感。每天瀏覽這些平臺也會讓你培養(yǎng)出一雙訓練有素的眼睛，這對提高你自己作品的質量和風格至關重要?！?

Dribbble 人氣插畫師：Febin Raj

Dribbble: https://dribbble.com/febinraj

我每天都想更新！我認為這是件大事。因為這個世界瞬息萬變。

△ Evening From Kerala

通常，我的主要搜索源是Behance和Dribbble，同時我從其他來源獲取了更多的數(shù)據(jù)，比如文章，博客。

Behance 人氣設計師：李宜軒

Behance: www.behance.net/yihsuanli

信息時代，每個人都必備一個「搜索」技能，尤其是設計師，很多人在接單后,可能會第一時間在網絡中或者日常的資料擴中搜索素材、參考、靈感等。

我還記得剛開始接觸設計時因為沒有太多經驗，常常因為資料整理太久，壓縮了執(zhí)行時間，最后反而虎頭蛇尾的完成作品。雖然創(chuàng)作作品時資料搜集、調查很重要，但其實整體過程有更有效率的方法。其實收集資料也是需要練習的，通過經驗累積，可以漸漸增加效率與快速找到最精準的訊息，避免漫無目的搜尋。

△ ZENWATER

Work hard 不如 Work smart, 有了較有系統(tǒng)的資料搜尋方式后，可以將時間留給創(chuàng)作和嘗試。隨著經驗累積，我開始養(yǎng)成了一些小技巧幫助自己更有效率的搜集資料，大家可以酌量參考：

1. 先用樹狀圖整理出關鍵字

在開始找資料前我會先把設計關鍵字整理出來，先從Google或百度等網站去搜尋相關的話題或圖片，以此方式讓思考可以更突破。例如，我要做一張音樂會的海報，開始前，我會先寫下關鍵字，例如：樂器、鋼琴、音樂、琴鍵、流動、彈奏….，接著利用這些關鍵字進行中英文查詢，隨著找到越來越多資料，可以從其中找到更多可能性的延伸。這個階段搜尋目的是從抽象方向出發(fā)，避免找到與別人相似的元素。一個一個關鍵字搜尋后，就可以把其中好的圖片整理再一起，收斂成更明確的設計方向。

2. 擅用IG的＃hashtag功能

除了使用搜尋網站尋找資料，我覺得IG（instagram ）也是一個不錯的選擇。我會用IG 的hushtag去找大家對于某一個單字不同的想像，例如找#music，在其中除了可以找到音樂相關的畫面，有時候也可以找到不同場域里的音樂元素。除了找靈感外，我也會利用hushtag搜集的設計作品，例如找#logo#graphicdesign時，可以看到大家正在進行中的作品，或是還未整理好放上Behance的作品。

△ One Team One Goal / IBM Taiwan Sport Day

3. 以pinterest分類整理資料庫

我平常就有整理pinterest的習慣，建立資料庫的習慣除了為了特定專案外，我也會以設計種類分類作品，例如以CI、packaging、poster…分類。除此之外，以風格分類的資料庫也是必要的，例如：東方風格、美式、日本風格、歐式….。這些平常就累積好的資料庫能夠讓我搜尋作品資料時，有一個快速的開始。 Pinterest會依據(jù)風格推薦更多的作品給使用者，因此當平常有了足夠的累積，尋找資料就會有效率很多，能夠快速找到很多需要的作品風格。

4. Behance搜集不同風格的設計師

Follow特定設計師的IG或是Behance也是我搜集資料的一個方法。我會搜集一群在每個領域最具代表性的設計師。在找不到靈感時，我會不斷瀏覽他們的作品集，試著從他們角度出發(fā)，思考如果是他們遇見這個題目，他們可能怎么發(fā)展。除此之外，他們也是一個完整的風格庫，每個作品都是該領域的標竿，當客戶有特定風格的需求時，能夠快速給自己一個明確的目標，期許自己能夠達到他們作品的高度。

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

如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里

今天遇到的就是z-index不起作用的問題。一個后臺小哥不知道抽什么瘋，寫元素覆蓋偏不讓用absolute，搞的我之后廢了9牛二虎之力寫了一下，問題描述是這樣的，

如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里