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

產(chǎn)品經(jīng)理和交互設(shè)計(jì)的那些事–原型設(shè)計(jì)圖形成的流程在一個(gè)互聯(lián)網(wǎng)公司的工作流程中，產(chǎn)品經(jīng)理（主要指偏向產(chǎn)品設(shè)計(jì)的產(chǎn)品人員）和交互設(shè)計(jì)師是這個(gè)流水線上最起點(diǎn)的環(huán)節(jié)，也是關(guān)系最曖昧的兩個(gè)環(huán)節(jié)。說其曖昧，是因?yàn)樵诤芏嗷ヂ?lián)網(wǎng)公司里面，這兩個(gè)環(huán)節(jié)所做的事情是有重合的，這就意味著，他們或許也是整個(gè)流程中合作最緊密的兩個(gè)環(huán)節(jié)。相對(duì)比之下，產(chǎn)品經(jīng)理更關(guān)注的是產(chǎn)品的內(nèi)部邏輯、操作流程、策略等；而交互設(shè)計(jì)師更關(guān)注的是產(chǎn)品的易用性、流暢度和操作感受?？偟膩砜矗坪蹩梢哉J(rèn)為，產(chǎn)品經(jīng)理是從一個(gè)更加宏觀的角度去設(shè)計(jì)產(chǎn)品，而交互設(shè)計(jì)師，則是從更多的細(xì)節(jié)出發(fā)，去提升用戶體驗(yàn)。這兩種不同的視角決定了只有產(chǎn)品經(jīng)理和交互設(shè)計(jì)師密切配合，深入溝通，才能夠最高效最合理的將產(chǎn)品策略轉(zhuǎn)化為產(chǎn)品原型，從而為流水線的后面環(huán)節(jié)提供精確的參考資料。下面以人人網(wǎng)廣告平臺(tái)的一些產(chǎn)品和交互細(xì)節(jié)為例，使用對(duì)話的形式來分享一下我個(gè)人在做交互設(shè)計(jì)過程中的一些體會(huì)和想法。在廣告平臺(tái)其中一個(gè)投放系統(tǒng)中，有一個(gè)產(chǎn)品需求，是要根據(jù)廣告受眾所在的地區(qū)做廣告的定向投放。也就是說，可以控制廣告只展示給固定地域的受眾。這就意味著，需要設(shè)計(jì)一個(gè)「區(qū)域選擇器」，供用戶選擇區(qū)域。產(chǎn)品經(jīng)理的原始需求是這樣的：產(chǎn)品經(jīng)理：“我們這次的投放系統(tǒng)需要設(shè)計(jì)一個(gè)區(qū)域選擇器，就是讓用戶選擇廣告定向投放的區(qū)域的?？梢跃_到城市，可以多選。另外，‘區(qū)域’作為一個(gè)投放廣告的限制條件，如果用戶沒有選擇任何選項(xiàng)，那就代表用戶忽略該條件，則該廣告會(huì)面向全國投放。”交互設(shè)計(jì)師：“哦。”產(chǎn)品經(jīng)理：“嗯，我能夠想到的這個(gè)東西的原型，可以提供兩個(gè)下拉框，讓用戶分別選擇省和城市。當(dāng)用戶在第一個(gè)下拉框里面選定了省以后，第二個(gè)下拉框中會(huì)顯示該省下面的地級(jí)市。我做了一個(gè)簡單的框圖，大家看一下?！碑a(chǎn)品經(jīng)理：“大概就是這個(gè)樣子。每選定一個(gè)城市，點(diǎn)擊后面的添加按鈕，可以將該城市添加到下面的列表中。同時(shí)，如果點(diǎn)擊已經(jīng)添加的城市名稱后面的「刪除」鏈接，則會(huì)將該城市從已選列表抹去?！苯换ピO(shè)計(jì)師：“等一下，我有一個(gè)問題。按照產(chǎn)品的策略，如果用戶一個(gè)城市都不選，那么就會(huì)默認(rèn)投放全國。但是這個(gè)概念很難表達(dá)給用戶，比如說，如果在「區(qū)域選擇器」旁邊放提示，估計(jì)沒有多少人會(huì)注意到?！碑a(chǎn)品經(jīng)理：“一個(gè)都沒選，就是等于忽略條件啊。因?yàn)檫@些都是限制條件?！苯换ピO(shè)計(jì)師：“問題是用戶很難意識(shí)到是這樣。在中國人的觀念中，大家都是覺得，選上的，是我要的。但是大家沒有「不選就等于全要」這種思維習(xí)慣?！苯换ピO(shè)計(jì)師：“我覺得可以這樣。我們?cè)诂F(xiàn)在的「區(qū)域選擇器」上面放兩個(gè)單選按鈕。一個(gè)叫「全國」，另一個(gè)叫做「指定」。打開頁面時(shí)，默認(rèn)選中「全國」項(xiàng)，并隱藏「區(qū)域選擇器」。只有用戶選擇「指定」項(xiàng)時(shí)，區(qū)域選擇器才會(huì)出現(xiàn)。這樣表達(dá)就很明確了，你不是「全國」就是「指定」。”產(chǎn)品經(jīng)理：“哦~聽起來不錯(cuò)。試試?！迸溆谑堑玫搅讼旅孢@個(gè)版偶本的原型圖須：挽交互設(shè)計(jì)師袍：辦“左嗯，我想，劑現(xiàn)在這個(gè)版窄本已經(jīng)基本故上從界面的登層面解決了旋全國投放的白選項(xiàng)問題，喂我想，用戶維應(yīng)該不會(huì)因?qū)O為不知道怎臘么選而卡在爛這里了。利”濕交互設(shè)計(jì)師艘：栽“黨我看下一步緩，需要對(duì)一暈些關(guān)鍵的元睛素做一定的臟視覺設(shè)計(jì)，抽以便于引導(dǎo)褲用戶操作。怪比如「添加什」按鈕，應(yīng)涉該更明顯些沈。我覺得可盼以請(qǐng)胸UI山設(shè)計(jì)師出一藥個(gè)簡單版本坦的冬UI損了。懼”齒產(chǎn)品經(jīng)理：濫“吵稍等一下，而我看咱們還抹是把細(xì)節(jié)再候討論清楚一饅些再去找轎UI叨吧。比如，挪字的顏色啊嫂什么的都沒事定呢。而且御，我覺得選博中的區(qū)域中沃，每個(gè)城市亦名稱后面都殊跟著一個(gè)刪舟除鏈接，很嚼奇怪。努”笨交互設(shè)計(jì)師灶：吼“聾嗯。的確。悉我的想法是敢這樣，字的熟顏色，就用農(nóng)黑色吧，或紙者是深一些背的灰色也行常。雖然從視賣覺設(shè)計(jì)的角善度來看，視蒸覺設(shè)計(jì)師覺網(wǎng)得稍淺一些立的灰色比較坐養(yǎng)眼，可能榜黑色太敵‘犯搶威’護(hù)。但是咱們噴的系統(tǒng)畢竟雄是給人用的臘，灰色的話煉，可能會(huì)讓意人誤認(rèn)為這桑些選項(xiàng)是不緒可操作的。司你看如何？嫁”穩(wěn)產(chǎn)品經(jīng)理：秧“誰同意。非”嗓交互設(shè)計(jì)師衣：仰“宰關(guān)于已經(jīng)選感中的區(qū)域列可表。我看可翼以把「刪除籍」鏈接換成駕×出，事實(shí)上，盆用戶對(duì)于獨(dú)×恢這種符號(hào)比擴(kuò)漢字更敏感賭。你看，大邪家不論是用崖Windo栽ws跑還是項(xiàng)Mac烘，關(guān)閉窗口怠的時(shí)候都是話×角，早就習(xí)慣自了。另外，跡為了讓所選請(qǐng)定的城市名絹稱看起來是映一個(gè)整體，叔并且跟其他腫城市名稱區(qū)絲分開。我看藝，可以給每凝一個(gè)城市加厚上背景色，燒每個(gè)城市一票個(gè)色塊，這缸樣也一目了兩然。孫”鏈產(chǎn)品經(jīng)理：諷“挺顏色呢？船”擋交互設(shè)計(jì)師扛：麻“貝藍(lán)色吧，人公人網(wǎng)都是藍(lán)辛色的風(fēng)格。筆”尼產(chǎn)品經(jīng)理：疑“ok”葡于是，配合課UI劑設(shè)計(jì)師，得骨到了下面的膝界面：套產(chǎn)品經(jīng)理：接“胃我看現(xiàn)在這裳個(gè)地方已經(jīng)飯基本上成型乘了。咱們也饒已經(jīng)討論很撓很久了。該喪問問別人的屢意見。絨”永———-泉時(shí)間分割線消———-末產(chǎn)品經(jīng)理：狐“Hi~鋪各位。我收禾集了一些內(nèi)逮部測試的意蒜見。有用戶印提出，搞不綢太清楚兩個(gè)賊下拉菜單和壤「添加」按鍬鈕之間的關(guān)驗(yàn)系。殲”陷交互設(shè)計(jì)師律：切“擔(dān)什么意思？產(chǎn)”詠產(chǎn)品經(jīng)理：鑄“械就是說，有爛人意識(shí)不到晉選完了省，膊選完了城市忘以后，還得恨點(diǎn)「添加」林。他們覺得喚，選完了就稠完事了。階”菜交互設(shè)計(jì)師范：倒“甲暈。挺”誤交互設(shè)計(jì)師執(zhí)：高“嗚可能是已選付列表框在空輛著的時(shí)候長掉得太秀氣了謹(jǐn)，大家沒意輩識(shí)到它是用看來裝東西的片?？棥毙督换ピO(shè)計(jì)師館：裁“鴿好吧，我有瓶兩個(gè)方案。店1六、把「添加券」按鈕上面杏加一個(gè)向下藝的箭頭。指正向已選列表站框。軌2塞、在已選列逃表空著的時(shí)值候，添加一南條提示語，釀來提示用戶妄他并沒有完拴成區(qū)域選擇哭操作。用”益產(chǎn)品經(jīng)理：沈“曠提示語那個(gè)滾，你的意思媽是說，當(dāng)用災(zāi)戶添加了城鍵市以后，會(huì)義自動(dòng)消失是覆吧？簡”鳴交互設(shè)計(jì)師儀：奏“日是的。鋤”良產(chǎn)品經(jīng)理：廚“饞我覺得加提干示吧。感覺般放箭頭有點(diǎn)養(yǎng)兒傻。齊”嘉交互設(shè)計(jì)師圓：械“煩嗯，而且，辛可能放了箭展頭以后，用搭戶依然不知屈所云。盲”顫產(chǎn)品經(jīng)理：編“悔那提示語怎唉么說呢？您宗尚未添加任價(jià)何區(qū)域，請(qǐng)內(nèi)選定城市后會(huì)，點(diǎn)擊上面茶的「添加」符按鈕，該城賊市會(huì)被添加筋到非…”冬交互設(shè)計(jì)師扣：貢“萄停！太長了駁，大部分人景不會(huì)認(rèn)真看臂完的。伸”套產(chǎn)品經(jīng)理：輛“群的確搜…”柄交互設(shè)計(jì)師鹿：堆“陡我看就一句財(cái)話就可以。磁寫健‘臺(tái)您尚未添加辱任何區(qū)域。逐’”酸交互設(shè)計(jì)師壺：藍(lán)“擴(kuò)你看。下拉塞列表后面的碧按鈕叫「添耽加」。提示稅中又明確的炭傳達(dá)出了尚蝦未「添加」踢的狀態(tài)。這薯樣既說明了暖這個(gè)框框是期用來放東西偽的，又可以炎告訴用戶，括這個(gè)東西是朽可以選多個(gè)抖的。因?yàn)椤父裉砑印沟母牌瞿罹褪且粋€(gè)鑰一個(gè)往里面夕放。如果只纏能放一個(gè)，憑那應(yīng)該叫「羨選擇」。均”訓(xùn)產(chǎn)品經(jīng)理：齒“段頂。恨”增交互設(shè)計(jì)師梁：事“陜而且，我覺守得這個(gè)控件嗎最初的原型捐你設(shè)計(jì)的不推錯(cuò)。嗯，用污戶只要成功衰的進(jìn)行一次留操作，以后級(jí)就可以非常椒高效的進(jìn)行端操作了。這潛個(gè)東西的學(xué)煮習(xí)成本和認(rèn)帽知成本都比何較低。舟”防產(chǎn)品經(jīng)理：厲“oh,y診eah~”鍛那么，現(xiàn)在納的遣UI蜘是這樣的：恥產(chǎn)品經(jīng)理：剛“談哎，對(duì)了。器話說，我最茂開始的策略劫是，用戶如飾果不選，相冰當(dāng)于全選，魂要全國投放卵的。你說如危果用戶選了內(nèi)「指定」，群但是并沒有寸添加具體的詠城市，直接吐提交表單，凍怎么辦？系鄉(xiāng)統(tǒng)是應(yīng)該直督接把用戶的付廣告設(shè)置成賺全國投放，栽還是報(bào)錯(cuò)，駝阻止用戶繼欠續(xù)？嗚”持交互設(shè)計(jì)師齒：禁“室我看啊，報(bào)奏錯(cuò)吧。因?yàn)樘含F(xiàn)在「全國純」和「指定擦」這兩項(xiàng)，傅已經(jīng)明確的室把整體和局在部給分開了燥。我覺得你忘那個(gè)策略沒徑必要再應(yīng)用飲了，因?yàn)楝F(xiàn)顧在這種已經(jīng)史達(dá)到了你最罰初的目的，深而且還好理轟解。再有就跌是，咱們的掃平臺(tái)是涉及誓到錢的，是裕要讓用戶花槍錢的，如果擊讓用戶不明爪不白花了冤睡枉錢，本來院想投北京的等投了全國，匆那我們會(huì)被崖用戶罵死的末。雖然感覺插上報(bào)錯(cuò)會(huì)讓癢用戶有挫敗授感，但是在僅這種細(xì)節(jié)上研，還是用戶舞利益應(yīng)該放杯在第一位，遵用戶體驗(yàn)，貝可以稍微往為后放一放了誘。悲”初產(chǎn)品經(jīng)理：殘“廚好吧。盾”沿交互設(shè)計(jì)師甚：往“挎呵呵，你看速，這個(gè)故事倍告訴我們，醫(yī)不能每件事膊情都聽產(chǎn)品漿的。產(chǎn)品提聰?shù)闹皇切枨髨?jiān)，但是如何另實(shí)現(xiàn)需求，航還是得從多半個(gè)角度來討葛論。怖”耕產(chǎn)品經(jīng)理：撈“壤好吧。那么嬌，技術(shù)兄弟挨們，下面的布工作就拜托鋼你們了。尚”總結(jié)：掏1繪、產(chǎn)品經(jīng)理辯和交互設(shè)計(jì)晶師需要時(shí)刻胸密切配合，楊深入溝通。舅2障、有時(shí)候，羊產(chǎn)品策略和慚用戶體驗(yàn)會(huì)孫發(fā)生沖突，密這時(shí)應(yīng)該從旬多種角度去傅考慮和探討誼最終解決方宅案，不應(yīng)該序有誰一定比繞誰重要的說評(píng)法。恰3違、優(yōu)秀的產(chǎn)房品經(jīng)理，相粗當(dāng)于半個(gè)交傻互。同樣，銀優(yōu)秀的交互己設(shè)計(jì)師，相叼當(dāng)于半個(gè)產(chǎn)翠品。二者雖怖然職位不同華，但是應(yīng)該瓣在一定程度坑上考慮對(duì)方據(jù)的工作內(nèi)容梁。盞4餓、產(chǎn)品提出戀的只是策略廣和需求，并跳不是一定要