起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門(mén)專(zhuān)項(xiàng)技能課
1300+專(zhuān)題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專(zhuān)業(yè)技能直播
會(huì)員專(zhuān)屬社群
榮耀標(biāo)識(shí)產(chǎn)品設(shè)計(jì)細(xì)節(jié)黑洞——?jiǎng)?chuàng)業(yè)公司PM的真實(shí)溝通
成功有時(shí)候都體現(xiàn)在瑣碎的小細(xì)節(jié)里面，對(duì)于細(xì)節(jié)的執(zhí)著不是不知變通，而是對(duì)更高品質(zhì)的追求。
前一篇文章寫(xiě)的偏虛了，有留言說(shuō)舉實(shí)例。這篇內(nèi)容來(lái)自真實(shí)的微信聊天，隱去了真名。本來(lái)想作為素材，后來(lái)發(fā)現(xiàn)直接平鋪出來(lái)就很好，真實(shí)的反應(yīng)了產(chǎn)品人員日常的溝通，其中蘊(yùn)含了從UI到產(chǎn)品定位很多信息，不同的觀察點(diǎn)能看到更多。
簡(jiǎn)單介紹下背景：這款A(yù)PP是垂直于理財(cái)師知識(shí)付費(fèi)的應(yīng)用，文章內(nèi)容是APP新改版中“我的”頁(yè)面的交流。
溝通記錄
Part1：UI設(shè)計(jì)和產(chǎn)品設(shè)計(jì)相互影響，沒(méi)有正確傳達(dá)出產(chǎn)品設(shè)計(jì)意圖。
ss：下午最大的問(wèn)題是大家都認(rèn)為“我的”那里不合理，現(xiàn)在的效果圖是這樣——
yb：說(shuō)說(shuō)什么問(wèn)題？認(rèn)為入口放的位置？
ss：說(shuō)這個(gè)頁(yè)面丑。感覺(jué)意見(jiàn)反饋就不應(yīng)該著這里，應(yīng)該放在設(shè)置里，這里進(jìn)來(lái)就應(yīng)該直接展示像現(xiàn)在的“我的”一樣的信息，包括我的賬戶(hù)、我的優(yōu)惠券、我的個(gè)人信息都隱藏的太深。
yb：
yb：輸入框縮小，再放下放。
ss：那這個(gè)頁(yè)面就更空了。
yb：沒(méi)事，JJ在整理用戶(hù)畫(huà)像，會(huì)有新的字段添加進(jìn)來(lái)。
ss：那這里就是相當(dāng)于一個(gè)用戶(hù)自己的名片？
yb：對(duì)。
ss：這個(gè)頁(yè)面進(jìn)入編輯個(gè)人信息的入口就只有點(diǎn)擊頭像？
yb：可以參考上面這個(gè)概念。
ss：我懂了，那這個(gè)頁(yè)面最好重新設(shè)計(jì)。按照個(gè)人名片或者是 學(xué)生證的概念去做吧！
yb：聰明！
yb：這個(gè)以后可映射的信息會(huì)特別多，不能搞得進(jìn)來(lái)跟進(jìn)個(gè)商城APP似的，把優(yōu)惠劵，賬戶(hù)之類(lèi)的直接列出來(lái)。
Part2：這部分溝通先確定了頁(yè)面上涵蓋的功能項(xiàng)，但是產(chǎn)品人員對(duì)產(chǎn)品意圖的理解模糊，對(duì)UI的傳導(dǎo)不明確，導(dǎo)致視覺(jué)效果達(dá)不到滿(mǎn)意程度。
?：這是新設(shè)計(jì)出來(lái)的【我的】名片，2版。
?：
?：
yb：紅色部分是不是重疊啊?綠色部分縱向排列的話占區(qū)域太多。
?：是的 紅色區(qū)域功能是一樣的兩種擺放形式，您看那個(gè)更好？ 綠色的區(qū)域是否可以放到 設(shè)置-關(guān)于我們里面去呢 類(lèi)似這樣 或者刪減一部分聯(lián)系方式的文字。
yb：紅色保持原來(lái)在頂部的方式。
yb：綠色可以只剩下客服電話，其他的按你說(shuō)的。
?：好的。
yb：
yb：這個(gè)區(qū)域的設(shè)計(jì)可以再?zèng)_擊力一些,結(jié)合jj做的用戶(hù)畫(huà)像,區(qū)域可以占比再大些。
?：好的，我們?cè)僬{(diào)整一下出一版。
yb：試著打一些高光，色彩飽和一些，看看會(huì)不好些。
yb：創(chuàng)意上，看看國(guó)際大牌的廣告頁(yè)。
?：好的 這個(gè)頁(yè)面上需要加用戶(hù)的聯(lián)系方式么？以后用戶(hù)分享這個(gè)頁(yè)面到朋友圈除了炫耀外，有些是用于拓展業(yè)務(wù)的。
yb：現(xiàn)在不用。
?：
yb：
yb：紅圈部分是啥意思？
yb：下部再往下走。
?：紅圈是分享。
yb：好夸張的分享按鈕。
發(fā)現(xiàn)了產(chǎn)品人員對(duì)產(chǎn)品意圖的理解模糊，詳細(xì)說(shuō)了一下頁(yè)面想傳達(dá)信息和匹配的視覺(jué)需求。
yb：
ss：好的 ，我們也認(rèn)為意見(jiàn)反饋應(yīng)該是點(diǎn)進(jìn)去單獨(dú)的頁(yè)面
ss：上方個(gè)人名片區(qū)域跟tt溝通了一下，她覺(jué)得用背景圖可能跟咱們app整體的風(fēng)格不太一致，因?yàn)閭€(gè)人主頁(yè)的頭部也是背景色，app內(nèi)沒(méi)有用圖片做背景的地方這里可能比較突兀，她傾向于用色塊線框跟app風(fēng)格統(tǒng)一的設(shè)計(jì)。
yb：這個(gè)我知道，所以選的圖不能太花。
yb：試一下吧！
Part3：產(chǎn)品人員沒(méi)有平衡好運(yùn)營(yíng)需求和產(chǎn)品意圖，但比溝通剛開(kāi)始的強(qiáng)了，問(wèn)題開(kāi)始逐漸聚焦UI層。
ss：
ss：
ss：
yb：標(biāo)紅的都不要。
yb：
yb：浮框也去掉，已經(jīng)有圖了就不要太多的設(shè)計(jì)元素。找的圖上的元素不要太多，比如只有路和遠(yuǎn)方模糊的遠(yuǎn)方，不要天空，白云，之類(lèi)的修飾。
ss：那兩邊的留白也不要？
yb：可以試著不要，讓圖和留白混為一體。圖后面的紅條也不要，沒(méi)理解加個(gè)紅條是什么意思。
yb：小暈。
ss：
ss：那這種全屏的效果考慮么？
yb：這版UI不要大面積使用cc選的提亮色，這個(gè)色不適合大面積使用。
yb：有點(diǎn)意思了。
yb：把人的頭像位置能和路做個(gè)結(jié)合就爽了。
yb：圖還是不夠素，上面元素過(guò)多。
ss：好的 ，我傳達(dá)給tt了，她理解了，在找圖重新做效果了。
Part4：通過(guò)舉例相似的設(shè)計(jì)意圖，試圖加快設(shè)計(jì)過(guò)程。
yb：參考這個(gè)——
ss：
ss：
ss：全屏背景圖的放在UI 圖里整體看特別突兀 ，這樣的我看著還行。
ss：上邊那兩張個(gè)人信息效果圖您看怎么樣？
yb：
yb：這個(gè)好點(diǎn)。
yb：下面的輸入框要啊。
yb：上面的模糊處理太過(guò)了。
ss：是不是類(lèi)似搜索那種輸入框，點(diǎn)擊就進(jìn)入一個(gè)新頁(yè)面。
ss：
yb：
yb：往下啊。
ss：
yb：好一些了。
yb：
yb：期待與您溝通。
yb：類(lèi)似的文字。
yb：這個(gè)頁(yè)面的設(shè)計(jì)意圖是這樣：上面其實(shí)是用戶(hù)在我們的系統(tǒng)的映射，下面是和我們聯(lián)系，潛意識(shí)告訴用戶(hù)，你的樣子是這樣的，在這里你可以成長(zhǎng)，如果有不順利的請(qǐng)告訴我，我會(huì)專(zhuān)門(mén)給你提供服務(wù)。
ss：
ss：這個(gè)意思？
yb：好，有點(diǎn)意思了。
Part5：貌似終于只剩下UI層的問(wèn)題，開(kāi)始摳一些UI細(xì)節(jié)。
yb：
yb：客服電話可撥打的效果。
yb：
ss：那從哪進(jìn)入編輯用戶(hù)信息的頁(yè)面?。?/p>
yb：直接點(diǎn)整個(gè)圖片。
yb：
yb：標(biāo)題換成英文試試。
ss：英文就是，Mine，了。
ss：my。
yb：嗯。
yb：試試。
yb：
yb：這張圖很不錯(cuò)。
ss：
yb：
yb：
ss：這個(gè)圖會(huì)有版權(quán)問(wèn)題的。
yb：先試試。
yb：沒(méi)事。
yb：好看的話，照著找圖。
yb：類(lèi)似的大海航行的圖能找到。
yb：還在弄嗎？
ss：在找航海圖。
yb：直接用那張圖，先看效果。
yb：直接用那張圖P，可以把這張圖的設(shè)計(jì)過(guò)程寫(xiě)個(gè)文章，應(yīng)該能發(fā)表了，這個(gè)也可以是運(yùn)營(yíng)的素材，體現(xiàn)咱們多么精益求精。
yb：效果圖還在做嗎？
ss：在做在做。
yb：需要我過(guò)去一趟嗎？
ss：現(xiàn)在么。
yb：嗯。
yb：需要嗎？
ss：正在改，你要不要看一下改的行不行再?zèng)Q定。
yb：好，我等著。
ss:
Part6：搞笑并無(wú)奈的結(jié)尾，還是到現(xiàn)場(chǎng)溝通。
yb：你們可以等嗎？
yb：我打車(chē)過(guò)去。
Part7：現(xiàn)場(chǎng)溝通，歷時(shí)一個(gè)下午到晚上，頁(yè)面終于誕生。
晚上11點(diǎn)，終于出來(lái)第一個(gè)版本：
一小段日常的溝通，展現(xiàn)的不只是產(chǎn)品的事情。見(jiàn)微知著，組織結(jié)構(gòu)、協(xié)調(diào)運(yùn)轉(zhuǎn)這些都能體現(xiàn)出來(lái)。都知道創(chuàng)業(yè)的風(fēng)險(xiǎn)大，創(chuàng)業(yè)失敗的時(shí)候，我們往往喜歡分析商業(yè)模式或者關(guān)鍵步驟，但也許成功的秘密就掩蓋在這些瑣碎之中。
本文由 @YB 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
第二層對(duì)公司組織結(jié)構(gòu)運(yùn)轉(zhuǎn)的展示：這段溝通中其他部門(mén)提出問(wèn)題是高保真都已經(jīng)做出來(lái)的時(shí)候，其實(shí)這些意見(jiàn)可以在之前就發(fā)現(xiàn)提出來(lái)，說(shuō)明部門(mén)之間的融合程度有待提高，這在創(chuàng)業(yè)公司中是效率提升的非常好的辦法。后面的溝通中也能看出，產(chǎn)品設(shè)計(jì)內(nèi)部的能力結(jié)構(gòu)上的欠缺。
不好意思，寫(xiě)錯(cuò)了幾個(gè)字。
這段日常的溝通，不光是對(duì)產(chǎn)品的追求。
第一層能夠展示對(duì)產(chǎn)品負(fù)責(zé)人能力的要求：比如第一段其他部門(mén)對(duì)設(shè)計(jì)稿提出質(zhì)疑，作為產(chǎn)品負(fù)責(zé)人能夠判斷出問(wèn)題的癥結(jié)在哪，否則按照意見(jiàn)把我的賬戶(hù)、我的優(yōu)惠券放開(kāi)，就是另外一番光景。比如在后面UI和產(chǎn)品的交流中，能夠判斷出是UI的要改還是產(chǎn)品的思維要改。不能一股腦推給UI人員作圖。這些都是建立在對(duì)產(chǎn)品整體定位和發(fā)展變換的戰(zhàn)略把控的基礎(chǔ)之上。
第二層對(duì)公司組織結(jié)構(gòu)運(yùn)轉(zhuǎn)的展示：這段溝通中其他部門(mén)提出問(wèn)題是高保真都已經(jīng)做出來(lái)的時(shí)候，其他這些意見(jiàn)可以在之前就發(fā)現(xiàn)提出來(lái)，說(shuō)明部門(mén)直接的融合程度有待提高，這在創(chuàng)業(yè)公司中是效率提升的非常好的辦法。后面的溝通中也能看出，產(chǎn)品設(shè)計(jì)內(nèi)部的能力結(jié)構(gòu)上的欠缺。
作為一個(gè)有審美的產(chǎn)品，很棒！
很真實(shí)，期待其他文章
你這是做的 智慧名片項(xiàng)目？智能名片現(xiàn)在做的人 非常多，希望你們能夠勝出
謝謝。沒(méi)有做智慧名片，是一個(gè)垂直理財(cái)師的培訓(xùn)APP。
內(nèi)容過(guò)于真實(shí)，hiahia，還好沒(méi)有最后說(shuō)一句：“就用第一版吧” ??
夠真吧，和當(dāng)事人征求了意見(jiàn)發(fā)出來(lái)的。