春節(jié)是一個(gè)很大的流量池，經(jīng)過一年時(shí)間的勞累，人們有了更多的閑暇時(shí)光，這是企業(yè)也是內(nèi)容創(chuàng)作者獲取流量的絕佳時(shí)機(jī)。

這個(gè)春節(jié)，我被各大產(chǎn)品的情感化設(shè)計(jì)萌化了，設(shè)計(jì)細(xì)節(jié)太貼心了，極大的增加了產(chǎn)品與用戶的粘性，各大廠都推出了既承載千年文化重量，又具備數(shù)字原生形態(tài)的新春物種，花樣可謂是百花齊放。

各大廠都紛紛從視覺、社交互動(dòng)、內(nèi)容創(chuàng)作展開想象，設(shè)計(jì)了豐富多彩的春節(jié)用戶體驗(yàn)，下面讓我們來開開眼福，一睹他們的風(fēng)采，同時(shí)也順便學(xué)習(xí)下，作為設(shè)計(jì)師的我們有哪些創(chuàng)意出發(fā)點(diǎn)？

一、各大廠春節(jié)設(shè)計(jì)的背景

春節(jié)，作為中國(guó)最重要的傳統(tǒng)節(jié)日，不僅承載著深厚的文化內(nèi)涵，更是一場(chǎng)全民參與的消費(fèi)盛宴和社交狂歡。在這個(gè)特殊的時(shí)期，人們的注意力高度集中，圍繞春節(jié)展開的各種活動(dòng)，無論是線上還是線下，都呈現(xiàn)出爆發(fā)式的增長(zhǎng)。

從電商數(shù)據(jù)來看，2025年全國(guó)網(wǎng)上年貨節(jié)期間，全國(guó)日均網(wǎng)上零售額同比增長(zhǎng)6.2%，累計(jì)網(wǎng)絡(luò)零售額更是突破7000億元人民幣，同比去年增長(zhǎng)9.8%，再創(chuàng)歷史新高。

抖音電商“春節(jié)不打烊，財(cái)神送福氣”活動(dòng)中，全域日均支付GMV同比增長(zhǎng)56.02%，直播日均支付GMV同比增長(zhǎng)46.57%。

快手本地生活“新春團(tuán)購節(jié)”GMV同比大漲117%，新線城市日均支付用戶數(shù)環(huán)比增長(zhǎng)234%，這些驚人的數(shù)據(jù)，無一不彰顯著春節(jié)期間電商消費(fèi)的強(qiáng)勁活力。

社交平臺(tái)上同樣熱鬧非凡。除夕及春晚期間微博活動(dòng)用戶達(dá)2.97億，全站互動(dòng)超3.1億次，4656萬用戶除夕贏得福運(yùn)紅包，全國(guó)年味相關(guān)話題閱讀量破102億。

如何定義B端產(chǎn)品及B端產(chǎn)品經(jīng)理方法論

相較于C端產(chǎn)品，B端產(chǎn)品最大的特點(diǎn)是：面向特定領(lǐng)域用戶，且數(shù)量少得多，但更注重對(duì)用戶專業(yè)領(lǐng)域操作流程的深度挖掘——也就是專業(yè)性更強(qiáng)，與業(yè)務(wù)的結(jié)合更緊密。

查看詳情 >

快手在2025年春節(jié)期間，平臺(tái)日活用戶規(guī)模創(chuàng)歷史新高，春節(jié)活動(dòng)相關(guān)視頻總播放量超2000億，直播總觀看量高達(dá)150多億，“搖發(fā)財(cái)樹”紅包活動(dòng)中，用戶一共搖了57億次紅包。

如此龐大的流量和用戶注意力，為品牌和商家提供了絕佳的展示舞臺(tái)。在這個(gè)信息爆炸的時(shí)代，誰能在春節(jié)期間成功吸引用戶的注意力，誰就能在市場(chǎng)競(jìng)爭(zhēng)中搶占先機(jī)。

一個(gè)精心設(shè)計(jì)的廣告、一場(chǎng)別出心裁的互動(dòng)活動(dòng)，都有可能在這個(gè)流量高峰中迅速傳播，收獲海量的關(guān)注和曝光，實(shí)現(xiàn)品牌知名度的提升和產(chǎn)品銷量的增長(zhǎng)。

下面就讓我們看看各大廠在春節(jié)期間都找到了哪些設(shè)計(jì)機(jī)會(huì)點(diǎn)？

二、視覺機(jī)會(huì)點(diǎn)

1、按鈕的設(shè)計(jì)機(jī)會(huì)

設(shè)計(jì)思考：

1. 百度地圖，在按鈕設(shè)計(jì)上動(dòng)了小心思，按鈕用動(dòng)車和燈籠相結(jié)合，顏色上也用的大紫大紅，盡顯春節(jié)的氣氛。
2. 花瓣，把幾個(gè)素材的功能入口做成了紅包形式，畫面效果耳目一新，原來按鈕入口還能如此的多姿好看，年味十足。
3. 農(nóng)業(yè)銀行，功能入口全部由之前玻璃質(zhì)感的扁平風(fēng)變成了現(xiàn)在的微質(zhì)感年味風(fēng)，圖標(biāo)的每一個(gè)細(xì)節(jié)都在緊靠春節(jié)展開創(chuàng)作，展現(xiàn)了產(chǎn)品的細(xì)心和用心。
4. 肯德基，功能入口圖標(biāo)全部用剪紙風(fēng)格形式表達(dá)，將過年家家戶戶貼窗花的場(chǎng)景搬到了線上，讓用戶盡享年味。
5. 騰訊視頻，將主要功能入口用了故宮的古典建筑和節(jié)日的鑼鼓，彰顯了節(jié)日的熱鬧，也是不錯(cuò)的設(shè)計(jì)著手點(diǎn)。

2、網(wǎng)頁皮膚的設(shè)計(jì)機(jī)會(huì)

設(shè)計(jì)思考：

1. 太平洋汽車，左邊燈籠，右邊靈蛇，甚是歡樂，蛇年氛圍十足。
2. 春秋航空，背景用了極具中國(guó)年味的水墨插畫進(jìn)行表達(dá)，畫面中有熙熙攘攘拜年玩耍場(chǎng)景，更有調(diào)皮可愛的小蛇帶著帽子在街上行走，飽足了觀眾的眼福。
3. 搜狐，左邊新年祝福語，右邊一個(gè)調(diào)皮的剪影小蛇嘴里叼著一個(gè)燈籠，雖簡(jiǎn)潔，也是很能感受到節(jié)日的氣息。
4. 萬方數(shù)據(jù)，左右兩對(duì)精致的燈籠，通紅的背景，營(yíng)造出萬家燈火的感覺，滿滿的吉祥寓意，象征著來年的好運(yùn)與吉祥。
5. 中華網(wǎng)，滿屏的煙花秀，讓人瞬間想起大年三十除夕夜的煙花，小小的元素也是有著大大的魔力，讓人浮想聯(lián)翩。

3、彈窗的設(shè)計(jì)機(jī)會(huì)

設(shè)計(jì)思考：

1. 花瓣的彈窗，用了紅包與燈籠的結(jié)合，玫紅色和金色金幣的運(yùn)用，畫面財(cái)源滾進(jìn)的寓意濃厚。
2. 有道翻譯的彈窗，邊框用了具有中式邊框的造型，左右兩串長(zhǎng)長(zhǎng)的燈籠，下面還配有祥云，很有意境，紅火的畫面，再將需要凸顯的信息放置在在紫色按鈕上，對(duì)比感強(qiáng)烈，信息傳達(dá)無比清晰。
3. 應(yīng)用寶的彈窗，用了漫畫的風(fēng)格進(jìn)行表達(dá)，按鈕和邊框都運(yùn)用了中式的裝飾紋樣，緊扣節(jié)日主題。
4. 中國(guó)電信的這個(gè)彈窗，比較討巧，其他的樣式都沿用了日常的樣式，只是在右上角添加了一個(gè)小小的煙花造型，氛圍感馬上呈現(xiàn)，對(duì)于設(shè)計(jì)師來說真是省時(shí)省力的舉措。
5. 支付寶的彈窗，直接用了轉(zhuǎn)紅包的視覺創(chuàng)意，將過年的這種人情世故轉(zhuǎn)到了彈窗中，很親民。
6. 中信銀行的彈窗，運(yùn)用歡樂的吉祥物形象，外加幾何煙花造型來營(yíng)造春節(jié)氛圍，也是不錯(cuò)的視覺表達(dá)。

4、動(dòng)效在春節(jié)PC端的設(shè)計(jì)機(jī)會(huì)

設(shè)計(jì)思考：

1. 金投網(wǎng)的背景用了一些在空中搖曳的燈籠和福字，讓春節(jié)的氛圍額外的濃烈，果然動(dòng)效是氛圍打造的絕佳利器。
2. 地下城與勇士，它的氛圍打造就更濃郁了，有人有物，場(chǎng)景額外的熱鬧，仿佛看到了過年大家一起賞燈看煙花的場(chǎng)景。

5、動(dòng)效在春節(jié)登錄頁的設(shè)計(jì)機(jī)會(huì)

設(shè)計(jì)思考：

登錄元夢(mèng)之星和洪恩識(shí)字，感覺就像打開了一場(chǎng)煙花秀的視覺盛典，特別是洪恩識(shí)字，效果特別的炸裂，數(shù)字煙花秀做的特別吸睛。

這樣的動(dòng)效視覺表現(xiàn)很好的與用戶產(chǎn)生了情感共鳴，拉近了彼此的距離，增加了節(jié)日的樂趣。

6、動(dòng)效在春節(jié)APP的設(shè)計(jì)機(jī)會(huì)

設(shè)計(jì)思考：

支付寶在春節(jié)期間推出了一款很驚艷的皮膚，畫面中仙氣飄飄，一改之前單調(diào)的純色背景，將有中國(guó)韻味的敦煌壁畫文化搬上了熒屏，增添了很多喜慶的氛圍和中國(guó)味，養(yǎng)顏又養(yǎng)心。

設(shè)計(jì)思考：

騰訊QQ在過年期間，推出了一個(gè)領(lǐng)Q幣的活動(dòng)還挺有意思，小企鵝穿著厚厚的衣服，手中抱著一個(gè)福袋在奔跑，通過這樣的動(dòng)效引導(dǎo)用戶去領(lǐng)金幣，非常的有意思。

7、Banner在春節(jié)的設(shè)計(jì)機(jī)會(huì)

設(shè)計(jì)思考：

Banner是很好進(jìn)行情感化設(shè)計(jì)的窗口，也是打造春節(jié)氣氛的絕佳寶地，那么這個(gè)春節(jié)它也一定不會(huì)缺席。

1. 優(yōu)設(shè)網(wǎng)在Banner中運(yùn)用古代門頭和靈蛇結(jié)合，再配合煙花，喜慶感倍增。
2. 釘釘在Banner中采用了他們的吉祥物進(jìn)行了設(shè)計(jì)，讓吉祥物身穿年服來傳遞節(jié)日的氣息，也是不錯(cuò)的設(shè)計(jì)出發(fā)點(diǎn)。
3. 七貓中華網(wǎng)，運(yùn)用城市煙花結(jié)合寫作的筆進(jìn)行創(chuàng)作，符合節(jié)日屬性同時(shí)又與平臺(tái)業(yè)務(wù)相契合，表達(dá)的很妙。
4. 創(chuàng)客貼，一改常規(guī)的大紅，用了淡雅的黃色，左右兩邊點(diǎn)綴一個(gè)燈籠和些許元宵，也傳遞了不一樣的節(jié)日氛圍。

三、功能創(chuàng)新機(jī)會(huì)點(diǎn)

1、微信紅包的微創(chuàng)新

設(shè)計(jì)思考：

今年的微信紅包，新增了一個(gè)隨機(jī)的拜年紅包功能，可以隨機(jī)的派送紅包金額，并且在紅包的封面上可以長(zhǎng)按，說出你想跟對(duì)方說的寄語，這個(gè)小小功能的精進(jìn)，讓發(fā)紅包這個(gè)事情也變得更加有溫度。

微信紅包，還有一個(gè)新的創(chuàng)新點(diǎn)，小小的紅包封面變成了產(chǎn)品的宣傳欄，比方說廣汽埃安的這個(gè)紅包封面，它既是拜年的寄語欄，又是絕佳的產(chǎn)品宣傳欄，配合動(dòng)效，特別的酷。

2、百度地圖的微創(chuàng)新

設(shè)計(jì)思考：

百度地圖在這個(gè)春節(jié)心系百姓的民生問題，知道人們?cè)谶@個(gè)節(jié)日有旅游、探親、出行的需求。

百度地圖開發(fā)了人口遷徙監(jiān)測(cè)功能、交通擁堵實(shí)時(shí)監(jiān)控功能，讓人們?cè)诔鲂袝r(shí)避開高峰路段，以及人口扎堆的旅游景點(diǎn)。

更有后方快車通過的提醒功能，當(dāng)后方來了一輛很快的車時(shí)，百度地圖也會(huì)進(jìn)行語音播報(bào)，提醒車主這時(shí)不能隨便變道。

當(dāng)自己體驗(yàn)到這個(gè)功能的時(shí)候，感覺到這不僅僅是簡(jiǎn)單的功能了，更是一份對(duì)用戶的愛，以及對(duì)生命的敬畏。

3、滿足拜年需求的產(chǎn)品功能創(chuàng)新

設(shè)計(jì)思考：

過年期間，是重溫感情的好機(jī)會(huì)，朋友間彼此的問候還是很有必要的，那么如何問候，是簡(jiǎn)單的文字，還是用更有創(chuàng)意的視頻畫面去表達(dá)呢？

發(fā)現(xiàn)我們考慮的，很多產(chǎn)品都已經(jīng)幫我們想好了，比方說訊飛智作、剪映就推出了很多拜年視頻的模板供用戶自己去選擇加工使用。

很大程度提升了用戶制作視頻的效率，也很大程度提升了產(chǎn)品的粘性，為用戶多考慮一點(diǎn)，用戶對(duì)產(chǎn)品的依賴也會(huì)更多一點(diǎn)。

四、社交互動(dòng)機(jī)會(huì)點(diǎn)

1、支付寶的社交互動(dòng)

設(shè)計(jì)思考：

發(fā)現(xiàn)支付寶在與用戶社交互動(dòng)這塊做的非常的好，每逢大的節(jié)日都會(huì)有與大眾互動(dòng)的運(yùn)營(yíng)活動(dòng)。

比方說元宵節(jié)的點(diǎn)福卡活動(dòng)，萌萌的元宵，再配合微動(dòng)效，以及引導(dǎo)用戶去點(diǎn)擊的手勢(shì)動(dòng)效，無不是在號(hào)召用戶參與進(jìn)來。

支付寶的五福活動(dòng)，很有意思，入口的左右兩邊放置一個(gè)帥哥和靚妹在接紅包，畫面很有互動(dòng)感，歡樂性十足，讓人也忍不住去參與集福卡的活動(dòng)。

五、營(yíng)銷機(jī)會(huì)點(diǎn)

春節(jié)是消費(fèi)高峰期，人們有購置年貨、禮品等需求，此時(shí)也是各大品牌搞營(yíng)銷活動(dòng)的好機(jī)會(huì)。

1、體驗(yàn)的營(yíng)銷案列組一

設(shè)計(jì)思考：

1. 蘇寧易購，在元宵節(jié)推出家電換新補(bǔ)貼20%的政策，滿足了很多人購置新年物品的需求，一定程度上促進(jìn)產(chǎn)品的轉(zhuǎn)化。
2. 有道和WPS在春節(jié)推出聯(lián)合會(huì)員，且只有4折，極大的刺激了用戶的復(fù)購，以及新用戶的購買。
3. 字由也緊跟節(jié)日步伐，在這個(gè)特殊的節(jié)日展開了“阿里漢儀順利熱土體”的公益發(fā)售，促進(jìn)了字體的發(fā)售，就連我這個(gè)平時(shí)很少購買字體的人來說，也順利下單了，來支持這個(gè)公益字體的發(fā)售，可以商用，卻只要59.9就能終身商業(yè)使用，誰人不心動(dòng)，字體又這么好看。
4. 農(nóng)業(yè)銀行在這個(gè)春節(jié)期間推出鄉(xiāng)村農(nóng)產(chǎn)品的售賣活動(dòng)，價(jià)格實(shí)惠，同時(shí)又帶著助農(nóng)的性質(zhì)，我相信一定會(huì)帶來一波不錯(cuò)的銷量。
5. 長(zhǎng)沙銀行也積極推出低利率的貸款活動(dòng)，吸引人們?nèi)ベJ款。

2、體驗(yàn)的營(yíng)銷案列組二

設(shè)計(jì)思考：

酷我音樂在過年期間，把皮膚設(shè)計(jì)當(dāng)成了一種增加會(huì)員的刺激手段，一旦成為會(huì)員就能享受跟普通用戶不一樣的頭像裝飾。

連音樂播放頁的皮膚也會(huì)有更多選擇，可以選擇年味十足的播放頁，這讓成為會(huì)員的人有一種偏愛的感覺，很不錯(cuò)的促銷手段。

產(chǎn)品既能賺到錢，又能滿足一些用戶的需求，多好的共贏方式，擁有著健康的成長(zhǎng)生態(tài)。

六、阿里春節(jié)設(shè)計(jì)趨勢(shì)報(bào)告

在阿里UCAN年度設(shè)計(jì)趨勢(shì)報(bào)告中，著重強(qiáng)調(diào)了設(shè)計(jì)在商業(yè)場(chǎng)景里對(duì)用戶行為的關(guān)鍵影響。在春節(jié)這一特殊時(shí)期，流量高峰帶來海量用戶，此時(shí)設(shè)計(jì)的價(jià)值尤為凸顯。

報(bào)告指出，隨著技術(shù)的發(fā)展，設(shè)計(jì)已從單純的視覺美化，轉(zhuǎn)變?yōu)樘嵘脩趔w驗(yàn)和驅(qū)動(dòng)商業(yè)增長(zhǎng)的核心力量。

以春節(jié)紅包設(shè)計(jì)為例，具備按鈕動(dòng)效的設(shè)計(jì)能極大吸引用戶注意力。從心理學(xué)角度來看，動(dòng)態(tài)元素更容易刺激用戶的視覺神經(jīng)，引發(fā)他們的好奇心和探索欲。

這與UCAN報(bào)告中提到的利用動(dòng)態(tài)設(shè)計(jì)增強(qiáng)用戶交互體驗(yàn)的理念高度契合。數(shù)據(jù)顯示，這種設(shè)計(jì)使紅包打開率提高了30%，直觀地體現(xiàn)了優(yōu)秀設(shè)計(jì)在春節(jié)流量高峰下，對(duì)提升用戶參與度的顯著效果。

在電商頁面設(shè)計(jì)方面，UCAN報(bào)告強(qiáng)調(diào)簡(jiǎn)潔直觀且富有創(chuàng)意的界面設(shè)計(jì)，能有效引導(dǎo)用戶行為。

春節(jié)期間，電商平臺(tái)流量劇增，那些依據(jù)這一理念設(shè)計(jì)的頁面，通過合理布局商品展示、運(yùn)用鮮明的春節(jié)色彩元素，以及提供便捷的購物流程，成功吸引用戶點(diǎn)擊，提升了商品點(diǎn)擊率和購買轉(zhuǎn)化率 。

這不僅印證了報(bào)告中關(guān)于設(shè)計(jì)要貼合用戶心理和行為習(xí)慣的要點(diǎn)，也再次證明了在流量高峰時(shí)，優(yōu)秀設(shè)計(jì)對(duì)商業(yè)轉(zhuǎn)化的巨大推動(dòng)作用。

七、騰訊春節(jié)趨勢(shì)報(bào)告

微信團(tuán)隊(duì)發(fā)布《微信里的賽博年味兒》報(bào)告顯示，自制紅包封面玩法流行，春節(jié)期間微信里誕生了1億+款用戶創(chuàng)作紅包封面，約3.9億人收到此類自制封面紅包。

微信“送禮物”功能中，書籍品類送禮訂單量環(huán)比增長(zhǎng)10000%+，收到禮物數(shù)目最多的省份前三甲是廣東省、山東省、浙江省。

看到這份趨勢(shì)報(bào)告，我驚呆了，挖掘一個(gè)符合用戶需求的產(chǎn)品功能，能帶動(dòng)海量用戶的黏性和活躍，不得不說，微信自制紅包的這個(gè)功能開發(fā)的太好了。

總結(jié)

作為設(shè)計(jì)師，以前只在意產(chǎn)品的視覺和皮膚，沒有站在一個(gè)多維的角度去看待一件事情以及背后的邏輯，發(fā)現(xiàn)寫作讓我思維更開闊，視角更全面，想事情想的更清楚，看問題看的更明白，感謝這一年來自己筆耕不輟，一直在精進(jìn)的路上。

我之前說過要寫一系列專門針對(duì)電商的三大構(gòu)成的文章的，而在上篇文章中我已經(jīng)給大家梳理了一篇關(guān)于色彩的文章：六個(gè)步驟細(xì)說電商banner圖設(shè)計(jì)之色彩的奧秘，那么今天呢，我就接著要給大家講一篇關(guān)于平面構(gòu)成的文章好了。

在講之前，我先給大家列一個(gè)內(nèi)容大綱：

一、平面構(gòu)成的含義是什么？

二、電商Banner圖是由什么組成的？

三、我們?cè)撊绾卧贐anner圖設(shè)計(jì)中運(yùn)用平面構(gòu)成呢？

四、平面構(gòu)成之于電商Banner圖的意義是什么？

五、總結(jié)

注：前半部分是給大家講解的基礎(chǔ)知識(shí)，后半部分是運(yùn)用這些基礎(chǔ)知識(shí)結(jié)合實(shí)例講解，所以建議從頭到位耐心看完哦，需要些時(shí)間消化（經(jīng)濟(jì)基礎(chǔ)決定上層建筑嘛，前面不看后面也就看不懂了），接下來我們一個(gè)個(gè)問題來解剖：

一、平面構(gòu)成的含義是什么？

百度百科的解釋是：平面構(gòu)成是視覺元素在二次元的平面上，按照美的視覺效果，力學(xué)的原理，進(jìn)行編排和組合，它是以理性和邏輯推理來創(chuàng)造形象、研究形象與形象之間的排列的方法，是理性與感性相結(jié)合的產(chǎn)物。

而我的理解是：平面構(gòu)成主要是在二維空間運(yùn)用點(diǎn)、線、面結(jié)合一定的規(guī)律所形成的一種視覺語言，他可以是抽象的，也可以是具象的，可以是感性的，也可以是理性的，同時(shí)它也不是獨(dú)立存在的，而是伴隨著色彩／肌理／光影等而存在的。基本上世間萬物，所有我們接觸到的或無法接觸到的，看得見的或看不見的事物里都有平面構(gòu)成的運(yùn)用和身影。

二、電商Banner圖是由什么組成的？

Banner組成要素包含4個(gè)方面：文案 、商品／模特、背景、點(diǎn)綴物（可有可無）。

而我在之前反復(fù)強(qiáng)調(diào)過的，Banner的作用是：宣傳／展示／廣而告之／準(zhǔn)確傳達(dá)信息。

三、我們?cè)撊绾卧贐anner圖設(shè)計(jì)中運(yùn)用平面構(gòu)成呢？

在前面我們提到，平面構(gòu)成主要是在二維空間運(yùn)用點(diǎn)、線、面結(jié)合一定的規(guī)律所形成的一種視覺語言，而Banner中的所有元素（文案／商品或模特／背景／點(diǎn)綴物）其實(shí)都可以看作是平面構(gòu)成里的點(diǎn)線面這些構(gòu)成元素。

那么，接下來我們就需要了解3個(gè)有關(guān)平面構(gòu)成的概念了：

1. 元素與元素之間的排列關(guān)系
2. 所有元素在一起所體現(xiàn)的構(gòu)成形式
3. 了解幾個(gè)常用的平面術(shù)語

接下來，我們分別了解下這幾個(gè)概念：

1、元素與元素之間的排列關(guān)系

它們之間的排列有下面這么幾種：分離／相切／重疊／透疊／結(jié)合／減缺／差疊／重疊。

• 分離：形與形之間不接觸，有一定距離。
• 相切：形與形之間的邊緣正好相切。
• 重疊：形與形之間覆疊關(guān)系，由此產(chǎn)生上下前后的空間關(guān)系。
• 透疊：形與形有透明性的相互交疊，但不產(chǎn)生上下前后的空間關(guān)系。
• 結(jié)合：形與形相互結(jié)合成較大的新形狀。
• 減缺：形與形相互覆疊，覆疊的形狀被剪掉。
• 差疊：形與形相互交疊，交疊的部分產(chǎn)生一個(gè)新的形。
• 重合：形與形相互重合，變?yōu)橐惑w。

舉幾個(gè)例子： 

2、所有元素在一起所體現(xiàn)的構(gòu)成形式

從所有元素（點(diǎn)線面）整體看，其構(gòu)成形式主要有重復(fù)、近似、漸變、變異、對(duì)比、集結(jié)、發(fā)射、特異、空間與矛盾空間、分割、肌理及錯(cuò)視等等。

下面我們分別來舉例說明：

（1）重復(fù)

指在同一設(shè)計(jì)中，相同的形象出現(xiàn)過兩次以上，重復(fù)是設(shè)計(jì)中比較常用的手法，以加強(qiáng)給人的印象，造成有規(guī)律的節(jié)奏感，使畫面統(tǒng)一。所謂相同，在重復(fù)的構(gòu)成中主要是指形狀、顏色、大小等方面的相同。比如：

• 形狀的重復(fù)
• 骨骼的重復(fù)
• 大小的重復(fù)
• 色彩的重復(fù)
• 肌理的重復(fù)
• 方向的重復(fù)

重復(fù)舉例：電影《滿城盡帶黃金甲》劇照

Banner舉例： 模特重復(fù)排列疊加到背景里，既是一種紋理也是一種模特展示的方式。

（2）近似

近似指的是在形狀、大小、色彩、肌理等方面有著共同特征，它表現(xiàn)了在統(tǒng)一中呈現(xiàn)生動(dòng)變化的效果。近似的程度可大可小，如果近似的程度大就產(chǎn)生了重復(fù)感。近似程度小就會(huì)破壞統(tǒng)一。比如：

• 形狀的近似
• 骨骼的近似

近視舉例：臺(tái)灣的一對(duì)雙胞胎姐妹

小時(shí)候

長(zhǎng)大后

Banner舉例： 相同款式不同顏色的鞋子，大小不一的波點(diǎn)。

（3）漸變

是我常常聽說的一種效果，在自然界中能親身體驗(yàn)到，在行駛的道路上我們會(huì)感到樹木由近到遠(yuǎn)、由大到小的漸變。比如：

• 形狀的漸變
• 方向的漸變
• 位置的漸變
• 大小的漸變
• 色彩的漸變
• 骨骼的漸變
• 光影的漸變

大小漸變舉例：故宮淘寶前段時(shí)間的表情包

（重復(fù)＋大小漸變）

舉個(gè)例子：

鞋子的排列方式。

背景的紋理形狀。

（4）對(duì)比

有時(shí)候是形態(tài)上的對(duì)比，有時(shí)是色彩和質(zhì)感的對(duì)比。對(duì)比可產(chǎn)生明朗、肯定、強(qiáng)烈的視覺效果，給人深刻的印象。比如：

• 形狀的對(duì)比
• 大小的對(duì)比
• 色彩的對(duì)比
• 肌理的對(duì)比
• 位置的對(duì)比
• 重心的對(duì)比
• 空間的對(duì)比
• 虛實(shí)的對(duì)比

對(duì)比舉例：買家秀和買家秀。。。

開玩笑了，我們舉個(gè)正經(jīng)的例子吧：照片ps前后

Banner舉例：

（5）密集：

密集在設(shè)計(jì)中是一種常用的組織圖面的手法，基本形在整個(gè)構(gòu)圖中可自由散布，有疏有密。最疏或最密的地方常常成為整個(gè)設(shè)計(jì)的視覺焦點(diǎn)，他其實(shí)也是對(duì)比的一種情況，越密集的地方給人感覺距離越遠(yuǎn)，反之越近。

• 點(diǎn)的密集
• 線的密集
• 面的密集

密集舉例：

日本波點(diǎn)女王草間彌生的作品

草間彌生

Banner舉例：

（6）發(fā)射

是一種常見的自然現(xiàn)象，太陽四射的光芒就是發(fā)射的。發(fā)射具有方向的規(guī)律性，發(fā)射中心為最重要的視覺焦點(diǎn)，所有的形象均向中心集中，或由中心散開，有時(shí)可造成光學(xué)動(dòng)感，會(huì)產(chǎn)生爆炸的感覺，有強(qiáng)烈的視覺效果。

• 中心點(diǎn)的發(fā)射
• 螺旋式的發(fā)射
• 同心式的發(fā)射

發(fā)射舉例：星軌／水波／觀世音菩薩背后自帶的光環(huán)

水波

星軌（攝影）

每次觀世音菩薩出場(chǎng)總是會(huì)自帶光環(huán)（大家小時(shí)候應(yīng)該都比較熟悉這些畫風(fēng)了吧，有點(diǎn)俗氣。。）

Banner舉例：放射線，使得畫面聚焦到中間部分內(nèi)容。

（7）特異

是指構(gòu)成要素在有次序的關(guān)系里，有意違反次序，使少數(shù)個(gè)別的要素顯得突出，以打破規(guī)律性。

• 形狀的特異
• 大小的特異
• 色彩的特異
• 方向的特異
• 肌理的特異

特異舉例：其實(shí)各種類似于連連看的游戲，就是這么個(gè)原理

Banner舉例： 一家人站成一排，個(gè)頭比較小的那一個(gè)就給人一種特異和俏皮的感覺，使畫面不那么單調(diào)。

（8）空間

• 利用大小：比如近大遠(yuǎn)小。
• 利用重疊：前后／上下等關(guān)系。
• 利用陰影：使物體具有立體感／空間感。
• 利用疏密：比如間隔越小，越密集，感覺就越遠(yuǎn)。
• 利用透視：平行線由寬到窄。
• 利用色彩：冷色遠(yuǎn)離，暖色靠近。
• 利用肌理：越粗糙越近，越細(xì)膩越遠(yuǎn)。
• 矛盾空間：真實(shí)不存在的空間，假想的。
• 虛實(shí)關(guān)系：遠(yuǎn)景／中景／近景。

矛盾空間舉例：前段時(shí)間非常流行的一款游戲《紀(jì)念碑谷》。

空間感Banner舉例：畫面中的元素可以假想為一些有大有小的點(diǎn)，然后按一定透視空間規(guī)律擺放（近大遠(yuǎn)小）。

由陰影營(yíng)造的空間感

（9）分割

把整體分成小的部分。比如：

• 等形分割
• 自由分割
• 比例與數(shù)量

分割舉例：來自大自然的梯田

分割Banner舉例： 不同比例大小的色塊組成Banner的背景。

商品的排列也可以起到分割畫面的作用。

（10）肌理

又稱質(zhì)感，由于物體的材料不同，表面的排列、組織、構(gòu)造等不同，因而產(chǎn)生粗糙感、光滑、軟硬感。比如：

• 筆觸的變化
• 凹凸不平的肌理
• 噴繪/染
• 自帶的紋理效果

肌理舉例：木材等

肌理Banner舉例： 背景采用噴墨＋涂色的方式形成了一種很時(shí)尚的紋理。

（11）錯(cuò)視

因空間距離或周圍環(huán)境所造成的視覺差。主要有下面幾種：

1.繆勒—萊依爾錯(cuò)視

圖中兩條線是等長(zhǎng)的，由于上下線段兩端的箭頭方向相反，上線段的箭頭占據(jù)的空間大，所以上面的線顯的較長(zhǎng)。

2.垂直線與水平線的錯(cuò)視

大多數(shù)人往往把垂直線看的比水平線要長(zhǎng)，這是高估的錯(cuò)覺。在水平線長(zhǎng)度為8-10mm時(shí)，這種錯(cuò)覺最大。

3.透視錯(cuò)視

圖中的兩條線是相等的。看起來下面的要短，是因?yàn)橥敢暤腻e(cuò)覺。

4.正方形的錯(cuò)視

標(biāo)準(zhǔn)的正方形左右的邊看上去大于上下的邊。

5.黑白錯(cuò)視

圖中黑白線段，由于白線段明度大，具有膨脹的現(xiàn)象，所以看以來比黑線段長(zhǎng)。

6.由于圖形結(jié)構(gòu)的影響而產(chǎn)生的錯(cuò)視

圖中組成三、四、五邊形的邊長(zhǎng)都相等，但由于周長(zhǎng)和面積的不同，產(chǎn)生邊長(zhǎng)的不同。

7.對(duì)比錯(cuò)視

高個(gè)子和矮個(gè)子在一起，高的會(huì)顯的越高，矮的會(huì)顯的越矮。

錯(cuò)視舉例：比如虛實(shí)手繪拼接，比如有些攝影作品

這里要說明的是，錯(cuò)視在一些視差動(dòng)畫的網(wǎng)頁頁面里運(yùn)用的會(huì)比較多一些，還有一些app的引導(dǎo)頁，這里Banner舉例的話可能也不太合適，不過也可以給大家看一下：

比如這個(gè)畫面里的黃色圓點(diǎn)，同樣的黃色圓點(diǎn)，在暗色背景上是很突出的，但在同樣是黃色的背景上就幾乎看不見了，但其實(shí)原點(diǎn)是沒變的，只是背景的顏色變了，就導(dǎo)致我們看到了不一樣的結(jié)果。

3、了解幾個(gè)常用的平面術(shù)語

如下：

和諧統(tǒng)一／對(duì)比突出／對(duì)稱／畫面平衡／視覺重心／節(jié)奏韻律

和諧統(tǒng)一：

元素與元素之間，或所有元素構(gòu)成的整體是一種協(xié)調(diào)的關(guān) 系，比如大小／顏色風(fēng)格等的協(xié)調(diào)。

Banner舉例：整體的明亮色彩，搭配的雨滴小元素，以及雨傘產(chǎn)品和模特裝扮，左中右排版方式都看起來很協(xié)調(diào)統(tǒng)一。

對(duì)比突出：

即把2個(gè)質(zhì)或者量反差很大的元素放在一起，使人感覺主體鮮明突出，整體又活躍而統(tǒng)一，比如大小／數(shù)量／色彩／形狀的對(duì)比。

Banner舉例：紅色模特部分面積比較大，無論是色彩還是面積優(yōu)勢(shì)，都使得它在檸檬黃背景上特別突出。

對(duì)稱：

假設(shè)在一個(gè)圖形中間畫一條垂直或水平線后，畫面的左右或上下2邊是可以完全重合的，則我們稱之為對(duì)稱。

Banner舉例：典型的對(duì)稱構(gòu)圖咯，Bra就是一個(gè)對(duì)稱的形狀。

畫面平衡：

即元素與元素之間，元素與整體之間的大小／形狀／數(shù)量／色彩／材質(zhì)等的分布與視覺上的平衡。

Banner舉例：左右兩邊色彩面積上是平衡的，但是數(shù)量和形狀上的略微差異，使得畫面不那么單調(diào)。

視覺重心：

通過對(duì)畫面中元素的數(shù)量／顏色／位置／大小／材質(zhì)等進(jìn)行處理，畫面中所出現(xiàn)的視覺焦點(diǎn)。

Banner舉例：模擬撕紙效果形成的破洞，有一種視覺聚焦的效果。

節(jié)奏韻律：畫面中的一種或多種元素按一定的規(guī)律排列，會(huì)產(chǎn)生音樂一般的旋律感。

Banner舉例： 鞋子擺放姿勢(shì)不一樣，產(chǎn)生了一種動(dòng)律感，使畫面不單調(diào)不呆板。

重點(diǎn)（高潮部分）來了！！！！！

以上講了這么多知識(shí)點(diǎn)，那么結(jié)合這些知識(shí)點(diǎn)，我總結(jié)繪制了一些比較實(shí)用的Banner排版

樣式，如下圖所示：

以上呢，我就先總結(jié)這么多，其實(shí)所有的Banner版式都是大同小異的，因?yàn)槲覀兦懊嫣岬剑珺anner是由文案／模特或商品／背景／點(diǎn)綴物組成的，而所有這些元素就相當(dāng)于我們平面構(gòu)成里的點(diǎn)線面，當(dāng)我們改變這些元素的角度／距離／大小／數(shù)量／樣式／顏色等，新的版式也就產(chǎn)生了，所以，大家不妨也試試看哦。

四、平面構(gòu)成之于電商Banner圖的意義是什么？

Banner中的所有元素其實(shí)都相當(dāng)于平面構(gòu)成里的點(diǎn)或線或面，而所有元素所組成的Banner畫面其實(shí)又是一種情緒和信息的表達(dá)，所以我們可以從下面4個(gè)方面去理解這個(gè)問題：

（1）從活動(dòng)主題的角度：

當(dāng)我們拿到一個(gè)設(shè)計(jì)需求的時(shí)候，都會(huì)需要確定他的設(shè)計(jì)風(fēng)格，而這個(gè)風(fēng)格怎么來確定呢？就是要明白他的定位以及服務(wù)的人群是誰，了解他們的興趣愛好，同時(shí)我們腦袋里會(huì)出現(xiàn)下面這幾個(gè)關(guān)鍵詞：熱鬧促銷／年輕活力／高冷大牌／時(shí)尚個(gè)性／規(guī)矩保守等

我們先看幾個(gè)Banner實(shí)例：

低價(jià)熱鬧促銷：畫面中會(huì)有有比較多的點(diǎn)綴物，也喜歡用大面積的暖色，其目的就是為了營(yíng)造熱鬧的氛圍，給人熱情有親和力的感覺，板式以上下或者居中排版的方式多點(diǎn)，這種方式的視覺也更聚焦一些。

所以熱鬧促銷的頁面可以考慮下面這些排版樣式：

年輕活力：這種主題的Banner設(shè)計(jì)其實(shí)跟熱鬧促銷的方法類似，只是說，這種畫面里的點(diǎn)綴元素或者模特樣式需要表現(xiàn)得顯得更加俏皮活力一些，色彩上也會(huì)比較艷麗或明亮，營(yíng)造一種青春活力的感覺，排版方式其實(shí)沒有什么特別的限制，發(fā)揮空間非常大。

所以年輕活力的頁面可以考慮下面這些排版樣式：

高冷大牌：這種主題的Banner設(shè)計(jì)重在體現(xiàn)一種一般人買不起，買了之后會(huì)顯得自己特別有優(yōu)越感的印象，那么畫面中就需要多留白，善用一些簡(jiǎn)潔的或有棱角的圖形設(shè)計(jì)，切忌用一些比較卡哇伊或太柔美復(fù)雜的線條，同時(shí)，商品或模特的品質(zhì)要高，總而言之就是給人一種很貴很高端的感覺（窮人買不起，有錢人買了有面子），這個(gè)跟低價(jià)熱鬧促銷是相反的。

所以高冷大牌的頁面可以考慮下面這些排版樣式：

（2）從信息層級(jí)的角度：

當(dāng)我們?cè)谧鲆粋€(gè)banner的時(shí)候，如果沒有特別的要求，其實(shí)我們是有很多個(gè)方向選擇的，首先問下自己你是想要突出什么信息呢？是突出商品呢？還是突出文字呢？還是突出整體的氛圍呢？還是強(qiáng)調(diào)整體的協(xié)調(diào)感呢？還是說強(qiáng)調(diào)品牌呢？

一般來說，一個(gè)好的Banner首先是要保證信息傳達(dá)準(zhǔn)確，然后再需要保證畫面的協(xié)調(diào)感和氛圍的。

那么我先給大家看幾個(gè)案例舉例：

強(qiáng)調(diào)品牌（模特也屬于品牌的一部分）

強(qiáng)調(diào)商品以及SALE

強(qiáng)調(diào)整體的氛圍（商品融入在氛圍當(dāng)中了）

強(qiáng)調(diào)SALE

比如大家可以看到我之前給大家總結(jié)的版式，基本上文案信息都是比較突出的，其次商品突出或者強(qiáng)調(diào)整體氛圍：

（3）從品牌調(diào)性的角度

關(guān)于品牌這塊，可能是很多小商家目前不太重視，也覺得自己用不上的，但是各大電商平臺(tái)還有一些比較大的電商品牌都已經(jīng)有這種品牌意識(shí)了，所以不管你是在哪種團(tuán)隊(duì)里，不防也都了解一下。

我們可以從這幾個(gè)方面去看待品牌這個(gè)問題：風(fēng)格延續(xù)／品牌統(tǒng)一／風(fēng)格突破

品牌統(tǒng)一：天貓的貓頭形象，運(yùn)用于各個(gè)品類的廣告當(dāng)中，這一創(chuàng)意既統(tǒng)一了品牌形象，又非常巧妙。

再比如初語：

一直以來，初語的所有模特，在眼睛那里都有一條白線，雖然不明白什么意思，但是給人印象特別深刻，形成那個(gè)了統(tǒng)一的品牌視覺形象，最后大家也看到了初語的新 logo，就是提取了眼睛那里的形象，新logo像下面這樣：

而它原來的logo是這樣的：

對(duì)比發(fā)現(xiàn)，品牌形象更加統(tǒng)一了，也更有特色了（雖然會(huì)讓一些沒聽過這個(gè)品牌的人以為它是賣面膜的，不過對(duì)于接觸過這個(gè)服裝品牌的人來說還是很好理解的）。

風(fēng)格延續(xù)：這個(gè)在平臺(tái)的比較大型的活動(dòng)里里運(yùn)用較多，比如各個(gè)分會(huì)場(chǎng)的風(fēng)格延續(xù)（排版樣式保持一致，只是改變了顏色和品類商品和文案等）

風(fēng)格突破：關(guān)于品牌的風(fēng)格突破，可能是因?yàn)樯婕暗狡放粕?jí)或者品牌定位的改變，所以需要在設(shè)計(jì)上配合這一策略，比如說原先你面對(duì)的可能是青少年群體，但隨著時(shí)代的發(fā)展，你是繼續(xù)服務(wù)這些青少年群體跟著他們一起成長(zhǎng)轉(zhuǎn)型為服務(wù)于大齡青年呢？還是繼續(xù)服務(wù)新一代的青少年群體呢？這時(shí)候你的用戶群體改變了，當(dāng)然也就意味著風(fēng)格可能需要作出改變咯。

比如QQlogo形象的升級(jí)：

對(duì)于這個(gè)話題，我們后面再抽出一篇文章單獨(dú)來講好了，大家感興趣嗎？

（4）從視覺美感的角度：

當(dāng)一個(gè)Banner在滿足了前面幾個(gè)要求的情況下，如果有能力的話，我們當(dāng)然還是要做到達(dá)到視覺美感的要求的，那么從這個(gè)角度看，平面構(gòu)成之于Banner設(shè)計(jì)的意義是什么呢？

我們可以看下下面幾個(gè)關(guān)鍵詞：平衡畫面／視覺沖擊力／畫面不單調(diào)／富有創(chuàng)意等。

平衡畫面：左中右排版

視覺沖擊力：放射線，中心聚焦

畫面不單調(diào)：將產(chǎn)品的方向或顏色做一些不規(guī)則的排列，避免乏味

富有創(chuàng)意：擬人化處理畫面，營(yíng)造一種身臨其境的場(chǎng)景感

五、總結(jié)

以上，我分別給大家講了這幾個(gè)知識(shí)點(diǎn)：

一、平面構(gòu)成的含義是什么？

二、電商Banner圖是由什么組成的？

三、我們?cè)撊绾卧贐anner圖設(shè)計(jì)中運(yùn)用平面構(gòu)成呢？

四、平面構(gòu)成之于電商Banner圖的意義是什么？

到此，平面構(gòu)成之于Banner設(shè)計(jì)的奧秘我就講完了，這次的內(nèi)容量非常大，估計(jì)夠你們消化不止一周了，而我也沒有分為上下篇來寫，原因有二：一方面是跟我自己的性格有關(guān)，我不太習(xí)慣分篇來講一個(gè)知識(shí)點(diǎn)，一個(gè)完整的知識(shí)點(diǎn)不管從哪里切斷我都會(huì)感覺不舒服，就像你吃一個(gè)東西吃得正爽，卻被別人告知說：“另一半要留著下次再吃哦”，雖然這樣子可以增加大家對(duì)下一篇文章的期待，但也會(huì)感覺不爽吧（不過為了大家不要吃撐了最好是收藏起來或轉(zhuǎn)發(fā)出去，以便后面再細(xì)細(xì)看）。

本文由 @做設(shè)計(jì)的面條 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

蘭亭妙微(www.tuitetiyu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

UI設(shè)計(jì)是隨著智能設(shè)備的飛速發(fā)展、互聯(lián)網(wǎng)行業(yè)的發(fā)展以及農(nóng)林牧漁傳統(tǒng)行業(yè)的急于轉(zhuǎn)向而興起。主要是企業(yè)對(duì)移動(dòng)設(shè)備交互界面的重視。在企業(yè)越來越重視界面設(shè)計(jì)的今天。傳統(tǒng)的平面設(shè)計(jì)能為現(xiàn)在我們的UI設(shè)計(jì)提供哪些參考呢，我們能從中借鑒的技巧有哪些？今天就從版式設(shè)計(jì)說起。

版式設(shè)計(jì)

在UI設(shè)計(jì)中版式設(shè)計(jì)不言而喻是非常重要的。版式設(shè)計(jì)就如同蓋房子先要搭好框架一樣。一款A(yù)PP視覺呈現(xiàn)是不是符合商業(yè)性并兼具審美。其中的版式設(shè)計(jì)是其核心。而在平面設(shè)計(jì)中版式設(shè)計(jì)也是一個(gè)作品的核心。平面設(shè)計(jì)長(zhǎng)時(shí)間的發(fā)展積淀了相當(dāng)多實(shí)用的技巧和方法。

一、形勢(shì)方法

版式設(shè)計(jì)中形勢(shì)方法指的是、畫面的表現(xiàn)方法和原理。說白了就是畫面要出什么效果就用什么表現(xiàn)手法而已。平面設(shè)計(jì)中形勢(shì)方法可以分為。虛空留白、比例適度、對(duì)比調(diào)和、變化統(tǒng)一、變異秩序、節(jié)奏韻律、重復(fù)交錯(cuò)、對(duì)稱均衡等。今天我們舉例分析一下前四個(gè)。

1、虛空留白（適合現(xiàn)在極簡(jiǎn)設(shè)計(jì)風(fēng)格）

這種版式設(shè)計(jì)主要是突出主題，給人以輕松愉悅的感覺。適合文藝范的和有逼格的app界面使用，能夠營(yíng)造出高品質(zhì)的界面風(fēng)格。但是如果一旦運(yùn)用不得當(dāng)容易出現(xiàn)界面空或單調(diào)的感覺。

2、比例適度（協(xié)調(diào)UI中各部分內(nèi)容）

平面設(shè)計(jì)中所說的比例適度主要是整體和部分的協(xié)調(diào)，采用合理的比例方法，如：黃金比例、等差等比。去協(xié)調(diào)各部分的關(guān)系使各部分要素產(chǎn)生聯(lián)系。在UI版面布局中正是需要調(diào)節(jié)和有機(jī)的組合各要素在有限的界面里的合理性。

3、對(duì)比調(diào)和（UI中信息層級(jí)的表現(xiàn)）

對(duì)比調(diào)和在平面設(shè)計(jì)中是經(jīng)常用到的，整體版面要調(diào)和，局部版面要對(duì)比。對(duì)比是強(qiáng)調(diào)主次關(guān)系。對(duì)比調(diào)和用到UI設(shè)計(jì)中可以做到設(shè)計(jì)內(nèi)容在主次關(guān)系的層級(jí)化。在統(tǒng)一調(diào)和的界面里又充滿了對(duì)比的小情調(diào)。這正是平面不平之所在，也是一個(gè)優(yōu)秀的界面所必備的。

4、變化與統(tǒng)一（是UI突破同質(zhì)化的一種方法）

變化與統(tǒng)一是形式美法則的總則。是其他方法方式的一個(gè)總結(jié)。變化所說的就是在設(shè)計(jì)中要有所創(chuàng)新不能總墨守成規(guī)，統(tǒng)一是設(shè)計(jì)要做到視覺上的愉悅而不是雖然有局部吸引人的眼球但是整體一看卻是辣眼睛。變化和統(tǒng)一也許是突破現(xiàn)在APP同質(zhì)化的一種方法。在現(xiàn)在APP同質(zhì)化嚴(yán)重的情況下我們能做到APP的風(fēng)格統(tǒng)一又不墨守成規(guī)尋求變化才是營(yíng)造自己風(fēng)格的一種方法。

這些平面設(shè)計(jì)里的形式美法則在UI設(shè)計(jì)中同樣受用。這些表面形式在做banner圖構(gòu)圖和創(chuàng)意上也特別有用。

二、版式設(shè)計(jì)基本類型

版式設(shè)計(jì)的基本類型有特別多。我們這里著重分析其中對(duì)UI設(shè)計(jì)最有幫助的骨骼型、左右分割、曲線型、滿版型這幾個(gè)基本類型。

1、骨骼型（類似網(wǎng)格構(gòu)圖）

這里說的骨骼型就是在版式構(gòu)圖中，進(jìn)行橫豎向的分欄。能容嚴(yán)格按照分欄排列。版面效果沉穩(wěn)厚重，井然有序，如果橫豎分欄交叉排列還可制造靈動(dòng)活潑的版面氣氛。非常類似網(wǎng)格構(gòu)圖的方法。在UI設(shè)計(jì)中也很受用，可以很好的規(guī)范個(gè)元素的位置。（如果你對(duì)目前的界面設(shè)計(jì)一籌莫展，不妨可以試試這種方法）

2、左右分割型（瀑布流）

左右分割不外乎就是把版面左右分開在配之以圖文。在UI中的應(yīng)用是隨著扁平化卡片化的興起，在移動(dòng)端界面尺寸的限制下，開始進(jìn)行了信息的分割處理。橫向的卡片式布局使得一屏內(nèi)所看到的信息受到了極大的限制（不利于用戶體驗(yàn)，卡片式并非萬能）。所以就應(yīng)用的左右分割的布局。左右分割有利于信息的呈現(xiàn)，可以與瀑布流結(jié)合。

3、曲線型（UI方向1）

曲線型主要表現(xiàn)的是韻律和節(jié)奏，可能符合一部分小眾APP設(shè)計(jì)界面設(shè)計(jì)，充滿了特色和戲劇性。我覺得有特色的界面設(shè)計(jì)是這些小眾APP的設(shè)計(jì)核心。可以利用另類的小眾的設(shè)計(jì)做吸引。

4、滿版型（UI方向2）

滿版設(shè)計(jì)在平面設(shè)計(jì)中主要表達(dá)大方、舒展的設(shè)計(jì)風(fēng)格。在UI移動(dòng)端界面設(shè)計(jì)中寸土寸金。現(xiàn)在的扁平化，極簡(jiǎn)設(shè)計(jì)風(fēng)格都在留白提升逼格。但是未來極簡(jiǎn)設(shè)計(jì)終將過去，我們面對(duì)的還是海量信息。

結(jié)束語

版式設(shè)計(jì)是平面設(shè)計(jì)的一部分，也應(yīng)該是UI設(shè)計(jì)的一部分。這里僅僅是說出了版式設(shè)計(jì)的一點(diǎn)點(diǎn)內(nèi)容，部分的形式美法則和版式設(shè)計(jì)的基本類型。還有很多很多對(duì)UI設(shè)計(jì)有利的點(diǎn)沒有發(fā)掘。站在巨人的肩上可以看的更遠(yuǎn)，平面設(shè)計(jì)就是我們前進(jìn)的加速劑。

本文由 @彪形大漢 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

蘭亭妙微(www.tuitetiyu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan