做到這三點挑戰(zhàn)，產(chǎn)品經(jīng)理只會不斷升值
大部分APP都會有引導設計，以幫助新人快速上手。那你知道這些引導設計有哪些要求和方法嗎？這篇文章，我們看看作者整理的五種類型，你們用的是哪一種呢？
1）定義
蒙層引導的特點是讓用戶將注意力聚焦到被圈定的某個特定功能上，不被其他內(nèi)容干擾；
通常出現(xiàn)在用戶首次操作時做全局引導，也會在產(chǎn)品的各個功能點等待用戶的觸發(fā)；根據(jù)內(nèi)容一次顯示一個或多個提示；
2）組成結(jié)構(gòu)
黑色蒙層+高亮內(nèi)容+內(nèi)容介紹（圖文/視頻）+操作引導；
3）使用規(guī)則
分為單頁面功能引導和多頁面多功能引導，單頁面引導全局信息量不能過多；多頁面引導控制在5步以內(nèi)，提示契機保證用戶需要的時候出現(xiàn)，不做過多干擾；
4）使用場景
分類場景：展示新產(chǎn)品/功能特色介紹（新功能上新的告知、特色重點功能宣傳）、產(chǎn)品/功能更新迭代（說明界面中功能位置的改動、服務內(nèi)容的變動等）、操作行為引導（講解操作方式、體現(xiàn)特定的手勢交互劃分說明界面的整體結(jié)構(gòu)）；
1）定義
引導頁出現(xiàn)在用戶首次打開APP的時，在用戶使用產(chǎn)品前先給用戶營造好產(chǎn)品的基調(diào)和氛圍，宣傳產(chǎn)品功能和亮點或告知用戶最核心的操作方式；
基本上由3-5個頁面組成，保證能帶給用戶新鮮感和吸引他們的注意力，否則對用戶來說反而是干擾，只會直接選擇快速劃過；
2）組成結(jié)構(gòu)
文字介紹+圖片介紹+操作引導；
3）使用規(guī)則
引導頁最多不超過5頁；圖片介紹表達簡單且符合真實的使用場景；盡量明確的操作引導查看下一步的操作，
4）使用場景
用戶首次啟動APP，全局展示APP的整體功能架構(gòu)和大的功能模塊分類
1）定義
用戶進入使用某功能或某交互方式變化時，彈出彈窗予以解釋并介紹相應的操作，屬于即時的強提醒方式；
彈窗引導更重，阻斷行更強，需考慮使用的場景和傳達內(nèi)容的重要程度；
2）組成結(jié)構(gòu)
彈窗+圖/文信息+操作按鈕；
3）使用規(guī)則
更多使用于單項服務的介紹；彈窗內(nèi)盡可能以圖文方式介紹，避免大片文字，內(nèi)容清晰明確，操作按鈕指代清晰；
4）使用場景
告知用戶有新功能上線（如何找到新功能、新功能如何使用，并提供直接鏈接跳轉(zhuǎn)去對應服務）、變更功能提醒（功能變更后提示去哪找到）、告知用戶一些隱藏菜單的內(nèi)容（引導用戶使用）、以及查看/點擊等交互操作變更等；
1）定義
同樣是作為即使提醒的方式，作為引導提示、提醒提示、解釋提示，讓用戶快速了解此服務/功能的內(nèi)容
氣泡屬于輕量級的提示方式，打斷感弱，內(nèi)容傳遞量不大但聚焦；
2）組成結(jié)構(gòu)
彈窗+圖文信息+操作按鈕；
3）使用規(guī)則
彈窗內(nèi)盡可能以圖文方式介紹，避免大篇文字，內(nèi)容明確，操作按鈕指代清晰；
4）使用場景
聚焦在單一功能場景，更貼近某個服務的引導和告知，告知用戶有新功能上線、引導用戶使用、或告知用戶一些隱藏菜單的內(nèi)容，當前提示內(nèi)容較為重要，且內(nèi)容較多，建議使用彈窗。
1）定義
操作式引導會結(jié)合產(chǎn)品實際使用場景，一步一步地引導你進行操作，鼓勵用戶參與其中
這種方式很容易讓用戶沉浸其中、快速學習，并且因為有及時的操作反饋，所以用戶很容易獲得強烈的成就感；
2）組成結(jié)構(gòu)
內(nèi)容介紹+引導內(nèi)容+操作引導
3）使用規(guī)則
操作引導突出且明確指示出操作的方式，否則用戶很容易因為操作失敗的挫敗感而放棄；保持內(nèi)容與操作的親密性；操作成功后及時給予反饋。
4）使用場景
多應用在工具類產(chǎn)品和游戲：比如養(yǎng)雞活動、拼多多的種農(nóng)作物、螞蟻森林種樹等最開始使用此功能時，或者很久未進入的用戶下次進入；
本文由 @宮宮宮宮 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash，基于 CC0 協(xié)議
該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
如何讓您的產(chǎn)品詳情頁脫穎而出，并顯著提高轉(zhuǎn)化率，是每位產(chǎn)品經(jīng)理和設計師都必須面對的重要挑戰(zhàn)。本文深入探討了詳情頁提升轉(zhuǎn)化率的多種技巧和策略，希望可以幫到大家。
最近半年有策劃不少詳情頁，然后就想總結(jié)一些詳情頁相關的內(nèi)容。
其實產(chǎn)品詳情頁的設計原則只有一個，那就是迎合目標消費者的需求。那么一個好的產(chǎn)品詳情頁都應該包含什么內(nèi)容呢？
核心目標：用視覺+文案快速傳遞產(chǎn)品核心價值。3秒內(nèi)讓消費者“一見鐘情”。
是的，請務必在5秒內(nèi)讓消費者“一見鐘情”，若無法在5秒內(nèi)抓住眼球，客戶可能會關閉這個頁面。
內(nèi)容方向：
1.產(chǎn)品核心賣點（加上產(chǎn)品外觀，科技感）
2.使用場景化展示（如模特穿戴、產(chǎn)品使用動態(tài)）
3.品牌 LOGO / 標語（弱化但可識別）
設計公式：
1.主標題=1. 一句話展示出產(chǎn)品的核心賣點/核心宣傳點；2.或者產(chǎn)品名稱，3.或者情緒價值（如減壓、陪伴）+功能關鍵詞（如“AI監(jiān)測”）；
2.副標題=1. 產(chǎn)品名稱+使用場景；2. 或者核心賣點/核心宣傳點
3.ICON(非必選，有則添加)=信任背書（如“FDA認證”）；或產(chǎn)品特色；或核心成分（總之就是消費最關心的點）。
布局要點：
產(chǎn)品圖占據(jù)版面1/2以上，文字占據(jù)版面1/8左右，以圖吸睛，輔以少量文字說明，版面適當留白，保證畫面簡潔明了。
優(yōu)秀案例參考：
Dreametech 品牌新品發(fā)布的產(chǎn)品第一張Banner：
產(chǎn)品名字+產(chǎn)品核心宣傳點“Rise up, clean beneath” +多個獎項背書效果的Icon。
整個設計非常簡潔和科技感，沒有多余的元素，使得產(chǎn)品成為視覺焦點。
圖片來源：dreametech 僅供學習用
Anker品牌產(chǎn)品名字+產(chǎn)品核心賣點+應用場景。
圖片來源：Anker 僅供學習用
核心目標：制造“痛感共鳴”，讓消費者驚呼“這就是我！并激發(fā)“我需要解決它”的欲望。
人性本懶惰，大多數(shù)人不愿改變，除非感到足夠“痛”。
想讓顧客為你付費，關鍵在于讓潛在客戶真切感受到他們面臨的問題有多嚴重，若不解決，后果將不堪設想。
一旦激發(fā)他們的情感反應，改變的念頭便油然而生。
因此，第二張Banner要精準擊中用戶痛點，羅列消費者常遇的問題及根源，呈現(xiàn)能引發(fā)共鳴的畫面。
布局要點：
通過圖文結(jié)合的方式，描述消費者的痛點，如展示消費者在生活中遇到的各種問題。
三類痛點挖掘法：
優(yōu)秀案例參考：
Petlibro品牌在Smart Fountain(給貓智能喂水相關的產(chǎn)品)產(chǎn)品詳情頁的痛點描述海報中，突出了貓咪因缺水而面臨的健康風險，通過具體數(shù)據(jù)強調(diào)了脫水對貓咪的危害。
如“9百萬+貓患有貓下泌尿道疾病”和“1百萬+貓患有慢性腎病”，這些龐大的數(shù)字能夠直觀地展示問題的嚴重性，讓養(yǎng)貓人士意識到這些健康問題并不是個別現(xiàn)象，而是普遍存在的問題。
輔助貓在痛苦中的照片，能夠激發(fā)養(yǎng)貓人士的情感共鳴。養(yǎng)貓人士可能會更加注意自己寵物的水分攝入，從而想要主動采取預防措施。就會繼續(xù)網(wǎng)下瀏覽網(wǎng)頁試圖尋找解決方案。
圖片來源：furbo 僅供學習用
核心目標：突出差異化，用“人無我有”建立競爭壁壘，讓消費者覺得“非你不可”。(這個部分可以用1-3 張圖）
上面的一張海報提到核心痛點，當一個人意識到了問題的存在，產(chǎn)生了共鳴情緒，那么他最需要的是什么？迫不及待需要解決方案。
因此從第三張海報開始接下來的幾張海報都可以呈現(xiàn)如何幫助他們解決問題或?qū)崿F(xiàn)需求。
并且關于如何解決問題，實現(xiàn)起來還無比容易，再加上眾多保障，讓你可以0風險購買使用。
這樣用戶就會想要躍躍一試，成交的意愿就會很強。
因此大家有沒有注意到，截至目前，沒有一張海報是多余的，每一張都有它的用處，并且前后是有邏輯性的。
那么在這個板塊的海報中，用什么打動客戶？
前面提到我們需突出“突出產(chǎn)品差異化”優(yōu)勢，也就是在同類目產(chǎn)品中的優(yōu)勢，“人無我有，人有我優(yōu)，同時能解決用戶問題”的點。
比如用戶關注續(xù)航，競品續(xù)航3天，而你的產(chǎn)品可以續(xù)航7天甚至使用了太陽能可以無限續(xù)航。比如全球第一款XXXX產(chǎn)品等。
優(yōu)秀案例參考：
Reolink攝像頭搭載Wi-Fi 6技術(shù)，實現(xiàn)超快傳輸、低延遲和高穩(wěn)定性。將家庭安全提升到一個新的水平。
圖片來源：reolink 僅供學習用
dreametech品牌20,000Pa優(yōu)勢并告訴用戶這款掃地機器人能夠產(chǎn)生強大的吸力，幾乎可以吸入任何類型的污垢和灰塵，無論是隱藏在地毯深處的灰塵，還是卡在瓷磚縫隙中的污垢。
圖片來源：dreametech 僅供學習用
核心目標：回答用戶“這對我有什么好處？”從“功能”到“利益”的轉(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)新設計（如隱藏式按鍵、防水結(jié)構(gòu)）
用戶利益點（如 “輕便易攜帶”“安全防摔”）
優(yōu)秀案例參考：
Dreametech 將功能清晰轉(zhuǎn)化為利益點”Charge Faster, Clean Longer”。
“5500mAh 大電池” 對應 “單次清潔時間長達 220 分鐘”，讓用戶明白確實續(xù)航更長、清潔范圍更大，減少頻繁充電。
“吸力高達 2000Pa” 轉(zhuǎn)化為清潔力強，能深度清潔；“充電快 30%” 則體現(xiàn)節(jié)省時間。用簡潔語言和數(shù)據(jù)，直觀呈現(xiàn)產(chǎn)品給用戶帶來的便利。
圖片來源：dreametech 僅供學習用
也可以用其中一張圖整合所有想傳達的核心功能，比如下面dreametech和Anker的海報。
圖片來源：dreametech和anker 僅供學習用
核心目標：細節(jié)決定轉(zhuǎn)化率，用細節(jié)增強真實感，降低決策成本。
這個板塊可以放大產(chǎn)品細節(jié)，展示產(chǎn)品的材質(zhì)、做工等屬性信息，用視覺+文案雙重沖擊的方式，有效傳遞產(chǎn)品賣點。
優(yōu)秀案例參考：
依舊是dreametech 品牌的掃地機。文案 “Double the Brushes, Double the Results” 采用押韻的手法，朗朗上口，不僅點明雙刷設計，還暗示清潔效果加倍，極具吸引力。
畫面選取掃地機工作時的特寫鏡頭，著重展示雙刷旋轉(zhuǎn)卷起灰塵垃圾的細節(jié)，真實還原清掃場景。讓消費者能直觀感受到產(chǎn)品的強大清潔力。
還可以用跟競品對比的細節(jié)展示圖，以及產(chǎn)品使用前VS使用后的細節(jié)展示。有對比才更突出優(yōu)勢和產(chǎn)品效果。
圖片來源：dreametech 僅供學習用
核心目標：用權(quán)威和真實擊破最后一道防線，消除懷疑，讓消費者覺得“選擇你零風險”從而激發(fā)購買欲望。
內(nèi)容方向:
圖片來源：dreametech 僅供學習用
圖片來源：luffy-wear 僅供學習用
核心目標：越瑣碎，越真實，預判所有可能的疑問，減少客服壓力。
尤其是美國消費者習慣自助購物，詳盡的信息能降低退貨率。因此此部分的設計需清晰的展示產(chǎn)品的基本信息。
內(nèi)容方向：
圖片來源：furbo 僅供學習用
圖片來源：dreametech 僅供學習用
核心目標：給產(chǎn)品一個“靈魂溢價”，從“賣貨”到“賣價值觀”，綁定長期用戶。
我們可以將品牌理念傳達給消費者，使產(chǎn)品更有厚度，賦予產(chǎn)品更多情緒價值，帶動消費者購買。
Sprout Social數(shù)據(jù)調(diào)研顯示：美國Z世代用戶中，62%的消費者愿意為具有社會責任的品牌支付溢價。那么為什么不展示這個板塊讓你的消費者看到企業(yè)有愛心的一面？
內(nèi)容方向：
優(yōu)秀案例參考：
furbo品牌產(chǎn)品詳情頁最后一張海報提到“One Furbo = $1 to Help Rescued Pets”。展現(xiàn)了Furbo關心動物福利，強調(diào)品牌的社會責任感。
每購買一臺Furbo，消費者不僅能享受高品質(zhì)產(chǎn)品，還能幫助救助動物，激勵更多人做出購買決策。這種情感連接讓顧客感受到參與有意義事業(yè)的價值，提升品牌忠誠度。
同時，F(xiàn)urbo展示透明度和責任感，增強消費者的信任。通過這樣的方式，F(xiàn)urbo有效促進品牌與消費者之間的聯(lián)系，推動銷售增長。
圖片來源：furbo 僅供學習用
作者：外貿(mào)小巨熊 公眾號：外貿(mào)小巨熊
題圖來自Unsplash，基于CC0協(xié)議
該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
UI設計是隨著智能設備的飛速發(fā)展、互聯(lián)網(wǎng)行業(yè)的發(fā)展以及農(nóng)林牧漁傳統(tǒng)行業(yè)的急于轉(zhuǎn)向而興起。主要是企業(yè)對移動設備交互界面的重視。在企業(yè)越來越重視界面設計的今天。傳統(tǒng)的平面設計能為現(xiàn)在我們的UI設計提供哪些參考呢，我們能從中借鑒的技巧有哪些？今天就從版式設計說起。
在UI設計中版式設計不言而喻是非常重要的。版式設計就如同蓋房子先要搭好框架一樣。一款APP視覺呈現(xiàn)是不是符合商業(yè)性并兼具審美。其中的版式設計是其核心。而在平面設計中版式設計也是一個作品的核心。平面設計長時間的發(fā)展積淀了相當多實用的技巧和方法。
版式設計中形勢方法指的是、畫面的表現(xiàn)方法和原理。說白了就是畫面要出什么效果就用什么表現(xiàn)手法而已。平面設計中形勢方法可以分為。虛空留白、比例適度、對比調(diào)和、變化統(tǒng)一、變異秩序、節(jié)奏韻律、重復交錯、對稱均衡等。今天我們舉例分析一下前四個。
1、虛空留白（適合現(xiàn)在極簡設計風格）
這種版式設計主要是突出主題，給人以輕松愉悅的感覺。適合文藝范的和有逼格的app界面使用，能夠營造出高品質(zhì)的界面風格。但是如果一旦運用不得當容易出現(xiàn)界面空或單調(diào)的感覺。
2、比例適度（協(xié)調(diào)UI中各部分內(nèi)容）
平面設計中所說的比例適度主要是整體和部分的協(xié)調(diào)，采用合理的比例方法，如：黃金比例、等差等比。去協(xié)調(diào)各部分的關系使各部分要素產(chǎn)生聯(lián)系。在UI版面布局中正是需要調(diào)節(jié)和有機的組合各要素在有限的界面里的合理性。
3、對比調(diào)和（UI中信息層級的表現(xiàn)）
對比調(diào)和在平面設計中是經(jīng)常用到的，整體版面要調(diào)和，局部版面要對比。對比是強調(diào)主次關系。對比調(diào)和用到UI設計中可以做到設計內(nèi)容在主次關系的層級化。在統(tǒng)一調(diào)和的界面里又充滿了對比的小情調(diào)。這正是平面不平之所在，也是一個優(yōu)秀的界面所必備的。
4、變化與統(tǒng)一（是UI突破同質(zhì)化的一種方法）
變化與統(tǒng)一是形式美法則的總則。是其他方法方式的一個總結(jié)。變化所說的就是在設計中要有所創(chuàng)新不能總墨守成規(guī)，統(tǒng)一是設計要做到視覺上的愉悅而不是雖然有局部吸引人的眼球但是整體一看卻是辣眼睛。變化和統(tǒng)一也許是突破現(xiàn)在APP同質(zhì)化的一種方法。在現(xiàn)在APP同質(zhì)化嚴重的情況下我們能做到APP的風格統(tǒng)一又不墨守成規(guī)尋求變化才是營造自己風格的一種方法。
這些平面設計里的形式美法則在UI設計中同樣受用。這些表面形式在做banner圖構(gòu)圖和創(chuàng)意上也特別有用。
版式設計的基本類型有特別多。我們這里著重分析其中對UI設計最有幫助的骨骼型、左右分割、曲線型、滿版型這幾個基本類型。
1、骨骼型（類似網(wǎng)格構(gòu)圖）
這里說的骨骼型就是在版式構(gòu)圖中，進行橫豎向的分欄。能容嚴格按照分欄排列。版面效果沉穩(wěn)厚重，井然有序，如果橫豎分欄交叉排列還可制造靈動活潑的版面氣氛。非常類似網(wǎng)格構(gòu)圖的方法。在UI設計中也很受用，可以很好的規(guī)范個元素的位置。（如果你對目前的界面設計一籌莫展，不妨可以試試這種方法）
2、左右分割型（瀑布流）
左右分割不外乎就是把版面左右分開在配之以圖文。在UI中的應用是隨著扁平化卡片化的興起，在移動端界面尺寸的限制下，開始進行了信息的分割處理。橫向的卡片式布局使得一屏內(nèi)所看到的信息受到了極大的限制（不利于用戶體驗，卡片式并非萬能）。所以就應用的左右分割的布局。左右分割有利于信息的呈現(xiàn)，可以與瀑布流結(jié)合。
3、曲線型（UI方向1）
曲線型主要表現(xiàn)的是韻律和節(jié)奏，可能符合一部分小眾APP設計界面設計，充滿了特色和戲劇性。我覺得有特色的界面設計是這些小眾APP的設計核心?？梢岳昧眍惖男”姷脑O計做吸引。
4、滿版型（UI方向2）
滿版設計在平面設計中主要表達大方、舒展的設計風格。在UI移動端界面設計中寸土寸金?，F(xiàn)在的扁平化，極簡設計風格都在留白提升逼格。但是未來極簡設計終將過去，我們面對的還是海量信息。
版式設計是平面設計的一部分，也應該是UI設計的一部分。這里僅僅是說出了版式設計的一點點內(nèi)容，部分的形式美法則和版式設計的基本類型。還有很多很多對UI設計有利的點沒有發(fā)掘。站在巨人的肩上可以看的更遠，平面設計就是我們前進的加速劑。
本文由 @彪形大漢 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
蘭亭妙微(www.jsyqsx.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
在 UI 界面當中使用動效已經(jīng)成為這幾年一直被討論的熱門話題了。動效要怎么用，什么樣的動效更優(yōu)秀等等，這樣的探討層出不窮。在 UI 所涉及到的各種動畫和動效當中，概念動效是被討論的最多的話題。充滿實驗性的概念動效是動效設計最前沿的領域，是開發(fā)和實現(xiàn)上最具有挑戰(zhàn)性的部分，也是新產(chǎn)品上線之后，用戶最容易注意到，也討論得最多的東西。
在 Tubik Studio 的博客上，我們已經(jīng)分享過很多關于 UI 動效的文章和內(nèi)容了。關于概念動效/動畫對于 UI 設計與開發(fā)的影響，我想 Tubik 的動畫設計師 Kirill Yerokhin 是最有發(fā)言權(quán)的。
概念動效應該算是概念設計領域的一個分支?？偟膩碚f，概念動效還是在做動效和動畫的設計，不過它是為了在真實的產(chǎn)品上線之前，基于特定的想法、構(gòu)思而進行創(chuàng)建的東西。在進行用戶界面設計的時候，動效可以存在于交互、轉(zhuǎn)場和具體的控件操作上，動效作為一種狀態(tài)轉(zhuǎn)變、交互反饋和視覺引導的工具而存在。動效設計師會使用各種各樣的工具來進行動效的設計，我們常常提到的工具包括 Adobe After Effects，Principle，F(xiàn)igma 和 InVision。
這其實是目前最富有爭議的話題。很多概念動效和現(xiàn)有的、成型的動效/動畫解決方案，在步驟、效果、執(zhí)行和開發(fā)上都不盡相同，超出了通常的限制和常見的規(guī)則。這種動效技術(shù)在剛剛開始接觸的時候，會覺得不夠真實，沒有必要，甚至有人會認為無法實現(xiàn)。
重點在于，UI 動效其實和我們常見的靜態(tài)元素（字體、圖標、控件、色彩和形狀）同樣能夠讓產(chǎn)品從激烈的競爭當中脫穎而出。
所有開發(fā)者討厭概念動效且不想去實現(xiàn)的說法其實是不夠準確的。實際上，這樣的事情要依情況來看。在很多創(chuàng)意設計領域當中，經(jīng)常有人說某種創(chuàng)新或者創(chuàng)意是不可能實現(xiàn)的，然而實際上，總會有人竭盡所能發(fā)現(xiàn)新的解決方案，找到新的方法。
需求決定供應。如果「市場」看到了一個全新的設計理念，尤其是在動畫和動效領域，就會有人想辦法在實際的產(chǎn)品當中將它實現(xiàn)出來。而這個時候，設計師的構(gòu)思就不再停留在概念上。在 Tubik Studio，我們在很多時候會提出新的概念動效，這些概念動效甚至可能會極其復雜，但是需求一旦確定，總會有第三方的開發(fā)接手并且將他們實現(xiàn)出來。
實踐表明，在技術(shù)上，概念動效的實現(xiàn)幾乎僅僅就是時間和花銷上的問題，解決和實現(xiàn)的可能性其實非常之高。
第一個案例展示了和列表交互的動畫，左邊的列表只是單純的滾動，而右邊的則明顯的加入了漸進的動效，模擬現(xiàn)實中拉動卡片的微妙動作。右邊的變體看起來更加生動活潑，為滾動交互體驗增加了樂趣。更有趣的地方在于，右邊的變體在運動的過程中產(chǎn)生了卡片之間有更多空間的視覺幻象，這讓整個界面充滿了呼吸感和動感。
上面的案例當中，左邊只是簡單的左右切換過渡，而右邊則帶有放大和轉(zhuǎn)變的過渡，不僅讓動效的指向性更為明顯，而且更加富有動態(tài)。
概念動效往往會力圖讓最常規(guī)的交互效果更加生動，比如側(cè)邊欄展開這樣常見的操作。
概念動效是 UI 設計階段最具有創(chuàng)造性的階段之一，動效設計師會提供不同的方案和選項來同開發(fā)者和客戶進行討論。下面的案例都是 Kinill 和 UI 設計師一同實現(xiàn)的一些實例。
這是一個財務管理類應用動效，采用不同色彩來實現(xiàn)餅狀圖來進行數(shù)據(jù)展示，整個效果時髦值很高。
這是音樂新聞應用中的過渡動效。
這是為家庭預算 APP 設計的菜單打開概念動效。
這是商務名片 APP 的 UI 概念動效。
這個日歷 APP 的概念動效想必大家都見過很多次了，多彩的設計和流暢的動效至今令人難忘。
這個充滿流動性側(cè)邊欄動效非常有意思。
事實上，從最基本的構(gòu)思和概念開始創(chuàng)新和創(chuàng)造幾乎是每個行業(yè)都遵循的流程。包括汽車行業(yè)和建筑設計，大多都是從基本的概念設計著手，才有之后的實現(xiàn)和發(fā)展。概念設計最初常常以「這只是和現(xiàn)實無關的幻想」的樣子出現(xiàn)，但是最終實現(xiàn)出來并且走入日常生活的案例，比比皆是。不管怎樣，無論好壞，它們都在推動我們的生活逐步前進。
在 UI 設計領域，概念動效的優(yōu)勢和意義也是一樣的。前不久有不少人認為我們所設計的動效是不真實的、過于花俏的，但是實現(xiàn)出來，上手之后，往往和預期不盡相同。在平面設計的年代，靜態(tài)的設計追求的是持久的價值，簡約和清爽讓這種價值得以維系。但是在這個用戶注意力資源極其有限的今天，多樣的需求和緊張的競爭使得動效設計師需要竭盡全力抓住用戶的每一點注意力，至少，越來越腦洞大開的動效正在證明它們在這件事上無可替代的價值。
原文作者 : Tubik Studio
譯者／編輯 : 陳子木
譯文地址：https://www.uisdc.com/conceptual-animation-making-ui
本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖由作者提供
編輯導語：產(chǎn)品的設計應當讓用戶始終清楚事項的發(fā)生，重要的元素也應當置于用戶一目了然的位置，直觀且清晰的設計往往能提升用戶的使用體驗。本篇文章里，作者繼續(xù)總結(jié)了提升產(chǎn)品設計效果的幾個小技巧，一起來看一下。
重要的位置，要留給重要的元素。
編者按：用戶對產(chǎn)品的體驗來自直觀感受。所以UI/UX往往對產(chǎn)品的成敗有著直接的影響，糟糕的UI/UX體驗會讓強大的功能失去效力。
但怎么才能提高UI/UX設計的效果呢？不一定需要你掌握豐富全面的設計知識，有時候一點點的小改變就能令設計大為改觀。
Marc Andrew總結(jié)了36個改進UI/UX設計的小技巧，分成6篇系列文章刊出，此為第五篇，希望能夠幫助到你。原文發(fā)表在Medium上，標題是：UI & UX micro-tips: Volume five。
2個卡片設計樣例。左邊的標題行高很高，右邊的標題行高就要小很多。
在創(chuàng)作實用、易于理解且華麗的 UI 時，只需要做一點點的調(diào)整馬上就可以改進設計。
在這篇系列文章的第5篇中，我會給大家再帶來6個容易實踐的 UI 和 UX 小技巧。
相關閱讀：
我們開始吧……
2個卡片設計樣例。左邊的標題行高很高，右邊的標題行高就要小很多。
設計要講規(guī)矩，我是遵守規(guī)則的忠實粉絲，比方說Type Scale或者一直都很出色的8pt Grid系統(tǒng)我是遵守的。
但有時候最好不要太過教條主義，不要Scale 或 Grid告訴你該怎么做就怎么做，重要的是看怎么做更好看。
請記住，規(guī)則是可以變通的，有時候偶爾也是可以打破的。
做一個打破規(guī)則的叛逆者。
2 個表單字段樣例。一個顯示的是帶有基本錯誤消息的字段，另一個顯示了更詳細的錯誤消息。
使用表單的時候，要盡量確保錯誤消息說清楚出了什么問題，以及如何補救。
始終要讓用戶了解到具體情況。
要讓這些錯誤消息對用戶有幫助，不要讓用戶蒙在鼓里。
APP的 2 個加載屏幕樣例。一個空空如也，沒有加載提示，另一個展示了更詳細的加載指示器。
展示APP元素的框架可以幫助你快速地向用戶溝通應用的布局，并讓用戶放寬心，知道有什么事情正在發(fā)生，而不是死機。
系統(tǒng)狀態(tài)可見性是需要遵循的重要原則，這讓用戶能夠了解正在發(fā)生的事情。
不要讓用戶玩猜謎游戲。要從一開始就讓他們了解情況。
APP的 2 個通知樣例。一個提供的信息非?；荆硪粋€在模態(tài)內(nèi)部提供了更詳細的描述。
在進行應用可能會產(chǎn)生后果的特定操作之前，始終都要先詳細告知用戶。
這尤其適用于某些會產(chǎn)生不可逆轉(zhuǎn)后果的操作，比方說永久性刪除某些內(nèi)容。
讓用戶知道將會發(fā)生什么，并要求他們在按下那個寫著“刪除互聯(lián)網(wǎng)”的紅色大按鈕之前再三確認自己要這么做。
2 個標簽欄樣例。上面這個展示的是不太重要的圖標，下面這個展示的是更重要的圖標。
APP的標簽欄可是屏幕這塊房地產(chǎn)的黃金地段，所以請明智使用。
要把你的標簽欄保留給最常用的屏幕，并把次要的屏幕隱藏在“更多”圖標里面。
小小的標簽欄只能留給重要的東西。
2個桌面導航的樣例。一個是注冊和登錄按鈕隱藏在下拉菜單里面，另一個在菜單以外放置了 2 個按鈕，而且就放在頂部導航欄旁邊。
是的，我時不時還會在桌面視圖里面看到這種情況發(fā)生。
用戶需要采取的基本操作（也就是注冊或登錄）完全隱藏在他們甚至可能都瀏覽不到的下拉菜單里面。
把這些重要操作放在訪問便利的位置，并應該放在用戶預期最應該出現(xiàn)的地方。
作者：Marc Andrew，譯者：boxi
來源：https://www.36kr.com/p/1302313074821767
本文由 @神譯局 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議。
編輯導語：由于審美的多優(yōu)化，產(chǎn)品設計風格及類型也不盡相同，但核心都是圍繞用戶群體來迎合市場需求。本文將從我看到、我理解、我行動、給我反饋這四個層面逐步遞進闡明交互設計的本質(zhì)，值得閱讀學習。
近來，和新的交互團隊溝通頗多。在溝通當中，不免會陷入這樣的對話：我覺得這個設計不美，不優(yōu)雅、所以不合適。
每每，當我們圍繞產(chǎn)品設計的討論進入了“美丑與否”的階段，就基本上等同于陷入了“公說公有理、婆說婆有理”的泥沼。畢竟，審美是一個個體化的偏好，依賴于我們過往的學習、認知和經(jīng)歷。圍繞產(chǎn)品去討論美丑，最后往往只能看誰的官帽子大就讓誰決定了。
但是，在涉及交互時，我們應該聚焦于美丑的討論么？
我的答案是，不應該。
在創(chuàng)作一幅畫作或雕塑的時候，個性化的作品之美是可以被討論的。你偏好特定的風格，從而創(chuàng)作特定類型的作品，看客喜歡自然好，不喜歡也無所謂。因為作品首先是悅己的，然后才是悅?cè)说?。我們借由一個個性化的作品來完成自我的投射和受眾的篩選。
而在規(guī)劃一款面向大眾產(chǎn)品的時候，其商業(yè)化的產(chǎn)品之美則不應該被討論，更應該被數(shù)據(jù)衡量。我們不是要把自己偏好的風格強塞給不同的用戶，而是要以用戶可接受的方式將自己的產(chǎn)品和服務兜售出去。和作品不同，商品首先是悅?cè)说?，然后才是悅己的。我們面對的是一個被篩選出的受眾群體，來完成品牌和服務價值的投射。即便市場上有很多，我個體不喜歡的產(chǎn)品設計，但是仍然要尊重其，在數(shù)據(jù)指標上是有效的。
當用戶面對交互界面時，會經(jīng)歷：我看到、我理解、我行動、給我反饋的過程。過程中，逐環(huán)節(jié)中的漏斗轉(zhuǎn)化，和最終的業(yè)務結(jié)果，是可以抽離出數(shù)據(jù)指標進行衡量的。
那么，交互設計的導向，就旨在降低整個鏈路中的各個環(huán)節(jié)間的阻力，體現(xiàn)在用戶從“我看到” 到 “我理解”的認知阻力降低，從“我理解”到“我行動”的操作干擾降低，以及從“我行動”到“給我反饋”的反饋時延降低。
這個環(huán)節(jié)一般是產(chǎn)品經(jīng)理和設計師容易代入個人審美的環(huán)節(jié)，有審美潔癖的人士往往會傾向于提供更有結(jié)構(gòu)化、更富有美感和邏輯性的信息排布展示。而事實上，這就犯了“理性人假設“的錯誤，我們總假設用戶是秉持著理性來使用我們產(chǎn)品的，殊不知，他們大概率是以感性的方式來感知和應用我們的產(chǎn)品，未必能夠體會到產(chǎn)品精致的“匠心”：
比如，對于列表頁卡片來說，同樣的信息，以標簽的形式展現(xiàn)就不如以標題的形式展現(xiàn)。”字要大“定律，在列表頁卡片的設計中屢試不爽。
又如，在同一個頁面上，如果我們增加了兩個關注按鈕，UV關注轉(zhuǎn)化效率就會比一個的要好。以個人體驗為例，我一直在使用一款壁紙軟件，但直到某一日，我才驚覺原來這個頁面里有兩個收藏按鈕，我一直只在使用其中一個。我拿著手機問了身邊的朋友，呈現(xiàn)出28分布，80%的人和我一樣關注到了同一個位置的收藏按鈕；而20%的人則關注到了另一個收藏按鈕、或同時關注到了兩個按鈕。
這個環(huán)節(jié)一般是產(chǎn)品經(jīng)理和設計師容易代入專家視角的環(huán)節(jié)，有專家視角的人士往往會傾向于使用書面的、應用內(nèi)專有的表述方式，比如：溝通、馬克、直聊等等，但是，這種不說人話的文案顯然既不利于理解，又無法有效推動用戶做出有效的行動。
套用福格行為模型，行為發(fā)生于動機、能力和提示同時出現(xiàn)的時候。產(chǎn)品交互的作用，就是要降低用戶使用產(chǎn)品所需的能力門檻，給到用戶充分的行動提示，從而促進行為密度的提升。
從過往2C銷轉(zhuǎn)的經(jīng)驗上來看，同樣的頁面布局，暖色的按鈕比冷色的按鈕轉(zhuǎn)化率高、直白的口語化文案比正式的書面語文案轉(zhuǎn)化率高。數(shù)據(jù)結(jié)果告訴我們，那些原本中立的用戶，是可以被顏色、文案所引導，從而做出有效行動的。
這個環(huán)節(jié)基本上就屬于基礎認知了，不要讓自己的產(chǎn)品在交互過程中出現(xiàn)“死機”態(tài)。在實踐中可以更多的使用非阻塞式操作，通過異步的方式給到用戶更及時和靈敏的反饋：
以用戶上傳頭像為例，一種做法是在用戶上傳完畢后才給到提示；另一種做法則是本地完成操作后就先給用戶反饋，隨后進入后臺的上傳，只有在上傳失敗且重試失敗后，才給到用戶提示。
以內(nèi)容平臺發(fā)布UGC內(nèi)容為例，一種做法是先審后發(fā)，先審核通過后再發(fā)布到公域；另一種做法則是先發(fā)后審，先讓內(nèi)容對用戶自己可見，并插入到他信息流的首位，然后在審核通過后發(fā)布到公域。從公域的可視性上來說，兩種方案是一致的，但是給用戶體感上，先發(fā)后審的即時性更強。
只有能夠切實降低用戶認知阻力、操作阻力、反饋延時的交互，才稱得上是商品維度的好交互。美感與否、邏輯與否，都是上帝視角的先驗審判，而逐環(huán)節(jié)的漏斗指標才是用戶視角的后驗投票。
不追求美麗，那么追求什么呢？
簡單，是我目前對產(chǎn)品和交互的認知和追求。
許是年紀大了，便終于因為意識到自己的審美是非典型的、有偏差的，開始更多的不執(zhí)念于自己，而落地于用戶觀察。
簡單，是一種有效的策略。
因為簡單，所以用戶更容易理解我們提供的信息和內(nèi)容，從而更快速的完成信息的識別和認知。
因為簡單，所以用戶更容易聚焦在主路徑上，不會在諸多紛繁的選項中迷失、陷入選擇困難。
因為簡單，所以用戶不需要了解平臺的黑盒，他能夠得到一個更簡單的系統(tǒng)，看到的就是直接的輸入輸出、按下一個按鈕收獲一個商品。
簡單的策略，不光讓用戶得利，我們也會從中受益，使得前期試錯成本和后期維護成本都降低許多。
簡單，是一道困難的題目。
追求簡單，所以我們需要找到用戶群體的最大公約數(shù)，只有將這個最大公約數(shù)落地在產(chǎn)品設計中，才能讓用戶快速理解和接受我們的設計；
追求簡單，所以我們需要使用更平白的文本、更直接的圖標，不端著、說人話，才能讓用戶沒有理解的障礙、一看到就能夠明白。
追求簡單，所以我們需要克制自己對于巴洛克風格的摯愛，不斷的收斂自己想要多做功的念頭，砍到20%的需求，以MVP的方式去推進業(yè)務。
從追求個體的美麗，到追求群體的簡單；從追求個體的控制，到追求群體的順應。
本文由 @YanZehua 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
在數(shù)字化轉(zhuǎn)型和AI技術(shù)的推動下，B端設計正在經(jīng)歷一場深刻的變革。本文從釘釘近10年的B端產(chǎn)品設計經(jīng)驗出發(fā)，深入探討了2025年B端品牌物料系統(tǒng)設計的趨勢。
回溯互聯(lián)網(wǎng)的發(fā)展進程，從桌面端的撥號上網(wǎng)，到5G移動互聯(lián)網(wǎng)，再至人工智能的助力，科技領域正在經(jīng)歷著翻天覆地的變革。未來的數(shù)字世界，在沉浸感、參與度、個性化等維度對體驗會提出更進階的要求；與此同時，B端企業(yè)對于高效、簡便、用戶友好的界面需求與日俱增。在2025年的當下，B端設計師唯有持續(xù)學習，適應新技術(shù)與新趨勢，緊密圍繞客戶的業(yè)務價值展開設計，進一步注重實用性、包容性以及可定制化，方可為企業(yè)客戶塑造出卓越的產(chǎn)品與服務。
因此，我們結(jié)合釘釘近10年的B端產(chǎn)品設計經(jīng)驗，鑒于未來B端設計趨勢將展現(xiàn)出多元化、智能化和人性化的特質(zhì)，從B端產(chǎn)品個性化、風格與質(zhì)感、界面版式、品牌物料、動態(tài)、圖標等多維度設計展開深度研究，與大家一道探討B(tài)端設計的本質(zhì)和趨勢，期望在真正駕馭B端產(chǎn)品設計的這條道路上，帶來些許有益的啟迪。
今日，將為大家分享2025 B端品牌物料的設計趨勢，深入探討如何系統(tǒng)的構(gòu)建和管理品牌物料體系：從精心提煉品牌戰(zhàn)略，到積極探索客戶觸點創(chuàng)新，針對品牌物料的生產(chǎn)、加工和面客宣發(fā)等多元場景，聚焦于高效傳遞品牌一致性、強化專業(yè)信賴感、精確傳遞產(chǎn)品服務及價值，進而吸引目標客戶并推動轉(zhuǎn)化。
“當企業(yè)采購決策者同時收到5份方案書，你的設計怎樣才能率先映入眼簾？”引用Forrester報告可知，76%的B端采購決策會受視覺專業(yè)度影響。
B端場景下，由于客戶具有一些特殊性：比如決策流程漫長、涉及角色眾多等，所需往往不只是產(chǎn)品，還涵蓋配套安裝、培訓、維護等整體解決方案，并且更看重穩(wěn)定性、信任感與長期合作價值。因而，B端產(chǎn)品在面向客戶展示品牌服務與物料時，設計上需從品牌策略、視覺體系、場景應用、體驗升級及工具支持等多個維度，傳遞出專業(yè)、高效、創(chuàng)新的形象。
隨著數(shù)字化轉(zhuǎn)型的影響力與日俱增，綜合行業(yè)變革、技術(shù)發(fā)展以及客戶需求的動態(tài)演變，在實現(xiàn)品牌一致性傳達、提升專業(yè)信賴感以及達成目標客戶轉(zhuǎn)化等方面，B端品牌物料設計歷經(jīng)了從基礎功能傳達邁向多維度體驗升級的不斷進化：
在傳統(tǒng)印刷時代，為我們所熟知的品牌物料核心載體包括信紙、手冊、單頁、展板等。
這些物料的設計呈現(xiàn)出高度標準化的特征：嚴格依照CI手冊執(zhí)行，該手冊詳盡規(guī)定了企業(yè)在各類場景下正確運用品牌元素的方式，諸如標志（Logo）、標準字體、色彩系統(tǒng)、宣傳語等，以此確保所有對外傳播信息均契合企業(yè)的形象定位與價值觀。然而，這種模式也存在一些弊端，例如改版周期長、難以滿足客戶的定制化需求。
步入互聯(lián)網(wǎng)時代，B端面客的品牌物料通常覆蓋從線上到線下的多元場景，諸如官網(wǎng)、H5產(chǎn)品價值頁、文檔介紹、PPT模板、活動沙龍物料等等。不僅如此，線上產(chǎn)品一般還借助大量運營推廣、市場傳播等形式觸達客戶或用戶。
這種方式具備諸多優(yōu)勢：比如制作周期短，更新迭代快，能夠針對客戶的不同身份與需求，實現(xiàn)更為定制化、精準化的服務。同時，還可通過復盤數(shù)據(jù)轉(zhuǎn)化情況，持續(xù)優(yōu)化和調(diào)整價值內(nèi)容的呈現(xiàn)方式。
近年來，技術(shù)迭代日新月異，諸如Web3、AR、生成式AI等新興技術(shù)重構(gòu)了物料形態(tài)。與此同時，B端決策者的代際更替顯著，越來越多年輕的企業(yè)管理者對數(shù)字敘事的接受度大幅提升。數(shù)據(jù)可視化的融入，不僅讓內(nèi)容更具說服力，也契合了B端客戶對數(shù)據(jù)的需求。加之產(chǎn)品競爭同質(zhì)化現(xiàn)象愈發(fā)凸顯，當技術(shù)參數(shù)趨于相同時，視覺體驗便成為影響客戶選擇的關鍵差異點。
當前，B端品牌物料設計的前沿趨勢亮點紛呈：實時數(shù)據(jù)看板可與客戶系統(tǒng)API直接相連、動態(tài)信息圖表借助AE動畫演示技術(shù)架構(gòu)、動態(tài)數(shù)據(jù)資產(chǎn)化表現(xiàn)多樣：比如阿里云以流體力學動畫演繹云計算資源調(diào)度，利用粒子系統(tǒng)可視化AI算法運行路徑；再比如AR說明書掃描設備可觸發(fā)三維拆解動畫，全息投影方案沙盤等，這些都為客戶帶來了從“單向傳播”到“交互式對話”的沉浸式體驗。
“在B端領域，視覺設計不是美工，而是產(chǎn)品價值的翻譯官與商業(yè)信任的構(gòu)筑者。”
我們不難察覺，B端品牌物料設計在視覺敘事邏輯上已然經(jīng)歷了深刻的進化：
過去
產(chǎn)品介紹大多局限于功能說明書層面。基于精準傳遞技術(shù)參數(shù)這一核心目的，形成了以“產(chǎn)品圖 + 技術(shù)指標 + 對比表格”構(gòu)成的模塊化排版定式，同時采用齒輪寓意工業(yè)設備、電路板象征智能化等隱喻圖形。然而，這種方式弊病明顯，同質(zhì)化現(xiàn)象極為嚴重，且嚴重缺失品牌個性。
現(xiàn)在
產(chǎn)品介紹在兩方面實現(xiàn)了顯著突破。
其一: 在敘事方式上，實現(xiàn)了從“我們有什么”到“你能實現(xiàn)什么”的理念升級；
其二: 在創(chuàng)新策略上，通過插畫生動呈現(xiàn)客戶現(xiàn)有工作流程的痛點，將枯燥的數(shù)據(jù)進行戲劇化處理，例如把“節(jié)省30%成本”轉(zhuǎn)化為動態(tài)損益曲線，直觀且富有沖擊力。
于B端品牌物料設計的發(fā)展進程里，如何在秉持專業(yè)性的基礎上，傳遞出飽含情感的溫度，已然成為關鍵所在。
舉例而言，當鼠標懸停（hover）在數(shù)據(jù)圖表上，粒子綻放的效果瞬間呈現(xiàn)，為用戶帶來耳目一新的奇妙體驗；借助材質(zhì)隱喻來傳達特定情感，磨砂金屬質(zhì)感猶如無聲的語言，訴說著可靠與安心；還有別出心裁的反數(shù)字化實踐：比如制作觸感編碼手冊，讓不同紙張紋理與產(chǎn)品特性一一呼應，磨砂紙寓意安全防護的堅實壁壘，金屬箔象征尖端科技的無限探索。
與此同時，可持續(xù)物料創(chuàng)新層出不窮，諸多環(huán)保實踐讓人眼前一亮：比如采用大豆油墨印刷，讓廢棄手冊在短短6個月內(nèi)便可自然降解；電子說明書中巧妙內(nèi)嵌碳足跡計算器，清晰展示環(huán)保貢獻數(shù)值。像某清潔設備廠商獨具匠心，其手冊采用種子紙制作，客戶將手冊種植后，便能收獲與企業(yè)LOGO形狀相關的植物，為環(huán)保行動增添一抹別樣的詩意。此外，展望未來生態(tài)感知期，諸如腦機接口情緒反饋設計等前沿探索，正引領著B端品牌物料設計邁向更多維的天地。
B端品牌物料作為與客戶之間的溝通材料，需要兼顧品牌戰(zhàn)略穿透力與商業(yè)場景適配性，其本質(zhì)離不開以人為中心的服務和體驗，不管是網(wǎng)頁還是H5，印刷物還是空間，都大量借助“物理元素”進行可視化呈現(xiàn)，“有形”的體驗能夠加深客戶對服務的記憶，強化客戶感知。
接下來，我們從品牌戰(zhàn)略層到系統(tǒng)層再到執(zhí)行層，深入闡述如何更系統(tǒng)地構(gòu)建B端品牌物料設計。
B端品牌物料系統(tǒng)設計的首要步驟，便是提煉其獨特的價值觀、差異化競爭優(yōu)勢，以及與客戶建立信任的關鍵標識等要素。這些品牌基因的提取，應重點著眼于行業(yè)特性、技術(shù)門檻以及品牌服務定位，而非側(cè)重于感性的情感表達。
以釘釘為例，AI時代下，我們的品牌主張聚焦于讓組織和個人更敏捷、更有創(chuàng)造力，致力于塑造智能、簡約、普惠且開放的企業(yè)形象?；谶@一品牌戰(zhàn)略，我們在設計風格（涵蓋色彩、質(zhì)感、版式以及傳播物料等方面）、面客產(chǎn)品介紹，以及文案描述等多個維度，都進行了系統(tǒng)性的煥新升級。
B端品牌物料設計，絕非僅僅著眼于美觀，更需具備策略性，以便針對不同客戶場景，精準傳遞相應信息。
在釘釘，我們精心構(gòu)建了新紫品牌物料庫，無論是內(nèi)部的企服人員、銷售、設計師、業(yè)務PDSA等，還是外部生態(tài)服務商及其他人員，都能開放使用，實現(xiàn)及時共享。
例如，當線下的前線銷售團隊舉辦面對面的會銷活動或客戶沙龍時，為了更直觀、規(guī)范地展示產(chǎn)品或服務，我們提供一系列契合釘釘調(diào)性的基礎演示物料，包括PPT、產(chǎn)品介紹文檔、手冊、企業(yè)名片、一&五&十頁紙、邀請函以及展廳氛圍布置等標準模板。同時，針對各類物料，配備詳細的使用說明文檔和生產(chǎn)SOP，內(nèi)容涵蓋從文件下載到字體安裝，從素材使用到標準輸出，再從工藝制作到預算成本等各個環(huán)節(jié)。即便你是設計小白不懂設計，也能依據(jù)自身需求，迅速對接供應商，制作出精美且符合品牌調(diào)性的物料。
同時，為擴大新紫品牌物料在前線人員中的知曉度與認知度，提高物料使用頻率，并確保物料使用的一致性，我們與前線團隊緊密建聯(lián)，定期開展線上直播培訓與答疑活動。通過收集真實客戶需求反饋，反哺品牌物料不斷完善。
又如，當釘釘員工進行客戶共創(chuàng)、拜訪時，為保障服務專業(yè)度，提升企業(yè)品牌形象，我們會準備精美且適宜的伴手禮，并聯(lián)合市場團隊，輸出一套完整的釘釘官方品牌介紹、釘釘集團案例介紹等物料供其使用。
值得注意的是，釘釘?shù)纳鷳B(tài)服務商也是展現(xiàn)釘釘企業(yè)服務與形象的關鍵力量，因此，我們還為其提供統(tǒng)一裝修建議，包括門頭設計、裝修風格、著裝要求、解決方案手冊等。
再如，在釘釘?shù)木€上場景中，釘釘官網(wǎng)、各業(yè)務產(chǎn)品H5價值頁等都是客戶快速了解產(chǎn)品的重要渠道。為提升內(nèi)部人員協(xié)同效率，我們設計開發(fā)了釘釘內(nèi)容運營生產(chǎn)平臺——「叮當貓」，其中沉淀并搭建了大量關于釘釘產(chǎn)品功能、價值介紹、企業(yè)案例和解決方案等模板，如同精心配置的“預制菜”，使用者可直接便捷取用。
此外，在B端具體業(yè)務中，品牌物料需更具靈活性。例如，在釘釘管理套件商業(yè)化場景中，針對面客材料繁多、演示組織操作門檻高、及時迭代性差等痛點，我們打造即開即用的產(chǎn)品體驗樣板間，讓客戶能夠快速、便捷、可視化地體驗產(chǎn)品，加速客戶決策。
最后，B端場域下，客戶除了通過線下一對一或線上觸達服務了解產(chǎn)品介紹，各類傳播渠道同樣是企業(yè)品牌與心智塑造的重要陣地。像大型企業(yè)發(fā)布會、產(chǎn)品公眾號、小紅書等平臺，都是不容忽視的關鍵場景。在釘釘，我們每年定期舉辦大型產(chǎn)品升級發(fā)布會，并借助各類傳播渠道持續(xù)宣傳推廣，不斷擴大品牌影響力。
品牌物料管理在B端業(yè)務中不僅是設計規(guī)范問題，更是品牌資產(chǎn)運營、組織協(xié)同效能提升的系統(tǒng)工程。
在品牌物料投放與實際使用過程中，我們時常遭遇一些典型痛點場景，比如某會晤物料使用過期Logo、某線下展會采用過時的色彩規(guī)范、某產(chǎn)品價值頁與白皮書技術(shù)參數(shù)不一致等。追根溯源，這些問題的核心成因在于上下游協(xié)同與一致性管理的缺失。在幾十人的小型企業(yè)中，此類情況或許尚不嚴重，通過簡單的相互“問一嘴”，便能較快達成信息對焦。然而，一旦企業(yè)規(guī)模擴張，人數(shù)達到幾百、上千甚至過萬，品牌物料一致性的協(xié)同管理便會變得愈發(fā)困難。因此，為更高效地解決信息不對齊、不統(tǒng)一的難題，建立一套標準的品牌物料管理范式用以指導物料設計與使用的準入及準出，就顯得尤為必要。
在釘釘，隨著智能化的全面升級，為提升品牌物料的美觀度與專業(yè)度，同時提高物料調(diào)用效率、確保使用的一致性，我們與銷售團隊特別成立專項項目組。在企服前線代表和各業(yè)務產(chǎn)品代表的關鍵支持下，形成了 「生產(chǎn)部」-「加工中心」-「面客部」 的品牌物料生產(chǎn)、加工與調(diào)用管理機制。「生產(chǎn)部」的人負責做什么，再到「面客部」的人負責賣什么，而處于中間環(huán)節(jié)負責加工的人員，則如同橋梁一般，確保上下游信息傳遞的準確性以及品牌物料管理的一致性。比如：有人負責細化到行業(yè)或場景的demo設計，有人核心輸出標桿客戶案例，還有人負責輸出一套完整的企業(yè)服務面客規(guī)范。做好品牌物料的一致性管理，能夠極大的提升B端客戶決策效率（降低認知成本），同時強化企業(yè)專業(yè)可信度。
隨著行業(yè)變遷、客戶需求的不斷更迭以及技術(shù)的日新月異，B端品牌物料設計已悄然蛻變，從傳統(tǒng)認知里單純的宣傳材料，逐步發(fā)展成為多維且個性化的服務與體驗。當下B端品牌物料的設計趨勢，聚焦于高效傳遞品牌一致性、強化專業(yè)信賴感，以及系統(tǒng)性管理好物料的生產(chǎn)、加工和面客宣發(fā)。從精心提煉品牌戰(zhàn)略，到積極探索客戶觸點創(chuàng)新，每一個環(huán)節(jié)都旨在降低客戶認知成本，助力企業(yè)精準傳遞產(chǎn)品服務及其價值，從而推動客戶轉(zhuǎn)化。
以上就是本期為大家?guī)淼腂端設計趨勢之品牌物料系統(tǒng)設計的全部內(nèi)容。后續(xù)，我們還將從動效、圖標等設計趨勢深入研究，期待在深耕B端產(chǎn)品設計的道路上，與各位攜手前行，共同進步。
作者：冬然 @
本文由人人都是產(chǎn)品經(jīng)理作者【釘釘用戶體驗】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于 CC0 協(xié)議。
常見的B端卡片組件，應該怎么設計才可以達成更好的傳播效果、傳遞更清晰、更完善的視覺體驗？在本篇文章里，作者就結(jié)合具體案例，對B端卡片組件設計進行了技巧拆解，一起來看看吧，或許會對你有所啟發(fā)。
B端設計的過程中，并不是所有元素抄一抄別人的，從組件庫里引用下就完事了，而是要經(jīng)過具體組織并設計。尤其在一些特殊的組件中，是可以去表現(xiàn)設計水平，提升項目整體視覺質(zhì)量的，而不是讓它們看起來非常的枯燥乏味。
這次，我們的改版主要就圍繞在B端常見的卡片組件中，通過3個以前提交過的作業(yè)，來分享如何設計B端的卡片。
三個改版案例我們都遵循相同的設計方式和順序：
在該案例中，卡片作為頁面的核心對象，視覺重心不夠突出，且內(nèi)容的權(quán)重沒有得到有效的表現(xiàn)，訂單標識只有一個的情況反復強調(diào)對識別卡片沒有任何幫助，且卡片占比過大，沒必要的浪費頁面空間。
所以，重構(gòu)它的結(jié)構(gòu)時，重點突出標題弱化標簽，將卡片拆分成標題、信息、操作三個欄，讓信息的呈現(xiàn)更簡潔直觀。
然后再具體優(yōu)化內(nèi)容和細節(jié)，對重要信息突出，固定的標題字段弱化。
最后，再根據(jù)主色的需要填充色彩進去即可。
這個案例也是設計得比較有問題的，但是忽略掉全局組件的粗糙，卡片部分的設計也是很多作品案例中的常見問題，要素過多，沒有主次，在列表化的展示中，根本沒辦法很好的識別相關的內(nèi)容和關注到有效的信息，會被淹沒在繁復的字段內(nèi)容中。
所以，我們用相同的方法作下區(qū)分，將內(nèi)容分為上中下三個欄。
然后再對字段做權(quán)重的劃分，雖然字段信息很多，但值得被突出的要素不多，企業(yè)名和數(shù)據(jù)是卡片中最重要的信息，一個用于識別卡片，一個用于查看核心的指標。
最后，再完成樣式的補全即可，只在星級和用戶職位上增加色彩。
問題和前面還是一樣，內(nèi)容很零碎，所有要素都強調(diào)，于是就沒有重點。所以，下面對它們進行改版，這次因為數(shù)據(jù)項不再是重點，卡片的目標不是用來查看數(shù)據(jù)而是用于檢索進入到下級頁面的，所以只分了兩欄。
然后，再對權(quán)重進行強調(diào)，查看詳情是這里面最重要的元素，圖片則沒有太大的意義僅僅是點綴所以縮小。
最后，再完成相應色彩的添加和圖片的填充，完成最終的視覺效果。
這三個改版都用了很簡單的修改方式，通過理解卡片的作用、字段信息，對它進行信息分區(qū)，然后填入相關的字段并做出權(quán)重劃分，最后再用顏色為不同的要素加權(quán)。
只要掌握這樣的設計思路，做絕大多數(shù)卡片都不會有阻力，只會糾結(jié)于應該用哪套樣式更合適。
因為時間關系只做了很簡單的調(diào)整，沒去做多套大跨度的樣式變更，同時套進原圖環(huán)境沒做整體的處理，所以還有很多升級優(yōu)化的空間，理解這個感覺即可。
作者：酸梅干超人；
本文由 @超人的電話亭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash ，基于 CC0 協(xié)議
該文觀點僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。
編輯導讀：動效效果是一個功能性元素，而不僅僅是一個裝飾。本文作者介紹了五個交互動效效果，水平視差滾動效果、動畫搜索欄交互、提交按鈕啟動信息、頁面間的分頁動畫、用粘性元素展開卡片，希望對你有幫助。
設計一個帶有動效效果和轉(zhuǎn)場效果的用戶界面，是為另一個手機應用規(guī)劃一個更好的用戶體驗的好方法。在一個注意力持續(xù)時間短暫的世界里，動畫-微交互是刺激用戶參與的好方式。
這就是為什么 Airbnb最近推出Lottie–它是一個“新開源工具，可以輕松為本地應用程序添加動效效果”像Lottie項目表明了，為應用程序和網(wǎng)站增加用戶體驗，其中添加動畫作為一個新元素越來越重要。
就像所有放入界面中的元素并與之交互的過程一樣，動效效果也是一個功能性元素，而不僅僅是一個裝飾。動效效果在用戶界面應該堅持一個恰到好處的處理，而背后設置始終需要有一個明確的目的。當動效效果是錦上添花而不是美中不足時，用戶體驗會更流暢。
以下是介紹的交互動效效果：
視差效果在數(shù)字系統(tǒng)設計中可以同時用于垂直面和水平面。視差效果首次應用是在視頻游戲，數(shù)十年后它進入了網(wǎng)頁設計應用中，然后漸漸的又進入了移動應用程序，使用靜態(tài)或緩慢移動的背景圖像與快速移動的前景圖像，創(chuàng)建一個多層次的3D滾動效果。這使用戶體驗更加身臨其境，以其微妙之處吸引用戶。為什么這會讓人眼前一亮-
一起看一下在設計原則中的兩個視差滾動效果實例。
手機游戲武器卡：
Weapon cards by Hassan Mahmud
視差效果最佳位置之一是在移動應用程序或網(wǎng)站上水平或垂直滾動卡片，體驗最流暢環(huán)節(jié)的感受，是在最后部分的一張卡片。類似于iphone在你滾動到特定列表的末尾時引入的橡皮筋效應。
耐克APP促銷卡：
Nike promotional cards by Jardson Almeida
這個例子是耐克APP概念創(chuàng)作的視差滾動效果，來促進即將到來的產(chǎn)品發(fā)布。
這個設計通過突出前景元素—- 鞋子—- 將其提升了一個層次，從而超越了背景卡片的邊緣。這個效果彌補滾動時發(fā)生的背景顏色改變。正如你看到的例子，精心制作的視差互動效果可以很容易幫助你從產(chǎn)品群中脫穎而出并為你的訪客建立一個好的印象。不要認為視差是純粹的裝飾，像你使用的其他技術(shù)一樣，它應該為你的用戶增加真正有價值的體驗方式被融合。
但是，需要注意的是在視差效應范圍內(nèi)過多的運動可能會對那些患有前庭疾病的人造成傷害。運動錯覺和深度錯覺可能導致眩暈或者迷失方向感，請切記這些設計準則：
搜索欄是用戶在移動應用程序或網(wǎng)頁設計中最常見的圖形元素之一。在這種類型的動畫中，界面通常只有一個搜索圖標，當你點擊它搜索輸入字段時會顯示一個彈性動畫。通過在搜索元素中添加一個微妙的動畫，設計師可以實現(xiàn)兩個基本目標:
讓我們看一下這個交互的例子：
Search transform by Alex Pronsky
這個設計展示了放大鏡（搜素欄）作為圓形圖標，點擊該圖標時它會有動效，變成藥丸形狀的搜索框。這是一個非常輕量級的交互設計，在 Principle 上只需要不到5個頁面就可以實現(xiàn)，并且在開發(fā)應用程序或網(wǎng)站時也同樣簡單。
用戶填寫表單或在應用程序中進行某些選擇按下提交按鈕之后就會出現(xiàn)這個動畫。一個應用程序首次啟動并且所有序緩存和數(shù)據(jù)都被提取時，啟動(Splash) 動畫也會被使用。啟動動畫通常包括 logo 和應用程序的名稱，通常會在應用程序打開前在屏幕上出現(xiàn)片刻。為什么這會讓人眼前一亮-
讓我們來看一個交互式啟動畫面的例子：
Submit splash screen by Khai
這個設計是用戶在應用程序中完成提交交互之后的展示的動畫。當數(shù)據(jù)被發(fā)送到數(shù)據(jù)庫時，彈跳球創(chuàng)建了一個有趣的體驗，接下來的勾號向用戶提供反饋，告訴用戶的操作是成功的，這是一個重要的體驗實現(xiàn)。以下是啟動畫面時要遵循的一些最佳的方法：
分頁是一系列相互連接且內(nèi)容相似的頁面，需要注意的是即使頁面中某一部分的內(nèi)容可以分為不同的頁面，我們?nèi)匀粚⑦@個概念定義為分頁。其優(yōu)點包括3個：更容易的導航、更好的用戶體驗、更流暢的購買過程。通常用在電子商務網(wǎng)站。
讓我們來看一個分頁組件的例子，它可以在各個部分之間滑動并且可以通過動畫創(chuàng)建一個令人愉快的用戶體驗：
Pagination by André Gonçalves
當用戶在不同部分之間切換時，它創(chuàng)造了一種流暢的用戶體驗。它可以用在應用程序中用戶可以在各個部分之間快速滑動。例如瀏覽電子商務網(wǎng)站中的產(chǎn)品圖片、閱讀教育應用程序中的不同部分信息，或者按照步驟創(chuàng)建食品應用程序的配方。
在用戶界面設計中，卡片列表是一個易于展示信息快的方法。借鑒現(xiàn)實世界中使用實物卡片記憶和組織信息的方法ーー例如抽屜卡或便利貼ーー卡片列表顯示一系列卡片，每張卡片包含一小部分信息。因此，設計的真正的難點在于平衡信息的傳遞方式，而不是讓使用者不知所措。
用戶應該得到一個清晰的圖片并準確傳達信息，如果用戶選擇深入瀏覽時，可以選擇擴展信息和更深入的展示。保持卡片展開的連續(xù)性、流動性應是平順且感覺就像是一個連接在一起的感覺。
像上面所有的交互一樣，看一個交互設計的例子：
MVMT concept by Lukas Guschlbauer
這個設計是用在一個電子商務的應用程序，購買手表顯示卡的項目。主要的信息如價格和等級需要顯示在每張卡片。擴展卡片可以顯示額外的信息，例如使用特點和推薦。在消費購買決策時，這款手表的粘性擴展視圖創(chuàng)造了一個更好的體驗。直觀的使用和-正確的操作-通常美學上也是令人舒適的。擴展卡片列表可以構(gòu)建響應式布局設計，也是提高可用性的絕佳方案。目的是提高瀏覽內(nèi)容或者信息量大的應用程序。
作者：Samarth Zalte
本文由@木之 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于CC0協(xié)議。
藍藍設計的小編 http://www.jsyqsx.cn
