做交互設(shè)計(jì)10年，我為何轉(zhuǎn)崗到產(chǎn)品經(jīng)理？
編輯導(dǎo)語：由于審美的多優(yōu)化，產(chǎn)品設(shè)計(jì)風(fēng)格及類型也不盡相同，但核心都是圍繞用戶群體來迎合市場(chǎng)需求。本文將從我看到、我理解、我行動(dòng)、給我反饋這四個(gè)層面逐步遞進(jìn)闡明交互設(shè)計(jì)的本質(zhì)，值得閱讀學(xué)習(xí)。
近來，和新的交互團(tuán)隊(duì)溝通頗多。在溝通當(dāng)中，不免會(huì)陷入這樣的對(duì)話：我覺得這個(gè)設(shè)計(jì)不美，不優(yōu)雅、所以不合適。
每每，當(dāng)我們圍繞產(chǎn)品設(shè)計(jì)的討論進(jìn)入了“美丑與否”的階段，就基本上等同于陷入了“公說公有理、婆說婆有理”的泥沼。畢竟，審美是一個(gè)個(gè)體化的偏好，依賴于我們過往的學(xué)習(xí)、認(rèn)知和經(jīng)歷。圍繞產(chǎn)品去討論美丑，最后往往只能看誰的官帽子大就讓誰決定了。
但是，在涉及交互時(shí)，我們應(yīng)該聚焦于美丑的討論么？
我的答案是，不應(yīng)該。
在創(chuàng)作一幅畫作或雕塑的時(shí)候，個(gè)性化的作品之美是可以被討論的。你偏好特定的風(fēng)格，從而創(chuàng)作特定類型的作品，看客喜歡自然好，不喜歡也無所謂。因?yàn)樽髌肥紫仁菒偧旱模缓蟛攀菒側(cè)说摹Ｎ覀兘栌梢粋€(gè)個(gè)性化的作品來完成自我的投射和受眾的篩選。
而在規(guī)劃一款面向大眾產(chǎn)品的時(shí)候，其商業(yè)化的產(chǎn)品之美則不應(yīng)該被討論，更應(yīng)該被數(shù)據(jù)衡量。我們不是要把自己偏好的風(fēng)格強(qiáng)塞給不同的用戶，而是要以用戶可接受的方式將自己的產(chǎn)品和服務(wù)兜售出去。和作品不同，商品首先是悅?cè)说模缓蟛攀菒偧旱摹Ｎ覀兠鎸?duì)的是一個(gè)被篩選出的受眾群體，來完成品牌和服務(wù)價(jià)值的投射。即便市場(chǎng)上有很多，我個(gè)體不喜歡的產(chǎn)品設(shè)計(jì)，但是仍然要尊重其，在數(shù)據(jù)指標(biāo)上是有效的。
當(dāng)用戶面對(duì)交互界面時(shí)，會(huì)經(jīng)歷：我看到、我理解、我行動(dòng)、給我反饋的過程。過程中，逐環(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)在用戶從“我看到” 到 “我理解”的認(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è)用戶是秉持著理性來使用我們產(chǎn)品的，殊不知，他們大概率是以感性的方式來感知和應(yīng)用我們的產(chǎn)品，未必能夠體會(huì)到產(chǎn)品精致的“匠心”：
比如，對(duì)于列表頁卡片來說，同樣的信息，以標(biāo)簽的形式展現(xiàn)就不如以標(biāo)題的形式展現(xiàn)。”字要大“定律，在列表頁卡片的設(shè)計(jì)中屢試不爽。
又如，在同一個(gè)頁面上，如果我們?cè)黾恿藘蓚€(gè)關(guān)注按鈕，UV關(guān)注轉(zhuǎn)化效率就會(huì)比一個(gè)的要好。以個(gè)人體驗(yàn)為例，我一直在使用一款壁紙軟件，但直到某一日，我才驚覺原來這個(gè)頁面里有兩個(gè)收藏按鈕，我一直只在使用其中一個(gè)。我拿著手機(jī)問了身邊的朋友，呈現(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ì)師容易代入專家視角的環(huán)節(jié)，有專家視角的人士往往會(huì)傾向于使用書面的、應(yīng)用內(nèi)專有的表述方式，比如：溝通、馬克、直聊等等，但是，這種不說人話的文案顯然既不利于理解，又無法有效推動(dòng)用戶做出有效的行動(dòng)。
套用福格行為模型，行為發(fā)生于動(dòng)機(jī)、能力和提示同時(shí)出現(xiàn)的時(shí)候。產(chǎn)品交互的作用，就是要降低用戶使用產(chǎn)品所需的能力門檻，給到用戶充分的行動(dòng)提示，從而促進(jìn)行為密度的提升。
從過往2C銷轉(zhuǎn)的經(jīng)驗(yàn)上來看，同樣的頁面布局，暖色的按鈕比冷色的按鈕轉(zhuǎn)化率高、直白的口語化文案比正式的書面語文案轉(zhuǎn)化率高。數(shù)據(jù)結(jié)果告訴我們，那些原本中立的用戶，是可以被顏色、文案所引導(dǎo)，從而做出有效行動(dòng)的。
這個(gè)環(huán)節(jié)基本上就屬于基礎(chǔ)認(rèn)知了，不要讓自己的產(chǎn)品在交互過程中出現(xiàn)“死機(jī)”態(tài)。在實(shí)踐中可以更多的使用非阻塞式操作，通過異步的方式給到用戶更及時(shí)和靈敏的反饋：
以用戶上傳頭像為例，一種做法是在用戶上傳完畢后才給到提示；另一種做法則是本地完成操作后就先給用戶反饋，隨后進(jìn)入后臺(tái)的上傳，只有在上傳失敗且重試失敗后，才給到用戶提示。
以內(nèi)容平臺(tái)發(fā)布UGC內(nèi)容為例，一種做法是先審后發(fā)，先審核通過后再發(fā)布到公域；另一種做法則是先發(fā)后審，先讓內(nèi)容對(duì)用戶自己可見，并插入到他信息流的首位，然后在審核通過后發(fā)布到公域。從公域的可視性上來說，兩種方案是一致的，但是給用戶體感上，先發(fā)后審的即時(shí)性更強(qiáng)。
只有能夠切實(shí)降低用戶認(rèn)知阻力、操作阻力、反饋延時(shí)的交互，才稱得上是商品維度的好交互。美感與否、邏輯與否，都是上帝視角的先驗(yàn)審判，而逐環(huán)節(jié)的漏斗指標(biāo)才是用戶視角的后驗(yàn)投票。
不追求美麗，那么追求什么呢？
簡(jiǎn)單，是我目前對(duì)產(chǎn)品和交互的認(rèn)知和追求。
許是年紀(jì)大了，便終于因?yàn)橐庾R(shí)到自己的審美是非典型的、有偏差的，開始更多的不執(zhí)念于自己，而落地于用戶觀察。
簡(jiǎn)單，是一種有效的策略。
因?yàn)楹?jiǎn)單，所以用戶更容易理解我們提供的信息和內(nèi)容，從而更快速的完成信息的識(shí)別和認(rèn)知。
因?yàn)楹?jiǎn)單，所以用戶更容易聚焦在主路徑上，不會(huì)在諸多紛繁的選項(xiàng)中迷失、陷入選擇困難。
因?yàn)楹?jiǎn)單，所以用戶不需要了解平臺(tái)的黑盒，他能夠得到一個(gè)更簡(jiǎn)單的系統(tǒng)，看到的就是直接的輸入輸出、按下一個(gè)按鈕收獲一個(gè)商品。
簡(jiǎn)單的策略，不光讓用戶得利，我們也會(huì)從中受益，使得前期試錯(cuò)成本和后期維護(hù)成本都降低許多。
簡(jiǎn)單，是一道困難的題目。
追求簡(jiǎn)單，所以我們需要找到用戶群體的最大公約數(shù)，只有將這個(gè)最大公約數(shù)落地在產(chǎn)品設(shè)計(jì)中，才能讓用戶快速理解和接受我們的設(shè)計(jì)；
追求簡(jiǎn)單，所以我們需要使用更平白的文本、更直接的圖標(biāo)，不端著、說人話，才能讓用戶沒有理解的障礙、一看到就能夠明白。
追求簡(jiǎn)單，所以我們需要克制自己對(duì)于巴洛克風(fēng)格的摯愛，不斷的收斂自己想要多做功的念頭，砍到20%的需求，以MVP的方式去推進(jìn)業(yè)務(wù)。
從追求個(gè)體的美麗，到追求群體的簡(jiǎn)單；從追求個(gè)體的控制，到追求群體的順應(yīng)。
本文由 @YanZehua 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
編輯導(dǎo)讀：動(dòng)效效果是一個(gè)功能性元素，而不僅僅是一個(gè)裝飾。本文作者介紹了五個(gè)交互動(dòng)效效果，水平視差滾動(dòng)效果、動(dòng)畫搜索欄交互、提交按鈕啟動(dòng)信息、頁面間的分頁動(dòng)畫、用粘性元素展開卡片，希望對(duì)你有幫助。
設(shè)計(jì)一個(gè)帶有動(dòng)效效果和轉(zhuǎn)場(chǎng)效果的用戶界面，是為另一個(gè)手機(jī)應(yīng)用規(guī)劃一個(gè)更好的用戶體驗(yàn)的好方法。在一個(gè)注意力持續(xù)時(shí)間短暫的世界里，動(dòng)畫-微交互是刺激用戶參與的好方式。
這就是為什么 Airbnb最近推出Lottie–它是一個(gè)“新開源工具，可以輕松為本地應(yīng)用程序添加動(dòng)效效果”像Lottie項(xiàng)目表明了，為應(yīng)用程序和網(wǎng)站增加用戶體驗(yàn)，其中添加動(dòng)畫作為一個(gè)新元素越來越重要。
就像所有放入界面中的元素并與之交互的過程一樣，動(dòng)效效果也是一個(gè)功能性元素，而不僅僅是一個(gè)裝飾。動(dòng)效效果在用戶界面應(yīng)該堅(jiān)持一個(gè)恰到好處的處理，而背后設(shè)置始終需要有一個(gè)明確的目的。當(dāng)動(dòng)效效果是錦上添花而不是美中不足時(shí)，用戶體驗(yàn)會(huì)更流暢。
以下是介紹的交互動(dòng)效效果：
視差效果在數(shù)字系統(tǒng)設(shè)計(jì)中可以同時(shí)用于垂直面和水平面。視差效果首次應(yīng)用是在視頻游戲，數(shù)十年后它進(jìn)入了網(wǎng)頁設(shè)計(jì)應(yīng)用中，然后漸漸的又進(jìn)入了移動(dòng)應(yīng)用程序，使用靜態(tài)或緩慢移動(dòng)的背景圖像與快速移動(dòng)的前景圖像，創(chuàng)建一個(gè)多層次的3D滾動(dòng)效果。這使用戶體驗(yàn)更加身臨其境，以其微妙之處吸引用戶。為什么這會(huì)讓人眼前一亮-
一起看一下在設(shè)計(jì)原則中的兩個(gè)視差滾動(dòng)效果實(shí)例。
手機(jī)游戲武器卡：
Weapon cards by Hassan Mahmud
視差效果最佳位置之一是在移動(dòng)應(yīng)用程序或網(wǎng)站上水平或垂直滾動(dòng)卡片，體驗(yàn)最流暢環(huán)節(jié)的感受，是在最后部分的一張卡片。類似于iphone在你滾動(dòng)到特定列表的末尾時(shí)引入的橡皮筋效應(yīng)。
耐克APP促銷卡：
Nike promotional cards by Jardson Almeida
這個(gè)例子是耐克APP概念創(chuàng)作的視差滾動(dòng)效果，來促進(jìn)即將到來的產(chǎn)品發(fā)布。
這個(gè)設(shè)計(jì)通過突出前景元素—- 鞋子—- 將其提升了一個(gè)層次，從而超越了背景卡片的邊緣。這個(gè)效果彌補(bǔ)滾動(dòng)時(shí)發(fā)生的背景顏色改變。正如你看到的例子，精心制作的視差互動(dòng)效果可以很容易幫助你從產(chǎn)品群中脫穎而出并為你的訪客建立一個(gè)好的印象。不要認(rèn)為視差是純粹的裝飾，像你使用的其他技術(shù)一樣，它應(yīng)該為你的用戶增加真正有價(jià)值的體驗(yàn)方式被融合。
但是，需要注意的是在視差效應(yīng)范圍內(nèi)過多的運(yùn)動(dòng)可能會(huì)對(duì)那些患有前庭疾病的人造成傷害。運(yùn)動(dòng)錯(cuò)覺和深度錯(cuò)覺可能導(dǎo)致眩暈或者迷失方向感，請(qǐng)切記這些設(shè)計(jì)準(zhǔn)則：
搜索欄是用戶在移動(dòng)應(yīng)用程序或網(wǎng)頁設(shè)計(jì)中最常見的圖形元素之一。在這種類型的動(dòng)畫中，界面通常只有一個(gè)搜索圖標(biāo)，當(dāng)你點(diǎn)擊它搜索輸入字段時(shí)會(huì)顯示一個(gè)彈性動(dòng)畫。通過在搜索元素中添加一個(gè)微妙的動(dòng)畫，設(shè)計(jì)師可以實(shí)現(xiàn)兩個(gè)基本目標(biāo):
讓我們看一下這個(gè)交互的例子：
Search transform by Alex Pronsky
這個(gè)設(shè)計(jì)展示了放大鏡（搜素欄）作為圓形圖標(biāo)，點(diǎn)擊該圖標(biāo)時(shí)它會(huì)有動(dòng)效，變成藥丸形狀的搜索框。這是一個(gè)非常輕量級(jí)的交互設(shè)計(jì)，在 Principle 上只需要不到5個(gè)頁面就可以實(shí)現(xiàn)，并且在開發(fā)應(yīng)用程序或網(wǎng)站時(shí)也同樣簡(jiǎn)單。
用戶填寫表單或在應(yīng)用程序中進(jìn)行某些選擇按下提交按鈕之后就會(huì)出現(xiàn)這個(gè)動(dòng)畫。一個(gè)應(yīng)用程序首次啟動(dòng)并且所有序緩存和數(shù)據(jù)都被提取時(shí)，啟動(dòng)(Splash) 動(dòng)畫也會(huì)被使用。啟動(dòng)動(dòng)畫通常包括 logo 和應(yīng)用程序的名稱，通常會(huì)在應(yīng)用程序打開前在屏幕上出現(xiàn)片刻。為什么這會(huì)讓人眼前一亮-
讓我們來看一個(gè)交互式啟動(dòng)畫面的例子：
Submit splash screen by Khai
這個(gè)設(shè)計(jì)是用戶在應(yīng)用程序中完成提交交互之后的展示的動(dòng)畫。當(dāng)數(shù)據(jù)被發(fā)送到數(shù)據(jù)庫時(shí)，彈跳球創(chuàng)建了一個(gè)有趣的體驗(yàn)，接下來的勾號(hào)向用戶提供反饋，告訴用戶的操作是成功的，這是一個(gè)重要的體驗(yàn)實(shí)現(xiàn)。以下是啟動(dòng)畫面時(shí)要遵循的一些最佳的方法：
分頁是一系列相互連接且內(nèi)容相似的頁面，需要注意的是即使頁面中某一部分的內(nèi)容可以分為不同的頁面，我們?nèi)匀粚⑦@個(gè)概念定義為分頁。其優(yōu)點(diǎn)包括3個(gè)：更容易的導(dǎo)航、更好的用戶體驗(yàn)、更流暢的購買過程。通常用在電子商務(wù)網(wǎng)站。
讓我們來看一個(gè)分頁組件的例子，它可以在各個(gè)部分之間滑動(dòng)并且可以通過動(dòng)畫創(chuàng)建一個(gè)令人愉快的用戶體驗(yàn)：
Pagination by André Gonçalves
當(dāng)用戶在不同部分之間切換時(shí)，它創(chuàng)造了一種流暢的用戶體驗(yàn)。它可以用在應(yīng)用程序中用戶可以在各個(gè)部分之間快速滑動(dòng)。例如瀏覽電子商務(wù)網(wǎng)站中的產(chǎn)品圖片、閱讀教育應(yīng)用程序中的不同部分信息，或者按照步驟創(chuàng)建食品應(yīng)用程序的配方。
在用戶界面設(shè)計(jì)中，卡片列表是一個(gè)易于展示信息快的方法。借鑒現(xiàn)實(shí)世界中使用實(shí)物卡片記憶和組織信息的方法ーー例如抽屜卡或便利貼ーー卡片列表顯示一系列卡片，每張卡片包含一小部分信息。因此，設(shè)計(jì)的真正的難點(diǎn)在于平衡信息的傳遞方式，而不是讓使用者不知所措。
用戶應(yīng)該得到一個(gè)清晰的圖片并準(zhǔn)確傳達(dá)信息，如果用戶選擇深入瀏覽時(shí)，可以選擇擴(kuò)展信息和更深入的展示。保持卡片展開的連續(xù)性、流動(dòng)性應(yīng)是平順且感覺就像是一個(gè)連接在一起的感覺。
像上面所有的交互一樣，看一個(gè)交互設(shè)計(jì)的例子：
MVMT concept by Lukas Guschlbauer
這個(gè)設(shè)計(jì)是用在一個(gè)電子商務(wù)的應(yīng)用程序，購買手表顯示卡的項(xiàng)目。主要的信息如價(jià)格和等級(jí)需要顯示在每張卡片。擴(kuò)展卡片可以顯示額外的信息，例如使用特點(diǎn)和推薦。在消費(fèi)購買決策時(shí)，這款手表的粘性擴(kuò)展視圖創(chuàng)造了一個(gè)更好的體驗(yàn)。直觀的使用和-正確的操作-通常美學(xué)上也是令人舒適的。擴(kuò)展卡片列表可以構(gòu)建響應(yīng)式布局設(shè)計(jì)，也是提高可用性的絕佳方案。目的是提高瀏覽內(nèi)容或者信息量大的應(yīng)用程序。
作者：Samarth Zalte
本文由@木之 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自 Unsplash，基于CC0協(xié)議。
在互聯(lián)網(wǎng)領(lǐng)域中，人機(jī)之間的互動(dòng)過程就是交互。交互也有一些可預(yù)測(cè)的、重復(fù)出現(xiàn)的規(guī)律，作者總結(jié)了其中常見的七種C端交互模式，可以提高大家的工作效率，分享給大家。
前段時(shí)間有個(gè)產(chǎn)品童鞋，他剛加我就問了一大串問題。
什么是模式（Pattern）？什么是模版（Template）？這兩個(gè)概念有什么區(qū)別？
作為一個(gè)熱心好學(xué)、樂于助人的產(chǎn)品仔，我當(dāng)然和他暢聊了一個(gè)多小時(shí)，順便總結(jié)下聊天內(nèi)容。
你是不是也經(jīng)常在生活工作中，碰到類似“行為模式、設(shè)計(jì)模式、語言模式、文檔模版、表格模版”等名詞。
但又搞不清它們有什么區(qū)別，搞懂了又有什么用？
別急，我們花幾分鐘，先來嘮嘮什么是模式。
可預(yù)測(cè)、重復(fù)出現(xiàn)的現(xiàn)象或規(guī)律，通過歸納總結(jié)，就變成了某一種模式。
我們的生活中，就有許多模式的影子。
比如常見的商業(yè)模式、營(yíng)銷模式、行為模式、數(shù)學(xué)模式、語言模式等。
舉個(gè)例子：
簡(jiǎn)單說下行為模式，它分為了“習(xí)慣模式、消費(fèi)模式、學(xué)習(xí)模式”等等。
苦逼打工仔普遍的消費(fèi)模式，一般是工作日花錢少，到了周末都愛到商場(chǎng)逛街和購物。
但又有特例，我有個(gè)朋友就特別宅，他只喜歡在上班的時(shí)候，摸魚逛淘寶下單，簡(jiǎn)直離譜~
掌握模式，有什么用？
當(dāng)你掌握了模式的概念，并嘗試在生活中使用，相信你一定能感受到這 7 個(gè)好處。
我們?cè)囍倥e個(gè)例子，加深下對(duì)模式的理解，順便學(xué)學(xué)交互設(shè)計(jì)。
什么是交互？
簡(jiǎn)單來說，交互指的是在互聯(lián)網(wǎng)領(lǐng)域中，人、機(jī)之間的一系列互動(dòng)過程。
我還提煉了 3 種常見模式（簡(jiǎn)單反饋、數(shù)據(jù)操作、業(yè)務(wù)判斷），比較粗糙湊合也能用。
現(xiàn)在試著再系統(tǒng)總結(jié)下，我常用的 7 種 C 端交互模式，主要有：導(dǎo)航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導(dǎo)模式。
學(xué)完就能用，趕緊卷起來~
有人就問了，還有更多交互模式嗎？
確實(shí)可以有，等我有時(shí)間再編幾個(gè)。。
話說回來，如果是一些特別復(fù)雜的業(yè)務(wù)規(guī)則，可能會(huì)涉及到 N 個(gè)交互模式的任意組合。
常見的導(dǎo)航模式有按鈕組合、標(biāo)簽菜單、宮格布局、列表視圖等。
導(dǎo)航模式的主要作用是，告知用戶當(dāng)前在網(wǎng)站的位置，以及接下來到哪些頁面，這有點(diǎn)像地圖 APP。
上面這張圖中，包含了幾種導(dǎo)航組件呢？
搜索，是各大電商 APP 常見的交互模式。
搜索模式允許用戶輸入關(guān)鍵詞，然后系統(tǒng)返回搜索結(jié)果。
打個(gè)比方，這有點(diǎn)像在 Navicat 中寫了一段 SQL 查詢。
SELECT id, name, age
FROM users
WHERE age > 18
這段 SQL 的作用是，查詢大于 18 歲的用戶信息，包含序號(hào)、名稱、年齡。
常見的反饋模式組件，涉及了對(duì)話框、吐司提示、氣泡提示等。
反饋模式用的比較多的場(chǎng)景是，告知用戶一些信息或提示，比如“輸入密碼錯(cuò)了、展示訂單取消的注意事項(xiàng)”等。
輸入模式主要用于新數(shù)據(jù)創(chuàng)建，例如淘寶下單時(shí)，你新增了一個(gè)收貨地址。
打開美團(tuán)叫個(gè)外賣，整個(gè)訂單創(chuàng)建流程，也是輸入模式。
有很多人可能會(huì)把輸入模式和編輯模式搞混。
區(qū)別它們的一個(gè)方法是，交互流程涉及新數(shù)據(jù)創(chuàng)建，還是改舊數(shù)據(jù)。
改數(shù)據(jù)的話，那就是編輯模式。
我們?cè)诳吹揭恍└韶浳恼拢蚝糜玫男〕绦蛳胍D(zhuǎn)發(fā)給朋友，那就要用到分享模式。
分享模式可以很簡(jiǎn)單，也可以往復(fù)雜了做，看產(chǎn)品階段去實(shí)現(xiàn)。
引導(dǎo)模式和反饋模式有點(diǎn)像，都是展示特定的內(nèi)容。
那怎么分辨它們呢？
以設(shè)計(jì)師視角來看，反饋模式需要用戶觸發(fā)，系統(tǒng)被動(dòng)顯示。
而要讓用戶特別關(guān)注的信息，那就是引導(dǎo)模式。
模式，即抽象的規(guī)律。——好夕雷
說了這么多概念和例子，你是不是對(duì)模式的認(rèn)知更清晰了呢？
模式運(yùn)用在產(chǎn)品領(lǐng)域，就有了這 7 種交互模式，分別是“導(dǎo)航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導(dǎo)模式”。
如果學(xué)會(huì)了模式，那么無論生活還是工作，相信你一定能輕松應(yīng)對(duì)、事半功倍。
本文由 @好夕雷 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。
前面的文章我們分享了交互設(shè)計(jì)思維，這篇文章，我們來看看用戶目標(biāo)與交互目標(biāo)。交互設(shè)計(jì)的核心，就是幫用戶拆解這些目標(biāo)并找到最優(yōu)路徑，讓他們覺得“這事兒沒那么難”。
在交互設(shè)計(jì)中，用戶的目標(biāo)可以理解為他們希望通過使用產(chǎn)品完成的事情。換句話說，就是用戶打開你的產(chǎn)品時(shí)“心里想要達(dá)成的事”。這個(gè)目標(biāo)可能是很直接的，比如在外賣App上訂一份喜歡的午餐；也可能是抽象的，比如通過一款學(xué)習(xí)軟件提升自己的外語水平。無論目標(biāo)是什么，用戶都期望在操作的過程中高效、順暢且愉快地達(dá)成目標(biāo)。
交互設(shè)計(jì)的核心，就是幫用戶拆解這些目標(biāo)并找到最優(yōu)路徑，讓他們覺得“這事兒沒那么難”。比如，如果用戶的目標(biāo)是查找一條航班信息，設(shè)計(jì)師需要確保他們可以快速找到搜索入口，并在最短的時(shí)間內(nèi)完成查詢，而不是在復(fù)雜的頁面中迷路。
除了完成任務(wù)，用戶還有情感上的目標(biāo)，比如體驗(yàn)愉悅感、安全感或滿足感。舉個(gè)例子，當(dāng)用戶在付款時(shí)，他們的功能性目標(biāo)是完成支付，而情感性目標(biāo)可能是確認(rèn)交易安全或者支付方式簡(jiǎn)單快捷。這就是為什么很多支付產(chǎn)品會(huì)在完成支付后彈出一個(gè)愉快的提示動(dòng)畫，比如一個(gè)小勾或一個(gè)成功的笑臉——它不僅告訴用戶任務(wù)完成了，還讓他們感到一種心理上的正反饋。
因此，交互設(shè)計(jì)思維的本質(zhì)是站在用戶的視角去思考：他們想要完成什么，他們需要如何完成，以及我們?nèi)绾巫屵@個(gè)過程變得簡(jiǎn)單、高效和愉悅。滿足用戶目標(biāo)，才是設(shè)計(jì)的成功所在。
在交互設(shè)計(jì)中，產(chǎn)品不僅是幫助用戶完成任務(wù)的工具，更是一個(gè)信息傳遞的媒介。那么，產(chǎn)品需要傳遞的信息到底是什么呢？簡(jiǎn)單來說，就是**“我是什么”“我能做什么”“你現(xiàn)在在哪兒”“接下來該怎么做”**這幾大核心信息。
首先，產(chǎn)品需要明確地告訴用戶“我是什么”。比如，你打開一個(gè)外賣App，頁面上醒目的美食圖片和“搜索餐廳”的提示，就在告訴你，這個(gè)App的核心功能是幫助你找到食物并下單。如果用戶對(duì)產(chǎn)品的功能感到困惑，那設(shè)計(jì)就失去了它的基礎(chǔ)價(jià)值。
接著，產(chǎn)品要傳遞“我能做什么”的信息。也就是說，用戶需要很清楚地知道，這個(gè)產(chǎn)品能為他們提供哪些服務(wù)，或者有哪些功能可以用。比如在拍照App中，用戶可能會(huì)關(guān)心是否有濾鏡或編輯功能。設(shè)計(jì)師要通過直觀的界面布局和易識(shí)別的圖標(biāo)來傳遞這些功能信息，避免用戶四處尋找。
再來是“你現(xiàn)在在哪兒”。用戶在使用產(chǎn)品的過程中，需要隨時(shí)了解自己在操作流程中的位置，比如是剛開始填寫訂單信息，還是已經(jīng)進(jìn)入支付環(huán)節(jié)。這種清晰的路徑感，可以通過導(dǎo)航欄、進(jìn)度條等設(shè)計(jì)元素來實(shí)現(xiàn)，讓用戶有一種“掌控感”。
最后，也是最重要的，產(chǎn)品需要告訴用戶“接下來該怎么做”。交互設(shè)計(jì)的一個(gè)關(guān)鍵點(diǎn)，就是要引導(dǎo)用戶完成操作，避免他們卡在某一步不知所措。例如，當(dāng)用戶填寫表單時(shí)，如果某項(xiàng)信息漏填了，產(chǎn)品需要用清晰的提示信息，比如紅色邊框或彈窗，告訴用戶哪里需要修正。通過明確的反饋，用戶會(huì)感到流程是流暢的，而不是無頭緒的。
總結(jié)來說，產(chǎn)品傳遞的信息是為了讓用戶明白自己的位置、了解操作步驟、感受到控制感和安全感。一個(gè)設(shè)計(jì)得當(dāng)?shù)漠a(chǎn)品，會(huì)像一位貼心的向?qū)В粩嘤煤线m的方式傳遞這些信息，讓用戶有條不紊地完成目標(biāo)，同時(shí)享受使用的過程。
在交互設(shè)計(jì)中，找到用戶目標(biāo)與產(chǎn)品目標(biāo)之間的平衡點(diǎn)就像搭建一座橋——一邊是用戶的需求和期望，另一邊是產(chǎn)品的商業(yè)目標(biāo)和核心價(jià)值。設(shè)計(jì)的任務(wù)，就是讓這座橋既穩(wěn)固又通暢，讓用戶愿意通過產(chǎn)品實(shí)現(xiàn)他們的目標(biāo)，同時(shí)產(chǎn)品也能達(dá)成自己的目標(biāo)。
總結(jié)來說，設(shè)計(jì)師的職責(zé)是成為用戶和產(chǎn)品目標(biāo)之間的“調(diào)解員”，用設(shè)計(jì)語言找到兩者的共贏點(diǎn)。一個(gè)成功的設(shè)計(jì)，不僅能讓用戶滿意，還能幫助產(chǎn)品實(shí)現(xiàn)長(zhǎng)遠(yuǎn)的發(fā)展目標(biāo)。這種平衡并不容易，但通過不斷洞察、嘗試和優(yōu)化，就能讓產(chǎn)品和用戶之間建立起良性連接。
本文由 @ DesignLink 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)
在前面的文章中，我們定義了交互思維和流程、目標(biāo)，接下來我們分享交互設(shè)計(jì)思維與我們常說的產(chǎn)品思維、體驗(yàn)思維等的融合。
在現(xiàn)代產(chǎn)品開發(fā)中，交互思維與產(chǎn)品設(shè)計(jì)思維的融合已經(jīng)成為提升用戶體驗(yàn)的關(guān)鍵。兩者看似獨(dú)立，卻可以在實(shí)際設(shè)計(jì)過程中形成互補(bǔ)，打造出更加契合用戶需求的產(chǎn)品。本文將從兩者的特點(diǎn)、融合的價(jià)值，以及實(shí)際應(yīng)用場(chǎng)景中如何落地等角度出發(fā)，深入探討它們的結(jié)合。
交互思維：聚焦人與界面的連接
交互思維的核心在于用戶與產(chǎn)品的互動(dòng)體驗(yàn)。它關(guān)注的是：
交互思維傾向于優(yōu)化用戶的操作路徑，將復(fù)雜的技術(shù)邏輯隱藏在背后，讓用戶感受到簡(jiǎn)單和直觀。
例子：在淘寶購物車中，“全選”功能按鈕被設(shè)計(jì)在靠近商品列表的頂部，方便用戶快速選中所有商品；而刪除操作則以批量和單選兩種方式提供，提升操作靈活性。
產(chǎn)品設(shè)計(jì)思維：關(guān)注用戶價(jià)值與商業(yè)目標(biāo)
產(chǎn)品設(shè)計(jì)思維則是更全局的，它關(guān)注的是產(chǎn)品能否滿足用戶需求并實(shí)現(xiàn)商業(yè)價(jià)值。核心問題包括：
產(chǎn)品設(shè)計(jì)思維更偏向戰(zhàn)略層面，要求對(duì)市場(chǎng)、用戶和商業(yè)有全局的理解，并制定產(chǎn)品的發(fā)展方向。
例子：微信從“即時(shí)通訊”入手，以簡(jiǎn)單的聊天功能切入市場(chǎng)，但通過持續(xù)擴(kuò)展支付、朋友圈、公眾號(hào)等模塊，構(gòu)建了一個(gè)完善的生態(tài)系統(tǒng)。
兩種思維的結(jié)合，能夠更好地兼顧用戶體驗(yàn)和商業(yè)價(jià)值。以下是幾種主要的融合方式：
1）以用戶為中心，兼顧商業(yè)目標(biāo)
交互思維： 設(shè)計(jì)流暢、直觀的操作流程，提升用戶體驗(yàn)。
產(chǎn)品設(shè)計(jì)思維： 在流暢體驗(yàn)的基礎(chǔ)上，引導(dǎo)用戶完成關(guān)鍵行為（如購買、注冊(cè)等），實(shí)現(xiàn)商業(yè)目標(biāo)。
案例：美團(tuán)外賣的下單流程
2）用戶需求與技術(shù)限制的平衡
交互思維： 關(guān)注用戶直觀感受，簡(jiǎn)化復(fù)雜操作，讓用戶專注于目標(biāo)任務(wù)。
產(chǎn)品設(shè)計(jì)思維： 在技術(shù)和資源限制內(nèi)，找到實(shí)現(xiàn)用戶需求的最佳方案。
案例：滴滴出行的“一鍵叫車”功能
3）數(shù)據(jù)驅(qū)動(dòng)與用戶體驗(yàn)的結(jié)合
交互思維： 基于用戶行為數(shù)據(jù)優(yōu)化界面和流程，提升操作效率。
產(chǎn)品設(shè)計(jì)思維： 基于數(shù)據(jù)分析判斷用戶需求的優(yōu)先級(jí)，調(diào)整產(chǎn)品功能布局。
案例：淘寶推薦算法與界面設(shè)計(jì)
淘寶的個(gè)性化推薦系統(tǒng)通過AI分析用戶瀏覽和購買行為，推薦相關(guān)商品。交互設(shè)計(jì)確保推薦商品的展示方式簡(jiǎn)潔、直觀，不打擾用戶正常瀏覽，增強(qiáng)購物體驗(yàn)的同時(shí)提升成交轉(zhuǎn)化率。
4）感性設(shè)計(jì)與理性分析的結(jié)合
交互思維： 關(guān)注情感體驗(yàn)，設(shè)計(jì)讓用戶愉悅的互動(dòng)。
產(chǎn)品設(shè)計(jì)思維： 從用戶行為和反饋中提煉需求，找到情感體驗(yàn)的落地點(diǎn)。
案例：支付寶的“年度賬單”功能
隨著AI技術(shù)的深入發(fā)展，交互思維與產(chǎn)品設(shè)計(jì)思維的融合將進(jìn)一步進(jìn)化：
案例展望：
在未來的外賣App中，AI不僅能推薦菜品，還能根據(jù)天氣、飲食偏好提供動(dòng)態(tài)優(yōu)惠，讓用戶感到“被理解”。同時(shí)，界面交互會(huì)變得更加智能，比如直接通過語音完成點(diǎn)餐和支付。
在數(shù)字產(chǎn)品開發(fā)中，交互思維和用戶體驗(yàn)設(shè)計(jì)思維（UX Design Thinking）常常交織在一起，共同塑造出令人滿意的產(chǎn)品體驗(yàn)。兩者的融合不僅能提升產(chǎn)品的使用效率，還能激發(fā)用戶的情感共鳴，最終實(shí)現(xiàn)用戶目標(biāo)與商業(yè)價(jià)值的雙贏。
1）交互思維：聚焦人與界面的高效互動(dòng)
交互思維主要關(guān)注用戶與產(chǎn)品之間的操作過程，旨在通過直觀的界面設(shè)計(jì)和高效的交互方式，幫助用戶輕松完成任務(wù)。其核心要素包括：
2）用戶體驗(yàn)設(shè)計(jì)思維：以用戶為中心的全局視角
用戶體驗(yàn)設(shè)計(jì)思維是以用戶需求和用戶感受為核心的一種方法論，涉及產(chǎn)品從設(shè)計(jì)到使用的整個(gè)生命周期。其重點(diǎn)在于：
簡(jiǎn)單類比：
交互思維像是一位專注于修路的工程師，確保路徑筆直流暢；而用戶體驗(yàn)設(shè)計(jì)思維更像是一位城市規(guī)劃師，考慮如何讓整個(gè)城市的交通系統(tǒng)高效且宜居。
1）從細(xì)節(jié)到全局，滿足用戶操作與體驗(yàn)的雙重需求
交互思維注重細(xì)節(jié)，優(yōu)化每一個(gè)交互動(dòng)作；而用戶體驗(yàn)設(shè)計(jì)思維關(guān)注全局，確保整個(gè)使用流程的流暢性和一致性。兩者結(jié)合能讓用戶在每個(gè)環(huán)節(jié)都感到舒適且順暢。
案例：微信的語音消息功能
2）情感設(shè)計(jì)與功能設(shè)計(jì)的結(jié)合
交互思維解決“怎么用”的問題，用戶體驗(yàn)設(shè)計(jì)思維則深入到“為什么用”和“用后感受如何”。情感設(shè)計(jì)是兩者融合的一個(gè)關(guān)鍵點(diǎn)，既提升用戶滿意度，又增強(qiáng)產(chǎn)品粘性。
案例：支付寶的完成支付動(dòng)畫
3）用戶需求與設(shè)計(jì)約束的平衡
交互思維幫助優(yōu)化操作路徑，而用戶體驗(yàn)設(shè)計(jì)思維則考慮設(shè)計(jì)的合理性和場(chǎng)景適配性。在技術(shù)和資源的限制下，兩者需要共同探索最佳方案。
案例：滴滴出行的路線規(guī)劃與確認(rèn)
4）數(shù)據(jù)驅(qū)動(dòng)與用戶感知的結(jié)合
數(shù)據(jù)分析是用戶體驗(yàn)設(shè)計(jì)思維的重要部分，而交互思維則利用這些數(shù)據(jù)優(yōu)化每一次用戶操作。兩者的結(jié)合能實(shí)現(xiàn)功能的個(gè)性化和體驗(yàn)的精準(zhǔn)化。
案例：淘寶的商品推薦系統(tǒng)
抖音作為短視頻平臺(tái)，在交互與用戶體驗(yàn)設(shè)計(jì)的結(jié)合上表現(xiàn)得尤為出色：
隨著AI的普及，交互思維與用戶體驗(yàn)設(shè)計(jì)思維的融合將進(jìn)入新的階段：
案例展望：智能客服系統(tǒng)
未來的智能客服不僅能準(zhǔn)確理解用戶問題，還能根據(jù)情緒識(shí)別調(diào)整對(duì)話語氣，同時(shí)提供即時(shí)解決方案與友好的互動(dòng)體驗(yàn)。
交互思維與界面設(shè)計(jì)思維的融合，是現(xiàn)代產(chǎn)品設(shè)計(jì)中的核心命題。二者分別專注于用戶操作路徑和界面視覺呈現(xiàn)，彼此互補(bǔ)，共同打造出功能性與美觀性兼具的產(chǎn)品體驗(yàn)。本文將從兩者的概念、融合的價(jià)值以及實(shí)際案例中剖析如何實(shí)現(xiàn)這種深度結(jié)合。
1）交互思維：聚焦操作路徑與用戶效率
交互思維的核心在于優(yōu)化用戶操作的每一步，降低操作復(fù)雜度，提升使用效率。
其關(guān)注的主要問題包括：
特點(diǎn)：邏輯性強(qiáng)，重在用戶的操作行為，強(qiáng)調(diào)功能可達(dá)性和可用性。
2）界面設(shè)計(jì)思維：聚焦視覺呈現(xiàn)與情感體驗(yàn)
界面設(shè)計(jì)思維則以視覺表現(xiàn)為中心，關(guān)注界面的美感和信息傳達(dá)的有效性。其關(guān)注點(diǎn)包括：
特點(diǎn)：更注重感性表達(dá)，強(qiáng)調(diào)用戶的情感體驗(yàn)和對(duì)產(chǎn)品的第一印象。
簡(jiǎn)單類比：
交互思維像是設(shè)計(jì)產(chǎn)品的操作說明書，確保邏輯清晰易懂；而界面設(shè)計(jì)思維則為產(chǎn)品包裝，讓它看起來有吸引力且直觀。
1）信息分層與視覺引導(dǎo)的結(jié)合
交互思維： 根據(jù)用戶操作邏輯，對(duì)信息進(jìn)行層級(jí)劃分，優(yōu)先展示關(guān)鍵信息，隱藏次要內(nèi)容。
界面設(shè)計(jì)思維： 通過顏色、字體大小、對(duì)比等視覺元素，強(qiáng)化信息的層級(jí)感和用戶的關(guān)注點(diǎn)。
案例：支付寶首頁的布局
交互層面： 核心功能（如轉(zhuǎn)賬、收付款）被放置在顯眼的首屏區(qū)域，次要功能（如理財(cái)推薦）隱藏在二級(jí)頁面。
界面層面： 不同模塊的背景顏色和按鈕樣式有明顯區(qū)分，用戶一眼就能找到核心功能。
2）動(dòng)效與反饋設(shè)計(jì)的結(jié)合
交互思維： 動(dòng)效作為用戶操作的反饋機(jī)制，提示操作結(jié)果或狀態(tài)變化。
界面設(shè)計(jì)思維： 動(dòng)效的風(fēng)格和節(jié)奏與界面整體視覺風(fēng)格保持一致，增強(qiáng)整體體驗(yàn)的連貫性。
案例：抖音的點(diǎn)贊動(dòng)效
交互層面： 用戶雙擊屏幕后，出現(xiàn)心形動(dòng)畫，明確提示“點(diǎn)贊成功”。
界面層面： 動(dòng)效的色彩與抖音的品牌風(fēng)格一致，給用戶帶來視覺和情感上的滿足感。
3）視覺布局與操作路徑的優(yōu)化
交互思維： 確保核心操作路徑最短，減少用戶不必要的點(diǎn)擊和跳轉(zhuǎn)。
界面設(shè)計(jì)思維： 通過對(duì)頁面布局的優(yōu)化，讓用戶在操作路徑中感到界面簡(jiǎn)潔且層次分明。
案例：京東購物車的設(shè)計(jì)
交互層面： 重要操作（如全選、去結(jié)算）被放置在用戶觸手可及的位置，減少多余步驟。
界面層面： 清晰的分組、直觀的價(jià)格信息展示，讓用戶輕松理解購物車內(nèi)容。
4）情感設(shè)計(jì)與功能優(yōu)化的結(jié)合
交互思維： 通過優(yōu)化功能滿足用戶需求，讓操作過程簡(jiǎn)單高效。
界面設(shè)計(jì)思維： 在視覺設(shè)計(jì)中融入情感化元素，讓用戶感到愉悅或被關(guān)懷。
案例：網(wǎng)易云音樂的“聽歌識(shí)曲”功能
交互層面： 用戶只需點(diǎn)擊一個(gè)按鈕，系統(tǒng)即可快速識(shí)別歌曲，操作簡(jiǎn)單高效。
界面層面： 啟動(dòng)時(shí)有動(dòng)態(tài)音波效果，識(shí)別成功后展示專輯封面和歌詞，增強(qiáng)情感連接。
微信的朋友圈功能是交互思維與界面設(shè)計(jì)思維結(jié)合的經(jīng)典案例：
交互設(shè)計(jì)：
用戶可以通過簡(jiǎn)單的下滑操作瀏覽動(dòng)態(tài)，上滑時(shí)加載更多內(nèi)容，操作自然流暢。
點(diǎn)贊和評(píng)論的交互邏輯簡(jiǎn)單，長(zhǎng)按可以刪除自己的評(píng)論，符合用戶直覺。
界面設(shè)計(jì)：
動(dòng)態(tài)展示以卡片形式分隔，保持視覺整潔。
文本和圖片的排版統(tǒng)一，評(píng)論區(qū)域的縮進(jìn)樣式使信息層級(jí)清晰。
交互思維與產(chǎn)品思維、體驗(yàn)思維、視覺設(shè)計(jì)思維的融合，是用戶體驗(yàn)優(yōu)化的基礎(chǔ)。在實(shí)際設(shè)計(jì)中，我們既需要從全局出發(fā)，規(guī)劃產(chǎn)品戰(zhàn)略，也需要關(guān)注用戶的每一步操作細(xì)節(jié)。
通過兩者的互相補(bǔ)充，我們能設(shè)計(jì)出既符合用戶需求，又實(shí)現(xiàn)商業(yè)價(jià)值的產(chǎn)品，更精準(zhǔn)地滿足用戶需求，讓產(chǎn)品不僅好用，還能打動(dòng)人心。為用戶和企業(yè)帶來雙贏的結(jié)果。
未來，隨著技術(shù)的進(jìn)步和用戶需求的多樣化，這種融合將持續(xù)推動(dòng)數(shù)字產(chǎn)品體驗(yàn)的升級(jí)，成為提升產(chǎn)品競(jìng)爭(zhēng)力的核心動(dòng)力。
本文由 @ DesignLink 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載
蘭亭妙微(www.yn-ups.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
在前面的文章中，我們定義了交互思維和流程、目標(biāo)，接下來我們分享交互設(shè)計(jì)思維與我們常說的產(chǎn)品思維、體驗(yàn)思維等的融合。
在現(xiàn)代產(chǎn)品開發(fā)中，交互思維與產(chǎn)品設(shè)計(jì)思維的融合已經(jīng)成為提升用戶體驗(yàn)的關(guān)鍵。兩者看似獨(dú)立，卻可以在實(shí)際設(shè)計(jì)過程中形成互補(bǔ)，打造出更加契合用戶需求的產(chǎn)品。本文將從兩者的特點(diǎn)、融合的價(jià)值，以及實(shí)際應(yīng)用場(chǎng)景中如何落地等角度出發(fā)，深入探討它們的結(jié)合。
交互思維：聚焦人與界面的連接
交互思維的核心在于用戶與產(chǎn)品的互動(dòng)體驗(yàn)。它關(guān)注的是：
交互思維傾向于優(yōu)化用戶的操作路徑，將復(fù)雜的技術(shù)邏輯隱藏在背后，讓用戶感受到簡(jiǎn)單和直觀。
例子：在淘寶購物車中，“全選”功能按鈕被設(shè)計(jì)在靠近商品列表的頂部，方便用戶快速選中所有商品；而刪除操作則以批量和單選兩種方式提供，提升操作靈活性。
產(chǎn)品設(shè)計(jì)思維：關(guān)注用戶價(jià)值與商業(yè)目標(biāo)
產(chǎn)品設(shè)計(jì)思維則是更全局的，它關(guān)注的是產(chǎn)品能否滿足用戶需求并實(shí)現(xiàn)商業(yè)價(jià)值。核心問題包括：
產(chǎn)品設(shè)計(jì)思維更偏向戰(zhàn)略層面，要求對(duì)市場(chǎng)、用戶和商業(yè)有全局的理解，并制定產(chǎn)品的發(fā)展方向。
例子：微信從“即時(shí)通訊”入手，以簡(jiǎn)單的聊天功能切入市場(chǎng)，但通過持續(xù)擴(kuò)展支付、朋友圈、公眾號(hào)等模塊，構(gòu)建了一個(gè)完善的生態(tài)系統(tǒng)。
兩種思維的結(jié)合，能夠更好地兼顧用戶體驗(yàn)和商業(yè)價(jià)值。以下是幾種主要的融合方式：
1）以用戶為中心，兼顧商業(yè)目標(biāo)
交互思維： 設(shè)計(jì)流暢、直觀的操作流程，提升用戶體驗(yàn)。
產(chǎn)品設(shè)計(jì)思維： 在流暢體驗(yàn)的基礎(chǔ)上，引導(dǎo)用戶完成關(guān)鍵行為（如購買、注冊(cè)等），實(shí)現(xiàn)商業(yè)目標(biāo)。
案例：美團(tuán)外賣的下單流程
2）用戶需求與技術(shù)限制的平衡
交互思維： 關(guān)注用戶直觀感受，簡(jiǎn)化復(fù)雜操作，讓用戶專注于目標(biāo)任務(wù)。
產(chǎn)品設(shè)計(jì)思維： 在技術(shù)和資源限制內(nèi)，找到實(shí)現(xiàn)用戶需求的最佳方案。
案例：滴滴出行的“一鍵叫車”功能
3）數(shù)據(jù)驅(qū)動(dòng)與用戶體驗(yàn)的結(jié)合
交互思維： 基于用戶行為數(shù)據(jù)優(yōu)化界面和流程，提升操作效率。
產(chǎn)品設(shè)計(jì)思維： 基于數(shù)據(jù)分析判斷用戶需求的優(yōu)先級(jí)，調(diào)整產(chǎn)品功能布局。
案例：淘寶推薦算法與界面設(shè)計(jì)
淘寶的個(gè)性化推薦系統(tǒng)通過AI分析用戶瀏覽和購買行為，推薦相關(guān)商品。交互設(shè)計(jì)確保推薦商品的展示方式簡(jiǎn)潔、直觀，不打擾用戶正常瀏覽，增強(qiáng)購物體驗(yàn)的同時(shí)提升成交轉(zhuǎn)化率。
4）感性設(shè)計(jì)與理性分析的結(jié)合
交互思維： 關(guān)注情感體驗(yàn)，設(shè)計(jì)讓用戶愉悅的互動(dòng)。
產(chǎn)品設(shè)計(jì)思維： 從用戶行為和反饋中提煉需求，找到情感體驗(yàn)的落地點(diǎn)。
案例：支付寶的“年度賬單”功能
隨著AI技術(shù)的深入發(fā)展，交互思維與產(chǎn)品設(shè)計(jì)思維的融合將進(jìn)一步進(jìn)化：
案例展望：
在未來的外賣App中，AI不僅能推薦菜品，還能根據(jù)天氣、飲食偏好提供動(dòng)態(tài)優(yōu)惠，讓用戶感到“被理解”。同時(shí)，界面交互會(huì)變得更加智能，比如直接通過語音完成點(diǎn)餐和支付。
在數(shù)字產(chǎn)品開發(fā)中，交互思維和用戶體驗(yàn)設(shè)計(jì)思維（UX Design Thinking）常常交織在一起，共同塑造出令人滿意的產(chǎn)品體驗(yàn)。兩者的融合不僅能提升產(chǎn)品的使用效率，還能激發(fā)用戶的情感共鳴，最終實(shí)現(xiàn)用戶目標(biāo)與商業(yè)價(jià)值的雙贏。
1）交互思維：聚焦人與界面的高效互動(dòng)
交互思維主要關(guān)注用戶與產(chǎn)品之間的操作過程，旨在通過直觀的界面設(shè)計(jì)和高效的交互方式，幫助用戶輕松完成任務(wù)。其核心要素包括：
2）用戶體驗(yàn)設(shè)計(jì)思維：以用戶為中心的全局視角
用戶體驗(yàn)設(shè)計(jì)思維是以用戶需求和用戶感受為核心的一種方法論，涉及產(chǎn)品從設(shè)計(jì)到使用的整個(gè)生命周期。其重點(diǎn)在于：
簡(jiǎn)單類比：
交互思維像是一位專注于修路的工程師，確保路徑筆直流暢；而用戶體驗(yàn)設(shè)計(jì)思維更像是一位城市規(guī)劃師，考慮如何讓整個(gè)城市的交通系統(tǒng)高效且宜居。
1）從細(xì)節(jié)到全局，滿足用戶操作與體驗(yàn)的雙重需求
交互思維注重細(xì)節(jié)，優(yōu)化每一個(gè)交互動(dòng)作；而用戶體驗(yàn)設(shè)計(jì)思維關(guān)注全局，確保整個(gè)使用流程的流暢性和一致性。兩者結(jié)合能讓用戶在每個(gè)環(huán)節(jié)都感到舒適且順暢。
案例：微信的語音消息功能
2）情感設(shè)計(jì)與功能設(shè)計(jì)的結(jié)合
交互思維解決“怎么用”的問題，用戶體驗(yàn)設(shè)計(jì)思維則深入到“為什么用”和“用后感受如何”。情感設(shè)計(jì)是兩者融合的一個(gè)關(guān)鍵點(diǎn)，既提升用戶滿意度，又增強(qiáng)產(chǎn)品粘性。
案例：支付寶的完成支付動(dòng)畫
3）用戶需求與設(shè)計(jì)約束的平衡
交互思維幫助優(yōu)化操作路徑，而用戶體驗(yàn)設(shè)計(jì)思維則考慮設(shè)計(jì)的合理性和場(chǎng)景適配性。在技術(shù)和資源的限制下，兩者需要共同探索最佳方案。
案例：滴滴出行的路線規(guī)劃與確認(rèn)
4）數(shù)據(jù)驅(qū)動(dòng)與用戶感知的結(jié)合
數(shù)據(jù)分析是用戶體驗(yàn)設(shè)計(jì)思維的重要部分，而交互思維則利用這些數(shù)據(jù)優(yōu)化每一次用戶操作。兩者的結(jié)合能實(shí)現(xiàn)功能的個(gè)性化和體驗(yàn)的精準(zhǔn)化。
案例：淘寶的商品推薦系統(tǒng)
抖音作為短視頻平臺(tái)，在交互與用戶體驗(yàn)設(shè)計(jì)的結(jié)合上表現(xiàn)得尤為出色：
隨著AI的普及，交互思維與用戶體驗(yàn)設(shè)計(jì)思維的融合將進(jìn)入新的階段：
案例展望：智能客服系統(tǒng)
未來的智能客服不僅能準(zhǔn)確理解用戶問題，還能根據(jù)情緒識(shí)別調(diào)整對(duì)話語氣，同時(shí)提供即時(shí)解決方案與友好的互動(dòng)體驗(yàn)。
交互思維與界面設(shè)計(jì)思維的融合，是現(xiàn)代產(chǎn)品設(shè)計(jì)中的核心命題。二者分別專注于用戶操作路徑和界面視覺呈現(xiàn)，彼此互補(bǔ)，共同打造出功能性與美觀性兼具的產(chǎn)品體驗(yàn)。本文將從兩者的概念、融合的價(jià)值以及實(shí)際案例中剖析如何實(shí)現(xiàn)這種深度結(jié)合。
1）交互思維：聚焦操作路徑與用戶效率
交互思維的核心在于優(yōu)化用戶操作的每一步，降低操作復(fù)雜度，提升使用效率。
其關(guān)注的主要問題包括：
特點(diǎn)：邏輯性強(qiáng)，重在用戶的操作行為，強(qiáng)調(diào)功能可達(dá)性和可用性。
2）界面設(shè)計(jì)思維：聚焦視覺呈現(xiàn)與情感體驗(yàn)
界面設(shè)計(jì)思維則以視覺表現(xiàn)為中心，關(guān)注界面的美感和信息傳達(dá)的有效性。其關(guān)注點(diǎn)包括：
特點(diǎn)：更注重感性表達(dá)，強(qiáng)調(diào)用戶的情感體驗(yàn)和對(duì)產(chǎn)品的第一印象。
簡(jiǎn)單類比：
交互思維像是設(shè)計(jì)產(chǎn)品的操作說明書，確保邏輯清晰易懂；而界面設(shè)計(jì)思維則為產(chǎn)品包裝，讓它看起來有吸引力且直觀。
1）信息分層與視覺引導(dǎo)的結(jié)合
交互思維： 根據(jù)用戶操作邏輯，對(duì)信息進(jìn)行層級(jí)劃分，優(yōu)先展示關(guān)鍵信息，隱藏次要內(nèi)容。
界面設(shè)計(jì)思維： 通過顏色、字體大小、對(duì)比等視覺元素，強(qiáng)化信息的層級(jí)感和用戶的關(guān)注點(diǎn)。
案例：支付寶首頁的布局
交互層面： 核心功能（如轉(zhuǎn)賬、收付款）被放置在顯眼的首屏區(qū)域，次要功能（如理財(cái)推薦）隱藏在二級(jí)頁面。
界面層面： 不同模塊的背景顏色和按鈕樣式有明顯區(qū)分，用戶一眼就能找到核心功能。
2）動(dòng)效與反饋設(shè)計(jì)的結(jié)合
交互思維： 動(dòng)效作為用戶操作的反饋機(jī)制，提示操作結(jié)果或狀態(tài)變化。
界面設(shè)計(jì)思維： 動(dòng)效的風(fēng)格和節(jié)奏與界面整體視覺風(fēng)格保持一致，增強(qiáng)整體體驗(yàn)的連貫性。
案例：抖音的點(diǎn)贊動(dòng)效
交互層面： 用戶雙擊屏幕后，出現(xiàn)心形動(dòng)畫，明確提示“點(diǎn)贊成功”。
界面層面： 動(dòng)效的色彩與抖音的品牌風(fēng)格一致，給用戶帶來視覺和情感上的滿足感。
3）視覺布局與操作路徑的優(yōu)化
交互思維： 確保核心操作路徑最短，減少用戶不必要的點(diǎn)擊和跳轉(zhuǎn)。
界面設(shè)計(jì)思維： 通過對(duì)頁面布局的優(yōu)化，讓用戶在操作路徑中感到界面簡(jiǎn)潔且層次分明。
案例：京東購物車的設(shè)計(jì)
交互層面： 重要操作（如全選、去結(jié)算）被放置在用戶觸手可及的位置，減少多余步驟。
界面層面： 清晰的分組、直觀的價(jià)格信息展示，讓用戶輕松理解購物車內(nèi)容。
4）情感設(shè)計(jì)與功能優(yōu)化的結(jié)合
交互思維： 通過優(yōu)化功能滿足用戶需求，讓操作過程簡(jiǎn)單高效。
界面設(shè)計(jì)思維： 在視覺設(shè)計(jì)中融入情感化元素，讓用戶感到愉悅或被關(guān)懷。
案例：網(wǎng)易云音樂的“聽歌識(shí)曲”功能
交互層面： 用戶只需點(diǎn)擊一個(gè)按鈕，系統(tǒng)即可快速識(shí)別歌曲，操作簡(jiǎn)單高效。
界面層面： 啟動(dòng)時(shí)有動(dòng)態(tài)音波效果，識(shí)別成功后展示專輯封面和歌詞，增強(qiáng)情感連接。
微信的朋友圈功能是交互思維與界面設(shè)計(jì)思維結(jié)合的經(jīng)典案例：
交互設(shè)計(jì)：
用戶可以通過簡(jiǎn)單的下滑操作瀏覽動(dòng)態(tài)，上滑時(shí)加載更多內(nèi)容，操作自然流暢。
點(diǎn)贊和評(píng)論的交互邏輯簡(jiǎn)單，長(zhǎng)按可以刪除自己的評(píng)論，符合用戶直覺。
界面設(shè)計(jì)：
動(dòng)態(tài)展示以卡片形式分隔，保持視覺整潔。
文本和圖片的排版統(tǒng)一，評(píng)論區(qū)域的縮進(jìn)樣式使信息層級(jí)清晰。
交互思維與產(chǎn)品思維、體驗(yàn)思維、視覺設(shè)計(jì)思維的融合，是用戶體驗(yàn)優(yōu)化的基礎(chǔ)。在實(shí)際設(shè)計(jì)中，我們既需要從全局出發(fā)，規(guī)劃產(chǎn)品戰(zhàn)略，也需要關(guān)注用戶的每一步操作細(xì)節(jié)。
通過兩者的互相補(bǔ)充，我們能設(shè)計(jì)出既符合用戶需求，又實(shí)現(xiàn)商業(yè)價(jià)值的產(chǎn)品，更精準(zhǔn)地滿足用戶需求，讓產(chǎn)品不僅好用，還能打動(dòng)人心。為用戶和企業(yè)帶來雙贏的結(jié)果。
未來，隨著技術(shù)的進(jìn)步和用戶需求的多樣化，這種融合將持續(xù)推動(dòng)數(shù)字產(chǎn)品體驗(yàn)的升級(jí)，成為提升產(chǎn)品競(jìng)爭(zhēng)力的核心動(dòng)力。
本文由 @ DesignLink 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可，禁止轉(zhuǎn)載
蘭亭妙微(www.yn-ups.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
前排提示：本文多Gif需耐心加載，且需要有一定Ae基礎(chǔ)才能便于理解內(nèi)容。
你有沒有注意過，App底部的圖標(biāo)是如何變成選中的？大多數(shù)產(chǎn)品是將靜態(tài)圖標(biāo)替換（硬切過渡），來完成狀態(tài)切換。
當(dāng)我看完上百個(gè)動(dòng)態(tài)后，找到了更有趣的方式...
02 App底部導(dǎo)航構(gòu)成
通常由圖標(biāo)、文字/點(diǎn)線裝飾、和底板卡片組成，（當(dāng)然也有些產(chǎn)品只使用圖標(biāo)或文字），但設(shè)計(jì)師在進(jìn)行動(dòng)態(tài)設(shè)計(jì)時(shí)則是針對(duì)這3部分。
03 Tab Bar動(dòng)態(tài)類型
動(dòng)態(tài)效果由弱到強(qiáng)，視覺層級(jí)由低到高依次排序：圖標(biāo)動(dòng)態(tài) — 裝飾元素動(dòng)態(tài) — 底板卡片動(dòng)態(tài)。（根據(jù)本文案例效果來排序，但效果不同會(huì)有所差異）
▍圖標(biāo)動(dòng)態(tài)?
我們知道圖標(biāo)風(fēng)格可以簡(jiǎn)單的分為：線性、面性還有線面。在這基礎(chǔ)上通過修改顏色或造型，又能延展出更多風(fēng)格。
最常用的是添加修剪路徑（Ae的一種路徑效果），你可以把它理解成托尼老師，可以通過調(diào)整百分百參數(shù)來控制線條生長(zhǎng)。
但只是單色修剪，看起來很單調(diào)。我們可以在這個(gè)動(dòng)畫基礎(chǔ)上再多復(fù)制幾層，并分別加入品牌色，這樣可以讓視覺看起來更豐富。
也可以換一種方式，只調(diào)整不同顏色圖標(biāo)的位置屬性，便能得到故障效果。
如果你覺得這些太浮夸，那么單個(gè)圖標(biāo)添加修剪路徑，再配合位移、旋轉(zhuǎn)等基礎(chǔ)屬性則是更好的選擇。
通用的方法是調(diào)整不透明度，相比于硬切更柔和，且不會(huì)過多吸引用戶注意力。但對(duì)于帶有娛樂類屬性的產(chǎn)品來說，可能會(huì)顯得有些普通。
我們可以考慮使用遮罩來制作動(dòng)態(tài)，首先在圖標(biāo)周圍繪制幾個(gè)圓，再將圖標(biāo)外輪廓，作為圓的遮罩，來控制其顯示范圍，最后調(diào)整圓的縮放即可。
在一些特殊的時(shí)間，設(shè)計(jì)師們可能會(huì)技癢，而將圖標(biāo)繪制的更加豐富，來營(yíng)造氛圍。
對(duì)于這類圖標(biāo)，只需要參考它們的物理狀態(tài)[下方解釋]，再遵循從下往上，從中心往四周擴(kuò)張的原則來調(diào)整基礎(chǔ)屬性，便能制作出細(xì)節(jié)豐富的出場(chǎng)動(dòng)畫。
（物理狀態(tài)：該物體在現(xiàn)實(shí)場(chǎng)景下的狀態(tài)，上圖獎(jiǎng)杯真實(shí)世界狀態(tài)通常是放置地面，所以出場(chǎng)方向是從下到上。但假如你的圖標(biāo)是錦旗，那么物理狀態(tài)應(yīng)該是掛在墻上，所有出場(chǎng)方向是從上到下）
當(dāng)然如果去掉高光和投影，在制作一些動(dòng)態(tài)時(shí)會(huì)更方便。
例如：復(fù)制一顆星，將其初始位置設(shè)定為一個(gè)獎(jiǎng)杯的距離，并記錄關(guān)鍵幀，然后整體再移動(dòng)一個(gè)獎(jiǎng)杯距離。耳朵則調(diào)整路徑來完成移動(dòng)和變形，這樣便能營(yíng)造出3d旋轉(zhuǎn)的錯(cuò)覺。
對(duì)于結(jié)構(gòu)復(fù)雜的圖標(biāo)，可以提前分層。其中線條依舊可以使用修剪路徑（在Tab bar中，不同圖標(biāo)修剪路徑的起始點(diǎn)方向通常相同，以便保持一致性），而填充只需要調(diào)整元素縮放，并借助蒙版限制其顯示范圍就行。
▍裝飾元素動(dòng)態(tài)?
如果你覺得前面這些方案不夠新穎，那我們可以對(duì)裝飾元素下手。（當(dāng)然這類方案很少見，原因在于商業(yè)價(jià)值不足，實(shí)現(xiàn)成本高，所以這里也只是提供一些創(chuàng)意練習(xí)思路）
在一些年輕化產(chǎn)品中，如果圖標(biāo)含義很容易理解，那么設(shè)計(jì)師可能會(huì)用線或點(diǎn)來替代文字，讓整體更簡(jiǎn)潔。
國(guó)外設(shè)計(jì)師Tubik，通過讓點(diǎn)元素在移動(dòng)時(shí)呈現(xiàn)心電圖樣式，讓人眼前一亮。
通過動(dòng)態(tài)效果，甚至能體現(xiàn)出產(chǎn)品行業(yè)屬性。
嘗試修改軌跡樣式，然后為元素不透明度和位置添加動(dòng)畫，你能猜出這是什么類型的產(chǎn)品嗎？
又或者再夸張些，將軌跡設(shè)計(jì)成電路圖。其中線條添加修剪路徑，再借助Ae路徑跟蹤方法，使圓點(diǎn)沿路徑運(yùn)動(dòng)。最后通過蒙版來控制整體動(dòng)畫顯示范圍，這個(gè)方案看起來適合科技或游戲類產(chǎn)品。
通過調(diào)整元素路徑來改變其造型，模擬液體滴落，再通過蒙版縮放，讓選中狀態(tài)下的圖標(biāo)出現(xiàn)。
假如你的圖標(biāo)設(shè)計(jì)的足夠巧妙，我們可以提前繪制好關(guān)鍵筆畫的運(yùn)動(dòng)軌跡，便能通過修剪這條軌跡來完成筆畫的移動(dòng)。
▍底板卡片動(dòng)態(tài)?
這類動(dòng)態(tài)少見的原因在于其動(dòng)態(tài)效果面積大，視覺層級(jí)高，容易過度吸引用戶注意力。目前也只是在個(gè)別產(chǎn)品中看過卡片凸起效果。
在Ae中要制造這樣的效果，最先想到的可能是調(diào)整卡片路徑，但這樣的方式在制作彈性時(shí)非常麻煩。
我們有更簡(jiǎn)單的方法，先多畫出一個(gè)圓，然后與卡片路徑合并。
為了讓邊緣圓滑，整體添加高斯模糊和簡(jiǎn)單阻塞，分別加大參數(shù)，便能讓邊緣圓滑。（這種方式有個(gè)缺點(diǎn)：會(huì)收縮原有卡片寬高。所以添加效果后，需要借助參考線再次調(diào)整卡片大小）
完成圓滑處理后，修改其他元素的基礎(chǔ)屬性即可。
目前能記起的只有美團(tuán)外賣看過這效果。但為了降低視覺干擾，其弱化了彈性次數(shù)。
這個(gè)效果靈感來源于Dribbble設(shè)計(jì)師（EuroART93），我們只需要將凸起案例中，圓與底板卡片的布爾運(yùn)算模式改為相減就行，其他元素同樣調(diào)整基礎(chǔ)屬性。
此方案目前還沒有在其他產(chǎn)品中看過，究其原因還是效果太過搶眼。
看了這么多，其實(shí)不難發(fā)現(xiàn)。同一個(gè)圖標(biāo)，只需要改變不同屬性或元素的運(yùn)動(dòng)方式，便能帶來不一樣的感受。
或許創(chuàng)意的產(chǎn)生，并不是腦袋突然迸發(fā)出全新的東西。而是許多我們熟知的舊有內(nèi)容組合了起來。
正是它們之間這種奇妙的融合，給我們帶來了新鮮感，或許這就是我們要的創(chuàng)意。
最后再說兩句：
每個(gè)產(chǎn)品都有自己的調(diào)性和目標(biāo)用戶，動(dòng)態(tài)效果也有強(qiáng)有弱。好的動(dòng)態(tài)應(yīng)該是能與其進(jìn)行匹配，而不是根據(jù)某個(gè)產(chǎn)品得出一個(gè)絕對(duì)的答案。
本文演示了不同類型圖標(biāo)用什么動(dòng)態(tài)，并不代表只能這樣用。動(dòng)態(tài)效果類型遠(yuǎn)遠(yuǎn)不止這些，而以上只是最常見的動(dòng)態(tài)屬性組合方式，所以請(qǐng)不要局限你的想法。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yn-ups.com
