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

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