設(shè)計(jì)師詳解電商設(shè)計(jì)中的極簡(jiǎn)設(shè)計(jì)風(fēng)格

耐克的設(shè)計(jì)同樣是采用這個(gè)方法,一般來(lái)說(shuō)廠商想要特意退爆款會(huì)選擇一種爆款的顏色或配色,而耐克這樣設(shè)計(jì)的頁(yè)面也是更好的展示了這個(gè)商品的獨(dú)特的特點(diǎn),讓人們?cè)谌魏蔚胤娇吹竭@種顏色都會(huì)回想起耐克的這款鞋。
C、使用的顏色不要超過(guò)3種。
通過(guò)上面的案例我們發(fā)現(xiàn),這些設(shè)計(jì)師所用的顏色都不會(huì)超過(guò)3種,而做為極簡(jiǎn)設(shè)計(jì)有時(shí)候只使用2種顏色,甚至只用黑白灰的變化來(lái)進(jìn)行設(shè)計(jì)。
2.看似很復(fù)雜的顏色搭配其實(shí)很簡(jiǎn)單
在極簡(jiǎn)設(shè)計(jì)中,顏色的搭配需要非常用心,因?yàn)楫?huà)面的顏色搭配簡(jiǎn)單時(shí),即使稍微有點(diǎn)不協(xié)調(diào)也會(huì)被放大很多,因此我們需要了解顏色的幾個(gè)屬性:色相、飽和度、明度,還有對(duì)比色、相近色等概念。
對(duì)于極簡(jiǎn)設(shè)計(jì)的配色也有幾個(gè)方法:
A、 統(tǒng)一明度和飽和度;
下圖中的明度和飽和度非常協(xié)調(diào),既不覺(jué)得哪個(gè)顏色過(guò)亮也不覺(jué)得哪個(gè)顏色過(guò)暗。雖然是不同的顏色,但是整個(gè)畫(huà)面也是非常協(xié)調(diào)統(tǒng)一的,我們現(xiàn)在分析一下畫(huà)面的顏色。
我們來(lái)看一下,上面4個(gè)圓形中的顏色是我從圖片中提取出來(lái)的,下面4幅圖是顏色的位置和參數(shù),主要看顏色的位置,就是每幅圖的圓圈位置,我們看到圖中有兩條線,這兩條線就是代碼這4個(gè)顏色的明度,可以看到綠色和橘色的明度位置非常相近,黃色和深藍(lán)色的明度位置也很相近,綠色和橘色占整個(gè)畫(huà)面的絕大面積,因此整個(gè)畫(huà)面看起來(lái)是非常協(xié)調(diào)的。而飽和度就是越接近色板的右上角飽和度就越高,我們看到除了深藍(lán)色,其他3種顏色都處于飽和度比較高的位置,并且位置比較靠近。
大家可以用這兩幅設(shè)計(jì)來(lái)實(shí)驗(yàn)一下,自己親手解構(gòu)一下配色的明度和飽和度。而我覺(jué)得做為設(shè)計(jì)師對(duì)于顏色的細(xì)致理解是非常有必要的。
B、控制顏色的層次;
所謂顏色的層次我們依然用小牛電動(dòng)車(chē)的圖來(lái)分析,可以看到所有的顏色都提取出來(lái)后圓形中的顏色。
這樣我們很容易的就能看出來(lái)顏色的層次,灰色系有7個(gè)層次,而紅色系有4個(gè)層次,正因?yàn)檫@樣的層次讓整個(gè)設(shè)計(jì)顯得非常豐富,并且有立體感而不至于太“平”。
三、考究的字體
文字在電商設(shè)計(jì)中的位置極其重要,它承擔(dān)著直觀信息傳播的用途,例如活動(dòng)頁(yè)面的折扣信息、商品宣傳頁(yè)面的賣(mài)點(diǎn)信息、商品的優(yōu)惠價(jià)格、文案內(nèi)容的表現(xiàn)等。而在極簡(jiǎn)設(shè)計(jì)中,字體的選擇更為講究。
1.選用符合整體設(shè)計(jì)風(fēng)格的字體
字體也是有自己的外貌、性格和風(fēng)格的,當(dāng)字體的風(fēng)格與設(shè)計(jì)完美的融合在一起的時(shí)候,會(huì)給整個(gè)設(shè)計(jì)加分不少。
上面的兩張圖是“什么值得買(mǎi)”的閃屏頁(yè)面,我們來(lái)仔細(xì)觀察一下眼鏡、相機(jī)與字體(文案)的關(guān)系。眼鏡和相機(jī)的款式都是非常復(fù)古的,有種民國(guó)時(shí)代的感覺(jué),因此設(shè)計(jì)師選用了一種仿古字體來(lái)配合圖案,給人非常統(tǒng)一的感覺(jué),配上精彩的文案就會(huì)給人一個(gè)民國(guó)時(shí)期的場(chǎng)景,這也可以叫帶入感。如果我們把圖中的字體換成非?,F(xiàn)代的藝術(shù)字會(huì)怎么樣?
換了字體后可以看出,雖然每個(gè)字體單獨(dú)看都不錯(cuò),但是與配圖放在一起就感覺(jué)非常的不搭,立刻失去了文案和圖片想要傳達(dá)的那種“工匠”的感覺(jué)。
英文的選擇也是如此,看上圖,英文Animal Prints是動(dòng)物圖案的意思,你會(huì)發(fā)現(xiàn)右側(cè)的女性人物應(yīng)該是穿著一條連衣裙的,因此我猜測(cè)這是賣(mài)女性服裝的一個(gè)Banner,而且是屬于比較成熟的那種(看模特身材就能看出來(lái)),因此在選擇字體的時(shí)候應(yīng)該選擇偏細(xì)膩柔美的字體,而不是黑粗體。
來(lái)看看下圖,感覺(jué)是不是差了很多?
下面再來(lái)看幾組圖例,試著自己分析一下。
相關(guān)文章
全畫(huà)幅不是半畫(huà)幅的兩倍有什么區(qū)別? 聊聊相機(jī)的傳感器尺寸
說(shuō)到相機(jī)畫(huà)幅,估計(jì)平時(shí)聽(tīng)到最多的可能就是全畫(huà)幅與半畫(huà)幅了,以至于不少人認(rèn)為中畫(huà)幅比全畫(huà)幅要小,為了避免這種常識(shí)性錯(cuò)誤,這篇文章就來(lái)和大家說(shuō)說(shuō)相機(jī)的不同畫(huà)幅,所謂2025-04-07a5紙與a4紙?jiān)趺催x? a5紙與a4的區(qū)別介紹
4紙和A5紙因其尺寸適中,使用尤為廣泛,但你知道它們之間有何區(qū)別嗎?今天,就讓我們一起來(lái)探討這個(gè)話題2025-02-01各類(lèi)商務(wù)印刷品的尺寸怎么選? 印刷設(shè)計(jì)常用的尺寸紙張/克重都在這里了
日常經(jīng)常印刷各種東西,哪些尺寸,紙張更合適呢?本文為大家整理了常用印刷尺寸,方便圖文廣告店、印企在日常接單生產(chǎn)中能夠快速掌握客戶關(guān)鍵性信息,詳細(xì)請(qǐng)看下文介紹2024-02-10常用照片尺寸有哪些 常見(jiàn)證件照尺寸對(duì)照表及用途介紹
現(xiàn)如今,證件照已成為我們生活中不可或缺的一部分,無(wú)論是求職應(yīng)聘,還是入學(xué)注冊(cè),亦或是辦理各種證件,都需要提交符合規(guī)定格式和要求的證件照,那么,這些證件照的尺寸和2024-02-10- 平面設(shè)計(jì)是一個(gè)注重視覺(jué)效果的設(shè)計(jì),簡(jiǎn)單的排版方式有時(shí)候不能滿足視覺(jué)突出的效果,業(yè)務(wù)很難達(dá)到吸引用戶的眼球,下面我們就來(lái)看看8個(gè)平面設(shè)計(jì)技巧分享2023-10-08
如何選擇平面設(shè)計(jì)工具? 這10款軟件應(yīng)該收入囊中
每個(gè)設(shè)計(jì)師都有自己最喜歡的設(shè)計(jì)軟件,并把軟件作為自己的第二語(yǔ)言,今天我們來(lái)推薦10款UI設(shè)計(jì)不可或缺的工具,詳細(xì)請(qǐng)看下文介紹2023-10-08夏日電影風(fēng)怎么調(diào)色調(diào)色? 適合夏季的柔和綠色調(diào)調(diào)色分享
夏日電影風(fēng)怎么調(diào)色調(diào)色?夏天快到了,想要調(diào)節(jié)夏季電影風(fēng)的畫(huà)面,該怎么操作呢?下面我們就來(lái)看看適合夏季的柔和綠色調(diào)調(diào)色分享2023-04-02什么是真RAW 什么是偽RAW? 簡(jiǎn)單說(shuō)說(shuō)真 RAW 和 偽RAW
隨著索尼α7RV(ILCE-7RM5)正式發(fā)售,近期有不少網(wǎng)友跟我咨詢索尼相機(jī)“無(wú)損壓縮(M)”和“無(wú)損壓縮(S)”RAW的問(wèn)題,今天做一個(gè)統(tǒng)一答復(fù)2022-12-24手機(jī)UI設(shè)計(jì)尺寸有哪些? 超全面的UI元素尺寸設(shè)置指南
手機(jī)UI設(shè)計(jì)尺寸有哪些?作為新手在設(shè)計(jì)手機(jī)ui的頁(yè)面的時(shí)候,發(fā)現(xiàn)自己設(shè)計(jì)的尺寸都很奇怪,如果能有元素尺寸介紹就好了,下面就來(lái)看看我們匯總的超全面的UI元素尺寸設(shè)置指南2021-08-06常用照片尺寸有哪幾個(gè)? 照片標(biāo)準(zhǔn)尺寸/像素對(duì)照表匯總
常用照片尺寸有哪幾個(gè)?我們經(jīng)常說(shuō)一寸照片,二寸照片,這些照片的尺寸是怎么計(jì)算的?下面我們就來(lái)看看照片標(biāo)準(zhǔn)尺寸/像素對(duì)照表匯總2021-08-06