B端究竟需要什么樣的產品經理？
編輯導語：產品的設計應當讓用戶始終清楚事項的發(fā)生，重要的元素也應當置于用戶一目了然的位置，直觀且清晰的設計往往能提升用戶的使用體驗。本篇文章里，作者繼續(xù)總結了提升產品設計效果的幾個小技巧，一起來看一下。
重要的位置，要留給重要的元素。
編者按：用戶對產品的體驗來自直觀感受。所以UI/UX往往對產品的成敗有著直接的影響，糟糕的UI/UX體驗會讓強大的功能失去效力。
但怎么才能提高UI/UX設計的效果呢？不一定需要你掌握豐富全面的設計知識，有時候一點點的小改變就能令設計大為改觀。
Marc Andrew總結了36個改進UI/UX設計的小技巧，分成6篇系列文章刊出，此為第五篇，希望能夠幫助到你。原文發(fā)表在Medium上，標題是：UI & UX micro-tips: Volume five。
2個卡片設計樣例。左邊的標題行高很高，右邊的標題行高就要小很多。
在創(chuàng)作實用、易于理解且華麗的 UI 時，只需要做一點點的調整馬上就可以改進設計。
在這篇系列文章的第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)內部提供了更詳細的描述。
在進行應用可能會產生后果的特定操作之前，始終都要先詳細告知用戶。
這尤其適用于某些會產生不可逆轉后果的操作，比方說永久性刪除某些內容。
讓用戶知道將會發(fā)生什么，并要求他們在按下那個寫著“刪除互聯(lián)網”的紅色大按鈕之前再三確認自己要這么做。
2 個標簽欄樣例。上面這個展示的是不太重要的圖標，下面這個展示的是更重要的圖標。
APP的標簽欄可是屏幕這塊房地產的黃金地段，所以請明智使用。
要把你的標簽欄保留給最常用的屏幕，并把次要的屏幕隱藏在“更多”圖標里面。
小小的標簽欄只能留給重要的東西。
2個桌面導航的樣例。一個是注冊和登錄按鈕隱藏在下拉菜單里面，另一個在菜單以外放置了 2 個按鈕，而且就放在頂部導航欄旁邊。
是的，我時不時還會在桌面視圖里面看到這種情況發(fā)生。
用戶需要采取的基本操作（也就是注冊或登錄）完全隱藏在他們甚至可能都瀏覽不到的下拉菜單里面。
把這些重要操作放在訪問便利的位置，并應該放在用戶預期最應該出現(xiàn)的地方。
作者：Marc Andrew，譯者：boxi
來源：https://www.36kr.com/p/1302313074821767
本文由 @神譯局 授權發(fā)布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協(xié)議。
編輯導語：由于審美的多優(yōu)化，產品設計風格及類型也不盡相同，但核心都是圍繞用戶群體來迎合市場需求。本文將從我看到、我理解、我行動、給我反饋這四個層面逐步遞進闡明交互設計的本質，值得閱讀學習。
近來，和新的交互團隊溝通頗多。在溝通當中，不免會陷入這樣的對話：我覺得這個設計不美，不優(yōu)雅、所以不合適。
每每，當我們圍繞產品設計的討論進入了“美丑與否”的階段，就基本上等同于陷入了“公說公有理、婆說婆有理”的泥沼。畢竟，審美是一個個體化的偏好，依賴于我們過往的學習、認知和經歷。圍繞產品去討論美丑，最后往往只能看誰的官帽子大就讓誰決定了。
但是，在涉及交互時，我們應該聚焦于美丑的討論么？
我的答案是，不應該。
在創(chuàng)作一幅畫作或雕塑的時候，個性化的作品之美是可以被討論的。你偏好特定的風格，從而創(chuàng)作特定類型的作品，看客喜歡自然好，不喜歡也無所謂。因為作品首先是悅己的，然后才是悅人的。我們借由一個個性化的作品來完成自我的投射和受眾的篩選。
而在規(guī)劃一款面向大眾產品的時候，其商業(yè)化的產品之美則不應該被討論，更應該被數(shù)據(jù)衡量。我們不是要把自己偏好的風格強塞給不同的用戶，而是要以用戶可接受的方式將自己的產品和服務兜售出去。和作品不同，商品首先是悅人的，然后才是悅己的。我們面對的是一個被篩選出的受眾群體，來完成品牌和服務價值的投射。即便市場上有很多，我個體不喜歡的產品設計，但是仍然要尊重其，在數(shù)據(jù)指標上是有效的。
當用戶面對交互界面時，會經歷：我看到、我理解、我行動、給我反饋的過程。過程中，逐環(huán)節(jié)中的漏斗轉化，和最終的業(yè)務結果，是可以抽離出數(shù)據(jù)指標進行衡量的。
那么，交互設計的導向，就旨在降低整個鏈路中的各個環(huán)節(jié)間的阻力，體現(xiàn)在用戶從“我看到” 到 “我理解”的認知阻力降低，從“我理解”到“我行動”的操作干擾降低，以及從“我行動”到“給我反饋”的反饋時延降低。
這個環(huán)節(jié)一般是產品經理和設計師容易代入個人審美的環(huán)節(jié)，有審美潔癖的人士往往會傾向于提供更有結構化、更富有美感和邏輯性的信息排布展示。而事實上，這就犯了“理性人假設“的錯誤，我們總假設用戶是秉持著理性來使用我們產品的，殊不知，他們大概率是以感性的方式來感知和應用我們的產品，未必能夠體會到產品精致的“匠心”：
比如，對于列表頁卡片來說，同樣的信息，以標簽的形式展現(xiàn)就不如以標題的形式展現(xiàn)。”字要大“定律，在列表頁卡片的設計中屢試不爽。
又如，在同一個頁面上，如果我們增加了兩個關注按鈕，UV關注轉化效率就會比一個的要好。以個人體驗為例，我一直在使用一款壁紙軟件，但直到某一日，我才驚覺原來這個頁面里有兩個收藏按鈕，我一直只在使用其中一個。我拿著手機問了身邊的朋友，呈現(xiàn)出28分布，80%的人和我一樣關注到了同一個位置的收藏按鈕；而20%的人則關注到了另一個收藏按鈕、或同時關注到了兩個按鈕。
這個環(huán)節(jié)一般是產品經理和設計師容易代入專家視角的環(huán)節(jié)，有專家視角的人士往往會傾向于使用書面的、應用內專有的表述方式，比如：溝通、馬克、直聊等等，但是，這種不說人話的文案顯然既不利于理解，又無法有效推動用戶做出有效的行動。
套用福格行為模型，行為發(fā)生于動機、能力和提示同時出現(xiàn)的時候。產品交互的作用，就是要降低用戶使用產品所需的能力門檻，給到用戶充分的行動提示，從而促進行為密度的提升。
從過往2C銷轉的經驗上來看，同樣的頁面布局，暖色的按鈕比冷色的按鈕轉化率高、直白的口語化文案比正式的書面語文案轉化率高。數(shù)據(jù)結果告訴我們，那些原本中立的用戶，是可以被顏色、文案所引導，從而做出有效行動的。
這個環(huán)節(jié)基本上就屬于基礎認知了，不要讓自己的產品在交互過程中出現(xiàn)“死機”態(tài)。在實踐中可以更多的使用非阻塞式操作，通過異步的方式給到用戶更及時和靈敏的反饋：
以用戶上傳頭像為例，一種做法是在用戶上傳完畢后才給到提示；另一種做法則是本地完成操作后就先給用戶反饋，隨后進入后臺的上傳，只有在上傳失敗且重試失敗后，才給到用戶提示。
以內容平臺發(fā)布UGC內容為例，一種做法是先審后發(fā)，先審核通過后再發(fā)布到公域；另一種做法則是先發(fā)后審，先讓內容對用戶自己可見，并插入到他信息流的首位，然后在審核通過后發(fā)布到公域。從公域的可視性上來說，兩種方案是一致的，但是給用戶體感上，先發(fā)后審的即時性更強。
只有能夠切實降低用戶認知阻力、操作阻力、反饋延時的交互，才稱得上是商品維度的好交互。美感與否、邏輯與否，都是上帝視角的先驗審判，而逐環(huán)節(jié)的漏斗指標才是用戶視角的后驗投票。
不追求美麗，那么追求什么呢？
簡單，是我目前對產品和交互的認知和追求。
許是年紀大了，便終于因為意識到自己的審美是非典型的、有偏差的，開始更多的不執(zhí)念于自己，而落地于用戶觀察。
簡單，是一種有效的策略。
因為簡單，所以用戶更容易理解我們提供的信息和內容，從而更快速的完成信息的識別和認知。
因為簡單，所以用戶更容易聚焦在主路徑上，不會在諸多紛繁的選項中迷失、陷入選擇困難。
因為簡單，所以用戶不需要了解平臺的黑盒，他能夠得到一個更簡單的系統(tǒng)，看到的就是直接的輸入輸出、按下一個按鈕收獲一個商品。
簡單的策略，不光讓用戶得利，我們也會從中受益，使得前期試錯成本和后期維護成本都降低許多。
簡單，是一道困難的題目。
追求簡單，所以我們需要找到用戶群體的最大公約數(shù)，只有將這個最大公約數(shù)落地在產品設計中，才能讓用戶快速理解和接受我們的設計；
追求簡單，所以我們需要使用更平白的文本、更直接的圖標，不端著、說人話，才能讓用戶沒有理解的障礙、一看到就能夠明白。
追求簡單，所以我們需要克制自己對于巴洛克風格的摯愛，不斷的收斂自己想要多做功的念頭，砍到20%的需求，以MVP的方式去推進業(yè)務。
從追求個體的美麗，到追求群體的簡單；從追求個體的控制，到追求群體的順應。
本文由 @YanZehua 原創(chuàng)發(fā)布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協(xié)議
在數(shù)字化轉型和AI技術的推動下，B端設計正在經歷一場深刻的變革。本文從釘釘近10年的B端產品設計經驗出發(fā)，深入探討了2025年B端品牌物料系統(tǒng)設計的趨勢。
回溯互聯(lián)網的發(fā)展進程，從桌面端的撥號上網，到5G移動互聯(lián)網，再至人工智能的助力，科技領域正在經歷著翻天覆地的變革。未來的數(shù)字世界，在沉浸感、參與度、個性化等維度對體驗會提出更進階的要求；與此同時，B端企業(yè)對于高效、簡便、用戶友好的界面需求與日俱增。在2025年的當下，B端設計師唯有持續(xù)學習，適應新技術與新趨勢，緊密圍繞客戶的業(yè)務價值展開設計，進一步注重實用性、包容性以及可定制化，方可為企業(yè)客戶塑造出卓越的產品與服務。
因此，我們結合釘釘近10年的B端產品設計經驗，鑒于未來B端設計趨勢將展現(xiàn)出多元化、智能化和人性化的特質，從B端產品個性化、風格與質感、界面版式、品牌物料、動態(tài)、圖標等多維度設計展開深度研究，與大家一道探討B(tài)端設計的本質和趨勢，期望在真正駕馭B端產品設計的這條道路上，帶來些許有益的啟迪。
今日，將為大家分享2025 B端品牌物料的設計趨勢，深入探討如何系統(tǒng)的構建和管理品牌物料體系：從精心提煉品牌戰(zhàn)略，到積極探索客戶觸點創(chuàng)新，針對品牌物料的生產、加工和面客宣發(fā)等多元場景，聚焦于高效傳遞品牌一致性、強化專業(yè)信賴感、精確傳遞產品服務及價值，進而吸引目標客戶并推動轉化。
“當企業(yè)采購決策者同時收到5份方案書，你的設計怎樣才能率先映入眼簾？”引用Forrester報告可知，76%的B端采購決策會受視覺專業(yè)度影響。
B端場景下，由于客戶具有一些特殊性：比如決策流程漫長、涉及角色眾多等，所需往往不只是產品，還涵蓋配套安裝、培訓、維護等整體解決方案，并且更看重穩(wěn)定性、信任感與長期合作價值。因而，B端產品在面向客戶展示品牌服務與物料時，設計上需從品牌策略、視覺體系、場景應用、體驗升級及工具支持等多個維度，傳遞出專業(yè)、高效、創(chuàng)新的形象。
隨著數(shù)字化轉型的影響力與日俱增，綜合行業(yè)變革、技術發(fā)展以及客戶需求的動態(tài)演變，在實現(xiàn)品牌一致性傳達、提升專業(yè)信賴感以及達成目標客戶轉化等方面，B端品牌物料設計歷經了從基礎功能傳達邁向多維度體驗升級的不斷進化：
在傳統(tǒng)印刷時代，為我們所熟知的品牌物料核心載體包括信紙、手冊、單頁、展板等。
這些物料的設計呈現(xiàn)出高度標準化的特征：嚴格依照CI手冊執(zhí)行，該手冊詳盡規(guī)定了企業(yè)在各類場景下正確運用品牌元素的方式，諸如標志（Logo）、標準字體、色彩系統(tǒng)、宣傳語等，以此確保所有對外傳播信息均契合企業(yè)的形象定位與價值觀。然而，這種模式也存在一些弊端，例如改版周期長、難以滿足客戶的定制化需求。
步入互聯(lián)網時代，B端面客的品牌物料通常覆蓋從線上到線下的多元場景，諸如官網、H5產品價值頁、文檔介紹、PPT模板、活動沙龍物料等等。不僅如此，線上產品一般還借助大量運營推廣、市場傳播等形式觸達客戶或用戶。
這種方式具備諸多優(yōu)勢：比如制作周期短，更新迭代快，能夠針對客戶的不同身份與需求，實現(xiàn)更為定制化、精準化的服務。同時，還可通過復盤數(shù)據(jù)轉化情況，持續(xù)優(yōu)化和調整價值內容的呈現(xiàn)方式。
近年來，技術迭代日新月異，諸如Web3、AR、生成式AI等新興技術重構了物料形態(tài)。與此同時，B端決策者的代際更替顯著，越來越多年輕的企業(yè)管理者對數(shù)字敘事的接受度大幅提升。數(shù)據(jù)可視化的融入，不僅讓內容更具說服力，也契合了B端客戶對數(shù)據(jù)的需求。加之產品競爭同質化現(xiàn)象愈發(fā)凸顯，當技術參數(shù)趨于相同時，視覺體驗便成為影響客戶選擇的關鍵差異點。
當前，B端品牌物料設計的前沿趨勢亮點紛呈：實時數(shù)據(jù)看板可與客戶系統(tǒng)API直接相連、動態(tài)信息圖表借助AE動畫演示技術架構、動態(tài)數(shù)據(jù)資產化表現(xiàn)多樣：比如阿里云以流體力學動畫演繹云計算資源調度，利用粒子系統(tǒng)可視化AI算法運行路徑；再比如AR說明書掃描設備可觸發(fā)三維拆解動畫，全息投影方案沙盤等，這些都為客戶帶來了從“單向傳播”到“交互式對話”的沉浸式體驗。
“在B端領域，視覺設計不是美工，而是產品價值的翻譯官與商業(yè)信任的構筑者。”
我們不難察覺，B端品牌物料設計在視覺敘事邏輯上已然經歷了深刻的進化：
過去
產品介紹大多局限于功能說明書層面。基于精準傳遞技術參數(shù)這一核心目的，形成了以“產品圖 + 技術指標 + 對比表格”構成的模塊化排版定式，同時采用齒輪寓意工業(yè)設備、電路板象征智能化等隱喻圖形。然而，這種方式弊病明顯，同質化現(xiàn)象極為嚴重，且嚴重缺失品牌個性。
現(xiàn)在
產品介紹在兩方面實現(xiàn)了顯著突破。
其一: 在敘事方式上，實現(xiàn)了從“我們有什么”到“你能實現(xiàn)什么”的理念升級；
其二: 在創(chuàng)新策略上，通過插畫生動呈現(xiàn)客戶現(xiàn)有工作流程的痛點，將枯燥的數(shù)據(jù)進行戲劇化處理，例如把“節(jié)省30%成本”轉化為動態(tài)損益曲線，直觀且富有沖擊力。
于B端品牌物料設計的發(fā)展進程里，如何在秉持專業(yè)性的基礎上，傳遞出飽含情感的溫度，已然成為關鍵所在。
舉例而言，當鼠標懸停（hover）在數(shù)據(jù)圖表上，粒子綻放的效果瞬間呈現(xiàn)，為用戶帶來耳目一新的奇妙體驗；借助材質隱喻來傳達特定情感，磨砂金屬質感猶如無聲的語言，訴說著可靠與安心；還有別出心裁的反數(shù)字化實踐：比如制作觸感編碼手冊，讓不同紙張紋理與產品特性一一呼應，磨砂紙寓意安全防護的堅實壁壘，金屬箔象征尖端科技的無限探索。
與此同時，可持續(xù)物料創(chuàng)新層出不窮，諸多環(huán)保實踐讓人眼前一亮：比如采用大豆油墨印刷，讓廢棄手冊在短短6個月內便可自然降解；電子說明書中巧妙內嵌碳足跡計算器，清晰展示環(huán)保貢獻數(shù)值。像某清潔設備廠商獨具匠心，其手冊采用種子紙制作，客戶將手冊種植后，便能收獲與企業(yè)LOGO形狀相關的植物，為環(huán)保行動增添一抹別樣的詩意。此外，展望未來生態(tài)感知期，諸如腦機接口情緒反饋設計等前沿探索，正引領著B端品牌物料設計邁向更多維的天地。
B端品牌物料作為與客戶之間的溝通材料，需要兼顧品牌戰(zhàn)略穿透力與商業(yè)場景適配性，其本質離不開以人為中心的服務和體驗，不管是網頁還是H5，印刷物還是空間，都大量借助“物理元素”進行可視化呈現(xiàn)，“有形”的體驗能夠加深客戶對服務的記憶，強化客戶感知。
接下來，我們從品牌戰(zhàn)略層到系統(tǒng)層再到執(zhí)行層，深入闡述如何更系統(tǒng)地構建B端品牌物料設計。
B端品牌物料系統(tǒng)設計的首要步驟，便是提煉其獨特的價值觀、差異化競爭優(yōu)勢，以及與客戶建立信任的關鍵標識等要素。這些品牌基因的提取，應重點著眼于行業(yè)特性、技術門檻以及品牌服務定位，而非側重于感性的情感表達。
以釘釘為例，AI時代下，我們的品牌主張聚焦于讓組織和個人更敏捷、更有創(chuàng)造力，致力于塑造智能、簡約、普惠且開放的企業(yè)形象?；谶@一品牌戰(zhàn)略，我們在設計風格（涵蓋色彩、質感、版式以及傳播物料等方面）、面客產品介紹，以及文案描述等多個維度，都進行了系統(tǒng)性的煥新升級。
B端品牌物料設計，絕非僅僅著眼于美觀，更需具備策略性，以便針對不同客戶場景，精準傳遞相應信息。
在釘釘，我們精心構建了新紫品牌物料庫，無論是內部的企服人員、銷售、設計師、業(yè)務PDSA等，還是外部生態(tài)服務商及其他人員，都能開放使用，實現(xiàn)及時共享。
例如，當線下的前線銷售團隊舉辦面對面的會銷活動或客戶沙龍時，為了更直觀、規(guī)范地展示產品或服務，我們提供一系列契合釘釘調性的基礎演示物料，包括PPT、產品介紹文檔、手冊、企業(yè)名片、一&五&十頁紙、邀請函以及展廳氛圍布置等標準模板。同時，針對各類物料，配備詳細的使用說明文檔和生產SOP，內容涵蓋從文件下載到字體安裝，從素材使用到標準輸出，再從工藝制作到預算成本等各個環(huán)節(jié)。即便你是設計小白不懂設計，也能依據(jù)自身需求，迅速對接供應商，制作出精美且符合品牌調性的物料。
同時，為擴大新紫品牌物料在前線人員中的知曉度與認知度，提高物料使用頻率，并確保物料使用的一致性，我們與前線團隊緊密建聯(lián)，定期開展線上直播培訓與答疑活動。通過收集真實客戶需求反饋，反哺品牌物料不斷完善。
又如，當釘釘員工進行客戶共創(chuàng)、拜訪時，為保障服務專業(yè)度，提升企業(yè)品牌形象，我們會準備精美且適宜的伴手禮，并聯(lián)合市場團隊，輸出一套完整的釘釘官方品牌介紹、釘釘集團案例介紹等物料供其使用。
值得注意的是，釘釘?shù)纳鷳B(tài)服務商也是展現(xiàn)釘釘企業(yè)服務與形象的關鍵力量，因此，我們還為其提供統(tǒng)一裝修建議，包括門頭設計、裝修風格、著裝要求、解決方案手冊等。
再如，在釘釘?shù)木€上場景中，釘釘官網、各業(yè)務產品H5價值頁等都是客戶快速了解產品的重要渠道。為提升內部人員協(xié)同效率，我們設計開發(fā)了釘釘內容運營生產平臺——「叮當貓」，其中沉淀并搭建了大量關于釘釘產品功能、價值介紹、企業(yè)案例和解決方案等模板，如同精心配置的“預制菜”，使用者可直接便捷取用。
此外，在B端具體業(yè)務中，品牌物料需更具靈活性。例如，在釘釘管理套件商業(yè)化場景中，針對面客材料繁多、演示組織操作門檻高、及時迭代性差等痛點，我們打造即開即用的產品體驗樣板間，讓客戶能夠快速、便捷、可視化地體驗產品，加速客戶決策。
最后，B端場域下，客戶除了通過線下一對一或線上觸達服務了解產品介紹，各類傳播渠道同樣是企業(yè)品牌與心智塑造的重要陣地。像大型企業(yè)發(fā)布會、產品公眾號、小紅書等平臺，都是不容忽視的關鍵場景。在釘釘，我們每年定期舉辦大型產品升級發(fā)布會，并借助各類傳播渠道持續(xù)宣傳推廣，不斷擴大品牌影響力。
品牌物料管理在B端業(yè)務中不僅是設計規(guī)范問題，更是品牌資產運營、組織協(xié)同效能提升的系統(tǒng)工程。
在品牌物料投放與實際使用過程中，我們時常遭遇一些典型痛點場景，比如某會晤物料使用過期Logo、某線下展會采用過時的色彩規(guī)范、某產品價值頁與白皮書技術參數(shù)不一致等。追根溯源，這些問題的核心成因在于上下游協(xié)同與一致性管理的缺失。在幾十人的小型企業(yè)中，此類情況或許尚不嚴重，通過簡單的相互“問一嘴”，便能較快達成信息對焦。然而，一旦企業(yè)規(guī)模擴張，人數(shù)達到幾百、上千甚至過萬，品牌物料一致性的協(xié)同管理便會變得愈發(fā)困難。因此，為更高效地解決信息不對齊、不統(tǒng)一的難題，建立一套標準的品牌物料管理范式用以指導物料設計與使用的準入及準出，就顯得尤為必要。
在釘釘，隨著智能化的全面升級，為提升品牌物料的美觀度與專業(yè)度，同時提高物料調用效率、確保使用的一致性，我們與銷售團隊特別成立專項項目組。在企服前線代表和各業(yè)務產品代表的關鍵支持下，形成了 「生產部」-「加工中心」-「面客部」 的品牌物料生產、加工與調用管理機制?！干a部」的人負責做什么，再到「面客部」的人負責賣什么，而處于中間環(huán)節(jié)負責加工的人員，則如同橋梁一般，確保上下游信息傳遞的準確性以及品牌物料管理的一致性。比如：有人負責細化到行業(yè)或場景的demo設計，有人核心輸出標桿客戶案例，還有人負責輸出一套完整的企業(yè)服務面客規(guī)范。做好品牌物料的一致性管理，能夠極大的提升B端客戶決策效率（降低認知成本），同時強化企業(yè)專業(yè)可信度。
隨著行業(yè)變遷、客戶需求的不斷更迭以及技術的日新月異，B端品牌物料設計已悄然蛻變，從傳統(tǒng)認知里單純的宣傳材料，逐步發(fā)展成為多維且個性化的服務與體驗。當下B端品牌物料的設計趨勢，聚焦于高效傳遞品牌一致性、強化專業(yè)信賴感，以及系統(tǒng)性管理好物料的生產、加工和面客宣發(fā)。從精心提煉品牌戰(zhàn)略，到積極探索客戶觸點創(chuàng)新，每一個環(huán)節(jié)都旨在降低客戶認知成本，助力企業(yè)精準傳遞產品服務及其價值，從而推動客戶轉化。
以上就是本期為大家?guī)淼腂端設計趨勢之品牌物料系統(tǒng)設計的全部內容。后續(xù)，我們還將從動效、圖標等設計趨勢深入研究，期待在深耕B端產品設計的道路上，與各位攜手前行，共同進步。
作者：冬然 @
本文由人人都是產品經理作者【釘釘用戶體驗】，原創(chuàng)/授權 發(fā)布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協(xié)議。
常見的B端卡片組件，應該怎么設計才可以達成更好的傳播效果、傳遞更清晰、更完善的視覺體驗？在本篇文章里，作者就結合具體案例，對B端卡片組件設計進行了技巧拆解，一起來看看吧，或許會對你有所啟發(fā)。
B端設計的過程中，并不是所有元素抄一抄別人的，從組件庫里引用下就完事了，而是要經過具體組織并設計。尤其在一些特殊的組件中，是可以去表現(xiàn)設計水平，提升項目整體視覺質量的，而不是讓它們看起來非常的枯燥乏味。
這次，我們的改版主要就圍繞在B端常見的卡片組件中，通過3個以前提交過的作業(yè)，來分享如何設計B端的卡片。
三個改版案例我們都遵循相同的設計方式和順序：
在該案例中，卡片作為頁面的核心對象，視覺重心不夠突出，且內容的權重沒有得到有效的表現(xiàn)，訂單標識只有一個的情況反復強調對識別卡片沒有任何幫助，且卡片占比過大，沒必要的浪費頁面空間。
所以，重構它的結構時，重點突出標題弱化標簽，將卡片拆分成標題、信息、操作三個欄，讓信息的呈現(xiàn)更簡潔直觀。
然后再具體優(yōu)化內容和細節(jié)，對重要信息突出，固定的標題字段弱化。
最后，再根據(jù)主色的需要填充色彩進去即可。
這個案例也是設計得比較有問題的，但是忽略掉全局組件的粗糙，卡片部分的設計也是很多作品案例中的常見問題，要素過多，沒有主次，在列表化的展示中，根本沒辦法很好的識別相關的內容和關注到有效的信息，會被淹沒在繁復的字段內容中。
所以，我們用相同的方法作下區(qū)分，將內容分為上中下三個欄。
然后再對字段做權重的劃分，雖然字段信息很多，但值得被突出的要素不多，企業(yè)名和數(shù)據(jù)是卡片中最重要的信息，一個用于識別卡片，一個用于查看核心的指標。
最后，再完成樣式的補全即可，只在星級和用戶職位上增加色彩。
問題和前面還是一樣，內容很零碎，所有要素都強調，于是就沒有重點。所以，下面對它們進行改版，這次因為數(shù)據(jù)項不再是重點，卡片的目標不是用來查看數(shù)據(jù)而是用于檢索進入到下級頁面的，所以只分了兩欄。
然后，再對權重進行強調，查看詳情是這里面最重要的元素，圖片則沒有太大的意義僅僅是點綴所以縮小。
最后，再完成相應色彩的添加和圖片的填充，完成最終的視覺效果。
這三個改版都用了很簡單的修改方式，通過理解卡片的作用、字段信息，對它進行信息分區(qū)，然后填入相關的字段并做出權重劃分，最后再用顏色為不同的要素加權。
只要掌握這樣的設計思路，做絕大多數(shù)卡片都不會有阻力，只會糾結于應該用哪套樣式更合適。
因為時間關系只做了很簡單的調整，沒去做多套大跨度的樣式變更，同時套進原圖環(huán)境沒做整體的處理，所以還有很多升級優(yōu)化的空間，理解這個感覺即可。
作者：酸梅干超人；
本文由 @超人的電話亭 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash ，基于 CC0 協(xié)議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
編輯導讀：動效效果是一個功能性元素，而不僅僅是一個裝飾。本文作者介紹了五個交互動效效果，水平視差滾動效果、動畫搜索欄交互、提交按鈕啟動信息、頁面間的分頁動畫、用粘性元素展開卡片，希望對你有幫助。
設計一個帶有動效效果和轉場效果的用戶界面，是為另一個手機應用規(guī)劃一個更好的用戶體驗的好方法。在一個注意力持續(xù)時間短暫的世界里，動畫-微交互是刺激用戶參與的好方式。
這就是為什么 Airbnb最近推出Lottie–它是一個“新開源工具，可以輕松為本地應用程序添加動效效果”像Lottie項目表明了，為應用程序和網站增加用戶體驗，其中添加動畫作為一個新元素越來越重要。
就像所有放入界面中的元素并與之交互的過程一樣，動效效果也是一個功能性元素，而不僅僅是一個裝飾。動效效果在用戶界面應該堅持一個恰到好處的處理，而背后設置始終需要有一個明確的目的。當動效效果是錦上添花而不是美中不足時，用戶體驗會更流暢。
以下是介紹的交互動效效果：
視差效果在數(shù)字系統(tǒng)設計中可以同時用于垂直面和水平面。視差效果首次應用是在視頻游戲，數(shù)十年后它進入了網頁設計應用中，然后漸漸的又進入了移動應用程序，使用靜態(tài)或緩慢移動的背景圖像與快速移動的前景圖像，創(chuàng)建一個多層次的3D滾動效果。這使用戶體驗更加身臨其境，以其微妙之處吸引用戶。為什么這會讓人眼前一亮-
一起看一下在設計原則中的兩個視差滾動效果實例。
手機游戲武器卡：
Weapon cards by Hassan Mahmud
視差效果最佳位置之一是在移動應用程序或網站上水平或垂直滾動卡片，體驗最流暢環(huán)節(jié)的感受，是在最后部分的一張卡片。類似于iphone在你滾動到特定列表的末尾時引入的橡皮筋效應。
耐克APP促銷卡：
Nike promotional cards by Jardson Almeida
這個例子是耐克APP概念創(chuàng)作的視差滾動效果，來促進即將到來的產品發(fā)布。
這個設計通過突出前景元素—- 鞋子—- 將其提升了一個層次，從而超越了背景卡片的邊緣。這個效果彌補滾動時發(fā)生的背景顏色改變。正如你看到的例子，精心制作的視差互動效果可以很容易幫助你從產品群中脫穎而出并為你的訪客建立一個好的印象。不要認為視差是純粹的裝飾，像你使用的其他技術一樣，它應該為你的用戶增加真正有價值的體驗方式被融合。
但是，需要注意的是在視差效應范圍內過多的運動可能會對那些患有前庭疾病的人造成傷害。運動錯覺和深度錯覺可能導致眩暈或者迷失方向感，請切記這些設計準則：
搜索欄是用戶在移動應用程序或網頁設計中最常見的圖形元素之一。在這種類型的動畫中，界面通常只有一個搜索圖標，當你點擊它搜索輸入字段時會顯示一個彈性動畫。通過在搜索元素中添加一個微妙的動畫，設計師可以實現(xiàn)兩個基本目標:
讓我們看一下這個交互的例子：
Search transform by Alex Pronsky
這個設計展示了放大鏡（搜素欄）作為圓形圖標，點擊該圖標時它會有動效，變成藥丸形狀的搜索框。這是一個非常輕量級的交互設計，在 Principle 上只需要不到5個頁面就可以實現(xiàn)，并且在開發(fā)應用程序或網站時也同樣簡單。
用戶填寫表單或在應用程序中進行某些選擇按下提交按鈕之后就會出現(xiàn)這個動畫。一個應用程序首次啟動并且所有序緩存和數(shù)據(jù)都被提取時，啟動(Splash) 動畫也會被使用。啟動動畫通常包括 logo 和應用程序的名稱，通常會在應用程序打開前在屏幕上出現(xiàn)片刻。為什么這會讓人眼前一亮-
讓我們來看一個交互式啟動畫面的例子：
Submit splash screen by Khai
這個設計是用戶在應用程序中完成提交交互之后的展示的動畫。當數(shù)據(jù)被發(fā)送到數(shù)據(jù)庫時，彈跳球創(chuàng)建了一個有趣的體驗，接下來的勾號向用戶提供反饋，告訴用戶的操作是成功的，這是一個重要的體驗實現(xiàn)。以下是啟動畫面時要遵循的一些最佳的方法：
分頁是一系列相互連接且內容相似的頁面，需要注意的是即使頁面中某一部分的內容可以分為不同的頁面，我們仍然將這個概念定義為分頁。其優(yōu)點包括3個：更容易的導航、更好的用戶體驗、更流暢的購買過程。通常用在電子商務網站。
讓我們來看一個分頁組件的例子，它可以在各個部分之間滑動并且可以通過動畫創(chuàng)建一個令人愉快的用戶體驗：
Pagination by André Gonçalves
當用戶在不同部分之間切換時，它創(chuàng)造了一種流暢的用戶體驗。它可以用在應用程序中用戶可以在各個部分之間快速滑動。例如瀏覽電子商務網站中的產品圖片、閱讀教育應用程序中的不同部分信息，或者按照步驟創(chuàng)建食品應用程序的配方。
在用戶界面設計中，卡片列表是一個易于展示信息快的方法。借鑒現(xiàn)實世界中使用實物卡片記憶和組織信息的方法ーー例如抽屜卡或便利貼ーー卡片列表顯示一系列卡片，每張卡片包含一小部分信息。因此，設計的真正的難點在于平衡信息的傳遞方式，而不是讓使用者不知所措。
用戶應該得到一個清晰的圖片并準確傳達信息，如果用戶選擇深入瀏覽時，可以選擇擴展信息和更深入的展示。保持卡片展開的連續(xù)性、流動性應是平順且感覺就像是一個連接在一起的感覺。
像上面所有的交互一樣，看一個交互設計的例子：
MVMT concept by Lukas Guschlbauer
這個設計是用在一個電子商務的應用程序，購買手表顯示卡的項目。主要的信息如價格和等級需要顯示在每張卡片。擴展卡片可以顯示額外的信息，例如使用特點和推薦。在消費購買決策時，這款手表的粘性擴展視圖創(chuàng)造了一個更好的體驗。直觀的使用和-正確的操作-通常美學上也是令人舒適的。擴展卡片列表可以構建響應式布局設計，也是提高可用性的絕佳方案。目的是提高瀏覽內容或者信息量大的應用程序。
作者：Samarth Zalte
本文由@木之 翻譯發(fā)布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協(xié)議。
大腦在處理和組織看到的信息時會使用一套快捷方法，了解這些方法是設計成功的關鍵要素。本文介紹了十一條有效的設計準則，用形象的圖解幫助讀者更好地理解設計準則在設計工作中的運用，幫助你利用這些方法更快捷地開展設計。適合關注產品設計的小伙伴閱讀。
感知力是大腦將不同的信息連接和組織成一個連貫整體的機制。例如我們將相似的對象分組并連接起來，能夠輕松地區(qū)分出不屬于該組的對象。
大腦在處理和組織看到的信息時會使用一套快捷方法，了解這些方法是設計成功的關鍵要素。
在UI設計時，我們應該有意識地運用感知力，用足夠的事實來驗證設計，有依有據(jù)地解釋為什么這個圖形元素要這樣設計？背后的原因是什么？
提升感知力有助于清晰地解釋設計方案，避免常見的設計錯誤，引導我們將設計做得更好、更容易理解！
彼此靠近的元素會被自動理解為一組。把它們的位置放得更遠，會給人一種這些元素是完全獨立的個體的印象。
在UI設計中，可以利用鄰近原則將相似的界面元素組合在一起，把控總體布局。
鄰近規(guī)則適用于主導航、卡片、按鈕、內容和圖標等。我們還可以使用適當?shù)牧舭讓⒉煌脑剡M一步分開，創(chuàng)建一個層級更清晰的界面結構，以此來幫助用戶瀏覽和理解不同類型的信息。
鄰近原則是直接影響界面可用性的基本規(guī)則之一。如果隨意控制元素的位置和間距，有可能會讓整個產品變得混亂和難以理解。
視覺上相似的元素會被視為同一組，視覺上不同的元素，大腦會下意識將其視為單獨的元素。
利用相似性可以來定義界面的特征，例如顏色、形狀、尺寸、紋理或空間位置等。最容易區(qū)分的是顏色相似，其次是尺寸和形狀相似。
如果一個元素和界面中其他的元素都不同，無法融入到其他元素組中，那么這個元素就會變得非常顯眼。
我們可以利用這種差異化的效果來突出一些具有引導性或者功能性的元素，例如登錄按鈕或者加入購物車按鈕等。
一組不相連的元素組合在一起，我們會下意識地自動補充這些元素之間的空白，得到一個完整的、可識別的形狀。
閉合原則有多種不同的用法。例如一個虛線箭頭，我們會填補空白并把這些點連接在一起，得到一條完整的線段。
閉合原則還有助于識別抽象的圖標形狀并賦予更多的含義。在圖標設計中，為了避免信息過載，大多數(shù)圖標的設計都很簡潔，更方便用戶理解。
運用閉合原則的經典案例包括用不同虛線構成的IBM標志、利用正負形空間組合而成的WWF熊貓標志。
UI界面中的元素一旦有對稱性，就會產生秩序感，我們很快就能看到并理解這種形式。
我們天生喜歡對稱的物體。對稱排列的元素在視覺上更令人舒服，也更美觀。
可能有人覺得對稱設計過于呆板，這種想法在平面廣告或視覺設計中可能正確，但在UI設計中對稱布局是相當重要且實用的界面排版形式。
對稱布局讓設計更容易理解，也更友好，缺乏對稱會導致界面混亂，不知道該關注哪個元素。當然，如果想讓某個模塊突出展示，也可以嘗試打破對稱性，這樣不對稱的元素就能在界面中脫穎而出。
界面中沿著同一條線對齊的元素會被認為屬于同一組。
在瀏覽界面時，視線會第一時間尋找最順暢的視覺動線。這也解釋了為什么在使用連續(xù)性原則時，需要確保直線(或曲線)是均勻和可預測的。
線條越均勻，生成的形狀越容易被用戶正確識別。
連續(xù)性有助于界面保持上下垂直滾動時的節(jié)奏，相似的內容應始終保持對齊。如果某個元素打破了這種連續(xù)性，我們的瀏覽節(jié)奏會被打亂，瀏覽速度也會變慢。
當下的UI設計中，流行帶有圓角的卡片和按鈕效果。其中的一個原因是我們對于直角的處理速度稍慢，視線需要停頓并旋轉90度，而更圓滑的導角效果能幫助我們的視線更快地轉換。
按相同方向、以相同速度運動的元素被認為是一組。
在設計輪播、下拉列表、過渡動畫等場景時，共同命運原則會很有幫助。例如我們的視線既跟隨輪播圖水平移動，還跟隨下拉列表向下展開。
根據(jù)希克定律，可供的選擇數(shù)量應該有限制。有太多東西可供選擇可能會導致用戶迷失方向，做出判斷的時間加長，甚至會感到壓力。
米勒定律提到，大腦處理信息的能力與認知負荷有直接的關系。我們大腦一次能處理的信息量大約是7個對象。對象數(shù)量越多，處理它們所需的時間就越長。
在設計時，盡量不要超過七個選項，為了獲得最好的體驗，應盡量將選項保持在4-5個。這意味著需要控制主導航數(shù)量、按鈕數(shù)量、下拉選項和輪播圖數(shù)量等。
當需要用戶做選擇時，最好能突出顯示最受歡迎或最推薦的選項，幫助用戶更快做出決策。
我們能夠本能地區(qū)分界面中的圖形元素和背景。
界面由不同類型和樣式的圖層組成，每個圖層都有不同的層次結構。
為了避免層次結構混淆，我們需要清楚地定義界面的所有元素。背景不需要設計設計的太花哨，有可能會搶奪用戶對主要內容的注意力。
輔助內容和功能不需要太明顯，并且需要與主要內容在設計上做出區(qū)分。
可以使用對比關系、位置關系和陰影等方法幫助用戶區(qū)分內容和背景。
用戶通常認為具有視覺吸引力(美觀)的產品更實用。
根據(jù)這個原則，流行、對稱、美觀的界面會對用戶產生更積極的影響。如果視覺效果給人足夠好的第一印象，用戶可能會忽略一些可用性問題。
審美可用性的基礎在于具有一定的可用性，之后才會起作用。如果產品本身的功能就很糟糕，那么再美觀的界面也無濟于事。
高質量、美觀的界面有助于建立用戶信任。相反一個看起來混亂的設計會讓用戶感到不靠譜。即使用戶不能確切說出界面視覺的問題，但他們也會覺得這個產品有風險或者不正規(guī)。
高質量的UI設計對于銀行類、金融類和醫(yī)療類產品來說尤為重要，尤其是在需要用戶提供個人信息或涉及交易的使用場景中。
我們最容易記住一組當中的第一個和最后一個元素。
將最重要的內容或元素放在每組的第一個或最后一個，吸引用戶注意力，方便高頻操作。而次要的內容操作頻率相對較低，則放到中間位置。
例如在構建導航、下拉列表等場景中，將重要的操作放到首位。
在一組看起來相似的元素中，我們總是會記住與其余元素不匹配的那個元素。
在UI設計中，隔離效應意味著將界面中重要的內容或關鍵的操作在視覺上與眾不同。
最典型案例是界面中的CTA(號召性用語)按鈕。通過改變CTA按鈕的顏色、尺寸等，與界面中的其他按鈕區(qū)分開來，第一時間引起用戶的注意。
專欄作家
作者：Clippp，每周精選設計文章，專注分享關于產品、交互、UI視覺上的設計思考。
本文原創(chuàng)發(fā)布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自 Unsplash，基于CC0協(xié)議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
在互聯(lián)網領域中，人機之間的互動過程就是交互。交互也有一些可預測的、重復出現(xiàn)的規(guī)律，作者總結了其中常見的七種C端交互模式，可以提高大家的工作效率，分享給大家。
前段時間有個產品童鞋，他剛加我就問了一大串問題。
什么是模式（Pattern）？什么是模版（Template）？這兩個概念有什么區(qū)別？
作為一個熱心好學、樂于助人的產品仔，我當然和他暢聊了一個多小時，順便總結下聊天內容。
你是不是也經常在生活工作中，碰到類似“行為模式、設計模式、語言模式、文檔模版、表格模版”等名詞。
但又搞不清它們有什么區(qū)別，搞懂了又有什么用？
別急，我們花幾分鐘，先來嘮嘮什么是模式。
可預測、重復出現(xiàn)的現(xiàn)象或規(guī)律，通過歸納總結，就變成了某一種模式。
我們的生活中，就有許多模式的影子。
比如常見的商業(yè)模式、營銷模式、行為模式、數(shù)學模式、語言模式等。
舉個例子：
簡單說下行為模式，它分為了“習慣模式、消費模式、學習模式”等等。
苦逼打工仔普遍的消費模式，一般是工作日花錢少，到了周末都愛到商場逛街和購物。
但又有特例，我有個朋友就特別宅，他只喜歡在上班的時候，摸魚逛淘寶下單，簡直離譜~
掌握模式，有什么用？
當你掌握了模式的概念，并嘗試在生活中使用，相信你一定能感受到這 7 個好處。
我們試著再舉個例子，加深下對模式的理解，順便學學交互設計。
什么是交互？
簡單來說，交互指的是在互聯(lián)網領域中，人、機之間的一系列互動過程。
我還提煉了 3 種常見模式（簡單反饋、數(shù)據(jù)操作、業(yè)務判斷），比較粗糙湊合也能用。
現(xiàn)在試著再系統(tǒng)總結下，我常用的 7 種 C 端交互模式，主要有：導航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導模式。
學完就能用，趕緊卷起來~
有人就問了，還有更多交互模式嗎？
確實可以有，等我有時間再編幾個。。
話說回來，如果是一些特別復雜的業(yè)務規(guī)則，可能會涉及到 N 個交互模式的任意組合。
常見的導航模式有按鈕組合、標簽菜單、宮格布局、列表視圖等。
導航模式的主要作用是，告知用戶當前在網站的位置，以及接下來到哪些頁面，這有點像地圖 APP。
上面這張圖中，包含了幾種導航組件呢？
搜索，是各大電商 APP 常見的交互模式。
搜索模式允許用戶輸入關鍵詞，然后系統(tǒng)返回搜索結果。
打個比方，這有點像在 Navicat 中寫了一段 SQL 查詢。
SELECT id, name, age
FROM users
WHERE age > 18
這段 SQL 的作用是，查詢大于 18 歲的用戶信息，包含序號、名稱、年齡。
常見的反饋模式組件，涉及了對話框、吐司提示、氣泡提示等。
反饋模式用的比較多的場景是，告知用戶一些信息或提示，比如“輸入密碼錯了、展示訂單取消的注意事項”等。
輸入模式主要用于新數(shù)據(jù)創(chuàng)建，例如淘寶下單時，你新增了一個收貨地址。
打開美團叫個外賣，整個訂單創(chuàng)建流程，也是輸入模式。
有很多人可能會把輸入模式和編輯模式搞混。
區(qū)別它們的一個方法是，交互流程涉及新數(shù)據(jù)創(chuàng)建，還是改舊數(shù)據(jù)。
改數(shù)據(jù)的話，那就是編輯模式。
我們在看到一些干貨文章，或好用的小程序想要轉發(fā)給朋友，那就要用到分享模式。
分享模式可以很簡單，也可以往復雜了做，看產品階段去實現(xiàn)。
引導模式和反饋模式有點像，都是展示特定的內容。
那怎么分辨它們呢？
以設計師視角來看，反饋模式需要用戶觸發(fā)，系統(tǒng)被動顯示。
而要讓用戶特別關注的信息，那就是引導模式。
模式，即抽象的規(guī)律。——好夕雷
說了這么多概念和例子，你是不是對模式的認知更清晰了呢？
模式運用在產品領域，就有了這 7 種交互模式，分別是“導航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導模式”。
如果學會了模式，那么無論生活還是工作，相信你一定能輕松應對、事半功倍。
本文由 @好夕雷 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基于CC0協(xié)議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
前面的文章我們分享了交互設計思維，這篇文章，我們來看看用戶目標與交互目標。交互設計的核心，就是幫用戶拆解這些目標并找到最優(yōu)路徑，讓他們覺得“這事兒沒那么難”。
在交互設計中，用戶的目標可以理解為他們希望通過使用產品完成的事情。換句話說，就是用戶打開你的產品時“心里想要達成的事”。這個目標可能是很直接的，比如在外賣App上訂一份喜歡的午餐；也可能是抽象的，比如通過一款學習軟件提升自己的外語水平。無論目標是什么，用戶都期望在操作的過程中高效、順暢且愉快地達成目標。
交互設計的核心，就是幫用戶拆解這些目標并找到最優(yōu)路徑，讓他們覺得“這事兒沒那么難”。比如，如果用戶的目標是查找一條航班信息，設計師需要確保他們可以快速找到搜索入口，并在最短的時間內完成查詢，而不是在復雜的頁面中迷路。
除了完成任務，用戶還有情感上的目標，比如體驗愉悅感、安全感或滿足感。舉個例子，當用戶在付款時，他們的功能性目標是完成支付，而情感性目標可能是確認交易安全或者支付方式簡單快捷。這就是為什么很多支付產品會在完成支付后彈出一個愉快的提示動畫，比如一個小勾或一個成功的笑臉——它不僅告訴用戶任務完成了，還讓他們感到一種心理上的正反饋。
因此，交互設計思維的本質是站在用戶的視角去思考：他們想要完成什么，他們需要如何完成，以及我們如何讓這個過程變得簡單、高效和愉悅。滿足用戶目標，才是設計的成功所在。
在交互設計中，產品不僅是幫助用戶完成任務的工具，更是一個信息傳遞的媒介。那么，產品需要傳遞的信息到底是什么呢？簡單來說，就是**“我是什么”“我能做什么”“你現(xiàn)在在哪兒”“接下來該怎么做”**這幾大核心信息。
首先，產品需要明確地告訴用戶“我是什么”。比如，你打開一個外賣App，頁面上醒目的美食圖片和“搜索餐廳”的提示，就在告訴你，這個App的核心功能是幫助你找到食物并下單。如果用戶對產品的功能感到困惑，那設計就失去了它的基礎價值。
接著，產品要傳遞“我能做什么”的信息。也就是說，用戶需要很清楚地知道，這個產品能為他們提供哪些服務，或者有哪些功能可以用。比如在拍照App中，用戶可能會關心是否有濾鏡或編輯功能。設計師要通過直觀的界面布局和易識別的圖標來傳遞這些功能信息，避免用戶四處尋找。
再來是“你現(xiàn)在在哪兒”。用戶在使用產品的過程中，需要隨時了解自己在操作流程中的位置，比如是剛開始填寫訂單信息，還是已經進入支付環(huán)節(jié)。這種清晰的路徑感，可以通過導航欄、進度條等設計元素來實現(xiàn)，讓用戶有一種“掌控感”。
最后，也是最重要的，產品需要告訴用戶“接下來該怎么做”。交互設計的一個關鍵點，就是要引導用戶完成操作，避免他們卡在某一步不知所措。例如，當用戶填寫表單時，如果某項信息漏填了，產品需要用清晰的提示信息，比如紅色邊框或彈窗，告訴用戶哪里需要修正。通過明確的反饋，用戶會感到流程是流暢的，而不是無頭緒的。
總結來說，產品傳遞的信息是為了讓用戶明白自己的位置、了解操作步驟、感受到控制感和安全感。一個設計得當?shù)漠a品，會像一位貼心的向導，不斷用合適的方式傳遞這些信息，讓用戶有條不紊地完成目標，同時享受使用的過程。
在交互設計中，找到用戶目標與產品目標之間的平衡點就像搭建一座橋——一邊是用戶的需求和期望，另一邊是產品的商業(yè)目標和核心價值。設計的任務，就是讓這座橋既穩(wěn)固又通暢，讓用戶愿意通過產品實現(xiàn)他們的目標，同時產品也能達成自己的目標。
總結來說，設計師的職責是成為用戶和產品目標之間的“調解員”，用設計語言找到兩者的共贏點。一個成功的設計，不僅能讓用戶滿意，還能幫助產品實現(xiàn)長遠的發(fā)展目標。這種平衡并不容易，但通過不斷洞察、嘗試和優(yōu)化，就能讓產品和用戶之間建立起良性連接。
本文由 @ DesignLink 原創(chuàng)發(fā)布于人人都是產品經理。未經作者許可，禁止轉載
題圖來自Unsplash，基于CC0協(xié)議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務
編輯導語：設計師如何創(chuàng)建一個大放異彩的UI？好的UI設計不僅是讓軟件變得有個性有品位，還要讓軟件的操作變得舒適簡單、自由，充分體現(xiàn)軟件的定位和特點。本文詳細地給大家整理了UI設計的四大原則。一起來看看吧。
是什么讓一個好的 UI 設計易于閱讀？是什么讓用戶輕松瀏覽？設計師如何創(chuàng)建一個大放異彩的UI？用戶界面是任何軟件產品的關鍵部分。
好的UI設計，用戶甚至會忽略它。
如果做得不好，會成為用戶使用產品路上的絆腳石。
為了更高效地設計能滿足用戶使用的UI，大多數(shù)設計師都遵循界面設計原則。
本期我們就帶你了解UI設計四大原則！
為了創(chuàng)建視覺美學UI通常有以下這些小規(guī)則：
陰影是告訴我們正在查看哪些用戶界面元素的寶貴線索。
當光從天而降時，它照亮事物的頂部并在其下方投下陰影。
事物的頂部較輕，底部較暗。UI 也是如此。
就像我們所有面部特征的所有底面都有小陰影一樣，幾乎每個 UI 元素的底面都有陰影。
我們的屏幕是平面的，但細節(jié)設計會讓屏幕上幾乎所有東西看起來都是立體的。
在添加顏色之前進行灰度設計可以簡化視覺設計中最復雜的元素，這樣設計師可以專注于間距和布局元素。
首先設計黑白。從更難的問題開始，讓應用程序在各個方面都美觀且可用，但不需要顏色的幫助，最后再添加顏色。
這是讓應用程序看起來“干凈”和“簡單”的可靠的簡單方法。在太多地方有太多顏色是往往容易搞砸設計。
而在此之后，向灰度站點添加一種顏色可以簡單有效地吸引眼球。
通過修改單一色調的飽和度和亮度，可以生成多種顏色——深色、淺色、背景、強調色、引人注目的顏色，但這樣不會讓人眼花繚亂。
使用一種或兩種基本色調中的多種顏色是突出或中和元素且不會使設計混亂的可靠方法。
為了使 UI 看起來很有設計感，需要增加很多喘息的空間。
空白是構成出色視覺布局的最容易被忽視和未充分利用的元素之一。
很多時候，空白被視為空白空間，因此浪費了屏幕空間。
空格對于制作更好和簡化的布局是必要的，因為它最終使用戶專注于本來打算看到的內容。大量的空白可以使一些雜亂的界面看起來簡單又容易吸引人。
強調是一種策略，是想要將觀眾的注意力吸引到特定的設計元素上。這可能是內容區(qū)域、圖像、鏈接或按鈕等。
我們看到大多數(shù)設計領域都會注重焦點的創(chuàng)建，包括建筑、景觀設計和時裝設計。
為了通過視覺元素傳遞給用戶信息并導航準確，不讓用戶迷失方向，通常有以下幾點規(guī)則：
始終以盡可能少的步驟和屏幕為目標。
使用諸如底部工作表和模式窗口之類的覆蓋來壓縮數(shù)據(jù)并減少應用程序的占用空間。同時，確保自主和獨立的方式組織信息?？梢詫⑷蝿蘸妥尤蝿战M合在一起。
重要的是，不要將子任務隱藏在用戶想不到的頁面上。根據(jù)清晰且合乎邏輯的分類組織屏幕及其內容。
同樣，始終將完成任務所需的步驟數(shù)量減少到最小值。
當只需要一兩個操作時，不要讓用戶經歷繁瑣的點擊障礙。三擊規(guī)則是最實用的 UI 設計原則之一，它指出用戶應該能夠通過在應用程序內的任何位置單擊不超過 3 次來實現(xiàn)任何操作或訪問他們需要的任何信息。
最重要的是，永遠不要要求用戶重新輸入他們已經提供的信息。這可能讓用戶扔掉他們的設備，直接放棄使用。
這條原則涉及直觀的布局和清晰的信息標簽。瀏覽應用程序不應以任何方式令人困惑，即使初次使用的用戶也是如此。
相反，對界面的探索應該是有趣的，并在不知不覺中舒適地學會。
確保頁面架構簡單、合乎邏輯且有清晰的標示。
用戶永遠不應該懷疑他們在軟件中的位置，也不應該不斷思考才能確定如何到達他們想去的位置。
良好的視覺組織提高了可用性和易讀性，使用戶能夠快速找到他們正在尋找的信息并更有效地使用界面。
設計布局時，避免一次在屏幕上顯示太多信息。構建網格系統(tǒng)設計以避免視覺混亂。
應用內容組織的一般原則，例如將相似的項目組合在一起、對項目進行編號以及使用標題和提示文本。
簡化視覺認知，讓用戶能盡快“認識”界面，圖形元素符合用戶對真實世界的聯(lián)想，更符合用戶對于界面的慣性認知。
在 UI 設計中使用隱喻可以讓用戶在現(xiàn)實世界和數(shù)字體驗之間建立聯(lián)系。
好的隱喻會與用戶腦海中真實世界的過去體驗產生強烈的聯(lián)系。隱喻常用于使不熟悉的事物變得熟悉。
以桌面上的回收站為例，它包含已刪除的文件——但它不是真正的垃圾箱，它以一種可以幫助用戶更輕松地理解概念的方式進行可視化表示。
在為 UI 選擇隱喻時，選擇能夠讓用戶掌握概念模型最精細細節(jié)的隱喻。
例如，在詢問用于支付處理的信用卡詳細信息時，可以參考現(xiàn)實世界的實體卡作為示例。
視覺設計要讓用戶感受到是用戶在控制界面，而不是被界面所控制。
用戶應該始終能夠快速回溯他們正在做的任何事情。這允許用戶探索產品而不必擔心失敗，當用戶知道錯誤可以很容易地撤消時，這鼓勵了對不熟悉的選項的探索。
相反，如果用戶必須對他們采取的每一個動作都非常小心，這會導致探索速度變慢且令人不安。
當用戶錯誤地選擇系統(tǒng)功能時，“撤消”會非常有用。在這種情況下，撤消功能用作“緊急出口”，允許用戶離開不需要的狀態(tài)。
例如，當用戶意外刪除電子郵件時，Gmail 的通知消息帶有撤消選項。
不同技能水平的用戶應該能夠與不同水平的產品進行交互。不要為了新手或臨時用戶的易于使用的界面而犧牲專家用戶。
相反，要嘗試針對不同用戶的需求進行設計，因此，用戶是專家還是新手并不重要。
添加教程和解釋等功能對新手用戶非常有幫助。
一旦用戶熟悉了產品，用戶就會尋找快捷方式來加快常用操作的速度。
設計師應該讓有經驗的用戶使用快捷方式，從而為他們提供快速路徑。
作者：格格學姐
本文由 @空兩格 授權發(fā)布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Pexels，基于CC0協(xié)議。
蘭亭妙微(www.ieapo.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
在B端產品設計中，中后臺UI設計規(guī)范的建立對于提升設計效率、保證用戶體驗一致性以及優(yōu)化開發(fā)流程至關重要。本文從設計規(guī)范的意義、原子設計理論、后臺設計系統(tǒng)搭建以及Design Token應用實踐四個方面，詳細總結了B端中后臺設計的要點和方法，供大家參考學習。
今天從以下4個方面，結合7年B端設計工作經驗，為大家分享原子設計理論和中后臺設計系統(tǒng)搭建的應用實踐。
分別站在整個產品設計研發(fā)流程中各個角色的不同角度，在工作中可能會有以下“抱怨時刻”：
由此，體現(xiàn)出搭建設計規(guī)范的作用和意義：
① 產品側
?個產品不同分?多個團隊完成的時候，可以保證產品團隊使?同?份設計規(guī)范快速完成產品原型設計。保證可復?模塊的交互體驗的?致性。
② 設計側
通過設計規(guī)范去解決?部分需求，極?提?效率解放雙?，讓設計師能去做?些更發(fā)揮創(chuàng)意和想象?的設計。
③ 開發(fā)側
形成開發(fā)資產，可以提升研發(fā)效率，降低維護成本。開發(fā)?程師?需再重復開發(fā)同?個組件，只需要去組件庫?調?即可，配合業(yè)務邏輯，?效完成界?開發(fā)，做到開箱即?。
④ 測試側
標準化的設計規(guī)范，是測試?員最喜歡看到的。例如，設計規(guī)范規(guī)定彈窗 footer 區(qū)按鈕組居右，那么測試?員只要測到不居右，就可以給產品提優(yōu)化建議了。
設計規(guī)范中具像化的環(huán)節(jié)是設計組件化，最早可以追溯到?業(yè)?命時期，福特創(chuàng)造的流?線?產?式。福特將汽?分解成零部件，再把零部件模塊化組裝，這?創(chuàng)舉極?的提?了?產效率。
根據(jù)資料顯示，T型?是世界第?款?量使?通?零部件，并進??規(guī)模流?線裝配的汽?。這種?式極?地提?了T型??產效率，降低了?產成本。
1914年，福特已經可以做到93分鐘?產?輛汽?，?同期其他所有汽??商的?產能?總和也不及于此。
到了1920年代，T型?的價格甚?降到300美元?輛（問世之初T型?的售價僅需850美元，?同期的競爭對?則通常為2000-3000美元?輛）。
原子設計理論最初來源于化學領域，這一點從名字可以聽出來。在化學中，所有的物體都是由原?構成，原?組合構成分?，分?組合構成有機物，最終形成了宇宙萬物。
2013年前端?程師 Brad Forst將此理論運?在界?設計中，形成?套設計系統(tǒng)，包含 5 個層?：原?、分?、組織、模板、??。當公司的業(yè)務產品逐漸擴?時，我們就需要制定?套完整的設計系統(tǒng)，提升設計和開發(fā)的協(xié)作效率，統(tǒng)?所有設計師的輸出物。
總之，將設計拆分成?些基本元素，例如?個按鈕、?個彈窗，再根據(jù)業(yè)務需求、產品邏輯重新組裝，形成最終的產品，這就是原?設計理論（組件化設計），區(qū)別于整體設計制造的?種新的?作流程。
原?是物質的基礎組成部分，是構成設計系統(tǒng)的最基礎元素。
在界?中以「元素」的形式存在，例如：顏?、?字、圖標、分割線、間距、圓?、陰影等。
色彩體系
中后臺產品的?彩體系主要分為3類：品牌?、功能?、中性?。
B端網站體現(xiàn)理性和效率特性，往往會使中性色占據(jù)九成以上，應用在背景、邊框、文本和分割線。下圖為顏色定義示例（考慮暗色模式）。
文字體系
B端產品的?字系統(tǒng)設計?標：增強閱讀體驗、提升信息獲取效率，字體是體系化界?設計中最基本的構成之?。
字體的??、字重、?彩區(qū)分體現(xiàn)界?信息的層級關系。
下圖為字階應用規(guī)范示意：
陰影、圓角、線條
陰影：在B端界?中，有些特殊的元素會使?到陰影，從陰影中我們可以看出物體距離平?的?度，距離平?越?的物體陰影越?；
圓角：從直?到圓?給?帶來從嚴謹冰冷到柔和親切的?理感受，在B端界? 中，常?2-8px圓?；
線條：分割模塊及輔助定位。
在界?中，分?是按照規(guī)律組合起來的元素，如：按鈕、搜索框、選擇器等。
以按鈕為例，?字、?塊、圖標和間距這些抽象的原?產?關聯(lián)組合成分?：圖標、?字傳達含義；顏?、圓?傳遞特性；間距、尺?定義規(guī)范。
分?+原?組合成更復雜和可拓展的組織（區(qū)塊組件），如搜索區(qū)、卡?列表區(qū)、表單區(qū)、數(shù)據(jù)統(tǒng)計區(qū)等。
由原?+分?+組織構成的更復雜更具拓展性的模塊，構成了典型??模板，如列表?、詳情?、異常?、Dashboard等。模板在設計系統(tǒng)中承載的作?就是保證設計?案在原型各階段的?致性，專注??底層架構，并?具體??。
帶業(yè)務邏輯的場景案例，如標注場景、權限管理、詳情設置等，將??模板填充真實的?字、圖?后形成??，即帶交互邏輯的?保真原型圖，真實內容使設計系統(tǒng)有了“?命” 。
雖然通過設計規(guī)范可以對產研流程提效，但在開發(fā)還原中還是會經常遇到?些棘?的問題。
開發(fā)還原準確度難以保證，走查幾輪還有有細節(jié)問題沒有修復；
領導要求開發(fā)暗色模式，或者客戶要求換一套主題色，找到替換的工作量巨大；
設計一處變更，涉及多個頁面模塊，維護工作量大。
為了解決和優(yōu)化上述的問題，Design Token 應運??。它可以解決產品設計和開發(fā)過程中的細節(jié)、變更和?格?致性的問題，有效提?產研團隊設計質量和協(xié)作效率。
“Token”原本的意思是“令牌，指令”，與 Design 連在?起指“設計變量”。在?程邏輯中?于?戶身份與服務器端進?驗證，?在設計體系中，Design Token 則可以簡單理解為封裝的視覺樣式參數(shù)。它通過規(guī)定樣式參數(shù)，并通過?套符合設計師、?程師理解的統(tǒng)?的命名規(guī)則，為這些樣式參數(shù)的定義名稱。
Design Token優(yōu)勢
設計語義更易理解：幫助設計師和開發(fā)建?統(tǒng)?語?，設計?案更加?致。從下到上的Design Token命名思路。
主題?膚?鍵替換：主題?膚的替換可以?在兩個維度，?是淺?模式和暗?模式的替換，?是不同品牌?之間的替換。我們可以將不同主題的同?個場景下的顏?使?同?個 Token 命名，達到?鍵換膚的效果適配不同客戶?案。
設計變更?效維護：替代傳統(tǒng)?作流?鍵替換效果。例如修改二級文本的顏色，傳統(tǒng)工作流需要先修改設計規(guī)范，修改設計稿，然后輸出給開發(fā)，開發(fā)逐一更新代碼，完成后提交給設計師進行走查驗收。而當使用Token之后，只需要更新Token參數(shù)，就可以直接導出JSON給開發(fā)，一鍵自動更新。提高效率不止一點點。
設計效果精準還原：代碼編輯器?動化提示顏?選擇，如不正確則產?報錯。
總結一下使用Token開發(fā)的優(yōu)勢：
第一步：提煉token元素；
第二步：定義命名規(guī)則；
第三步：整理Design Token資產表；
第四步：開發(fā)與應用。
接下來具體說說如何為Design Token命名，命名方式目前并沒有絕對統(tǒng)一的要求，不過有一定的邏輯規(guī)則，可以由設計師找前端開發(fā)一起商量出一個都能通俗易懂便于理解的命名規(guī)則，
舉個例子：
1.Token名稱由大到小排序，中間用“-”分隔；
2.Token前綴可自定義添加公司簡稱，如“–el-xx” 、“–ant-xx”、“–td-xx”。
為了更好的統(tǒng)一規(guī)范，應用Token，建議成熟的互聯(lián)網公司設計團隊搭建自己的低代碼平臺。一鍵更換主題，盡在指尖。
以上就是從四個方面歸納的B端設計規(guī)范定義和總結，希望對你有所幫助！
本文由人人都是產品經理作者【Clippp】，原創(chuàng)/授權 發(fā)布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協(xié)議。
蘭亭妙微(www.ieapo.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
藍藍設計的小編 http://www.ieapo.cn
