如何定義B端產品及B端產品經理方法論
春節是一個很大的流量池，經過一年時間的勞累，人們有了更多的閑暇時光，這是企業也是內容創作者獲取流量的絕佳時機。
這個春節，我被各大產品的情感化設計萌化了，設計細節太貼心了，極大的增加了產品與用戶的粘性，各大廠都推出了既承載千年文化重量，又具備數字原生形態的新春物種，花樣可謂是百花齊放。
各大廠都紛紛從視覺、社交互動、內容創作展開想象，設計了豐富多彩的春節用戶體驗，下面讓我們來開開眼福，一睹他們的風采，同時也順便學習下，作為設計師的我們有哪些創意出發點？
春節，作為中國最重要的傳統節日，不僅承載著深厚的文化內涵，更是一場全民參與的消費盛宴和社交狂歡。在這個特殊的時期，人們的注意力高度集中，圍繞春節展開的各種活動，無論是線上還是線下，都呈現出爆發式的增長。
從電商數據來看，2025年全國網上年貨節期間，全國日均網上零售額同比增長6.2%，累計網絡零售額更是突破7000億元人民幣，同比去年增長9.8%，再創歷史新高。
抖音電商“春節不打烊，財神送福氣”活動中，全域日均支付GMV同比增長56.02%，直播日均支付GMV同比增長46.57%。
快手本地生活“新春團購節”GMV同比大漲117%，新線城市日均支付用戶數環比增長234%，這些驚人的數據，無一不彰顯著春節期間電商消費的強勁活力。
社交平臺上同樣熱鬧非凡。除夕及春晚期間微博活動用戶達2.97億，全站互動超3.1億次，4656萬用戶除夕贏得福運紅包，全國年味相關話題閱讀量破102億。
快手在2025年春節期間，平臺日活用戶規模創歷史新高，春節活動相關視頻總播放量超2000億，直播總觀看量高達150多億，“搖發財樹”紅包活動中，用戶一共搖了57億次紅包。
如此龐大的流量和用戶注意力，為品牌和商家提供了絕佳的展示舞臺。在這個信息爆炸的時代，誰能在春節期間成功吸引用戶的注意力，誰就能在市場競爭中搶占先機。
一個精心設計的廣告、一場別出心裁的互動活動，都有可能在這個流量高峰中迅速傳播，收獲海量的關注和曝光，實現品牌知名度的提升和產品銷量的增長。
下面就讓我們看看各大廠在春節期間都找到了哪些設計機會點？
設計思考：
設計思考：
設計思考：
設計思考：
設計思考：
登錄元夢之星和洪恩識字，感覺就像打開了一場煙花秀的視覺盛典，特別是洪恩識字，效果特別的炸裂，數字煙花秀做的特別吸睛。
這樣的動效視覺表現很好的與用戶產生了情感共鳴，拉近了彼此的距離，增加了節日的樂趣。
設計思考：
支付寶在春節期間推出了一款很驚艷的皮膚，畫面中仙氣飄飄，一改之前單調的純色背景，將有中國韻味的敦煌壁畫文化搬上了熒屏，增添了很多喜慶的氛圍和中國味，養顏又養心。
設計思考：
騰訊QQ在過年期間，推出了一個領Q幣的活動還挺有意思，小企鵝穿著厚厚的衣服，手中抱著一個福袋在奔跑，通過這樣的動效引導用戶去領金幣，非常的有意思。
設計思考：
Banner是很好進行情感化設計的窗口，也是打造春節氣氛的絕佳寶地，那么這個春節它也一定不會缺席。
設計思考：
今年的微信紅包，新增了一個隨機的拜年紅包功能，可以隨機的派送紅包金額，并且在紅包的封面上可以長按，說出你想跟對方說的寄語，這個小小功能的精進，讓發紅包這個事情也變得更加有溫度。
微信紅包，還有一個新的創新點，小小的紅包封面變成了產品的宣傳欄，比方說廣汽埃安的這個紅包封面，它既是拜年的寄語欄，又是絕佳的產品宣傳欄，配合動效，特別的酷。
設計思考：
百度地圖在這個春節心系百姓的民生問題，知道人們在這個節日有旅游、探親、出行的需求。
百度地圖開發了人口遷徙監測功能、交通擁堵實時監控功能，讓人們在出行時避開高峰路段，以及人口扎堆的旅游景點。
更有后方快車通過的提醒功能，當后方來了一輛很快的車時，百度地圖也會進行語音播報，提醒車主這時不能隨便變道。
當自己體驗到這個功能的時候，感覺到這不僅僅是簡單的功能了，更是一份對用戶的愛，以及對生命的敬畏。
設計思考：
過年期間，是重溫感情的好機會，朋友間彼此的問候還是很有必要的，那么如何問候，是簡單的文字，還是用更有創意的視頻畫面去表達呢？
發現我們考慮的，很多產品都已經幫我們想好了，比方說訊飛智作、剪映就推出了很多拜年視頻的模板供用戶自己去選擇加工使用。
很大程度提升了用戶制作視頻的效率，也很大程度提升了產品的粘性，為用戶多考慮一點，用戶對產品的依賴也會更多一點。
設計思考：
發現支付寶在與用戶社交互動這塊做的非常的好，每逢大的節日都會有與大眾互動的運營活動。
比方說元宵節的點福卡活動，萌萌的元宵，再配合微動效，以及引導用戶去點擊的手勢動效，無不是在號召用戶參與進來。
支付寶的五?；顒樱苡幸馑?，入口的左右兩邊放置一個帥哥和靚妹在接紅包，畫面很有互動感，歡樂性十足，讓人也忍不住去參與集?？ǖ幕顒?。
春節是消費高峰期，人們有購置年貨、禮品等需求，此時也是各大品牌搞營銷活動的好機會。
設計思考：
設計思考：
酷我音樂在過年期間，把皮膚設計當成了一種增加會員的刺激手段，一旦成為會員就能享受跟普通用戶不一樣的頭像裝飾。
連音樂播放頁的皮膚也會有更多選擇，可以選擇年味十足的播放頁，這讓成為會員的人有一種偏愛的感覺，很不錯的促銷手段。
產品既能賺到錢，又能滿足一些用戶的需求，多好的共贏方式，擁有著健康的成長生態。
在阿里UCAN年度設計趨勢報告中，著重強調了設計在商業場景里對用戶行為的關鍵影響。在春節這一特殊時期，流量高峰帶來海量用戶，此時設計的價值尤為凸顯。
報告指出，隨著技術的發展，設計已從單純的視覺美化，轉變為提升用戶體驗和驅動商業增長的核心力量。
以春節紅包設計為例，具備按鈕動效的設計能極大吸引用戶注意力。從心理學角度來看，動態元素更容易刺激用戶的視覺神經，引發他們的好奇心和探索欲。
這與UCAN報告中提到的利用動態設計增強用戶交互體驗的理念高度契合。數據顯示，這種設計使紅包打開率提高了30%，直觀地體現了優秀設計在春節流量高峰下，對提升用戶參與度的顯著效果。
在電商頁面設計方面，UCAN報告強調簡潔直觀且富有創意的界面設計，能有效引導用戶行為。
春節期間，電商平臺流量劇增，那些依據這一理念設計的頁面，通過合理布局商品展示、運用鮮明的春節色彩元素，以及提供便捷的購物流程，成功吸引用戶點擊，提升了商品點擊率和購買轉化率 。
這不僅印證了報告中關于設計要貼合用戶心理和行為習慣的要點，也再次證明了在流量高峰時，優秀設計對商業轉化的巨大推動作用。
微信團隊發布《微信里的賽博年味兒》報告顯示，自制紅包封面玩法流行，春節期間微信里誕生了1億+款用戶創作紅包封面，約3.9億人收到此類自制封面紅包。
微信“送禮物”功能中，書籍品類送禮訂單量環比增長10000%+，收到禮物數目最多的省份前三甲是廣東省、山東省、浙江省。
看到這份趨勢報告，我驚呆了，挖掘一個符合用戶需求的產品功能，能帶動海量用戶的黏性和活躍，不得不說，微信自制紅包的這個功能開發的太好了。
作為設計師，以前只在意產品的視覺和皮膚，沒有站在一個多維的角度去看待一件事情以及背后的邏輯，發現寫作讓我思維更開闊，視角更全面，想事情想的更清楚，看問題看的更明白，感謝這一年來自己筆耕不輟，一直在精進的路上。
作者：姝斐suphie，公眾號：姝斐
本文由 @姝斐suphie 原創發布于人人都是產品經理。未經作者許可，禁止轉載
題圖來自作者提供
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
我之前說過要寫一系列專門針對電商的三大構成的文章的，而在上篇文章中我已經給大家梳理了一篇關于色彩的文章：六個步驟細說電商banner圖設計之色彩的奧秘，那么今天呢，我就接著要給大家講一篇關于平面構成的文章好了。
在講之前，我先給大家列一個內容大綱：
一、平面構成的含義是什么？
二、電商Banner圖是由什么組成的？
三、我們該如何在Banner圖設計中運用平面構成呢？
四、平面構成之于電商Banner圖的意義是什么？
五、總結
注：前半部分是給大家講解的基礎知識，后半部分是運用這些基礎知識結合實例講解，所以建議從頭到位耐心看完哦，需要些時間消化（經濟基礎決定上層建筑嘛，前面不看后面也就看不懂了），接下來我們一個個問題來解剖：
百度百科的解釋是：平面構成是視覺元素在二次元的平面上，按照美的視覺效果，力學的原理，進行編排和組合，它是以理性和邏輯推理來創造形象、研究形象與形象之間的排列的方法，是理性與感性相結合的產物。
而我的理解是：平面構成主要是在二維空間運用點、線、面結合一定的規律所形成的一種視覺語言，他可以是抽象的，也可以是具象的，可以是感性的，也可以是理性的，同時它也不是獨立存在的，而是伴隨著色彩／肌理／光影等而存在的?；旧鲜篱g萬物，所有我們接觸到的或無法接觸到的，看得見的或看不見的事物里都有平面構成的運用和身影。
Banner組成要素包含4個方面：文案 、商品／模特、背景、點綴物（可有可無）。
而我在之前反復強調過的，Banner的作用是：宣傳／展示／廣而告之／準確傳達信息。
在前面我們提到，平面構成主要是在二維空間運用點、線、面結合一定的規律所形成的一種視覺語言，而Banner中的所有元素（文案／商品或模特／背景／點綴物）其實都可以看作是平面構成里的點線面這些構成元素。
那么，接下來我們就需要了解3個有關平面構成的概念了：
接下來，我們分別了解下這幾個概念：
它們之間的排列有下面這么幾種：分離／相切／重疊／透疊／結合／減缺／差疊／重疊。
舉幾個例子：
從所有元素（點線面）整體看，其構成形式主要有重復、近似、漸變、變異、對比、集結、發射、特異、空間與矛盾空間、分割、肌理及錯視等等。
下面我們分別來舉例說明：
（1）重復
指在同一設計中，相同的形象出現過兩次以上，重復是設計中比較常用的手法，以加強給人的印象，造成有規律的節奏感，使畫面統一。所謂相同，在重復的構成中主要是指形狀、顏色、大小等方面的相同。比如：
重復舉例：電影《滿城盡帶黃金甲》劇照
Banner舉例： 模特重復排列疊加到背景里，既是一種紋理也是一種模特展示的方式。
（2）近似
近似指的是在形狀、大小、色彩、肌理等方面有著共同特征，它表現了在統一中呈現生動變化的效果。近似的程度可大可小，如果近似的程度大就產生了重復感。近似程度小就會破壞統一。比如：
近視舉例：臺灣的一對雙胞胎姐妹
小時候
長大后
Banner舉例： 相同款式不同顏色的鞋子，大小不一的波點。
（3）漸變
是我常常聽說的一種效果，在自然界中能親身體驗到，在行駛的道路上我們會感到樹木由近到遠、由大到小的漸變。比如：
大小漸變舉例：故宮淘寶前段時間的表情包
（重復＋大小漸變）
舉個例子：
鞋子的排列方式。
背景的紋理形狀。
（4）對比
有時候是形態上的對比，有時是色彩和質感的對比。對比可產生明朗、肯定、強烈的視覺效果，給人深刻的印象。比如：
對比舉例：買家秀和買家秀。。。
開玩笑了，我們舉個正經的例子吧：照片ps前后
Banner舉例：
（5）密集：
密集在設計中是一種常用的組織圖面的手法，基本形在整個構圖中可自由散布，有疏有密。最疏或最密的地方常常成為整個設計的視覺焦點，他其實也是對比的一種情況，越密集的地方給人感覺距離越遠，反之越近。
密集舉例：
日本波點女王草間彌生的作品
草間彌生
Banner舉例：
（6）發射
是一種常見的自然現象，太陽四射的光芒就是發射的。發射具有方向的規律性，發射中心為最重要的視覺焦點，所有的形象均向中心集中，或由中心散開，有時可造成光學動感，會產生爆炸的感覺，有強烈的視覺效果。
發射舉例：星軌／水波／觀世音菩薩背后自帶的光環
水波
星軌（攝影）
每次觀世音菩薩出場總是會自帶光環（大家小時候應該都比較熟悉這些畫風了吧，有點俗氣。。）
Banner舉例：放射線，使得畫面聚焦到中間部分內容。
（7）特異
是指構成要素在有次序的關系里，有意違反次序，使少數個別的要素顯得突出，以打破規律性。
特異舉例：其實各種類似于連連看的游戲，就是這么個原理
Banner舉例： 一家人站成一排，個頭比較小的那一個就給人一種特異和俏皮的感覺，使畫面不那么單調。
（8）空間
矛盾空間舉例：前段時間非常流行的一款游戲《紀念碑谷》。
空間感Banner舉例：畫面中的元素可以假想為一些有大有小的點，然后按一定透視空間規律擺放（近大遠?。?。
由陰影營造的空間感
（9）分割
把整體分成小的部分。比如：
分割舉例：來自大自然的梯田
分割Banner舉例： 不同比例大小的色塊組成Banner的背景。
商品的排列也可以起到分割畫面的作用。
（10）肌理
又稱質感，由于物體的材料不同，表面的排列、組織、構造等不同，因而產生粗糙感、光滑、軟硬感。比如：
肌理舉例：木材等
肌理Banner舉例： 背景采用噴墨＋涂色的方式形成了一種很時尚的紋理。
（11）錯視
因空間距離或周圍環境所造成的視覺差。主要有下面幾種：
1.繆勒—萊依爾錯視
圖中兩條線是等長的，由于上下線段兩端的箭頭方向相反，上線段的箭頭占據的空間大，所以上面的線顯的較長。
2.垂直線與水平線的錯視
大多數人往往把垂直線看的比水平線要長，這是高估的錯覺。在水平線長度為8-10mm時，這種錯覺最大。
3.透視錯視
圖中的兩條線是相等的。看起來下面的要短，是因為透視的錯覺。
4.正方形的錯視
標準的正方形左右的邊看上去大于上下的邊。
5.黑白錯視
圖中黑白線段，由于白線段明度大，具有膨脹的現象，所以看以來比黑線段長。
6.由于圖形結構的影響而產生的錯視
圖中組成三、四、五邊形的邊長都相等，但由于周長和面積的不同，產生邊長的不同。
7.對比錯視
高個子和矮個子在一起，高的會顯的越高，矮的會顯的越矮。
錯視舉例：比如虛實手繪拼接，比如有些攝影作品
這里要說明的是，錯視在一些視差動畫的網頁頁面里運用的會比較多一些，還有一些app的引導頁，這里Banner舉例的話可能也不太合適，不過也可以給大家看一下：
比如這個畫面里的黃色圓點，同樣的黃色圓點，在暗色背景上是很突出的，但在同樣是黃色的背景上就幾乎看不見了，但其實原點是沒變的，只是背景的顏色變了，就導致我們看到了不一樣的結果。
如下：
和諧統一／對比突出／對稱／畫面平衡／視覺重心／節奏韻律
和諧統一：
元素與元素之間，或所有元素構成的整體是一種協調的關 系，比如大?。伾L格等的協調。
Banner舉例：整體的明亮色彩，搭配的雨滴小元素，以及雨傘產品和模特裝扮，左中右排版方式都看起來很協調統一。
對比突出：
即把2個質或者量反差很大的元素放在一起，使人感覺主體鮮明突出，整體又活躍而統一，比如大?。瘮盗浚剩螤畹膶Ρ?。
Banner舉例：紅色模特部分面積比較大，無論是色彩還是面積優勢，都使得它在檸檬黃背景上特別突出。
對稱：
假設在一個圖形中間畫一條垂直或水平線后，畫面的左右或上下2邊是可以完全重合的，則我們稱之為對稱。
Banner舉例：典型的對稱構圖咯，Bra就是一個對稱的形狀。
畫面平衡：
即元素與元素之間，元素與整體之間的大?。螤睿瘮盗浚剩馁|等的分布與視覺上的平衡。
Banner舉例：左右兩邊色彩面積上是平衡的，但是數量和形狀上的略微差異，使得畫面不那么單調。
視覺重心：
通過對畫面中元素的數量／顏色／位置／大小／材質等進行處理，畫面中所出現的視覺焦點。
Banner舉例：模擬撕紙效果形成的破洞，有一種視覺聚焦的效果。
節奏韻律：畫面中的一種或多種元素按一定的規律排列，會產生音樂一般的旋律感。
Banner舉例： 鞋子擺放姿勢不一樣，產生了一種動律感，使畫面不單調不呆板。
重點（高潮部分）來了！?。。?！
以上講了這么多知識點，那么結合這些知識點，我總結繪制了一些比較實用的Banner排版
樣式，如下圖所示：
以上呢，我就先總結這么多，其實所有的Banner版式都是大同小異的，因為我們前面提到，Banner是由文案／模特或商品／背景／點綴物組成的，而所有這些元素就相當于我們平面構成里的點線面，當我們改變這些元素的角度／距離／大?。瘮盗浚瘶邮剑伾?，新的版式也就產生了，所以，大家不妨也試試看哦。
Banner中的所有元素其實都相當于平面構成里的點或線或面，而所有元素所組成的Banner畫面其實又是一種情緒和信息的表達，所以我們可以從下面4個方面去理解這個問題：
當我們拿到一個設計需求的時候，都會需要確定他的設計風格，而這個風格怎么來確定呢？就是要明白他的定位以及服務的人群是誰，了解他們的興趣愛好，同時我們腦袋里會出現下面這幾個關鍵詞：熱鬧促銷／年輕活力／高冷大牌／時尚個性／規矩保守等
我們先看幾個Banner實例：
低價熱鬧促銷：畫面中會有有比較多的點綴物，也喜歡用大面積的暖色，其目的就是為了營造熱鬧的氛圍，給人熱情有親和力的感覺，板式以上下或者居中排版的方式多點，這種方式的視覺也更聚焦一些。
所以熱鬧促銷的頁面可以考慮下面這些排版樣式：
年輕活力：這種主題的Banner設計其實跟熱鬧促銷的方法類似，只是說，這種畫面里的點綴元素或者模特樣式需要表現得顯得更加俏皮活力一些，色彩上也會比較艷麗或明亮，營造一種青春活力的感覺，排版方式其實沒有什么特別的限制，發揮空間非常大。
所以年輕活力的頁面可以考慮下面這些排版樣式：
高冷大牌：這種主題的Banner設計重在體現一種一般人買不起，買了之后會顯得自己特別有優越感的印象，那么畫面中就需要多留白，善用一些簡潔的或有棱角的圖形設計，切忌用一些比較卡哇伊或太柔美復雜的線條，同時，商品或模特的品質要高，總而言之就是給人一種很貴很高端的感覺（窮人買不起，有錢人買了有面子），這個跟低價熱鬧促銷是相反的。
所以高冷大牌的頁面可以考慮下面這些排版樣式：
當我們在做一個banner的時候，如果沒有特別的要求，其實我們是有很多個方向選擇的，首先問下自己你是想要突出什么信息呢？是突出商品呢？還是突出文字呢？還是突出整體的氛圍呢？還是強調整體的協調感呢？還是說強調品牌呢？
一般來說，一個好的Banner首先是要保證信息傳達準確，然后再需要保證畫面的協調感和氛圍的。
那么我先給大家看幾個案例舉例：
強調品牌（模特也屬于品牌的一部分）
強調商品以及SALE
強調整體的氛圍（商品融入在氛圍當中了）
強調SALE
比如大家可以看到我之前給大家總結的版式，基本上文案信息都是比較突出的，其次商品突出或者強調整體氛圍：
關于品牌這塊，可能是很多小商家目前不太重視，也覺得自己用不上的，但是各大電商平臺還有一些比較大的電商品牌都已經有這種品牌意識了，所以不管你是在哪種團隊里，不防也都了解一下。
我們可以從這幾個方面去看待品牌這個問題：風格延續／品牌統一／風格突破
品牌統一：天貓的貓頭形象，運用于各個品類的廣告當中，這一創意既統一了品牌形象，又非常巧妙。
再比如初語：
一直以來，初語的所有模特，在眼睛那里都有一條白線，雖然不明白什么意思，但是給人印象特別深刻，形成那個了統一的品牌視覺形象，最后大家也看到了初語的新 logo，就是提取了眼睛那里的形象，新logo像下面這樣：
而它原來的logo是這樣的：
對比發現，品牌形象更加統一了，也更有特色了（雖然會讓一些沒聽過這個品牌的人以為它是賣面膜的，不過對于接觸過這個服裝品牌的人來說還是很好理解的）。
風格延續：這個在平臺的比較大型的活動里里運用較多，比如各個分會場的風格延續（排版樣式保持一致，只是改變了顏色和品類商品和文案等）
風格突破：關于品牌的風格突破，可能是因為涉及到品牌升級或者品牌定位的改變，所以需要在設計上配合這一策略，比如說原先你面對的可能是青少年群體，但隨著時代的發展，你是繼續服務這些青少年群體跟著他們一起成長轉型為服務于大齡青年呢？還是繼續服務新一代的青少年群體呢？這時候你的用戶群體改變了，當然也就意味著風格可能需要作出改變咯。
比如QQlogo形象的升級：
對于這個話題，我們后面再抽出一篇文章單獨來講好了，大家感興趣嗎？
當一個Banner在滿足了前面幾個要求的情況下，如果有能力的話，我們當然還是要做到達到視覺美感的要求的，那么從這個角度看，平面構成之于Banner設計的意義是什么呢？
我們可以看下下面幾個關鍵詞：平衡畫面／視覺沖擊力／畫面不單調／富有創意等。
平衡畫面：左中右排版
視覺沖擊力：放射線，中心聚焦
畫面不單調：將產品的方向或顏色做一些不規則的排列，避免乏味
富有創意：擬人化處理畫面，營造一種身臨其境的場景感
以上，我分別給大家講了這幾個知識點：
一、平面構成的含義是什么？
二、電商Banner圖是由什么組成的？
三、我們該如何在Banner圖設計中運用平面構成呢？
四、平面構成之于電商Banner圖的意義是什么？
到此，平面構成之于Banner設計的奧秘我就講完了，這次的內容量非常大，估計夠你們消化不止一周了，而我也沒有分為上下篇來寫，原因有二：一方面是跟我自己的性格有關，我不太習慣分篇來講一個知識點，一個完整的知識點不管從哪里切斷我都會感覺不舒服，就像你吃一個東西吃得正爽，卻被別人告知說：“另一半要留著下次再吃哦”，雖然這樣子可以增加大家對下一篇文章的期待，但也會感覺不爽吧（不過為了大家不要吃撐了最好是收藏起來或轉發出去，以便后面再細細看）。
本文由 @做設計的面條 原創發布于人人都是產品經理。未經許可，禁止轉載。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
UI設計是隨著智能設備的飛速發展、互聯網行業的發展以及農林牧漁傳統行業的急于轉向而興起。主要是企業對移動設備交互界面的重視。在企業越來越重視界面設計的今天。傳統的平面設計能為現在我們的UI設計提供哪些參考呢，我們能從中借鑒的技巧有哪些？今天就從版式設計說起。
在UI設計中版式設計不言而喻是非常重要的。版式設計就如同蓋房子先要搭好框架一樣。一款APP視覺呈現是不是符合商業性并兼具審美。其中的版式設計是其核心。而在平面設計中版式設計也是一個作品的核心。平面設計長時間的發展積淀了相當多實用的技巧和方法。
版式設計中形勢方法指的是、畫面的表現方法和原理。說白了就是畫面要出什么效果就用什么表現手法而已。平面設計中形勢方法可以分為。虛空留白、比例適度、對比調和、變化統一、變異秩序、節奏韻律、重復交錯、對稱均衡等。今天我們舉例分析一下前四個。
1、虛空留白（適合現在極簡設計風格）
這種版式設計主要是突出主題，給人以輕松愉悅的感覺。適合文藝范的和有逼格的app界面使用，能夠營造出高品質的界面風格。但是如果一旦運用不得當容易出現界面空或單調的感覺。
2、比例適度（協調UI中各部分內容）
平面設計中所說的比例適度主要是整體和部分的協調，采用合理的比例方法，如：黃金比例、等差等比。去協調各部分的關系使各部分要素產生聯系。在UI版面布局中正是需要調節和有機的組合各要素在有限的界面里的合理性。
3、對比調和（UI中信息層級的表現）
對比調和在平面設計中是經常用到的，整體版面要調和，局部版面要對比。對比是強調主次關系。對比調和用到UI設計中可以做到設計內容在主次關系的層級化。在統一調和的界面里又充滿了對比的小情調。這正是平面不平之所在，也是一個優秀的界面所必備的。
4、變化與統一（是UI突破同質化的一種方法）
變化與統一是形式美法則的總則。是其他方法方式的一個總結。變化所說的就是在設計中要有所創新不能總墨守成規，統一是設計要做到視覺上的愉悅而不是雖然有局部吸引人的眼球但是整體一看卻是辣眼睛。變化和統一也許是突破現在APP同質化的一種方法。在現在APP同質化嚴重的情況下我們能做到APP的風格統一又不墨守成規尋求變化才是營造自己風格的一種方法。
這些平面設計里的形式美法則在UI設計中同樣受用。這些表面形式在做banner圖構圖和創意上也特別有用。
版式設計的基本類型有特別多。我們這里著重分析其中對UI設計最有幫助的骨骼型、左右分割、曲線型、滿版型這幾個基本類型。
1、骨骼型（類似網格構圖）
這里說的骨骼型就是在版式構圖中，進行橫豎向的分欄。能容嚴格按照分欄排列。版面效果沉穩厚重，井然有序，如果橫豎分欄交叉排列還可制造靈動活潑的版面氣氛。非常類似網格構圖的方法。在UI設計中也很受用，可以很好的規范個元素的位置。（如果你對目前的界面設計一籌莫展，不妨可以試試這種方法）
2、左右分割型（瀑布流）
左右分割不外乎就是把版面左右分開在配之以圖文。在UI中的應用是隨著扁平化卡片化的興起，在移動端界面尺寸的限制下，開始進行了信息的分割處理。橫向的卡片式布局使得一屏內所看到的信息受到了極大的限制（不利于用戶體驗，卡片式并非萬能）。所以就應用的左右分割的布局。左右分割有利于信息的呈現，可以與瀑布流結合。
3、曲線型（UI方向1）
曲線型主要表現的是韻律和節奏，可能符合一部分小眾APP設計界面設計，充滿了特色和戲劇性。我覺得有特色的界面設計是這些小眾APP的設計核心?？梢岳昧眍惖男”姷脑O計做吸引。
4、滿版型（UI方向2）
滿版設計在平面設計中主要表達大方、舒展的設計風格。在UI移動端界面設計中寸土寸金?，F在的扁平化，極簡設計風格都在留白提升逼格。但是未來極簡設計終將過去，我們面對的還是海量信息。
版式設計是平面設計的一部分，也應該是UI設計的一部分。這里僅僅是說出了版式設計的一點點內容，部分的形式美法則和版式設計的基本類型。還有很多很多對UI設計有利的點沒有發掘。站在巨人的肩上可以看的更遠，平面設計就是我們前進的加速劑。
本文由 @彪形大漢 原創發布于人人都是產品經理。未經許可，禁止轉載。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
今天來優化一張作品
今天我們來看一下學員作品并且優化一下！
在優化之前，你們能不能看出作品還存在什么問題呢？
是不是感覺已經是一張完成度很高的作品了，那它能不能更好呢？
當然可以！我們來看看如何優化。
原圖的構圖雖然感覺挺有意思，但是并沒有做到位，對于新手來說，這種構圖也是相對比較難的，前期我建議大家可以選擇一些相對不易出錯的構圖方式，比如元素圍繞主體，營造畫面沖擊力的居中構圖。
1.可以把元素聚集到中心周圍，讓畫面緊湊，飽滿，做出向外沖出的效果。
2.可以添加兩根前后貫穿空間的光帶，增強沖擊力，讓構圖更有張力！
這樣的構圖簡單并且容易出效果！
1.飽和度：
原版畫面中這一層次看起來是不是特別重，導致畫面的節奏一下有點亂掉了。而且整體飽和度相對比較高，有點油膩！
我們要適當降低畫面中部分層次的飽和度，這樣才會使整體更加高級，可以看下優化之后的效果：
是不是舒服多了。
2.統一色調：
我們做圖的時候主體和環境要有一些呼應，這個飛碟飛碟正面有點太綠了，缺少一些呼應環境的顏色，這樣就會感覺和畫面有些割裂感，可以增加一些環境色，使其統一呼應到一起。
我們看下前后優化的對比效果：
這樣就和諧多了！
首先我們來看原圖，是不是會覺得畫面中心有一點空，元素都在外部，導致整體不夠飽滿：
所以我們在優化的時候，把元素平均的分布在畫面的每一個地方，使空間看起來更加的均衡：
現在元素雖然均衡了，但是并沒有產生前后關系，所以我們讓后面的元素更弱一些，分幾個層次。
如下圖：
當我們把這樣的元素層次放在畫面里之后，看起來就會更加的精致飽滿，空間感十足：
其實增加趣味性的方法有很多，比如我們在這個畫面融入了很多表情，可以讓畫面更加生動。
除了這樣的方法，其實一些小小的改動有時候也可以讓畫面變得更加趣味一些。
比如：
原版的飛碟太正了，顯得呆呆的，這個時候我們可以把主體歪一下，一下子它就活潑了。
再比如：
有時候元素直接漏出來顯得比較生硬，如果我們利用一層一層的波紋，藏住元素，或許也可以巧妙地增加畫面趣味性：
效果還不錯吧！
最后我們加上文字，看看整體優化前后的效果！這是不是要比之前的穩很多呢：
最后，我們再來總結一些知識點吧：
1.構圖：構圖的時候就要要注意整體的飽滿度，畫面穩定，元素分得太分散就會不聚焦了。
2.顏色的飽和度：主體>元素>背景。
3.空間：畫面不能太空，要有節奏的把畫面每一個角落都照顧到，其次我們要在視覺上有前有后，增強縱向空間上的層次感。
4.趣味性：增加畫面趣味性除了利用表情以外，還可以用一些微小的變化去實現，比如歪著的可能比正的活潑一點，再比如元素的穿插互動也可以讓畫面增趣不少，大家可以多多嘗試！
以上就是今天和大家分享的內容，希望對大家有所幫助！
我們在設定界面風格的時候，少不了顏色的配比，但顏色一定是講究平衡的，其中一個最重要的平衡就是明暗的平衡，如果你的界面全屏都是很亮的顏色，那就會導致非常的刺眼，比如像瑞文同學的這個顏色設定：
就是過于明亮了，其實當我們的顏色過于明亮時，最常用的一種方式就是，直接用黑色去壓住亮色，像下面這組圖標的做法一樣，減少亮部顏色，直接增加黑色：
這樣就不會那么刺眼了，當我們明白了底層原理之后，再去優化配色，我們看前后的變化：
這樣就會比之前舒服很多，當然，也可以試試頭圖變成黑色，按鈕變成綠色，把重色面積繼續加大，但不管哪一種，都會比之前全是亮色要好很多！
小A同學是一個非常有潛力的同學，但是最開始交上來的吉祥物作業，也不是很理想，效果如下：
話不多說，我們就改動一個點，五官緊湊，看看前后效果對比：
可愛的程度完全不在一個檔次，我們再看看小A同學后面的延展效果：
比之前強了很多很多倍，就是因為一個五官緊湊。
我們在做練習的時候，很重要的一個鍛煉點就是視覺敏銳度，能夠敏銳的發現哪里不舒服，這個真的很重要。
而視覺敏銳度里面就有一個維度是顏色，比如我們在看下面一兜糖同學做的質感圖標作業：
我們應該快速的看出，第一個圖標顏色不是很和諧，沒有后面兩個那么舒服，主要是那個藍色有點臟，我們看優化后的三個圖標：
就比之前要統一舒服很多。
當我們的練習達到一定量時，敏銳度自然就會提高很多，所以一定要多去練習，把敏銳度這一塊提高上來。
這是潘子同學的疑惑點：
他感覺綠色好難啊，第一次交上來的作業如下：
先不說造型問題，就光說顏色，就有點單薄，也有點太亮了，還有就是顏色比較正。
其實我們在配綠色的時候，只要把綠色加一點藍色，或者加一點黃色就會讓顏色好看很多。
后來潘子同學把顏色進行了優化：
這樣就比之前還要多了。
還有包括檸檬同學用的綠色:
也是比較好看的。
這回再用綠色的時候，大家清楚怎么好看了吧！
以上就是今天和大家分享的一些知識點啦，大部分是關于顏色的，顏色敏銳度、綠色怎么配，明暗的對比等等，顏色是一個非常重要的視覺維度，希望大家都能重視，并且多多練習。提高自己的色感！
在任何時候，海報的圖片處理都是設計師不可避免的一個步驟，運用對色調的處理，構圖的改變，甚至于風格化處理來調整圖片，使之能夠更加的適合版面，我們今天分享的就是通過對圖片的處理來塑造不同風格海報的設計。
01-
酸性液體金屬效果處理
酸性風格它的體現形式通常是鐳射紋理，金屬玻璃材質，3D物體材質等，其中很多人都好奇金屬玻璃材質的做法，也就是如何將普通的圖片轉換成酸性圖片，接下來我們將講解酸性圖片效果的處理方法，二話不說，先上效果圖：
步驟一/step 01
導入已經摳好的素材，快捷鍵ctrl+shift+u作去色處理
步驟二/step 02
ctrl+j復制一層，ctrl+i反向一下，并設置模式為【差值】，ctrl+e合并這兩個圖層，這一步驟要重復2-3次左右，會形成這樣的效果，做好后的效果有點丑，但是沒關系，我們接著往下做。
步驟三/step 03
將圖形轉化為智能對象，執行命令：濾鏡-模糊-表面迷糊（數值自定，具體數值可以自行修改，主要將黑白部分過度更加柔和一些）
步驟四/step 04
執行命令：濾鏡-風格化-油畫（數值自定，這一步驟可以將黑白之間的過渡更加柔和，形成液體金屬的最終效果）
步驟五/step 05
執行命令：濾鏡-濾鏡庫-塑料包裝（數值自定，這一步驟還是處理黑白之間的過渡，使之更加柔和），最后可以調整一下亮度和對比度，使之與金屬更加相似。
步驟六/step 06
最后排版上文字，海報就完成啦。
02-
復古潮流風藝術海報
半調網屏模式作為印刷中的重要方法，有著其特殊的處理藝術效果。在ps中，通過色彩模式可以將圖片的效果處理成半調網屏的像素狀效果。它有著復古潮流的藝術效果，下面我將講解如何在ps中給圖片添加半調網屏藝術效果，同上，先上效果圖：
步驟一/step 01
在PS中導入圖片，在這種潮流海報中，我們追求特殊風格海報設計，可以在摳圖時故意粗糙的摳圖出來，并執行命令：圖像-調整-黑白
步驟二/step 02
執行命令：圖像-模式-灰度，再次執行命令：圖像-模式-位圖，調整參數像素設為300，方法使用半調網屏，點擊確定；
步驟三/step 03
在上一步點擊確定后出現以下界面，頻率越小，效果越強烈，越大效果越輕，角度設置像素格的旋轉角度，形狀可以自行嘗試選擇，我這里選擇的是菱形；
步驟四/step 04
我們需要把位圖模式轉換成RGB,需要執行兩次命令，第一次執行：圖像-模式-灰度，第二次執行：圖像-模式-RGB
接著是將弄好的圖片去掉白色底背景，在通道面板，按住ctrl鍵，鼠標左鍵點擊其中一個通道，得到白色選區，快捷鍵：ctrl+shife+i反選選區，快捷鍵：ctrl+j復制圖層，隱藏下面的圖層，得到了一個半調網屏的圖片。
步驟五/step 05
最后排版上文字，就可以得到一張復古潮流藝術風海報。
03-
炸裂風格圖片處理
接下來休息下，我們來做一個非常簡單，但又非常好看且具有形式感的圖片處理方法，炸裂風格圖片海報，調整比較細的方塊可以有刺繡效果，非常具有視覺沖擊力，同時也能使版面產生非常強烈的層次感與形式感。先看最終效果：
步驟一/step 01
只需將圖片導入PS，執行濾鏡-風格化-凸出，這里可以自行調整參數
步驟二/step 02
在版面上排版圖片和文案，這樣一張炸裂風格的海報就做好了。
04-
長虹玻璃風格海報
長虹玻璃效果顧名思義，就是像玻璃樣式的效果，他能給人一種朦朧的美感，與“模糊”有點類似，它比較適合潮流時尚的一些產品海報設計時使用，尤其在電商海報中特別常見，接下來我們來詳細講解這種效果的做法吧，先上效果圖：
步驟一/step 01
在ps中新建一個畫布，填充一個50%的中性灰，用矩形工具繪制一個細長的矩形，填充顏色為黑白的線形漸變；
步驟二/step 02
復制漸變的矩形框，填滿整個畫布，全選復制出來的矩形框，郵件轉換為智能對象，快捷鍵ctrl+shift+s存儲為psd文件，注這是后期用來置換的文件
步驟三/step 03
在畫布中倒入我們準備好的圖片文件，復制一層，執行命令：濾鏡-模糊-高斯模糊；
步驟四/step 04
執行命令：濾鏡-扭曲-置換，在跳出的頁面設置水平和s垂直比例都為50，置換圖：拼貼，未定義區域：折回，點擊確定后選擇剛存儲的用來置換的文件；
步驟五/step 05
將剛才線形漸變的矩形置于最上層，混合模式改為柔光，并且調節下透明度，這樣長虹玻璃效果就完成啦。
步驟六/step 06
選取工具選擇需要的部分執行蒙版，就可以得到一半有玻璃，一半沒有玻璃的效果，然后排版上文字，海報完成！
05-
3D炫彩海報
3d炫彩海報適用于科技，創意等風格呈現時使用，它的本質是將一張圖進行一種3d化處理，制作起來也是相當的簡單，且特別能提升版面的形式感與立體感，制作非常簡單，我們一起來做下唄，老規矩，先上圖：
步驟一/step 01
首先我們需要找一張顏色特別豐富的圖片，最好是像這種發光的海報，執行命令：濾鏡-扭曲-旋轉扭曲，設置相應的數值
步驟二/step 02
執行命令：3d-從圖層新建網格-深度映射到-平面，把3d面板里面的預設改為【未照亮的紋理】
步驟三/step 03
在3d里面調整合適的角度后，在圖層面板選擇圖層，點擊鼠標右鍵-柵格化3d，快捷鍵ctrl+t將圖層調整適合大??；
步驟四/step 04
最后排版上文字，海報就完成啦！
06-
塑料薄膜風格海報
最后一種是塑料薄膜風格海報，這種效果相對來說比較復雜，所以放在最后一個說，雖然不涉及圖片處理，但是對于海報設計來說可以說是錦上添花的一種存在，他能讓海報具有一種光澤的質感，使其更顯層次感和形式感，這種海報在店招海報或者產品海報中比較實用，廢話不多說，來一起來做下吧，還是老規矩，上效果圖
步驟一/step 01
我們需要新建一個空白圖層，填充黑色，執行命令：濾鏡-渲染-云彩
步驟二/step 02
執行命令：濾鏡-液化，這里你可以隨意一點畫，這是將塑料膜的紋路畫出來，這是我畫的樣子；
步驟三/step 03
執行命令：濾鏡-濾鏡庫-藝術效果-繪畫涂抹，畫筆類型選擇火花，這一步是將黑白顏色區分開來；
步驟四/step 04
再次執行命令：濾鏡-濾鏡庫-素描-鉻黃漸變，這一步同樣是為了是將黑白顏色區分開來，只不過這次的效果更加明顯；
步驟五/step 05
點開通道面板，按住ctrl鍵，隨意單機一個通道，得到選取，回到圖層面板，快捷鍵ctrl+j復制一層，圖層模式改為濾色，調整適合的透明度，最后在下面加上圖片，排版上文字，海報就完成啦！
藍藍設計的小編 http://www.syprn.cn