產(chǎn)品經(jīng)理和交互設(shè)計的那些事

1、產(chǎn)品經(jīng)理理和交互互設(shè)計的的那些事事原型設(shè)設(shè)計圖形形成的流流程在一個互互聯(lián)網(wǎng)公公司的工工作流程程中，產(chǎn)產(chǎn)品經(jīng)理理（主要要指偏向向產(chǎn)品設(shè)設(shè)計的產(chǎn)產(chǎn)品人員員）和交交互設(shè)計計師是這這個流水水線上最最起點的的環(huán)節(jié)，也是關(guān)關(guān)系最曖曖昧的兩兩個環(huán)節(jié)節(jié)。說其其曖昧，是因為為在很多多互聯(lián)網(wǎng)網(wǎng)公司里里面，這這兩個環(huán)環(huán)節(jié)所做做的事情情是有重重合的，這就意意味著，他們或或許也是是整個流流程中合合作最緊緊密的兩兩個環(huán)節(jié)節(jié)。相對比之之下，產(chǎn)產(chǎn)品經(jīng)理理更關(guān)注注的是產(chǎn)產(chǎn)品的內(nèi)內(nèi)部邏輯輯、操作作流程、策略等等；而交交互設(shè)計計師更關(guān)關(guān)注的是是產(chǎn)品的的易用性性、流暢暢度和操操作感受受?？偟牡膩砜?，似乎可可以認(rèn)為為，產(chǎn)品品經(jīng)理是是從

2、一個個更加宏宏觀的角角度去設(shè)設(shè)計產(chǎn)品品，而交交互設(shè)計計師，則則是從更更多的細(xì)細(xì)節(jié)出發(fā)發(fā)，去提提升用戶戶體驗。這兩種種不同的的視角決決定了只只有產(chǎn)品品經(jīng)理和和交互設(shè)設(shè)計師密密切配合合，深入入溝通，才能夠夠最高效效最合理理的將產(chǎn)產(chǎn)品策略略轉(zhuǎn)化為為產(chǎn)品原原型，從從而為流流水線的的后面環(huán)環(huán)節(jié)提供供精確的的參考資資料。下面以人人人網(wǎng)廣廣告平臺臺的一些些產(chǎn)品和和交互細(xì)細(xì)節(jié)為例例，使用用對話的的形式來來分享一一下我個個人在做做交互設(shè)設(shè)計過程程中的一一些體會會和想法法。在廣告平平臺其中中一個投投放系統(tǒng)統(tǒng)中，有有一個產(chǎn)產(chǎn)品需求求，是要要根據(jù)廣廣告受眾眾所在的的地區(qū)做做廣告的的定向投投放。也也就是說說，可以以控制

3、廣廣告只展展示給固固定地域域的受眾眾。這就就意味著著，需要要設(shè)計一一個區(qū)區(qū)域選擇擇器，供用戶戶選擇區(qū)區(qū)域。產(chǎn)產(chǎn)品經(jīng)理理的原始始需求是是這樣的的：產(chǎn)品經(jīng)理理：“我們這這次的投投放系統(tǒng)統(tǒng)需要設(shè)設(shè)計一個個區(qū)域選選擇器，就是讓讓用戶選選擇廣告告定向投投放的區(qū)區(qū)域的?？梢跃_到城城市，可可以多選選。另外外，區(qū)域作為一一個投放放廣告的的限制條條件，如如果用戶戶沒有選選擇任何何選項，那就代代表用戶戶忽略該該條件，則該廣廣告會面面向全國國投放?！苯换ピO(shè)計計師：“哦?！碑a(chǎn)品經(jīng)理理：“嗯，我我能夠想想到的這這個東西西的原型型，可以以提供兩兩個下拉拉框，讓讓用戶分分別選擇擇省和城城市。當(dāng)當(dāng)用戶在在第一個個下拉框框

4、里面選選定了省省以后，第二個個下拉框框中會顯顯示該省省下面的的地級市市。我做做了一個個簡單的的框圖，大家看看一下?！碑a(chǎn)品經(jīng)理理：“大概就就是這個個樣子。每選定定一個城城市，點點擊后面面的添加加按鈕，可以將將該城市市添加到到下面的的列表中中。同時時，如果果點擊已已經(jīng)添加加的城市市名稱后后面的刪除鏈接，則會將將該城市市從已選選列表抹抹去?！苯换ピO(shè)計計師：“等一下下，我有有一個問問題。按按照產(chǎn)品品的策略略，如果果用戶一一個城市市都不選選，那么么就會默默認(rèn)投放放全國。但是這這個概念念很難表表達(dá)給用用戶，比比如說，如果在在區(qū)域域選擇器器旁邊邊放提示示，估計計沒有多多少人會會注意到到?！碑a(chǎn)品經(jīng)理理：“一個

5、都都沒選，就是等等于忽略略條件啊啊。因為為這些都都是限制制條件?！苯换ピO(shè)計計師：“問題是是用戶很很難意識識到是這這樣。在在中國人人的觀念念中，大大家都是是覺得，選上的的，是我我要的。但是大大家沒有有不選選就等于于全要這種思思維習(xí)慣慣?！苯换ピO(shè)計計師：“我覺得得可以這這樣。我我們在現(xiàn)現(xiàn)在的區(qū)域選選擇器上面放放兩個單單選按鈕鈕。一個個叫全全國，另一個個叫做指定。打開開頁面時時，默認(rèn)認(rèn)選中全國項，并并隱藏區(qū)域選選擇器。只有有用戶選選擇指指定項項時，區(qū)區(qū)域選擇擇器才會會出現(xiàn)。這樣表表達(dá)就很很明確了了，你不不是全全國就就是指指定?！碑a(chǎn)品經(jīng)理理：“哦聽起來來不錯。試試。”于是得到到了下面面這個版版本的原原

6、型圖：交互設(shè)計計師：“嗯，我我想，現(xiàn)現(xiàn)在這個個版本已已經(jīng)基本本上從界界面的層層面解決決了全國國投放的的選項問問題，我我想，用用戶應(yīng)該該不會因因為不知知道怎么么選而卡卡在這里里了。”交互設(shè)計計師：“我看下下一步，需要對對一些關(guān)關(guān)鍵的元元素做一一定的視視覺設(shè)計計，以便便于引導(dǎo)導(dǎo)用戶操操作。比比如添添加按按鈕，應(yīng)應(yīng)該更明明顯些。我覺得得可以請請UI設(shè)計計師出一一個簡單單版本的的UI了?！碑a(chǎn)品經(jīng)理理：“稍等一一下，我我看咱們們還是把把細(xì)節(jié)再再討論清清楚一些些再去找找UI吧。比如，字的顏顏色啊什什么的都都沒定呢呢。而且且，我覺覺得選中中的區(qū)域域中，每每個城市市名稱后后面都跟跟著一個個刪除鏈鏈接，很很奇怪

7、?！苯换ピO(shè)計計師：“嗯。的的確。我我的想法法是這樣樣，字的的顏色，就用黑黑色吧，或者是是深一些些的灰色色也行。雖然從從視覺設(shè)設(shè)計的角角度來看看，視覺覺設(shè)計師師覺得稍稍淺一些些的灰色色比較養(yǎng)養(yǎng)眼，可可能黑色色太搶。但是是咱們的的系統(tǒng)畢畢竟是給給人用的的，灰色色的話，可能會會讓人誤誤認(rèn)為這這些選項項是不可可操作的的。你看看如何？”產(chǎn)品經(jīng)理理：“同意?！苯换ピO(shè)計計師：“關(guān)于已已經(jīng)選中中的區(qū)域域列表。我看可可以把刪除鏈接換換成，事實實上，用用戶對于于這種符符號比漢漢字更敏敏感。你你看，大大家不論論是用WWinddowss還是Maac，關(guān)關(guān)閉窗口口的時候候都是，早就就習(xí)慣了了。另外外，為了了讓所選選定的

8、城城市名稱稱看起來來是一個個整體，并且跟跟其他城城市名稱稱區(qū)分開開。我看看，可以以給每一一個城市市加上背背景色，每個城城市一個個色塊，這樣也也一目了了然?！碑a(chǎn)品經(jīng)理理：“顏色呢呢？”交互設(shè)計計師：“藍(lán)色吧吧，人人人網(wǎng)都是是藍(lán)色的的風(fēng)格。”產(chǎn)品經(jīng)理理：“ook”于是，配配合UII設(shè)計師師，得到到了下面面的界面面：產(chǎn)品經(jīng)理理：“我看現(xiàn)現(xiàn)在這個個地方已已經(jīng)基本本上成型型了。咱咱們也已已經(jīng)討論論很很久久了。該該問問別別人的意意見?！?時間分分割線-產(chǎn)品經(jīng)理理：“HHi 各位。我收集集了一些些內(nèi)部測測試的意意見。有有用戶提提出，搞搞不太清清楚兩個個下拉菜菜單和添加按鈕之之間的關(guān)關(guān)系。”交互設(shè)計計師：“什

9、么意意思？”產(chǎn)品經(jīng)理理：“就是說說，有人人意識不不到選完完了省，選完了了城市以以后，還還得點添加。他們們覺得，選完了了就完事事了?！苯换ピO(shè)計計師：“暈?！苯换ピO(shè)計計師：“可能是是已選列列表框在在空著的的時候長長得太秀秀氣了，大家沒沒意識到到它是用用來裝東東西的?！苯换ピO(shè)計計師：“好吧，我有兩兩個方案案。1、把添加按鈕上上面加一一個向下下的箭頭頭。指向向已選列列表框。2、在已已選列表表空著的的時候，添加一一條提示示語，來來提示用用戶他并并沒有完完成區(qū)域域選擇操操作?！碑a(chǎn)品經(jīng)理理：“提示語語那個，你的意意思是說說，當(dāng)用用戶添加加了城市市以后，會自動動消失是是吧？”交互設(shè)計計師：“是的。”產(chǎn)品經(jīng)理理

10、：“我覺得得加提示示吧。感感覺放箭箭頭有點點兒傻?！苯换ピO(shè)計計師：“嗯，而而且，可可能放了了箭頭以以后，用用戶依然然不知所所云?！碑a(chǎn)品經(jīng)理理：“那提示示語怎么么說呢？您尚未未添加任任何區(qū)域域，請選選定城市市后，點點擊上面面的添添加按按鈕，該該城市會會被添加加到”交互設(shè)計計師：“停！太太長了，大部分分人不會會認(rèn)真看看完的?！碑a(chǎn)品經(jīng)理理：“的確”交互設(shè)計計師：“我看就就一句話話就可以以。寫您尚未未添加任任何區(qū)域域?！苯换ピO(shè)計計師：“你看。下拉列列表后面面的按鈕鈕叫添添加。提示中中又明確確的傳達(dá)達(dá)出了尚尚未添添加的的狀態(tài)。這樣既既說明了了這個框框框是用用來放東東西的，又可以以告訴用用戶，這這個東西西

11、是可以以選多個個的。因因為添添加的的概念就就是一個個一個往往里面放放。如果果只能放放一個，那應(yīng)該該叫選選擇。”產(chǎn)品經(jīng)理理：“頂。”交互設(shè)計計師：“而且，我覺得得這個控控件最初初的原型型你設(shè)計計的不錯錯。嗯，用戶只只要成功功的進(jìn)行行一次操操作，以以后就可可以非常常高效的的進(jìn)行操操作了。這個東東西的學(xué)學(xué)習(xí)成本本和認(rèn)知知成本都都比較低低。”產(chǎn)品經(jīng)理理：“ooh,yyeahh”那么，現(xiàn)現(xiàn)在的UUI是這這樣的：產(chǎn)品經(jīng)理理：“哎，對對了。話話說，我我最開始始的策略略是，用用戶如果果不選，相當(dāng)于于全選，要全國國投放的的。你說說如果用用戶選了了指定定，但但是并沒沒有添加加具體的的城市，直接提提交表單單，怎么么

12、辦？系系統(tǒng)是應(yīng)應(yīng)該直接接把用戶戶的廣告告設(shè)置成成全國投投放，還還是報錯錯，阻止止用戶繼繼續(xù)？”交互設(shè)計計師：“我看啊啊，報錯錯吧。因因為現(xiàn)在在全國國和指定這兩項項，已經(jīng)經(jīng)明確的的把整體體和局部部給分開開了。我我覺得你你那個策策略沒必必要再應(yīng)應(yīng)用了，因為現(xiàn)現(xiàn)在這種種已經(jīng)達(dá)達(dá)到了你你最初的的目的，而且還還好理解解。再有有就是，咱們的的平臺是是涉及到到錢的，是要讓讓用戶花花錢的，如果讓讓用戶不不明不白白花了冤冤枉錢，本來想想投北京京的投了了全國，那我們們會被用用戶罵死死的。雖雖然感覺覺上報錯錯會讓用用戶有挫挫敗感，但是在在這種細(xì)細(xì)節(jié)上，還是用用戶利益益應(yīng)該放放在第一一位，用用戶體驗驗，可以以稍微往往

13、后放一一放了?！碑a(chǎn)品經(jīng)理理：“好吧?！苯换ピO(shè)計計師：“呵呵，你看，這個故故事告訴訴我們，不能每每件事情情都聽產(chǎn)產(chǎn)品的。產(chǎn)品提提的只是是需求，但是如如何實現(xiàn)現(xiàn)需求，還是得得從多個個角度來來討論?！碑a(chǎn)品經(jīng)理理：“好吧。那么，技術(shù)兄兄弟們，下面的的工作就就拜托你你們了?！笨偨Y(jié)：1、產(chǎn)品品經(jīng)理和和交互設(shè)設(shè)計師需需要時刻刻密切配配合，深深入溝通通。2、有時時候，產(chǎn)產(chǎn)品策略略和用戶戶體驗會會發(fā)生沖沖突，這這時應(yīng)該該從多種種角度去去考慮和和探討最最終解決決方案，不應(yīng)該該有誰一一定比誰誰重要的的說法。3、優(yōu)秀秀的產(chǎn)品品經(jīng)理，相當(dāng)于于半個交交互。同同樣，優(yōu)優(yōu)秀的交交互設(shè)計計師，相相當(dāng)于半半個產(chǎn)品品。二者者雖然職職位不同同，但是是應(yīng)該在在一定程程度上考考慮對方方的工作作內(nèi)容。4、產(chǎn)品品提出的的只是策策略和需需求，并并不是一一定