產(chǎn)品設(shè)計(jì):如何讓功能既靈活又簡(jiǎn)單?
編輯導(dǎo)語:我們?cè)诰W(wǎng)頁上進(jìn)行搜索時(shí),會(huì)發(fā)現(xiàn)只用關(guān)鍵詞就可以找到自己想要的內(nèi)容,或者剛輸入關(guān)鍵詞下面就會(huì)出現(xiàn)一些有聯(lián)系的內(nèi)容,十分方便快捷;本文作者分享了怎么讓功能變得即靈活又簡(jiǎn)單,我們一起來學(xué)習(xí)一下。
一、為什么這是個(gè)問題?
功能設(shè)計(jì)是產(chǎn)品經(jīng)理最基本的技能,也是產(chǎn)品最基本的組成部分和價(jià)值所在。
所以,不管是在工作中,還是在面試中,一個(gè)功能設(shè)計(jì)得太復(fù)雜或者太雞肋,都會(huì)直接拉低別人對(duì)你的印象分!??!
但在產(chǎn)品設(shè)計(jì)中,靈活與簡(jiǎn)單這兩個(gè)特性確實(shí)常常是沖突的。
尤其是在工具型產(chǎn)品中,我們想把功能設(shè)計(jì)得很靈活,就常常會(huì)用起來很復(fù)雜;如果想設(shè)計(jì)得很簡(jiǎn)單,又會(huì)減少功能性,顯得很雞肋。
當(dāng)然還有個(gè)辦法,就是在簡(jiǎn)單的功能中加入機(jī)器學(xué)習(xí)模型;不過如果團(tuán)隊(duì)自身積累不足,這個(gè)辦法的投入就太高而價(jià)值又太小,不是個(gè)好辦法。
舉個(gè)例子:在當(dāng)今的產(chǎn)品中,包含的信息越來越多、越來越復(fù)雜,所以搜索功能就越來越重要了。
在搜索功能上,我們既希望能夠足夠靈活(比如支持各種條件組合,支持“與或非”等等),又希望足夠簡(jiǎn)單(像普通文字輸入一樣)。
怎么辦呢?
這是一個(gè)比較典型的困境,我們來看看百度、Google等通用搜索引擎是怎么做的。
它們?cè)凇昂?jiǎn)單”上做得很出色,當(dāng)需要多個(gè)關(guān)鍵詞時(shí),只需要用空格隔開就可以了。
還不錯(cuò)對(duì)吧?但是,再看看它們應(yīng)對(duì)“靈活”的高級(jí)搜索功能……
這里確實(shí)提供了足夠的靈活性,但整個(gè)設(shè)計(jì)就崩塌了;因?yàn)閺?個(gè)輸入框變成了10項(xiàng)配置,太復(fù)雜了?。。?/p>
那么如果加入機(jī)器學(xué)習(xí)模型呢?就這樣:
這類推薦看似簡(jiǎn)單,但如果要認(rèn)真做,需要投入不少人力和時(shí)間才能實(shí)現(xiàn)。
所以,百度這是個(gè)失敗的設(shè)計(jì)嗎?
其實(shí)不然——如果你是百度搜索引擎的深度用戶,那么你應(yīng)該知道這樣一組搜索指令:
- 用減號(hào)“-”代表排除關(guān)鍵字;
- 用“intitle:”代表關(guān)鍵字只出現(xiàn)在標(biāo)題中;
- 用“inurl:” 代表關(guān)鍵字只出現(xiàn)在URL中;
- 用“filetype:”代表只想看某些文件類型,比如docx、pdf;
- 用“site:”代表只想搜索某個(gè)站點(diǎn)中的內(nèi)容;
以上這些指令都可以直接在搜索框中輸入,既滿足了高級(jí)用戶的需求,又不會(huì)影響初級(jí)用戶的使用體驗(yàn)。這就實(shí)現(xiàn)了既靈活又簡(jiǎn)單。
那么,如果你想在設(shè)計(jì)自己的產(chǎn)品時(shí)也做到靈活而簡(jiǎn)單,應(yīng)該怎么做呢?
二、原來的設(shè)計(jì)問題出在哪?
首先,我們定義問題的范疇。
靈活與簡(jiǎn)單的取舍,不是一個(gè)純粹的交互設(shè)計(jì)的問題,它還涉及到前端頁面交互與后端系統(tǒng)的配合;所以單從交互設(shè)計(jì)的角度很難找到答案。
這里必須說一點(diǎn):要想提升對(duì)于產(chǎn)品的理解,需要練習(xí)自己的抽象思考能力。
在這里,我們就需要把具體的產(chǎn)品交互做一次抽象和提煉,找到其中的規(guī)律;有技術(shù)背景的同學(xué)在這方面會(huì)有優(yōu)勢(shì)。
為什么?因?yàn)榧夹g(shù)語言本身就是對(duì)事物的抽象。
其次,我們要打破一種思維定式:“一個(gè)功能是一體的,不再可分”;其實(shí)并不是這樣的,就用上面的搜索引擎舉例,它與用戶相關(guān)的部分大致可以拆成兩個(gè)子模塊:
- 收集用戶輸入搜索條件;
- 系統(tǒng)解析用戶輸入的內(nèi)容;
所以,正是這兩部分造成了靈活與簡(jiǎn)單很難取舍——用戶隨意輸入的內(nèi)容系統(tǒng)很難解析;而系統(tǒng)方便解析的內(nèi)容對(duì)用戶來說太復(fù)雜了。
最后,我們可以借鑒技術(shù)領(lǐng)域的MVC設(shè)計(jì)理念,來考慮我們的產(chǎn)品功能設(shè)計(jì)。
MVC是三個(gè)單詞的首寫字母——M代表Model,是指產(chǎn)品中的數(shù)據(jù)模型;V代表View,是指產(chǎn)品中呈現(xiàn)數(shù)據(jù)的方式,其實(shí)就是用戶“看得見摸得著”的產(chǎn)品形態(tài);C代表Controller,指的是真正用來響應(yīng)用戶操作的部分。
這種設(shè)計(jì)理念為我們?cè)O(shè)計(jì)復(fù)雜功能打開了思路。
一個(gè)產(chǎn)品功能,我們可以從三個(gè)方面來思考它的設(shè)計(jì):
第一部分是Controller,我們可以理解為“核心功能”。比如,在搜索引擎中什么是“核心功能”?根據(jù)用戶輸入的條件,返回符合條件的結(jié)果,這就是核心功能;所以“查詢”就是一個(gè)必不可少的Controller。
第二部分是View,直接理解就是“產(chǎn)品形態(tài)”。比如收縮引擎中的輸入框,搜索結(jié)果列表;這兩個(gè)具體的產(chǎn)品形態(tài),就是兩個(gè)View。
第三部分是Model,這部分就很抽象了;我們?cè)谶@里不單獨(dú)解釋它,結(jié)合下面的例子一起說。
我們以“用Excel中的數(shù)據(jù)畫圖表”這個(gè)場(chǎng)景為例,來看看MVC的三個(gè)部分是怎么配合工作的。
首先,我們?cè)谝粋€(gè)Excel文件中保存的一份數(shù)據(jù),這份數(shù)據(jù),就相當(dāng)于MVC中的Model。
接下來,我們選中這些數(shù)據(jù),然后使用插入圖表的功能,并選擇一種圖表類型;比如我們選擇了折線圖,這其中“插入圖表”就是一個(gè)Controller,而折線圖就是一個(gè)View。
這時(shí)假設(shè)我們不想用折線圖了,想換成柱狀圖;那么,稍微對(duì)Excel有一些了解的同學(xué)都知道,為了把折線圖換成柱狀圖,我們不需要復(fù)制一個(gè)Excel文件,也不需要再安裝一套Excel軟件,只需要改變一下圖表類型。
為什么這么簡(jiǎn)單?
保存在Excel里的數(shù)據(jù)Model變了嗎?沒有。
“插入圖表”這個(gè)功能Controller變了嗎?也沒有。
要做的只是切換一下View。
所以,假設(shè)我們想在自己的產(chǎn)品中,增加一個(gè)類似“把折線圖換成柱狀圖”的功能,我們實(shí)際要增加的只是一個(gè)View,而不需要改變已經(jīng)有的Model和Controller。
除非我們把“插入折線圖”和“插入柱狀圖”當(dāng)做完全不相干的兩個(gè)功能來設(shè)計(jì);不過這顯然不合理,而且已經(jīng)超綱了,我們不在這里討論。
三、怎么用MVC設(shè)計(jì)產(chǎn)品功能?
現(xiàn)在你有體會(huì)到MVC在產(chǎn)品設(shè)計(jì)中的魅力嗎?那我們?cè)倥e個(gè)例子:
協(xié)作型的產(chǎn)品通常都會(huì)增加權(quán)限管理模塊。
按照標(biāo)準(zhǔn)的RBAC(Role Based Access Control,基于角色的訪問控制),我們需要設(shè)計(jì)的功能包括:
- 單個(gè)/批量管理用戶和給用戶賦權(quán);
- 單個(gè)/批量管理角色和給角色賦權(quán);
- 權(quán)限校驗(yàn),返回校驗(yàn)通過或拒絕;
聽起來像是個(gè)很復(fù)雜的功能模塊吧?別慌,如果用MVC的理念怎么設(shè)計(jì)呢?
這里只考慮了最核心的功能部分,在實(shí)際功能落地時(shí),多少還會(huì)有其他功能補(bǔ)充進(jìn)來,比如單點(diǎn)登錄、讀取用戶信息等。
首先我們有3個(gè)重要的Controller(不是全部哦),包括:
- 1個(gè)更新用戶與角色關(guān)系的Controller,支持批量;
- 1個(gè)更新角色與權(quán)限關(guān)系的Controller,支持批量;
- 1個(gè)校驗(yàn)權(quán)限的Controller,支持不支持批量都行;
其次,我們只有3個(gè)重要的Module,包括:
- 1個(gè)用戶與角色對(duì)應(yīng)關(guān)系的Model;
- 1個(gè)角色與權(quán)限對(duì)應(yīng)關(guān)系的Model;
- 1個(gè)用戶與權(quán)限對(duì)應(yīng)關(guān)系的Model;
其實(shí),我們也可以把這三個(gè)Model合并成1個(gè),這樣我就只需要一個(gè)“用戶-角色-權(quán)限”的Model了。
最后,我們也只需要1個(gè)View了,因?yàn)樵诮换ド蠠o非是查詢或者更新“用戶-角色-權(quán)限”三者之間的關(guān)系。
此時(shí),如果之前我們確實(shí)沒有考慮到“批量修改”的情況,但是隨著用戶量增加,越來越多的用戶想要這個(gè)功能了。怎么辦?
如果我們?cè)谠O(shè)計(jì)功能時(shí)用MVC的理念來考慮這個(gè)問題,只需要修改某一個(gè)Controller;并在前端的View上增加一些復(fù)選框的功能。
數(shù)據(jù)模型Model不需要做任何修改,所以數(shù)據(jù)庫也就不需要做什么改動(dòng)了。
作者:李陽,微信公眾號(hào):數(shù)據(jù)有毒(shujuyoudu)
本文由 @李陽 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自 Unsplash,基于 CC0 協(xié)議
挺技術(shù)的
sddsfd
沒有看太懂。
設(shè)計(jì)模式的作用:對(duì)擴(kuò)展開放,對(duì)修改關(guān)閉。減少了功能或展現(xiàn)形式改變?cè)斐傻男薷墓ぷ?;提供自定義選項(xiàng)和默認(rèn)值,則可以方便不同用戶的需求。