做交互設(shè)計(jì)10年，我為何轉(zhuǎn)崗到產(chǎn)品經(jīng)理？
2025-3-25 杰睿
在互聯(lián)網(wǎng)領(lǐng)域中，人機(jī)之間的互動(dòng)過(guò)程就是交互。交互也有一些可預(yù)測(cè)的、重復(fù)出現(xiàn)的規(guī)律，作者總結(jié)了其中常見(jiàn)的七種C端交互模式，可以提高大家的工作效率，分享給大家。
前段時(shí)間有個(gè)產(chǎn)品童鞋，他剛加我就問(wèn)了一大串問(wèn)題。
什么是模式（Pattern）？什么是模版（Template）？這兩個(gè)概念有什么區(qū)別？
作為一個(gè)熱心好學(xué)、樂(lè)于助人的產(chǎn)品仔，我當(dāng)然和他暢聊了一個(gè)多小時(shí)，順便總結(jié)下聊天內(nèi)容。
你是不是也經(jīng)常在生活工作中，碰到類(lèi)似“行為模式、設(shè)計(jì)模式、語(yǔ)言模式、文檔模版、表格模版”等名詞。
但又搞不清它們有什么區(qū)別，搞懂了又有什么用？
別急，我們花幾分鐘，先來(lái)嘮嘮什么是模式。
可預(yù)測(cè)、重復(fù)出現(xiàn)的現(xiàn)象或規(guī)律，通過(guò)歸納總結(jié)，就變成了某一種模式。
我們的生活中，就有許多模式的影子。
比如常見(jiàn)的商業(yè)模式、營(yíng)銷(xiāo)模式、行為模式、數(shù)學(xué)模式、語(yǔ)言模式等。
舉個(gè)例子：
簡(jiǎn)單說(shuō)下行為模式，它分為了“習(xí)慣模式、消費(fèi)模式、學(xué)習(xí)模式”等等。
苦逼打工仔普遍的消費(fèi)模式，一般是工作日花錢(qián)少，到了周末都愛(ài)到商場(chǎng)逛街和購(gòu)物。
但又有特例，我有個(gè)朋友就特別宅，他只喜歡在上班的時(shí)候，摸魚(yú)逛淘寶下單，簡(jiǎn)直離譜~
掌握模式，有什么用？
當(dāng)你掌握了模式的概念，并嘗試在生活中使用，相信你一定能感受到這 7 個(gè)好處。
我們?cè)囍倥e個(gè)例子，加深下對(duì)模式的理解，順便學(xué)學(xué)交互設(shè)計(jì)。
什么是交互？
簡(jiǎn)單來(lái)說(shuō)，交互指的是在互聯(lián)網(wǎng)領(lǐng)域中，人、機(jī)之間的一系列互動(dòng)過(guò)程。
我還提煉了 3 種常見(jiàn)模式（簡(jiǎn)單反饋、數(shù)據(jù)操作、業(yè)務(wù)判斷），比較粗糙湊合也能用。
現(xiàn)在試著再系統(tǒng)總結(jié)下，我常用的 7 種 C 端交互模式，主要有：導(dǎo)航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導(dǎo)模式。
學(xué)完就能用，趕緊卷起來(lái)~
有人就問(wèn)了，還有更多交互模式嗎？
確實(shí)可以有，等我有時(shí)間再編幾個(gè)。。
話(huà)說(shuō)回來(lái)，如果是一些特別復(fù)雜的業(yè)務(wù)規(guī)則，可能會(huì)涉及到 N 個(gè)交互模式的任意組合。
常見(jiàn)的導(dǎo)航模式有按鈕組合、標(biāo)簽菜單、宮格布局、列表視圖等。
導(dǎo)航模式的主要作用是，告知用戶(hù)當(dāng)前在網(wǎng)站的位置，以及接下來(lái)到哪些頁(yè)面，這有點(diǎn)像地圖 APP。
上面這張圖中，包含了幾種導(dǎo)航組件呢？
搜索，是各大電商 APP 常見(jiàn)的交互模式。
搜索模式允許用戶(hù)輸入關(guān)鍵詞，然后系統(tǒng)返回搜索結(jié)果。
打個(gè)比方，這有點(diǎn)像在 Navicat 中寫(xiě)了一段 SQL 查詢(xún)。
SELECT id, name, age
FROM users
WHERE age > 18
這段 SQL 的作用是，查詢(xún)大于 18 歲的用戶(hù)信息，包含序號(hào)、名稱(chēng)、年齡。
常見(jiàn)的反饋模式組件，涉及了對(duì)話(huà)框、吐司提示、氣泡提示等。
反饋模式用的比較多的場(chǎng)景是，告知用戶(hù)一些信息或提示，比如“輸入密碼錯(cuò)了、展示訂單取消的注意事項(xiàng)”等。
輸入模式主要用于新數(shù)據(jù)創(chuàng)建，例如淘寶下單時(shí)，你新增了一個(gè)收貨地址。
打開(kāi)美團(tuán)叫個(gè)外賣(mài)，整個(gè)訂單創(chuàng)建流程，也是輸入模式。
有很多人可能會(huì)把輸入模式和編輯模式搞混。
區(qū)別它們的一個(gè)方法是，交互流程涉及新數(shù)據(jù)創(chuàng)建，還是改舊數(shù)據(jù)。
改數(shù)據(jù)的話(huà)，那就是編輯模式。
我們?cè)诳吹揭恍└韶浳恼拢蚝糜玫男〕绦蛳胍D(zhuǎn)發(fā)給朋友，那就要用到分享模式。
分享模式可以很簡(jiǎn)單，也可以往復(fù)雜了做，看產(chǎn)品階段去實(shí)現(xiàn)。
引導(dǎo)模式和反饋模式有點(diǎn)像，都是展示特定的內(nèi)容。
那怎么分辨它們呢？
以設(shè)計(jì)師視角來(lái)看，反饋模式需要用戶(hù)觸發(fā)，系統(tǒng)被動(dòng)顯示。
而要讓用戶(hù)特別關(guān)注的信息，那就是引導(dǎo)模式。
模式，即抽象的規(guī)律。——好夕雷
說(shuō)了這么多概念和例子，你是不是對(duì)模式的認(rèn)知更清晰了呢？
模式運(yùn)用在產(chǎn)品領(lǐng)域，就有了這 7 種交互模式，分別是“導(dǎo)航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導(dǎo)模式”。
如果學(xué)會(huì)了模式，那么無(wú)論生活還是工作，相信你一定能輕松應(yīng)對(duì)、事半功倍。
本文由 @好夕雷 原創(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ù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.lzhte.cn