1、1 / 9產(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é)。 說(shuō)其曖昧， 是因?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)品的易用性、流暢度和 操作感受?？偟膩?lái)看，似乎可以認(rèn)為，產(chǎn)品經(jīng)理是從一個(gè)更加宏 觀的角度去設(shè)計(jì)產(chǎn)品，而交互設(shè)計(jì)師，則是從更多的細(xì)節(jié)出發(fā)， 去提升用戶(hù)體驗(yàn)。 這兩種不同的視

2、角決定了只有產(chǎn)品經(jīng)理和交互 設(shè)計(jì)師密切配合， 深入溝通， 才能夠最高效最合理的將產(chǎn)品策略 轉(zhuǎn)化為產(chǎn)品原型， 從而為流水線的后面環(huán)節(jié)提供精確的參考資料。下面以人人網(wǎng)廣告平臺(tái)的一些產(chǎn)品和交互細(xì)節(jié)為例， 使用對(duì) 話的形式來(lái)分享一下我個(gè)人在做交互設(shè)計(jì)過(guò)程中的一些體會(huì)和 想法。在廣告平臺(tái)其中一個(gè)投放系統(tǒng)中， 有一個(gè)產(chǎn)品需求， 是要根 據(jù)廣告受眾所在的地區(qū)做廣告的定向投放。 也就是說(shuō)， 可以控制 廣告只展示給固定地域的受眾。這就意味著，需要設(shè)計(jì)一個(gè)區(qū) 域選擇器，供用戶(hù)選擇區(qū)域。產(chǎn)品經(jīng)理的原始需求是這樣的：產(chǎn)品經(jīng)理：“我們這次的投放系統(tǒng)需要設(shè)計(jì)一個(gè)區(qū)域選擇器， 就是讓用戶(hù)選擇廣告定向投放的區(qū)域的?？梢跃_到

3、城市，可以 多選。另外，區(qū)域作為一個(gè)投放廣告的限制條件，如果用戶(hù) 沒(méi)有選擇任何選項(xiàng)，那2 / 9就代表用戶(hù)忽略該條件， 則該廣告會(huì)面向 全國(guó)投放?！苯换ピO(shè)計(jì)師：“哦?！碑a(chǎn)品經(jīng)理：“嗯，我能夠想到的這個(gè)東西的原型，可以提供 兩個(gè)下拉框，讓用戶(hù)分別選擇省和城市。 當(dāng)用戶(hù)在第一個(gè)下拉框 里面選定了省以后，第二個(gè)下拉框中會(huì)顯示該省下面的地級(jí)市。我做了一個(gè)簡(jiǎn)單的框圖，大家看一下。”區(qū)憾： 遼寧省 大連市 加北京【刪除】 上海c刪帰】產(chǎn)品經(jīng)理：“大概就是這個(gè)樣子。每選定一個(gè)城市，點(diǎn)擊后 面的添加按鈕，可以將該城市添加到下面的列表中。同時(shí)，如果 點(diǎn)擊已經(jīng)添加的城市名稱(chēng)后面的刪除鏈接，則會(huì)將該城市從 已選列表

4、抹去?！苯换ピO(shè)計(jì)師：“等一下，我有一個(gè)問(wèn)題。按照產(chǎn)品的策略， 如果用戶(hù)一個(gè)城市都不選， 那么就會(huì)默認(rèn)投放全國(guó)。 但是這個(gè)概 念很難表達(dá)給用戶(hù)，比如說(shuō)，如果在區(qū)域選擇器旁邊放提示， 估計(jì)沒(méi)有多少人會(huì)注意到?！碑a(chǎn)品經(jīng)理：“一個(gè)都沒(méi)選，就是等于忽略條件啊。因?yàn)檫@些都是限制條件?！苯换ピO(shè)計(jì)師：“問(wèn)題是用戶(hù)很難意識(shí)到是這樣。 在中國(guó)人的觀念中，大家都是覺(jué)得，選上的，是我要的。但是大家沒(méi)有不3 / 9選就等于全要這種思維習(xí)慣。”交互設(shè)計(jì)師：“我覺(jué)得可以這樣。我們?cè)诂F(xiàn)在的區(qū)域選擇器上面放兩個(gè)單選按鈕。一個(gè)叫全國(guó)，另一個(gè)叫做指定 打開(kāi)頁(yè)面時(shí)，默認(rèn)選中全國(guó)項(xiàng)，并隱藏區(qū)域選擇器。只 有用戶(hù)選擇指定項(xiàng)時(shí)，區(qū)域選擇器

5、才會(huì)出現(xiàn)。這樣表達(dá)就很 明確了，你不是全國(guó)就是指定。”產(chǎn)品經(jīng)理：“哦聽(tīng)起來(lái)不錯(cuò)。試試?！庇谑堑玫搅讼旅孢@個(gè)版本的原型圖:0全國(guó)指走遷寧省 尢連市T+爲(wèi)加北京刪除】上海匸刪除】交互設(shè)計(jì)師：“嗯，我想，現(xiàn)在這個(gè)版本已經(jīng)基本上從界面的層面解決了全國(guó)投放的選項(xiàng)問(wèn)題，我想，用戶(hù)應(yīng)該不會(huì)因?yàn)椴恢涝趺催x而卡在這里了。”交互設(shè)計(jì)師： “我看下一步， 需要對(duì)一些關(guān)鍵的元素做一定 的視覺(jué)設(shè)計(jì)，以便于引導(dǎo)用戶(hù)操作。比如添加按鈕，應(yīng)該更 明顯些。我覺(jué)得可以請(qǐng) UIUI 設(shè)計(jì)師出一個(gè)簡(jiǎn)單版本的 UIUI 了?！?產(chǎn)品經(jīng)理： “稍等一下， 我看咱們還是把細(xì)節(jié)再討論清楚一 些再去找 UIUI 吧。比如，字的顏色啊什么的都

6、沒(méi)定呢。而且，我 覺(jué)得選中的區(qū)域中， 每個(gè)城市名稱(chēng)后面都跟著一個(gè)刪除鏈接， 很 奇怪?！? / 9交互設(shè)計(jì)師：“嗯。的確。我的想法是這樣，字的顏色，就 用黑色吧， 或者是深一些的灰色也行。 雖然從視覺(jué)設(shè)計(jì)的角度來(lái) 看，視覺(jué)設(shè)計(jì)師覺(jué)得稍淺一些的灰色比較養(yǎng)眼，可能黑色太 搶。但是咱們的系統(tǒng)畢竟是給人用的，灰色的話，可能會(huì)讓 人誤認(rèn)為這些選項(xiàng)是不可操作的。你看如何？”產(chǎn)品經(jīng)理：“同意?！?交互設(shè)計(jì)師：“關(guān)于已經(jīng)選中的區(qū)域列表。我看可以把刪 除鏈接換成X,事實(shí)上，用戶(hù)對(duì)于X這種符號(hào)比漢字更敏感。 你看，大家不論是用 WindowsWindows 還是 Mac,Mac,關(guān)閉窗口的時(shí)候都是X，早就習(xí)慣了。

7、另外，為了讓所選定的城市名稱(chēng)看起來(lái)是一個(gè)整體，并且跟其他城市名稱(chēng)區(qū)分開(kāi)。 我看, 可以給每一個(gè)城市加上背景 色,每個(gè)城市一個(gè)色塊,這樣也一目了然?！碑a(chǎn)品經(jīng)理：“顏色呢？” 交互設(shè)計(jì)師：“藍(lán)色吧,人人網(wǎng)都是藍(lán)色的風(fēng)格?！? / 9產(chǎn)品經(jīng)理：“ okok”于是，配合 UIUI 設(shè)計(jì)師，得到了下面的界面:區(qū)懂：匚全國(guó)艇區(qū)蜷：全國(guó) 。適壬S把捕上每擊全部犬連市產(chǎn)品經(jīng)理：“我看現(xiàn)在這個(gè)地方已經(jīng)基本上成型了。咱們也已經(jīng)討論很很久了。該問(wèn)問(wèn)別人的意見(jiàn)?！?時(shí)間分割線-產(chǎn)品經(jīng)理：“ HiHi各位。我收集了一些內(nèi)部測(cè)試的意見(jiàn)。有用戶(hù)提出，搞不太清楚兩個(gè)下拉菜單和添加按鈕之間的關(guān)系。”交互設(shè)計(jì)師：“什么意思？”產(chǎn)

8、品經(jīng)理：“就是說(shuō)，有人意識(shí)不到選完了省，選完了城市以后，還得點(diǎn)添加。他們覺(jué)得，選完了就完事了交互設(shè)計(jì)師：“暈?！苯换ピO(shè)計(jì)師： “可能是已選列表框在空著的時(shí)候長(zhǎng)得太秀氣 了，大家沒(méi)意識(shí)到它是用來(lái)裝東西的?！北本╉f北票布全部“6 / 9交互設(shè)計(jì)師：“好吧，我有兩個(gè)方案。 1 1、把添加按鈕 上面加一個(gè)向下的箭頭。指向已選列表框。 2 2、在已選列表空著 的時(shí)候， 添加一條提示語(yǔ)， 來(lái)提示用戶(hù)他并沒(méi)有完成區(qū)域選擇操 作?！碑a(chǎn)品經(jīng)理：“提示語(yǔ)那個(gè)，你的意思是說(shuō)，當(dāng)用戶(hù)添加了城 市以后，會(huì)自動(dòng)消失是吧？”交互設(shè)計(jì)師：“是的?！?產(chǎn)品經(jīng)理：“我覺(jué)得加提示吧。感覺(jué)放箭頭有點(diǎn)兒傻?！?交互設(shè)計(jì)師：“嗯，而且，

9、可能放了箭頭以后，用戶(hù)依然不 知所云?！碑a(chǎn)品經(jīng)理： “那提示語(yǔ)怎么說(shuō)呢？您尚未添加任何區(qū)域， 請(qǐng)選定城市后，點(diǎn)擊上面的添加按鈕，該城市會(huì)被添加到”交互設(shè)計(jì)師：“停！太長(zhǎng)了，大部分人不會(huì)認(rèn)真看完的?！?產(chǎn)品經(jīng)理：“的確”交互設(shè)計(jì)師： “我看就一句話就可以。 寫(xiě)您尚未添加任何 區(qū)域?！苯换ピO(shè)計(jì)師：“你看。下拉列表后面的按鈕叫添加。提 示中又明確的傳達(dá)出了尚未添加的狀態(tài)。這樣既說(shuō)明了這個(gè) 框框是用來(lái)放東西的， 又可以告訴用戶(hù)， 這個(gè)東西是可以選多個(gè)7 / 9的。因?yàn)樘砑拥母拍罹褪且粋€(gè)一個(gè)往里面放。如果只能放一 個(gè)，那應(yīng)該叫選擇?！碑a(chǎn)品經(jīng)理：“頂?！苯换ピO(shè)計(jì)師：“而且，我覺(jué)得這個(gè)控件最初的原型你設(shè)計(jì)的

10、 不錯(cuò)。嗯，用戶(hù)只要成功的進(jìn)行一次操作，以后就可以非常高效 的進(jìn)行操作了。這個(gè)東西的學(xué)習(xí)成本和認(rèn)知成本都比較低?！碑a(chǎn)品經(jīng)理：“ oh,yeahoh,yeah”那么，現(xiàn)在的 UIUI 是這樣的:產(chǎn)品經(jīng)理：“哎，對(duì)了。話說(shuō)，我最開(kāi)始的策略是，用戶(hù)如 果不選，相當(dāng)于全選，要全國(guó)投放的。你說(shuō)如果用戶(hù)選了指定， 但是并沒(méi)有添加具體的城市， 直接提交表單，怎么辦？系統(tǒng)是應(yīng) 該直接把用戶(hù)的廣告設(shè)置成全國(guó)投放，還是報(bào)錯(cuò)，阻止用戶(hù)繼 續(xù)？”交互設(shè)計(jì)師：“我看啊，報(bào)錯(cuò)吧。因?yàn)楝F(xiàn)在全國(guó)和指 定這兩項(xiàng)，已經(jīng)明確的把整體和局部給分開(kāi)了。我覺(jué)得你那個(gè) 策略沒(méi)必要再應(yīng)用了， 因?yàn)楝F(xiàn)在這種已經(jīng)達(dá)到了你最初的目的，而且還好理解

11、。 再有就是，咱們的平臺(tái)是涉及到錢(qián)的，是要讓用 戶(hù)花錢(qián)的，如果讓用戶(hù)不明不白花了冤枉錢(qián)， 本來(lái)想投北京的投 了全國(guó)，那我們會(huì)被用戶(hù)罵死的。雖然感覺(jué)上報(bào)錯(cuò)會(huì)讓用戶(hù)有挫 敗感，但是在這種細(xì)節(jié)上，還是用戶(hù)利益應(yīng)該放在第一位，用戶(hù) 體驗(yàn)，可以稍微往后放一放了?！眳^(qū)域;全國(guó) 福定j晾市8 / 9產(chǎn)品經(jīng)理：“好吧?！?交互設(shè)計(jì)師：“呵呵，你看，這個(gè)故事告訴我們， 不能每件 事情都聽(tīng)產(chǎn)品的。 產(chǎn)品提的只是需求， 但是如何實(shí)現(xiàn)需求，還是 得從多個(gè)角度來(lái)討論?！碑a(chǎn)品經(jīng)理： “好吧。 那么， 技術(shù)兄弟們， 下面的工作就拜托 你們了。 ”總結(jié)：1 1、產(chǎn)品經(jīng)理和交互設(shè)計(jì)師需要時(shí)刻密切配合，深入溝通。2 2、有時(shí)候，產(chǎn)品策略和用戶(hù)體驗(yàn)會(huì)發(fā)生沖突，這時(shí)應(yīng)該從 多種角度去考慮和探討最終解決方案， 不應(yīng)該有誰(shuí)一定比誰(shuí)重要 的說(shuō)法。3 3、優(yōu)秀的產(chǎn)品經(jīng)理，相當(dāng)于半個(gè)交互。同樣