如何定義B端產(chǎn)品及B端產(chǎn)品經(jīng)理方法論
<dfn id="sm46c"></dfn>
該網(wǎng)頁聚焦 UI 設(shè)計(jì)中的膠囊和彈窗設(shè)計(jì)，展示了大量各類商業(yè)活動(dòng)的 banner 設(shè)計(jì)案例，涵蓋電商促銷、節(jié)日營銷、會(huì)員福利、課程招生等多個(gè)場景，體現(xiàn)了膠囊按鈕與彈窗在商業(yè)設(shè)計(jì)中的廣泛應(yīng)用，為相關(guān)設(shè)計(jì)提供了豐富的實(shí)踐參考。
該網(wǎng)頁聚焦 UI 設(shè)計(jì)中的膠囊和彈窗設(shè)計(jì)，展示了大量各類商業(yè)活動(dòng)的 banner 設(shè)計(jì)案例，涵蓋電商促銷、節(jié)日營銷、會(huì)員福利、課程招生等多個(gè)場景，體現(xiàn)了膠囊按鈕與彈窗在商業(yè)設(shè)計(jì)中的廣泛應(yīng)用，為相關(guān)設(shè)計(jì)提供了豐富的實(shí)踐參考。
本文主要介紹了字體設(shè)計(jì)中把控 “形與勢(shì)” 的方法及創(chuàng)意形態(tài)的挖掘
在 Logo 設(shè)計(jì)中，將直觀的象征、隱喻與戰(zhàn)略性思考相結(jié)合，能讓 Logo 脫穎而出并引發(fā)共鳴，而直覺作為設(shè)計(jì)的關(guān)鍵過程，可引導(dǎo)設(shè)計(jì)師找到最易懂的方案。象征符號(hào)能跨越語言快速被理解，其視覺簡約性帶來靈活性和永恒性，隱喻則能在不同概念間建立關(guān)聯(lián)，增添設(shè)計(jì)樂趣與記憶點(diǎn)。設(shè)計(jì)時(shí)需在核心采用象征或隱喻、存檔設(shè)計(jì)稿、用黑白色設(shè)計(jì)、確保無限縮放、平衡 Logo 并精確檢查，這些原則不僅適用于 Logo 設(shè)計(jì)，也可延伸到解決個(gè)人問題。
-推出兩種針對(duì)數(shù)字環(huán)境優(yōu)化的字體：“Kakao Big Font”和“Kakao Small Font”
-體現(xiàn)數(shù)字通信文化，例如復(fù)雜的文本表情符號(hào)，就像首輔音是一個(gè)字母一樣
-開放字體許可，可免費(fèi)用于個(gè)人和商業(yè)用途
(2025-06-17) 在人們更熟悉打字而非手寫、更熟悉滾動(dòng)而非書籍的時(shí)代，Kakao（代表鄭信雅）免費(fèi)推出了一種名為“Kakao Font”的數(shù)字字體，任何人都可以輕松地在屏幕上閱讀和表達(dá)文本。
為屏幕而生的文字 'Kakao大字' 'Kakao小字'
“Kakao字體”是一款針對(duì)數(shù)字屏幕上的可讀性和表現(xiàn)力進(jìn)行優(yōu)化的字體，包含“Kakao大字體”和“Kakao小字體”兩種類型。它并非簡單將現(xiàn)有字體進(jìn)行數(shù)字版本化，而是經(jīng)過全新設(shè)計(jì)，旨在為智能手機(jī)和PC屏幕提供最佳的閱讀體驗(yàn)。
正如標(biāo)題所示，“Kakao 大字體”是一款即使在屏幕上也能實(shí)現(xiàn)清晰醒目的字體。“Kakao 小字體”是一款適用于正文或標(biāo)題的字體，通過加寬字母間距并合理安排線條，使其即使在小尺寸下也能清晰可見，從而實(shí)現(xiàn)清晰可見而不會(huì)模糊。
僅用聲母‘ ??’和‘??’即可進(jìn)行交流…體現(xiàn)數(shù)字通信文化
特別是Kakao也抓住了時(shí)代的變化，只用“???”和“??”等首字母來表達(dá)自己的想法已經(jīng)變得很自然。
由于韓語的聲母通常被認(rèn)為與中間元音和尾元音連用，因此現(xiàn)有字體存在著單獨(dú)使用聲母時(shí)難以清晰閱讀的局限性。為此，Kakao通過增大字體尺寸并精確調(diào)整比例，使單個(gè)聲母即可準(zhǔn)確傳達(dá)含義，并將聲母改為獨(dú)立字母而非字母的一部分。
表達(dá)情感的特殊符號(hào)也變得更加復(fù)雜:)
此外，使用特殊字符表達(dá)的文本表情符號(hào)格式也得到了進(jìn)一步完善。通過自動(dòng)將兩個(gè)或多個(gè)符號(hào)或字母組合轉(zhuǎn)換為一個(gè)的連字功能，當(dāng)輸入特定符號(hào)時(shí)，它會(huì)被轉(zhuǎn)換成簡潔的表情符號(hào)，即使是文本，也能生動(dòng)地表達(dá)出類似面部表情的情感。
例如，像“:-D”這樣的笑臉表情符號(hào)，由于字母“D”的位置或大小取決于字體，很容易顯得突兀。但“Kakao Font”會(huì)將整個(gè)表情符號(hào)以有序的形式輸出，幫助用戶以簡潔平衡的方式使用表情符號(hào)。此外，像“->（箭頭）”這樣的常用符號(hào)組合會(huì)在輸入后立即自動(dòng)轉(zhuǎn)換，免去了用戶單獨(dú)搜索特殊字符的麻煩。
Kakao 將“Kakao 字體”應(yīng)用于開放字體許可證 (OFL)，并免費(fèi)提供給個(gè)人和商業(yè)使用。該字體可從 Kakao 公司網(wǎng)站下載。
它也可以通過 RixFont Cloud 和 Adob??e Font 等云字體服務(wù)免費(fèi)獲得。
Kakao BX 設(shè)計(jì)負(fù)責(zé)人申永燮表示：“Kakao 字體是為了在我們每天接觸的智能手機(jī)等數(shù)字屏幕上提供最佳的可讀性和表現(xiàn)力而創(chuàng)建的。”他補(bǔ)充道：“我們將繼續(xù)理解時(shí)代變遷的溝通方式，并通過體現(xiàn)這一變化的字體，為更豐富的數(shù)字表現(xiàn)文化做出貢獻(xiàn)。”
新一輪驚天動(dòng)地的數(shù)字革命已經(jīng)打響， AI 技術(shù)帶來的改變令人矚目，引發(fā)了持續(xù)不斷的驚嘆，同時(shí)，也帶來了一些系列的蝴蝶效益，許多人在思考 AI 是否會(huì)取代我們現(xiàn)有的工作，恐慌開始蔓延。
我曾也有過這樣的擔(dān)憂。如果明天我的老板解雇我，用 AI 取代我怎么辦？直到我深入研究機(jī)器學(xué)習(xí)和 AI 算法相關(guān)領(lǐng)域知識(shí)，洞見了一些可能性。
現(xiàn)在，我能夠理解為什么大多數(shù)人（也包括我在內(nèi)）會(huì)認(rèn)為人類會(huì)被 AI 取代，或許，只是對(duì)未知領(lǐng)域充滿恐懼或好奇罷了，這正是人類的天性，會(huì)這就是我的看法。既然如此，何不去探索一番…
在平面設(shè)計(jì)、用戶體驗(yàn)/用戶界面、前端開發(fā)和項(xiàng)目管理領(lǐng)域，我發(fā)現(xiàn)現(xiàn)階段的 AI 能力還無法復(fù)制人類的創(chuàng)造力和直覺（或許在一個(gè)秘密的實(shí)驗(yàn)室，AI 機(jī)器人已經(jīng)覺醒）。然而，使用 AI 工具確實(shí)能夠助力我們更加高效和有效的交付工作！
在本文中，我將重點(diǎn)介紹可用于平面設(shè)計(jì)和用戶體驗(yàn)/用戶界面設(shè)計(jì)的 AI 工具/插件，以及能夠提升我們的信心和創(chuàng)造力的優(yōu)勢(shì)功能特性。在這之前，深呼吸一下，和我一起探索…
最近，我們可能看到許多人在社交媒體上發(fā)布關(guān)于 AI 生成的照片、藝術(shù)作品、3D 模型等內(nèi)容。令人驚嘆的是，他們可以通過文本提示生成圖像、轉(zhuǎn)換圖像，甚至讓 AI 創(chuàng)建特定圖像。
在我看來，AI 生成的照片、藝術(shù)作品和 3D 模型已經(jīng)基本可以更快速、更輕松且更有創(chuàng)意地表達(dá)我們的想象力。
問題是，我們是否可以將 TA 們用于商業(yè)嗎？
如果我們想將這些生成的圖片用于公司或任何行業(yè)，我們必須對(duì)其進(jìn)行修改。原因不難猜測(cè)，由于每一家企業(yè)都有自己的風(fēng)格偏好、營銷背景和品牌形象，現(xiàn)階段 AI 工具還無法準(zhǔn)確生成這些元素（需要我們定向訓(xùn)練 TA ，也需要我們提供設(shè)計(jì)方向）。為了增加企業(yè)那一份獨(dú)特性和個(gè)性化，我們現(xiàn)階段只能依賴 AI 完成 50% 的設(shè)計(jì)工作，而將另外 50% 需要我們的創(chuàng)意輸入和修改。
設(shè)計(jì)任務(wù)的 50% 已經(jīng)可以依靠 AI 生成，剩余 50% 仍然需要設(shè)計(jì)師進(jìn)行傳統(tǒng)化修改。不得不承認(rèn)，AI 已經(jīng)可以分擔(dān)設(shè)計(jì)師們一大半的任務(wù)。因此，那些非設(shè)計(jì)專業(yè)的外行（也包括一部份設(shè)計(jì)師）會(huì)認(rèn)為 50% 的設(shè)計(jì)師應(yīng)該會(huì)被取代，然而，這個(gè)觀點(diǎn)非常膚淺，甚至略顯無知。
請(qǐng)看下面的食品海報(bào)示例：
使用 AI 工具的好處：
值得探索的 AI 工具和插件：
在用戶體驗(yàn)（UX）和用戶界面（UI）設(shè)計(jì)中， TA 與前面提到的平面設(shè)計(jì)有些相似，UX/UI 設(shè)計(jì)師可以使用 AI 工具來設(shè)計(jì)網(wǎng)站和移動(dòng)應(yīng)用的界面。
只需提供一個(gè)文本提示，Uizard 就會(huì)生成用戶界面，之后我們可以根據(jù)需要進(jìn)行修改。
使用 AI 工具的好處：
值得探索的 AI 工具和插件：
給 Gemini 一個(gè)清晰的提示，我們可以獲得設(shè)計(jì)所需的圖像和文案。
值得下載的 Figma 的 AI 插件：
在了解所有優(yōu)勢(shì)特性之后，現(xiàn)在是時(shí)候介紹一些 Figma 的插件了，這些插件可以在 2025 年為用戶體驗(yàn)設(shè)計(jì)師帶來諸多好處（包括：節(jié)省大量設(shè)計(jì)時(shí)間）。
1、Random Name Generator ：一個(gè)可以隨意生成名稱的插件。目前大約有 5 萬 9 千名用戶在使用該插件。
2、Rendition AI： 我們可以創(chuàng)建應(yīng)用設(shè)計(jì)并獲取該設(shè)計(jì)的 Tailwind 代碼。目前大約有 3 萬名用戶在使用該插件。
3、MagiCopy – AI 文本生成器-可以幫助我們獲得特定風(fēng)格的標(biāo)簽、圖標(biāo)等內(nèi)容。目前大約有 1 萬 8 千名用戶在使用該插件。
4、Ando-設(shè)計(jì)師 AI 助手-可以幫助我們從提示、形狀和圖像中生成數(shù)百萬個(gè)設(shè)計(jì)創(chuàng)意。目前大約有 7萬1千名用戶在使用該插件。
5、VisualEyes-可以基于歷史數(shù)據(jù)模擬用戶測(cè)試行為，并找出潛在的可用性問題。目前大約有 3 萬用戶在使用該插件。
6、Astrid Text Generator – 可以幫助我們優(yōu)化文案。我們只需點(diǎn)擊幾下即可獲得個(gè)性化的寫作反饋建議。目前大約有 2 萬 6 千名用戶在使用該插件。
7、Magician – 可以將繁瑣且耗時(shí)的任務(wù)自動(dòng)化，讓用戶能夠?qū)⒕性诠ぷ髦懈邉?chuàng)造性的方面。目前大約有 16 萬 3 千名用戶在使用該插件。
雖然人工智能（AI）是一種強(qiáng)大的工具，但是，根據(jù)我一段時(shí)間的觀察和使用，目前的人工智能還并不能取代設(shè)計(jì)師的創(chuàng)造力。而是，作為一位強(qiáng)有力的戰(zhàn)友，增強(qiáng)了設(shè)計(jì)師的多項(xiàng)能力，并促進(jìn)了設(shè)計(jì)交付的穩(wěn)定性。
不得不承認(rèn)，在設(shè)計(jì)領(lǐng)域，AI 技術(shù)提升設(shè)計(jì)能力尤為突出，能夠輔助設(shè)計(jì)師高效地創(chuàng)造積極的成果。
除設(shè)計(jì)之外，如果我們能夠善加運(yùn)用人工智能，其潛力無可限量，能夠打破職業(yè)的邊界，助力設(shè)計(jì)師擴(kuò)展到多個(gè)行業(yè)領(lǐng)域。我相信，以這種方式利用人工智能，必定將在各種應(yīng)用中帶來顯著的優(yōu)勢(shì)。
加油，設(shè)計(jì)師們！帶著好奇去探索這個(gè)人工智能時(shí)代吧！
蘭亭妙微(www.li-bodun.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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è)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
在交互設(shè)計(jì)中，字體的呈現(xiàn)方式是提升信息傳遞效率的重要一環(huán)，文字信息層級(jí)的處理是否得當(dāng)，一定程度上會(huì)對(duì)用戶的視覺體驗(yàn)有著重要影響。那么在字體設(shè)計(jì)上，設(shè)計(jì)師或者相應(yīng)的業(yè)務(wù)人員應(yīng)該如何做好處理，以提升信息傳播的效率和質(zhì)量？不如來看看作者的總結(jié)吧。
文字是設(shè)計(jì)中的重要組成部分，就像我們平時(shí)看到的海報(bào)，里面各種被精心設(shè)計(jì)過的字體經(jīng)常會(huì)成為視覺焦點(diǎn)，以醒目且個(gè)性化方式傳達(dá)出內(nèi)容的精髓，最后達(dá)到的效果事半功倍。
雖然在UI設(shè)計(jì)中不需要對(duì)文字過分設(shè)計(jì)，但圖文作為主要的傳播途徑，字體的使用是否規(guī)范合理將直接影響著信息傳播的優(yōu)先級(jí)、重要程度以及用戶的接收質(zhì)量和效率。所以不管是平面設(shè)計(jì)還是UI設(shè)計(jì)，字體都是不可忽視的核心元素，做好對(duì)文字信息層級(jí)的處理，對(duì)用戶的視覺體驗(yàn)有著至關(guān)重要的作用。
互聯(lián)網(wǎng)經(jīng)過多年的發(fā)展，也積累的很多的專業(yè)字體知識(shí)，設(shè)計(jì)師應(yīng)該去了解字體的性格及特征并將其合理運(yùn)用，才能將信息更清晰地傳達(dá)給用戶。本文將圍繞著字型、字號(hào)、字距、字重等幾個(gè)屬性，針對(duì)各方面深度解析，希望能夠幫到大家。
文字是信息內(nèi)容的載體，能最直接的將信息清晰地表達(dá)出來，字體則表現(xiàn)了文字的外在特征，合理地使用這些屬性特征不僅能清晰準(zhǔn)確地傳遞信息、用于特定場景還能賦予情感表達(dá)，展現(xiàn)出獨(dú)特的魅力，例如：健身、器械類的產(chǎn)品使用的字體通常會(huì)給人一種力量、剛硬、壯實(shí)的感覺，而女性專用產(chǎn)品字體則顯的纖細(xì)、苗條。
不同類型的字體傳達(dá)出不同的氣質(zhì)，綜合來講，字體可分為黑體、宋體、圓體、書法體這四類，平時(shí)大家看到的各種形形色色的其他字體，基本是通過這幾類延伸而來。
在UI設(shè)計(jì)中，絕大多數(shù)的文字排版用的是黑體，諸如思源黑體、阿里巴巴普惠體、蘋方（ios）、微軟雅黑（PC web）等都是標(biāo)準(zhǔn)的黑體。另外，特定場景如瓷片區(qū)、卡片、banner、專題頭圖、引導(dǎo)頁、閃屏等，對(duì)于用什么字體不會(huì)有太大的限制，在避免商用侵權(quán)的前提下符合產(chǎn)品氣質(zhì)即可。
黑體字的筆畫橫平豎直、粗細(xì)均勻且字面呈正方形，一般來說，沒有襯線的字體都可以稱作黑體。黑體結(jié)構(gòu)清晰、簡潔有力，能讓界面顯得莊重還附有現(xiàn)代感，雖然氣質(zhì)上沒有太大的個(gè)性化、但可塑性很強(qiáng)，這也是在UI設(shè)計(jì)中、黑體一直很受青睞的原因，無論是標(biāo)題、正文、提示等使用場景都可以作為首選，對(duì)老設(shè)計(jì)師能多一個(gè)選擇、新手設(shè)計(jì)師也不易犯錯(cuò)。
iOS與Android是移動(dòng)設(shè)備的兩大系統(tǒng)，雖然很多設(shè)計(jì)師用一稿適配兩端、遇到特殊頁面也只是單獨(dú)拎出來微調(diào)即可，但對(duì)于中、大型的互聯(lián)網(wǎng)公司則很難滿足優(yōu)質(zhì)用戶體驗(yàn)中的部分細(xì)微差別，例如：iOS的蘋方字體在Android設(shè)備中無法高度還原、預(yù)留的文字?jǐn)?shù)量上限位置無法顯示完整等，都會(huì)影響用戶體驗(yàn)。
此外，iOS和Android都有自己獨(dú)立的設(shè)計(jì)規(guī)范，大家有時(shí)間的可自行查看，本文只對(duì)字體規(guī)范作基本了解。
iOS使用的是「蘋方」字體，提供了6個(gè)字重，英文字體為「San Francisco」；Android使用的是Google聯(lián)合Adobe發(fā)布的「思源黑體」，為充分滿足設(shè)計(jì)要求，提供了7個(gè)字重，英文字體為「Roboto」。
此外，如果界面中涉及的數(shù)據(jù)較多，數(shù)字使用DIN字體也是不錯(cuò)的選擇，字體外形較長，易用且耐看，很適合數(shù)據(jù)統(tǒng)計(jì)展示，不過這款字體商用的話需要收費(fèi)的。
字號(hào)的大小決定信息的層次和權(quán)重，不規(guī)律的使用字號(hào)會(huì)讓頁面信息雜亂，不利于用戶閱讀。在設(shè)定字號(hào)規(guī)范時(shí)，需特別注意最小值和遞增值。
最小值決定信息的可讀性，以2倍圖為例，iOS11系統(tǒng)將最小字號(hào)規(guī)范為11pt（22px），但很多產(chǎn)品依然將最小字號(hào)設(shè)定為20px，甚至部分產(chǎn)品將18px的數(shù)字加粗運(yùn)用在標(biāo)簽中，所以最小字號(hào)的設(shè)定并沒有固定數(shù)值，原則上不影響用戶的瀏覽就行。筆者建議最小字號(hào)不要低于20px，在設(shè)計(jì)過程中，可以通過設(shè)備實(shí)時(shí)預(yù)覽，因?yàn)橥瑯拥淖痔?hào)在不同的環(huán)境、色值、背景下，其視覺效果都有所區(qū)別。
其次，遞增值決定著信息層級(jí)區(qū)分的明顯程度，遵循字號(hào)越大、遞增值越大的原則，常用字號(hào)數(shù)量控制在6種左右。iOS和Android都是采用的2倍數(shù)柵格系統(tǒng)，為了讓字號(hào)的層級(jí)區(qū)分更明顯，字號(hào)設(shè)定要避開奇數(shù)且最小遞增值不要低于4px，下面舉幾個(gè)常見的例子：
規(guī)范好的字號(hào)該如何使用，還得根據(jù)界面中的實(shí)際場景來決定，如下圖：
字間距是指兩個(gè)字符之間的橫向間隔距離，在界面排版中，除了西文的字間距調(diào)整需求較大外，中文通常只保持默認(rèn)，只有少數(shù)場景才會(huì)手動(dòng)調(diào)整，且沒有固定的規(guī)律，保持視覺舒適狀態(tài)即可。例如：banner、界面大標(biāo)題、重要數(shù)字（取件碼）顯示等。
行高是指包圍在字體之外的隱形邊框，一個(gè)字體元素的的行高等于文字上邊框+下邊框+字號(hào)的高度之和。
西文字體因高度的參差不齊，本身就能制造出視覺上的上下空間，通常行高為字號(hào)的1.2倍，而中文字體沒有上下間隙的延伸，行高則較大，一般在1.5倍左右，如果字號(hào)較小且折行較多，行高甚至能達(dá)到字號(hào)的2倍。
字重指的是字體的粗細(xì)，不同的字重能體現(xiàn)出不同的層級(jí)關(guān)系，給用戶的視覺感受也截然不同。
像蘋方、思源、阿里巴巴普惠這些家族字體一般都會(huì)有極細(xì)體、細(xì)體、常規(guī)體、黑體、粗體等多個(gè)字重，在UI設(shè)計(jì)中，實(shí)用的就常規(guī)體、加粗兩個(gè)字重，再通過色彩、字號(hào)使其成為對(duì)立關(guān)系，明顯的拉開文字內(nèi)容層級(jí)后，方能保持良好的瀏覽體驗(yàn)。
這種主要針對(duì)標(biāo)點(diǎn)符號(hào)，以英文字母為標(biāo)準(zhǔn)，半角是指一個(gè)符號(hào)占用一個(gè)標(biāo)準(zhǔn)字符（英文）的位置，全角則是占用兩個(gè)字符位置。
眾所周知，中文使用都是全角、英文使用半角，并且會(huì)隨著中/英文的切換而自動(dòng)改變，但有時(shí)候難免會(huì)操作失誤讓頁面中的某處信息看著怪怪的卻不明所以、另外中文信息中的時(shí)間/日期也大多會(huì)使用半角符號(hào)，所以設(shè)計(jì)師對(duì)此有一定了解的時(shí)候，在處理這些細(xì)枝末節(jié)就能做到收放自如。
在色彩規(guī)范中，除主/輔助色之外，設(shè)計(jì)師還會(huì)提供3~4個(gè)等級(jí)的配色，如通用的#333（標(biāo)題）、#666（正文）、#999（提示）、#ccc（占位符），這也是UI通用的文字色用色規(guī)范，不同的字號(hào)需用色規(guī)律。
如果想進(jìn)一步延展，可以增加一點(diǎn)品牌色，也可以使用#000（純黑）調(diào)整不透明度來體現(xiàn)文字色彩層級(jí)，深色模式中很常見，下面我們一起來了解幾個(gè)常見的使用場景。
標(biāo)題的主要作用是讓用戶以最快的速度了解界面主要信息，需要時(shí)刻吸引用戶的注意力，例如APP中的導(dǎo)航欄、模塊標(biāo)題、內(nèi)容標(biāo)題、數(shù)據(jù)統(tǒng)計(jì)等。需要簡單明了且有沖擊力，字號(hào)一般會(huì)控制在30px以上并加粗顯示，直接使用一級(jí)色值（#333）即可。
在特殊場景下，標(biāo)題也可以使用主體色值，但一定要注意容器背景與其他信息色彩的協(xié)調(diào)，不然花里胡哨的還不如用回一級(jí)色值。
正文并不需要吸引用戶注意力，它主要是提供標(biāo)題的注釋或內(nèi)容的詳細(xì)說明。
當(dāng)白色背景文本內(nèi)容過多、在需要用戶仔細(xì)閱讀的情況下，一定要注意顏色不能太深，不然顯的主次不分，還有些刺眼，這里推薦26~30px字號(hào)使用二級(jí)文字（#666）色值。
提示類文字使用場景就相對(duì)較多，它除了給用戶展示當(dāng)前狀態(tài)，還能給予合理的引導(dǎo)，促進(jìn)用戶進(jìn)行下一步操作。常見使用色值為三級(jí)（#999）、四級(jí)色值（#ccc），例如界面中的操作注意事項(xiàng)、表單占位符等。字號(hào)一般為24px，因使用場景不同，也會(huì)有特殊的存在，例如表單中占位符的字號(hào)會(huì)跟隨輸入后的字號(hào)統(tǒng)一。
超鏈接在字號(hào)、色值上沒有一定的限制，但需要一個(gè)特定的輔助元素/屬性來提示用戶這是可點(diǎn)擊的。
例如APP登錄頁面，找回密碼、注冊(cè)、獲取驗(yàn)證碼等，大部分都是用主體色、圖標(biāo)（右箭頭）等方式強(qiáng)化可操作入口，而PC端網(wǎng)頁中超鏈接的表現(xiàn)方式，下劃線、藍(lán)色字體、>>這三種方式幾乎能涵蓋所有。
規(guī)范并非不可更改，它只能幫助設(shè)計(jì)師在大部分使用場景中減少設(shè)計(jì)出入并提高產(chǎn)出效率，但總有一些使用場景需特殊對(duì)待，字體也不例外，如以下場景：
雖說黑體（蘋方、思源、阿里巴巴普惠）是UI設(shè)計(jì)中的首選字體，但這也僅僅只是建立在不出錯(cuò)的的情況下、滿足基本條件而選擇，如果想表達(dá)出產(chǎn)品的類型、情感、氣質(zhì)等品牌屬性，在不影響用戶識(shí)別的前提下，可選擇一款符合產(chǎn)品氣質(zhì)的字體，打造出差異化的瀏覽體驗(yàn)，對(duì)于追求完美的APP來時(shí)是一個(gè)不錯(cuò)的解決方案。
例如，部分藝術(shù)、女性類的APP會(huì)選擇使用宋體，整體看起來有一種高端、時(shí)尚且優(yōu)雅的感覺。
整體界面使用特殊字體還是相對(duì)較少，為了更好的體現(xiàn)出產(chǎn)品屬性/風(fēng)格，將其融入不同的模塊及使用場景，會(huì)讓產(chǎn)品更有特色，例如banner、瓷片區(qū)、大標(biāo)題、頭圖等，對(duì)用戶的視覺吸引力能得到很大提升。
在一個(gè)APP中，堅(jiān)持使用同一個(gè)家族的字體，對(duì)標(biāo)題、正文等文字信息有一個(gè)統(tǒng)一的視覺規(guī)劃，這樣有助于建立起體系化的設(shè)計(jì)思路，避免在開發(fā)落地時(shí)存在一致性問題，減少開發(fā)與設(shè)計(jì)的出入。
筆者曾見過這樣的設(shè)計(jì)師，界面中原本用了「蘋方」字體，在一個(gè)特殊場景下，「蘋方」的粗體字重?zé)o法滿足大標(biāo)題的使用需求，于是將大標(biāo)題單獨(dú)改為「阿里巴巴普惠體」的最大字重。
從表面上看，上述的設(shè)計(jì)需求是滿足了，但稍有不慎就會(huì)成為沒有價(jià)值的藝術(shù)品，首先，單獨(dú)一處使用不同家族的字體，會(huì)影響整體視覺的一致性；其次，若程序沒有嵌入另外的字體，產(chǎn)品落地后其視覺效果毫無改觀，且更沒有必要為了某個(gè)場景的使用要單獨(dú)嵌入幾十到幾百兆的家族字體，讓應(yīng)用安裝包無故加大。在設(shè)計(jì)中，有時(shí)候在解決某個(gè)問題時(shí)，解決方案并非無可替代，加粗字體亦是如此。
另外，在可用性、實(shí)用性強(qiáng)且必要的情況下，并非不能再增加一個(gè)家族字體，例如所有標(biāo)題系列使用「阿里巴巴普惠體」、數(shù)字系列都使用「DIN」，前提是一定要形成體系化，并非某一處的使用。
在同一個(gè)界面中，字體色值、字號(hào)、字重等，都是用于區(qū)分信息層級(jí)，盡量不要使用過多的層級(jí)，避免層級(jí)混亂影響信息瀏覽。
在信息層級(jí)處理方式的四個(gè)基本原則中，「對(duì)比」就是將復(fù)雜的信息通過元素的各種屬性以不同的視覺效果呈現(xiàn)，來體現(xiàn)信息節(jié)奏感，并非是為了好看而隨意給文字賦予各種屬性及樣式效果。
避頭尾使用在文字內(nèi)容較多的折行場景中，主要處理標(biāo)點(diǎn)符號(hào)剛好出現(xiàn)在一行文字的開頭或結(jié)尾時(shí)，通過自動(dòng)調(diào)整單行的字符間距、在視覺上將標(biāo)點(diǎn)符號(hào)前移或后移。
在新聞資訊類應(yīng)用的詳情頁中，避頭尾使用的較多，用以避免頭/尾存在標(biāo)點(diǎn)符號(hào)造成視覺重量不一、信息參差不齊的問題出現(xiàn)。
很多時(shí)候，為了區(qū)分信息層級(jí)，首先想到的是利用不同的字號(hào)、字重來體現(xiàn)，這當(dāng)然沒有問題，但如果結(jié)合字體的明暗關(guān)系（灰度色值等級(jí)）則效果更佳。
如下圖：標(biāo)題一級(jí)色值（#333）、正文二級(jí)色值（#666）、時(shí)間日期三級(jí)色值（#999）。
備用字體只會(huì)運(yùn)用在web頁面中，如果網(wǎng)站需要一款特殊的字體才能彰顯其獨(dú)特的氣質(zhì)、同時(shí)又擔(dān)心用戶在某些設(shè)備中因?yàn)闆]有這個(gè)字體而無法瀏覽其效果，則會(huì)另外再選擇一款相近的通用字體作為備選，以彌補(bǔ)視覺體驗(yàn)上的損失。
如果字體包不大，也可以讓開發(fā)將其放在服務(wù)器端，這樣能讓所有用戶都能看到相同的效果，省去了不少麻煩。
可讀性應(yīng)該是選擇字體的首要元素，雖說很多文字我們都可以從前后字義、聯(lián)想詞等角度將自己的理解補(bǔ)充完整，但完全沒有必要。
UI設(shè)計(jì)不像海報(bào)那樣融入較多的藝術(shù)成分，更需要的是內(nèi)容清晰、表意明確、高效率的傳達(dá)，任何增加用戶閱讀、理解成本的做法都應(yīng)該規(guī)避掉，例如過于變形的可愛風(fēng)格、書法手寫體等都盡量少用。
文本內(nèi)容是UI界面中占比較多的元素之一，設(shè)計(jì)師需要對(duì)其基本屬性及使用場景有一個(gè)清晰的了解，使用的是否恰當(dāng)取決于我們對(duì)字體的選擇。雖說在UI領(lǐng)域，字體模塊類的文章比較少（更多是文字、字庫的設(shè)計(jì)），但它在設(shè)計(jì)規(guī)范中的地位是舉足輕重，選好一款字體對(duì)設(shè)計(jì)來說是錦上添花。
關(guān)于UI界面中的字體，其實(shí)沒有太多的講究，也沒必要整得花里胡哨，重點(diǎn)在于排版過重中注意信息層級(jí)的劃分以及有足夠的視覺舒適度即可。
專欄作家
大漠飛鷹；公眾號(hào)：能量眼球，人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動(dòng)、產(chǎn)品體驗(yàn)的挖掘，利用設(shè)計(jì)的手段為受眾用戶帶來更好的體驗(yàn)，即好看、好用。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于 CC0 協(xié)議。
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.li-bodun.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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è)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
春節(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é)，作為中國最重要的傳統(tǒng)節(jié)日，不僅承載著深厚的文化內(nèi)涵，更是一場全民參與的消費(fèi)盛宴和社交狂歡。在這個(gè)特殊的時(shí)期，人們的注意力高度集中，圍繞春節(jié)展開的各種活動(dòng)，無論是線上還是線下，都呈現(xiàn)出爆發(fā)式的增長。
從電商數(shù)據(jù)來看，2025年全國網(wǎng)上年貨節(jié)期間，全國日均網(wǎng)上零售額同比增長6.2%，累計(jì)網(wǎng)絡(luò)零售額更是突破7000億元人民幣，同比去年增長9.8%，再創(chuàng)歷史新高。
抖音電商“春節(jié)不打烊，財(cái)神送福氣”活動(dòng)中，全域日均支付GMV同比增長56.02%，直播日均支付GMV同比增長46.57%。
快手本地生活“新春團(tuán)購節(jié)”GMV同比大漲117%，新線城市日均支付用戶數(shù)環(huán)比增長234%，這些驚人的數(shù)據(jù)，無一不彰顯著春節(jié)期間電商消費(fèi)的強(qiáng)勁活力。
社交平臺(tái)上同樣熱鬧非凡。除夕及春晚期間微博活動(dòng)用戶達(dá)2.97億，全站互動(dòng)超3.1億次，4656萬用戶除夕贏得福運(yùn)紅包，全國年味相關(guān)話題閱讀量破102億。
快手在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é)期間成功吸引用戶的注意力，誰就能在市場競爭中搶占先機(jī)。
一個(gè)精心設(shè)計(jì)的廣告、一場別出心裁的互動(dòng)活動(dòng)，都有可能在這個(gè)流量高峰中迅速傳播，收獲海量的關(guān)注和曝光，實(shí)現(xiàn)品牌知名度的提升和產(chǎn)品銷量的增長。
下面就讓我們看看各大廠在春節(jié)期間都找到了哪些設(shè)計(jì)機(jī)會(huì)點(diǎn)？
設(shè)計(jì)思考：
設(shè)計(jì)思考：
設(shè)計(jì)思考：
設(shè)計(jì)思考：
設(shè)計(jì)思考：
登錄元夢(mèng)之星和洪恩識(shí)字，感覺就像打開了一場煙花秀的視覺盛典，特別是洪恩識(shí)字，效果特別的炸裂，數(shù)字煙花秀做的特別吸睛。
這樣的動(dòng)效視覺表現(xiàn)很好的與用戶產(chǎn)生了情感共鳴，拉近了彼此的距離，增加了節(jié)日的樂趣。
設(shè)計(jì)思考：
支付寶在春節(jié)期間推出了一款很驚艷的皮膚，畫面中仙氣飄飄，一改之前單調(diào)的純色背景，將有中國韻味的敦煌壁畫文化搬上了熒屏，增添了很多喜慶的氛圍和中國味，養(yǎng)顏又養(yǎng)心。
設(shè)計(jì)思考：
騰訊QQ在過年期間，推出了一個(gè)領(lǐng)Q幣的活動(dòng)還挺有意思，小企鵝穿著厚厚的衣服，手中抱著一個(gè)福袋在奔跑，通過這樣的動(dòng)效引導(dǎo)用戶去領(lǐng)金幣，非常的有意思。
設(shè)計(jì)思考：
Banner是很好進(jìn)行情感化設(shè)計(jì)的窗口，也是打造春節(jié)氣氛的絕佳寶地，那么這個(gè)春節(jié)它也一定不會(huì)缺席。
設(shè)計(jì)思考：
今年的微信紅包，新增了一個(gè)隨機(jī)的拜年紅包功能，可以隨機(jī)的派送紅包金額，并且在紅包的封面上可以長按，說出你想跟對(duì)方說的寄語，這個(gè)小小功能的精進(jìn)，讓發(fā)紅包這個(gè)事情也變得更加有溫度。
微信紅包，還有一個(gè)新的創(chuàng)新點(diǎn)，小小的紅包封面變成了產(chǎn)品的宣傳欄，比方說廣汽埃安的這個(gè)紅包封面，它既是拜年的寄語欄，又是絕佳的產(chǎn)品宣傳欄，配合動(dò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í)候，感覺到這不僅僅是簡單的功能了，更是一份對(duì)用戶的愛，以及對(duì)生命的敬畏。
設(shè)計(jì)思考：
過年期間，是重溫感情的好機(jī)會(huì)，朋友間彼此的問候還是很有必要的，那么如何問候，是簡單的文字，還是用更有創(chuàng)意的視頻畫面去表達(dá)呢？
發(fā)現(xiàn)我們考慮的，很多產(chǎn)品都已經(jīng)幫我們想好了，比方說訊飛智作、剪映就推出了很多拜年視頻的模板供用戶自己去選擇加工使用。
很大程度提升了用戶制作視頻的效率，也很大程度提升了產(chǎn)品的粘性，為用戶多考慮一點(diǎn)，用戶對(duì)產(chǎn)品的依賴也會(huì)更多一點(diǎn)。
設(shè)計(jì)思考：
發(fā)現(xiàn)支付寶在與用戶社交互動(dòng)這塊做的非常的好，每逢大的節(jié)日都會(huì)有與大眾互動(dòng)的運(yùn)營活動(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)。
春節(jié)是消費(fèi)高峰期，人們有購置年貨、禮品等需求，此時(shí)也是各大品牌搞營銷活動(dòng)的好機(jī)會(huì)。
設(shè)計(jì)思考：
設(shè)計(jì)思考：
酷我音樂在過年期間，把皮膚設(shè)計(jì)當(dāng)成了一種增加會(huì)員的刺激手段，一旦成為會(huì)員就能享受跟普通用戶不一樣的頭像裝飾。
連音樂播放頁的皮膚也會(huì)有更多選擇，可以選擇年味十足的播放頁，這讓成為會(huì)員的人有一種偏愛的感覺，很不錯(cuò)的促銷手段。
產(chǎn)品既能賺到錢，又能滿足一些用戶的需求，多好的共贏方式，擁有著健康的成長生態(tài)。
在阿里UCAN年度設(shè)計(jì)趨勢(shì)報(bào)告中，著重強(qiáng)調(diào)了設(shè)計(jì)在商業(yè)場景里對(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è)增長的核心力量。
以春節(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)簡潔直觀且富有創(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)作用。
微信團(tuán)隊(duì)發(fā)布《微信里的賽博年味兒》報(bào)告顯示，自制紅包封面玩法流行，春節(jié)期間微信里誕生了1億+款用戶創(chuàng)作紅包封面，約3.9億人收到此類自制封面紅包。
微信“送禮物”功能中，書籍品類送禮訂單量環(huán)比增長10000%+，收到禮物數(shù)目最多的省份前三甲是廣東省、山東省、浙江省。
看到這份趨勢(shì)報(bào)告，我驚呆了，挖掘一個(gè)符合用戶需求的產(chǎn)品功能，能帶動(dòng)海量用戶的黏性和活躍，不得不說，微信自制紅包的這個(gè)功能開發(fā)的太好了。
作為設(shè)計(jì)師，以前只在意產(chǎn)品的視覺和皮膚，沒有站在一個(gè)多維的角度去看待一件事情以及背后的邏輯，發(fā)現(xiàn)寫作讓我思維更開闊，視角更全面，想事情想的更清楚，看問題看的更明白，感謝這一年來自己筆耕不輟，一直在精進(jìn)的路上。
作者：姝斐suphie，公眾號(hào)：姝斐
本文由 @姝斐suphie 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來自作者提供
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.li-bodun.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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è)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
我之前說過要寫一系列專門針對(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)成是視覺元素在二次元的平面上，按照美的視覺效果，力學(xué)的原理，進(jìn)行編排和組合，它是以理性和邏輯推理來創(chuàng)造形象、研究形象與形象之間的排列的方法，是理性與感性相結(jié)合的產(chǎn)物。
而我的理解是：平面構(gòu)成主要是在二維空間運(yùn)用點(diǎn)、線、面結(jié)合一定的規(guī)律所形成的一種視覺語言，他可以是抽象的，也可以是具象的，可以是感性的，也可以是理性的，同時(shí)它也不是獨(dú)立存在的，而是伴隨著色彩／肌理／光影等而存在的。基本上世間萬物，所有我們接觸到的或無法接觸到的，看得見的或看不見的事物里都有平面構(gòu)成的運(yùn)用和身影。
Banner組成要素包含4個(gè)方面：文案 、商品／模特、背景、點(diǎn)綴物（可有可無）。
而我在之前反復(fù)強(qiáng)調(diào)過的，Banner的作用是：宣傳／展示／廣而告之／準(zhǔn)確傳達(dá)信息。
在前面我們提到，平面構(gòu)成主要是在二維空間運(yùn)用點(diǎn)、線、面結(jié)合一定的規(guī)律所形成的一種視覺語言，而Banner中的所有元素（文案／商品或模特／背景／點(diǎn)綴物）其實(shí)都可以看作是平面構(gòu)成里的點(diǎn)線面這些構(gòu)成元素。
那么，接下來我們就需要了解3個(gè)有關(guān)平面構(gòu)成的概念了：
接下來，我們分別了解下這幾個(gè)概念：
它們之間的排列有下面這么幾種：分離／相切／重疊／透疊／結(jié)合／減缺／差疊／重疊。
舉幾個(gè)例子：
從所有元素（點(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ù)舉例：電影《滿城盡帶黃金甲》劇照
Banner舉例： 模特重復(fù)排列疊加到背景里，既是一種紋理也是一種模特展示的方式。
（2）近似
近似指的是在形狀、大小、色彩、肌理等方面有著共同特征，它表現(xiàn)了在統(tǒng)一中呈現(xiàn)生動(dòng)變化的效果。近似的程度可大可小，如果近似的程度大就產(chǎn)生了重復(fù)感。近似程度小就會(huì)破壞統(tǒng)一。比如：
近視舉例：臺(tái)灣的一對(duì)雙胞胎姐妹
小時(shí)候
長大后
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ì)比舉例：買家秀和買家秀。。。
開玩笑了，我們舉個(gè)正經(jīng)的例子吧：照片ps前后
Banner舉例：
（5）密集：
密集在設(shè)計(jì)中是一種常用的組織圖面的手法，基本形在整個(gè)構(gòu)圖中可自由散布，有疏有密。最疏或最密的地方常常成為整個(gè)設(shè)計(jì)的視覺焦點(diǎn)，他其實(shí)也是對(duì)比的一種情況，越密集的地方給人感覺距離越遠(yuǎn)，反之越近。
密集舉例：
日本波點(diǎn)女王草間彌生的作品
草間彌生
Banner舉例：
（6）發(fā)射
是一種常見的自然現(xiàn)象，太陽四射的光芒就是發(fā)射的。發(fā)射具有方向的規(guī)律性，發(fā)射中心為最重要的視覺焦點(diǎn)，所有的形象均向中心集中，或由中心散開，有時(shí)可造成光學(xué)動(dòng)感，會(huì)產(chǎn)生爆炸的感覺，有強(qiáng)烈的視覺效果。
發(fā)射舉例：星軌／水波／觀世音菩薩背后自帶的光環(huán)
水波
星軌（攝影）
每次觀世音菩薩出場總是會(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）空間
矛盾空間舉例：前段時(shí)間非常流行的一款游戲《紀(jì)念碑谷》。
空間感Banner舉例：畫面中的元素可以假想為一些有大有小的點(diǎn)，然后按一定透視空間規(guī)律擺放（近大遠(yuǎn)小）。
由陰影營造的空間感
（9）分割
把整體分成小的部分。比如：
分割舉例：來自大自然的梯田
分割Banner舉例： 不同比例大小的色塊組成Banner的背景。
商品的排列也可以起到分割畫面的作用。
（10）肌理
又稱質(zhì)感，由于物體的材料不同，表面的排列、組織、構(gòu)造等不同，因而產(chǎn)生粗糙感、光滑、軟硬感。比如：
肌理舉例：木材等
肌理Banner舉例： 背景采用噴墨＋涂色的方式形成了一種很時(shí)尚的紋理。
（11）錯(cuò)視
因空間距離或周圍環(huán)境所造成的視覺差。主要有下面幾種：
1.繆勒—萊依爾錯(cuò)視
圖中兩條線是等長的，由于上下線段兩端的箭頭方向相反，上線段的箭頭占據(jù)的空間大，所以上面的線顯的較長。
2.垂直線與水平線的錯(cuò)視
大多數(shù)人往往把垂直線看的比水平線要長，這是高估的錯(cuò)覺。在水平線長度為8-10mm時(shí)，這種錯(cuò)覺最大。
3.透視錯(cuò)視
圖中的兩條線是相等的。看起來下面的要短，是因?yàn)橥敢暤腻e(cuò)覺。
4.正方形的錯(cuò)視
標(biāo)準(zhǔn)的正方形左右的邊看上去大于上下的邊。
5.黑白錯(cuò)視
圖中黑白線段，由于白線段明度大，具有膨脹的現(xiàn)象，所以看以來比黑線段長。
6.由于圖形結(jié)構(gòu)的影響而產(chǎn)生的錯(cuò)視
圖中組成三、四、五邊形的邊長都相等，但由于周長和面積的不同，產(chǎn)生邊長的不同。
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é)果。
如下：
和諧統(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)生了，所以，大家不妨也試試看哦。
Banner中的所有元素其實(shí)都相當(dāng)于平面構(gòu)成里的點(diǎn)或線或面，而所有元素所組成的Banner畫面其實(shí)又是一種情緒和信息的表達(dá)，所以我們可以從下面4個(gè)方面去理解這個(gè)問題：
當(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)綴物，也喜歡用大面積的暖色，其目的就是為了營造熱鬧的氛圍，給人熱情有親和力的感覺，板式以上下或者居中排版的方式多點(diǎn)，這種方式的視覺也更聚焦一些。
所以熱鬧促銷的頁面可以考慮下面這些排版樣式：
年輕活力：這種主題的Banner設(shè)計(jì)其實(shí)跟熱鬧促銷的方法類似，只是說，這種畫面里的點(diǎn)綴元素或者模特樣式需要表現(xiàn)得顯得更加俏皮活力一些，色彩上也會(huì)比較艷麗或明亮，營造一種青春活力的感覺，排版方式其實(shí)沒有什么特別的限制，發(fā)揮空間非常大。
所以年輕活力的頁面可以考慮下面這些排版樣式：
高冷大牌：這種主題的Banner設(shè)計(jì)重在體現(xiàn)一種一般人買不起，買了之后會(huì)顯得自己特別有優(yōu)越感的印象，那么畫面中就需要多留白，善用一些簡潔的或有棱角的圖形設(shè)計(jì)，切忌用一些比較卡哇伊或太柔美復(fù)雜的線條，同時(shí)，商品或模特的品質(zhì)要高，總而言之就是給人一種很貴很高端的感覺（窮人買不起，有錢人買了有面子），這個(gè)跟低價(jià)熱鬧促銷是相反的。
所以高冷大牌的頁面可以考慮下面這些排版樣式：
當(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)整體氛圍：
關(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ì)場的風(fēng)格延續(xù)（排版樣式保持一致，只是改變了顏色和品類商品和文案等）
風(fēng)格突破：關(guān)于品牌的風(fēng)格突破，可能是因?yàn)樯婕暗狡放粕?jí)或者品牌定位的改變，所以需要在設(shè)計(jì)上配合這一策略，比如說原先你面對(duì)的可能是青少年群體，但隨著時(shí)代的發(fā)展，你是繼續(xù)服務(wù)這些青少年群體跟著他們一起成長轉(zhuǎn)型為服務(wù)于大齡青年呢？還是繼續(xù)服務(wù)新一代的青少年群體呢？這時(shí)候你的用戶群體改變了，當(dāng)然也就意味著風(fēng)格可能需要作出改變咯。
比如QQlogo形象的升級(jí)：
對(duì)于這個(gè)話題，我們后面再抽出一篇文章單獨(dú)來講好了，大家感興趣嗎？
當(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)意：擬人化處理畫面，營造一種身臨其境的場景感
以上，我分別給大家講了這幾個(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.li-bodun.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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è)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.li-bodun.cn