在當(dāng)今設(shè)計(jì)行業(yè)，設(shè)計(jì)師不僅需要具備專(zhuān)業(yè)技能，更要與業(yè)務(wù)目標(biāo)緊密結(jié)合，以提升設(shè)計(jì)的實(shí)際效用。本文探討了如何通過(guò)設(shè)計(jì)洞見(jiàn)來(lái)識(shí)別客戶(hù)需求，進(jìn)而優(yōu)化設(shè)計(jì)過(guò)程。
好的設(shè)計(jì)師不僅僅要有專(zhuān)業(yè)能力，更重要的是與產(chǎn)品達(dá)到同頻，最終更好賦能業(yè)務(wù)指標(biāo)達(dá)成。
目前設(shè)計(jì)行業(yè)的現(xiàn)狀，大部分設(shè)計(jì)師還停留在設(shè)計(jì)思維的角度，存在一些和業(yè)務(wù)格格不入的情況，只關(guān)注好不好看，做一個(gè)交互原型的美化者…
自己做了很多，但是與實(shí)際脫節(jié)。出了很多個(gè)方案，產(chǎn)品（或運(yùn)營(yíng)/商務(wù)伙伴）覺(jué)得沒(méi)什么變化；打磨了很多細(xì)節(jié)和創(chuàng)新點(diǎn)，產(chǎn)品卻只想快速上線(xiàn)……
設(shè)計(jì)師自己的工作被各種“非專(zhuān)業(yè)”的指導(dǎo)意見(jiàn)干擾；而其他職崗伙伴眼里，我們的付出，卻變成了一種“設(shè)計(jì)師的自High”。
究其原因，還是把以用戶(hù)思維去進(jìn)行設(shè)計(jì)。
想要改變這樣的狀態(tài)，最核心的是思維轉(zhuǎn)變，從技能導(dǎo)向的思考方式變?yōu)閮r(jià)值導(dǎo)向的思考方式。
本文主要從講述，如何通過(guò)方法，在項(xiàng)目進(jìn)入期獲得有效設(shè)計(jì)洞見(jiàn)，提高設(shè)計(jì)效用，帶來(lái)客戶(hù)價(jià)值（用戶(hù)價(jià)值）。
先舉一個(gè)例子：如何做一個(gè)新款剃須刀產(chǎn)品？
飛利浦這些大公司，給出的答案是 更好的刀頭，更貼合面部，更安全和更容易清洗，一個(gè)黑灰塑料材質(zhì)、工業(yè)風(fēng)格的“更好用”的剃須刀確實(shí)誕生了。
但是有一個(gè)很有意思的公司，給出了另一份答案：極簡(jiǎn)造型、合金材質(zhì)、超 mini 尺寸和豐富配色，最重要的是：
于是 2019 年，這個(gè)疫情開(kāi)始的時(shí)間，這家剃須刀橫空出世。
這款產(chǎn)品獲得成功的原因，本質(zhì)上就是產(chǎn)品的設(shè)計(jì)者帶著更高、更廣的視角，洞見(jiàn)了“剃須刀不僅是一個(gè)工具，它更可以成為一種禮物”這個(gè)更深層次的客戶(hù)需求，打破現(xiàn)有市場(chǎng)概念，獲得成功。
——如果說(shuō)，設(shè)計(jì)洞察是發(fā)現(xiàn)和理解問(wèn)題的能力，是設(shè)計(jì)師在研究和解決問(wèn)題時(shí)所產(chǎn)生的觀察力和創(chuàng)造力。那么設(shè)計(jì)洞見(jiàn)可以幫助設(shè)計(jì)師更好地識(shí)別問(wèn)題、提出創(chuàng)新解決方案，并為設(shè)計(jì)師提供思考問(wèn)題和做出決策的指導(dǎo)。
Brown.Tim在《設(shè)計(jì)思考改造世界》中說(shuō)：”未來(lái)的設(shè)計(jì)師將扮演科技的詮釋者（洞見(jiàn)能力）,人性的引領(lǐng)者（觀察能力）,感性的創(chuàng)造者與品位的營(yíng)造者（同理心）的角色”。
通過(guò)設(shè)計(jì)洞見(jiàn)，可以讓我們看更高、想更全， 與業(yè)務(wù)貼合更緊密，讓設(shè)計(jì)得到認(rèn)可，產(chǎn)生業(yè)務(wù)共鳴，賦予用戶(hù)/客戶(hù)價(jià)值，才能讓設(shè)計(jì)變的更有價(jià)值。
接下來(lái)我們將通過(guò)一一探索獲得洞見(jiàn)的三個(gè)階段。
洞察階段的核心，是獲得現(xiàn)象背后的動(dòng)因。是一個(gè)獲得信息與問(wèn)題的階段
產(chǎn)品的設(shè)計(jì)產(chǎn)出是一個(gè)抽象到具象化的過(guò)程，在設(shè)計(jì)和迭代的過(guò)程中，會(huì)經(jīng)歷非常多的流程。而大多數(shù)的設(shè)計(jì)洞見(jiàn)有效過(guò)去在更前置的節(jié)點(diǎn)，才能產(chǎn)生更有效的價(jià)值。
所以我們首先做的是：“提升設(shè)計(jì)的主動(dòng)性”，在項(xiàng)目的進(jìn)入期最大化實(shí)現(xiàn)設(shè)計(jì)洞見(jiàn)的價(jià)值。
項(xiàng)目進(jìn)入期通常會(huì)有一個(gè)通病，即問(wèn)題泛化，無(wú)法具象。在一個(gè)比較“泛”的問(wèn)題下，挖掘目的/目標(biāo)，找到問(wèn)題最簡(jiǎn)單的辦法就是“調(diào)查分析”：了解行業(yè)生態(tài)與業(yè)務(wù)背景，確定或推測(cè)自身產(chǎn)品的發(fā)展方向，分析定位與關(guān)注指向-Pointer（即當(dāng)下會(huì)產(chǎn)生哪些具有指向性的任務(wù)方向）。
這個(gè)階段，我們的主要目的是通過(guò)最初始的源頭數(shù)據(jù)，正確的了解業(yè)務(wù)或者項(xiàng)目的背景，避免因信息傳遞所產(chǎn)生的認(rèn)知誤差，以免發(fā)生“指向”偏差。而要做到這一點(diǎn)，洞察就不能僅僅停留在表面的觀察，詢(xún)問(wèn)，記錄和數(shù)據(jù)分析，而要隨時(shí)通過(guò)聯(lián)想和反思來(lái)回歸本質(zhì)——客戶(hù)（用戶(hù)）和場(chǎng)景。調(diào)查中獲得的數(shù)據(jù)只有放在合適的情境中才能獲得準(zhǔn)確的解讀。
1）知識(shí)準(zhǔn)備
了解各種市場(chǎng)調(diào)研的方法與過(guò)程，對(duì)調(diào)研方法進(jìn)行分類(lèi)。
如下圖所示，（戴力農(nóng)《設(shè)計(jì)調(diào)研》）橫軸區(qū)分了該方法得到的數(shù)據(jù)是客觀的（人們的行為）還是主觀的（人們的目標(biāo)和觀點(diǎn)），縱軸區(qū)分了該方法的類(lèi)型是定性的還是定量的。
2）選擇正確的調(diào)研辦法
不同的產(chǎn)品生命周期，對(duì)應(yīng)不同的調(diào)研方法，根據(jù)產(chǎn)品的不同時(shí)期選擇合適屬性的調(diào)研辦法。
互聯(lián)網(wǎng)設(shè)計(jì)師的常規(guī)調(diào)研手法，受困于資源，多是在桌面進(jìn)行。我們通過(guò)二手資料研究、競(jìng)品和線(xiàn)上走查獲得問(wèn)題，進(jìn)行虛擬對(duì)象的研究，極易發(fā)生偏差。
拓新場(chǎng)景和成長(zhǎng)初期，通常資源緊張且缺乏具象客戶(hù)，很難進(jìn)行大樣本調(diào)研數(shù)據(jù)挖掘。對(duì)于設(shè)計(jì)師來(lái)說(shuō)，在了解業(yè)務(wù)信息，對(duì)稱(chēng)業(yè)務(wù)方向時(shí)可以依賴(lài)其他職崗提供的資料進(jìn)行研究；但是對(duì)于設(shè)計(jì)息息相關(guān)的關(guān)鍵點(diǎn)，建議還是通過(guò)自己實(shí)地考察、焦點(diǎn)實(shí)驗(yàn)去獲取真實(shí)的體驗(yàn)信息。
成長(zhǎng)后期與成熟期，關(guān)鍵在于保證和提高產(chǎn)品質(zhì)量，縮短與頭部產(chǎn)品之間的差距，實(shí)現(xiàn)產(chǎn)品的高增長(zhǎng) 。大樣本的用戶(hù)與競(jìng)品調(diào)研可以幫助我們更可觀的看到真實(shí)的客戶(hù)需求。再輸入到我們的日常桌面研究中去。
3）掌握信息收集、數(shù)據(jù)統(tǒng)計(jì)分析方面的知識(shí)
4）了解調(diào)研的流程
確定調(diào)研目標(biāo) → 制定調(diào)研計(jì)劃 → 準(zhǔn)備調(diào)研材料&環(huán)境 → 邀請(qǐng)調(diào)研對(duì)象&執(zhí)行調(diào)研過(guò)程 → 分析整理信息與數(shù)據(jù) → 輸出調(diào)研結(jié)果。
調(diào)研的實(shí)際操作流程在數(shù)據(jù)采集和調(diào)研分析方法中已經(jīng)涉及的比較多了，也有很多好的執(zhí)行案例可供我們學(xué)習(xí)與參考。
得到大量信息，進(jìn)行吸收、理解和處理后，我們將收獲大量的問(wèn)題。接下來(lái)就是如何解決問(wèn)題。
定位價(jià)值是洞見(jiàn)的關(guān)鍵階段，是能給業(yè)務(wù)帶來(lái)價(jià)值的核心，是可以改變客戶(hù)（用戶(hù)）習(xí)慣和行為的關(guān)鍵博弈。
那么如何定位價(jià)值呢？
1）問(wèn)題整合，提煉與確認(rèn)指向
將調(diào)研獲得的問(wèn)題進(jìn)行歸納與整理，如簡(jiǎn)單的 Card Sorting ，確認(rèn)所有問(wèn)題的核心指向（Pointer）。
接下來(lái)就需要不停的切換指向，并深入每個(gè)關(guān)鍵 key 下進(jìn)一步拆解，確定你收獲的是否是一個(gè)真正且重要的 Pointer。
EG海底撈▽
餐廳高峰期經(jīng)常人滿(mǎn)為患，排隊(duì)體驗(yàn)差。常規(guī)餐廳的做法：約束更快的出餐、收臺(tái)，拆分更多的餐位，引導(dǎo)拼桌服務(wù)等等等等..短期可能會(huì)帶來(lái)改變，但是達(dá)到一個(gè)極限點(diǎn)以后，就很難再提升了。
類(lèi)似的場(chǎng)景還有曾經(jīng)的外賣(mài)小哥：30 分鐘以?xún)?nèi)還能更快嗎？答案是：很難。
那怎么讓客人愿意多等待一點(diǎn)，或者不覺(jué)得“等待完全是無(wú)價(jià)值無(wú)意義的”？
海底撈選擇在你排隊(duì)等待的時(shí)候，提供免費(fèi)美甲、護(hù)手、零食等等各種周到服務(wù)，讓客人等待的過(guò)程中不至于無(wú)事可做。獲得了認(rèn)可，贏得了口碑。
如果你留心觀察，你會(huì)發(fā)現(xiàn)海底撈的標(biāo)志也是用了一個(gè)打招呼的氣泡Hi，來(lái)強(qiáng)調(diào)服務(wù)為先的品牌定位，解決的是情感需求中的「過(guò)程體驗(yàn)」。
2）PDS（問(wèn)題-檢測(cè)-研究）調(diào)查分析
PSD 調(diào)查分析的核心思想，是調(diào)查客戶(hù)（用戶(hù)）與預(yù)期（行為/認(rèn)知）的偏差，或不滿(mǎn)與問(wèn)題來(lái)發(fā)現(xiàn)洞見(jiàn)。
EG BBDO反煙推廣 ▽
BBDO 的英國(guó)公司層接到過(guò)這樣一個(gè)推廣任務(wù)：是讓年輕人，特別是十幾歲的小女孩兒戒煙。
其實(shí)這個(gè)問(wèn)題特別棘手。一方面，吸煙是一個(gè)生理上癮的事情，要戒掉很困難；另一方面，吸煙最大的問(wèn)題是有害健康，但是對(duì)于年輕人來(lái)說(shuō)在這個(gè)角度的感觸不深，很難起到效果。用常態(tài)的思考模式似乎很難找到正確的解決方案，但是借助洞見(jiàn)以后就不一樣了。
通過(guò)了解更多事實(shí)，看目標(biāo)群體關(guān)注什么，哪些問(wèn)題對(duì)我們要實(shí)現(xiàn)的目標(biāo)有影響。在這個(gè)案例里，BBDO的做法是派了一個(gè)年輕的女助理在購(gòu)物區(qū)找了一家咖啡館，連著5天坐在那里聽(tīng)那里的女孩兒在聊些什么。
結(jié)果這5天內(nèi)她就發(fā)現(xiàn)，這些十幾歲的女生大部分聊的是買(mǎi)衣服、做頭發(fā)、選什么樣的指甲油和減肥藥，怎么整容等等。當(dāng)女助理把這些內(nèi)容列在自己的本子上的時(shí)候，洞見(jiàn)就自己呼之欲出了：原來(lái)對(duì)于這些無(wú)所事事，十幾歲的年輕女孩而言，沒(méi)有什么比她們看起來(lái)漂亮更重要了。
因此，你不需要告訴她吸煙可能縮短壽命，你只要告訴她一件事情：“吸煙會(huì)讓你變得難看”，就足夠讓她戒煙了。
所以，想要獲得洞見(jiàn)，就去調(diào)研目標(biāo)群體真正關(guān)注的事情。當(dāng)你通過(guò)調(diào)研發(fā)現(xiàn)真正的問(wèn)題時(shí)，洞見(jiàn)往往就會(huì)產(chǎn)生。
3）規(guī)避技能導(dǎo)向
設(shè)計(jì)的職崗角色是單薄的。我們一定要帶著指針與方案，多職崗評(píng)估價(jià)值與可執(zhí)行度，這是一個(gè)設(shè)計(jì)前期任務(wù)的過(guò)程。它的輸出可能為設(shè)計(jì)Demo、簡(jiǎn)單的筆記、方案的列表，或者是一個(gè)說(shuō)明效果的故事版……不一定具備完整的落地性，但是可以讓伙伴更好的理解你的觀點(diǎn)。
設(shè)計(jì)的解決方案要從起心動(dòng)念、貫穿至產(chǎn)、研、運(yùn)營(yíng)甚至上市宣傳的全路徑方案。
在分析階段我們通過(guò)“3步走”的視角思維，明確了任務(wù)重點(diǎn)同時(shí)幫助我們明確不同指針的優(yōu)先級(jí)。
設(shè)計(jì)師要考慮的維度不僅僅在用戶(hù)體驗(yàn)層面，更應(yīng)在執(zhí)行時(shí)候要考慮業(yè)務(wù)的實(shí)際需求，考慮上下游不同職能的工作內(nèi)容，始終保持全局與系統(tǒng)的思維，要從客戶(hù)價(jià)值出發(fā)，回落到企業(yè)成本中去。
通過(guò)設(shè)計(jì)洞見(jiàn)，從更本質(zhì)的層面去洞悉問(wèn)題，重新定義和設(shè)計(jì)任務(wù)。
與業(yè)務(wù)產(chǎn)生共鳴才是好的設(shè)計(jì)。
讓你的設(shè)計(jì)方案保持在更高、更廣、更全局的維度。真正融入和助力業(yè)務(wù)，提升設(shè)計(jì)的效用。讓“提升體驗(yàn)”這件事真正落地。
改變我們看世界的方式，亦改變世界看待我們的方式。
作者：張一
本文由 @群核科技用戶(hù)體驗(yàn)設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖由作者提供
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.jsyqsx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
我之前說(shuō)過(guò)要寫(xiě)一系列專(zhuān)門(mén)針對(duì)電商的三大構(gòu)成的文章的，而在上篇文章中我已經(jīng)給大家梳理了一篇關(guān)于色彩的文章：六個(gè)步驟細(xì)說(shuō)電商banner圖設(shè)計(jì)之色彩的奧秘，那么今天呢，我就接著要給大家講一篇關(guān)于平面構(gòu)成的文章好了。
在講之前，我先給大家列一個(gè)內(nèi)容大綱：
一、平面構(gòu)成的含義是什么？
二、電商Banner圖是由什么組成的？
三、我們?cè)撊绾卧贐anner圖設(shè)計(jì)中運(yùn)用平面構(gòu)成呢？
四、平面構(gòu)成之于電商Banner圖的意義是什么？
五、總結(jié)
注：前半部分是給大家講解的基礎(chǔ)知識(shí)，后半部分是運(yùn)用這些基礎(chǔ)知識(shí)結(jié)合實(shí)例講解，所以建議從頭到位耐心看完哦，需要些時(shí)間消化（經(jīng)濟(jì)基礎(chǔ)決定上層建筑嘛，前面不看后面也就看不懂了），接下來(lái)我們一個(gè)個(gè)問(wèn)題來(lái)解剖：
百度百科的解釋是：平面構(gòu)成是視覺(jué)元素在二次元的平面上，按照美的視覺(jué)效果，力學(xué)的原理，進(jìn)行編排和組合，它是以理性和邏輯推理來(lái)創(chuàng)造形象、研究形象與形象之間的排列的方法，是理性與感性相結(jié)合的產(chǎn)物。
而我的理解是：平面構(gòu)成主要是在二維空間運(yùn)用點(diǎn)、線(xiàn)、面結(jié)合一定的規(guī)律所形成的一種視覺(jué)語(yǔ)言，他可以是抽象的，也可以是具象的，可以是感性的，也可以是理性的，同時(shí)它也不是獨(dú)立存在的，而是伴隨著色彩／肌理／光影等而存在的。基本上世間萬(wàn)物，所有我們接觸到的或無(wú)法接觸到的，看得見(jiàn)的或看不見(jiàn)的事物里都有平面構(gòu)成的運(yùn)用和身影。
Banner組成要素包含4個(gè)方面：文案 、商品／模特、背景、點(diǎn)綴物（可有可無(wú)）。
而我在之前反復(fù)強(qiáng)調(diào)過(guò)的，Banner的作用是：宣傳／展示／廣而告之／準(zhǔn)確傳達(dá)信息。
在前面我們提到，平面構(gòu)成主要是在二維空間運(yùn)用點(diǎn)、線(xiàn)、面結(jié)合一定的規(guī)律所形成的一種視覺(jué)語(yǔ)言，而B(niǎo)anner中的所有元素（文案／商品或模特／背景／點(diǎn)綴物）其實(shí)都可以看作是平面構(gòu)成里的點(diǎn)線(xiàn)面這些構(gòu)成元素。
那么，接下來(lái)我們就需要了解3個(gè)有關(guān)平面構(gòu)成的概念了：
接下來(lái)，我們分別了解下這幾個(gè)概念：
它們之間的排列有下面這么幾種：分離／相切／重疊／透疊／結(jié)合／減缺／差疊／重疊。
舉幾個(gè)例子：
從所有元素（點(diǎn)線(xiàn)面）整體看，其構(gòu)成形式主要有重復(fù)、近似、漸變、變異、對(duì)比、集結(jié)、發(fā)射、特異、空間與矛盾空間、分割、肌理及錯(cuò)視等等。
下面我們分別來(lái)舉例說(shuō)明：
（1）重復(fù)
指在同一設(shè)計(jì)中，相同的形象出現(xiàn)過(guò)兩次以上，重復(fù)是設(shè)計(jì)中比較常用的手法，以加強(qiáng)給人的印象，造成有規(guī)律的節(jié)奏感，使畫(huà)面統(tǒng)一。所謂相同，在重復(fù)的構(gòu)成中主要是指形狀、顏色、大小等方面的相同。比如：
重復(fù)舉例：電影《滿(mǎn)城盡帶黃金甲》劇照
Banner舉例： 模特重復(fù)排列疊加到背景里，既是一種紋理也是一種模特展示的方式。
（2）近似
近似指的是在形狀、大小、色彩、肌理等方面有著共同特征，它表現(xiàn)了在統(tǒng)一中呈現(xiàn)生動(dòng)變化的效果。近似的程度可大可小，如果近似的程度大就產(chǎn)生了重復(fù)感。近似程度小就會(huì)破壞統(tǒng)一。比如：
近視舉例：臺(tái)灣的一對(duì)雙胞胎姐妹
小時(shí)候
長(zhǎng)大后
Banner舉例： 相同款式不同顏色的鞋子，大小不一的波點(diǎn)。
（3）漸變
是我常常聽(tīng)說(shuō)的一種效果，在自然界中能親身體驗(yàn)到，在行駛的道路上我們會(huì)感到樹(shù)木由近到遠(yuǎn)、由大到小的漸變。比如：
大小漸變舉例：故宮淘寶前段時(shí)間的表情包
（重復(fù)＋大小漸變）
舉個(gè)例子：
鞋子的排列方式。
背景的紋理形狀。
（4）對(duì)比
有時(shí)候是形態(tài)上的對(duì)比，有時(shí)是色彩和質(zhì)感的對(duì)比。對(duì)比可產(chǎn)生明朗、肯定、強(qiáng)烈的視覺(jué)效果，給人深刻的印象。比如：
對(duì)比舉例：買(mǎi)家秀和買(mǎi)家秀。。。
開(kāi)玩笑了，我們舉個(gè)正經(jīng)的例子吧：照片ps前后
Banner舉例：
（5）密集：
密集在設(shè)計(jì)中是一種常用的組織圖面的手法，基本形在整個(gè)構(gòu)圖中可自由散布，有疏有密。最疏或最密的地方常常成為整個(gè)設(shè)計(jì)的視覺(jué)焦點(diǎn)，他其實(shí)也是對(duì)比的一種情況，越密集的地方給人感覺(jué)距離越遠(yuǎn)，反之越近。
密集舉例：
日本波點(diǎn)女王草間彌生的作品
草間彌生
Banner舉例：
（6）發(fā)射
是一種常見(jiàn)的自然現(xiàn)象，太陽(yáng)四射的光芒就是發(fā)射的。發(fā)射具有方向的規(guī)律性，發(fā)射中心為最重要的視覺(jué)焦點(diǎn)，所有的形象均向中心集中，或由中心散開(kāi)，有時(shí)可造成光學(xué)動(dòng)感，會(huì)產(chǎn)生爆炸的感覺(jué)，有強(qiáng)烈的視覺(jué)效果。
發(fā)射舉例：星軌／水波／觀世音菩薩背后自帶的光環(huán)
水波
星軌（攝影）
每次觀世音菩薩出場(chǎng)總是會(huì)自帶光環(huán)（大家小時(shí)候應(yīng)該都比較熟悉這些畫(huà)風(fēng)了吧，有點(diǎn)俗氣。。）
Banner舉例：放射線(xiàn)，使得畫(huà)面聚焦到中間部分內(nèi)容。
（7）特異
是指構(gòu)成要素在有次序的關(guān)系里，有意違反次序，使少數(shù)個(gè)別的要素顯得突出，以打破規(guī)律性。
特異舉例：其實(shí)各種類(lèi)似于連連看的游戲，就是這么個(gè)原理
Banner舉例： 一家人站成一排，個(gè)頭比較小的那一個(gè)就給人一種特異和俏皮的感覺(jué)，使畫(huà)面不那么單調(diào)。
（8）空間
矛盾空間舉例：前段時(shí)間非常流行的一款游戲《紀(jì)念碑谷》。
空間感Banner舉例：畫(huà)面中的元素可以假想為一些有大有小的點(diǎn)，然后按一定透視空間規(guī)律擺放（近大遠(yuǎn)小）。
由陰影營(yíng)造的空間感
（9）分割
把整體分成小的部分。比如：
分割舉例：來(lái)自大自然的梯田
分割Banner舉例： 不同比例大小的色塊組成Banner的背景。
商品的排列也可以起到分割畫(huà)面的作用。
（10）肌理
又稱(chēng)質(zhì)感，由于物體的材料不同，表面的排列、組織、構(gòu)造等不同，因而產(chǎn)生粗糙感、光滑、軟硬感。比如：
肌理舉例：木材等
肌理Banner舉例： 背景采用噴墨＋涂色的方式形成了一種很時(shí)尚的紋理。
（11）錯(cuò)視
因空間距離或周?chē)h(huán)境所造成的視覺(jué)差。主要有下面幾種：
1.繆勒—萊依爾錯(cuò)視
圖中兩條線(xiàn)是等長(zhǎng)的，由于上下線(xiàn)段兩端的箭頭方向相反，上線(xiàn)段的箭頭占據(jù)的空間大，所以上面的線(xiàn)顯的較長(zhǎng)。
2.垂直線(xiàn)與水平線(xiàn)的錯(cuò)視
大多數(shù)人往往把垂直線(xiàn)看的比水平線(xiàn)要長(zhǎng)，這是高估的錯(cuò)覺(jué)。在水平線(xiàn)長(zhǎng)度為8-10mm時(shí)，這種錯(cuò)覺(jué)最大。
3.透視錯(cuò)視
圖中的兩條線(xiàn)是相等的?？雌饋?lái)下面的要短，是因?yàn)橥敢暤腻e(cuò)覺(jué)。
4.正方形的錯(cuò)視
標(biāo)準(zhǔn)的正方形左右的邊看上去大于上下的邊。
5.黑白錯(cuò)視
圖中黑白線(xiàn)段，由于白線(xiàn)段明度大，具有膨脹的現(xiàn)象，所以看以來(lái)比黑線(xiàn)段長(zhǎng)。
6.由于圖形結(jié)構(gòu)的影響而產(chǎn)生的錯(cuò)視
圖中組成三、四、五邊形的邊長(zhǎng)都相等，但由于周長(zhǎng)和面積的不同，產(chǎn)生邊長(zhǎng)的不同。
7.對(duì)比錯(cuò)視
高個(gè)子和矮個(gè)子在一起，高的會(huì)顯的越高，矮的會(huì)顯的越矮。
錯(cuò)視舉例：比如虛實(shí)手繪拼接，比如有些攝影作品
這里要說(shuō)明的是，錯(cuò)視在一些視差動(dòng)畫(huà)的網(wǎng)頁(yè)頁(yè)面里運(yùn)用的會(huì)比較多一些，還有一些app的引導(dǎo)頁(yè)，這里Banner舉例的話(huà)可能也不太合適，不過(guò)也可以給大家看一下：
比如這個(gè)畫(huà)面里的黃色圓點(diǎn)，同樣的黃色圓點(diǎn)，在暗色背景上是很突出的，但在同樣是黃色的背景上就幾乎看不見(jiàn)了，但其實(shí)原點(diǎn)是沒(méi)變的，只是背景的顏色變了，就導(dǎo)致我們看到了不一樣的結(jié)果。
如下：
和諧統(tǒng)一／對(duì)比突出／對(duì)稱(chēng)／畫(huà)面平衡／視覺(jué)重心／節(jié)奏韻律
和諧統(tǒng)一：
元素與元素之間，或所有元素構(gòu)成的整體是一種協(xié)調(diào)的關(guān) 系，比如大?。伾L(fēng)格等的協(xié)調(diào)。
Banner舉例：整體的明亮色彩，搭配的雨滴小元素，以及雨傘產(chǎn)品和模特裝扮，左中右排版方式都看起來(lái)很協(xié)調(diào)統(tǒng)一。
對(duì)比突出：
即把2個(gè)質(zhì)或者量反差很大的元素放在一起，使人感覺(jué)主體鮮明突出，整體又活躍而統(tǒng)一，比如大?。瘮?shù)量／色彩／形狀的對(duì)比。
Banner舉例：紅色模特部分面積比較大，無(wú)論是色彩還是面積優(yōu)勢(shì)，都使得它在檸檬黃背景上特別突出。
對(duì)稱(chēng)：
假設(shè)在一個(gè)圖形中間畫(huà)一條垂直或水平線(xiàn)后，畫(huà)面的左右或上下2邊是可以完全重合的，則我們稱(chēng)之為對(duì)稱(chēng)。
Banner舉例：典型的對(duì)稱(chēng)構(gòu)圖咯，Bra就是一個(gè)對(duì)稱(chēng)的形狀。
畫(huà)面平衡：
即元素與元素之間，元素與整體之間的大小／形狀／數(shù)量／色彩／材質(zhì)等的分布與視覺(jué)上的平衡。
Banner舉例：左右兩邊色彩面積上是平衡的，但是數(shù)量和形狀上的略微差異，使得畫(huà)面不那么單調(diào)。
視覺(jué)重心：
通過(guò)對(duì)畫(huà)面中元素的數(shù)量／顏色／位置／大小／材質(zhì)等進(jìn)行處理，畫(huà)面中所出現(xiàn)的視覺(jué)焦點(diǎn)。
Banner舉例：模擬撕紙效果形成的破洞，有一種視覺(jué)聚焦的效果。
節(jié)奏韻律：畫(huà)面中的一種或多種元素按一定的規(guī)律排列，會(huì)產(chǎn)生音樂(lè)一般的旋律感。
Banner舉例： 鞋子擺放姿勢(shì)不一樣，產(chǎn)生了一種動(dòng)律感，使畫(huà)面不單調(diào)不呆板。
重點(diǎn)（高潮部分）來(lái)了！?。。?！
以上講了這么多知識(shí)點(diǎn)，那么結(jié)合這些知識(shí)點(diǎn)，我總結(jié)繪制了一些比較實(shí)用的Banner排版
樣式，如下圖所示：
以上呢，我就先總結(jié)這么多，其實(shí)所有的Banner版式都是大同小異的，因?yàn)槲覀兦懊嫣岬?，Banner是由文案／模特或商品／背景／點(diǎn)綴物組成的，而所有這些元素就相當(dāng)于我們平面構(gòu)成里的點(diǎn)線(xiàn)面，當(dāng)我們改變這些元素的角度／距離／大?。瘮?shù)量／樣式／顏色等，新的版式也就產(chǎn)生了，所以，大家不妨也試試看哦。
Banner中的所有元素其實(shí)都相當(dāng)于平面構(gòu)成里的點(diǎn)或線(xiàn)或面，而所有元素所組成的Banner畫(huà)面其實(shí)又是一種情緒和信息的表達(dá)，所以我們可以從下面4個(gè)方面去理解這個(gè)問(wèn)題：
當(dāng)我們拿到一個(gè)設(shè)計(jì)需求的時(shí)候，都會(huì)需要確定他的設(shè)計(jì)風(fēng)格，而這個(gè)風(fēng)格怎么來(lái)確定呢？就是要明白他的定位以及服務(wù)的人群是誰(shuí)，了解他們的興趣愛(ài)好，同時(shí)我們腦袋里會(huì)出現(xiàn)下面這幾個(gè)關(guān)鍵詞：熱鬧促銷(xiāo)／年輕活力／高冷大牌／時(shí)尚個(gè)性／規(guī)矩保守等
我們先看幾個(gè)Banner實(shí)例：
低價(jià)熱鬧促銷(xiāo)：畫(huà)面中會(huì)有有比較多的點(diǎn)綴物，也喜歡用大面積的暖色，其目的就是為了營(yíng)造熱鬧的氛圍，給人熱情有親和力的感覺(jué)，板式以上下或者居中排版的方式多點(diǎn)，這種方式的視覺(jué)也更聚焦一些。
所以熱鬧促銷(xiāo)的頁(yè)面可以考慮下面這些排版樣式：
年輕活力：這種主題的Banner設(shè)計(jì)其實(shí)跟熱鬧促銷(xiāo)的方法類(lèi)似，只是說(shuō)，這種畫(huà)面里的點(diǎn)綴元素或者模特樣式需要表現(xiàn)得顯得更加俏皮活力一些，色彩上也會(huì)比較艷麗或明亮，營(yíng)造一種青春活力的感覺(jué)，排版方式其實(shí)沒(méi)有什么特別的限制，發(fā)揮空間非常大。
所以年輕活力的頁(yè)面可以考慮下面這些排版樣式：
高冷大牌：這種主題的Banner設(shè)計(jì)重在體現(xiàn)一種一般人買(mǎi)不起，買(mǎi)了之后會(huì)顯得自己特別有優(yōu)越感的印象，那么畫(huà)面中就需要多留白，善用一些簡(jiǎn)潔的或有棱角的圖形設(shè)計(jì)，切忌用一些比較卡哇伊或太柔美復(fù)雜的線(xiàn)條，同時(shí)，商品或模特的品質(zhì)要高，總而言之就是給人一種很貴很高端的感覺(jué)（窮人買(mǎi)不起，有錢(qián)人買(mǎi)了有面子），這個(gè)跟低價(jià)熱鬧促銷(xiāo)是相反的。
所以高冷大牌的頁(yè)面可以考慮下面這些排版樣式：
當(dāng)我們?cè)谧鲆粋€(gè)banner的時(shí)候，如果沒(méi)有特別的要求，其實(shí)我們是有很多個(gè)方向選擇的，首先問(wèn)下自己你是想要突出什么信息呢？是突出商品呢？還是突出文字呢？還是突出整體的氛圍呢？還是強(qiáng)調(diào)整體的協(xié)調(diào)感呢？還是說(shuō)強(qiáng)調(diào)品牌呢？
一般來(lái)說(shuō)，一個(gè)好的Banner首先是要保證信息傳達(dá)準(zhǔn)確，然后再需要保證畫(huà)面的協(xié)調(diào)感和氛圍的。
那么我先給大家看幾個(gè)案例舉例：
強(qiáng)調(diào)品牌（模特也屬于品牌的一部分）
強(qiáng)調(diào)商品以及SALE
強(qiáng)調(diào)整體的氛圍（商品融入在氛圍當(dāng)中了）
強(qiáng)調(diào)SALE
比如大家可以看到我之前給大家總結(jié)的版式，基本上文案信息都是比較突出的，其次商品突出或者強(qiáng)調(diào)整體氛圍：
關(guān)于品牌這塊，可能是很多小商家目前不太重視，也覺(jué)得自己用不上的，但是各大電商平臺(tái)還有一些比較大的電商品牌都已經(jīng)有這種品牌意識(shí)了，所以不管你是在哪種團(tuán)隊(duì)里，不防也都了解一下。
我們可以從這幾個(gè)方面去看待品牌這個(gè)問(wèn)題：風(fēng)格延續(xù)／品牌統(tǒng)一／風(fēng)格突破
品牌統(tǒng)一：天貓的貓頭形象，運(yùn)用于各個(gè)品類(lèi)的廣告當(dāng)中，這一創(chuàng)意既統(tǒng)一了品牌形象，又非常巧妙。
再比如初語(yǔ)：
一直以來(lái)，初語(yǔ)的所有模特，在眼睛那里都有一條白線(xiàn)，雖然不明白什么意思，但是給人印象特別深刻，形成那個(gè)了統(tǒng)一的品牌視覺(jué)形象，最后大家也看到了初語(yǔ)的新 logo，就是提取了眼睛那里的形象，新logo像下面這樣：
而它原來(lái)的logo是這樣的：
對(duì)比發(fā)現(xiàn)，品牌形象更加統(tǒng)一了，也更有特色了（雖然會(huì)讓一些沒(méi)聽(tīng)過(guò)這個(gè)品牌的人以為它是賣(mài)面膜的，不過(guò)對(duì)于接觸過(guò)這個(gè)服裝品牌的人來(lái)說(shuō)還是很好理解的）。
風(fēng)格延續(xù)：這個(gè)在平臺(tái)的比較大型的活動(dòng)里里運(yùn)用較多，比如各個(gè)分會(huì)場(chǎng)的風(fēng)格延續(xù)（排版樣式保持一致，只是改變了顏色和品類(lèi)商品和文案等）
風(fēng)格突破：關(guān)于品牌的風(fēng)格突破，可能是因?yàn)樯婕暗狡放粕?jí)或者品牌定位的改變，所以需要在設(shè)計(jì)上配合這一策略，比如說(shuō)原先你面對(duì)的可能是青少年群體，但隨著時(shí)代的發(fā)展，你是繼續(xù)服務(wù)這些青少年群體跟著他們一起成長(zhǎng)轉(zhuǎn)型為服務(wù)于大齡青年呢？還是繼續(xù)服務(wù)新一代的青少年群體呢？這時(shí)候你的用戶(hù)群體改變了，當(dāng)然也就意味著風(fēng)格可能需要作出改變咯。
比如QQlogo形象的升級(jí)：
對(duì)于這個(gè)話(huà)題，我們后面再抽出一篇文章單獨(dú)來(lái)講好了，大家感興趣嗎？
當(dāng)一個(gè)Banner在滿(mǎn)足了前面幾個(gè)要求的情況下，如果有能力的話(huà)，我們當(dāng)然還是要做到達(dá)到視覺(jué)美感的要求的，那么從這個(gè)角度看，平面構(gòu)成之于Banner設(shè)計(jì)的意義是什么呢？
我們可以看下下面幾個(gè)關(guān)鍵詞：平衡畫(huà)面／視覺(jué)沖擊力／畫(huà)面不單調(diào)／富有創(chuàng)意等。
平衡畫(huà)面：左中右排版
視覺(jué)沖擊力：放射線(xiàn)，中心聚焦
畫(huà)面不單調(diào)：將產(chǎn)品的方向或顏色做一些不規(guī)則的排列，避免乏味
富有創(chuàng)意：擬人化處理畫(huà)面，營(yíng)造一種身臨其境的場(chǎng)景感
以上，我分別給大家講了這幾個(gè)知識(shí)點(diǎn)：
一、平面構(gòu)成的含義是什么？
二、電商Banner圖是由什么組成的？
三、我們?cè)撊绾卧贐anner圖設(shè)計(jì)中運(yùn)用平面構(gòu)成呢？
四、平面構(gòu)成之于電商Banner圖的意義是什么？
到此，平面構(gòu)成之于Banner設(shè)計(jì)的奧秘我就講完了，這次的內(nèi)容量非常大，估計(jì)夠你們消化不止一周了，而我也沒(méi)有分為上下篇來(lái)寫(xiě)，原因有二：一方面是跟我自己的性格有關(guān)，我不太習(xí)慣分篇來(lái)講一個(gè)知識(shí)點(diǎn)，一個(gè)完整的知識(shí)點(diǎn)不管從哪里切斷我都會(huì)感覺(jué)不舒服，就像你吃一個(gè)東西吃得正爽，卻被別人告知說(shuō)：“另一半要留著下次再吃哦”，雖然這樣子可以增加大家對(duì)下一篇文章的期待，但也會(huì)感覺(jué)不爽吧（不過(guò)為了大家不要吃撐了最好是收藏起來(lái)或轉(zhuǎn)發(fā)出去，以便后面再細(xì)細(xì)看）。
本文由 @做設(shè)計(jì)的面條 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
蘭亭妙微(www.jsyqsx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
在 ToB 系統(tǒng)中，跳轉(zhuǎn)場(chǎng)景的合理分類(lèi)和設(shè)計(jì)對(duì)用戶(hù)體驗(yàn)至關(guān)重要。不同的跳轉(zhuǎn)方式（如當(dāng)前頁(yè)刷新或新開(kāi)標(biāo)簽頁(yè)）直接到影響用戶(hù)的操作效率和系統(tǒng)性能。本文將從分類(lèi)、設(shè)計(jì)建議以及用戶(hù)體驗(yàn)的角度，深入探討如何優(yōu)化 B 端系統(tǒng)中的跳轉(zhuǎn)場(chǎng)景。
金蝶云·星辰聚焦小型企業(yè)在線(xiàn)經(jīng)營(yíng)和數(shù)字化管理，，提供財(cái)務(wù)云、稅務(wù)云、進(jìn)銷(xiāo)存云、訂貨商城、費(fèi)用報(bào)銷(xiāo)等SaaS服務(wù)，支持小型企業(yè)拓客開(kāi)源、智能管理、實(shí)時(shí)決策，是一款適合小微型企業(yè)的云端財(cái)務(wù)進(jìn)銷(xiāo)存管理軟件
1.1.1. 工作臺(tái)
1.1.2. 目錄頁(yè)
1.1.3. 列表頁(yè)
1.1.4. 新建頁(yè)
1.1.5. 詳情頁(yè)
1.1.6. 待辦待閱
1.1.7. 幫助系統(tǒng)
1.1.8. 系統(tǒng)后臺(tái)配置
金蝶云星空是金蝶面向事業(yè)部制、多地點(diǎn)、多工廠等運(yùn)營(yíng)協(xié)同與管控型企業(yè)及集團(tuán)公司，提供的一個(gè)通用ERP服務(wù)平臺(tái)
1.2.1. 工作臺(tái)
1.2.2. 列表頁(yè)
1.2.3. 新建頁(yè)
1.2.4. 詳情頁(yè)
1.2.5. 待辦帶閱
致遠(yuǎn)的智能表單管理系統(tǒng)，因權(quán)限不夠，只有部分頁(yè)面；但依然可以看到其結(jié)構(gòu)，也是系統(tǒng)內(nèi) Tab 頁(yè)簽跳轉(zhuǎn)
4.1.1. 列表頁(yè)
4.1.2. 新建頁(yè)
4.1.3. 詳情頁(yè)
4.1.4. 待辦待閱
4.1.5. 幫助系統(tǒng)
4.1.6. 系統(tǒng)后臺(tái)配置
直接菜單切換，無(wú)跳轉(zhuǎn)（前臺(tái)應(yīng)用配置，不需要跳轉(zhuǎn)頁(yè)面）
從用戶(hù)端進(jìn)入后臺(tái)配置，新開(kāi)頁(yè)簽
4.2.1. 列表頁(yè)
4.2.2. 新建頁(yè)
4.2.3. 詳情頁(yè)
騰訊的企業(yè)設(shè)計(jì)體系中，也包含了這一層設(shè)計(jì)規(guī)則（功能）
在 ToB 系統(tǒng)中，在不同場(chǎng)景下頁(yè)面的跳轉(zhuǎn)對(duì)于用戶(hù)體驗(yàn)至關(guān)重要。不同的跳轉(zhuǎn)方式，直接影響到用戶(hù)的操作效率和系統(tǒng)性能。
從用戶(hù)操作角度，可以將頁(yè)面的跳轉(zhuǎn)分為三類(lèi)「操作流程類(lèi)」「信息查詢(xún)」「系統(tǒng)配置類(lèi)」（端到端如 PC 端到移動(dòng)端，不在此次討論范圍）
1.1 操作流程跳轉(zhuǎn)
用戶(hù)在系統(tǒng)中進(jìn)行的具體操作，用戶(hù)執(zhí)行某個(gè)任務(wù)或業(yè)務(wù)流程，如數(shù)據(jù)的創(chuàng)建、編輯、審批等。通常目標(biāo)是推進(jìn)某個(gè)操作流程的完成。
場(chǎng)景：如新建或編輯某數(shù)據(jù)，收到待辦審批某流程等
1.2 信息查詢(xún)與查看類(lèi)跳轉(zhuǎn)
當(dāng)用戶(hù)需要查詢(xún)、查看或分析系統(tǒng)內(nèi)的數(shù)據(jù)和信息時(shí)，需要從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面，以獲取更多的詳細(xì)信息或進(jìn)行更深入的分析。
場(chǎng)景：如打開(kāi)某數(shù)據(jù)查看詳情，從工作臺(tái)查看詳細(xì)報(bào)表進(jìn)行數(shù)據(jù)分析，查看操作歷史或日志記錄等
1.3 系統(tǒng)配置與管理跳轉(zhuǎn)
涉及系統(tǒng)設(shè)置、用戶(hù)權(quán)限管理、插件配置等功能的跳轉(zhuǎn)，通常由管理員或有權(quán)限的用戶(hù)執(zhí)行，用于配置和管理系統(tǒng)的運(yùn)行環(huán)境和用戶(hù)權(quán)限。如管理員需要從用戶(hù)管理頁(yè)面跳轉(zhuǎn)到權(quán)限設(shè)置頁(yè)面
場(chǎng)景：如打開(kāi)后臺(tái)系統(tǒng)，配置系統(tǒng)參數(shù)或用戶(hù)權(quán)限
注：第三方系統(tǒng)跳轉(zhuǎn)、子域名跳轉(zhuǎn)屬于功能類(lèi)特殊場(chǎng)景，已涵蓋在下方業(yè)務(wù)場(chǎng)景中
以上三種分類(lèi)涵蓋了基本的頁(yè)面跳轉(zhuǎn)場(chǎng)景，但不夠具體，現(xiàn)按照以下具體場(chǎng)景，對(duì)競(jìng)品的跳轉(zhuǎn)方式展開(kāi)對(duì)比分析（注：彈窗屬于模態(tài)，不在此次范圍之內(nèi)）
跳轉(zhuǎn)方式名稱(chēng)太長(zhǎng)，簡(jiǎn)稱(chēng)為：
致遠(yuǎn)的系統(tǒng)沒(méi)有體驗(yàn)到完整的，只體驗(yàn)到部分「智能表單管理系統(tǒng)」
1）在同一個(gè)平臺(tái)或系統(tǒng)內(nèi)的信息，沒(méi)有其他特殊情況時(shí)，最好不要新開(kāi)瀏覽器 Tab 頁(yè)簽，這點(diǎn)泛微和金蝶保持了統(tǒng)一，都沒(méi)有新開(kāi)瀏覽器 Tab 頁(yè)簽；
2）跳轉(zhuǎn)后臺(tái)系統(tǒng)、或其他子系統(tǒng)、子域名或第三方平臺(tái)時(shí)，這時(shí)可以新開(kāi)「瀏覽器 Tab 頁(yè)簽」，展示其獨(dú)立完整信息結(jié)構(gòu)
如幫助系統(tǒng)，有些幫助以文檔、視頻或論壇的形式存在，使用獨(dú)立頁(yè)簽可以很好的呈現(xiàn)其完整性；這點(diǎn)「MK」「金蝶」「泛微」都做到了統(tǒng)一；
4.1 適合系統(tǒng)外跳轉(zhuǎn)的場(chǎng)景
4.1.1. 跨系統(tǒng)跳轉(zhuǎn)
4.1.2. 二級(jí)域名跳轉(zhuǎn)
4.1.3. 第三方集成跳轉(zhuǎn)
4.2 適合系統(tǒng)內(nèi)跳轉(zhuǎn)的場(chǎng)景
4.2.1. 頁(yè)面內(nèi)跳轉(zhuǎn)
4.2.2. 模塊間跳轉(zhuǎn)
4.2.3. 流程間跳轉(zhuǎn)
1.2.4. 系統(tǒng)設(shè)置與管理跳轉(zhuǎn)
5.1 新開(kāi)Tab頁(yè)簽
傳統(tǒng)的網(wǎng)頁(yè)瀏覽都是新開(kāi)瀏覽器標(biāo)簽頁(yè)的形式，實(shí)現(xiàn)內(nèi)容的并行獨(dú)立展示，從而避免跳轉(zhuǎn)和返回的問(wèn)題
優(yōu)點(diǎn)：實(shí)現(xiàn)內(nèi)容的并行、且獨(dú)立展示，從而避免跳轉(zhuǎn)和返回的問(wèn)題；可以保證用戶(hù)并行操作，方便信息間的對(duì)比、參考；適合獨(dú)立子系統(tǒng)，完整呈現(xiàn)系統(tǒng)內(nèi)容
缺點(diǎn)：打開(kāi)頁(yè)簽太多時(shí)會(huì)很耗性能，造成卡頓；也會(huì)造成用戶(hù)迷路，找不到之前的內(nèi)容
5.2 系統(tǒng)內(nèi) Tab 頁(yè)簽
在當(dāng)前頁(yè)內(nèi)，新增一行 tab，來(lái)承載內(nèi)容
優(yōu)點(diǎn)：系統(tǒng)內(nèi) Tab 頁(yè)，頁(yè)面是相互獨(dú)立的、互不干涉的，多窗口自由切換，并且信息保留在系統(tǒng)內(nèi)部，用戶(hù)的視覺(jué)動(dòng)線(xiàn)相對(duì)集中，交互操作成本更低
缺點(diǎn)：標(biāo)簽頁(yè)欄屬于框架層級(jí)，會(huì)影響原有的頁(yè)面結(jié)構(gòu)；且始終都會(huì)占據(jù)頁(yè)面位置，會(huì)進(jìn)一步壓縮屏幕縱向有效空間；在整體的統(tǒng)一性上，也需要綜合考慮使用
5.3. 抽屜
一般從右側(cè)劃出抽屜浮層，來(lái)承載內(nèi)容
優(yōu)點(diǎn)：在當(dāng)前頁(yè)面出現(xiàn)的抽屜浮層，可以避免頁(yè)面頻繁跳轉(zhuǎn)、以及頻繁返回帶來(lái)的頁(yè)面刷新導(dǎo)致用戶(hù)效率下降的問(wèn)題
缺點(diǎn)：會(huì)遮擋一部分上文內(nèi)容，無(wú)法會(huì)看；且抽屜寬度有限，無(wú)法承載更多內(nèi)容信息（不過(guò)有些抽屜支持放大/縮小 可以避免這個(gè)問(wèn)題）
ToB 的頁(yè)面跳轉(zhuǎn)方式，應(yīng)遵循完善的業(yè)務(wù)規(guī)則和使用邏輯，不能一刀切選擇一種方式（如一直新開(kāi)瀏覽器 Tab 頁(yè)簽）。最好允許用戶(hù)自定義跳轉(zhuǎn)方式，如在系統(tǒng)設(shè)置中提供選項(xiàng)，讓用戶(hù)選擇某些操作是當(dāng)前頁(yè)刷新還是新開(kāi)標(biāo)簽頁(yè)。這有助于滿(mǎn)足不同用戶(hù)的偏好，提高系統(tǒng)的靈活性和用戶(hù)滿(mǎn)意度。
在需要新開(kāi)多個(gè)標(biāo)簽頁(yè)的場(chǎng)景中，需要考慮瀏覽器的性能表現(xiàn)和用戶(hù)設(shè)備的資源消耗?？梢酝ㄟ^(guò)優(yōu)化加載速度、減少頁(yè)面資源占用等方式來(lái)提升用戶(hù)體驗(yàn)。
清晰的跳轉(zhuǎn)反饋、完善的路徑和返回機(jī)制
而無(wú)論是當(dāng)前頁(yè)刷新還是新開(kāi)Tab頁(yè)簽、系統(tǒng)內(nèi) Tab 頁(yè)簽，系統(tǒng)都應(yīng)在跳轉(zhuǎn)后給予用戶(hù)明確的反饋。比如加載進(jìn)度條、操作成功提示等，讓用戶(hù)始終知道自己的操作狀態(tài)。在復(fù)雜的跳轉(zhuǎn)路徑中，設(shè)計(jì)面包屑導(dǎo)航、返回按鈕或快捷鍵，有助于用戶(hù)快速找到跳轉(zhuǎn)路徑并返回到之前的操作頁(yè)面，避免跳轉(zhuǎn)迷失。
通過(guò)完善的業(yè)務(wù)規(guī)則和使用邏輯，靈活地結(jié)合用戶(hù)行為分析和個(gè)性化設(shè)置，有助于提升系統(tǒng)的整體用戶(hù)體驗(yàn)。在實(shí)際應(yīng)用中，還需時(shí)刻關(guān)注系統(tǒng)性能，確保在多標(biāo)簽頁(yè)和多終端跳轉(zhuǎn)的情況下，依然能保持流暢的用戶(hù)體驗(yàn)。
本文由 @宇相 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)
蘭亭妙微(www.jsyqsx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
天宇 交互設(shè)計(jì)及用戶(hù)體驗(yàn)
大部分APP都會(huì)有引導(dǎo)設(shè)計(jì)，以幫助新人快速上手。那你知道這些引導(dǎo)設(shè)計(jì)有哪些要求和方法嗎？這篇文章，我們看看作者整理的五種類(lèi)型，你們用的是哪一種呢？
1）定義
蒙層引導(dǎo)的特點(diǎn)是讓用戶(hù)將注意力聚焦到被圈定的某個(gè)特定功能上，不被其他內(nèi)容干擾；
通常出現(xiàn)在用戶(hù)首次操作時(shí)做全局引導(dǎo)，也會(huì)在產(chǎn)品的各個(gè)功能點(diǎn)等待用戶(hù)的觸發(fā)；根據(jù)內(nèi)容一次顯示一個(gè)或多個(gè)提示；
2）組成結(jié)構(gòu)
黑色蒙層+高亮內(nèi)容+內(nèi)容介紹（圖文/視頻）+操作引導(dǎo)；
3）使用規(guī)則
分為單頁(yè)面功能引導(dǎo)和多頁(yè)面多功能引導(dǎo)，單頁(yè)面引導(dǎo)全局信息量不能過(guò)多；多頁(yè)面引導(dǎo)控制在5步以?xún)?nèi)，提示契機(jī)保證用戶(hù)需要的時(shí)候出現(xiàn)，不做過(guò)多干擾；
4）使用場(chǎng)景
分類(lèi)場(chǎng)景：展示新產(chǎn)品/功能特色介紹（新功能上新的告知、特色重點(diǎn)功能宣傳）、產(chǎn)品/功能更新迭代（說(shuō)明界面中功能位置的改動(dòng)、服務(wù)內(nèi)容的變動(dòng)等）、操作行為引導(dǎo)（講解操作方式、體現(xiàn)特定的手勢(shì)交互劃分說(shuō)明界面的整體結(jié)構(gòu)）；
1）定義
引導(dǎo)頁(yè)出現(xiàn)在用戶(hù)首次打開(kāi)APP的時(shí)，在用戶(hù)使用產(chǎn)品前先給用戶(hù)營(yíng)造好產(chǎn)品的基調(diào)和氛圍，宣傳產(chǎn)品功能和亮點(diǎn)或告知用戶(hù)最核心的操作方式；
基本上由3-5個(gè)頁(yè)面組成，保證能帶給用戶(hù)新鮮感和吸引他們的注意力，否則對(duì)用戶(hù)來(lái)說(shuō)反而是干擾，只會(huì)直接選擇快速劃過(guò)；
2）組成結(jié)構(gòu)
文字介紹+圖片介紹+操作引導(dǎo)；
3）使用規(guī)則
引導(dǎo)頁(yè)最多不超過(guò)5頁(yè)；圖片介紹表達(dá)簡(jiǎn)單且符合真實(shí)的使用場(chǎng)景；盡量明確的操作引導(dǎo)查看下一步的操作，
4）使用場(chǎng)景
用戶(hù)首次啟動(dòng)APP，全局展示APP的整體功能架構(gòu)和大的功能模塊分類(lèi)
1）定義
用戶(hù)進(jìn)入使用某功能或某交互方式變化時(shí)，彈出彈窗予以解釋并介紹相應(yīng)的操作，屬于即時(shí)的強(qiáng)提醒方式；
彈窗引導(dǎo)更重，阻斷行更強(qiáng)，需考慮使用的場(chǎng)景和傳達(dá)內(nèi)容的重要程度；
2）組成結(jié)構(gòu)
彈窗+圖/文信息+操作按鈕；
3）使用規(guī)則
更多使用于單項(xiàng)服務(wù)的介紹；彈窗內(nèi)盡可能以圖文方式介紹，避免大片文字，內(nèi)容清晰明確，操作按鈕指代清晰；
4）使用場(chǎng)景
告知用戶(hù)有新功能上線(xiàn)（如何找到新功能、新功能如何使用，并提供直接鏈接跳轉(zhuǎn)去對(duì)應(yīng)服務(wù)）、變更功能提醒（功能變更后提示去哪找到）、告知用戶(hù)一些隱藏菜單的內(nèi)容（引導(dǎo)用戶(hù)使用）、以及查看/點(diǎn)擊等交互操作變更等；
1）定義
同樣是作為即使提醒的方式，作為引導(dǎo)提示、提醒提示、解釋提示，讓用戶(hù)快速了解此服務(wù)/功能的內(nèi)容
氣泡屬于輕量級(jí)的提示方式，打斷感弱，內(nèi)容傳遞量不大但聚焦；
2）組成結(jié)構(gòu)
彈窗+圖文信息+操作按鈕；
3）使用規(guī)則
彈窗內(nèi)盡可能以圖文方式介紹，避免大篇文字，內(nèi)容明確，操作按鈕指代清晰；
4）使用場(chǎng)景
聚焦在單一功能場(chǎng)景，更貼近某個(gè)服務(wù)的引導(dǎo)和告知，告知用戶(hù)有新功能上線(xiàn)、引導(dǎo)用戶(hù)使用、或告知用戶(hù)一些隱藏菜單的內(nèi)容，當(dāng)前提示內(nèi)容較為重要，且內(nèi)容較多，建議使用彈窗。
1）定義
操作式引導(dǎo)會(huì)結(jié)合產(chǎn)品實(shí)際使用場(chǎng)景，一步一步地引導(dǎo)你進(jìn)行操作，鼓勵(lì)用戶(hù)參與其中
這種方式很容易讓用戶(hù)沉浸其中、快速學(xué)習(xí)，并且因?yàn)橛屑皶r(shí)的操作反饋，所以用戶(hù)很容易獲得強(qiáng)烈的成就感；
2）組成結(jié)構(gòu)
內(nèi)容介紹+引導(dǎo)內(nèi)容+操作引導(dǎo)
3）使用規(guī)則
操作引導(dǎo)突出且明確指示出操作的方式，否則用戶(hù)很容易因?yàn)椴僮魇〉拇鞌「卸艞?；保持?nèi)容與操作的親密性；操作成功后及時(shí)給予反饋。
4）使用場(chǎng)景
多應(yīng)用在工具類(lèi)產(chǎn)品和游戲：比如養(yǎng)雞活動(dòng)、拼多多的種農(nóng)作物、螞蟻森林種樹(shù)等最開(kāi)始使用此功能時(shí)，或者很久未進(jìn)入的用戶(hù)下次進(jìn)入；
本文由 @宮宮宮宮 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
蘭亭妙微(www.jsyqsx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
蘭亭妙微(www.jsyqsx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
如何讓您的產(chǎn)品詳情頁(yè)脫穎而出，并顯著提高轉(zhuǎn)化率，是每位產(chǎn)品經(jīng)理和設(shè)計(jì)師都必須面對(duì)的重要挑戰(zhàn)。本文深入探討了詳情頁(yè)提升轉(zhuǎn)化率的多種技巧和策略，希望可以幫到大家。
最近半年有策劃不少詳情頁(yè)，然后就想總結(jié)一些詳情頁(yè)相關(guān)的內(nèi)容。
其實(shí)產(chǎn)品詳情頁(yè)的設(shè)計(jì)原則只有一個(gè)，那就是迎合目標(biāo)消費(fèi)者的需求。那么一個(gè)好的產(chǎn)品詳情頁(yè)都應(yīng)該包含什么內(nèi)容呢？
核心目標(biāo)：用視覺(jué)+文案快速傳遞產(chǎn)品核心價(jià)值。3秒內(nèi)讓消費(fèi)者“一見(jiàn)鐘情”。
是的，請(qǐng)務(wù)必在5秒內(nèi)讓消費(fèi)者“一見(jiàn)鐘情”，若無(wú)法在5秒內(nèi)抓住眼球，客戶(hù)可能會(huì)關(guān)閉這個(gè)頁(yè)面。
內(nèi)容方向：
1.產(chǎn)品核心賣(mài)點(diǎn)（加上產(chǎn)品外觀，科技感）
2.使用場(chǎng)景化展示（如模特穿戴、產(chǎn)品使用動(dòng)態(tài)）
3.品牌 LOGO / 標(biāo)語(yǔ)（弱化但可識(shí)別）
設(shè)計(jì)公式：
1.主標(biāo)題=1. 一句話(huà)展示出產(chǎn)品的核心賣(mài)點(diǎn)/核心宣傳點(diǎn)；2.或者產(chǎn)品名稱(chēng)，3.或者情緒價(jià)值（如減壓、陪伴）+功能關(guān)鍵詞（如“AI監(jiān)測(cè)”）；
2.副標(biāo)題=1. 產(chǎn)品名稱(chēng)+使用場(chǎng)景；2. 或者核心賣(mài)點(diǎn)/核心宣傳點(diǎn)
3.ICON(非必選，有則添加)=信任背書(shū)（如“FDA認(rèn)證”）；或產(chǎn)品特色；或核心成分（總之就是消費(fèi)最關(guān)心的點(diǎn)）。
布局要點(diǎn)：
產(chǎn)品圖占據(jù)版面1/2以上，文字占據(jù)版面1/8左右，以圖吸睛，輔以少量文字說(shuō)明，版面適當(dāng)留白，保證畫(huà)面簡(jiǎn)潔明了。
優(yōu)秀案例參考：
Dreametech 品牌新品發(fā)布的產(chǎn)品第一張Banner：
產(chǎn)品名字+產(chǎn)品核心宣傳點(diǎn)“Rise up, clean beneath” +多個(gè)獎(jiǎng)項(xiàng)背書(shū)效果的Icon。
整個(gè)設(shè)計(jì)非常簡(jiǎn)潔和科技感，沒(méi)有多余的元素，使得產(chǎn)品成為視覺(jué)焦點(diǎn)。
圖片來(lái)源：dreametech 僅供學(xué)習(xí)用
Anker品牌產(chǎn)品名字+產(chǎn)品核心賣(mài)點(diǎn)+應(yīng)用場(chǎng)景。
圖片來(lái)源：Anker 僅供學(xué)習(xí)用
核心目標(biāo)：制造“痛感共鳴”，讓消費(fèi)者驚呼“這就是我！并激發(fā)“我需要解決它”的欲望。
人性本懶惰，大多數(shù)人不愿改變，除非感到足夠“痛”。
想讓顧客為你付費(fèi)，關(guān)鍵在于讓潛在客戶(hù)真切感受到他們面臨的問(wèn)題有多嚴(yán)重，若不解決，后果將不堪設(shè)想。
一旦激發(fā)他們的情感反應(yīng)，改變的念頭便油然而生。
因此，第二張Banner要精準(zhǔn)擊中用戶(hù)痛點(diǎn)，羅列消費(fèi)者常遇的問(wèn)題及根源，呈現(xiàn)能引發(fā)共鳴的畫(huà)面。
布局要點(diǎn)：
通過(guò)圖文結(jié)合的方式，描述消費(fèi)者的痛點(diǎn)，如展示消費(fèi)者在生活中遇到的各種問(wèn)題。
三類(lèi)痛點(diǎn)挖掘法：
優(yōu)秀案例參考：
Petlibro品牌在Smart Fountain(給貓智能喂水相關(guān)的產(chǎn)品)產(chǎn)品詳情頁(yè)的痛點(diǎn)描述海報(bào)中，突出了貓咪因缺水而面臨的健康風(fēng)險(xiǎn)，通過(guò)具體數(shù)據(jù)強(qiáng)調(diào)了脫水對(duì)貓咪的危害。
如“9百萬(wàn)+貓患有貓下泌尿道疾病”和“1百萬(wàn)+貓患有慢性腎病”，這些龐大的數(shù)字能夠直觀地展示問(wèn)題的嚴(yán)重性，讓養(yǎng)貓人士意識(shí)到這些健康問(wèn)題并不是個(gè)別現(xiàn)象，而是普遍存在的問(wèn)題。
輔助貓?jiān)谕纯嘀械恼掌軌蚣ぐl(fā)養(yǎng)貓人士的情感共鳴。養(yǎng)貓人士可能會(huì)更加注意自己寵物的水分?jǐn)z入，從而想要主動(dòng)采取預(yù)防措施。就會(huì)繼續(xù)網(wǎng)下瀏覽網(wǎng)頁(yè)試圖尋找解決方案。
圖片來(lái)源：furbo 僅供學(xué)習(xí)用
核心目標(biāo)：突出差異化，用“人無(wú)我有”建立競(jìng)爭(zhēng)壁壘，讓消費(fèi)者覺(jué)得“非你不可”。(這個(gè)部分可以用1-3 張圖）
上面的一張海報(bào)提到核心痛點(diǎn)，當(dāng)一個(gè)人意識(shí)到了問(wèn)題的存在，產(chǎn)生了共鳴情緒，那么他最需要的是什么？迫不及待需要解決方案。
因此從第三張海報(bào)開(kāi)始接下來(lái)的幾張海報(bào)都可以呈現(xiàn)如何幫助他們解決問(wèn)題或?qū)崿F(xiàn)需求。
并且關(guān)于如何解決問(wèn)題，實(shí)現(xiàn)起來(lái)還無(wú)比容易，再加上眾多保障，讓你可以0風(fēng)險(xiǎn)購(gòu)買(mǎi)使用。
這樣用戶(hù)就會(huì)想要躍躍一試，成交的意愿就會(huì)很強(qiáng)。
因此大家有沒(méi)有注意到，截至目前，沒(méi)有一張海報(bào)是多余的，每一張都有它的用處，并且前后是有邏輯性的。
那么在這個(gè)板塊的海報(bào)中，用什么打動(dòng)客戶(hù)？
前面提到我們需突出“突出產(chǎn)品差異化”優(yōu)勢(shì)，也就是在同類(lèi)目產(chǎn)品中的優(yōu)勢(shì)，“人無(wú)我有，人有我優(yōu)，同時(shí)能解決用戶(hù)問(wèn)題”的點(diǎn)。
比如用戶(hù)關(guān)注續(xù)航，競(jìng)品續(xù)航3天，而你的產(chǎn)品可以續(xù)航7天甚至使用了太陽(yáng)能可以無(wú)限續(xù)航。比如全球第一款XXXX產(chǎn)品等。
優(yōu)秀案例參考：
Reolink攝像頭搭載Wi-Fi 6技術(shù)，實(shí)現(xiàn)超快傳輸、低延遲和高穩(wěn)定性。將家庭安全提升到一個(gè)新的水平。
圖片來(lái)源：reolink 僅供學(xué)習(xí)用
dreametech品牌20,000Pa優(yōu)勢(shì)并告訴用戶(hù)這款掃地機(jī)器人能夠產(chǎn)生強(qiáng)大的吸力，幾乎可以吸入任何類(lèi)型的污垢和灰塵，無(wú)論是隱藏在地毯深處的灰塵，還是卡在瓷磚縫隙中的污垢。
圖片來(lái)源：dreametech 僅供學(xué)習(xí)用
核心目標(biāo)：回答用戶(hù)“這對(duì)我有什么好處？”從“功能”到“利益”的轉(zhuǎn)化。（建議 3-5 個(gè)核心功能）
也就是因?yàn)槟惝a(chǎn)品的優(yōu)點(diǎn)給消費(fèi)者帶來(lái)的好處或者利益。可以是產(chǎn)品成分的優(yōu)勢(shì)或者功效的優(yōu)勢(shì)。
消費(fèi)者更愿為“解決問(wèn)題”買(mǎi)單，而非單純的功能。我們可以將功能轉(zhuǎn)換成用戶(hù)能夠理解并幫助消費(fèi)者解決需求的點(diǎn)，幫助用戶(hù)更好地理解產(chǎn)品，并產(chǎn)生購(gòu)買(mǎi)的可能。
內(nèi)容方向：
技術(shù)參數(shù)（如材質(zhì)、尺寸、續(xù)航）
創(chuàng)新設(shè)計(jì)（如隱藏式按鍵、防水結(jié)構(gòu)）
用戶(hù)利益點(diǎn)（如 “輕便易攜帶”“安全防摔”）
優(yōu)秀案例參考：
Dreametech 將功能清晰轉(zhuǎn)化為利益點(diǎn)”Charge Faster, Clean Longer”。
“5500mAh 大電池” 對(duì)應(yīng) “單次清潔時(shí)間長(zhǎng)達(dá) 220 分鐘”，讓用戶(hù)明白確實(shí)續(xù)航更長(zhǎng)、清潔范圍更大，減少頻繁充電。
“吸力高達(dá) 2000Pa” 轉(zhuǎn)化為清潔力強(qiáng)，能深度清潔；“充電快 30%” 則體現(xiàn)節(jié)省時(shí)間。用簡(jiǎn)潔語(yǔ)言和數(shù)據(jù)，直觀呈現(xiàn)產(chǎn)品給用戶(hù)帶來(lái)的便利。
圖片來(lái)源：dreametech 僅供學(xué)習(xí)用
也可以用其中一張圖整合所有想傳達(dá)的核心功能，比如下面dreametech和Anker的海報(bào)。
圖片來(lái)源：dreametech和anker 僅供學(xué)習(xí)用
核心目標(biāo)：細(xì)節(jié)決定轉(zhuǎn)化率，用細(xì)節(jié)增強(qiáng)真實(shí)感，降低決策成本。
這個(gè)板塊可以放大產(chǎn)品細(xì)節(jié)，展示產(chǎn)品的材質(zhì)、做工等屬性信息，用視覺(jué)+文案雙重沖擊的方式，有效傳遞產(chǎn)品賣(mài)點(diǎn)。
優(yōu)秀案例參考：
依舊是dreametech 品牌的掃地機(jī)。文案 “Double the Brushes, Double the Results” 采用押韻的手法，朗朗上口，不僅點(diǎn)明雙刷設(shè)計(jì)，還暗示清潔效果加倍，極具吸引力。
畫(huà)面選取掃地機(jī)工作時(shí)的特寫(xiě)鏡頭，著重展示雙刷旋轉(zhuǎn)卷起灰塵垃圾的細(xì)節(jié)，真實(shí)還原清掃場(chǎng)景。讓消費(fèi)者能直觀感受到產(chǎn)品的強(qiáng)大清潔力。
還可以用跟競(jìng)品對(duì)比的細(xì)節(jié)展示圖，以及產(chǎn)品使用前VS使用后的細(xì)節(jié)展示。有對(duì)比才更突出優(yōu)勢(shì)和產(chǎn)品效果。
圖片來(lái)源：dreametech 僅供學(xué)習(xí)用
核心目標(biāo)：用權(quán)威和真實(shí)擊破最后一道防線(xiàn)，消除懷疑，讓消費(fèi)者覺(jué)得“選擇你零風(fēng)險(xiǎn)”從而激發(fā)購(gòu)買(mǎi)欲望。
內(nèi)容方向:
圖片來(lái)源：dreametech 僅供學(xué)習(xí)用
圖片來(lái)源：luffy-wear 僅供學(xué)習(xí)用
核心目標(biāo)：越瑣碎，越真實(shí)，預(yù)判所有可能的疑問(wèn)，減少客服壓力。
尤其是美國(guó)消費(fèi)者習(xí)慣自助購(gòu)物，詳盡的信息能降低退貨率。因此此部分的設(shè)計(jì)需清晰的展示產(chǎn)品的基本信息。
內(nèi)容方向：
圖片來(lái)源：furbo 僅供學(xué)習(xí)用
圖片來(lái)源：dreametech 僅供學(xué)習(xí)用
核心目標(biāo)：給產(chǎn)品一個(gè)“靈魂溢價(jià)”，從“賣(mài)貨”到“賣(mài)價(jià)值觀”，綁定長(zhǎng)期用戶(hù)。
我們可以將品牌理念傳達(dá)給消費(fèi)者，使產(chǎn)品更有厚度，賦予產(chǎn)品更多情緒價(jià)值，帶動(dòng)消費(fèi)者購(gòu)買(mǎi)。
Sprout Social數(shù)據(jù)調(diào)研顯示：美國(guó)Z世代用戶(hù)中，62%的消費(fèi)者愿意為具有社會(huì)責(zé)任的品牌支付溢價(jià)。那么為什么不展示這個(gè)板塊讓你的消費(fèi)者看到企業(yè)有愛(ài)心的一面？
內(nèi)容方向：
優(yōu)秀案例參考：
furbo品牌產(chǎn)品詳情頁(yè)最后一張海報(bào)提到“One Furbo = $1 to Help Rescued Pets”。展現(xiàn)了Furbo關(guān)心動(dòng)物福利，強(qiáng)調(diào)品牌的社會(huì)責(zé)任感。
每購(gòu)買(mǎi)一臺(tái)Furbo，消費(fèi)者不僅能享受高品質(zhì)產(chǎn)品，還能幫助救助動(dòng)物，激勵(lì)更多人做出購(gòu)買(mǎi)決策。這種情感連接讓顧客感受到參與有意義事業(yè)的價(jià)值，提升品牌忠誠(chéng)度。
同時(shí)，F(xiàn)urbo展示透明度和責(zé)任感，增強(qiáng)消費(fèi)者的信任。通過(guò)這樣的方式，F(xiàn)urbo有效促進(jìn)品牌與消費(fèi)者之間的聯(lián)系，推動(dòng)銷(xiāo)售增長(zhǎng)。
圖片來(lái)源：furbo 僅供學(xué)習(xí)用
作者：外貿(mào)小巨熊 公眾號(hào)：外貿(mào)小巨熊
題圖來(lái)自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)
蘭亭妙微(www.jsyqsx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
UI設(shè)計(jì)是隨著智能設(shè)備的飛速發(fā)展、互聯(lián)網(wǎng)行業(yè)的發(fā)展以及農(nóng)林牧漁傳統(tǒng)行業(yè)的急于轉(zhuǎn)向而興起。主要是企業(yè)對(duì)移動(dòng)設(shè)備交互界面的重視。在企業(yè)越來(lái)越重視界面設(shè)計(jì)的今天。傳統(tǒng)的平面設(shè)計(jì)能為現(xiàn)在我們的UI設(shè)計(jì)提供哪些參考呢，我們能從中借鑒的技巧有哪些？今天就從版式設(shè)計(jì)說(shuō)起。
在UI設(shè)計(jì)中版式設(shè)計(jì)不言而喻是非常重要的。版式設(shè)計(jì)就如同蓋房子先要搭好框架一樣。一款A(yù)PP視覺(jué)呈現(xiàn)是不是符合商業(yè)性并兼具審美。其中的版式設(shè)計(jì)是其核心。而在平面設(shè)計(jì)中版式設(shè)計(jì)也是一個(gè)作品的核心。平面設(shè)計(jì)長(zhǎng)時(shí)間的發(fā)展積淀了相當(dāng)多實(shí)用的技巧和方法。
版式設(shè)計(jì)中形勢(shì)方法指的是、畫(huà)面的表現(xiàn)方法和原理。說(shuō)白了就是畫(huà)面要出什么效果就用什么表現(xiàn)手法而已。平面設(shè)計(jì)中形勢(shì)方法可以分為。虛空留白、比例適度、對(duì)比調(diào)和、變化統(tǒng)一、變異秩序、節(jié)奏韻律、重復(fù)交錯(cuò)、對(duì)稱(chēng)均衡等。今天我們舉例分析一下前四個(gè)。
1、虛空留白（適合現(xiàn)在極簡(jiǎn)設(shè)計(jì)風(fēng)格）
這種版式設(shè)計(jì)主要是突出主題，給人以輕松愉悅的感覺(jué)。適合文藝范的和有逼格的app界面使用，能夠營(yíng)造出高品質(zhì)的界面風(fēng)格。但是如果一旦運(yùn)用不得當(dāng)容易出現(xiàn)界面空或單調(diào)的感覺(jué)。
2、比例適度（協(xié)調(diào)UI中各部分內(nèi)容）
平面設(shè)計(jì)中所說(shuō)的比例適度主要是整體和部分的協(xié)調(diào)，采用合理的比例方法，如：黃金比例、等差等比。去協(xié)調(diào)各部分的關(guān)系使各部分要素產(chǎn)生聯(lián)系。在UI版面布局中正是需要調(diào)節(jié)和有機(jī)的組合各要素在有限的界面里的合理性。
3、對(duì)比調(diào)和（UI中信息層級(jí)的表現(xiàn)）
對(duì)比調(diào)和在平面設(shè)計(jì)中是經(jīng)常用到的，整體版面要調(diào)和，局部版面要對(duì)比。對(duì)比是強(qiáng)調(diào)主次關(guān)系。對(duì)比調(diào)和用到UI設(shè)計(jì)中可以做到設(shè)計(jì)內(nèi)容在主次關(guān)系的層級(jí)化。在統(tǒng)一調(diào)和的界面里又充滿(mǎn)了對(duì)比的小情調(diào)。這正是平面不平之所在，也是一個(gè)優(yōu)秀的界面所必備的。
4、變化與統(tǒng)一（是UI突破同質(zhì)化的一種方法）
變化與統(tǒng)一是形式美法則的總則。是其他方法方式的一個(gè)總結(jié)。變化所說(shuō)的就是在設(shè)計(jì)中要有所創(chuàng)新不能總墨守成規(guī)，統(tǒng)一是設(shè)計(jì)要做到視覺(jué)上的愉悅而不是雖然有局部吸引人的眼球但是整體一看卻是辣眼睛。變化和統(tǒng)一也許是突破現(xiàn)在APP同質(zhì)化的一種方法。在現(xiàn)在APP同質(zhì)化嚴(yán)重的情況下我們能做到APP的風(fēng)格統(tǒng)一又不墨守成規(guī)尋求變化才是營(yíng)造自己風(fēng)格的一種方法。
這些平面設(shè)計(jì)里的形式美法則在UI設(shè)計(jì)中同樣受用。這些表面形式在做banner圖構(gòu)圖和創(chuàng)意上也特別有用。
版式設(shè)計(jì)的基本類(lèi)型有特別多。我們這里著重分析其中對(duì)UI設(shè)計(jì)最有幫助的骨骼型、左右分割、曲線(xiàn)型、滿(mǎn)版型這幾個(gè)基本類(lèi)型。
1、骨骼型（類(lèi)似網(wǎng)格構(gòu)圖）
這里說(shuō)的骨骼型就是在版式構(gòu)圖中，進(jìn)行橫豎向的分欄。能容嚴(yán)格按照分欄排列。版面效果沉穩(wěn)厚重，井然有序，如果橫豎分欄交叉排列還可制造靈動(dòng)活潑的版面氣氛。非常類(lèi)似網(wǎng)格構(gòu)圖的方法。在UI設(shè)計(jì)中也很受用，可以很好的規(guī)范個(gè)元素的位置。（如果你對(duì)目前的界面設(shè)計(jì)一籌莫展，不妨可以試試這種方法）
2、左右分割型（瀑布流）
左右分割不外乎就是把版面左右分開(kāi)在配之以圖文。在UI中的應(yīng)用是隨著扁平化卡片化的興起，在移動(dòng)端界面尺寸的限制下，開(kāi)始進(jìn)行了信息的分割處理。橫向的卡片式布局使得一屏內(nèi)所看到的信息受到了極大的限制（不利于用戶(hù)體驗(yàn)，卡片式并非萬(wàn)能）。所以就應(yīng)用的左右分割的布局。左右分割有利于信息的呈現(xiàn)，可以與瀑布流結(jié)合。
3、曲線(xiàn)型（UI方向1）
曲線(xiàn)型主要表現(xiàn)的是韻律和節(jié)奏，可能符合一部分小眾APP設(shè)計(jì)界面設(shè)計(jì)，充滿(mǎn)了特色和戲劇性。我覺(jué)得有特色的界面設(shè)計(jì)是這些小眾APP的設(shè)計(jì)核心?？梢岳昧眍?lèi)的小眾的設(shè)計(jì)做吸引。
4、滿(mǎn)版型（UI方向2）
滿(mǎn)版設(shè)計(jì)在平面設(shè)計(jì)中主要表達(dá)大方、舒展的設(shè)計(jì)風(fēng)格。在UI移動(dòng)端界面設(shè)計(jì)中寸土寸金?，F(xiàn)在的扁平化，極簡(jiǎn)設(shè)計(jì)風(fēng)格都在留白提升逼格。但是未來(lái)極簡(jiǎn)設(shè)計(jì)終將過(guò)去，我們面對(duì)的還是海量信息。
版式設(shè)計(jì)是平面設(shè)計(jì)的一部分，也應(yīng)該是UI設(shè)計(jì)的一部分。這里僅僅是說(shuō)出了版式設(shè)計(jì)的一點(diǎn)點(diǎn)內(nèi)容，部分的形式美法則和版式設(shè)計(jì)的基本類(lèi)型。還有很多很多對(duì)UI設(shè)計(jì)有利的點(diǎn)沒(méi)有發(fā)掘。站在巨人的肩上可以看的更遠(yuǎn)，平面設(shè)計(jì)就是我們前進(jìn)的加速劑。
本文由 @彪形大漢 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
蘭亭妙微(www.jsyqsx.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話(huà)：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
在 UI 界面當(dāng)中使用動(dòng)效已經(jīng)成為這幾年一直被討論的熱門(mén)話(huà)題了。動(dòng)效要怎么用，什么樣的動(dòng)效更優(yōu)秀等等，這樣的探討層出不窮。在 UI 所涉及到的各種動(dòng)畫(huà)和動(dòng)效當(dāng)中，概念動(dòng)效是被討論的最多的話(huà)題。充滿(mǎn)實(shí)驗(yàn)性的概念動(dòng)效是動(dòng)效設(shè)計(jì)最前沿的領(lǐng)域，是開(kāi)發(fā)和實(shí)現(xiàn)上最具有挑戰(zhàn)性的部分，也是新產(chǎn)品上線(xiàn)之后，用戶(hù)最容易注意到，也討論得最多的東西。
在 Tubik Studio 的博客上，我們已經(jīng)分享過(guò)很多關(guān)于 UI 動(dòng)效的文章和內(nèi)容了。關(guān)于概念動(dòng)效/動(dòng)畫(huà)對(duì)于 UI 設(shè)計(jì)與開(kāi)發(fā)的影響，我想 Tubik 的動(dòng)畫(huà)設(shè)計(jì)師 Kirill Yerokhin 是最有發(fā)言權(quán)的。
概念動(dòng)效應(yīng)該算是概念設(shè)計(jì)領(lǐng)域的一個(gè)分支。總的來(lái)說(shuō)，概念動(dòng)效還是在做動(dòng)效和動(dòng)畫(huà)的設(shè)計(jì)，不過(guò)它是為了在真實(shí)的產(chǎn)品上線(xiàn)之前，基于特定的想法、構(gòu)思而進(jìn)行創(chuàng)建的東西。在進(jìn)行用戶(hù)界面設(shè)計(jì)的時(shí)候，動(dòng)效可以存在于交互、轉(zhuǎn)場(chǎng)和具體的控件操作上，動(dòng)效作為一種狀態(tài)轉(zhuǎn)變、交互反饋和視覺(jué)引導(dǎo)的工具而存在。動(dòng)效設(shè)計(jì)師會(huì)使用各種各樣的工具來(lái)進(jìn)行動(dòng)效的設(shè)計(jì)，我們常常提到的工具包括 Adobe After Effects，Principle，F(xiàn)igma 和 InVision。
這其實(shí)是目前最富有爭(zhēng)議的話(huà)題。很多概念動(dòng)效和現(xiàn)有的、成型的動(dòng)效/動(dòng)畫(huà)解決方案，在步驟、效果、執(zhí)行和開(kāi)發(fā)上都不盡相同，超出了通常的限制和常見(jiàn)的規(guī)則。這種動(dòng)效技術(shù)在剛剛開(kāi)始接觸的時(shí)候，會(huì)覺(jué)得不夠真實(shí)，沒(méi)有必要，甚至有人會(huì)認(rèn)為無(wú)法實(shí)現(xiàn)。
重點(diǎn)在于，UI 動(dòng)效其實(shí)和我們常見(jiàn)的靜態(tài)元素（字體、圖標(biāo)、控件、色彩和形狀）同樣能夠讓產(chǎn)品從激烈的競(jìng)爭(zhēng)當(dāng)中脫穎而出。
所有開(kāi)發(fā)者討厭概念動(dòng)效且不想去實(shí)現(xiàn)的說(shuō)法其實(shí)是不夠準(zhǔn)確的。實(shí)際上，這樣的事情要依情況來(lái)看。在很多創(chuàng)意設(shè)計(jì)領(lǐng)域當(dāng)中，經(jīng)常有人說(shuō)某種創(chuàng)新或者創(chuàng)意是不可能實(shí)現(xiàn)的，然而實(shí)際上，總會(huì)有人竭盡所能發(fā)現(xiàn)新的解決方案，找到新的方法。
需求決定供應(yīng)。如果「市場(chǎng)」看到了一個(gè)全新的設(shè)計(jì)理念，尤其是在動(dòng)畫(huà)和動(dòng)效領(lǐng)域，就會(huì)有人想辦法在實(shí)際的產(chǎn)品當(dāng)中將它實(shí)現(xiàn)出來(lái)。而這個(gè)時(shí)候，設(shè)計(jì)師的構(gòu)思就不再停留在概念上。在 Tubik Studio，我們?cè)诤芏鄷r(shí)候會(huì)提出新的概念動(dòng)效，這些概念動(dòng)效甚至可能會(huì)極其復(fù)雜，但是需求一旦確定，總會(huì)有第三方的開(kāi)發(fā)接手并且將他們實(shí)現(xiàn)出來(lái)。
實(shí)踐表明，在技術(shù)上，概念動(dòng)效的實(shí)現(xiàn)幾乎僅僅就是時(shí)間和花銷(xiāo)上的問(wèn)題，解決和實(shí)現(xiàn)的可能性其實(shí)非常之高。
第一個(gè)案例展示了和列表交互的動(dòng)畫(huà)，左邊的列表只是單純的滾動(dòng)，而右邊的則明顯的加入了漸進(jìn)的動(dòng)效，模擬現(xiàn)實(shí)中拉動(dòng)卡片的微妙動(dòng)作。右邊的變體看起來(lái)更加生動(dòng)活潑，為滾動(dòng)交互體驗(yàn)增加了樂(lè)趣。更有趣的地方在于，右邊的變體在運(yùn)動(dòng)的過(guò)程中產(chǎn)生了卡片之間有更多空間的視覺(jué)幻象，這讓整個(gè)界面充滿(mǎn)了呼吸感和動(dòng)感。
上面的案例當(dāng)中，左邊只是簡(jiǎn)單的左右切換過(guò)渡，而右邊則帶有放大和轉(zhuǎn)變的過(guò)渡，不僅讓動(dòng)效的指向性更為明顯，而且更加富有動(dòng)態(tài)。
概念動(dòng)效往往會(huì)力圖讓最常規(guī)的交互效果更加生動(dòng)，比如側(cè)邊欄展開(kāi)這樣常見(jiàn)的操作。
概念動(dòng)效是 UI 設(shè)計(jì)階段最具有創(chuàng)造性的階段之一，動(dòng)效設(shè)計(jì)師會(huì)提供不同的方案和選項(xiàng)來(lái)同開(kāi)發(fā)者和客戶(hù)進(jìn)行討論。下面的案例都是 Kinill 和 UI 設(shè)計(jì)師一同實(shí)現(xiàn)的一些實(shí)例。
這是一個(gè)財(cái)務(wù)管理類(lèi)應(yīng)用動(dòng)效，采用不同色彩來(lái)實(shí)現(xiàn)餅狀圖來(lái)進(jìn)行數(shù)據(jù)展示，整個(gè)效果時(shí)髦值很高。
這是音樂(lè)新聞應(yīng)用中的過(guò)渡動(dòng)效。
這是為家庭預(yù)算 APP 設(shè)計(jì)的菜單打開(kāi)概念動(dòng)效。
這是商務(wù)名片 APP 的 UI 概念動(dòng)效。
這個(gè)日歷 APP 的概念動(dòng)效想必大家都見(jiàn)過(guò)很多次了，多彩的設(shè)計(jì)和流暢的動(dòng)效至今令人難忘。
這個(gè)充滿(mǎn)流動(dòng)性側(cè)邊欄動(dòng)效非常有意思。
事實(shí)上，從最基本的構(gòu)思和概念開(kāi)始創(chuàng)新和創(chuàng)造幾乎是每個(gè)行業(yè)都遵循的流程。包括汽車(chē)行業(yè)和建筑設(shè)計(jì)，大多都是從基本的概念設(shè)計(jì)著手，才有之后的實(shí)現(xiàn)和發(fā)展。概念設(shè)計(jì)最初常常以「這只是和現(xiàn)實(shí)無(wú)關(guān)的幻想」的樣子出現(xiàn)，但是最終實(shí)現(xiàn)出來(lái)并且走入日常生活的案例，比比皆是。不管怎樣，無(wú)論好壞，它們都在推動(dòng)我們的生活逐步前進(jìn)。
在 UI 設(shè)計(jì)領(lǐng)域，概念動(dòng)效的優(yōu)勢(shì)和意義也是一樣的。前不久有不少人認(rèn)為我們所設(shè)計(jì)的動(dòng)效是不真實(shí)的、過(guò)于花俏的，但是實(shí)現(xiàn)出來(lái)，上手之后，往往和預(yù)期不盡相同。在平面設(shè)計(jì)的年代，靜態(tài)的設(shè)計(jì)追求的是持久的價(jià)值，簡(jiǎn)約和清爽讓這種價(jià)值得以維系。但是在這個(gè)用戶(hù)注意力資源極其有限的今天，多樣的需求和緊張的競(jìng)爭(zhēng)使得動(dòng)效設(shè)計(jì)師需要竭盡全力抓住用戶(hù)的每一點(diǎn)注意力，至少，越來(lái)越腦洞大開(kāi)的動(dòng)效正在證明它們?cè)谶@件事上無(wú)可替代的價(jià)值。
原文作者 : Tubik Studio
譯者／編輯 : 陳子木
譯文地址：https://www.uisdc.com/conceptual-animation-making-ui
本文由 @陳子木 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖由作者提供
編輯導(dǎo)語(yǔ)：產(chǎn)品的設(shè)計(jì)應(yīng)當(dāng)讓用戶(hù)始終清楚事項(xiàng)的發(fā)生，重要的元素也應(yīng)當(dāng)置于用戶(hù)一目了然的位置，直觀且清晰的設(shè)計(jì)往往能提升用戶(hù)的使用體驗(yàn)。本篇文章里，作者繼續(xù)總結(jié)了提升產(chǎn)品設(shè)計(jì)效果的幾個(gè)小技巧，一起來(lái)看一下。
重要的位置，要留給重要的元素。
編者按：用戶(hù)對(duì)產(chǎn)品的體驗(yàn)來(lái)自直觀感受。所以UI/UX往往對(duì)產(chǎn)品的成敗有著直接的影響，糟糕的UI/UX體驗(yàn)會(huì)讓強(qiáng)大的功能失去效力。
但怎么才能提高UI/UX設(shè)計(jì)的效果呢？不一定需要你掌握豐富全面的設(shè)計(jì)知識(shí)，有時(shí)候一點(diǎn)點(diǎn)的小改變就能令設(shè)計(jì)大為改觀。
Marc Andrew總結(jié)了36個(gè)改進(jìn)UI/UX設(shè)計(jì)的小技巧，分成6篇系列文章刊出，此為第五篇，希望能夠幫助到你。原文發(fā)表在Medium上，標(biāo)題是：UI & UX micro-tips: Volume five。
2個(gè)卡片設(shè)計(jì)樣例。左邊的標(biāo)題行高很高，右邊的標(biāo)題行高就要小很多。
在創(chuàng)作實(shí)用、易于理解且華麗的 UI 時(shí)，只需要做一點(diǎn)點(diǎn)的調(diào)整馬上就可以改進(jìn)設(shè)計(jì)。
在這篇系列文章的第5篇中，我會(huì)給大家再帶來(lái)6個(gè)容易實(shí)踐的 UI 和 UX 小技巧。
相關(guān)閱讀：
我們開(kāi)始吧……
2個(gè)卡片設(shè)計(jì)樣例。左邊的標(biāo)題行高很高，右邊的標(biāo)題行高就要小很多。
設(shè)計(jì)要講規(guī)矩，我是遵守規(guī)則的忠實(shí)粉絲，比方說(shuō)Type Scale或者一直都很出色的8pt Grid系統(tǒng)我是遵守的。
但有時(shí)候最好不要太過(guò)教條主義，不要Scale 或 Grid告訴你該怎么做就怎么做，重要的是看怎么做更好看。
請(qǐng)記住，規(guī)則是可以變通的，有時(shí)候偶爾也是可以打破的。
做一個(gè)打破規(guī)則的叛逆者。
2 個(gè)表單字段樣例。一個(gè)顯示的是帶有基本錯(cuò)誤消息的字段，另一個(gè)顯示了更詳細(xì)的錯(cuò)誤消息。
使用表單的時(shí)候，要盡量確保錯(cuò)誤消息說(shuō)清楚出了什么問(wèn)題，以及如何補(bǔ)救。
始終要讓用戶(hù)了解到具體情況。
要讓這些錯(cuò)誤消息對(duì)用戶(hù)有幫助，不要讓用戶(hù)蒙在鼓里。
APP的 2 個(gè)加載屏幕樣例。一個(gè)空空如也，沒(méi)有加載提示，另一個(gè)展示了更詳細(xì)的加載指示器。
展示APP元素的框架可以幫助你快速地向用戶(hù)溝通應(yīng)用的布局，并讓用戶(hù)放寬心，知道有什么事情正在發(fā)生，而不是死機(jī)。
系統(tǒng)狀態(tài)可見(jiàn)性是需要遵循的重要原則，這讓用戶(hù)能夠了解正在發(fā)生的事情。
不要讓用戶(hù)玩猜謎游戲。要從一開(kāi)始就讓他們了解情況。
APP的 2 個(gè)通知樣例。一個(gè)提供的信息非?；?，另一個(gè)在模態(tài)內(nèi)部提供了更詳細(xì)的描述。
在進(jìn)行應(yīng)用可能會(huì)產(chǎn)生后果的特定操作之前，始終都要先詳細(xì)告知用戶(hù)。
這尤其適用于某些會(huì)產(chǎn)生不可逆轉(zhuǎn)后果的操作，比方說(shuō)永久性刪除某些內(nèi)容。
讓用戶(hù)知道將會(huì)發(fā)生什么，并要求他們?cè)诎聪履莻€(gè)寫(xiě)著“刪除互聯(lián)網(wǎng)”的紅色大按鈕之前再三確認(rèn)自己要這么做。
2 個(gè)標(biāo)簽欄樣例。上面這個(gè)展示的是不太重要的圖標(biāo)，下面這個(gè)展示的是更重要的圖標(biāo)。
APP的標(biāo)簽欄可是屏幕這塊房地產(chǎn)的黃金地段，所以請(qǐng)明智使用。
要把你的標(biāo)簽欄保留給最常用的屏幕，并把次要的屏幕隱藏在“更多”圖標(biāo)里面。
小小的標(biāo)簽欄只能留給重要的東西。
2個(gè)桌面導(dǎo)航的樣例。一個(gè)是注冊(cè)和登錄按鈕隱藏在下拉菜單里面，另一個(gè)在菜單以外放置了 2 個(gè)按鈕，而且就放在頂部導(dǎo)航欄旁邊。
是的，我時(shí)不時(shí)還會(huì)在桌面視圖里面看到這種情況發(fā)生。
用戶(hù)需要采取的基本操作（也就是注冊(cè)或登錄）完全隱藏在他們甚至可能都瀏覽不到的下拉菜單里面。
把這些重要操作放在訪問(wèn)便利的位置，并應(yīng)該放在用戶(hù)預(yù)期最應(yīng)該出現(xiàn)的地方。
作者：Marc Andrew，譯者：boxi
來(lái)源：https://www.36kr.com/p/1302313074821767
本文由 @神譯局 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于CC0協(xié)議。
天宇 交互設(shè)計(jì)及用戶(hù)體驗(yàn)
編輯導(dǎo)語(yǔ)：由于審美的多優(yōu)化，產(chǎn)品設(shè)計(jì)風(fēng)格及類(lèi)型也不盡相同，但核心都是圍繞用戶(hù)群體來(lái)迎合市場(chǎng)需求。本文將從我看到、我理解、我行動(dòng)、給我反饋這四個(gè)層面逐步遞進(jìn)闡明交互設(shè)計(jì)的本質(zhì)，值得閱讀學(xué)習(xí)。
近來(lái)，和新的交互團(tuán)隊(duì)溝通頗多。在溝通當(dāng)中，不免會(huì)陷入這樣的對(duì)話(huà)：我覺(jué)得這個(gè)設(shè)計(jì)不美，不優(yōu)雅、所以不合適。
每每，當(dāng)我們圍繞產(chǎn)品設(shè)計(jì)的討論進(jìn)入了“美丑與否”的階段，就基本上等同于陷入了“公說(shuō)公有理、婆說(shuō)婆有理”的泥沼。畢竟，審美是一個(gè)個(gè)體化的偏好，依賴(lài)于我們過(guò)往的學(xué)習(xí)、認(rèn)知和經(jīng)歷。圍繞產(chǎn)品去討論美丑，最后往往只能看誰(shuí)的官帽子大就讓誰(shuí)決定了。
但是，在涉及交互時(shí)，我們應(yīng)該聚焦于美丑的討論么？
我的答案是，不應(yīng)該。
在創(chuàng)作一幅畫(huà)作或雕塑的時(shí)候，個(gè)性化的作品之美是可以被討論的。你偏好特定的風(fēng)格，從而創(chuàng)作特定類(lèi)型的作品，看客喜歡自然好，不喜歡也無(wú)所謂。因?yàn)樽髌肥紫仁菒偧旱?，然后才是悅?cè)说?。我們借由一個(gè)個(gè)性化的作品來(lái)完成自我的投射和受眾的篩選。
而在規(guī)劃一款面向大眾產(chǎn)品的時(shí)候，其商業(yè)化的產(chǎn)品之美則不應(yīng)該被討論，更應(yīng)該被數(shù)據(jù)衡量。我們不是要把自己偏好的風(fēng)格強(qiáng)塞給不同的用戶(hù)，而是要以用戶(hù)可接受的方式將自己的產(chǎn)品和服務(wù)兜售出去。和作品不同，商品首先是悅?cè)说?，然后才是悅己的。我們面?duì)的是一個(gè)被篩選出的受眾群體，來(lái)完成品牌和服務(wù)價(jià)值的投射。即便市場(chǎng)上有很多，我個(gè)體不喜歡的產(chǎn)品設(shè)計(jì)，但是仍然要尊重其，在數(shù)據(jù)指標(biāo)上是有效的。
當(dāng)用戶(hù)面對(duì)交互界面時(shí)，會(huì)經(jīng)歷：我看到、我理解、我行動(dòng)、給我反饋的過(guò)程。過(guò)程中，逐環(huán)節(jié)中的漏斗轉(zhuǎn)化，和最終的業(yè)務(wù)結(jié)果，是可以抽離出數(shù)據(jù)指標(biāo)進(jìn)行衡量的。
那么，交互設(shè)計(jì)的導(dǎo)向，就旨在降低整個(gè)鏈路中的各個(gè)環(huán)節(jié)間的阻力，體現(xiàn)在用戶(hù)從“我看到” 到 “我理解”的認(rèn)知阻力降低，從“我理解”到“我行動(dòng)”的操作干擾降低，以及從“我行動(dòng)”到“給我反饋”的反饋時(shí)延降低。
這個(gè)環(huán)節(jié)一般是產(chǎn)品經(jīng)理和設(shè)計(jì)師容易代入個(gè)人審美的環(huán)節(jié)，有審美潔癖的人士往往會(huì)傾向于提供更有結(jié)構(gòu)化、更富有美感和邏輯性的信息排布展示。而事實(shí)上，這就犯了“理性人假設(shè)“的錯(cuò)誤，我們總假設(shè)用戶(hù)是秉持著理性來(lái)使用我們產(chǎn)品的，殊不知，他們大概率是以感性的方式來(lái)感知和應(yīng)用我們的產(chǎn)品，未必能夠體會(huì)到產(chǎn)品精致的“匠心”：
比如，對(duì)于列表頁(yè)卡片來(lái)說(shuō)，同樣的信息，以標(biāo)簽的形式展現(xiàn)就不如以標(biāo)題的形式展現(xiàn)。”字要大“定律，在列表頁(yè)卡片的設(shè)計(jì)中屢試不爽。
又如，在同一個(gè)頁(yè)面上，如果我們?cè)黾恿藘蓚€(gè)關(guān)注按鈕，UV關(guān)注轉(zhuǎn)化效率就會(huì)比一個(gè)的要好。以個(gè)人體驗(yàn)為例，我一直在使用一款壁紙軟件，但直到某一日，我才驚覺(jué)原來(lái)這個(gè)頁(yè)面里有兩個(gè)收藏按鈕，我一直只在使用其中一個(gè)。我拿著手機(jī)問(wèn)了身邊的朋友，呈現(xiàn)出28分布，80%的人和我一樣關(guān)注到了同一個(gè)位置的收藏按鈕；而20%的人則關(guān)注到了另一個(gè)收藏按鈕、或同時(shí)關(guān)注到了兩個(gè)按鈕。
這個(gè)環(huán)節(jié)一般是產(chǎn)品經(jīng)理和設(shè)計(jì)師容易代入專(zhuān)家視角的環(huán)節(jié)，有專(zhuān)家視角的人士往往會(huì)傾向于使用書(shū)面的、應(yīng)用內(nèi)專(zhuān)有的表述方式，比如：溝通、馬克、直聊等等，但是，這種不說(shuō)人話(huà)的文案顯然既不利于理解，又無(wú)法有效推動(dòng)用戶(hù)做出有效的行動(dòng)。
套用福格行為模型，行為發(fā)生于動(dòng)機(jī)、能力和提示同時(shí)出現(xiàn)的時(shí)候。產(chǎn)品交互的作用，就是要降低用戶(hù)使用產(chǎn)品所需的能力門(mén)檻，給到用戶(hù)充分的行動(dòng)提示，從而促進(jìn)行為密度的提升。
從過(guò)往2C銷(xiāo)轉(zhuǎn)的經(jīng)驗(yàn)上來(lái)看，同樣的頁(yè)面布局，暖色的按鈕比冷色的按鈕轉(zhuǎn)化率高、直白的口語(yǔ)化文案比正式的書(shū)面語(yǔ)文案轉(zhuǎn)化率高。數(shù)據(jù)結(jié)果告訴我們，那些原本中立的用戶(hù)，是可以被顏色、文案所引導(dǎo)，從而做出有效行動(dòng)的。
這個(gè)環(huán)節(jié)基本上就屬于基礎(chǔ)認(rèn)知了，不要讓自己的產(chǎn)品在交互過(guò)程中出現(xiàn)“死機(jī)”態(tài)。在實(shí)踐中可以更多的使用非阻塞式操作，通過(guò)異步的方式給到用戶(hù)更及時(shí)和靈敏的反饋：
以用戶(hù)上傳頭像為例，一種做法是在用戶(hù)上傳完畢后才給到提示；另一種做法則是本地完成操作后就先給用戶(hù)反饋，隨后進(jìn)入后臺(tái)的上傳，只有在上傳失敗且重試失敗后，才給到用戶(hù)提示。
以?xún)?nèi)容平臺(tái)發(fā)布UGC內(nèi)容為例，一種做法是先審后發(fā)，先審核通過(guò)后再發(fā)布到公域；另一種做法則是先發(fā)后審，先讓內(nèi)容對(duì)用戶(hù)自己可見(jiàn)，并插入到他信息流的首位，然后在審核通過(guò)后發(fā)布到公域。從公域的可視性上來(lái)說(shuō)，兩種方案是一致的，但是給用戶(hù)體感上，先發(fā)后審的即時(shí)性更強(qiáng)。
只有能夠切實(shí)降低用戶(hù)認(rèn)知阻力、操作阻力、反饋延時(shí)的交互，才稱(chēng)得上是商品維度的好交互。美感與否、邏輯與否，都是上帝視角的先驗(yàn)審判，而逐環(huán)節(jié)的漏斗指標(biāo)才是用戶(hù)視角的后驗(yàn)投票。
不追求美麗，那么追求什么呢？
簡(jiǎn)單，是我目前對(duì)產(chǎn)品和交互的認(rèn)知和追求。
許是年紀(jì)大了，便終于因?yàn)橐庾R(shí)到自己的審美是非典型的、有偏差的，開(kāi)始更多的不執(zhí)念于自己，而落地于用戶(hù)觀察。
簡(jiǎn)單，是一種有效的策略。
因?yàn)楹?jiǎn)單，所以用戶(hù)更容易理解我們提供的信息和內(nèi)容，從而更快速的完成信息的識(shí)別和認(rèn)知。
因?yàn)楹?jiǎn)單，所以用戶(hù)更容易聚焦在主路徑上，不會(huì)在諸多紛繁的選項(xiàng)中迷失、陷入選擇困難。
因?yàn)楹?jiǎn)單，所以用戶(hù)不需要了解平臺(tái)的黑盒，他能夠得到一個(gè)更簡(jiǎn)單的系統(tǒng)，看到的就是直接的輸入輸出、按下一個(gè)按鈕收獲一個(gè)商品。
簡(jiǎn)單的策略，不光讓用戶(hù)得利，我們也會(huì)從中受益，使得前期試錯(cuò)成本和后期維護(hù)成本都降低許多。
簡(jiǎn)單，是一道困難的題目。
追求簡(jiǎn)單，所以我們需要找到用戶(hù)群體的最大公約數(shù)，只有將這個(gè)最大公約數(shù)落地在產(chǎn)品設(shè)計(jì)中，才能讓用戶(hù)快速理解和接受我們的設(shè)計(jì)；
追求簡(jiǎn)單，所以我們需要使用更平白的文本、更直接的圖標(biāo)，不端著、說(shuō)人話(huà)，才能讓用戶(hù)沒(méi)有理解的障礙、一看到就能夠明白。
追求簡(jiǎn)單，所以我們需要克制自己對(duì)于巴洛克風(fēng)格的摯愛(ài)，不斷的收斂自己想要多做功的念頭，砍到20%的需求，以MVP的方式去推進(jìn)業(yè)務(wù)。
從追求個(gè)體的美麗，到追求群體的簡(jiǎn)單；從追求個(gè)體的控制，到追求群體的順應(yīng)。
本文由 @YanZehua 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于CC0協(xié)議
在數(shù)字化轉(zhuǎn)型和AI技術(shù)的推動(dòng)下，B端設(shè)計(jì)正在經(jīng)歷一場(chǎng)深刻的變革。本文從釘釘近10年的B端產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)出發(fā)，深入探討了2025年B端品牌物料系統(tǒng)設(shè)計(jì)的趨勢(shì)。
回溯互聯(lián)網(wǎng)的發(fā)展進(jìn)程，從桌面端的撥號(hào)上網(wǎng)，到5G移動(dòng)互聯(lián)網(wǎng)，再至人工智能的助力，科技領(lǐng)域正在經(jīng)歷著翻天覆地的變革。未來(lái)的數(shù)字世界，在沉浸感、參與度、個(gè)性化等維度對(duì)體驗(yàn)會(huì)提出更進(jìn)階的要求；與此同時(shí)，B端企業(yè)對(duì)于高效、簡(jiǎn)便、用戶(hù)友好的界面需求與日俱增。在2025年的當(dāng)下，B端設(shè)計(jì)師唯有持續(xù)學(xué)習(xí)，適應(yīng)新技術(shù)與新趨勢(shì)，緊密?chē)@客戶(hù)的業(yè)務(wù)價(jià)值展開(kāi)設(shè)計(jì)，進(jìn)一步注重實(shí)用性、包容性以及可定制化，方可為企業(yè)客戶(hù)塑造出卓越的產(chǎn)品與服務(wù)。
因此，我們結(jié)合釘釘近10年的B端產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)，鑒于未來(lái)B端設(shè)計(jì)趨勢(shì)將展現(xiàn)出多元化、智能化和人性化的特質(zhì)，從B端產(chǎn)品個(gè)性化、風(fēng)格與質(zhì)感、界面版式、品牌物料、動(dòng)態(tài)、圖標(biāo)等多維度設(shè)計(jì)展開(kāi)深度研究，與大家一道探討B(tài)端設(shè)計(jì)的本質(zhì)和趨勢(shì)，期望在真正駕馭B端產(chǎn)品設(shè)計(jì)的這條道路上，帶來(lái)些許有益的啟迪。
今日，將為大家分享2025 B端品牌物料的設(shè)計(jì)趨勢(shì)，深入探討如何系統(tǒng)的構(gòu)建和管理品牌物料體系：從精心提煉品牌戰(zhàn)略，到積極探索客戶(hù)觸點(diǎn)創(chuàng)新，針對(duì)品牌物料的生產(chǎn)、加工和面客宣發(fā)等多元場(chǎng)景，聚焦于高效傳遞品牌一致性、強(qiáng)化專(zhuān)業(yè)信賴(lài)感、精確傳遞產(chǎn)品服務(wù)及價(jià)值，進(jìn)而吸引目標(biāo)客戶(hù)并推動(dòng)轉(zhuǎn)化。
“當(dāng)企業(yè)采購(gòu)決策者同時(shí)收到5份方案書(shū)，你的設(shè)計(jì)怎樣才能率先映入眼簾？”引用Forrester報(bào)告可知，76%的B端采購(gòu)決策會(huì)受視覺(jué)專(zhuān)業(yè)度影響。
B端場(chǎng)景下，由于客戶(hù)具有一些特殊性：比如決策流程漫長(zhǎng)、涉及角色眾多等，所需往往不只是產(chǎn)品，還涵蓋配套安裝、培訓(xùn)、維護(hù)等整體解決方案，并且更看重穩(wěn)定性、信任感與長(zhǎng)期合作價(jià)值。因而，B端產(chǎn)品在面向客戶(hù)展示品牌服務(wù)與物料時(shí)，設(shè)計(jì)上需從品牌策略、視覺(jué)體系、場(chǎng)景應(yīng)用、體驗(yàn)升級(jí)及工具支持等多個(gè)維度，傳遞出專(zhuān)業(yè)、高效、創(chuàng)新的形象。
隨著數(shù)字化轉(zhuǎn)型的影響力與日俱增，綜合行業(yè)變革、技術(shù)發(fā)展以及客戶(hù)需求的動(dòng)態(tài)演變，在實(shí)現(xiàn)品牌一致性傳達(dá)、提升專(zhuān)業(yè)信賴(lài)感以及達(dá)成目標(biāo)客戶(hù)轉(zhuǎn)化等方面，B端品牌物料設(shè)計(jì)歷經(jīng)了從基礎(chǔ)功能傳達(dá)邁向多維度體驗(yàn)升級(jí)的不斷進(jìn)化：
在傳統(tǒng)印刷時(shí)代，為我們所熟知的品牌物料核心載體包括信紙、手冊(cè)、單頁(yè)、展板等。
這些物料的設(shè)計(jì)呈現(xiàn)出高度標(biāo)準(zhǔn)化的特征：嚴(yán)格依照CI手冊(cè)執(zhí)行，該手冊(cè)詳盡規(guī)定了企業(yè)在各類(lèi)場(chǎng)景下正確運(yùn)用品牌元素的方式，諸如標(biāo)志（Logo）、標(biāo)準(zhǔn)字體、色彩系統(tǒng)、宣傳語(yǔ)等，以此確保所有對(duì)外傳播信息均契合企業(yè)的形象定位與價(jià)值觀。然而，這種模式也存在一些弊端，例如改版周期長(zhǎng)、難以滿(mǎn)足客戶(hù)的定制化需求。
步入互聯(lián)網(wǎng)時(shí)代，B端面客的品牌物料通常覆蓋從線(xiàn)上到線(xiàn)下的多元場(chǎng)景，諸如官網(wǎng)、H5產(chǎn)品價(jià)值頁(yè)、文檔介紹、PPT模板、活動(dòng)沙龍物料等等。不僅如此，線(xiàn)上產(chǎn)品一般還借助大量運(yùn)營(yíng)推廣、市場(chǎng)傳播等形式觸達(dá)客戶(hù)或用戶(hù)。
這種方式具備諸多優(yōu)勢(shì)：比如制作周期短，更新迭代快，能夠針對(duì)客戶(hù)的不同身份與需求，實(shí)現(xiàn)更為定制化、精準(zhǔn)化的服務(wù)。同時(shí)，還可通過(guò)復(fù)盤(pán)數(shù)據(jù)轉(zhuǎn)化情況，持續(xù)優(yōu)化和調(diào)整價(jià)值內(nèi)容的呈現(xiàn)方式。
近年來(lái)，技術(shù)迭代日新月異，諸如Web3、AR、生成式AI等新興技術(shù)重構(gòu)了物料形態(tài)。與此同時(shí)，B端決策者的代際更替顯著，越來(lái)越多年輕的企業(yè)管理者對(duì)數(shù)字?jǐn)⑹碌慕邮芏却蠓嵘?shù)據(jù)可視化的融入，不僅讓內(nèi)容更具說(shuō)服力，也契合了B端客戶(hù)對(duì)數(shù)據(jù)的需求。加之產(chǎn)品競(jìng)爭(zhēng)同質(zhì)化現(xiàn)象愈發(fā)凸顯，當(dāng)技術(shù)參數(shù)趨于相同時(shí)，視覺(jué)體驗(yàn)便成為影響客戶(hù)選擇的關(guān)鍵差異點(diǎn)。
當(dāng)前，B端品牌物料設(shè)計(jì)的前沿趨勢(shì)亮點(diǎn)紛呈：實(shí)時(shí)數(shù)據(jù)看板可與客戶(hù)系統(tǒng)API直接相連、動(dòng)態(tài)信息圖表借助AE動(dòng)畫(huà)演示技術(shù)架構(gòu)、動(dòng)態(tài)數(shù)據(jù)資產(chǎn)化表現(xiàn)多樣：比如阿里云以流體力學(xué)動(dòng)畫(huà)演繹云計(jì)算資源調(diào)度，利用粒子系統(tǒng)可視化AI算法運(yùn)行路徑；再比如AR說(shuō)明書(shū)掃描設(shè)備可觸發(fā)三維拆解動(dòng)畫(huà)，全息投影方案沙盤(pán)等，這些都為客戶(hù)帶來(lái)了從“單向傳播”到“交互式對(duì)話(huà)”的沉浸式體驗(yàn)。
“在B端領(lǐng)域，視覺(jué)設(shè)計(jì)不是美工，而是產(chǎn)品價(jià)值的翻譯官與商業(yè)信任的構(gòu)筑者。”
我們不難察覺(jué)，B端品牌物料設(shè)計(jì)在視覺(jué)敘事邏輯上已然經(jīng)歷了深刻的進(jìn)化：
過(guò)去
產(chǎn)品介紹大多局限于功能說(shuō)明書(shū)層面?；诰珳?zhǔn)傳遞技術(shù)參數(shù)這一核心目的，形成了以“產(chǎn)品圖 + 技術(shù)指標(biāo) + 對(duì)比表格”構(gòu)成的模塊化排版定式，同時(shí)采用齒輪寓意工業(yè)設(shè)備、電路板象征智能化等隱喻圖形。然而，這種方式弊病明顯，同質(zhì)化現(xiàn)象極為嚴(yán)重，且嚴(yán)重缺失品牌個(gè)性。
現(xiàn)在
產(chǎn)品介紹在兩方面實(shí)現(xiàn)了顯著突破。
其一: 在敘事方式上，實(shí)現(xiàn)了從“我們有什么”到“你能實(shí)現(xiàn)什么”的理念升級(jí)；
其二: 在創(chuàng)新策略上，通過(guò)插畫(huà)生動(dòng)呈現(xiàn)客戶(hù)現(xiàn)有工作流程的痛點(diǎn)，將枯燥的數(shù)據(jù)進(jìn)行戲劇化處理，例如把“節(jié)省30%成本”轉(zhuǎn)化為動(dòng)態(tài)損益曲線(xiàn)，直觀且富有沖擊力。
于B端品牌物料設(shè)計(jì)的發(fā)展進(jìn)程里，如何在秉持專(zhuān)業(yè)性的基礎(chǔ)上，傳遞出飽含情感的溫度，已然成為關(guān)鍵所在。
舉例而言，當(dāng)鼠標(biāo)懸停（hover）在數(shù)據(jù)圖表上，粒子綻放的效果瞬間呈現(xiàn)，為用戶(hù)帶來(lái)耳目一新的奇妙體驗(yàn)；借助材質(zhì)隱喻來(lái)傳達(dá)特定情感，磨砂金屬質(zhì)感猶如無(wú)聲的語(yǔ)言，訴說(shuō)著可靠與安心；還有別出心裁的反數(shù)字化實(shí)踐：比如制作觸感編碼手冊(cè)，讓不同紙張紋理與產(chǎn)品特性一一呼應(yīng)，磨砂紙?jiān)⒁獍踩雷o(hù)的堅(jiān)實(shí)壁壘，金屬箔象征尖端科技的無(wú)限探索。
與此同時(shí)，可持續(xù)物料創(chuàng)新層出不窮，諸多環(huán)保實(shí)踐讓人眼前一亮：比如采用大豆油墨印刷，讓廢棄手冊(cè)在短短6個(gè)月內(nèi)便可自然降解；電子說(shuō)明書(shū)中巧妙內(nèi)嵌碳足跡計(jì)算器，清晰展示環(huán)保貢獻(xiàn)數(shù)值。像某清潔設(shè)備廠商獨(dú)具匠心，其手冊(cè)采用種子紙制作，客戶(hù)將手冊(cè)種植后，便能收獲與企業(yè)LOGO形狀相關(guān)的植物，為環(huán)保行動(dòng)增添一抹別樣的詩(shī)意。此外，展望未來(lái)生態(tài)感知期，諸如腦機(jī)接口情緒反饋設(shè)計(jì)等前沿探索，正引領(lǐng)著B(niǎo)端品牌物料設(shè)計(jì)邁向更多維的天地。
B端品牌物料作為與客戶(hù)之間的溝通材料，需要兼顧品牌戰(zhàn)略穿透力與商業(yè)場(chǎng)景適配性，其本質(zhì)離不開(kāi)以人為中心的服務(wù)和體驗(yàn)，不管是網(wǎng)頁(yè)還是H5，印刷物還是空間，都大量借助“物理元素”進(jìn)行可視化呈現(xiàn)，“有形”的體驗(yàn)?zāi)軌蚣由羁蛻?hù)對(duì)服務(wù)的記憶，強(qiáng)化客戶(hù)感知。
接下來(lái)，我們從品牌戰(zhàn)略層到系統(tǒng)層再到執(zhí)行層，深入闡述如何更系統(tǒng)地構(gòu)建B端品牌物料設(shè)計(jì)。
B端品牌物料系統(tǒng)設(shè)計(jì)的首要步驟，便是提煉其獨(dú)特的價(jià)值觀、差異化競(jìng)爭(zhēng)優(yōu)勢(shì)，以及與客戶(hù)建立信任的關(guān)鍵標(biāo)識(shí)等要素。這些品牌基因的提取，應(yīng)重點(diǎn)著眼于行業(yè)特性、技術(shù)門(mén)檻以及品牌服務(wù)定位，而非側(cè)重于感性的情感表達(dá)。
以釘釘為例，AI時(shí)代下，我們的品牌主張聚焦于讓組織和個(gè)人更敏捷、更有創(chuàng)造力，致力于塑造智能、簡(jiǎn)約、普惠且開(kāi)放的企業(yè)形象?；谶@一品牌戰(zhàn)略，我們?cè)谠O(shè)計(jì)風(fēng)格（涵蓋色彩、質(zhì)感、版式以及傳播物料等方面）、面客產(chǎn)品介紹，以及文案描述等多個(gè)維度，都進(jìn)行了系統(tǒng)性的煥新升級(jí)。
B端品牌物料設(shè)計(jì)，絕非僅僅著眼于美觀，更需具備策略性，以便針對(duì)不同客戶(hù)場(chǎng)景，精準(zhǔn)傳遞相應(yīng)信息。
在釘釘，我們精心構(gòu)建了新紫品牌物料庫(kù)，無(wú)論是內(nèi)部的企服人員、銷(xiāo)售、設(shè)計(jì)師、業(yè)務(wù)PDSA等，還是外部生態(tài)服務(wù)商及其他人員，都能開(kāi)放使用，實(shí)現(xiàn)及時(shí)共享。
例如，當(dāng)線(xiàn)下的前線(xiàn)銷(xiāo)售團(tuán)隊(duì)舉辦面對(duì)面的會(huì)銷(xiāo)活動(dòng)或客戶(hù)沙龍時(shí)，為了更直觀、規(guī)范地展示產(chǎn)品或服務(wù)，我們提供一系列契合釘釘調(diào)性的基礎(chǔ)演示物料，包括PPT、產(chǎn)品介紹文檔、手冊(cè)、企業(yè)名片、一&五&十頁(yè)紙、邀請(qǐng)函以及展廳氛圍布置等標(biāo)準(zhǔn)模板。同時(shí)，針對(duì)各類(lèi)物料，配備詳細(xì)的使用說(shuō)明文檔和生產(chǎn)SOP，內(nèi)容涵蓋從文件下載到字體安裝，從素材使用到標(biāo)準(zhǔn)輸出，再?gòu)墓に囍谱鞯筋A(yù)算成本等各個(gè)環(huán)節(jié)。即便你是設(shè)計(jì)小白不懂設(shè)計(jì)，也能依據(jù)自身需求，迅速對(duì)接供應(yīng)商，制作出精美且符合品牌調(diào)性的物料。
同時(shí)，為擴(kuò)大新紫品牌物料在前線(xiàn)人員中的知曉度與認(rèn)知度，提高物料使用頻率，并確保物料使用的一致性，我們與前線(xiàn)團(tuán)隊(duì)緊密建聯(lián)，定期開(kāi)展線(xiàn)上直播培訓(xùn)與答疑活動(dòng)。通過(guò)收集真實(shí)客戶(hù)需求反饋，反哺品牌物料不斷完善。
又如，當(dāng)釘釘員工進(jìn)行客戶(hù)共創(chuàng)、拜訪時(shí)，為保障服務(wù)專(zhuān)業(yè)度，提升企業(yè)品牌形象，我們會(huì)準(zhǔn)備精美且適宜的伴手禮，并聯(lián)合市場(chǎng)團(tuán)隊(duì)，輸出一套完整的釘釘官方品牌介紹、釘釘集團(tuán)案例介紹等物料供其使用。
值得注意的是，釘釘?shù)纳鷳B(tài)服務(wù)商也是展現(xiàn)釘釘企業(yè)服務(wù)與形象的關(guān)鍵力量，因此，我們還為其提供統(tǒng)一裝修建議，包括門(mén)頭設(shè)計(jì)、裝修風(fēng)格、著裝要求、解決方案手冊(cè)等。
再如，在釘釘?shù)木€(xiàn)上場(chǎng)景中，釘釘官網(wǎng)、各業(yè)務(wù)產(chǎn)品H5價(jià)值頁(yè)等都是客戶(hù)快速了解產(chǎn)品的重要渠道。為提升內(nèi)部人員協(xié)同效率，我們?cè)O(shè)計(jì)開(kāi)發(fā)了釘釘內(nèi)容運(yùn)營(yíng)生產(chǎn)平臺(tái)——「叮當(dāng)貓」，其中沉淀并搭建了大量關(guān)于釘釘產(chǎn)品功能、價(jià)值介紹、企業(yè)案例和解決方案等模板，如同精心配置的“預(yù)制菜”，使用者可直接便捷取用。
此外，在B端具體業(yè)務(wù)中，品牌物料需更具靈活性。例如，在釘釘管理套件商業(yè)化場(chǎng)景中，針對(duì)面客材料繁多、演示組織操作門(mén)檻高、及時(shí)迭代性差等痛點(diǎn)，我們打造即開(kāi)即用的產(chǎn)品體驗(yàn)樣板間，讓客戶(hù)能夠快速、便捷、可視化地體驗(yàn)產(chǎn)品，加速客戶(hù)決策。
最后，B端場(chǎng)域下，客戶(hù)除了通過(guò)線(xiàn)下一對(duì)一或線(xiàn)上觸達(dá)服務(wù)了解產(chǎn)品介紹，各類(lèi)傳播渠道同樣是企業(yè)品牌與心智塑造的重要陣地。像大型企業(yè)發(fā)布會(huì)、產(chǎn)品公眾號(hào)、小紅書(shū)等平臺(tái)，都是不容忽視的關(guān)鍵場(chǎng)景。在釘釘，我們每年定期舉辦大型產(chǎn)品升級(jí)發(fā)布會(huì)，并借助各類(lèi)傳播渠道持續(xù)宣傳推廣，不斷擴(kuò)大品牌影響力。
品牌物料管理在B端業(yè)務(wù)中不僅是設(shè)計(jì)規(guī)范問(wèn)題，更是品牌資產(chǎn)運(yùn)營(yíng)、組織協(xié)同效能提升的系統(tǒng)工程。
在品牌物料投放與實(shí)際使用過(guò)程中，我們時(shí)常遭遇一些典型痛點(diǎn)場(chǎng)景，比如某會(huì)晤物料使用過(guò)期Logo、某線(xiàn)下展會(huì)采用過(guò)時(shí)的色彩規(guī)范、某產(chǎn)品價(jià)值頁(yè)與白皮書(shū)技術(shù)參數(shù)不一致等。追根溯源，這些問(wèn)題的核心成因在于上下游協(xié)同與一致性管理的缺失。在幾十人的小型企業(yè)中，此類(lèi)情況或許尚不嚴(yán)重，通過(guò)簡(jiǎn)單的相互“問(wèn)一嘴”，便能較快達(dá)成信息對(duì)焦。然而，一旦企業(yè)規(guī)模擴(kuò)張，人數(shù)達(dá)到幾百、上千甚至過(guò)萬(wàn)，品牌物料一致性的協(xié)同管理便會(huì)變得愈發(fā)困難。因此，為更高效地解決信息不對(duì)齊、不統(tǒng)一的難題，建立一套標(biāo)準(zhǔn)的品牌物料管理范式用以指導(dǎo)物料設(shè)計(jì)與使用的準(zhǔn)入及準(zhǔn)出，就顯得尤為必要。
在釘釘，隨著智能化的全面升級(jí)，為提升品牌物料的美觀度與專(zhuān)業(yè)度，同時(shí)提高物料調(diào)用效率、確保使用的一致性，我們與銷(xiāo)售團(tuán)隊(duì)特別成立專(zhuān)項(xiàng)項(xiàng)目組。在企服前線(xiàn)代表和各業(yè)務(wù)產(chǎn)品代表的關(guān)鍵支持下，形成了 「生產(chǎn)部」-「加工中心」-「面客部」 的品牌物料生產(chǎn)、加工與調(diào)用管理機(jī)制?！干a(chǎn)部」的人負(fù)責(zé)做什么，再到「面客部」的人負(fù)責(zé)賣(mài)什么，而處于中間環(huán)節(jié)負(fù)責(zé)加工的人員，則如同橋梁一般，確保上下游信息傳遞的準(zhǔn)確性以及品牌物料管理的一致性。比如：有人負(fù)責(zé)細(xì)化到行業(yè)或場(chǎng)景的demo設(shè)計(jì)，有人核心輸出標(biāo)桿客戶(hù)案例，還有人負(fù)責(zé)輸出一套完整的企業(yè)服務(wù)面客規(guī)范。做好品牌物料的一致性管理，能夠極大的提升B端客戶(hù)決策效率（降低認(rèn)知成本），同時(shí)強(qiáng)化企業(yè)專(zhuān)業(yè)可信度。
隨著行業(yè)變遷、客戶(hù)需求的不斷更迭以及技術(shù)的日新月異，B端品牌物料設(shè)計(jì)已悄然蛻變，從傳統(tǒng)認(rèn)知里單純的宣傳材料，逐步發(fā)展成為多維且個(gè)性化的服務(wù)與體驗(yàn)。當(dāng)下B端品牌物料的設(shè)計(jì)趨勢(shì)，聚焦于高效傳遞品牌一致性、強(qiáng)化專(zhuān)業(yè)信賴(lài)感，以及系統(tǒng)性管理好物料的生產(chǎn)、加工和面客宣發(fā)。從精心提煉品牌戰(zhàn)略，到積極探索客戶(hù)觸點(diǎn)創(chuàng)新，每一個(gè)環(huán)節(jié)都旨在降低客戶(hù)認(rèn)知成本，助力企業(yè)精準(zhǔn)傳遞產(chǎn)品服務(wù)及其價(jià)值，從而推動(dòng)客戶(hù)轉(zhuǎn)化。
以上就是本期為大家?guī)?lái)的B端設(shè)計(jì)趨勢(shì)之品牌物料系統(tǒng)設(shè)計(jì)的全部?jī)?nèi)容。后續(xù)，我們還將從動(dòng)效、圖標(biāo)等設(shè)計(jì)趨勢(shì)深入研究，期待在深耕B端產(chǎn)品設(shè)計(jì)的道路上，與各位攜手前行，共同進(jìn)步。
作者：冬然 @
本文由人人都是產(chǎn)品經(jīng)理作者【釘釘用戶(hù)體驗(yàn)】，原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash，基于 CC0 協(xié)議。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.jsyqsx.cn
