巧用9大服裝穿搭技巧,助你輕松搞定專題頁設(shè)計(jì)!
到目前為止,我已經(jīng)寫了好幾十篇關(guān)于Banner設(shè)計(jì)的文章了,目前應(yīng)該還沒有人把Banner設(shè)計(jì)講出這么多門道出來吧(臉紅ing……哈哈)。但是,我今天想升級(jí)一下,不講Banner設(shè)計(jì)了,而是給大家講一下Banner設(shè)計(jì)的進(jìn)階版——專題頁設(shè)計(jì)(做好專題頁的前提就是做好Banner設(shè)計(jì),這也為什么我會(huì)在前面那么大篇幅講Banner設(shè)計(jì)的原因咯)。
一、專題頁設(shè)計(jì)的作用是什么?
專題頁一般有3類:信息展示類型/純賣貨類型以及兩者的結(jié)合。
所謂信息展示類型就是,它只是用來展示信息用的。比如誰誰獲獎(jiǎng)了/誰誰又有什么新鮮玩意,又要舉辦什么大型活動(dòng)了,想要告知大家,所以需要做一個(gè)專題頁公告天下。
就像一些影視方面的年度盛典專題頁設(shè)計(jì),如下圖:
而賣貨類型的專題頁就比較常見了,比如各大電商平臺(tái)的活動(dòng)專題頁。
信息展示和賣貨的結(jié)合,就是現(xiàn)在比較流行的一種專題頁了,相當(dāng)于一邊解說介紹,一邊賣貨,增加了與用戶之間的互動(dòng)和購買欲望,比如在時(shí)尚穿搭/護(hù)膚美容/吃喝玩樂等專題里用的較多:
二、專題頁由哪些部分組成?
雖然我們現(xiàn)在可以看到各種樣式形式的專題頁,但是它們脫去那些華麗的外衣后,即使都是很基本的原型圖,我拿一個(gè)最基礎(chǔ)的專題頁基本型給大家看一下,大家就知道了。
一般來說,專題頁由這幾個(gè)部分組成:頭部Banner+至少1個(gè)樓層模塊+背景+氛圍點(diǎn)綴物。如下圖所示:
其中,頭部Banner我在前面寫過好幾十篇文章介紹了,大家應(yīng)該都不陌生了吧,然后樓層模塊從上之下你想放多少個(gè)就放多少個(gè),形式也可以多種多樣,最后的背景和氛圍點(diǎn)綴物跟Banner設(shè)計(jì)里的是同理的。我在前面也反復(fù)提到,這里也不做過多說明了。
三、專題一般都有哪些布局形式呢?
我簡(jiǎn)單給大家總結(jié)了一下:
左右對(duì)比形式的專題頁,常見于需要表現(xiàn)出PK或者VS對(duì)決類的專題頁設(shè)計(jì)。
S形的專題頁,這種形式的專題頁基本上不管什么需求的設(shè)計(jì)都可以嘗試,因?yàn)樗啾扔谄戒佒睌⒌男问郊炔粫?huì)顯得那么呆板,同時(shí)閱讀起來也很流暢,舉例:
Z形的專題頁,這種形式的專題頁其實(shí)跟S形的作用是類似的,只是說這種Z形會(huì)比S形硬朗,更適合用作一些比較男性化的風(fēng)格頁面或者品類里,比如電子器械/汽車/男士護(hù)膚/游戲等,舉例:
1字形的專題頁,有一種硬朗和厚重的感覺,這種形式的專題頁除非是有如下圖所示的這種高質(zhì)量模特大圖或產(chǎn)品圖鎮(zhèn)樓,一般情況下很少用到,尤其是在賣貨類型的專題頁里,可能會(huì)顯得背景有點(diǎn)搶鏡了。
常規(guī)樓層類型的專題頁,這種頁面會(huì)顯得比較簡(jiǎn)潔好把控,主要在于背景顏色要有深-淺-深-淺的節(jié)奏,同時(shí)每一個(gè)樓層都是單獨(dú)的模塊,有利于信息閱讀。
同理,樓層類型的專題頁還可以做一些一些細(xì)微的演變,比如從上至下,背景不做切割,始終是一個(gè)整體,只是保證中間的內(nèi)容在一個(gè)安全數(shù)值以內(nèi)就好了,比如京東的中間內(nèi)容區(qū)域一般是990Px:
還有在原來的基礎(chǔ)上,在某一塊樓層里做一些排版小變化,比如切分成一小塊i一小塊的自由排版:
自由排版類型的專題頁,這種專題頁設(shè)計(jì)比較適合那些想走高逼格路線的時(shí)尚服飾類目,同時(shí)這種設(shè)計(jì)往往是看著簡(jiǎn)潔,但是對(duì)設(shè)計(jì)師的排版功力要求比較高,不建議新手或沒什么功力的人嘗試:
四、做專題好比穿衣搭配,它們有哪些基本規(guī)則和技巧呢?
我給大家總結(jié)了下面9個(gè)規(guī)則和技巧,如果你經(jīng)常在做專題頁設(shè)計(jì)的卡頓了,或者不知道該如何將頁面優(yōu)化細(xì)化下去,也許下面這9個(gè)規(guī)則和技巧會(huì)對(duì)你有幫助。接下來我一個(gè)個(gè)給大家舉例解釋這9個(gè)技巧。
1、首尾呼應(yīng)
說到服裝搭配,我們打量一個(gè)人會(huì)從頭看到腳,很多人都喜歡戴帽子/圍巾/頭飾等,如果這些上半身的裝飾物的顏色或紋理質(zhì)感恰巧跟你下半身的鞋子或襪子的質(zhì)感/紋理/顏色有一些呼應(yīng),那整個(gè)一身搭配就會(huì)感覺特別整體,甚至起到首尾呼應(yīng)的作用,舉例:
我們做專題頁一般都是從上至下,從搭框架到細(xì)化細(xì)節(jié)的順序,所以當(dāng)你做完專題頁的時(shí)候可以檢查一下自己是否做到了首尾呼應(yīng),比如:
其好處就是,避免頁面太過單調(diào),同時(shí)可以讓頁面看起來更整體。
2、巧用對(duì)比(明暗/粗細(xì))
跟服裝搭配一樣,一個(gè)人如果上下身穿的一樣寬松那整個(gè)人看起來就會(huì)非常矮胖,也就不美觀了,如果一身衣服都是暗色就會(huì)顯得壓抑不透氣,如果都是亮色又會(huì)顯得有點(diǎn)膩,有明有暗的搭配會(huì)更耐看更舒服,舉例:
那其實(shí)做專題頁設(shè)計(jì)也是一樣咯,頁面中要有對(duì)比,比如背景層次里明暗的對(duì)比,紋理質(zhì)感的對(duì)比等:
3、揚(yáng)長(zhǎng)避短
完美的人或身材很少,大部分人都是有或這或那的缺點(diǎn)的,比如有的人可能上身長(zhǎng)下身短,有的人可能上身瘦下身胖等等,有各種各樣的小問題,通過穿合適的衣服都可以得到解決。
比如,上身長(zhǎng)下身短或者上身瘦下身胖的妹子都比較適合穿長(zhǎng)款衣服或裙子,將不完美的地方遮蓋起來,同時(shí)把腳踝關(guān)節(jié)和小手臂這些很廋的地方露出來,整個(gè)人就顯得纖瘦纖瘦的啦:
那放到專題頁設(shè)計(jì)里是怎么一回事呢?這個(gè)要從2個(gè)方面來說了:
- 從設(shè)計(jì)師的角度來說,所謂揚(yáng)長(zhǎng)避短就是,每個(gè)設(shè)計(jì)都是有自己的擅長(zhǎng)點(diǎn)和短板的,如果你是手繪厲害的設(shè)計(jì)師而在做光彩炫酷方面比較弱,那肯定還是盡量做手繪方面的設(shè)計(jì)會(huì)更得心應(yīng)手;
- 從需求設(shè)計(jì)的角度來說,所謂揚(yáng)長(zhǎng)避短就是,找最合適的素材,選用最好的模特或商品角度,選用最合適的風(fēng)格來執(zhí)行你的設(shè)計(jì),把所有的長(zhǎng)處展現(xiàn)出來。
比如在這個(gè)專題頁設(shè)計(jì)里,因?yàn)闆]有很高質(zhì)量的商品圖,所以我在Banner頭部將這些商品按一定的節(jié)奏韻律感擺開后,故意將他們疊加到背景里,大家也就看不出這些商品的粗糙感了:
4、協(xié)調(diào)統(tǒng)一
服裝搭配的協(xié)調(diào)統(tǒng)一在我的理解里主要體現(xiàn)在3個(gè)方面:色彩/造型/比例/面料(材質(zhì))。
同樣的,在專題頁設(shè)計(jì)里我們也會(huì)涉及到色彩/風(fēng)格元素/整體比例/質(zhì)感光影的協(xié)調(diào)統(tǒng)一,比如這些花一樣的飾品與這些花朵和樹枝的結(jié)合,再搭配上唯美的顏色,整個(gè)頁面清爽又耐看:
5、打破常規(guī)
穿衣打扮保守一點(diǎn)簡(jiǎn)單一點(diǎn),可以做到不容易出錯(cuò),但同時(shí)也會(huì)給人一種保守呆板的感覺,所以能通過一些特別的剪裁或者一些裝飾小心機(jī)就可以打破這種呆板的感覺,立馬整個(gè)人氣質(zhì)也會(huì)不一樣了,舉例:
一些開叉的長(zhǎng)裙,或者露背長(zhǎng)裙,就比完整保守的裙子看起來更具誘惑力一些。
而我們?cè)谧鰧n}頁設(shè)計(jì)的時(shí)候也是一樣的道理,可以通過形來打破常規(guī),也可以通過色來打破常規(guī),舉例:如果你一直都是做的方方正正的頁面效果,那么不妨把他們傾斜試一下:
6、層次分明
我們經(jīng)常會(huì)看到一些特別會(huì)混搭的時(shí)尚博主,他們能夠把很多衣服穿在身上又不覺得亂,一層又一層套在一起,反而覺得特別好看時(shí)尚,把人襯托的更加俏皮了,舉例:
那么,在專題頁設(shè)計(jì)里也是,這里主要涉及到2個(gè)方面的層次,一個(gè)是信息的層次層級(jí)有主次之分,另一方面是整個(gè)頁面的層級(jí)節(jié)奏,比如空間層次方面的近景中景遠(yuǎn)景,再比如從頭部Banner到樓層內(nèi)容部分的層次和層級(jí)等,舉例:
7、化繁為簡(jiǎn)
穿衣搭配最忌諱的就是不管什么風(fēng)格什么顏色的衣服都往身上套,不管多少首飾都往身上戴,會(huì)給人一種浮夸暴發(fā)戶的感覺。
而像下面這種搭配是不是看起來簡(jiǎn)潔舒服多了呢?
同理,化繁為簡(jiǎn)在專題頁設(shè)計(jì)里也是一項(xiàng)很重要的基本原則,尤其是當(dāng)我們是當(dāng)我們做賣貨類的專題頁設(shè)計(jì)的時(shí)候,太繁雜的頁面會(huì)讓人非常躁,而且閱讀體驗(yàn)不是很好,適可而止的設(shè)計(jì)最為讓人舒服:
8、氣質(zhì)相投
我們平時(shí)常常聽到人說:
- 誒,你怎么無論穿什么衣服都那么有氣質(zhì)呀?
- 你穿這件衣服顯得很有氣質(zhì)。
……
那么氣質(zhì)到底是什么呢?在我的理解力它就是你給人傳達(dá)出的一種感官上和情感上的感受,比如說你是個(gè)很有個(gè)性的人,你看起來好卡哇伊,你看起來很嫵媚動(dòng)人等等,都是氣質(zhì)。
那么一個(gè)人他可能是可以hold住好幾種氣質(zhì)的,比如他可以時(shí)而可愛,時(shí)而嫵媚,時(shí)而知性等,都是適合他的,但是突然你要他去穿朋克波譜風(fēng)格的,他就搞不來了,那整個(gè)人氣質(zhì)就不對(duì)了呀。
我之前寫過一篇論商品圖的氣質(zhì)的文章,那么在我們的專題頁設(shè)計(jì)里同樣也涉及到氣質(zhì)相投的問題,也就是你這個(gè)頁面適合什么風(fēng)格,你這個(gè)賣貨頁面的品類適合什么風(fēng)格,你這個(gè)品牌是什么調(diào)性的,都是有各種適合的氣質(zhì)的,你如果氣質(zhì)不匹配,可能最后給人的感覺就很怪異,比如你本來是國際大牌,要走高端路線的,最后你設(shè)計(jì)了一個(gè)清倉大甩賣的頁面氣質(zhì)出來,那不是掉價(jià)嗎?
但是相反的,如果你本來是屌絲氣質(zhì)的產(chǎn)品,卻試著走一下高逼格的風(fēng)格,就效果好很多了,比如衛(wèi)龍辣條模仿蘋果的氣質(zhì)風(fēng)格,這種從屌絲到高富帥的逆襲轉(zhuǎn)變和氣質(zhì)反差給他帶來了不少話題討論和曝光量:
總之,這就好比,屌絲逆襲就很容易被人視作勵(lì)志正能量,贏得口碑,而高富帥若是想降低身價(jià)則會(huì)被人恥笑了,就是這么個(gè)道理。
9、與眾不同
我們很多人是有點(diǎn)忌諱撞衫的,要不是因?yàn)楦F,誰愿意買跟別人一樣的衣服啊當(dāng)然是每個(gè)人都希望自己穿的衣服時(shí)獨(dú)一無二,全球限量版咯,這顯得自己多厲害多吸引眼球啊,人性使然,舉例:
這是電影《時(shí)尚先鋒香奈兒》的劇照,在那個(gè)年代,所有的法國女人都是穿著一身過度修飾花花綠綠的衣服,顯得臃腫無比,而主人公可可卻選擇自己做了一件清寡的格子襯衣出席了晚宴,與周圍環(huán)境形成巨大反差,那么當(dāng)然是她最吸引人注意了。
這個(gè)也是電影劇照,在一次舞會(huì)上,所有女人都是穿的白色衣服,蕾絲的,帶著頭飾,而主人公可可選擇自己做了一件黑色簡(jiǎn)潔V領(lǐng)露背禮服,又一下子與其他人形成了巨大反差,想不脫穎而出都難了。
那么在專題頁設(shè)計(jì)甚至是所有的會(huì)涉及到跟競(jìng)爭(zhēng)對(duì)手的設(shè)計(jì)里,都是希望自己的是與眾不同的啦,比如現(xiàn)在即將臨近的雙十一,阿里和京東都在搞宣傳,一個(gè)玩逼格,一個(gè)說人話,也就各自有自己的特點(diǎn)和與眾不同了嘛,涉及到營銷就要有差異化,如果大家都一樣還有什么玩頭呢?
比如阿里主要是聯(lián)合了眾多大牌一起來站臺(tái),將自己的賣貨意圖展現(xiàn)的很明顯,同時(shí)也給消費(fèi)者一種品牌可信賴,物品繁多,雙十一可以放心大膽買買買的感覺。
而京東,主要是走溫情路線,以快遞員為主角講訴他們的吃刻苦耐勞有責(zé)任心,來打動(dòng)人心。
總之都是在為雙十一做準(zhǔn)備,雙方也都在極力展現(xiàn)自己的優(yōu)勢(shì)和側(cè)重點(diǎn),差異化出來了,也就都能成功地都吸引眼球了。
五、總結(jié)
在我看來,設(shè)計(jì)師其實(shí)一旦掌握了三大構(gòu)成這些基礎(chǔ)的設(shè)計(jì)知識(shí),再加上懂人性善于觀察總結(jié),任何行業(yè)則都是相通的。而這篇文章的意義在于,我看到過很多非常會(huì)穿衣搭配的設(shè)計(jì)師,但是當(dāng)他們?nèi)プ鲈O(shè)計(jì)的時(shí)候卻不知道如何下手,其實(shí)你把自己擅長(zhǎng)的穿衣搭配融合到你的設(shè)計(jì)里,就很容易了。
再一個(gè)設(shè)計(jì)做得好看,但是穿衣搭配一般的設(shè)計(jì)師也不少,如果你能把做設(shè)計(jì)的心得體會(huì)運(yùn)用到穿衣搭配上,肯定也是會(huì)讓自己大放異彩的噠,沒準(zhǔn)兒就增加了回頭率或者提高了自己的顏值也不一定啊,哈哈~
以上我就先總結(jié)這么多了,我們這次主題為“從服裝搭配的角度淺談專題頁設(shè)計(jì)”的文章就講完了,愿你們有收獲,還有一些內(nèi)容點(diǎn)我們不可能一次講完,留著以后慢慢講吧,這次當(dāng)作是一個(gè)預(yù)熱,我們下期內(nèi)容再見??!~
(哦對(duì)了,以上除去部分我自己的專題頁設(shè)計(jì)外,還有部分專題頁設(shè)計(jì)來自花瓣,希望這些專題頁設(shè)計(jì)的作者如果看到這篇文章可以聯(lián)系我哈!~)
據(jù)說點(diǎn)贊有美容美顏的效果?。。?!不信你試試??!哈哈!~
本文由 @做設(shè)計(jì)的面條 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
好像很厲害 嘿嘿 支持
以后穿衣服更有品味了
寫的非常詳細(xì)啊,收藏啦!感謝! ??