超全總結(jié)!C端交互設(shè)計(jì)的7種常見模式
前段時(shí)間有個(gè)產(chǎn)品童鞋,他剛加我微信就問了一大串問題。
什么是模式(Pattern)?什么是模版(Template)?這兩個(gè)概念有什么區(qū)別?作為一個(gè)熱心好學(xué)、樂于助人的產(chǎn)品仔,我當(dāng)然和他暢聊了一個(gè)多小時(shí),順便總結(jié)下聊天內(nèi)容。
你是不是也經(jīng)常在生活工作中,碰到類似“行為模式、設(shè)計(jì)模式、語(yǔ)言模式、文檔模版、表格模版”等名詞。但又搞不清它們有什么區(qū)別,搞懂了又有什么用?別急,我們花幾分鐘,先來嘮嘮什么是模式。
一、什么是模式?
可預(yù)測(cè)、重復(fù)出現(xiàn)的現(xiàn)象或規(guī)律,通過歸納總結(jié),就變成了某一種模式。
我們的生活中,就有許多模式的影子。比如常見的商業(yè)模式、營(yíng)銷模式、行為模式、數(shù)學(xué)模式、語(yǔ)言模式等。
舉個(gè)例子
簡(jiǎn)單說下行為模式,它分為了“習(xí)慣模式、消費(fèi)模式、學(xué)習(xí)模式”等等??啾拼蚬ぷ衅毡榈南M(fèi)模式,一般是工作日花錢少,到了周末都愛到商場(chǎng)逛街和購(gòu)物。但又有特例,我有個(gè)朋友就特別宅,他只喜歡在上班的時(shí)候,摸魚逛淘寶下單,簡(jiǎn)直離譜~
二、掌握模式有什么用?
當(dāng)你掌握了模式的概念,并嘗試在生活中使用,相信你一定能感受到這 7 個(gè)好處。
- 信息壓縮:把信息精簡(jiǎn)成特定的模式,記憶傳播更容易了,教給別人更是輕輕松松;
- 知識(shí)萃?。和ㄟ^學(xué)習(xí)模式,掌握系統(tǒng)化的知識(shí),就像搭樂高拼積木,簡(jiǎn)單易懂、一學(xué)就會(huì)、舉一反三;
- 簡(jiǎn)化問題:用模式來解決問題,意味著它不再是一團(tuán)亂麻,成為了可分割的部分,原來苦惱的事,現(xiàn)在輕松搞定;
- 識(shí)別規(guī)律:當(dāng)你摸清了模式的現(xiàn)象規(guī)律,就像旅游帶著地圖,走到哪里都不慌;
- 提高效率:把模式進(jìn)行泛化使用,可以大大提高你的工作產(chǎn)出,蓋章可比畫圖快太多了;
- 組合創(chuàng)新:試著把你學(xué)會(huì)的各種模式,打亂排序、重新組合,說不定會(huì)拼出一些新玩意;
- 預(yù)測(cè)未來:搞懂了特定領(lǐng)域的模式,意味著你熟知并能運(yùn)用自如,自然而然學(xué)會(huì)了推演未來。
聽了還是有點(diǎn)懵?那可能需要了解下抽象思維。
三、C 端交互設(shè)計(jì)的 7 種常見模式
我們?cè)囍倥e個(gè)例子,加深下對(duì)模式的理解,順便學(xué)學(xué)交互設(shè)計(jì)。
什么是交互?我在之前有講過,如何快速入門交互設(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é)下(MD 掏家底了,記得贊我。。),我常用的 7 種 C 端交互模式,主要有:導(dǎo)航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導(dǎo)模式。
學(xué)完就能用,趕緊卷起來~
有人就問了,還有更多交互模式嗎?確實(shí)可以有,等我有時(shí)間再編幾個(gè)。。話說回來,如果是一些特別復(fù)雜的業(yè)務(wù)規(guī)則,可能會(huì)涉及到 N 個(gè)交互模式的任意組合。
1. 導(dǎo)航模式
常見的導(dǎo)航模式有按鈕組合、標(biāo)簽菜單、宮格布局、列表視圖等。
導(dǎo)航模式的主要作用是,告知用戶當(dāng)前在網(wǎng)站的位置,以及接下來到哪些頁(yè)面,這有點(diǎn)像地圖 APP。
2. 搜索模式
搜索,是各大電商 APP 常見的交互模式。搜索模式允許用戶輸入關(guān)鍵詞,然后系統(tǒng)返回搜索結(jié)果。
打個(gè)比方,這有點(diǎn)像在 Navicat 中寫了一段 SQL 查詢。
SELECT id, name, age FROM users WHERE age > 18
這段 SQL 的作用是,查詢大于 18 歲的用戶信息,包含序號(hào)、名稱、年齡。
3. 反饋模式
常見的反饋模式組件,涉及了對(duì)話框、吐司提示、氣泡提示等。
反饋模式用的比較多的場(chǎng)景是,告知用戶一些信息或提示,比如“輸入密碼錯(cuò)了、展示訂單取消的注意事項(xiàng)”等。
4. 輸入模式
輸入模式主要用于新數(shù)據(jù)創(chuàng)建,例如淘寶下單時(shí),你新增了一個(gè)收貨地址。
打開美團(tuán)叫個(gè)外賣,整個(gè)訂單創(chuàng)建流程,也是輸入模式。
5. 編輯模式
有很多人可能會(huì)把輸入模式和編輯模式搞混。
區(qū)別它們的一個(gè)方法是,交互流程涉及新數(shù)據(jù)創(chuàng)建,還是改舊數(shù)據(jù)。改數(shù)據(jù)的話,那就是編輯模式。
6. 分享模式
我們?cè)诳吹揭恍└韶浳恼?,或好用的小程序想要轉(zhuǎn)發(fā)給朋友,那就要用到分享模式。
分享模式可以很簡(jiǎn)單,也可以往復(fù)雜了做,看產(chǎn)品階段去實(shí)現(xiàn)。
7. 引導(dǎo)模式
引導(dǎo)模式和反饋模式有點(diǎn)像,都是展示特定的內(nèi)容。
那怎么分辨它們呢?以設(shè)計(jì)師視角來看,反饋模式需要用戶觸發(fā),系統(tǒng)被動(dòng)顯示。而要讓用戶特別關(guān)注的信息,那就是引導(dǎo)模式。
總結(jié)
模式,即抽象的規(guī)律。——好夕雷
說了這么多概念和例子,你是不是對(duì)模式的認(rèn)知更清晰了呢?
模式運(yùn)用在產(chǎn)品領(lǐng)域,就有了這 7 種交互模式,分別是“導(dǎo)航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導(dǎo)模式”。如果學(xué)會(huì)了模式,那么無論生活還是工作,相信你一定能輕松應(yīng)對(duì)、事半功倍。
作者:產(chǎn)品之外
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請(qǐng)?jiān)L問:網(wǎng)站技術(shù)