從擬物風(fēng)格到扁平化，再到如今的多變色彩與微妙質(zhì)感，設(shè)計風(fēng)格的演變不僅反映了技術(shù)的進步，也折射出用戶需求的轉(zhuǎn)變。本文結(jié)合釘釘近10年的B端設(shè)計經(jīng)驗，深入探討2025年B端設(shè)計的三大趨勢：多變豐富的色彩、微妙克制的質(zhì)感以及清晰明了的圖形。揭示了如何在滿足企業(yè)高效、專業(yè)需求的同時，為用戶帶來更具情感價值和科技感的視覺體驗。

回溯互聯(lián)網(wǎng)的發(fā)展進程，從桌面端的撥號上網(wǎng)，到5G移動互聯(lián)網(wǎng)，再至人工智能的助力，科技領(lǐng)域正在經(jīng)歷著翻天覆地的變革。未來的數(shù)字世界，在沉浸感、參與度、個性化等維度對體驗會提出更進階的要求；與此同時，B端企業(yè)對于高效、簡便、用戶友好的界面需求與日俱增。在2025年的當(dāng)下，B端設(shè)計師唯有持續(xù)學(xué)習(xí)，適應(yīng)新技術(shù)與新趨勢，緊密圍繞客戶的業(yè)務(wù)價值展開設(shè)計，進一步注重實用性、包容性以及可定制化，方可為企業(yè)客戶塑造出卓越的產(chǎn)品與服務(wù)。

因此，我們結(jié)合釘釘近10年的B端產(chǎn)品設(shè)計經(jīng)驗，鑒于未來B端設(shè)計趨勢將展現(xiàn)出多元化、智能化和人性化的特質(zhì)，從B端產(chǎn)品個性化、風(fēng)格與質(zhì)感、界面版式、圖標(biāo)、動態(tài)交互等多維度設(shè)計展開深度研究，與大家一道探討B(tài)端設(shè)計的本質(zhì)和趨勢，期望在真正駕馭B端產(chǎn)品設(shè)計的這條道路上，帶來些許有益的啟迪。

上篇文章我們講述了B端產(chǎn)品的個性化趨勢，如何利用個性化幫助個體提升用戶價值，打造個體形象、滿足個體情緒以及增強個體自信。

今天，我們要給大家分享的是B端產(chǎn)品風(fēng)格&質(zhì)感，為企業(yè)塑造品牌形象、為個人用戶提供情感價值。

一、從技術(shù)發(fā)展看UI設(shè)計風(fēng)格的演變

設(shè)計作為科技和藝術(shù)的結(jié)合，UI設(shè)計風(fēng)格的演變不僅與技術(shù)的發(fā)展密不可分，而且與藝術(shù)創(chuàng)作風(fēng)格的發(fā)展有著異曲同工之妙，都經(jīng)歷了抽象—具象—抽象的過程。

第一階段：萌芽風(fēng)格

20世紀(jì)70-80年代是計算機圖形界面的萌芽階段，就像繪畫藝術(shù)起源之時的那個茹毛飲血的年代，當(dāng)時的原始人所能利用的工具只有火堆熄滅后留下的木炭，圖像呈現(xiàn)的載體也只有山洞內(nèi)的墻壁和巖石。就像剛剛進入計算機時代的設(shè)計師們，不僅缺少專業(yè)的繪圖軟件，而且當(dāng)時計算機本身的顯示能力也尚且不足。這個階段的UI設(shè)計，能夠在顯示器上清晰地顯示并傳達(dá)明確的含義，比畫出風(fēng)格更加重要。觀察當(dāng)時的操作界面，不難猜測當(dāng)時的設(shè)計師，努力以具象的表現(xiàn)風(fēng)格來減少人們對計算機界面的陌生感，但由于工具和載體的限制無法完美實現(xiàn)，雖然這種風(fēng)格無法被稱為擬物風(fēng)格，但為后來真正的擬物風(fēng)格的出現(xiàn)和發(fā)展奠定了基礎(chǔ)。

第二階段：擬物風(fēng)格

1995年，家用計算機的顯示能力迎來了質(zhì)的飛躍，Windows95發(fā)布、對真色彩的支持、PhotoShop5.0的發(fā)布……技術(shù)進步和專業(yè)軟件的加持讓設(shè)計師突破了過去創(chuàng)作工具和呈現(xiàn)載體的限制，就好像在山洞里用木炭繪畫的原始人，擁有了畫筆、顏料和畫布。設(shè)計師的創(chuàng)作空間和寫實能力得到極大提升。

與此同時，個人計算機和手機開始普及，圖形化的操作界面不再是科研人員和專業(yè)人士的專屬，而是普通人工作學(xué)習(xí)中的一部分。為了讓沒有接觸過圖形化操作界面的用戶快速識別圖標(biāo)代表的功能，最好的方式就是在界面中對現(xiàn)實世界中的物體進行還原，這便推動了擬物風(fēng)格的發(fā)展。

擬物風(fēng)格的設(shè)計作品，通過模擬現(xiàn)實物品的造型和質(zhì)感，通過疊加、高光、紋理、材質(zhì)、陰影等效果對實物進行再現(xiàn)，讓用戶以極低的學(xué)習(xí)成本快速熟悉圖形化的操作界面和產(chǎn)品功能，并以符合日常習(xí)慣和直覺的方式引導(dǎo)用戶進行交互。

例如在ios6中的相機icon，對鏡頭部分細(xì)節(jié)刻畫非常細(xì)致，用戶很容易聯(lián)想到使用真實相機時能夠做到的事情，這對用戶理解和熟悉某一個產(chǎn)品功能的幫助無疑是巨大的；再比如同樣在ios6中的書架icon設(shè)計也十分精彩，不僅對真實報刊架的結(jié)構(gòu)和質(zhì)感極度還原，而且對書架內(nèi)的雜志也進行了展示，用戶甚至能像真的面對一個書架一樣看到書架中的內(nèi)容，小小的icon中信息含量極高。

第三階段：扁平化風(fēng)格

到2013年左右，智能手機在全球主要國家和地區(qū)的普及率大幅提高。根據(jù)統(tǒng)計數(shù)據(jù)，許多發(fā)達(dá)國家的智能手機普及率超過了50%，發(fā)展中國家的智能手機普及率也在快速上升。大部分用戶已經(jīng)對圖形化的操作界面非常熟悉，無需那些極致寫實的風(fēng)格也能快速理解圖形背后的含義和功能。同時，越來越多的信息和應(yīng)用涌入智能設(shè)備，擬物風(fēng)格所推崇的肌理、質(zhì)感、光影……帶來精致效果的同時，也讓細(xì)節(jié)變得冗余，如何處理爆炸的信息成為UI設(shè)計的首要問題。就像19世紀(jì)攝影技術(shù)對傳統(tǒng)寫實繪畫藝術(shù)的沖擊，讓藝術(shù)家們重新思考繪畫藝術(shù)的發(fā)展方向一樣，擬物風(fēng)格的極致具象化在達(dá)到巔峰之時也漸漸到達(dá)了轉(zhuǎn)折點。

2013年9月ios7發(fā)布，并且首次在UI設(shè)計中采用了扁平化的設(shè)計風(fēng)格。這種風(fēng)格摒棄了擬物設(shè)計風(fēng)格中的寫實光影、肌理、冗余的細(xì)節(jié)、甚至放棄了體積的塑造以及一切可能會對識別產(chǎn)生干擾的元素，只保留對用戶最關(guān)鍵的信息，呈現(xiàn)出十分干凈整潔的視覺效果。

然而物極必反，扁平化設(shè)計的極致簡潔，容易讓長期使用的用戶感到冷淡和無趣，于是新擬物風(fēng)格應(yīng)運而生。

新擬物融合了擬物和扁平兩種風(fēng)格的特點，在光影和立體效果方面較為寫實，元素通常是凸起或凹陷于界面之上，視覺上錯落有致，但是在色彩和造型方面則更偏向于扁平化風(fēng)格，圖形往往經(jīng)過一定的簡化和抽象，并搭配少量簡潔的主觀顏色。但是新擬物風(fēng)格過于依賴投影和立體效果對界面元素的區(qū)分，很難呈現(xiàn)復(fù)雜的信息層級，而且微妙的對比度也不利于無障礙識別，所以這種風(fēng)格并未真正大面積流行和使用。

二、AI時代的B端設(shè)計風(fēng)格趨勢

2022年，ChatGPT發(fā)布，AI在自然語言處理方面達(dá)到了前所未有的高度，同年Midjourney和stablediffusion的出圈讓每個人看到了AI生圖的魅力。不僅各種AI應(yīng)用和網(wǎng)站如同雨后春筍般出現(xiàn)，而且各行各業(yè)的APP都在爭前恐后的升級自己的AI能力。這樣的時代背景，為UI設(shè)計提出了一個新的命題：如何用設(shè)計展現(xiàn)應(yīng)用的AI能力以及企業(yè)的智能化心智。

趨勢1：多變豐富的色彩

色彩在B端設(shè)計風(fēng)格中占據(jù)著至關(guān)重要的地位，能夠帶給用戶非常強烈的直觀感受，是用戶對產(chǎn)品和品牌的第一印象。例如藍(lán)色就是過去對To B或科技產(chǎn)品的色彩印象，諸如英特爾、微軟、聯(lián)想、戴爾、IBM…這些品牌通過藍(lán)色來傳達(dá)簡潔、未來感和高科技等視覺感受。但是這個標(biāo)準(zhǔn)并非是一成不變的，越來越多的B端設(shè)計，選擇使用豐富的色彩來表達(dá)智能化千變?nèi)f化的特點，科技感的表達(dá)不再是千篇一律的冷色，而有了更多的變化。

彌散漸變

彌散漸變是一種借助模糊效果將多種顏色進行混合的特殊漸變形式，多種顏色的混合以及不規(guī)律的漸變走勢，讓彌散漸變具有很強的氛圍烘托效果和表現(xiàn)力。暈開的色彩仿佛在一片虛空之中慢慢彌散開來，細(xì)膩、柔和又夢幻，很適合用來提升界面的局部氛圍。

優(yōu)秀的場景適用性

在B端設(shè)計中，屏效和識別尤為重要，利用圖形或插畫的形式烘托氛圍，往往需要占用更多的空間，并且在網(wǎng)頁端的適配過程中，容易產(chǎn)生圖文重疊帶來的識別的問題。而彌散漸變由于其模糊和明度均勻的特點，可以在為畫面貢獻豐富度的同時，不產(chǎn)生視覺上的焦點，所以在適配過程中也不會產(chǎn)生圖文重疊的問題，具有很普遍的應(yīng)用場景。

高效的場景拓展

在調(diào)整漸變時，通過保留一些相對清晰的輪廓，彌散漸變還能呈現(xiàn)出虛實結(jié)合的視覺體驗，讓畫面更具動感和層次變化，就像一面磨砂玻璃后飄浮著一些真實的物體一樣，十分具有空間感。虛實的變化讓色彩有了具體的造型，可能是一段波浪、一個球體、或是一座山丘……這樣的背景配合一些簡單的排版，便可以是一張海報、一張banner、一個推送封面……這無疑為高速迭代的B端設(shè)計提供了一個高效的解決方案。

動態(tài)變化

根據(jù)資料顯示，手機軟件的AI生圖時長一般在10秒至120秒之間，AI搜索平均時長大致在2秒到15秒之間，專業(yè)的寫作AI成文時間大致在3秒到30秒……

AI應(yīng)用伴隨著大量的等待時間。使用動態(tài)變化的顏色能夠降低用戶在等待期間的焦慮感，并且不斷變化流動的色彩也能暗示用戶，當(dāng)前仍處在“生成中”的狀態(tài)下。例如用戶在等待釘釘AI助理回答的過程中，聊天氣泡會呈現(xiàn)出多彩的流光效果；用戶在與AI助理進行語音交互時，整個屏幕邊緣會呈現(xiàn)動態(tài)的彩色光效，以表示當(dāng)前的AI激活狀態(tài)。

除此之外，全屏動態(tài)的漸變背景還很適合用在信息不多的功能或應(yīng)用首頁，例如在釘釘?shù)牡卿涰撁?，屏幕近三分之二的空間中只有簡單的文字動畫，搭配全氛圍的動態(tài)漸變背景，不僅清晰地傳達(dá)品牌的智能化心智，而且為“登錄”這一操作增添了滿滿的儀式感。類似的還有釘釘AI搜索的功能首頁，大面積涌動的動態(tài)漸變，充分在視覺層面展現(xiàn)了智能化的心智，而且大面積的留白也讓釘釘AI企業(yè)搜索的功能價值描述顯得格外突出。

趨勢2：微妙克制的質(zhì)感

雖然新擬態(tài)風(fēng)格并未大規(guī)模的使用和流行，但其衍生和沉寂的背后反映了設(shè)計的本質(zhì)就是一場功能和審美之間的角逐。B端設(shè)計更是如此，用戶側(cè)需要美的設(shè)計來愉悅工作中的心情，但又不想被花哨的色彩和裝飾干擾工作效率，企業(yè)側(cè)需要擺脫沉悶古板的刻板印象，但同時也需要呈現(xiàn)專業(yè)、科技的高大形象保持可信度。微妙克制的質(zhì)感表達(dá)為這種“平衡”的實現(xiàn)提供了解決思路。

玻璃擬態(tài)

玻璃擬態(tài)是2020年末開始流行的設(shè)計風(fēng)格，顧名思義就是對玻璃這種材質(zhì)的一種擬物化設(shè)計，玻璃擬態(tài)風(fēng)格相較于新擬物風(fēng)格最明顯的進步在于，它巧妙地利用玻璃這種材質(zhì)解決了新擬物風(fēng)格中元素邊界不清晰、難以體現(xiàn)復(fù)雜層級等問題。其風(fēng)格特點可以總結(jié)為以下特點：

通透：

由于磨砂玻璃的通透性，在界面中存在多個層級時，會呈現(xiàn)出一種虛實結(jié)合的美感。并且其透明的屬性，能夠很好的暗示用戶目前所處的位置，利用此特性，不僅能更沉浸的展現(xiàn)用戶當(dāng)前關(guān)注的信息，而且“疊加”而非“跳轉(zhuǎn)”的交互邏輯也極大減輕了用戶操作時的心理負(fù)擔(dān)。

懸?。?/p>

傳統(tǒng)的擬物風(fēng)格往往會塑造一個地面，再將圖標(biāo)“放置”在上面。而玻璃擬態(tài)風(fēng)格則更像是構(gòu)建了一個“無重力”的虛擬空間，界面中的元素有明顯的懸浮感，顯得十分輕盈，同時也非常適用于B端場景下對于科技感的體現(xiàn)。配合投影、虛實對比，用戶能夠清晰地感受到元素在空間上的高度差異，不僅保障了信息的可讀性，而且讓可交互元素更具點擊感。

微妙：

由于磨砂玻璃的物理特性，頁面背景在經(jīng)過“玻璃層”的模糊處理后會變得十分柔和，類似上文所述的“彌散漸變”，呈現(xiàn)出一種明度均勻，沒有視覺焦點的狀態(tài)，無論是動態(tài)還是靜態(tài)都能很好的保障前景文字、UI控件等元素的可識別性。并且在玻璃擬態(tài)風(fēng)格中，常常使用輕薄微妙的邊框來強化物理質(zhì)感，這種既作為描邊，又作為“玻璃”的厚度的處理方式，讓卡片能夠以一個恰到好處的對比度呈現(xiàn)在界面中。

綜上所述，玻璃擬態(tài)風(fēng)格在擬物程度上找到了一個很好的平衡點，既為枯燥的B端設(shè)計提供了真實感和趣味性，又保障了復(fù)雜信息情況下的識別度。并且由于玻璃光滑、透明等物理特性，也為“科技感”的視覺呈現(xiàn)提供了新的方向。

柔和光影+微質(zhì)感材質(zhì)

與C端設(shè)計中常用強烈的光影效果吸引用戶不同，b端設(shè)計相對更加沉穩(wěn)。對比阿里云、WPS、釘釘、騰訊云的官網(wǎng)首頁，都不約而同地使用了非常柔和的環(huán)境光，這種光影設(shè)計，在保障整體亮度的基礎(chǔ)上，不會產(chǎn)生明確的光照方向和陰影效果，并且在材質(zhì)選擇上，也都使用了高光、反光均不明顯的漫反射材質(zhì)或微質(zhì)感的毛玻璃材質(zhì)，整體視覺感受十分沉靜和整潔。

趨勢3：清晰明了的圖形

圖形在設(shè)計中扮演著兩部分角色，一方面圖形作為頁面的裝飾需要保證審美的愉悅性，另一方面圖形也作為文字信息的補充，需要傳達(dá)某些特定的含義。好的圖形設(shè)計不僅能為整個頁面的氛圍添光加彩，而且能幫助用戶更好的理解文字信息。

規(guī)律感的幾何圖形

在b端場景下，常常需要借助圖形表達(dá)一些抽象的概念，例如PaaS、服務(wù)器、AI、用量、科技、流量……這類含義并不直接對應(yīng)一個特定的造型，使用有規(guī)律的幾何圖形，似乎是一個不錯的選擇。這些技術(shù)概念的背后來自于二進制中0和1的組合，而將幾何元素有機地排列，甚至衍生出不同的形態(tài)的過程，不是正如代碼的編寫嗎？

簡潔高效的手繪元素

在當(dāng)下的B端設(shè)計領(lǐng)域，越來越重視情感關(guān)懷和個人用戶的體驗。在頁面中使用具有手繪感的元素或使用直接使用手繪圖案作為配圖，不僅能夠快速拉近品牌和用戶之間的距離，塑造年輕化、有親和力的品牌形象，也能提升用戶在使用產(chǎn)品工作時的愉悅感。這類充滿輕松感的圖形比起傳統(tǒng)的插畫或3d建模更加簡潔，色彩鮮明，具有很強的表現(xiàn)力，并且設(shè)計成本也更低，十分適合作為一些小而美的產(chǎn)品配圖。

例如Google推出的Material design的設(shè)計語言就大量使用了抽象且配色艷麗的手繪元素作為配圖，這類圖案更加強調(diào)色彩并不過多細(xì)化造型，穿插在文字之間，讓深色背景的頁面一下活躍了起來。與此類似的還有figma的官網(wǎng)，設(shè)計師將軟件內(nèi)的部分工具比如線條、線框、錨點、指針等元素抽象出來作為插圖，不僅簡潔耐看，而且十分具有自身的品牌特色。

除此之外，利用手繪線條來表現(xiàn)hover的交互狀態(tài)，圈畫重要的文字信息，或是進行操作引導(dǎo)，也具有極高的效率。簡單的箭頭或者波浪線，能夠非常直接地將用戶的注意力指引到重要信息處，就像學(xué)生時期在書本上圈畫重點一樣，感受上十分自然而親切。仿佛應(yīng)用的設(shè)計者悄悄在用戶耳邊說了一句小tips，而不是粗暴地把信息丟到用戶眼前。

三、結(jié)語

無論是擬物風(fēng)格時期的極致寫實，還是扁平化風(fēng)格時期的極簡，又或是AI時代的多彩絢麗，設(shè)計風(fēng)格的發(fā)展始終圍繞著技術(shù)發(fā)展的主線，其發(fā)展的目標(biāo)，始終圍繞著如何讓當(dāng)前時代的用戶更好更便捷地享受到技術(shù)應(yīng)用帶來的便利。一個好的b端設(shè)計風(fēng)格，不僅能夠幫助企業(yè)展現(xiàn)品牌心智和技術(shù)上的先進性；而且能夠讓個人用戶更高效且愉悅地完成工作任務(wù)。在未來的B端產(chǎn)品設(shè)計中，我們應(yīng)該始終堅持形式服務(wù)于功能和以人為本的原則，探索更適合業(yè)務(wù)場景的設(shè)計風(fēng)格，為用戶帶來更加舒適自然的視覺體驗。

以上是本期帶來的B端設(shè)計趨勢之個風(fēng)格篇。

多數(shù)產(chǎn)品經(jīng)理總是認(rèn)為很專業(yè)，總會有一些異想天開的想法；殊不知我們不少自以為是的“優(yōu)秀”設(shè)計，并不符合用戶使用場景，還可能摧毀用戶價值。就像本文列舉的這幾個案例，你有注意到嗎？

產(chǎn)品經(jīng)理的專業(yè)視角與用戶視角，如同孿生兄弟，外表相似但內(nèi)在迥異。

有時我們說誰的產(chǎn)品專業(yè)能力過硬，可能是一句褒獎的話。但專業(yè)能力若不能融合專家視角與用戶視角，便可能被視為局限而非優(yōu)點。

張小龍說自己可以很快變小白，而馬化騰卻可以“一秒變小白”。

所謂“一秒變小白”是指快速從專業(yè)視角切換到用戶視角，確保在設(shè)計產(chǎn)品和評估用戶價值時，避免陷入專家思維，無意中損害用戶價值。

一、那些“優(yōu)秀”的設(shè)計，正在摧毀你上廁所的體驗

兩年前，我?guī)е鴰讉€“朋友”坐飛機回云南老家，到達(dá)長水機場后，準(zhǔn)備去上廁所。其中一位女性朋友，徑直走進男廁所，直至上完廁所出來后，我們提醒她才“恍然大悟”——進錯了廁所。

究其原因就在于一個“設(shè)計”：女廁所圖標(biāo)設(shè)計不明確，導(dǎo)致誤解。

目前在機場、商場（尤其是高級商場）、寫字樓等場所，設(shè)計者都采取一種精簡設(shè)計方案，他們追求簡潔的設(shè)計感。即只有一個非常簡潔的圖標(biāo)，有的是男和女的人物圖標(biāo)，有的是煙斗和高跟鞋等。總之，不會有任何一個漢字（或英文）描述。

好像一旦圖標(biāo)旁寫上“男廁”、“女廁”后，它們就變成了一種“土”、“low”的設(shè)計方案。

同一個空間內(nèi)，不僅僅是廁所圖標(biāo)，還有扶梯、直梯、貨梯、嬰幼兒室、母嬰室等各類圖標(biāo)，甚至有時它們會同時出現(xiàn)在一個引導(dǎo)牌，讓你真正玩一把“猜猜猜”的圖像游戲。

結(jié)果是：你無法快速找到圖標(biāo)；找到后，你需要仔細(xì)辨認(rèn)以及“揣摩”圖標(biāo)的含義，避免走錯；直至你走錯后，才能“吃一塹，長一智”。

同時，某些商場或?qū)懽謽堑南词峙_，為了追求設(shè)計感以及合理利用空間，把洗手液跟紙抽“融入”到鏡面里，表面看確實簡潔，是一種優(yōu)秀設(shè)計方案。

但當(dāng)你伸手接洗手液洗手時，卻無法精準(zhǔn)對接，需要反復(fù)嘗試2-3次。沒接到的洗手液，自然流就流落到洗手臺之上。

結(jié)果是：用戶體驗差，浪費洗手液，增加清潔成本。

保潔阿姨發(fā)現(xiàn)這個問題后，最后的解決方案就是：在洗手臺旁邊，直接放了一個自助式的洗手液。至此，那個“優(yōu)秀”的設(shè)計方案，從此成為了擺設(shè)。

你自以為的優(yōu)秀設(shè)計，往往卻摧毀了用戶的價值。它肯定不是你的初心，而是你的專業(yè)視角所致，卻忽略了用戶視角（尤其是小白用戶視角）。

二、那些“優(yōu)秀”設(shè)計，正在讓用戶“不明所以”，甚至“不知所措”

如下圖所示，用戶對發(fā)放工資條時，選擇方案的設(shè)計進行了“吐槽”。一般默認(rèn)勾選時，顯示一個多選框，勾選即選中，反之不選，而設(shè)計升級后，期望讓選中效果更明顯，去掉勾選框，點擊列表選中，再次點擊取消。

結(jié)果是：用戶不知道如何勾選，“優(yōu)秀”設(shè)計摧毀了用戶體驗。

我們再看一個例子。

如下圖所示，它們都是新建班次的設(shè)置頁面，核心是約定員工的上下班時間跟打卡范圍，但它們代表兩種不同的設(shè)計風(fēng)格。

方案1采用平鋪直敘的用戶語言風(fēng)格，以對話感設(shè)計頁面元素，旨在增強用戶互動體驗，但可能導(dǎo)致信息顯示冗余。比如最早可提前x分鐘打卡，晚于x分鐘打卡記為遲到；

方案2采用簡潔設(shè)計，避免冗余文字，以簡潔頁面提升視覺效果，但可能增加用戶理解和使用難度（就像廁所圖標(biāo)的設(shè)計一樣）。比如上班卡當(dāng)天5:00-當(dāng)天12:00，用戶自行設(shè)置取卡范圍。

三、如何避免讓“優(yōu)秀”設(shè)計無意損害用戶價值？

第一，認(rèn)知層面。產(chǎn)品經(jīng)理的專業(yè)能力體現(xiàn)在創(chuàng)造用戶價值和商業(yè)價值，而非局限于單一專業(yè)領(lǐng)域。這種能力需同時滿足專業(yè)人士和小白用戶的需求，否則不能稱之為真正的專業(yè)能力。

第二，設(shè)計語言。采用用戶語言/自然語言作為設(shè)計語言，而不是設(shè)計師或產(chǎn)品經(jīng)理的“專業(yè)”語言。比如晚于30分鐘打卡記為遲到，就好于“豁免30分鐘”；最早可提前120分鐘打卡，最晚可延后120分鐘打卡，就好于“上班卡范圍：當(dāng)天6:00-10:00”。

第三，設(shè)計“潛規(guī)則”。遵循行業(yè)“潛規(guī)則”設(shè)計，避免過度自我創(chuàng)造（或創(chuàng)新），導(dǎo)致傷害了用戶價值。比如單選、多選、開關(guān)等設(shè)計要素，遵循成熟的設(shè)計方式，而不是非要“獨樹一幟”。

四、彩蛋：如何解決家長帶異性子女上廁所？

我們在商場、機場等，比較常見的解決方案是：提供一個間親子衛(wèi)生間。

哈爾濱江北商場提供了一種創(chuàng)新的解決方案。即：在正常男女廁所旁邊，新建了一個開放式的兒童廁所，配備了男孩和女孩專用的小便池及兒童洗手臺。

既解決了家長帶異性子女上廁所的難題，也方便了兒童獨立使用，體現(xiàn)了對兒童和家長需求的細(xì)致考慮，這是真正用戶視角下的產(chǎn)品設(shè)計。

在當(dāng)今數(shù)字化時代，交互設(shè)計不僅是產(chǎn)品成功的關(guān)鍵因素之一，更是連接用戶與產(chǎn)品之間的橋梁。交互設(shè)計的原則和方法雖然眾多，但本文將聚焦于產(chǎn)品交互設(shè)計的內(nèi)在邏輯和基本原理，探討什么樣的設(shè)計才是優(yōu)秀的，如何衡量其效果。

首先，我們需要明確“產(chǎn)品交互設(shè)計”的定義。產(chǎn)品交互設(shè)計是為了達(dá)成特定產(chǎn)品目標(biāo)而進行的用戶與產(chǎn)品之間的交互流程設(shè)計和反饋設(shè)計。換句話說，它不僅關(guān)注用戶如何使用產(chǎn)品，還關(guān)注產(chǎn)品如何有效地反饋給用戶。值得注意的是，產(chǎn)品交互設(shè)計是圍繞產(chǎn)品目標(biāo)展開的，而非單純圍繞用戶展開，用戶在這一過程中只是間接的服務(wù)對象。

這種思維方式可能與許多人的初始認(rèn)知有所不同。以宜家家居為例，作為一家大型購物中心，宜家并不希望用戶能迅速找到想要的產(chǎn)品，而是希望用戶能在其店內(nèi)多做體驗。盡管這種迂回而漫長的購物路徑可能讓人感到煩惱，但用戶卻很少對此抱怨。這正是成功的產(chǎn)品交互設(shè)計的體現(xiàn)：雖然交互流程可能令人困擾，但良好的交互反饋（如各類家具的試用體驗）卻能讓用戶感到滿意。

一、用戶體驗流程設(shè)計

產(chǎn)品交互設(shè)計的核心在于用戶體驗流程的設(shè)計。這一理念強調(diào)，交互設(shè)計并非簡單的按鈕、彈窗或功能的堆砌，而是為了實現(xiàn)產(chǎn)品目標(biāo)而有意設(shè)計的用戶與產(chǎn)品的互動流程。在這個過程中，每一個交互環(huán)節(jié)都旨在滿足用戶需求，同時實現(xiàn)產(chǎn)品的獲益目標(biāo)。這種獲益不一定是金錢上的，可能還包括用戶的關(guān)注度和忠誠度。

尼爾森可用性原則專業(yè)描述：

尼爾森可用性原則由人機交互學(xué)博士Jakob Nielsen提出，包括狀態(tài)可見性原則、貼近用戶真實環(huán)境原則、自由控制原則、一致性和標(biāo)準(zhǔn)化原則、防錯原則等。這些原則提供了一套評估用戶體驗好壞的標(biāo)準(zhǔn)，幫助設(shè)計師和產(chǎn)品經(jīng)理進行自查和優(yōu)化

理論支撐：

用戶體驗地圖是一種以用戶為中心的可視化工具，用于描述和展示用戶在使用產(chǎn)品、服務(wù)或系統(tǒng)的過程中的整體體驗和情感變化。它通過講故事的方式，描述用戶參與服務(wù)過程中的體驗變化，并通過可視化的方式將信息予以呈現(xiàn)。用戶體驗地圖關(guān)注用戶的行為接觸點、情緒曲線、痛點和機會點，幫助團隊更好地理解用戶需求，從而優(yōu)化產(chǎn)品設(shè)計

案例分析：

Netflix：Netflix通過用戶體驗地圖分析用戶觀看習(xí)慣，發(fā)現(xiàn)用戶在選擇觀看內(nèi)容時往往會感到選擇困難。為此，Netflix優(yōu)化了推薦算法，提供個性化的內(nèi)容推薦，顯著提升了用戶的觀看體驗和滿意度。

二、與用戶相互理解

交互設(shè)計的成功在于與用戶的有效溝通。正如俞軍所說，“產(chǎn)品經(jīng)理就是以產(chǎn)品當(dāng)筆，與世界對話”。在設(shè)計過程中，理解用戶的需求和情感是至關(guān)重要的。

理解用戶的方法：

1. 角色扮演：設(shè)計師假裝自己是用戶，真實體驗產(chǎn)品的使用流程，以此理解用戶的真實想法和需求。
2. 用戶訪談：通過與真實用戶的對話，了解他們使用同類產(chǎn)品的目的、想法和感受，識別最需要優(yōu)化的環(huán)節(jié)。
3. 特征抽?。悍治瞿繕?biāo)用戶的特征（如年齡、性別、心理特征等），從中推導(dǎo)出用戶的體驗需求。
4. 數(shù)據(jù)分析：利用數(shù)據(jù)分析工具，識別用戶在使用過程中的行為模式，幫助設(shè)計師更好地理解用戶需求。

KANO模型：由東京理工大學(xué)教授狩野紀(jì)昭（Noriaki Kano）發(fā)明，是一種對用戶需求進行分類和優(yōu)先排序的方法論。它將用戶需求分為基本型需求、期望型需求和興奮型需求，幫助企業(yè)識別不同層次的用戶需求，從而優(yōu)化產(chǎn)品功能。

馬斯洛需求層次理論專業(yè)描述： 馬斯洛需求層次理論由心理學(xué)家亞伯拉罕·馬斯洛提出，將人類的需求劃分為五個主要層次，從最基本的生理需求到最高層次的自我實現(xiàn)需求逐級遞增。理解這些層次的需求有助于揭示人們行為的驅(qū)動力及其生活的主要動機。

案例分析：

Dropbox：在早期，Dropbox通過用戶訪談和數(shù)據(jù)分析了解用戶對文件共享的需求，發(fā)現(xiàn)用戶希望能夠輕松分享文件而不必?fù)?dān)心復(fù)雜的設(shè)置?；谶@些反饋，Dropbox簡化了分享流程，使得用戶可以一鍵分享文件，極大提升了用戶體驗。

三、讓用戶理解我們的設(shè)計

設(shè)計的最終目標(biāo)是讓用戶理解我們的意圖。如果用戶無法理解設(shè)計表達(dá)，那么所有的努力都將付諸東流。為了實現(xiàn)這一目標(biāo)，我們需要遵循以下原則：

1. 按照用戶的思維習(xí)慣設(shè)計：設(shè)計應(yīng)符合用戶的思維邏輯。例如，用戶在使用某些功能時，往往會根據(jù)自己的經(jīng)驗進行操作，設(shè)計應(yīng)當(dāng)順應(yīng)這種習(xí)慣。
2. 使用用戶的習(xí)慣性語言：設(shè)計中使用用戶熟悉的術(shù)語和表達(dá)方式，以降低理解成本。例如，針對不同文化背景的用戶，設(shè)計語言和符號應(yīng)有所不同。
3. **提供足夠的提示**：在設(shè)計中加入必要的提示和指導(dǎo)，幫助用戶理解如何使用產(chǎn)品。例如，在注冊界面中，確保用戶能夠清晰地看到同意《用戶協(xié)議》的選項。

案例分析：

Slack：Slack在設(shè)計其用戶界面時，充分考慮了用戶的習(xí)慣性語言和操作邏輯，使用了直觀的圖標(biāo)和清晰的提示，幫助用戶快速上手。用戶在使用Slack時，能夠輕松找到所需功能，極大提升了用戶的滿意度。

四、讓用戶感覺越簡單越好

簡潔性是交互設(shè)計的重要原則，但這并不意味著界面內(nèi)容越少越好，而是要讓用戶在使用過程中感到輕松和自然。簡潔的設(shè)計應(yīng)當(dāng)幫助用戶快速實現(xiàn)目標(biāo)，而不是讓他們感到困惑。

實現(xiàn)簡潔性的策略：

1. 提供捷徑：例如，在電商平臺上，允許用戶直接下單而不必經(jīng)過購物車，減少不必要的步驟。
2. 減少深層思考：設(shè)計應(yīng)避免復(fù)雜的設(shè)置，讓用戶能夠快速上手。例如，工具類產(chǎn)品應(yīng)盡量簡化操作流程，讓用戶能夠迅速完成任務(wù)。

理論支撐：

諾曼的交互設(shè)計基本原則：諾曼提出的示能、意符、映射、反饋和概念模型等原則，為設(shè)計師提供了清晰的指導(dǎo)，幫助他們創(chuàng)造出用戶友好的設(shè)計。

案例分析：

蘋果公司：蘋果在其產(chǎn)品設(shè)計中始終堅持簡潔性原則，通過直觀的界面和簡單的操作流程，使用戶能夠輕松上手。無論是iPhone的操作系統(tǒng)，還是Mac的桌面環(huán)境，用戶都能快速找到所需功能，享受流暢的使用體驗。

五、讓用戶最終感到滿意

用戶體驗的“峰-終”值原理表明，用戶的整體滿意度并不取決于每個環(huán)節(jié)的完美，而是關(guān)鍵時刻的滿意度。因此，設(shè)計師應(yīng)關(guān)注用戶在使用過程中的高峰體驗和結(jié)束體驗。

實現(xiàn)用戶滿意度的策略：

1. 控制體驗差的設(shè)計：確保所有體驗不超過用戶的預(yù)期底線，避免給用戶帶來負(fù)面體驗。
2. 超越用戶的預(yù)期：在產(chǎn)品的優(yōu)勢和亮點方面，努力超越用戶的期望，提供驚喜。
3. 優(yōu)化離開觸點：確保用戶在離開產(chǎn)品時感到滿意，即使在使用過程中有些環(huán)節(jié)不盡如人意。

案例分析：

Zappos：Zappos以其卓越的客戶服務(wù)而聞名，尤其是在處理退貨和客戶投訴時。他們確保用戶在購買后無論遇到什么問題，都能得到及時和滿意的解決，從而提升了用戶的整體滿意度。

總結(jié)

綜上所述，產(chǎn)品交互設(shè)計的基本原則在于將設(shè)計視為一個整體流程，深入理解用戶，確保設(shè)計能夠被用戶理解，并讓用戶感到簡單和愉悅。最終，設(shè)計的成功與否應(yīng)通過是否幫助實現(xiàn)產(chǎn)品目標(biāo)來衡量。通過不斷迭代和優(yōu)化，我們可以創(chuàng)造出既滿足用戶需求又推動產(chǎn)品發(fā)展的優(yōu)秀交互設(shè)計。設(shè)計師在這一過程中，應(yīng)始終保持對用戶的敏感度，關(guān)注用戶的反饋，以確保設(shè)計始終圍繞用戶的真實需求展開。

 

在B端產(chǎn)品設(shè)計中，退訂是用戶對產(chǎn)品不滿的直接表現(xiàn)，也是我們優(yōu)化產(chǎn)品的重要信號。作為UI設(shè)計師，如何通過交互設(shè)計降低退訂率，提升用戶留存，是一個值得深入探討的話題。本文將結(jié)合 DeepSeek（深度探索） 的設(shè)計理念，從用戶心理和交互設(shè)計的角度，分享B端產(chǎn)品退訂心理學(xué)的設(shè)計策略與實踐。

一、DeepSeek+交互設(shè)計：理解用戶退訂的深層原因 DeepSeek

強調(diào)通過深度探索用戶行為和心理，找到問題的本質(zhì)。在退訂場景中，用戶的行為背后往往隱藏著以下心理動因：

• 價值感知不足 用戶未感受到產(chǎn)品的核心價值，認(rèn)為投入與回報不成正比。
• 操作體驗不佳 復(fù)雜的操作流程或低效的功能設(shè)計讓用戶失去耐心。
• 需求未被滿足 產(chǎn)品功能與用戶實際需求不匹配，導(dǎo)致用戶選擇離開。
• 缺乏情感連接 用戶對產(chǎn)品缺乏歸屬感或信任感，容易被競品吸引。

二、DeepSeek+交互設(shè)計策略：降低退訂率的四大關(guān)鍵

1. 深度探索用戶行為，優(yōu)化退訂路徑

1）設(shè)計目標(biāo)：通過數(shù)據(jù)分析，找到用戶退訂的高頻節(jié)點，優(yōu)化交互路徑。

2）設(shè)計策略：

• 在用戶退訂前增加“挽回節(jié)點”，如彈窗提示“您是否遇到問題？我們可以幫您解決。”
•  提供“暫停服務(wù)”或“降級套餐”選項，而非直接退訂。

2. 強化價值感知，讓用戶看到“收益”

1）設(shè)計目標(biāo)：通過設(shè)計手段，讓用戶直觀感受到產(chǎn)品的價值。

2）設(shè)計策略： 

• 在退訂頁面展示用戶使用產(chǎn)品的關(guān)鍵數(shù)據(jù)（如“您已節(jié)省XX小時”）。
• 提供成功案例或用戶評價，增強用戶信任感。

3. 簡化操作流程，提升用戶體驗

1）設(shè)計目標(biāo)：降低用戶的操作成本，減少因體驗不佳導(dǎo)致的退訂。

2）設(shè)計策略：

• 提供清晰的操作指引和幫助文檔，降低學(xué)習(xí)成本。
• 在關(guān)鍵操作節(jié)點增加即時反饋（如“操作成功”提示）。

4. 建立情感連接，增強用戶歸屬感

1）設(shè)計目標(biāo)：通過設(shè)計讓用戶感受到被重視，增強對產(chǎn)品的情感依賴。

2）設(shè)計策略： 

• 在退訂頁面增加個性化挽留信息（如“我們會想念您”）。
• 提供專屬優(yōu)惠或免費試用機會，讓用戶感受到被重視。

三、DeepSeek+設(shè)計案例：某B端 SaaS 產(chǎn)品的退訂優(yōu)化實踐

以某B端 SaaS 產(chǎn)品為例，通過 DeepSeek+交互設(shè)計策略，退訂率降低了20%。

具體優(yōu)化包括：

• 在退訂頁面增加“您可能錯過的功能”模塊，強化價值感知。
• 提供“聯(lián)系客戶經(jīng)理”按鈕，方便用戶咨詢和解決問題。

四、總結(jié)

退訂是用戶對產(chǎn)品的“最后反饋”，也是我們優(yōu)化產(chǎn)品的重要機會。通過 DeepSeek+交互設(shè)計，我們可以深度探索用戶心理，優(yōu)化交互路徑，強化價值感知，簡化操作流程，并建立情感連接，從而有效降低退訂率。希望本文的設(shè)計策略與實踐能為B端產(chǎn)品的優(yōu)化提供啟發(fā)，讓我們的產(chǎn)品更好地服務(wù)于用戶，提升用戶留存與滿意度。

在當(dāng)今設(shè)計行業(yè)，設(shè)計師不僅需要具備專業(yè)技能，更要與業(yè)務(wù)目標(biāo)緊密結(jié)合，以提升設(shè)計的實際效用。本文探討了如何通過設(shè)計洞見來識別客戶需求，進而優(yōu)化設(shè)計過程。

好的設(shè)計師不僅僅要有專業(yè)能力，更重要的是與產(chǎn)品達(dá)到同頻，最終更好賦能業(yè)務(wù)指標(biāo)達(dá)成。

目前設(shè)計行業(yè)的現(xiàn)狀，大部分設(shè)計師還停留在設(shè)計思維的角度，存在一些和業(yè)務(wù)格格不入的情況，只關(guān)注好不好看，做一個交互原型的美化者…

自己做了很多，但是與實際脫節(jié)。出了很多個方案，產(chǎn)品（或運營/商務(wù)伙伴）覺得沒什么變化；打磨了很多細(xì)節(jié)和創(chuàng)新點，產(chǎn)品卻只想快速上線……

設(shè)計師自己的工作被各種“非專業(yè)”的指導(dǎo)意見干擾；而其他職崗伙伴眼里，我們的付出，卻變成了一種“設(shè)計師的自High”。

究其原因，還是把以用戶思維去進行設(shè)計。

想要改變這樣的狀態(tài)，最核心的是思維轉(zhuǎn)變，從技能導(dǎo)向的思考方式變?yōu)閮r值導(dǎo)向的思考方式。

本文主要從講述，如何通過方法，在項目進入期獲得有效設(shè)計洞見，提高設(shè)計效用，帶來客戶價值（用戶價值）。

一、什么是設(shè)計洞見？

先舉一個例子：如何做一個新款剃須刀產(chǎn)品？

飛利浦這些大公司，給出的答案是 更好的刀頭，更貼合面部，更安全和更容易清洗，一個黑灰塑料材質(zhì)、工業(yè)風(fēng)格的“更好用”的剃須刀確實誕生了。

但是有一個很有意思的公司，給出了另一份答案：極簡造型、合金材質(zhì)、超 mini 尺寸和豐富配色，最重要的是：

于是 2019 年，這個疫情開始的時間，這家剃須刀橫空出世。

這款產(chǎn)品獲得成功的原因，本質(zhì)上就是產(chǎn)品的設(shè)計者帶著更高、更廣的視角，洞見了“剃須刀不僅是一個工具，它更可以成為一種禮物”這個更深層次的客戶需求，打破現(xiàn)有市場概念，獲得成功。

——如果說，設(shè)計洞察是發(fā)現(xiàn)和理解問題的能力，是設(shè)計師在研究和解決問題時所產(chǎn)生的觀察力和創(chuàng)造力。那么設(shè)計洞見可以幫助設(shè)計師更好地識別問題、提出創(chuàng)新解決方案，并為設(shè)計師提供思考問題和做出決策的指導(dǎo)。

Brown.Tim在《設(shè)計思考改造世界》中說：”未來的設(shè)計師將扮演科技的詮釋者（洞見能力）,人性的引領(lǐng)者（觀察能力）,感性的創(chuàng)造者與品位的營造者（同理心）的角色”。

通過設(shè)計洞見，可以讓我們看更高、想更全， 與業(yè)務(wù)貼合更緊密，讓設(shè)計得到認(rèn)可，產(chǎn)生業(yè)務(wù)共鳴，賦予用戶/客戶價值，才能讓設(shè)計變的更有價值。

二、如何獲得設(shè)計洞見？

接下來我們將通過一一探索獲得洞見的三個階段。

第一階段：設(shè)計洞察

洞察階段的核心，是獲得現(xiàn)象背后的動因。是一個獲得信息與問題的階段

產(chǎn)品的設(shè)計產(chǎn)出是一個抽象到具象化的過程，在設(shè)計和迭代的過程中，會經(jīng)歷非常多的流程。而大多數(shù)的設(shè)計洞見有效過去在更前置的節(jié)點，才能產(chǎn)生更有效的價值。

所以我們首先做的是：“提升設(shè)計的主動性”，在項目的進入期最大化實現(xiàn)設(shè)計洞見的價值。

項目進入期通常會有一個通病，即問題泛化，無法具象。在一個比較“泛”的問題下，挖掘目的/目標(biāo)，找到問題最簡單的辦法就是“調(diào)查分析”：了解行業(yè)生態(tài)與業(yè)務(wù)背景，確定或推測自身產(chǎn)品的發(fā)展方向，分析定位與關(guān)注指向-Pointer（即當(dāng)下會產(chǎn)生哪些具有指向性的任務(wù)方向）。

這個階段，我們的主要目的是通過最初始的源頭數(shù)據(jù)，正確的了解業(yè)務(wù)或者項目的背景，避免因信息傳遞所產(chǎn)生的認(rèn)知誤差，以免發(fā)生“指向”偏差。而要做到這一點，洞察就不能僅僅停留在表面的觀察，詢問，記錄和數(shù)據(jù)分析，而要隨時通過聯(lián)想和反思來回歸本質(zhì)——客戶（用戶）和場景。調(diào)查中獲得的數(shù)據(jù)只有放在合適的情境中才能獲得準(zhǔn)確的解讀。

1）知識準(zhǔn)備

了解各種市場調(diào)研的方法與過程，對調(diào)研方法進行分類。

如下圖所示，（戴力農(nóng)《設(shè)計調(diào)研》）橫軸區(qū)分了該方法得到的數(shù)據(jù)是客觀的（人們的行為）還是主觀的（人們的目標(biāo)和觀點），縱軸區(qū)分了該方法的類型是定性的還是定量的。

2）選擇正確的調(diào)研辦法

不同的產(chǎn)品生命周期，對應(yīng)不同的調(diào)研方法，根據(jù)產(chǎn)品的不同時期選擇合適屬性的調(diào)研辦法。

互聯(lián)網(wǎng)設(shè)計師的常規(guī)調(diào)研手法，受困于資源，多是在桌面進行。我們通過二手資料研究、競品和線上走查獲得問題，進行虛擬對象的研究，極易發(fā)生偏差。

拓新場景和成長初期，通常資源緊張且缺乏具象客戶，很難進行大樣本調(diào)研數(shù)據(jù)挖掘。對于設(shè)計師來說，在了解業(yè)務(wù)信息，對稱業(yè)務(wù)方向時可以依賴其他職崗提供的資料進行研究；但是對于設(shè)計息息相關(guān)的關(guān)鍵點，建議還是通過自己實地考察、焦點實驗去獲取真實的體驗信息。

成長后期與成熟期，關(guān)鍵在于保證和提高產(chǎn)品質(zhì)量，縮短與頭部產(chǎn)品之間的差距，實現(xiàn)產(chǎn)品的高增長 。大樣本的用戶與競品調(diào)研可以幫助我們更可觀的看到真實的客戶需求。再輸入到我們的日常桌面研究中去。

3）掌握信息收集、數(shù)據(jù)統(tǒng)計分析方面的知識

4）了解調(diào)研的流程

確定調(diào)研目標(biāo) → 制定調(diào)研計劃 → 準(zhǔn)備調(diào)研材料&環(huán)境 → 邀請調(diào)研對象&執(zhí)行調(diào)研過程 → 分析整理信息與數(shù)據(jù) → 輸出調(diào)研結(jié)果。

調(diào)研的實際操作流程在數(shù)據(jù)采集和調(diào)研分析方法中已經(jīng)涉及的比較多了，也有很多好的執(zhí)行案例可供我們學(xué)習(xí)與參考。

得到大量信息，進行吸收、理解和處理后，我們將收獲大量的問題。接下來就是如何解決問題。

第二階段：定位價值

定位價值是洞見的關(guān)鍵階段，是能給業(yè)務(wù)帶來價值的核心，是可以改變客戶（用戶）習(xí)慣和行為的關(guān)鍵博弈。

那么如何定位價值呢？

1）問題整合，提煉與確認(rèn)指向

將調(diào)研獲得的問題進行歸納與整理，如簡單的 Card Sorting ，確認(rèn)所有問題的核心指向（Pointer）。

接下來就需要不停的切換指向，并深入每個關(guān)鍵 key 下進一步拆解，確定你收獲的是否是一個真正且重要的 Pointer。

EG海底撈▽

餐廳高峰期經(jīng)常人滿為患，排隊體驗差。常規(guī)餐廳的做法：約束更快的出餐、收臺，拆分更多的餐位，引導(dǎo)拼桌服務(wù)等等等等..短期可能會帶來改變，但是達(dá)到一個極限點以后，就很難再提升了。

類似的場景還有曾經(jīng)的外賣小哥：30 分鐘以內(nèi)還能更快嗎？答案是：很難。

那怎么讓客人愿意多等待一點，或者不覺得“等待完全是無價值無意義的”？

海底撈選擇在你排隊等待的時候，提供免費美甲、護手、零食等等各種周到服務(wù)，讓客人等待的過程中不至于無事可做。獲得了認(rèn)可，贏得了口碑。

如果你留心觀察，你會發(fā)現(xiàn)海底撈的標(biāo)志也是用了一個打招呼的氣泡Hi，來強調(diào)服務(wù)為先的品牌定位，解決的是情感需求中的「過程體驗」。

2）PDS（問題-檢測-研究）調(diào)查分析

PSD 調(diào)查分析的核心思想，是調(diào)查客戶（用戶）與預(yù)期（行為/認(rèn)知）的偏差，或不滿與問題來發(fā)現(xiàn)洞見。

EG BBDO反煙推廣 ▽

BBDO 的英國公司層接到過這樣一個推廣任務(wù)：是讓年輕人，特別是十幾歲的小女孩兒戒煙。

其實這個問題特別棘手。一方面，吸煙是一個生理上癮的事情，要戒掉很困難；另一方面，吸煙最大的問題是有害健康，但是對于年輕人來說在這個角度的感觸不深，很難起到效果。用常態(tài)的思考模式似乎很難找到正確的解決方案，但是借助洞見以后就不一樣了。

通過了解更多事實，看目標(biāo)群體關(guān)注什么，哪些問題對我們要實現(xiàn)的目標(biāo)有影響。在這個案例里，BBDO的做法是派了一個年輕的女助理在購物區(qū)找了一家咖啡館，連著5天坐在那里聽那里的女孩兒在聊些什么。

結(jié)果這5天內(nèi)她就發(fā)現(xiàn)，這些十幾歲的女生大部分聊的是買衣服、做頭發(fā)、選什么樣的指甲油和減肥藥，怎么整容等等。當(dāng)女助理把這些內(nèi)容列在自己的本子上的時候，洞見就自己呼之欲出了：原來對于這些無所事事，十幾歲的年輕女孩而言，沒有什么比她們看起來漂亮更重要了。

因此，你不需要告訴她吸煙可能縮短壽命，你只要告訴她一件事情：“吸煙會讓你變得難看”，就足夠讓她戒煙了。

所以，想要獲得洞見，就去調(diào)研目標(biāo)群體真正關(guān)注的事情。當(dāng)你通過調(diào)研發(fā)現(xiàn)真正的問題時，洞見往往就會產(chǎn)生。

3）規(guī)避技能導(dǎo)向

設(shè)計的職崗角色是單薄的。我們一定要帶著指針與方案，多職崗評估價值與可執(zhí)行度，這是一個設(shè)計前期任務(wù)的過程。它的輸出可能為設(shè)計Demo、簡單的筆記、方案的列表，或者是一個說明效果的故事版……不一定具備完整的落地性，但是可以讓伙伴更好的理解你的觀點。

第三階段：系統(tǒng)輸出

設(shè)計的解決方案要從起心動念、貫穿至產(chǎn)、研、運營甚至上市宣傳的全路徑方案。

在分析階段我們通過“3步走”的視角思維，明確了任務(wù)重點同時幫助我們明確不同指針的優(yōu)先級。

設(shè)計師要考慮的維度不僅僅在用戶體驗層面，更應(yīng)在執(zhí)行時候要考慮業(yè)務(wù)的實際需求，考慮上下游不同職能的工作內(nèi)容，始終保持全局與系統(tǒng)的思維，要從客戶價值出發(fā)，回落到企業(yè)成本中去。

通過設(shè)計洞見，從更本質(zhì)的層面去洞悉問題，重新定義和設(shè)計任務(wù)。

與業(yè)務(wù)產(chǎn)生共鳴才是好的設(shè)計。

讓你的設(shè)計方案保持在更高、更廣、更全局的維度。真正融入和助力業(yè)務(wù)，提升設(shè)計的效用。讓“提升體驗”這件事真正落地。

改變我們看世界的方式，亦改變世界看待我們的方式。

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

 

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

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

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

三、我們該如何在Banner圖設(shè)計中運用平面構(gòu)成呢？

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

五、總結(jié)

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

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

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

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

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

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

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

三、我們該如何在Banner圖設(shè)計中運用平面構(gòu)成呢？

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

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

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

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

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

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

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

舉幾個例子： 

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

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

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

（1）重復(fù)

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

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

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

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

（2）近似

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

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

近視舉例：臺灣的一對雙胞胎姐妹

小時候

長大后

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

（3）漸變

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

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

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

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

舉個例子：

鞋子的排列方式。

背景的紋理形狀。

（4）對比

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

• 形狀的對比
• 大小的對比
• 色彩的對比
• 肌理的對比
• 位置的對比
• 重心的對比
• 空間的對比
• 虛實的對比

對比舉例：買家秀和買家秀。。。

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

Banner舉例：

（5）密集：

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

• 點的密集
• 線的密集
• 面的密集

密集舉例：

日本波點女王草間彌生的作品

草間彌生

Banner舉例：

（6）發(fā)射

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

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

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

水波

星軌（攝影）

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

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

（7）特異

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

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

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

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

（8）空間

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

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

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

由陰影營造的空間感

（9）分割

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

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

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

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

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

（10）肌理

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

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

肌理舉例：木材等

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

（11）錯視

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

1.繆勒—萊依爾錯視

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

2.垂直線與水平線的錯視

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

3.透視錯視

圖中的兩條線是相等的?？雌饋硐旅娴囊?，是因為透視的錯覺。

4.正方形的錯視

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

5.黑白錯視

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

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

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

7.對比錯視

高個子和矮個子在一起，高的會顯的越高，矮的會顯的越矮。

錯視舉例：比如虛實手繪拼接，比如有些攝影作品

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

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

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

如下：

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

和諧統(tǒng)一：

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

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

對比突出：

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

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

對稱：

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

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

畫面平衡：

即元素與元素之間，元素與整體之間的大?。螤睿瘮?shù)量／色彩／材質(zhì)等的分布與視覺上的平衡。

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

視覺重心：

通過對畫面中元素的數(shù)量／顏色／位置／大?。馁|(zhì)等進行處理，畫面中所出現(xiàn)的視覺焦點。

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

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

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

重點（高潮部分）來了?。。。?！

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

樣式，如下圖所示：

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

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

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

（1）從活動主題的角度：

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

我們先看幾個Banner實例：

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

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

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

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

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

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

（2）從信息層級的角度：

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

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

那么我先給大家看幾個案例舉例：

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

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

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

強調(diào)SALE

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

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

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

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

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

再比如初語：

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

而它原來的logo是這樣的：

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

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

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

比如QQlogo形象的升級：

對于這個話題，我們后面再抽出一篇文章單獨來講好了，大家感興趣嗎？

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

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

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

平衡畫面：左中右排版

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

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

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

五、總結(jié)

以上，我分別給大家講了這幾個知識點：

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

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

三、我們該如何在Banner圖設(shè)計中運用平面構(gòu)成呢？

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

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

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

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

在 ToB 系統(tǒng)中，跳轉(zhuǎn)場景的合理分類和設(shè)計對用戶體驗至關(guān)重要。不同的跳轉(zhuǎn)方式（如當(dāng)前頁刷新或新開標(biāo)簽頁）直接到影響用戶的操作效率和系統(tǒng)性能。本文將從分類、設(shè)計建議以及用戶體驗的角度，深入探討如何優(yōu)化 B 端系統(tǒng)中的跳轉(zhuǎn)場景。

競品廠商

一、金蝶

1.1. 金蝶·云星辰截圖

金蝶云·星辰聚焦小型企業(yè)在線經(jīng)營和數(shù)字化管理，，提供財務(wù)云、稅務(wù)云、進銷存云、訂貨商城、費用報銷等SaaS服務(wù)，支持小型企業(yè)拓客開源、智能管理、實時決策，是一款適合小微型企業(yè)的云端財務(wù)進銷存管理軟件

1.1.1. 工作臺

1.1.2. 目錄頁

1.1.3. 列表頁

1.1.4. 新建頁

1.1.5. 詳情頁

1.1.6. 待辦待閱

1.1.7. 幫助系統(tǒng)

1.1.8. 系統(tǒng)后臺配置

1.2. 金蝶·云星空截圖

金蝶云星空是金蝶面向事業(yè)部制、多地點、多工廠等運營協(xié)同與管控型企業(yè)及集團公司，提供的一個通用ERP服務(wù)平臺

1.2.1. 工作臺

1.2.2. 列表頁

1.2.3. 新建頁

1.2.4. 詳情頁

1.2.5. 待辦帶閱

二、致遠(yuǎn)

致遠(yuǎn)的智能表單管理系統(tǒng)，因權(quán)限不夠，只有部分頁面；但依然可以看到其結(jié)構(gòu)，也是系統(tǒng)內(nèi) Tab 頁簽跳轉(zhuǎn)

2.1. 工作臺

2.2. 后臺配置

三、MK·PaaS

四、泛微

4.1. 項目管理

4.1.1. 列表頁

4.1.2. 新建頁

4.1.3. 詳情頁

4.1.4. 待辦待閱

4.1.5. 幫助系統(tǒng)

4.1.6. 系統(tǒng)后臺配置

直接菜單切換，無跳轉(zhuǎn)（前臺應(yīng)用配置，不需要跳轉(zhuǎn)頁面）

從用戶端進入后臺配置，新開頁簽

4.2. 公文管理

4.2.1. 列表頁

4.2.2. 新建頁

4.2.3. 詳情頁

五、TDesign騰訊企業(yè)設(shè)計體系

騰訊的企業(yè)設(shè)計體系中，也包含了這一層設(shè)計規(guī)則（功能）

六、總結(jié)

1. 頁面跳轉(zhuǎn)的場景

在 ToB 系統(tǒng)中，在不同場景下頁面的跳轉(zhuǎn)對于用戶體驗至關(guān)重要。不同的跳轉(zhuǎn)方式，直接影響到用戶的操作效率和系統(tǒng)性能。

從用戶操作角度，可以將頁面的跳轉(zhuǎn)分為三類「操作流程類」「信息查詢」「系統(tǒng)配置類」（端到端如 PC 端到移動端，不在此次討論范圍）

1.1 操作流程跳轉(zhuǎn)

用戶在系統(tǒng)中進行的具體操作，用戶執(zhí)行某個任務(wù)或業(yè)務(wù)流程，如數(shù)據(jù)的創(chuàng)建、編輯、審批等。通常目標(biāo)是推進某個操作流程的完成。

場景：如新建或編輯某數(shù)據(jù)，收到待辦審批某流程等

1.2 信息查詢與查看類跳轉(zhuǎn)

當(dāng)用戶需要查詢、查看或分析系統(tǒng)內(nèi)的數(shù)據(jù)和信息時，需要從一個頁面跳轉(zhuǎn)到另一個頁面，以獲取更多的詳細(xì)信息或進行更深入的分析。

場景：如打開某數(shù)據(jù)查看詳情，從工作臺查看詳細(xì)報表進行數(shù)據(jù)分析，查看操作歷史或日志記錄等

1.3 系統(tǒng)配置與管理跳轉(zhuǎn)

涉及系統(tǒng)設(shè)置、用戶權(quán)限管理、插件配置等功能的跳轉(zhuǎn)，通常由管理員或有權(quán)限的用戶執(zhí)行，用于配置和管理系統(tǒng)的運行環(huán)境和用戶權(quán)限。如管理員需要從用戶管理頁面跳轉(zhuǎn)到權(quán)限設(shè)置頁面

場景：如打開后臺系統(tǒng)，配置系統(tǒng)參數(shù)或用戶權(quán)限

注：第三方系統(tǒng)跳轉(zhuǎn)、子域名跳轉(zhuǎn)屬于功能類特殊場景，已涵蓋在下方業(yè)務(wù)場景中

以上三種分類涵蓋了基本的頁面跳轉(zhuǎn)場景，但不夠具體，現(xiàn)按照以下具體場景，對競品的跳轉(zhuǎn)方式展開對比分析（注：彈窗屬于模態(tài)，不在此次范圍之內(nèi)）

2. 頁面跳轉(zhuǎn)方式對比

跳轉(zhuǎn)方式名稱太長，簡稱為：

1. 新開 Tab：新開瀏覽器 Tab 頁簽
2. 系統(tǒng) Tab：系統(tǒng)內(nèi)置 Tab 頁簽
3. 菜單跳轉(zhuǎn)：以菜單形式進行切換，如左側(cè)導(dǎo)航
4. 當(dāng)前頁刷新：在當(dāng)前頁面，直接刷新內(nèi)容

致遠(yuǎn)的系統(tǒng)沒有體驗到完整的，只體驗到部分「智能表單管理系統(tǒng)」

3. 頁面跳轉(zhuǎn)對比總結(jié)

1）在同一個平臺或系統(tǒng)內(nèi)的信息，沒有其他特殊情況時，最好不要新開瀏覽器 Tab 頁簽，這點泛微和金蝶保持了統(tǒng)一，都沒有新開瀏覽器 Tab 頁簽；

• 泛微使用「抽屜」的形式；
• 金蝶使用「系統(tǒng)內(nèi) Tab 頁簽」的形式；
• 而 MK 以「****」為主，保持了自己的風(fēng)格；

2）跳轉(zhuǎn)后臺系統(tǒng)、或其他子系統(tǒng)、子域名或第三方平臺時，這時可以新開「瀏覽器 Tab 頁簽」，展示其獨立完整信息結(jié)構(gòu)

如幫助系統(tǒng)，有些幫助以文檔、視頻或論壇的形式存在，使用獨立頁簽可以很好的呈現(xiàn)其完整性；這點「MK」「金蝶」「泛微」都做到了統(tǒng)一；

4. 關(guān)于系統(tǒng)內(nèi)/外跳轉(zhuǎn)的場景分析

4.1 適合系統(tǒng)外跳轉(zhuǎn)的場景

4.1.1. 跨系統(tǒng)跳轉(zhuǎn)

• 跳轉(zhuǎn)目的與用戶意圖：用戶可能在不同業(yè)務(wù)系統(tǒng)之間切換，完成更復(fù)雜的業(yè)務(wù)操作。
• 用戶角色與權(quán)限：跨系統(tǒng)的跳轉(zhuǎn)通常涉及不同權(quán)限的管理，需要保證用戶的訪問控制。
• 適合新開標(biāo)簽頁：跨系統(tǒng)跳轉(zhuǎn)時，為了避免用戶在回到原系統(tǒng)時迷失上下文，新開標(biāo)簽頁是較為合理的選擇。

4.1.2. 二級域名跳轉(zhuǎn)

• 跳轉(zhuǎn)目的與用戶意圖：用戶通常在同一組織的不同子系統(tǒng)之間切換，處理不同的業(yè)務(wù)需求。
• 用戶角色與權(quán)限：每個二級域名子系統(tǒng)可能對應(yīng)不同的用戶角色和權(quán)限管理，需要確保用戶身份和數(shù)據(jù)的一致性。
• 適合新開標(biāo)簽頁：二級域名跳轉(zhuǎn)建議新開標(biāo)簽頁，以便用戶在處理完相關(guān)業(yè)務(wù)后能快速回到原系統(tǒng)。

4.1.3. 第三方集成跳轉(zhuǎn)

• 跳轉(zhuǎn)目的與用戶意圖：用戶在系統(tǒng)中使用集成的第三方服務(wù)，通常涉及外部供應(yīng)商或合作伙伴的系統(tǒng)。
• 用戶角色與權(quán)限：第三方系統(tǒng)的操作可能需要特定的用戶角色或權(quán)限，確保這些權(quán)限在跳轉(zhuǎn)時無縫傳遞。
• 適合新開標(biāo)簽頁：跳轉(zhuǎn)到第三方系統(tǒng)時，新開標(biāo)簽頁能夠使用戶在完成操作后輕松返回原系統(tǒng)。

4.2 適合系統(tǒng)內(nèi)跳轉(zhuǎn)的場景

4.2.1. 頁面內(nèi)跳轉(zhuǎn)

• 跳轉(zhuǎn)目的與用戶意圖：通常用于細(xì)分任務(wù)，例如從概覽到詳細(xì)設(shè)置。用戶期望在同一頁面內(nèi)快速找到所需內(nèi)容。
• 用戶角色與權(quán)限：所有用戶角色都適用，尤其是在配置或設(shè)置頁面中。
• 適合當(dāng)前頁系統(tǒng)內(nèi)Tab頁簽：頁面內(nèi)的內(nèi)容切換適合使用當(dāng)前頁來保持用戶的注意力。

4.2.2. 模塊間跳轉(zhuǎn)

• 跳轉(zhuǎn)目的與用戶意圖：用于在不同功能模塊之間切換，用戶期望在不同模塊中完成不同的業(yè)務(wù)操作。
• 用戶角色與權(quán)限：不同角色的用戶可能在不同模塊中有不同的權(quán)限。例如，管理員有訪問所有模塊的權(quán)限，而普通用戶可能僅限于特定模塊。
• 適合當(dāng)前系統(tǒng)內(nèi)Tab頁簽：在模塊間跳轉(zhuǎn)時保持用戶上下文的一致性，有助于用戶在完成一個操作后快速進入下一個操作。

4.2.3. 流程間跳轉(zhuǎn)

• 跳轉(zhuǎn)目的與用戶意圖：通常用于多步驟的業(yè)務(wù)流程，用戶期望順利完成每一步操作。
• 用戶角色與權(quán)限：不同角色可能負(fù)責(zé)流程中的不同步驟，確保每個角色在合適的時機進入流程的對應(yīng)步驟。
• 適合當(dāng)前頁系統(tǒng)內(nèi)Tab頁簽：保持流程的連續(xù)性和用戶的操作連貫性。

1.2.4. 系統(tǒng)設(shè)置與管理跳轉(zhuǎn)

• 跳轉(zhuǎn)目的與用戶意圖：用戶通常在此場景中調(diào)整系統(tǒng)的配置或管理系統(tǒng)用戶。
• 用戶角色與權(quán)限：主要適用于管理員角色，需要明確區(qū)分不同角色的管理權(quán)限。
• 適合當(dāng)前頁系統(tǒng)內(nèi)Tab頁簽：設(shè)置和管理類操作通常需要用戶集中注意力，在當(dāng)前頁有助于用戶保持在特定任務(wù)上的聚焦。

5. 跳轉(zhuǎn)方式的優(yōu)缺點

5.1 新開Tab頁簽

傳統(tǒng)的網(wǎng)頁瀏覽都是新開瀏覽器標(biāo)簽頁的形式，實現(xiàn)內(nèi)容的并行獨立展示，從而避免跳轉(zhuǎn)和返回的問題

優(yōu)點：實現(xiàn)內(nèi)容的并行、且獨立展示，從而避免跳轉(zhuǎn)和返回的問題；可以保證用戶并行操作，方便信息間的對比、參考；適合獨立子系統(tǒng)，完整呈現(xiàn)系統(tǒng)內(nèi)容

缺點：打開頁簽太多時會很耗性能，造成卡頓；也會造成用戶迷路，找不到之前的內(nèi)容

5.2 系統(tǒng)內(nèi) Tab 頁簽

在當(dāng)前頁內(nèi)，新增一行 tab，來承載內(nèi)容

優(yōu)點：系統(tǒng)內(nèi) Tab 頁，頁面是相互獨立的、互不干涉的，多窗口自由切換，并且信息保留在系統(tǒng)內(nèi)部，用戶的視覺動線相對集中，交互操作成本更低

缺點：標(biāo)簽頁欄屬于框架層級，會影響原有的頁面結(jié)構(gòu)；且始終都會占據(jù)頁面位置，會進一步壓縮屏幕縱向有效空間；在整體的統(tǒng)一性上，也需要綜合考慮使用

5.3. 抽屜

一般從右側(cè)劃出抽屜浮層，來承載內(nèi)容

優(yōu)點：在當(dāng)前頁面出現(xiàn)的抽屜浮層，可以避免頁面頻繁跳轉(zhuǎn)、以及頻繁返回帶來的頁面刷新導(dǎo)致用戶效率下降的問題

缺點：會遮擋一部分上文內(nèi)容，無法會看；且抽屜寬度有限，無法承載更多內(nèi)容信息（不過有些抽屜支持放大/縮小 可以避免這個問題）

最后補兩句

ToB 的頁面跳轉(zhuǎn)方式，應(yīng)遵循完善的業(yè)務(wù)規(guī)則和使用邏輯，不能一刀切選擇一種方式（如一直新開瀏覽器 Tab 頁簽）。最好允許用戶自定義跳轉(zhuǎn)方式，如在系統(tǒng)設(shè)置中提供選項，讓用戶選擇某些操作是當(dāng)前頁刷新還是新開標(biāo)簽頁。這有助于滿足不同用戶的偏好，提高系統(tǒng)的靈活性和用戶滿意度。

在需要新開多個標(biāo)簽頁的場景中，需要考慮瀏覽器的性能表現(xiàn)和用戶設(shè)備的資源消耗?？梢酝ㄟ^優(yōu)化加載速度、減少頁面資源占用等方式來提升用戶體驗。

清晰的跳轉(zhuǎn)反饋、完善的路徑和返回機制

而無論是當(dāng)前頁刷新還是新開Tab頁簽、系統(tǒng)內(nèi) Tab 頁簽，系統(tǒng)都應(yīng)在跳轉(zhuǎn)后給予用戶明確的反饋。比如加載進度條、操作成功提示等，讓用戶始終知道自己的操作狀態(tài)。在復(fù)雜的跳轉(zhuǎn)路徑中，設(shè)計面包屑導(dǎo)航、返回按鈕或快捷鍵，有助于用戶快速找到跳轉(zhuǎn)路徑并返回到之前的操作頁面，避免跳轉(zhuǎn)迷失。

通過完善的業(yè)務(wù)規(guī)則和使用邏輯，靈活地結(jié)合用戶行為分析和個性化設(shè)置，有助于提升系統(tǒng)的整體用戶體驗。在實際應(yīng)用中，還需時刻關(guān)注系統(tǒng)性能，確保在多標(biāo)簽頁和多終端跳轉(zhuǎn)的情況下，依然能保持流暢的用戶體驗。

大部分APP都會有引導(dǎo)設(shè)計，以幫助新人快速上手。那你知道這些引導(dǎo)設(shè)計有哪些要求和方法嗎？這篇文章，我們看看作者整理的五種類型，你們用的是哪一種呢？

一、設(shè)計原則

• 簡潔性：內(nèi)容簡潔明了，避免過多的文字和復(fù)雜的概念，重點突出產(chǎn)品的核心功能和關(guān)鍵操作；
• 直觀性：采用直觀的視覺設(shè)計和交互方式，如圖片、圖標(biāo)、動畫等，讓用戶能夠快速理解引導(dǎo)信息并進行相應(yīng)操作；
• 漸進性：按照用戶的認(rèn)知和操作流程，逐步展開引導(dǎo)內(nèi)容，避免信息的復(fù)雜造成過多干擾；
• 互動性：增加互動元素，如點擊、滑動、輸入等，讓用戶積極參與到新手引導(dǎo)過程中，提高用戶的注意力和學(xué)習(xí)效果；
• 友好性：支持可跳過，為有經(jīng)驗或急于使用產(chǎn)品的用戶提供跳過新手引導(dǎo)的選項，尊重用戶的自主選擇。

二、引導(dǎo)方式

1. 遮罩式（蒙層引導(dǎo)）

1）定義

蒙層引導(dǎo)的特點是讓用戶將注意力聚焦到被圈定的某個特定功能上，不被其他內(nèi)容干擾；

通常出現(xiàn)在用戶首次操作時做全局引導(dǎo)，也會在產(chǎn)品的各個功能點等待用戶的觸發(fā)；根據(jù)內(nèi)容一次顯示一個或多個提示；

2）組成結(jié)構(gòu)

黑色蒙層+高亮內(nèi)容+內(nèi)容介紹（圖文/視頻）+操作引導(dǎo)；

3）使用規(guī)則

分為單頁面功能引導(dǎo)和多頁面多功能引導(dǎo)，單頁面引導(dǎo)全局信息量不能過多；多頁面引導(dǎo)控制在5步以內(nèi)，提示契機保證用戶需要的時候出現(xiàn)，不做過多干擾；

4）使用場景

分類場景：展示新產(chǎn)品/功能特色介紹（新功能上新的告知、特色重點功能宣傳）、產(chǎn)品/功能更新迭代（說明界面中功能位置的改動、服務(wù)內(nèi)容的變動等）、操作行為引導(dǎo)（講解操作方式、體現(xiàn)特定的手勢交互劃分說明界面的整體結(jié)構(gòu)）；

2. 開屏引導(dǎo)

1）定義

引導(dǎo)頁出現(xiàn)在用戶首次打開APP的時，在用戶使用產(chǎn)品前先給用戶營造好產(chǎn)品的基調(diào)和氛圍，宣傳產(chǎn)品功能和亮點或告知用戶最核心的操作方式；

基本上由3-5個頁面組成，保證能帶給用戶新鮮感和吸引他們的注意力，否則對用戶來說反而是干擾，只會直接選擇快速劃過；

2）組成結(jié)構(gòu)

文字介紹+圖片介紹+操作引導(dǎo)；

3）使用規(guī)則

引導(dǎo)頁最多不超過5頁；圖片介紹表達(dá)簡單且符合真實的使用場景；盡量明確的操作引導(dǎo)查看下一步的操作，

4）使用場景

用戶首次啟動APP，全局展示APP的整體功能架構(gòu)和大的功能模塊分類

3. 彈窗引導(dǎo)

1）定義

用戶進入使用某功能或某交互方式變化時，彈出彈窗予以解釋并介紹相應(yīng)的操作，屬于即時的強提醒方式；

彈窗引導(dǎo)更重，阻斷行更強，需考慮使用的場景和傳達(dá)內(nèi)容的重要程度；

2）組成結(jié)構(gòu)

彈窗+圖/文信息+操作按鈕；

3）使用規(guī)則

更多使用于單項服務(wù)的介紹；彈窗內(nèi)盡可能以圖文方式介紹，避免大片文字，內(nèi)容清晰明確，操作按鈕指代清晰；

4）使用場景

告知用戶有新功能上線（如何找到新功能、新功能如何使用，并提供直接鏈接跳轉(zhuǎn)去對應(yīng)服務(wù)）、變更功能提醒（功能變更后提示去哪找到）、告知用戶一些隱藏菜單的內(nèi)容（引導(dǎo)用戶使用）、以及查看/點擊等交互操作變更等；

4. 氣泡/浮層引導(dǎo)

1）定義

同樣是作為即使提醒的方式，作為引導(dǎo)提示、提醒提示、解釋提示，讓用戶快速了解此服務(wù)/功能的內(nèi)容

氣泡屬于輕量級的提示方式，打斷感弱，內(nèi)容傳遞量不大但聚焦；

2）組成結(jié)構(gòu)

彈窗+圖文信息+操作按鈕；

3）使用規(guī)則

彈窗內(nèi)盡可能以圖文方式介紹，避免大篇文字，內(nèi)容明確，操作按鈕指代清晰；

4）使用場景

聚焦在單一功能場景，更貼近某個服務(wù)的引導(dǎo)和告知，告知用戶有新功能上線、引導(dǎo)用戶使用、或告知用戶一些隱藏菜單的內(nèi)容，當(dāng)前提示內(nèi)容較為重要，且內(nèi)容較多，建議使用彈窗。

5. 操作引導(dǎo)

1）定義

操作式引導(dǎo)會結(jié)合產(chǎn)品實際使用場景，一步一步地引導(dǎo)你進行操作，鼓勵用戶參與其中

這種方式很容易讓用戶沉浸其中、快速學(xué)習(xí)，并且因為有及時的操作反饋，所以用戶很容易獲得強烈的成就感；

2）組成結(jié)構(gòu)

內(nèi)容介紹+引導(dǎo)內(nèi)容+操作引導(dǎo)

3）使用規(guī)則

操作引導(dǎo)突出且明確指示出操作的方式，否則用戶很容易因為操作失敗的挫敗感而放棄；保持內(nèi)容與操作的親密性；操作成功后及時給予反饋。

4）使用場景

多應(yīng)用在工具類產(chǎn)品和游戲：比如養(yǎng)雞活動、拼多多的種農(nóng)作物、螞蟻森林種樹等最開始使用此功能時，或者很久未進入的用戶下次進入；

如何讓您的產(chǎn)品詳情頁脫穎而出，并顯著提高轉(zhuǎn)化率，是每位產(chǎn)品經(jīng)理和設(shè)計師都必須面對的重要挑戰(zhàn)。本文深入探討了詳情頁提升轉(zhuǎn)化率的多種技巧和策略，希望可以幫到大家。

最近半年有策劃不少詳情頁，然后就想總結(jié)一些詳情頁相關(guān)的內(nèi)容。

其實產(chǎn)品詳情頁的設(shè)計原則只有一個，那就是迎合目標(biāo)消費者的需求。那么一個好的產(chǎn)品詳情頁都應(yīng)該包含什么內(nèi)容呢？

一、首屏，吸引主視覺

核心目標(biāo)：用視覺+文案快速傳遞產(chǎn)品核心價值。3秒內(nèi)讓消費者“一見鐘情”。

是的，請務(wù)必在5秒內(nèi)讓消費者“一見鐘情”，若無法在5秒內(nèi)抓住眼球，客戶可能會關(guān)閉這個頁面。

內(nèi)容方向：

1.產(chǎn)品核心賣點（加上產(chǎn)品外觀，科技感）

2.使用場景化展示（如模特穿戴、產(chǎn)品使用動態(tài)）

3.品牌 LOGO / 標(biāo)語（弱化但可識別）

設(shè)計公式：

1.主標(biāo)題=1. 一句話展示出產(chǎn)品的核心賣點/核心宣傳點；2.或者產(chǎn)品名稱，3.或者情緒價值（如減壓、陪伴）+功能關(guān)鍵詞（如“AI監(jiān)測”）；

2.副標(biāo)題=1. 產(chǎn)品名稱+使用場景；2. 或者核心賣點/核心宣傳點

3.ICON(非必選，有則添加)=信任背書（如“FDA認(rèn)證”）；或產(chǎn)品特色；或核心成分（總之就是消費最關(guān)心的點）。

布局要點：

產(chǎn)品圖占據(jù)版面1/2以上，文字占據(jù)版面1/8左右，以圖吸睛，輔以少量文字說明，版面適當(dāng)留白，保證畫面簡潔明了。

優(yōu)秀案例參考：

Dreametech 品牌新品發(fā)布的產(chǎn)品第一張Banner：

產(chǎn)品名字+產(chǎn)品核心宣傳點“Rise up, clean beneath” +多個獎項背書效果的Icon。

整個設(shè)計非常簡潔和科技感，沒有多余的元素，使得產(chǎn)品成為視覺焦點。

圖片來源：dreametech 僅供學(xué)習(xí)用

Anker品牌產(chǎn)品名字+產(chǎn)品核心賣點+應(yīng)用場景。

圖片來源：Anker 僅供學(xué)習(xí)用

二、痛點展示

核心目標(biāo)：制造“痛感共鳴”，讓消費者驚呼“這就是我！并激發(fā)“我需要解決它”的欲望。

人性本懶惰，大多數(shù)人不愿改變，除非感到足夠“痛”。

想讓顧客為你付費，關(guān)鍵在于讓潛在客戶真切感受到他們面臨的問題有多嚴(yán)重，若不解決，后果將不堪設(shè)想。

一旦激發(fā)他們的情感反應(yīng)，改變的念頭便油然而生。

因此，第二張Banner要精準(zhǔn)擊中用戶痛點，羅列消費者常遇的問題及根源，呈現(xiàn)能引發(fā)共鳴的畫面。

布局要點：

通過圖文結(jié)合的方式，描述消費者的痛點，如展示消費者在生活中遇到的各種問題。

三類痛點挖掘法：

1. 環(huán)境痛點（如“冬季取暖成本高”→塔式取暖器）
2. 行為痛點（如“化妝易脫妝”→定妝散粉）
3. 產(chǎn)品痛點（如“傳統(tǒng)菜刀收納架易積水”→透氣設(shè)計收納架）

優(yōu)秀案例參考：

Petlibro品牌在Smart Fountain(給貓智能喂水相關(guān)的產(chǎn)品)產(chǎn)品詳情頁的痛點描述海報中，突出了貓咪因缺水而面臨的健康風(fēng)險，通過具體數(shù)據(jù)強調(diào)了脫水對貓咪的危害。

如“9百萬+貓患有貓下泌尿道疾病”和“1百萬+貓患有慢性腎病”，這些龐大的數(shù)字能夠直觀地展示問題的嚴(yán)重性，讓養(yǎng)貓人士意識到這些健康問題并不是個別現(xiàn)象，而是普遍存在的問題。

輔助貓在痛苦中的照片，能夠激發(fā)養(yǎng)貓人士的情感共鳴。養(yǎng)貓人士可能會更加注意自己寵物的水分?jǐn)z入，從而想要主動采取預(yù)防措施。就會繼續(xù)網(wǎng)下瀏覽網(wǎng)頁試圖尋找解決方案。

圖片來源：furbo 僅供學(xué)習(xí)用

三、產(chǎn)品差異化優(yōu)勢

核心目標(biāo)：突出差異化，用“人無我有”建立競爭壁壘，讓消費者覺得“非你不可”。(這個部分可以用1-3 張圖）

上面的一張海報提到核心痛點，當(dāng)一個人意識到了問題的存在，產(chǎn)生了共鳴情緒，那么他最需要的是什么？迫不及待需要解決方案。

因此從第三張海報開始接下來的幾張海報都可以呈現(xiàn)如何幫助他們解決問題或?qū)崿F(xiàn)需求。

并且關(guān)于如何解決問題，實現(xiàn)起來還無比容易，再加上眾多保障，讓你可以0風(fēng)險購買使用。

這樣用戶就會想要躍躍一試，成交的意愿就會很強。

因此大家有沒有注意到，截至目前，沒有一張海報是多余的，每一張都有它的用處，并且前后是有邏輯性的。

那么在這個板塊的海報中，用什么打動客戶？

前面提到我們需突出“突出產(chǎn)品差異化”優(yōu)勢，也就是在同類目產(chǎn)品中的優(yōu)勢，“人無我有，人有我優(yōu)，同時能解決用戶問題”的點。

比如用戶關(guān)注續(xù)航，競品續(xù)航3天，而你的產(chǎn)品可以續(xù)航7天甚至使用了太陽能可以無限續(xù)航。比如全球第一款XXXX產(chǎn)品等。

優(yōu)秀案例參考：

Reolink攝像頭搭載Wi-Fi 6技術(shù)，實現(xiàn)超快傳輸、低延遲和高穩(wěn)定性。將家庭安全提升到一個新的水平。

圖片來源：reolink 僅供學(xué)習(xí)用

dreametech品牌20,000Pa優(yōu)勢并告訴用戶這款掃地機器人能夠產(chǎn)生強大的吸力，幾乎可以吸入任何類型的污垢和灰塵，無論是隱藏在地毯深處的灰塵，還是卡在瓷磚縫隙中的污垢。

圖片來源：dreametech 僅供學(xué)習(xí)用

四、功能拆解

核心目標(biāo)：回答用戶“這對我有什么好處？”從“功能”到“利益”的轉(zhuǎn)化。（建議 3-5 個核心功能）

也就是因為你產(chǎn)品的優(yōu)點給消費者帶來的好處或者利益?？梢允钱a(chǎn)品成分的優(yōu)勢或者功效的優(yōu)勢。

消費者更愿為“解決問題”買單，而非單純的功能。我們可以將功能轉(zhuǎn)換成用戶能夠理解并幫助消費者解決需求的點，幫助用戶更好地理解產(chǎn)品，并產(chǎn)生購買的可能。

內(nèi)容方向：

技術(shù)參數(shù)（如材質(zhì)、尺寸、續(xù)航）

創(chuàng)新設(shè)計（如隱藏式按鍵、防水結(jié)構(gòu)）

用戶利益點（如 “輕便易攜帶”“安全防摔”）

優(yōu)秀案例參考：

Dreametech 將功能清晰轉(zhuǎn)化為利益點”Charge Faster, Clean Longer”。

“5500mAh 大電池” 對應(yīng) “單次清潔時間長達(dá) 220 分鐘”，讓用戶明白確實續(xù)航更長、清潔范圍更大，減少頻繁充電。

“吸力高達(dá) 2000Pa” 轉(zhuǎn)化為清潔力強，能深度清潔；“充電快 30%” 則體現(xiàn)節(jié)省時間。用簡潔語言和數(shù)據(jù)，直觀呈現(xiàn)產(chǎn)品給用戶帶來的便利。

圖片來源：dreametech 僅供學(xué)習(xí)用

也可以用其中一張圖整合所有想傳達(dá)的核心功能，比如下面dreametech和Anker的海報。

圖片來源：dreametech和anker 僅供學(xué)習(xí)用

五、產(chǎn)品細(xì)節(jié)圖

核心目標(biāo)：細(xì)節(jié)決定轉(zhuǎn)化率，用細(xì)節(jié)增強真實感，降低決策成本。

這個板塊可以放大產(chǎn)品細(xì)節(jié)，展示產(chǎn)品的材質(zhì)、做工等屬性信息，用視覺+文案雙重沖擊的方式，有效傳遞產(chǎn)品賣點。

優(yōu)秀案例參考：

依舊是dreametech 品牌的掃地機。文案 “Double the Brushes, Double the Results” 采用押韻的手法，朗朗上口，不僅點明雙刷設(shè)計，還暗示清潔效果加倍，極具吸引力。

畫面選取掃地機工作時的特寫鏡頭，著重展示雙刷旋轉(zhuǎn)卷起灰塵垃圾的細(xì)節(jié)，真實還原清掃場景。讓消費者能直觀感受到產(chǎn)品的強大清潔力。

還可以用跟競品對比的細(xì)節(jié)展示圖，以及產(chǎn)品使用前VS使用后的細(xì)節(jié)展示。有對比才更突出優(yōu)勢和產(chǎn)品效果。

圖片來源：dreametech 僅供學(xué)習(xí)用

六、用戶證言，信任背書

核心目標(biāo)：用權(quán)威和真實擊破最后一道防線，消除懷疑，讓消費者覺得“選擇你零風(fēng)險”從而激發(fā)購買欲望。

內(nèi)容方向:

• 消費者實測/證言（如“1000名志愿者實測效果對比”。這里有一個數(shù)據(jù)可以分享一下，平均而言，顧客在購買東西之前大約會閱讀10條客戶評論，當(dāng)然，低成本不需要太多理性思考的產(chǎn)品除外）
• 實驗室數(shù)據(jù)（如“SGS認(rèn)證無毒材質(zhì)”）
• 檢測報告
• 對比測試
• 明星、權(quán)威專家背書
• 媒體背書如（如“《Forbes》推薦最佳庭院產(chǎn)品”）
• 獎項&專利

圖片來源：dreametech 僅供學(xué)習(xí)用

圖片來源：luffy-wear 僅供學(xué)習(xí)用

七、使用指南/場景拓展

核心目標(biāo)：越瑣碎，越真實，預(yù)判所有可能的疑問，減少客服壓力。

尤其是美國消費者習(xí)慣自助購物，詳盡的信息能降低退貨率。因此此部分的設(shè)計需清晰的展示產(chǎn)品的基本信息。

內(nèi)容方向：

• 包裝清單（如“內(nèi)含主機+充電線+保修卡”）
• 使用說明&使用禁忌（如“步驟分解圖”“多場景應(yīng)用圖”“孕婦慎用”“FAQ” “產(chǎn)品規(guī)格參數(shù)” ）
• 售后政策（如“90天無理由退換”）。

圖片來源：furbo 僅供學(xué)習(xí)用

圖片來源：dreametech 僅供學(xué)習(xí)用

八、品牌介紹

核心目標(biāo)：給產(chǎn)品一個“靈魂溢價”，從“賣貨”到“賣價值觀”，綁定長期用戶。

我們可以將品牌理念傳達(dá)給消費者，使產(chǎn)品更有厚度，賦予產(chǎn)品更多情緒價值，帶動消費者購買。

Sprout Social數(shù)據(jù)調(diào)研顯示：美國Z世代用戶中，62%的消費者愿意為具有社會責(zé)任的品牌支付溢價。那么為什么不展示這個板塊讓你的消費者看到企業(yè)有愛心的一面？

內(nèi)容方向：

• 創(chuàng)始人IP（如“創(chuàng)業(yè)初心”）；
• 社會使命（如“每筆訂單捐贈1美元給流浪動物”）；

優(yōu)秀案例參考：

furbo品牌產(chǎn)品詳情頁最后一張海報提到“One Furbo = $1 to Help Rescued Pets”。展現(xiàn)了Furbo關(guān)心動物福利，強調(diào)品牌的社會責(zé)任感。

每購買一臺Furbo，消費者不僅能享受高品質(zhì)產(chǎn)品，還能幫助救助動物，激勵更多人做出購買決策。這種情感連接讓顧客感受到參與有意義事業(yè)的價值，提升品牌忠誠度。

同時，F(xiàn)urbo展示透明度和責(zé)任感，增強消費者的信任。通過這樣的方式，F(xiàn)urbo有效促進品牌與消費者之間的聯(lián)系，推動銷售增長。

圖片來源：furbo 僅供學(xué)習(xí)用

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

 

版式設(shè)計

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

一、形勢方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3、曲線型（UI方向1）

曲線型主要表現(xiàn)的是韻律和節(jié)奏，可能符合一部分小眾APP設(shè)計界面設(shè)計，充滿了特色和戲劇性。我覺得有特色的界面設(shè)計是這些小眾APP的設(shè)計核心?？梢岳昧眍惖男”姷脑O(shè)計做吸引。

4、滿版型（UI方向2）

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

結(jié)束語

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

 

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

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