如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
1、大家都知道vue是一種單頁(yè)應(yīng)用,單頁(yè)應(yīng)用就是僅在頁(yè)面初始化的時(shí)候加載相應(yīng)的html/css/js一單頁(yè)面加載完成,不會(huì)因?yàn)橛脩舻牟僮鞫M(jìn)行頁(yè)面的重新加載或者跳轉(zhuǎn),用javascript動(dòng)態(tài)的變化html的內(nèi)容
優(yōu)點(diǎn): 良好的交互體驗(yàn),用戶不需要刷新頁(yè)面,頁(yè)面顯示流暢, 良好的前后端工作分離模式,減輕服務(wù)器壓力,
缺點(diǎn): 不利于SEO,初次加載耗時(shí)比較多
2、hash模式
vue-router默認(rèn)的是hash模式—使用URL的hash來(lái)模擬一個(gè)完整的URL,于是當(dāng)URL改變的時(shí)候,頁(yè)面不會(huì)重新加載,也就是單頁(yè)應(yīng)用了,當(dāng)#后面的hash發(fā)生變化,不會(huì)導(dǎo)致瀏覽器向服務(wù)器發(fā)出請(qǐng)求,瀏覽器不發(fā)出請(qǐng)求就不會(huì)刷新頁(yè)面,并且會(huì)觸發(fā)hasChange這個(gè)事件,通過(guò)監(jiān)聽hash值的變化來(lái)實(shí)現(xiàn)更新頁(yè)面部分內(nèi)容的操作
對(duì)于hash模式會(huì)創(chuàng)建hashHistory對(duì)象,在訪問(wèn)不同的路由的時(shí)候,會(huì)發(fā)生兩件事:
HashHistory.push()將新的路由添加到瀏覽器訪問(wèn)的歷史的棧頂,和HasHistory.replace()替換到當(dāng)前棧頂?shù)穆酚?
3、history模式
主要使用HTML5的pushState()和replaceState()這兩個(gè)api來(lái)實(shí)現(xiàn)的,pushState()可以改變url地址且不會(huì)發(fā)送請(qǐng)求,replaceState()可以讀取歷史記錄棧,還可以對(duì)瀏覽器記錄進(jìn)行修改
window.history.pushState(stateObject, title, URL)
window.history.replaceState(stateObject, title, URL)
包括back,forward , go 三個(gè)方法
history.go(-2);//后退兩次
history.go(2);//前進(jìn)兩次
history.back(); //后退
hsitory.forward(); //前進(jìn)
區(qū)別：
前面的hashchange，你只能改變#后面的url片段。而pushState設(shè)置的新URL可以是與當(dāng)前URL同源的任意URL。
history模式則會(huì)將URL修改得就和正常請(qǐng)求后端的URL一樣,如后端沒(méi)有配置對(duì)應(yīng)/user/id的路由處理，則會(huì)返回404錯(cuò)誤
參考于: https://www.cnblogs.com/ceceliahappycoding/p/10552620.html
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
柵格系統(tǒng)在UI設(shè)計(jì)和前端開發(fā)中是被應(yīng)用的很廣泛一套體系，但真正能掌握并很好運(yùn)用的人卻不多，一起來(lái)學(xué)習(xí)吧！
環(huán)顧身邊常見的優(yōu)秀設(shè)計(jì)很多都使用了柵格系統(tǒng)，你可能非常贊同在界面中使用柵格系統(tǒng)，但卻沒(méi)有人告訴你應(yīng)該如何使用它們。
印刷中也會(huì)用到柵格，但就本文而言，我主要想討論的是用于PC和移動(dòng)設(shè)備上的柵格系統(tǒng)設(shè)計(jì)。
紫色塊放內(nèi)容
內(nèi)容塊包括文本，圖片或者是兩者的組合形式，背景顏色實(shí)際上不能算是內(nèi)容元素，除非是作為文本或者圖片的容器。
上圖中的粉色塊作為柵格中的列，它們構(gòu)成了內(nèi)容寬度。一般來(lái)說(shuō)，列寬是不會(huì)變的，只是列數(shù)會(huì)隨著設(shè)備的不同而變化，比如從PC端的12列變?yōu)槠桨咫娔X上的8列，然后在移動(dòng)端變?yōu)?列。嚴(yán)格來(lái)說(shuō)，你其實(shí)可以定義任何想要的列寬，但大多數(shù)情況下的網(wǎng)格列寬都設(shè)置在60-80px之間。選擇合適的列寬是最重要的，因?yàn)樗莾?nèi)容寬度的主要決定因素。
水槽是在列與列之間的空間。20px是一個(gè)常見的尺寸設(shè)置，當(dāng)設(shè)計(jì)塊狀或者卡片元素的網(wǎng)格時(shí)，這種間距非常重要，比如做照片類設(shè)計(jì)的時(shí)候。有些系統(tǒng)會(huì)隨著設(shè)備寬度的增加而增加水槽的寬度，但也可以保持固定。
外邊距也稱為外水槽，是內(nèi)容寬度之外的空白區(qū)域。為了更方便的設(shè)計(jì)，外邊距會(huì)隨著設(shè)備寬度的增加而增加。移動(dòng)設(shè)備的邊距通常為20-30px，而在平板電腦和PC端，這個(gè)間距通常會(huì)差異很大。
下面會(huì)介紹一些基本的準(zhǔn)則，但要明白在實(shí)際設(shè)計(jì)中其實(shí)沒(méi)有任何硬性的規(guī)定。
1. 內(nèi)容元素必須位于若干列上
其核心思想是內(nèi)容元素必須位于若干列上，你可以任意分割，比如6x2,3x4,4x3。下面的例子中，我展示了不同分割方式設(shè)計(jì)的信息卡片。
不同柵格設(shè)計(jì)展示
很棒，這看起來(lái)很簡(jiǎn)單對(duì)吧。有的時(shí)候，你想把內(nèi)容嚴(yán)格的套用在柵格布局上，會(huì)發(fā)現(xiàn)可能不夠美觀，比如下面的例子。
如果我們把內(nèi)容都放在網(wǎng)格上，文本內(nèi)容會(huì)顯得很長(zhǎng)，最佳的位置是不嚴(yán)格在任何網(wǎng)格上，這也是可以的，只要理解了整個(gè)元素實(shí)際上是一個(gè)不可見的，更大的容器就行。
這也是4x3的布局，只是給了它內(nèi)部不可見的填充。當(dāng)把這樣的設(shè)計(jì)稿給到開發(fā)時(shí)，他們就能很直觀的知道這一點(diǎn)，所以這更利于去理解如何實(shí)際地分配好內(nèi)容。
2. 不要將內(nèi)容元素留在水槽中
內(nèi)容元素應(yīng)該要在列寬以內(nèi)，而不能流出在水槽之外，這樣會(huì)違背柵格化的目的。
3. 只要父級(jí)元素對(duì)齊柵格，子級(jí)可以不完全對(duì)齊列
有些時(shí)候，你想要將設(shè)計(jì)和卡片分成兩部分，一半是圖片，一半是文字。你可能遇到這樣尷尬的情況，圖片沒(méi)有完全落在一列上，文字被迫以一種奇怪的方式自適應(yīng)。其實(shí)不用擔(dān)心，只要“父”容器對(duì)齊柵格，這就沒(méi)有關(guān)系。
父子級(jí)內(nèi)容柵格排版示意
4. 除非有意，否則不要把列作為外部填充
所有重要內(nèi)容都應(yīng)該與柵格列寬相適應(yīng)。一開始會(huì)覺得奇怪，因?yàn)槿绻涣?xí)慣使用網(wǎng)格，可能會(huì)把網(wǎng)格寬度當(dāng)成全部?jī)?nèi)容區(qū)域，所以還需要給它設(shè)定一定的內(nèi)邊距。此時(shí)外邊距就起到了留白的作用，它們充當(dāng)了內(nèi)邊距。不要在網(wǎng)格內(nèi)部利用列寬當(dāng)成內(nèi)邊距，而是要與網(wǎng)格最外面保持對(duì)齊，利用網(wǎng)格外的間距來(lái)當(dāng)做留白區(qū)域。根據(jù)代碼實(shí)現(xiàn)方式，要么網(wǎng)格內(nèi)的內(nèi)容按比例縮放，邊距固定，要么外邊距與內(nèi)容同時(shí)縮放。
正確的內(nèi)容填充方式和不正確的把柵格當(dāng)做邊距
所以如果有人說(shuō)“我需要一個(gè)1200px寬的設(shè)計(jì)”，這并不意味著你的設(shè)計(jì)就是1200px寬，這其實(shí)是說(shuō)設(shè)計(jì)內(nèi)容寬度在1200px的畫布內(nèi)，實(shí)際內(nèi)容占位是960px，這樣就會(huì)有空間留出外邊距。
5. 完全出血的元素或紋理圖形應(yīng)該設(shè)計(jì)在畫板邊緣，并理解為出血的列網(wǎng)格
這個(gè)頁(yè)面布局的頂部圖片被設(shè)計(jì)成完全出血
這是一個(gè)例外的規(guī)則，當(dāng)背景顏色或者圖片在完全出血的情況下，開發(fā)同學(xué)會(huì)把它理解為一個(gè)全屏的內(nèi)容元素。
如果設(shè)計(jì)的是裝飾元素之類的內(nèi)容，可以接受它被裁切掉，此時(shí)也可以脫離柵格化的設(shè)計(jì)。
一些圖片和文字的出血設(shè)計(jì)
頁(yè)眉和頁(yè)腳有時(shí)也有例外，它們不被認(rèn)為是內(nèi)容的一部分。有些設(shè)計(jì)將它們固定在瀏覽器邊緣，有些則喜歡保持內(nèi)容的寬度，這取決于自身功能和內(nèi)容的情況。將它們保持在內(nèi)容寬度內(nèi)的好處是，當(dāng)用戶在寬屏顯示器上看頁(yè)面時(shí)，不需要來(lái)回掃視；將它們固定在瀏覽器上的好處是可以為導(dǎo)航元素提供更多的空間。
柵格化布局如何做到響應(yīng)式
圖片來(lái)源Intuit
在傳統(tǒng)的柵格化系統(tǒng)設(shè)計(jì)中，列的寬度和水槽的寬度是保持不變的，只是列的“數(shù)量”發(fā)生變化。為什么要這么處理呢？這是為了讓設(shè)計(jì)更簡(jiǎn)單。如果一組三張卡片分別放在桌面的四列上，那么在平板電腦上，會(huì)顯示兩張卡片，并把第三張卡片進(jìn)行折行顯示在第二行上。不需要做任何的調(diào)整，因?yàn)橐呀?jīng)知道它位于第四列上了。在手機(jī)上，答案也很簡(jiǎn)單，只需要一張卡片，其他的就會(huì)自動(dòng)堆到下面的行中。如果你愿意，也可以變得有創(chuàng)意，選擇只在手機(jī)上顯示一張卡片，或者做一個(gè)水平滾動(dòng)。這些列的自適應(yīng)對(duì)于代碼來(lái)說(shuō)就是很簡(jiǎn)單的參考。
實(shí)際上，web必須呈現(xiàn)任何瀏覽器的寬度。例如，有一個(gè)大顯示器，它可以看到1600像素寬的東西，實(shí)際上pc端的網(wǎng)頁(yè)設(shè)計(jì)是1200px寬，平板電腦上是768px寬，手機(jī)是360px寬。所以你會(huì)看到一個(gè)小于1200px的設(shè)計(jì)，有大量的留白。但是當(dāng)你的瀏覽器再小一個(gè)像素，1199px，會(huì)發(fā)生什么呢？
固定網(wǎng)格
固定柵格示意
如果開發(fā)那邊寫了一個(gè)固定柵格，當(dāng)你從桌面縮小到平板電腦，就像是在900px的瀏覽器寬度時(shí)，你不會(huì)看到任何變化，設(shè)計(jì)就像是被剪掉了一樣。但當(dāng)達(dá)到768px臨界點(diǎn)時(shí)，設(shè)計(jì)馬上就會(huì)改變，平板電腦上的顯示效果就會(huì)好起來(lái)。如果繼續(xù)減小這個(gè)值，同樣的事情也會(huì)發(fā)生，在到達(dá)另一個(gè)臨界值之前，設(shè)計(jì)看起來(lái)都是不變的。
流動(dòng)網(wǎng)格
流動(dòng)網(wǎng)格的示例
現(xiàn)在來(lái)看看流動(dòng)網(wǎng)格的特點(diǎn)，當(dāng)窗口縮小時(shí)，內(nèi)容將動(dòng)態(tài)的發(fā)生變化，文本會(huì)進(jìn)行換行，元素也會(huì)變窄。然而，這些元素在內(nèi)容寬度縮小到下一個(gè)臨界值之前，布局是不會(huì)變化的。
所以我想說(shuō)的是，設(shè)計(jì)的臨界值只是一個(gè)更改布局的參考點(diǎn)。這就是為什么列寬和水槽在網(wǎng)格中不會(huì)改變的原因，因?yàn)槲覀兿胱屧O(shè)計(jì)師在考慮布局時(shí)能夠更容易地創(chuàng)建一致性。
混合網(wǎng)格
在實(shí)際項(xiàng)目中，使用流動(dòng)網(wǎng)格和固定網(wǎng)格的組合也是常見的做法。網(wǎng)站通常是流動(dòng)網(wǎng)格，因?yàn)樗ミm應(yīng)各種不同終端的大小。
一些做的很酷的柵格系統(tǒng)
不需要太死板地去堅(jiān)持傳統(tǒng)柵格套路，12、8、4這樣的分布，甚至不需要20px的水槽。下面是一些在設(shè)計(jì)中使用柵格系統(tǒng)做的很棒的設(shè)計(jì)靈感。
Invision’s Genome Project
可以看到，他們的設(shè)計(jì)故意不去使用任何的水槽，所以看起來(lái)是無(wú)縫的。
這個(gè)網(wǎng)站不僅設(shè)計(jì)的很好，他們還利用了在設(shè)計(jì)中展示他們自己的柵格系統(tǒng)來(lái)讓整體的設(shè)計(jì)變得更加酷炫。
Dropbox Design
他們沒(méi)有設(shè)計(jì)水槽和外邊距，相反，整個(gè)頁(yè)面被分成兩半，然后將內(nèi)容填充到這兩部分。
Wordpress
Wordpress創(chuàng)建賬號(hào)頁(yè)面
使用網(wǎng)格的方式取決于你自己。你可以在主要內(nèi)容部分使用網(wǎng)格，次要內(nèi)容則不使用。在Wordpress的例子中，頁(yè)面中間的部分使用柵格化設(shè)計(jì)，左側(cè)的側(cè)邊欄則沒(méi)有使用。
The Mockup Club
內(nèi)容和網(wǎng)格也并不總是從中間開始，對(duì)于模型網(wǎng)站，內(nèi)容在左邊也未嘗不可。
我非常確定的說(shuō)，Instagram的PC端是用上了6列柵格布局。
要點(diǎn)總結(jié)
寫這篇文章的目的是想提供一些關(guān)于如何在響應(yīng)式設(shè)計(jì)中使用柵格系統(tǒng)。我知道對(duì)于我自己來(lái)說(shuō)，我花了很多年的時(shí)間寫了大量的代碼來(lái)理解網(wǎng)格是如何工作的。我在YouYube上看了很多視頻，也閱讀了大量的文章，但每個(gè)人都在關(guān)注它為什么重要，卻不去注重到底怎么在自己的項(xiàng)目中使用這些原則。
你要做的最好的事情就是從現(xiàn)在開始注意那些優(yōu)秀設(shè)計(jì)是如何對(duì)齊元素的，你將會(huì)開始看到這些模式。為了幫助理解，這里有一些設(shè)計(jì)系統(tǒng)概述了它們的網(wǎ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
在完全理解了網(wǎng)格的工作原理之后，我已經(jīng)成為了一名更好的設(shè)計(jì)師，因?yàn)槲抑牢业脑O(shè)計(jì)將如何在臨界值之間進(jìn)行轉(zhuǎn)換。我也可以落地我的設(shè)計(jì)，使它們能夠有一個(gè)完美的像素對(duì)齊。這樣的規(guī)范帶來(lái)了更一致，更簡(jiǎn)潔的設(shè)計(jì)，當(dāng)用戶從一個(gè)界面到另一個(gè)界面流轉(zhuǎn)時(shí)，這真的提升了產(chǎn)品的檔次。我建議在你的設(shè)計(jì)中去應(yīng)用這些網(wǎng)格，并和開發(fā)一起，以相同的方式將它們落地，這將會(huì)是一個(gè)非常不錯(cuò)的進(jìn)步。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
阿里巴巴副總裁、中國(guó)內(nèi)貿(mào)事業(yè)部總經(jīng)理汪海在對(duì)外分享時(shí)提出 1688 已經(jīng)從信息平臺(tái)時(shí)代進(jìn)入數(shù)字化營(yíng)銷平臺(tái)時(shí)代，讓 1688 用戶在平臺(tái)內(nèi)完成營(yíng)銷和銷售一體化的整個(gè)商業(yè)閉環(huán)。1688 的使命也升級(jí)成「在數(shù)字化經(jīng)濟(jì)時(shí)代，讓天下沒(méi)有難做的生意！」在全新的業(yè)務(wù)態(tài)勢(shì)下，為了更好的滿足用戶需求，阿里巴巴（1688）主客升級(jí)勢(shì)在必行。
首頁(yè)既是業(yè)務(wù)分流的中心場(chǎng)景，也是平臺(tái)賣家判斷平臺(tái)打法，買賣家感知平臺(tái)價(jià)值的重要「門面」。從 UED 專業(yè)視角來(lái)看，首頁(yè)是定義 APP 內(nèi)體驗(yàn)范式及視覺風(fēng)格的核心場(chǎng)景。
1. 盤點(diǎn)現(xiàn)象，定義問(wèn)題
滿足業(yè)務(wù)新的訴求：平臺(tái)階段性戰(zhàn)略不同，1688 從曾經(jīng)的信息平臺(tái)過(guò)渡到交易平臺(tái)，如今向數(shù)字營(yíng)銷平臺(tái)轉(zhuǎn)型，舊的內(nèi)容框架難以承載業(yè)務(wù)的新發(fā)展。
提升分流質(zhì)量：從過(guò)去的數(shù)據(jù)效果來(lái)看，需重新判斷，在 For 特色采購(gòu)需求和服務(wù)大面采購(gòu)需求之前，如何平衡調(diào)優(yōu)，提升首頁(yè)的流量轉(zhuǎn)化效能。
體驗(yàn)升級(jí)：移動(dòng)端 APP 天然生長(zhǎng)在手機(jī)系統(tǒng)上，系統(tǒng)的風(fēng)格更迭也牽動(dòng)著 APP 的變化和升級(jí)。在 8.0 升級(jí)前，1688APP 存在著 5.0、6.0、7.0 多個(gè)由不同設(shè)計(jì)師在不同時(shí)間點(diǎn)所設(shè)計(jì)的場(chǎng)景，到8.0，APP 趨待從框架層、表現(xiàn)層以及品牌等方面進(jìn)行統(tǒng)一及升級(jí)。
APP 升級(jí)前與業(yè)務(wù)對(duì)焦，我們收到三點(diǎn)訴求：
在內(nèi)容框架制定上，我們聚焦用戶價(jià)值，舍掉 7.0 時(shí)的內(nèi)容版塊個(gè)性化，聚焦做商品的個(gè)性化，僅保留For大面用戶的營(yíng)銷、內(nèi)容場(chǎng)景，提升算法推薦區(qū)的曝光率，以此區(qū)域的商品做首頁(yè)的直接轉(zhuǎn)化。
視覺容器升級(jí)
做平視覺框架，選擇「大間距分隔」，為內(nèi)容留出干凈、簡(jiǎn)潔的視覺空間。
精簡(jiǎn)內(nèi)容柵格，避免形式給用戶閱讀帶來(lái)的負(fù)擔(dān)。
提高留白率，提升頁(yè)面整體的透氣性，為內(nèi)容留出更清爽、輕松的閱讀空間。
拉大字體大小的梯度，加重字體顏色梯度，提升文字的清晰度和可讀性。
強(qiáng)調(diào)版塊特性，塑造買家心智感知，達(dá)成業(yè)務(wù)目標(biāo)
強(qiáng)化搜索：7.0時(shí)，曾上線過(guò)將搜索做到「主觀上覺得顯眼」的測(cè)試方案，但相較于之前沉浸式搜索，數(shù)據(jù)幾乎沒(méi)變化。
8.0 階段，從視覺表現(xiàn)層跳出看：「強(qiáng)化搜索」并不意味把搜索設(shè)計(jì)得更「顯眼」，而是達(dá)成「讓更多用戶更高頻地使用搜索」這一目標(biāo)。如提升搜索底紋詞、熱搜詞精準(zhǔn)度和吸引力、增加搜索布點(diǎn)等，都可能助力達(dá)成業(yè)務(wù)目標(biāo)。
基于用戶單手操作時(shí)，拇指在屏幕不同區(qū)域的點(diǎn)擊體驗(yàn)，選擇將搜索組件移到更易于點(diǎn)擊、視線更聚焦的屏幕位置，上線后數(shù)據(jù)提升非常明顯。
Banner 升級(jí)：7.0 的 Banner 畫面豐富度高，加之描述字段多，用戶閱讀有一定成本，較難在 3 秒內(nèi)掌握全 Banner 的信息。此外，相比于 C 類用戶，B 類用戶會(huì)更偏理性，我們選擇以更冷靜、克制的「視覺語(yǔ)氣」與 B 類商人對(duì)話，而非渲染氛圍引導(dǎo)點(diǎn)擊。（上線后，同樣的活動(dòng)內(nèi)容，按新、老兩版規(guī)范設(shè)計(jì)投放兩套 Banner，新版較老版 UV CTR 約高出 48%）
For 新人：以差異化的利益、個(gè)性化秒殺、新人攻略做用戶的承接。
營(yíng)銷場(chǎng)景心智差異化表達(dá)：營(yíng)銷由伙拼爆品、天天特賣兩部分組成，我們判斷爆品主打心智為「賣得火爆又便宜」，特賣主打心智是「限時(shí)限量搶便宜」，選擇將兩個(gè)區(qū)塊最關(guān)鍵的特質(zhì)做強(qiáng)化表達(dá)。
內(nèi)容場(chǎng)景（直播）動(dòng)態(tài)化、互動(dòng)感、實(shí)時(shí)性傳遞：抽象出直播間的方形版面+內(nèi)容疊加形式來(lái)設(shè)計(jì)，大坑位以動(dòng)圖傳遞給用戶直播的動(dòng)態(tài)感，以紅包、個(gè)性化商品的多維實(shí)時(shí)輪播氣泡傳達(dá)直播的互動(dòng)感、實(shí)時(shí)性。
為什么要做APP應(yīng)用內(nèi)的品牌設(shè)計(jì)？
品牌設(shè)計(jì)是將內(nèi)容層（平臺(tái)價(jià)值）與接收層（用戶）做柔性鏈接的一環(huán)，譬如在 APP 場(chǎng)景中，由于有商品、商家、商機(jī)等「干貨」，即使不特意做品牌設(shè)計(jì)，用戶也能與平臺(tái)保持剛性、穩(wěn)定的連接。而反過(guò)來(lái)看，品牌做得很好，但平臺(tái)沒(méi)有「干貨」，用戶也不會(huì)單奔著品牌設(shè)計(jì)來(lái)平臺(tái)。我們認(rèn)為，做 APP 應(yīng)用內(nèi)的品牌設(shè)計(jì)，核心價(jià)值在于助力用戶認(rèn)知到平臺(tái)特性，感知平臺(tái)價(jià)值。從設(shè)計(jì)專業(yè)視角來(lái)看，APP 應(yīng)用內(nèi)的品牌設(shè)計(jì)，有利于定義并統(tǒng)一 APP 內(nèi)體驗(yàn)范式及視覺風(fēng)格，保障用戶的體驗(yàn)。
每位設(shè)計(jì)師所處的業(yè)務(wù)環(huán)境不一樣，解決問(wèn)題策略和方式也千差萬(wàn)別，在 APP 應(yīng)用內(nèi)的品牌設(shè)計(jì)中，個(gè)人選擇是通過(guò)厘清內(nèi)容層（平臺(tái)）多層次訴求及 For 用戶的價(jià)值點(diǎn)，認(rèn)知、感知接收層（用戶）特質(zhì)及內(nèi)容傾向，基于內(nèi)容層底料+接收層用戶特質(zhì)確定設(shè)計(jì)底層范式，塑造用戶感知。
在阿里巴巴商業(yè)操作系統(tǒng)中，1688 聚焦做 B 類業(yè)務(wù)，直接服務(wù)對(duì)象是 B 類買賣家，業(yè)務(wù)細(xì)分出檔口尖貨、淘工廠、企業(yè)采購(gòu)、淘貨源、微商代發(fā)、工業(yè)品超級(jí)店、跨境專供等，這些都是具有一定 B 類特質(zhì)及體量感的場(chǎng)景，故在 APP 業(yè)務(wù)門洞及常規(guī)圖標(biāo)的表達(dá)上，基于扁平 vs 寫實(shí)、輕盈 vs 厚重、活潑 vs 穩(wěn)重的維度，圖形選定輕擬物、弱對(duì)比的設(shè)計(jì)范式，塑造 B 類場(chǎng)景 For 買家的沉穩(wěn)、份量感。
此外，異常/空白場(chǎng)景也是平臺(tái)與用戶互動(dòng)，塑造用戶感知品牌的機(jī)會(huì)。在空態(tài)情感化插圖部分的繪制上，力求塑形出有份量、易讀、有意味的場(chǎng)景以示對(duì)應(yīng)空態(tài)，并佐以輕微動(dòng)效，增強(qiáng)空態(tài)的互動(dòng)感。（在收藏夾、我的供應(yīng)商等工具型場(chǎng)景，基于空態(tài)信息的價(jià)值考慮，將空態(tài)與工具新手引導(dǎo)相結(jié)合，并未做常規(guī)的插圖。）
標(biāo)準(zhǔn)色
隨著業(yè)務(wù)的發(fā)展，我們基于新的業(yè)務(wù)態(tài)勢(shì)，豐富了 1688 品牌色，以橙紅色作營(yíng)銷、利益屬性的表達(dá)，以商務(wù)藍(lán)作服務(wù)、數(shù)字化屬性的表達(dá)，以金色作權(quán)益屬性的表達(dá)。
輔助色
在實(shí)際產(chǎn)品設(shè)計(jì)中，品牌色并不足以表達(dá)各類業(yè)務(wù)場(chǎng)景中的多層次的內(nèi)容。因此，基于 VI 品牌色，裂變出不同重量、層次更豐富的品牌輔助色。
場(chǎng)景用色規(guī)則
基于買家角色及場(chǎng)景特征定義用色規(guī)則。
1688色域及選色示意
以 HSB 模式劃定出偏沉穩(wěn)的 1688 色域，在日常 banner 及業(yè)務(wù)場(chǎng)景中可靈活取用。
動(dòng)效是設(shè)計(jì)的重要手段，良好的動(dòng)效表達(dá)能增強(qiáng)信息表達(dá)強(qiáng)度，清晰信息層級(jí)關(guān)系，提升用戶體驗(yàn)的舒適度。做動(dòng)效之前，將 APP 信息結(jié)構(gòu)平整到三層，保障內(nèi)容在頁(yè)面簡(jiǎn)潔明暢地呈現(xiàn)。
在實(shí)際落地中，動(dòng)效實(shí)現(xiàn)非常依賴技術(shù)資源，故動(dòng)效設(shè)計(jì)之前，應(yīng)考慮一個(gè)前提：動(dòng)效設(shè)計(jì)增益內(nèi)容表達(dá)，價(jià)值可論證，效果可衡量；同時(shí)，考慮接收層用戶的商人特質(zhì)，我們期望動(dòng)效表達(dá)給用戶以穩(wěn)定感，并且在設(shè)計(jì)表達(dá)上能兼顧效率。
在動(dòng)效呈現(xiàn)部分，主要以緩入、緩出、緩動(dòng)結(jié)合曲線來(lái)調(diào)節(jié)，總的來(lái)說(shuō)，內(nèi)容入場(chǎng)時(shí)節(jié)奏稍慢，速度緩，分層加載，交代清信息在 Z 軸上的層次關(guān)系，內(nèi)容出場(chǎng)時(shí)節(jié)奏快，速度快，內(nèi)容層級(jí)不用再做分層消失。
APP 內(nèi)典型場(chǎng)景的動(dòng)效案例及演示：
此外，除以上在圖形、色彩、動(dòng)效等基礎(chǔ)維度收口外，我們也需要將業(yè)務(wù)品牌放聲給買賣家，以達(dá)成業(yè)務(wù)品牌的價(jià)值傳遞。在 1688 向數(shù)字營(yíng)銷平臺(tái)轉(zhuǎn)型的階段，業(yè)務(wù)提出了「源頭廠貨通天下」的口號(hào)，我們通過(guò)設(shè)計(jì)手段，利用 APP 開機(jī)啟動(dòng)頁(yè)及下拉刷新的空間，將「貨通天下」的概念強(qiáng)化表達(dá)。
以上便是此次首頁(yè)改版階段性的記錄。在 8.0 的視覺體系里，為更好地突出內(nèi)容，視覺容器選擇盡可能做輕、做平，以冷靜、克制的「視覺語(yǔ)氣」與 B 類商人對(duì)話。當(dāng)然，這是設(shè)計(jì)師和業(yè)務(wù)同學(xué)階段性的選擇。后續(xù)品牌的完善及產(chǎn)品的優(yōu)化，仍需結(jié)合數(shù)據(jù)持續(xù)打磨。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到
前言
在此之前，已經(jīng)實(shí)現(xiàn)了vue+ElementUI的跨域查詢并渲染查詢結(jié)果的功能，現(xiàn)在想要在每一行中添加修改和刪除的按鈕。于是乎就需要獲取當(dāng)前行的數(shù)據(jù)，于是就有了下面兩種方式的獲取。
1 獲取當(dāng)前行的數(shù)據(jù)
1.1 我的笨辦法
這里是我記錄自己的學(xué)習(xí)過(guò)程，這個(gè)方法也能實(shí)現(xiàn)，但是麻煩，如果您只是為了尋找最終方案，請(qǐng)直接查看1.2章節(jié)。
首先我查看了官方文檔，打算使用對(duì)話框來(lái)渲染修改頁(yè)面和刪除警告頁(yè)面。這個(gè)實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，就是對(duì)按鈕綁定一個(gè)click事件，然后控制對(duì)話框的顯示和隱藏：
<el-table @row-click="handleEdit" :data="dengmiQueryForm.list" stripe border width="100%" height="350">
<el-table-column prop="mimian" label="謎面" width="300" fixed="left">
</el-table-column>
<el-table-column prop="dengmiSeq" label="序號(hào)">
</el-table-column>
<el-table-column prop="mimu" label="謎目">
</el-table-column>
<el-table-column prop="mige" label="謎格">
</el-table-column>
<el-table-column prop="midi" label="謎底">
</el-table-column>
<el-table-column prop="zuozhe" label="作者">
</el-table-column>
<el-table-column prop="mizhu" label="注">
</el-table-column>
<el-table-column prop="shangxi" label="賞析">
</el-table-column>
<el-table-column prop="leixing" label="類型">
</el-table-column>
<el-table-column label="操作" fixed="right" width="200px">
<el-col :span="10">
<el-tooltip effect="dark" content="編輯當(dāng)前行" placement="top">
<el-button size="mini" @click="dengmiQueryForm.dialogVisible = true">編輯</el-button>
</el-tooltip>
</el-col>
</el-table-column>
</el-table>
<div style="margin-top: 5px;"></div><!--這個(gè)只是為了在頁(yè)面上顯示間隔-->
<el-dialog title="編輯燈謎" :visible.sync="dengmiQueryForm.dialogVisible">
<el-form :model="modifyForm">
<el-form-item label="謎面" :label-width="modifyForm.formLabelWidth">
<el-input v-model="modifyForm.mimian" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="謎目" :label-width="modifyForm.formLabelWidth">
<el-input v-model="modifyForm.mimu" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dengmiQueryForm.dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dengmiQueryForm.dialogVisible = false">確 定</el-button>
</div>
</el-dialog>
<script>
export default {
name: "dengmiQuery",
comments: {
DengmiModify
},
data() {
return {
modifyForm:{
formLabelWidth:'120px',
mimian:'',
mimu:''
},
dengmiQueryForm: {
dialogDeleteVisible:false,
dialogVisible: false,
list: []
}
};
},
methods: {
submitForm(formName) {
console.log(formName.mimu);
this.$http.get('http://localhost:909/dengmi/showDengmi2').then(function (success) {
console.log("This request is succeed! Here is the response:");
this.dengmiQueryForm.list = success.body.result;
this.dengmiQueryForm.requestResult = true;
}, function (error) {
console.log("This request is failed! Here is the response:");
console.log(error);
this.dengmiQueryForm.requestResult = false;
})
},
handleEdit(row) {
this.dengmiQueryForm.deleteShow = row.mimian + "(" + row.mimu + ")" + row.midi + "/" + row.zuozhe;
this.modifyForm.mimian=row.mimian;
this.modifyForm.mimu=row.mimu;
}
}
}
</script>
如上代碼，是在el-table標(biāo)簽上綁定了行單擊事件*@row-click=“handleEdit”*，該方法的參數(shù)row即為當(dāng)前行的數(shù)據(jù)。
在handleEdit方法中，通過(guò)對(duì)data中的參數(shù)賦值，然后新增窗口中通過(guò)使用data中的參數(shù)來(lái)獲取當(dāng)前行的數(shù)據(jù)，從而實(shí)現(xiàn)將當(dāng)前行的數(shù)據(jù)傳遞到新的對(duì)話框中。
這個(gè)方法雖然也能實(shí)現(xiàn)需求，但是比較麻煩：當(dāng)有別的操作的時(shí)候，比如我再添加一個(gè)刪除操作，就需要在點(diǎn)擊刪除按鈕的時(shí)候，獲取當(dāng)前行的數(shù)據(jù)，然后進(jìn)行刪除操作；而因?yàn)樾略龊蛣h除使用的是不同的對(duì)話框，其取值也是要通過(guò)handleEdit方法來(lái)獲取，因此，當(dāng)按鈕較多，或者當(dāng)前行的字段值較多的時(shí)候，就需要在handleEdit中對(duì)許多許多的變量進(jìn)行賦值，而且是對(duì)所有按鈕的所有參數(shù)。這個(gè)工作量想想還是挺恐怖的。
1.2 使用slot-scope獲取數(shù)據(jù)
slot-scope是屬于VUE的東東，叫做插槽；至于插槽是個(gè)什么東東，來(lái)戳這里。
在操作列，對(duì)操作按鈕先用帶有slot-scope屬性的dom進(jìn)行包裝，即可獲取當(dāng)前行的數(shù)據(jù)，具體的代碼，除了操作列不同外，還需要?jiǎng)h除el-table標(biāo)簽中綁定的*@row-click*方法，剩下的都一樣：
<el-table-column label="操作嘗試2">
<template slot-scope="scope">
<el-button type="text" @click="checkDetail(scope.row)">查看詳情</el-button>
</template>
</el-table-column>
<script>
export default {
name: "dengmiQuery",
data() {
return {
modifyForm:{
formLabelWidth:'120px',
mimian:'',
mimu:''
},
dengmiQueryForm: {
dialogVisible: false,
list: [],
}
};
},
methods: {
checkDetail(val){
console.log(val)
}
}
}
</script>
通過(guò)<template slot-scope=“scope”>來(lái)定義當(dāng)前行的數(shù)據(jù)對(duì)象，然后通過(guò)scope.row來(lái)獲取當(dāng)前行的數(shù)據(jù)。
全部代碼
<template>
<div>
<el-form :model="dengmiQueryForm" ref="dengmiQueryForm" label-width="100px" class="demo-ruleForm" size="mini">
<el-row>
<el-col span="8">
<el-form-item label="謎面">
<el-input v-model="dengmiQueryForm.mimian"></el-input>
</el-form-item>
</el-col>
<el-col span="8">
<el-form-item label="謎目">
<el-input v-model="dengmiQueryForm.mimu"></el-input>
</el-form-item>
</el-col>
<el-col span="8">
<el-form-item label="謎格">
<el-input v-model="dengmiQueryForm.mige"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col span="8">
<el-form-item label="謎底">
<el-input v-model="dengmiQueryForm.midi"></el-input>
</el-form-item>
</el-col>
<el-col span="8">
<el-form-item label="作者">
<el-input v-model="dengmiQueryForm.zuozhe"></el-input>
</el-form-item>
</el-col>
<el-col span="8">
<el-form-item label="謎底字?jǐn)?shù)">
<el-input v-model="dengmiQueryForm.midiLength"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col>
<el-button type="primary" @click="submitForm" icon="el-icon-search">查詢</el-button>
<el-button type="warning" @click="resetForm" icon="el-icon-search" plain>重置</el-button>
</el-col>
</el-row>
</el-form>
<el-header></el-header>
<div v-if="dengmiQueryForm.requestResult">
<el-table :data="dengmiQueryForm.list.slice((dengmiQueryForm.currentPage-1)*dengmiQueryForm.pagesize,dengmiQueryForm.currentPage*dengmiQueryForm.pagesize)"
stripe border width="100%" height="350">
<el-table-column type="index" fixed="left"></el-table-column>
<el-table-column prop="mimian" label="謎面" width="300" fixed="left">
</el-table-column>
<el-table-column prop="dengmiSeq" label="序號(hào)">
</el-table-column>
<el-table-column prop="mimu" label="謎目">
</el-table-column>
<el-table-column prop="mige" label="謎格">
</el-table-column>
<el-table-column prop="midi" label="謎底">
</el-table-column>
<el-table-column prop="zuozhe" label="作者">
</el-table-column>
<el-table-column prop="mizhu" label="注">
</el-table-column>
<el-table-column prop="shangxi" label="賞析">
</el-table-column>
<el-table-column prop="leixing" label="類型">
</el-table-column>
<el-table-column label="操作" fixed="right" width="200px">
<el-row>
<el-col :span="10">
<el-tooltip effect="dark" content="編輯當(dāng)前行" placement="top">
<el-button size="mini" @click="dengmiQueryForm.dialogVisible = true">編輯</el-button>
</el-tooltip>
</el-col>
<el-col :span="10">
<el-tooltip effect="light" content="刪除當(dāng)前行" placement="top">
<el-button size="mini" @click="dengmiQueryForm.dialogDeleteVisible = true" type="danger" plain>刪除</el-button>
</el-tooltip>
</el-col>
</el-row>
</el-table-column>
<el-table-column label="操作嘗試2">
<template slot-scope="scope">
<el-button type="text" @click="checkDetail(scope.row)">查看詳情</el-button>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 5px;"></div>
<el-pagination
prev-text="上一頁(yè)"
next-text="下一頁(yè)"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="dengmiQueryForm.currentPageA"
:page-sizes="[5,10,50,100]"
:page-size="5"
layout="total, sizes, prev, pager, next, jumper"
:total="dengmiQueryForm.list.length">
</el-pagination>
</div>
<div v-else>
請(qǐng)求失敗！
</div>
<el-dialog title="編輯燈謎" :visible.sync="dengmiQueryForm.dialogVisible">
<el-form :model="modifyForm">
<el-form-item label="謎面" :label-width="modifyForm.formLabelWidth">
<el-input v-model="modifyForm.mimian" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="謎目" :label-width="modifyForm.formLabelWidth">
<el-input v-model="modifyForm.mimu" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dengmiQueryForm.dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dengmiQueryForm.dialogVisible = false">確 定</el-button>
</div>
</el-dialog>
<el-dialog title="刪除燈謎" :visible.sync="dengmiQueryForm.dialogDeleteVisible">
<h1><span style="color: red"><strong>確定刪除該行數(shù)據(jù)？刪除后不可恢復(fù)！</strong></span></h1>
<el-form>
<el-form-item label="當(dāng)前行數(shù)據(jù)">
<el-col :span="18">
<el-input v-model="dengmiQueryForm.deleteShow" readonly></el-input>
</el-col>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dengmiQueryForm.dialogDeleteVisible = false">取 消</el-button>
<el-button type="primary" @click="dengmiQueryForm.dialogDeleteVisible = false">確 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "dengmiQuery",
data() {
return {
modifyForm:{
formLabelWidth:'120px',
mimian:'',
mimu:''
},
dengmiQueryForm: {
deleteShow:'',
dialogDeleteVisible:false,
dialogVisible: false,
currentRow: null,
visibleA: false,
currentPage: 1, //初始頁(yè)
pagesize: 5, // 每頁(yè)的數(shù)據(jù)
currentPageA: 1,
mimian: '',
mimu: '',
mige: '',
midi: '',
zuozhe: '',
midiLength: '',
list: [],
requestResult: true,
thisRowData:{}
}
};
},
methods: {
submitForm(formName) {
console.log(formName.mimu);
this.$http.get('http://localhost:909/dengmi/showDengmi2').then(function (success) {
console.log("This request is succeed! Here is the response:");
this.dengmiQueryForm.list = success.body.result;
this.dengmiQueryForm.requestResult = true;
}, function (error) {
console.log("This request is failed! Here is the response:");
console.log(error);
this.dengmiQueryForm.requestResult = false;
})
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
handleSizeChange(size) {
this.dengmiQueryForm.pagesize = size;
console.log(this.dengmiQueryForm.pagesize) //每頁(yè)下拉顯示數(shù)據(jù)
},
handleCurrentChange(currentPage) {
this.dengmiQueryForm.currentPage = currentPage;
console.log(this.dengmiQueryForm.currentPage) //點(diǎn)擊第幾頁(yè)
},
handleEdit(row) {
this.dengmiQueryForm.deleteShow = row.mimian + "(" + row.mimu + ")" + row.midi + "/" + row.zuozhe;
// this.dengmiQueryForm.currentRow = row;
console.log(this.dengmiQueryForm.deleteShow);
this.modifyForm.mimian=row.mimian;
this.modifyForm.mimu=row.mimu;
// console.log("event=" + event);
// console.log(colunm)
},
handleClose(done) {
this.$confirm('確認(rèn)關(guān)閉？')
.then(_ => {
done();
})
.catch(_ => {});
},
checkDetail(val){
console.log(val)
}
}
}
</script>
<style scoped>
</style>
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
即便QQ已經(jīng)陪伴大家20周年，我們依舊懷揣初心，保持科技改變生活的熱衷。應(yīng)運(yùn)而生我們?cè)O(shè)計(jì)了太空企鵝探索科技作為本次20周年的品牌理念，來(lái)寓意新的里程碑到來(lái)。
https://v.qq.com/x/page/l087071z1ua.html
01 概述 | Overview
QQ 20周年，是互聯(lián)網(wǎng)產(chǎn)品長(zhǎng)青的一個(gè)傳說(shuō)，也是家喻戶曉企鵝IP形象的成長(zhǎng)，同時(shí)也代表了鵝廠精神的堅(jiān)韌與奮進(jìn)。即便已經(jīng)陪伴大家20周年，但我們依舊懷揣初心，保持科技改變生活的熱衷。應(yīng)運(yùn)而生我們?cè)O(shè)計(jì)了太空企鵝探索科技作為本次20周年的品牌理念，來(lái)寓意新的里程碑到來(lái)。就像宇航員勇于探索未知宇宙知識(shí)一樣，QQ帶著初心不斷保持變革與成長(zhǎng)，為用戶提供更具科技力與創(chuàng)新的服務(wù)！也寓意鵝廠不斷探索未來(lái)與科技向善的愿景！
02 logo設(shè)計(jì)?Logo Design
我們?cè)谠O(shè)計(jì)的第一階段，logo設(shè)計(jì)，就是圍繞“有趣和科技”來(lái)展開發(fā)散設(shè)計(jì)。我們決定從數(shù)字“20”開始入手，把QQ和20不斷結(jié)合，同時(shí)融入宇宙太空元素，寓意QQ不斷的對(duì)外探索，從多個(gè)維度來(lái)看世界，尋找有趣的內(nèi)容。我們?yōu)榱速N合“宇宙探索”這風(fēng)格，為這次展覽設(shè)計(jì)了專屬徽章，徽章設(shè)計(jì)沿用了太空的概念，結(jié)合星球，星空，宇航員等科幻元素。簡(jiǎn)約的幾何形狀和大膽的配色貼合“QQ更好玩”的年輕潮流氣息。
03 概念設(shè)計(jì)?Concept & Design
1. Space QQ
太空QQ的太空服設(shè)計(jì)指的是科幻電影如《星際穿越》和《火星救援》中的太空服，我們也將的時(shí)尚潮流，2018年以來(lái)運(yùn)動(dòng)鞋領(lǐng)域最為明顯的趨勢(shì)，將 ugly & oversize 的潮流風(fēng)格注入到運(yùn)動(dòng)鞋的設(shè)計(jì)當(dāng)中。這種將時(shí)尚潮流與太空服相結(jié)合的新型運(yùn)動(dòng)鞋,使整體設(shè)計(jì)看起來(lái)時(shí)尚而風(fēng)趣。如果沒(méi)有它，太空服可能只是一個(gè)淺顯的概念。
太空QQ創(chuàng)意草圖
運(yùn)動(dòng)鞋設(shè)計(jì)草圖
3D原型
2. QQ X PUPU
本次設(shè)定，由兩只企鵝背靠背組成，20周歲的QQ與1周歲的PUPU，鵝廠擁有著各種企鵝IP形象，除了經(jīng)典的企鵝QQ，還有各種其他特色企鵝，包括PUPU，BabyQ等等，同時(shí)PUPU來(lái)自外太空也是企鵝FM產(chǎn)品的主形象，經(jīng)典企鵝QQ攜帶了新生代PUPU共同探索科技太空，寓意企鵝在不斷創(chuàng)新與擁抱新生代相互合力，為年輕用戶提供更具科技力與社交娛樂(lè)化的服務(wù)。
04 最終設(shè)計(jì)?Final Design
05 8米QQ模型制作?8m QQ Model
對(duì)于實(shí)際生產(chǎn)出這個(gè)巨型模型是個(gè)大挑戰(zhàn)，我們先利用電腦三維模型生產(chǎn)出8米高的泡沫模型，反復(fù)檢查生產(chǎn)的泡沫模型是否和設(shè)計(jì)模型一致，不斷的打磨調(diào)整，待到確定泡沫模后開始翻模工作。
先給泡沫模噴上泥巴水，便于脫模，之后噴上石膏水，并加入麻絲增加石膏的牢固性，待石膏模晾干，把石膏里的泡沫模掏出后開始往里面涂一層泥巴水（便于后面玻璃鋼脫模），然后涂上樹脂和纖維布/氈，干了之后砸爛石膏模，里面的玻璃鋼模型就出來(lái)了。
玻璃鋼定型之后給內(nèi)部焊接鋼鐵骨架，作為加固作用。剛脫模的玻璃鋼是非常粗糙的，于是對(duì)玻璃鋼的外觀進(jìn)行打磨，使得表面光滑和調(diào)整細(xì)節(jié)，打磨完成后開始批灰和上底色，前后三次，為的是填補(bǔ)空隙瑕疵使模型更逼真完整。接著我們便調(diào)模型身上的顏色，在不斷嘗試中調(diào)出最接近效果圖的顏色，開始逐步上色。
上色完成后再噴保護(hù)漆防止褪色，待模型的漆干后清洗整個(gè)模型，為貼上專屬貼紙做準(zhǔn)備，接著確定貼紙位置并逐一貼上。最后開始搭建安裝，因?yàn)樵诖罱ㄟ^(guò)程中模型會(huì)有磨損，搭建完后再做最后的修補(bǔ)工作，最后巨型QQ模型完美地呈現(xiàn)出來(lái)。
06 貼紙?jiān)O(shè)計(jì)?Sticker Design
配合QQ20周年慶，我們要給8m的巨型QQ模型搭配上了貼紙?jiān)O(shè)計(jì)，以slogan “QQ更好玩” 為設(shè)計(jì)的出發(fā)點(diǎn)，希望把有趣好玩的態(tài)度注入各個(gè)品牌中，為品牌logo嚴(yán)肅的視覺帶來(lái)玩味感和潮流感。同時(shí)配合巨型QQ宇航員的造型，我們?cè)谠O(shè)計(jì)貼紙時(shí)參考了航天飛機(jī)，科幻機(jī)器等機(jī)械圖案元素，每個(gè)品牌的設(shè)計(jì)方案除了有趣值得玩味外，同時(shí)需要貼合宇宙科技探險(xiǎn)的風(fēng)格。
我們針對(duì)這個(gè)大方向再進(jìn)行了幾輪細(xì)化，選出能代表各個(gè)品牌的最終的設(shè)計(jì)方案，并把貼紙模擬在太空QQ模型上反復(fù)測(cè)試貼紙最適合的位置，讓貼紙和模型的整體風(fēng)格可以完美契合。通過(guò)各個(gè)品牌的logo再設(shè)計(jì)貼紙和太空QQ的碰撞，把品牌推廣做到最大化。
07 搪膠玩具設(shè)計(jì)?Figure Design
作為QQ20周年慶的驚喜，我們制作了與巨型太空QQ同款的迷你搪膠玩具，在這次玩具設(shè)計(jì)上我們加入了小機(jī)關(guān)，在玩具內(nèi)部放置了小磁鐵，使得QQ和PUPU可以方便拆卸組合。
同時(shí)為其設(shè)計(jì)了專屬包裝盒，包裝設(shè)計(jì)從“太空宇宙”的角度出發(fā)，以黑色為主基調(diào)，圖案印花設(shè)計(jì)選用了太空QQ來(lái)進(jìn)行設(shè)計(jì)，把太空QQ模型線體化，配合QQ20周年logo進(jìn)行設(shè)計(jì)，利用燙金工藝與醒目的圖形搭配，更有效的展現(xiàn)了QQ年輕化的品牌特點(diǎn)。同時(shí)為了減少后期生產(chǎn)制作之間的溝通誤會(huì)，我們同期將幾個(gè)較重要的角度的包裝3D效果圖快速渲染出來(lái)，有著非常直觀的參考對(duì)照作用。
08 品牌物料設(shè)計(jì)?Product Design
1. 海報(bào)設(shè)計(jì)
設(shè)計(jì)QQ20周年展的宣傳物料，我們采用了最能代表這次展覽的太空QQIP為主體，作為本次展覽的專屬元素，太空QQ貼近科技，同時(shí)又具有趣味性和潮流感。我們結(jié)合了太空探索的特性，提煉出宇宙元素作為宣傳的內(nèi)容，讓海報(bào)設(shè)計(jì)具有更多內(nèi)容可看性和觀賞性。
2. T恤設(shè)計(jì)
配合QQ20周年展，結(jié)合宇宙太空元素，并從QQ20周年logo圖形中延展設(shè)計(jì)出各類代表圖形，正面簡(jiǎn)潔直接地顯示出本次主題，把醒目的圖形放置于T恤背后，利用坐標(biāo)軸和經(jīng)緯度的信息圖案配合各個(gè)抽象化的宇宙元素，增加T恤設(shè)計(jì)的科技感，更明確地展現(xiàn)了科技向善的愿景。
09 QQ20周年展覽?Exhibition Design
QQ聯(lián)合深圳福田星河COCO Park 舉辦了“QQ20周年主題展覽”，展館外形模擬宇宙太空站，以太空白灰色為主調(diào)，搭配簡(jiǎn)潔的立方體造型，白色燈條勾勒大門，并以QQ20周年專屬徽章做門面，科技未來(lái)感撲面而來(lái)，就如大型QQ太空站坐落于地球。
展館大門旁的墻上安置了頗具科幻氣息的全息投影裝置，上面展示著QQ在不同時(shí)期的形象以及20年關(guān)鍵大事記。代表著不同時(shí)期的QQ形象用全息投影的方式展現(xiàn)出來(lái)，從最開始的胖QQ到現(xiàn)在的新版QQ，讓你一眼了解QQ演變史。中間放著QQ歷屆各個(gè)跨界Figure展示，總有一款捕獲你的心！
同時(shí)本次展覽還和% Arabica咖啡跨界合作，% Arabica咖啡展臺(tái)設(shè)計(jì)簡(jiǎn)潔透氣與QQ20周年展覽風(fēng)格完美融合。一邊喝美味咖啡，一邊暢游展館，兩全其美。
藍(lán)色發(fā)光的隧道科幻神秘，一進(jìn)去馬上感受到了超強(qiáng)的氛圍感，仿佛時(shí)光碎片擦肩而過(guò)。用QQ掃描墻上的二維碼，立刻生成你的專屬時(shí)光隧道“QQ個(gè)人軌跡”，各種瞬間涌上心頭。
聯(lián)合天天P圖，用13個(gè)LED屏組成了“復(fù)古頭像畫廊”。走進(jìn)互動(dòng)裝置小屋里，往鏡頭前一站，稍作等待后，以你的形象即時(shí)合成的13個(gè)復(fù)古頭像就會(huì)出現(xiàn)在面前的13塊屏幕上，體驗(yàn)即時(shí)“變臉”效果。讓自己的頭像和曾經(jīng)用過(guò)的QQ經(jīng)典頭像合二為一，形成專屬的復(fù)刻版頭像海報(bào)。
結(jié)語(yǔ)
QQ20周年展不僅包含了展館設(shè)計(jì)，還包含了市場(chǎng)營(yíng)銷，運(yùn)營(yíng)活動(dòng)，周邊商品等多個(gè)設(shè)計(jì)環(huán)節(jié)，環(huán)環(huán)相扣，缺一不可，一起構(gòu)建了整個(gè)QQ20周年展的設(shè)計(jì)體系；展覽設(shè)計(jì)了太空企鵝攜帶著新生代PUPU共同探索科技，寓意鵝廠不斷創(chuàng)新探索與科技向善的愿景，為年輕用戶提供更具科技力與社交娛樂(lè)化的服務(wù)，在打造“QQ更好玩”的路上奮力前行。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
現(xiàn)在我有如下需求，子組件 <user /> 中此時(shí)有一條用戶的信息（userInfo）；我要在父組件通過(guò)插槽展示這個(gè)用戶的姓名（userInfo.name）；
注意：這里的父組件并沒(méi)有這個(gè)用戶的信息，子組件中有，如果直接在父組件{{userInfo.name}} 獲取這條信息是獲取不到的；因?yàn)?，只?<user /> 組件可以訪問(wèn)到 userInfo，而我們提供的內(nèi)容是在父組件渲染的；
模板在哪寫，就是用哪里的變量，跟插槽用在哪無(wú)關(guān)
模板是在父組件中寫好，被編譯過(guò)后，傳到子組件的插槽中的
為了讓父組件的插槽內(nèi)容可以讀取到子組件的數(shù)據(jù)，我們可以將userInfo 作為一個(gè) <slot> 元素的特性綁定上去；
// 子組件
const card = {
data() {
return {
userInfo: {name: '宮鑫'}
}
},
template: `
<div class='card'>
<!-- 在插槽上綁定子組件的數(shù)據(jù) -->
<slot :userInfo="userInfo"/>
</div>
`
};
綁定在 元素上的特性被稱為插槽 prop。現(xiàn)在在父級(jí)作用域中，我們可以給v-slot帶一個(gè)值來(lái)定義我們提供的插槽 prop 的名字：
// 父組件
template: `
<div>
<card>
<template v-slot:default="userInfo">
用戶姓名： {{userInfo}}
</template>
</card>
</div>
`
// 輸出：
// 用戶姓名： { "userInfo": { "name": "宮鑫" } }
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
今天我們來(lái)講一講大家期待已久的配色方面的干貨。其實(shí)幾年以前我就寫過(guò)一篇關(guān)于配色的文章，早期的面粉估計(jì)還有印象，在那篇文章里我基本已經(jīng)把設(shè)計(jì)師需要用的關(guān)于色彩構(gòu)成的主要精華內(nèi)容都匯總出來(lái)了（文末會(huì)附上文章鏈接的，別著急）。
但是因?yàn)椴煌O(shè)計(jì)行業(yè)的工作內(nèi)容是有差別的，而且每個(gè)人的基礎(chǔ)和理解能力也不一樣，所以僅憑一篇文章是無(wú)法解決所有人的難題的，所以今天這篇文章算是關(guān)于那篇配色知識(shí)講解文章的補(bǔ)充篇。
不過(guò)在講解如何配色之前，我們還是先應(yīng)該先記住一些關(guān)于色彩的理論知識(shí)，因?yàn)橛辛死碚撘罁?jù)我們才能在做設(shè)計(jì)的時(shí)候有理有據(jù)，而不是胡亂配色和瞎試?yán)速M(fèi)時(shí)間。
所以這篇文章主要分為了以下幾個(gè)部分：
簡(jiǎn)單點(diǎn)來(lái)說(shuō)，色彩即顏色，顏色可以分成有彩色和無(wú)彩色兩大類，看有彩色主要看色相／純度／明度三個(gè)方面的屬性，無(wú)彩色也就是白色／黑色／各種深淺不同的灰色，也可以說(shuō)無(wú)彩色是飽和度為零的色彩。
色相，即可以明確表示顏色色別的名稱，比如紅橙黃綠藍(lán)靛紫：
色彩有冷暖之分，我大致用溫度的概念標(biāo)注一下，其中「0」是指中性色，「－0」是指中性偏冷，「＋0」是指中性偏暖（當(dāng)然，這里的溫度是我自己為了具體化冷暖的概念而標(biāo)記的，主要是方便大家理解，所以不用去糾結(jié)這個(gè)數(shù)值準(zhǔn)不準(zhǔn)確哈哈，你明白他們代表很冷／很熱／一般冷／一般熱就好了！～）
明度，就是指色彩的明亮程度（通俗點(diǎn)講，在某種色彩里添加的白色越多就越明亮，添加的黑色越多就越暗）。
純度（飽和度），就是指色彩的純凈度，我以紅色舉例，如下圖所示：
如果大家想看更加詳細(xì)的關(guān)于色彩構(gòu)成原理的解說(shuō)，可以看這個(gè)系列：《優(yōu)設(shè)獨(dú)家配色專題》
不管我們做什么方面的設(shè)計(jì)，設(shè)計(jì)練習(xí)也好，實(shí)際項(xiàng)目也好，在設(shè)計(jì)之前，我們最好是能先明確我們的設(shè)計(jì)目的是什么，然后確定一個(gè)主題，依據(jù)這個(gè)設(shè)計(jì)目的和主題，去構(gòu)思創(chuàng)意，有了創(chuàng)意后再去去探討具體的落地執(zhí)行，其中包含了字體（標(biāo)題文案）的設(shè)計(jì)排版配色、畫面整體的構(gòu)圖和配色、細(xì)節(jié)優(yōu)化、氛圍渲染等等；
當(dāng)然，這一次關(guān)于其他方面的內(nèi)容我只會(huì)附帶著講一點(diǎn)，因?yàn)槲覀兘裉斓闹饕獌?nèi)容是講配色。
以我最近做的一張照片海報(bào)設(shè)計(jì)為例：
下面是我前幾天用手機(jī)拍的一張照片，照片里的內(nèi)容是我的手拿著一朵花。
1. 設(shè)計(jì)之前先確定主題
比如這一次我是確定了設(shè)計(jì)主題為：浪漫。
因?yàn)槲铱戳讼逻@張照片里面花是粉色的，我的手指甲油也是粉色系的，而我也是一個(gè)（年紀(jì)越大就越）喜歡粉色的女人～同時(shí)因?yàn)槲蚁矚g嘗試各種不同的風(fēng)格主題，浪漫這個(gè)主題我之前是沒(méi)有做過(guò)的，所以要不這一次就浪漫一回好咯。
那么說(shuō)到浪漫，大家腦海里的第一反應(yīng)會(huì)是什么呢？我不知道大家會(huì)想到什么，反正我會(huì)想到很多場(chǎng)景畫面，比如2002年的韓劇《冬季戀歌》里，男女主角在雪地里相擁的畫面，天上飄著雪花，同時(shí)背景音樂(lè)響起了《My memory》；
△ 《冬季戀歌》因?yàn)槭?002年的韓劇，所以現(xiàn)在看海報(bào)是有點(diǎn)過(guò)時(shí)了，但劇是好劇的
再比如2017年的電影《愛樂(lè)之城》里，男女主角在繁星點(diǎn)點(diǎn)的絕妙夜空下翩翩起舞和擁吻的場(chǎng)景，同時(shí)背景音樂(lè)響起了《City Of Stars》；
△ 電影《愛樂(lè)之城》海報(bào)
再比如1995年上映的宮崎駿動(dòng)漫《側(cè)耳傾聽》的結(jié)尾情節(jié)，時(shí)隔2個(gè)月才見面的男女主角一早就偷跑到一個(gè)可以俯瞰城市和日出的角落互相表白，微風(fēng)輕拂著女主的短發(fā)，一棟棟高樓彌漫在朦朧的霧氣當(dāng)中，日出的余輝映射在波瀾的水面，同時(shí)背景音樂(lè)響起了《Take Me Home, Country Roads》；
△ 宮崎駿動(dòng)漫《側(cè)耳傾聽》劇照
等等等，還有很多浪漫有關(guān)的畫面我就不多說(shuō)啦。
總之，浪漫是有很多種表現(xiàn)形式和配色的，但是有一點(diǎn)是有共通性的，那就是要想打造出浪漫的感覺，背景音樂(lè)、色彩搭配和氛圍渲染很重要。
比如除去聽覺上的背景音樂(lè)渲染氛圍以外，視覺上還有《冬季戀歌》里的白雪凱凱和雪花飄、《愛樂(lè)之城》的藍(lán)紫色夜空和繁星點(diǎn)點(diǎn)、《側(cè)耳傾聽》里的暖黃色日出和微風(fēng)波瀾。
那么回到我自己拍的這張照片上面，這種大面積的灰白色背景只能讓人感覺很性冷淡，一點(diǎn)都不浪漫，所以這張照片我肯定是要摳圖才可以用的；從我自己的年齡、喜好、原照片內(nèi)容限定等角度，可能走《愛樂(lè)之城》那種類型的浪漫色彩可能就更適合一點(diǎn)：用暗色調(diào)的紫色搭配我原本圖片就有的粉色系。
ok，分析到這里先打住，我們先不要繼續(xù)著急去細(xì)化到底該怎么去配色了這時(shí)候我們只需要有一個(gè)大概的色彩感覺就好了，因?yàn)榕渖?，我們還有很重要的一步?jīng)]有做，那就是構(gòu)圖。
2. 配色之前先構(gòu)圖
很多人之所以總是說(shuō)自己不會(huì)配色或不管怎么配色都感覺不對(duì)勁，其實(shí)是因?yàn)?，搭配顏色這個(gè)動(dòng)作不能為時(shí)太早了，你得先把你整個(gè)畫面的構(gòu)圖和基本框架先敲定了再去考慮配色。
先構(gòu)圖再配色，先構(gòu)圖再配色，先構(gòu)圖再配色，重要的事情說(shuō)三遍！～
因?yàn)闃?gòu)圖相當(dāng)于化妝的時(shí)候先打好底子，底子不打好，你再怎么化妝都是徒勞的。同理，如果你的構(gòu)圖很亂或者基本型都沒(méi)出來(lái)，你就去考慮配色，很有可能就是你磨半天都設(shè)計(jì)不出一個(gè)滿意的結(jié)果，這就是很多人磨蹭半天，做出來(lái)的設(shè)計(jì)依舊不好看的很重要的一個(gè)原因。
因?yàn)槟愕脑O(shè)計(jì)步驟錯(cuò)了。
比如我今天要拿這朵花做一幅海報(bào)，我先不考慮配色和氛圍渲染的事情，我就這樣光溜溜的排個(gè)版出來(lái)再說(shuō)，這里的排版方式和字體選擇主要考慮樂(lè)個(gè)方面，一個(gè)是照片原本的條件限制，一個(gè)是圍繞著浪漫這個(gè)主題去做，最終排版如下圖所示：
一個(gè)淺色一個(gè)深色，大家可以對(duì)比看看效果。
這幅海報(bào)就這樣隨便看看其實(shí)也是可以看的，只是缺少細(xì)節(jié)和情感，也沒(méi)有特別的吸引力罷了，最重要的是不夠浪漫。
那么到這一步，我們就可以繼續(xù)細(xì)化配色方案，分配色彩比例，優(yōu)化細(xì)節(jié)，增加最重要的一些氛圍渲染步驟了。
所以我繼續(xù)優(yōu)化海報(bào)，最終得到了下面這幅海報(bào)：
這張海報(bào)的背景是我用ps自帶的筆刷刷出來(lái)的，順著一個(gè)方向刷出一種墜感，這就是起到一種氛圍渲染的作用。
然后，雖然粉色和紫色也算是同色系的顏色了，但是因?yàn)槊髁恋姆凵c暗色調(diào)紫色在明度上有很大的落差，所以等他們組合在一起就會(huì)有一種碰撞的感覺，給人的視覺記憶力就會(huì)強(qiáng)一點(diǎn)，暗色也給人跟多神秘的感覺，讓人琢磨不透。
畢竟，讓人琢磨不透的人比一眼就能看穿的人給人更多聯(lián)想和猜測(cè)，有插曲有意外的浪漫愛情給人的印象才會(huì)比較深刻一點(diǎn)，對(duì)吧～
同時(shí)，為了方便大家理解，我又做了以下幾個(gè)版本，大家可以對(duì)比看看色彩的差異給人感覺上的變化。
比如，如果我改變畫面的明度，提高畫面的明度，如下圖所示：
這樣看，是不是畫面給人的感覺要少女很多？而且給人一種很溫柔的感覺，但是盯久了會(huì)覺得甜膩膩的。
如果前面第一版暗色調(diào)的是為20-40歲左右的女人而設(shè)計(jì)的浪漫，那么上面這一版則像是為20歲左右的小姑娘而設(shè)計(jì)的浪漫。
在這個(gè)基礎(chǔ)上，如果我既改變明度，也改變配色，給畫面加入非同色系的顏色，如下圖所示：
這樣看，其實(shí)感覺也很美對(duì)不對(duì)？美歸美，但是卻感覺比上面那一版還要膩，因?yàn)橄袷菫閮和蛐√}莉小公主而設(shè)計(jì)的浪漫了，適用的心理年齡段更小了。
ok，我們接著往下看。
如果我將背景隨便換什么顏色，但是保持背景顏色是同色系不同明度的，畫面里有明也有暗，如下圖所示：
最后出來(lái)的感覺其實(shí)也是可以的，也很美，但就是少了一些抓眼球的感覺，覺得中規(guī)中矩的，沒(méi)什么特別之處，就好比那種平平淡淡的感情，缺少激情的感情。
但是這種同色系的做法，卻是平臺(tái)和品牌為了統(tǒng)一形象方便視覺規(guī)范化管理最喜歡使用的一種配色方式，對(duì)此，大家可以去留意一下天貓或京東的一些頻道頁(yè)面或者大型活動(dòng)各個(gè)分會(huì)場(chǎng)的頁(yè)面配色。
ok，前面的配色技巧大家估計(jì)發(fā)現(xiàn)了，我要么是用同色系配色，要么是同色系改變明度和純度，要么是用不同色系不同純度但是保持明度一致，所以以這種方式去配色，無(wú)論你怎么配其實(shí)最后出來(lái)的感覺都是不會(huì)太差的，只是針對(duì)的受眾不同罷了，可以各取所需。
所以如果你不會(huì)配色的話，那么就在這些基本的框架規(guī)則里去變化就好了。這是非常保險(xiǎn)的一種配色方法。
但是如果你不遵守這種規(guī)則，而是胡亂瞎配色，則很有可能會(huì)出現(xiàn)下面這種情況，要么是畫面顯得臟，要么是畫面顯得艷俗、花哨和亂，如下圖這些錯(cuò)誤示范所示：
上面這幾幅圖雖然是一些錯(cuò)誤的配色示范，但是很多對(duì)色彩不敏感的孩子可能也會(huì)覺得：「誒，其實(shí)也還行啊」，其實(shí)主要是因?yàn)橛袠?gòu)圖的基礎(chǔ)在那里硬撐著，底子在那里，所以色彩即使配的不夠好糊弄一下也還行。
拿化妝舉個(gè)例子，為什么那些本身樣貌底子就好的人，即使亂穿衣或亂化妝你也覺得看起來(lái)還行，一旦她好好的打扮畫個(gè)妝，那簡(jiǎn)直就是神仙顏值了，可底子不好的人呢？可能你就算再會(huì)穿衣打扮，你也只能變成看起來(lái)還行，到達(dá)不了神仙顏值的地步。
所以我再?gòu)?qiáng)調(diào)一遍，配色之前先構(gòu)好圖，把底子打好，這很重要。
總結(jié)起來(lái)就是，做設(shè)計(jì)之前先確定主題，然后搭框架搞定排版樣式，接下來(lái)再考慮配色，再然后氛圍渲染，最后一步優(yōu)化細(xì)節(jié)，over。
下面這些知識(shí)點(diǎn)都是我平時(shí)總結(jié)出來(lái)的一些配色小心得，是我屢試不爽的一些方法，分享給大家。
總結(jié)來(lái)說(shuō)，我的配色技巧主要有以下幾種：聯(lián)想法、提取法、目的導(dǎo)向法則。
1. 聯(lián)想法
所謂聯(lián)想法就是，類似于頭腦風(fēng)暴那樣，當(dāng)拿到設(shè)計(jì)需求或確定設(shè)計(jì)主題后，我會(huì)提取一些關(guān)鍵詞，根據(jù)關(guān)鍵詞去聯(lián)想很多相關(guān)的可能，然后再去篩選一些結(jié)果為我所用。
比如下面這張照片，原本照片的顏色是很簡(jiǎn)單單一的。
但因?yàn)槲医o他確定的主題是「野花的回憶」，所以我就會(huì)去聯(lián)想：「野花都是什么樣的顏色？」「回憶又是什么樣的色調(diào)比較合適？」，后來(lái)我就確定了野花主要以比較艷麗的色彩居多，比如玫紅色、亮黃色、白色等等，至于回憶嘛，可能就是有年代感了，所以大的基調(diào)是暗色調(diào)的。
于是下面這幅海報(bào)的色彩搭配就出來(lái)了。
其他用聯(lián)想法配色的還有很多，比如下面這一組。
原照片：
做成海報(bào)后：
不過(guò)這里需要說(shuō)明的是，聯(lián)想法要求你會(huì)聯(lián)想，所以大家平時(shí)最好是多留意身邊的事物，多觀察大自然什么的，還有適當(dāng)去了解一下色彩心理學(xué)，你會(huì)明白每一種色彩都是可以代表不同的感情和事物的。
通過(guò)長(zhǎng)時(shí)間的鍛煉自己對(duì)于色彩的敏銳度，可以幫助你快速的配出自己想要的色彩。
2. 提取法
所謂提取法，就是當(dāng)我們拿到某一個(gè)產(chǎn)品或模特需要圍繞著它們做設(shè)計(jì)，我們就可以直接從它們身上吸取顏色，作為主色或點(diǎn)綴色都可以，這樣搭配顏色的好處就是：省時(shí)省事不容易出錯(cuò)，而且還有呼應(yīng)主題和畫龍點(diǎn)睛的效果。
比如下面這張照片，原本照片的顏色就是綠色和淡粉紫色。
那我最后做出來(lái)的海報(bào)配色也是這些顏色咯，只是文字部分單獨(dú)用了白色而已。
哦對(duì)了，一般白色和黑色這兩種無(wú)彩色都是最適合用來(lái)作為標(biāo)題或文字內(nèi)容部分的顏色的，也是最不容易出錯(cuò)的，同時(shí)聯(lián)想法和提取法其實(shí)是可以互相搭配使用的，不沖突。
但是，有時(shí)候我們?nèi)绻Ｍ嬅婵梢愿顫娨稽c(diǎn)，一般做那種比較卡哇伊風(fēng)向的設(shè)計(jì)，標(biāo)題也會(huì)用彩色，而不是黑白無(wú)彩色，至于標(biāo)題用什么彩色，也是可以用聯(lián)想法和提取法啦，如下圖所示：
3. 目的導(dǎo)向法則
前面的聯(lián)想法和提取法的配色方法是教大家如何選取顏色，但具體到哪里該用什么顏色，該用什么明度什么色相的顏色，則就取決于你的設(shè)計(jì)目的是什么了，所以我將它稱之為目的導(dǎo)向法則。
比如，之前我給大家提到過(guò)，有的設(shè)計(jì)是走藝術(shù)路線（以傳遞情緒為主，重在情緒上的表達(dá)），而不是常人理解的一般的商業(yè)設(shè)計(jì)路線（以傳遞信息為主，重在信息產(chǎn)傳達(dá)準(zhǔn)確），前者適用于一切與藝術(shù)有關(guān)的設(shè)計(jì)或設(shè)計(jì)師個(gè)人的自由創(chuàng)作，后者適用于所有以賣貨為目的的商業(yè)活動(dòng)設(shè)計(jì)。
這2種類型的設(shè)計(jì)目的是不一樣的，面向的受眾群體也不一樣，所以在色彩選擇上就會(huì)有差異。
舉個(gè)例子，當(dāng)我們提到某某平臺(tái)又做活動(dòng)了打折了，他還做了一個(gè)賣場(chǎng)促銷頁(yè)面，你去看看，絕對(duì)基本是以紅色、橙色等暖色系為主色，并且頁(yè)面氛圍做的非常熱鬧，就跟你去逛商場(chǎng)，映入眼簾的就是各種sale、大減價(jià)標(biāo)牌，并且還有人拿著喇叭大喊：「進(jìn)來(lái)看看進(jìn)來(lái)瞧瞧?。∽詈笠惶齑鬁p價(jià)買了不吃虧買了不上當(dāng)??！」的即視感。
并且，頁(yè)面里一些特別希望消費(fèi)者能注意到的信息，它一定會(huì)突出處理，不僅字號(hào)要夠大，而且在色彩上也會(huì)突出。
拿我的書《這么設(shè)計(jì)能熱賣》作為產(chǎn)品圖做個(gè)示范，我做了一個(gè)促銷海報(bào)，如下圖所示：
但是，如果你去看一些比較性冷淡或大牌畫風(fēng)的店鋪或官網(wǎng)看看，它完全就是一副我根本就不care你買不買的調(diào)調(diào)，倒不是因?yàn)樗幌胱錾?，而是他的調(diào)性就那樣，比較自我或端著。
好比人家的定位就是孤傲的，或則是你高攀不起的大小姐和公子哥類的，買ta東西的人本來(lái)也就是這種類型的，或者希望別人覺得自己就是這種類型的，畢竟要彰顯自己的身價(jià)和品味，不能掉價(jià)撒。
所以，你看ta基本不會(huì)給你看大大的字號(hào)，也不會(huì)用一些很花里胡哨的顏色在標(biāo)題上，而是以黑白灰這些無(wú)彩色居多，更不會(huì)特地用一些突出的顏色去醒目的區(qū)分一些字眼，總之頁(yè)面看起來(lái)不會(huì)有太濃的促銷氛圍
雖然我的書籍封面設(shè)計(jì)本身其實(shí)就不是性冷淡和大牌的風(fēng)格，但我依舊做個(gè)示范給大家看看，如下圖所示：
而介于這之間的，也就是那些時(shí)尚類型的，或時(shí)尚里帶點(diǎn)促銷的，或放得下身段走點(diǎn)接地氣路線的牌子，則是會(huì)在保持好看時(shí)尚的基礎(chǔ)上，依舊會(huì)適當(dāng)?shù)挠么簏c(diǎn)的字號(hào)或顯眼的顏色去突出一些重要的信息，但色彩不會(huì)用的太花哨，如下圖所示：
而像上面這種比大牌感親切一點(diǎn)又比大賣場(chǎng)時(shí)尚一點(diǎn)這種介于之間的情況則是絕大多數(shù)的，畢竟小眾的是少數(shù)，成為大牌是少數(shù)，雖然現(xiàn)在是大賣場(chǎng)但是不想走大牌路線路線的是少數(shù)，不想賺錢的商家也幾乎沒(méi)有，于是最終都淪為了不高不低的大多數(shù)。
總結(jié)來(lái)說(shuō)，目的導(dǎo)向法則可以分為2種情況：
如果你想低調(diào)一點(diǎn)內(nèi)斂一點(diǎn)，你在配色上就保守一點(diǎn)，盡量少一點(diǎn)顏色比如三種顏色以內(nèi)，或者是用同色系或柔和點(diǎn)的顏色等。
就像一個(gè)性格很溫和或者很內(nèi)向的人一樣，沒(méi)有攻擊性，安安靜靜的。
拿我之前做的一幅照片海報(bào)為例。
原先我是考慮讓這幅海報(bào)看起來(lái)有視覺沖擊力一點(diǎn)，但是我又不想畫面太過(guò)于張揚(yáng)，畢竟我那天穿的衣身衣服色彩是比較柔和的橘粉色，所以我用了對(duì)比色而沒(méi)有用同色系，同時(shí)控制畫面里的顏色不超過(guò)3種，并且這幅海報(bào)里色彩之間的明度是差不多的，如下圖所示：
但如果我用同色系不同明度和純度來(lái)配色，出來(lái)的感覺就是下面這樣的，你會(huì)感覺畫面更淑女安靜一點(diǎn)，沒(méi)有什么攻擊性：
可是如果你想更加高調(diào)張揚(yáng)一點(diǎn)，那么你在配色上就可以多用一些顏色，比如三種以上顏色，或則是用對(duì)比色或互補(bǔ)色而不是同色系配色，或則是純度高一點(diǎn)明度高一點(diǎn)的顏色，然后不同明度純度的顏色互相碰撞。
就像一個(gè)脾氣火爆性格張揚(yáng)的人，他們不愿意淹沒(méi)在人群里，而是要做人群中最醒目的那一個(gè)。
我還是那上面那張海報(bào)改個(gè)顏色給大家看看，結(jié)果如下圖所示：
如果我想繼續(xù)突出大標(biāo)題文案，那么我還可以將標(biāo)題的無(wú)彩色白色換成亮黃色，畫面里的顏色更多了，沖擊更大了，甚至你會(huì)覺得有點(diǎn)花哨：
ok，上面這幾張圖，大家對(duì)比一下就會(huì)知道這其中的差異了。
所以記住啊，配色不是亂來(lái)的，它一定是有章可循的，也是要依據(jù)你的目的來(lái)配的。
當(dāng)然，可能有人會(huì)說(shuō)：「有時(shí)客戶給的主題實(shí)在是太晦澀難懂了，我實(shí)在是聯(lián)想不出來(lái)啊」，或者給到你的產(chǎn)品本身的配色就丑的不行了，如果你直接吸取顏色那做出來(lái)的設(shè)計(jì)肯定也是丑爆了，那么，這時(shí)候就要看你是不是有一顆靈活的腦袋能夠隨機(jī)應(yīng)變咯！～
如果聯(lián)想不出來(lái)說(shuō)明你百度總可以吧，然后自己要多看多積累你的腦袋里才有貨的。
如果原產(chǎn)品本身配色就丑那你就分析它丑在哪里加以改進(jìn)不就行了嘛？比如它是因?yàn)榧兌忍吡撕芷G俗，那么用低一些純度的同色系是不是就可以了？比如如果它是因?yàn)楸旧淼纳侍嗔撕芑ㄉ?，那么我們只選取一兩種顏色用用是不是就可以了？
再比如還有人說(shuō)，給我的產(chǎn)品根本就沒(méi)有顏色，純白、純黑、純灰色，那我該怎么吸顏色啊？
天哪！～這種類型最好搞定了，因?yàn)闊o(wú)彩色就是萬(wàn)能色，無(wú)彩色無(wú)論是搭配無(wú)彩色或者其他任意有彩色都可以的，這就又回到我前面提到的目的法則了，不懂的可以回頭再仔細(xì)看看～
平時(shí)也經(jīng)常會(huì)有人問(wèn)我到底該看什么書來(lái)提高配色能力，其實(shí)我想說(shuō)只要你掌握了我前面提到的基本的色彩構(gòu)成原理這些基礎(chǔ)知識(shí)，剩下的其實(shí)都不需要你繼續(xù)去看其他的色彩書籍了。
因?yàn)榭雌渌麜疅o(wú)非就是要擴(kuò)充你的知識(shí)面罷了，它只是其中一種增加知識(shí)儲(chǔ)備的途徑而已，但現(xiàn)實(shí)是很多人寫的書一看就讓人犯困，而且晦澀難懂，你買了也是浪費(fèi)錢，倒不如通過(guò)看設(shè)計(jì)網(wǎng)站、看時(shí)尚雜志、看電影、多觀察大自然等有意思的途徑去培養(yǎng)自己對(duì)于色彩的敏銳度，然后看看我的干貨文章勤加練習(xí)，多實(shí)踐多思考來(lái)的有用。
尤其是大自然的色彩，那真的是一個(gè)超級(jí)大的配色寶藏啊，你隨便看看那些花花草草、藍(lán)天白云、日出日落、海底和大地，哪個(gè)配色不是美的讓人驚嘆？就連那些惡心的毛毛蟲都有一身好看的不行的顏色。
我們做的很多設(shè)計(jì)，不管是什么行業(yè)的設(shè)計(jì)有關(guān)顏色的，電影也好，三維也好，平面的也好，其實(shí)基本都是來(lái)源于大自然的。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
信息時(shí)代，每個(gè)人都需要具備基本的「搜索」技能，尤其是設(shè)計(jì)師，你有沒(méi)有靈感枯竭不知所措的時(shí)候呢？今天我們召集了7位優(yōu)秀設(shè)計(jì)師，對(duì)他們的設(shè)計(jì)靈感來(lái)源進(jìn)行揭秘，希望這一期的輕訪談能夠讓你輕松Get設(shè)計(jì)大佬的搜索技巧！
優(yōu)設(shè)輕訪談第八期，我們的話題是——不信息時(shí)代，能與我們分享一下你的搜索技巧么？平時(shí)的素材積累是如何進(jìn)行的？
Dribbble：https://dribbble.com/creativemints
實(shí)際上，現(xiàn)在尋找靈感或資源變得非常容易。去Pinterest，你會(huì)獲取到任何你能想到的靈感！查看stock網(wǎng)站，獲取所有你需要的資源！
△ AGE / Online courses
盡管如此，我仍然建議從外部世界獲得靈感——請(qǐng)幾天假，去一個(gè)新的城鎮(zhèn)或國(guó)家旅行，逛逛博物館，你會(huì)發(fā)現(xiàn)真實(shí)生活會(huì)成為你最重要的靈感來(lái)源。
Dribbble: https://dribbble.com/glebich
是的，你是對(duì)的，搜索技巧對(duì)產(chǎn)品設(shè)計(jì)師來(lái)說(shuō)是必不可少的。我在一家公司做了很長(zhǎng)時(shí)間的分析師和研究部門工作，在那里我負(fù)責(zé)用戶體驗(yàn)，這些經(jīng)歷幫助我理解如何搜索有意義的數(shù)據(jù)和信息，并使用它來(lái)定義一個(gè)產(chǎn)品的關(guān)鍵指標(biāo)。
但是搜索不僅僅是關(guān)于用戶分析和信息，也是關(guān)于設(shè)計(jì)語(yǔ)言——理解什么是可能的。最好的設(shè)計(jì)只有當(dāng)你跨越了可能和不可能之間的界限時(shí)才會(huì)出現(xiàn)。這種平衡基本上是一種新的設(shè)計(jì)語(yǔ)言或產(chǎn)品的品牌。
我使用Pinterest進(jìn)行圖像搜索。這個(gè)網(wǎng)站幫助我創(chuàng)建情緒板，并找到一些更具體更具象的東西，Dribbble的作品幫助我研究UI布局。然而，我不會(huì)使用Dribbble來(lái)作為我的色彩搭配靈感庫(kù)。
對(duì)于顏色，我使用自己的靈感素材庫(kù)，在我的職業(yè)生涯中，我花了大量的時(shí)間從互聯(lián)網(wǎng)上搜集素材，并進(jìn)行創(chuàng)作和整理。我也有自己的平面設(shè)計(jì)素材庫(kù)，我創(chuàng)建并管理這些素材庫(kù)大約有10年了。我?guī)缀趺刻於荚诓蹲降脑O(shè)計(jì)靈感素材。問(wèn)題不僅在于你如何搜索，還在于你如何將這個(gè)搜索結(jié)果應(yīng)用到你的工作中。
△ Water waves simulation for 3d icon
那如何應(yīng)用呢？例如，當(dāng)我看到好的設(shè)計(jì)時(shí)，我將視覺圖像結(jié)構(gòu)分離開來(lái)——有時(shí)我在情緒板中添加新圖像僅僅是因?yàn)槲蚁矚g形狀，有時(shí)是因?yàn)槲蚁矚g顏色，有時(shí)是因?yàn)閳D形效果等。在將該引用添加到庫(kù)之前，設(shè)計(jì)人員需要了解在何處可以使用以及如何使用。對(duì)于設(shè)計(jì)師來(lái)說(shuō)，搜索絕對(duì)是一項(xiàng)必不可少的技能，我通過(guò)創(chuàng)建情緒板促進(jìn)了我的搜索。
我們相信靈感無(wú)處不在，當(dāng)然也會(huì)取決于我們進(jìn)行的項(xiàng)目類型。
我們?cè)诨ヂ?lián)網(wǎng)上會(huì)搜索很多，比如Behance和Dribbble。然而，我們周圍也有很多靈感。
△ Cellebrite Pictograms
例如，如果進(jìn)行的是一個(gè)品牌項(xiàng)目，那么我們周圍的自然環(huán)境就是我們獲得靈感之所在。顏色、動(dòng)效、形狀和所有這些的組合使一切都在一個(gè)愉快的和諧場(chǎng)景中工作，這就是我們努力傳遞的。
對(duì)于UI/UX項(xiàng)目、網(wǎng)站和App設(shè)計(jì)，我們也是這樣做的，但我們主要目的是理解用戶的最終目標(biāo)和每個(gè)行動(dòng)背后的動(dòng)機(jī)。我們不僅在數(shù)字世界中研究類似的解決方案，在現(xiàn)實(shí)世界中也會(huì)尋找類似的解決方案。
Dribbble：https://dribbble.com/phamduyminh
我不在本地存儲(chǔ)靈感資源，因?yàn)橄胍奖銥g覽必須對(duì)其進(jìn)行分類，而這對(duì)于本地存儲(chǔ)來(lái)說(shuō)比較困難，所以我非常依賴于在線資源，它們有很好的搜索引擎，所以，為什么不呢？
基于不同的目的，我更喜歡從多種來(lái)源獲得靈感:
說(shuō)到尋找靈感，我認(rèn)為有兩種人：使用Dribbble的人和使用Behance的人。Dribbble更像快餐，在這里你可以迅速的飽腹，Behance更像一家高檔餐廳，你可以在那里度過(guò)整個(gè)晚上。
我個(gè)人喜歡吃快餐。我喜歡每天早上上班前查看Dribbble，當(dāng)我發(fā)現(xiàn)好東西的時(shí)候，我就把它存起來(lái)以后用。
△ Promo Website Animation for Pocket Multilingual Assistant
如果你正在尋找真正的案例，而不僅僅是概念稿，你可以在Awwwards上找到一些主流的東西，也可以在這里找到一些更奇怪的東西。
哦，還有Pinterest，它的優(yōu)勢(shì)是推薦你可能喜歡的東西。我經(jīng)常用它來(lái)做情緒板和尋找參考素材。
如果是插畫資料，沒(méi)有比Dribbble和Behance更好的地方了。只要滾動(dòng)鼠標(biāo)，所有的好東西和你喜歡的藝術(shù)家都會(huì)一步添加到你喜歡的作品中，簡(jiǎn)單!
△ Tempers Flare
Pinterest有利于發(fā)現(xiàn)新的想法、主題、不尋常的元素和靈感。每天瀏覽這些平臺(tái)也會(huì)讓你培養(yǎng)出一雙訓(xùn)練有素的眼睛，這對(duì)提高你自己作品的質(zhì)量和風(fēng)格至關(guān)重要?！?
Dribbble: https://dribbble.com/febinraj
我每天都想更新！我認(rèn)為這是件大事。因?yàn)檫@個(gè)世界瞬息萬(wàn)變。
△ Evening From Kerala
通常，我的主要搜索源是Behance和Dribbble，同時(shí)我從其他來(lái)源獲取了更多的數(shù)據(jù)，比如文章，博客。
Behance: www.behance.net/yihsuanli
信息時(shí)代，每個(gè)人都必備一個(gè)「搜索」技能，尤其是設(shè)計(jì)師，很多人在接單后,可能會(huì)第一時(shí)間在網(wǎng)絡(luò)中或者日常的資料擴(kuò)中搜索素材、參考、靈感等。
我還記得剛開始接觸設(shè)計(jì)時(shí)因?yàn)闆](méi)有太多經(jīng)驗(yàn)，常常因?yàn)橘Y料整理太久，壓縮了執(zhí)行時(shí)間，最后反而虎頭蛇尾的完成作品。雖然創(chuàng)作作品時(shí)資料搜集、調(diào)查很重要，但其實(shí)整體過(guò)程有更有效率的方法。其實(shí)收集資料也是需要練習(xí)的，通過(guò)經(jīng)驗(yàn)累積，可以漸漸增加效率與快速找到最精準(zhǔn)的訊息，避免漫無(wú)目的搜尋。
△ ZENWATER
Work hard 不如 Work smart, 有了較有系統(tǒng)的資料搜尋方式后，可以將時(shí)間留給創(chuàng)作和嘗試。隨著經(jīng)驗(yàn)累積，我開始養(yǎng)成了一些小技巧幫助自己更有效率的搜集資料，大家可以酌量參考：
1. 先用樹狀圖整理出關(guān)鍵字
在開始找資料前我會(huì)先把設(shè)計(jì)關(guān)鍵字整理出來(lái)，先從Google或百度等網(wǎng)站去搜尋相關(guān)的話題或圖片，以此方式讓思考可以更突破。例如，我要做一張音樂(lè)會(huì)的海報(bào)，開始前，我會(huì)先寫下關(guān)鍵字，例如：樂(lè)器、鋼琴、音樂(lè)、琴鍵、流動(dòng)、彈奏….，接著利用這些關(guān)鍵字進(jìn)行中英文查詢，隨著找到越來(lái)越多資料，可以從其中找到更多可能性的延伸。這個(gè)階段搜尋目的是從抽象方向出發(fā)，避免找到與別人相似的元素。一個(gè)一個(gè)關(guān)鍵字搜尋后，就可以把其中好的圖片整理再一起，收斂成更明確的設(shè)計(jì)方向。
2. 擅用IG的＃hashtag功能
除了使用搜尋網(wǎng)站尋找資料，我覺得IG（instagram ）也是一個(gè)不錯(cuò)的選擇。我會(huì)用IG 的hushtag去找大家對(duì)于某一個(gè)單字不同的想像，例如找#music，在其中除了可以找到音樂(lè)相關(guān)的畫面，有時(shí)候也可以找到不同場(chǎng)域里的音樂(lè)元素。除了找靈感外，我也會(huì)利用hushtag搜集的設(shè)計(jì)作品，例如找#logo#graphicdesign時(shí)，可以看到大家正在進(jìn)行中的作品，或是還未整理好放上Behance的作品。
△ One Team One Goal / IBM Taiwan Sport Day
3. 以pinterest分類整理資料庫(kù)
我平常就有整理pinterest的習(xí)慣，建立資料庫(kù)的習(xí)慣除了為了特定專案外，我也會(huì)以設(shè)計(jì)種類分類作品，例如以CI、packaging、poster…分類。除此之外，以風(fēng)格分類的資料庫(kù)也是必要的，例如：東方風(fēng)格、美式、日本風(fēng)格、歐式….。這些平常就累積好的資料庫(kù)能夠讓我搜尋作品資料時(shí)，有一個(gè)快速的開始。 Pinterest會(huì)依據(jù)風(fēng)格推薦更多的作品給使用者，因此當(dāng)平常有了足夠的累積，尋找資料就會(huì)有效率很多，能夠快速找到很多需要的作品風(fēng)格。
4. Behance搜集不同風(fēng)格的設(shè)計(jì)師
Follow特定設(shè)計(jì)師的IG或是Behance也是我搜集資料的一個(gè)方法。我會(huì)搜集一群在每個(gè)領(lǐng)域最具代表性的設(shè)計(jì)師。在找不到靈感時(shí)，我會(huì)不斷瀏覽他們的作品集，試著從他們角度出發(fā)，思考如果是他們遇見這個(gè)題目，他們可能怎么發(fā)展。除此之外，他們也是一個(gè)完整的風(fēng)格庫(kù)，每個(gè)作品都是該領(lǐng)域的標(biāo)竿，當(dāng)客戶有特定風(fēng)格的需求時(shí)，能夠快速給自己一個(gè)明確的目標(biāo)，期許自己能夠達(dá)到他們作品的高度。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
今天遇到的就是z-index不起作用的問(wèn)題。一個(gè)后臺(tái)小哥不知道抽什么瘋，寫元素覆蓋偏不讓用absolute，搞的我之后廢了9牛二虎之力寫了一下，問(wèn)題描述是這樣的，
一對(duì)兄弟節(jié)點(diǎn),insert和parent，parent有兩個(gè)子節(jié)點(diǎn)subtop和subbottom，展現(xiàn)的結(jié)果是想讓subtop在insert上面，subbottom在insert下面，
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.insert{
position: relative;
z-index:100;
background: green;
width:300px;
height:300px;
top:100px;
}
.parent{
/*position:relative;
z-index: 1000;*/
width:200px;
height:200px;
/*left:0;
top:-50px;*/
border:1px solid #eee;
}
.subbottom{
position:relative;
z-index: 50;
width:200px;
height:200px;
background: red;
top:-100px;
left:0;
}
.subtop{
position: relative;
z-index:1100;
width:100px;
height:100px;
left:0;
top:0;
background: blue;
}
</style>
</head>
<body>
<div class="insert"></div>
<div class="parent">
<div class="subtop"></div>
<div class="subbottom"></div>
</div>
</body>
</html>
其實(shí)原理也很簡(jiǎn)單，就是利用了z-index的覆蓋問(wèn)題，在寫的過(guò)程中我發(fā)現(xiàn)無(wú)論怎么改變，insert的z-index總是無(wú)效的，于是百度了一下z-index無(wú)效的情況，一共有三種：
1、父標(biāo)簽 position屬性為relative；
2、問(wèn)題標(biāo)簽無(wú)position屬性（不包括static）；
3、問(wèn)題標(biāo)簽含有浮動(dòng)(float)屬性。
這樣也很好理解為什么parent設(shè)置了position和z-index之后insert的z-index就會(huì)失效的問(wèn)題了，他的解決辦法有是三個(gè)：
1、position:relative改為position:absolute；
2、浮動(dòng)元素添加position屬性（如relative，absolute等）；
3、去除浮動(dòng)。
所以，去掉parent的position和z-index，達(dá)到了我想要的效果，如下圖所示：
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
我們都知道UI設(shè)計(jì)并不僅僅是做出好看的東西，還涉及到交互和數(shù)據(jù)還有轉(zhuǎn)化率，就像是設(shè)計(jì)師通過(guò)界面在于用戶交流一樣，而底部導(dǎo)航欄就是交流對(duì)話中的一個(gè)。因?yàn)槿绻脩暨B他們?cè)诋a(chǎn)品的哪里都不知道，那么我們的設(shè)計(jì)再好優(yōu)秀也是沒(méi)用的。
底部導(dǎo)航欄的用法
底部導(dǎo)航欄在屏幕底端展示3至5個(gè)目標(biāo)選項(xiàng)，每一個(gè)選項(xiàng)由一個(gè)圖標(biāo)和文字標(biāo)簽展示，點(diǎn)擊底部導(dǎo)航圖標(biāo)時(shí)，將帶領(lǐng)用戶前往與之關(guān)聯(lián)的視圖。
這里將目標(biāo)選項(xiàng)放在底部的原因是，在手持的移動(dòng)設(shè)備上容易被觸及，符合拇指定律，方便用戶單手操作。
底部導(dǎo)航欄的展示
根據(jù)我的觀察，底部導(dǎo)航欄的表現(xiàn)形式一般分為三種，首先我們先來(lái)說(shuō)第一種：
1、文字+圖標(biāo)
大部分的平臺(tái)都是使用的扁平風(fēng)格，只有在節(jié)假日的時(shí)候才會(huì)出現(xiàn)，而多數(shù)情況下，我們常見的底部導(dǎo)航欄都是以文字+圖標(biāo)的形式出現(xiàn)，在選中的狀態(tài)下，設(shè)計(jì)師也會(huì)根據(jù)對(duì)整體風(fēng)格的把控和產(chǎn)品調(diào)性，增加一些變化和趣味，來(lái)突出產(chǎn)品的風(fēng)格。如下圖所示：
全名K歌和知乎的底部導(dǎo)航欄就是使用文字加圖標(biāo)的形式，其中全名K歌的底部圖標(biāo)增加了一些有趣的變化，讓底部圖標(biāo)變得更有趣，同時(shí)文字的存在能夠更好的讓用戶對(duì)圖標(biāo)進(jìn)行理解，提高用戶識(shí)別效率。
2、文字
文字按鈕目前來(lái)說(shuō)產(chǎn)品里使用的也是比較多的，大多出現(xiàn)在以圖片和視頻為主的產(chǎn)品和界面中，如下圖所示：
抖音、美圖秀秀、小紅書，這三款A(yù)PP的底部導(dǎo)航欄都是文字作為模塊切分，在使用的過(guò)程中，更能夠關(guān)注與閱讀內(nèi)容，底部操作欄視覺層級(jí)相比上面的那種層級(jí)比較低，不影響瀏覽視覺，同時(shí)文字按鈕降低了用戶的理解成本。
3、圖標(biāo)
單圖標(biāo)按鈕是很少見的，很多圖標(biāo)都沒(méi)有很強(qiáng)的識(shí)別度，所以僅僅用圖標(biāo)放在底部操作欄，會(huì)造成用戶的認(rèn)知負(fù)擔(dān)，不建議使用獨(dú)立的按鈕。如下圖所示：
VSCO是一款給用戶推薦產(chǎn)品的APP，因此底部操作欄只有三個(gè)按鈕，從設(shè)計(jì)的架構(gòu)和產(chǎn)品的邏輯上來(lái)說(shuō)，比較有利于用戶對(duì)圖標(biāo)點(diǎn)擊操作。
Same的是一款社交的APP，有別于目前的大部分產(chǎn)品，它的底部是使用的單圖標(biāo)的形式，雖然整體界面比較簡(jiǎn)約，但是辨識(shí)度比較低，造成了使用產(chǎn)品時(shí)的認(rèn)知負(fù)擔(dān)。
小總結(jié)：
1、當(dāng)頁(yè)面圖片以圖片為主時(shí)，使用純文字或者純圖標(biāo)的能夠降低底部圖標(biāo)對(duì)用戶造成的干擾，但是純圖標(biāo)的底部導(dǎo)航欄降低了用戶的識(shí)別度，引起用戶使用時(shí)的認(rèn)知負(fù)擔(dān)。
2、文字+圖標(biāo)的搭配屬于最穩(wěn)妥的方式，適用于大部分的產(chǎn)品底部圖標(biāo)設(shè)計(jì)。
底部導(dǎo)航欄圖標(biāo)的設(shè)計(jì)
當(dāng)我們準(zhǔn)備做APP底部導(dǎo)航欄設(shè)計(jì)的時(shí)候，不知道大家有沒(méi)有遇到過(guò)經(jīng)常不知道該用面性還是線性的糾結(jié)中，究竟要選擇哪種對(duì)用戶來(lái)說(shuō)才是合適的呢？
大多數(shù)的人會(huì)覺得是出于個(gè)人喜好，但是一項(xiàng)名為《面性圖標(biāo)vs線性圖標(biāo)，對(duì)于可用性方面的影響》的研究表明：不同的圖標(biāo)存在著不同的識(shí)別效率，而面性圖標(biāo)一般會(huì)比線性圖標(biāo)更快被用戶所識(shí)別。
1、特征線索
用戶要辨認(rèn)圖標(biāo)依靠的就是特征線索，如果一個(gè)圖標(biāo)沒(méi)有明顯的特征，是很難被用戶所識(shí)別出來(lái)的。如下圖所示：
如上圖所示，發(fā)現(xiàn)的特征線索是它的眼睛，沒(méi)有眼睛，發(fā)現(xiàn)就是個(gè)橢圓；目的地的線索特征就是中間的圓，沒(méi)有了中間的圓，就是個(gè)小氣泡；行程是做成了行李的樣子，而沒(méi)有了行李箱上的特征標(biāo)志，就變成了一個(gè)很普通的包。
所以圖標(biāo)上的特征線索是用戶識(shí)別的關(guān)鍵，在我們?cè)O(shè)計(jì)圖標(biāo)的時(shí)候，一定要確保它包含了用戶識(shí)別的線索。
2、什么情況下用線性圖標(biāo)？
圖標(biāo)除了要包含特征線索以外，線性和面性圖標(biāo)之間也有區(qū)別，當(dāng)一些圖標(biāo)的外部特征為它的特征線索時(shí)，線性圖標(biāo)會(huì)比面性圖標(biāo)的識(shí)別度來(lái)的更為突出。
當(dāng)我們的底部圖標(biāo)的信息屬于特征線索比較微妙，并且出現(xiàn)在邊緣的時(shí)候，我們可以使用線性圖標(biāo)，或者換個(gè)角度來(lái)說(shuō)，就是當(dāng)我們選擇底部圖標(biāo)為線性的表現(xiàn)形式的時(shí)候，在圖標(biāo)的表現(xiàn)形式上，盡量往形狀的邊緣特征來(lái)靠，這樣能夠讓圖標(biāo)更加突出并且很快被識(shí)別。
3、什么情況下用面性？
大多數(shù)圖標(biāo)其實(shí)就是將現(xiàn)實(shí)生活中的對(duì)象變成一個(gè)小縮影，因此面性剪影的圖標(biāo)形式認(rèn)知高于線性圖標(biāo)。
盡管如此，用戶還是能夠識(shí)別線性圖標(biāo)，但是當(dāng)圖標(biāo)的內(nèi)部空間比較狹窄的時(shí)候，用戶識(shí)別線性圖標(biāo)需要花費(fèi)更多的時(shí)間來(lái)識(shí)別。
對(duì)于內(nèi)部空間比較擁擠，或者線條比較多的圖標(biāo)，最好使用面性圖標(biāo)，剪影的表現(xiàn)方式提供了一個(gè)更簡(jiǎn)潔也更具辨識(shí)度的方式，從這里我們可以發(fā)現(xiàn)一個(gè)事實(shí)，線性圖標(biāo)的設(shè)計(jì)表現(xiàn)要求要高于面性圖標(biāo)，因?yàn)榫€性圖標(biāo)要在具有表現(xiàn)力的同時(shí)還需要有很高的識(shí)別度，同時(shí)不能太過(guò)復(fù)雜，內(nèi)部不能過(guò)于擁擠。
劃重點(diǎn)
1、當(dāng)頁(yè)面圖片以圖片為主時(shí)，使用純文字或者純圖標(biāo)的能夠降低底部圖標(biāo)對(duì)用戶造成的干擾；
2、文字+圖標(biāo)的搭配屬于最穩(wěn)妥的方式，適用于大部分的產(chǎn)品底部圖標(biāo)設(shè)計(jì)。
3、圖標(biāo)是由有識(shí)別度的特征線索組成的，而面性圖標(biāo)的識(shí)別度速度更快；
4、線性圖標(biāo)的內(nèi)部間距比較寬的時(shí)候，更容易識(shí)別，內(nèi)部間距比較窄的時(shí)候，使用面性圖標(biāo)會(huì)更好；
5、圖標(biāo)的特征線索在邊緣的地方，使用線性的圖標(biāo)識(shí)別度更高。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com