成功有時候都體現(xiàn)在瑣碎的小細(xì)節(jié)里面，對于細(xì)節(jié)的執(zhí)著不是不知變通，而是對更高品質(zhì)的追求。

前一篇文章寫的偏虛了，有留言說舉實例。這篇內(nèi)容來自真實的微信聊天，隱去了真名。本來想作為素材，后來發(fā)現(xiàn)直接平鋪出來就很好，真實的反應(yīng)了產(chǎn)品人員日常的溝通，其中蘊含了從UI到產(chǎn)品定位很多信息，不同的觀察點能看到更多。

簡單介紹下背景：這款A(yù)PP是垂直于理財師知識付費的應(yīng)用，文章內(nèi)容是APP新改版中“我的”頁面的交流。

溝通記錄

Part1：UI設(shè)計和產(chǎn)品設(shè)計相互影響，沒有正確傳達出產(chǎn)品設(shè)計意圖。

ss：下午最大的問題是大家都認(rèn)為“我的”那里不合理，現(xiàn)在的效果圖是這樣——

yb：說說什么問題？認(rèn)為入口放的位置？

ss：說這個頁面丑。感覺意見反饋就不應(yīng)該著這里，應(yīng)該放在設(shè)置里，這里進來就應(yīng)該直接展示像現(xiàn)在的“我的”一樣的信息，包括我的賬戶、我的優(yōu)惠券、我的個人信息都隱藏的太深。
yb：

yb：輸入框縮小，再放下放。

ss：那這個頁面就更空了。

yb：沒事，JJ在整理用戶畫像，會有新的字段添加進來。

ss：那這里就是相當(dāng)于一個用戶自己的名片？

yb：對。

ss：這個頁面進入編輯個人信息的入口就只有點擊頭像？

yb：可以參考上面這個概念。

ss：我懂了，那這個頁面最好重新設(shè)計。按照個人名片或者是 學(xué)生證的概念去做吧！

yb：聰明！

yb：這個以后可映射的信息會特別多，不能搞得進來跟進個商城APP似的，把優(yōu)惠劵，賬戶之類的直接列出來。

Part2：這部分溝通先確定了頁面上涵蓋的功能項，但是產(chǎn)品人員對產(chǎn)品意圖的理解模糊，對UI的傳導(dǎo)不明確，導(dǎo)致視覺效果達不到滿意程度。

?：這是新設(shè)計出來的【我的】名片，2版。

?：

?：

yb：紅色部分是不是重疊啊?綠色部分縱向排列的話占區(qū)域太多。

?：是的 紅色區(qū)域功能是一樣的兩種擺放形式，您看那個更好？ 綠色的區(qū)域是否可以放到 設(shè)置-關(guān)于我們里面去呢 類似這樣 或者刪減一部分聯(lián)系方式的文字。

yb：紅色保持原來在頂部的方式。

yb：綠色可以只剩下客服電話，其他的按你說的。

?：好的。

yb：

yb：這個區(qū)域的設(shè)計可以再沖擊力一些,結(jié)合jj做的用戶畫像,區(qū)域可以占比再大些。

?：好的，我們再調(diào)整一下出一版。

yb：試著打一些高光，色彩飽和一些，看看會不好些。

yb：創(chuàng)意上，看看國際大牌的廣告頁。

?：好的 這個頁面上需要加用戶的聯(lián)系方式么？以后用戶分享這個頁面到朋友圈除了炫耀外，有些是用于拓展業(yè)務(wù)的。

yb：現(xiàn)在不用。

?：

yb：

yb：紅圈部分是啥意思？

yb：下部再往下走。

?：紅圈是分享。

yb：好夸張的分享按鈕。

發(fā)現(xiàn)了產(chǎn)品人員對產(chǎn)品意圖的理解模糊，詳細(xì)說了一下頁面想傳達信息和匹配的視覺需求。

yb：

ss：好的 ，我們也認(rèn)為意見反饋應(yīng)該是點進去單獨的頁面

ss：上方個人名片區(qū)域跟tt溝通了一下，她覺得用背景圖可能跟咱們app整體的風(fēng)格不太一致，因為個人主頁的頭部也是背景色，app內(nèi)沒有用圖片做背景的地方這里可能比較突兀，她傾向于用色塊線框跟app風(fēng)格統(tǒng)一的設(shè)計。

yb：這個我知道，所以選的圖不能太花。

yb：試一下吧！

Part3：產(chǎn)品人員沒有平衡好運營需求和產(chǎn)品意圖，但比溝通剛開始的強了，問題開始逐漸聚焦UI層。

ss：

ss：

ss：

yb：標(biāo)紅的都不要。

yb：

yb：浮框也去掉，已經(jīng)有圖了就不要太多的設(shè)計元素。找的圖上的元素不要太多，比如只有路和遠方模糊的遠方，不要天空，白云，之類的修飾。

ss：那兩邊的留白也不要？

yb：可以試著不要，讓圖和留白混為一體。圖后面的紅條也不要，沒理解加個紅條是什么意思。

yb：小暈。

ss：

ss：那這種全屏的效果考慮么？

yb：這版UI不要大面積使用cc選的提亮色，這個色不適合大面積使用。

yb：有點意思了。

yb：把人的頭像位置能和路做個結(jié)合就爽了。

yb：圖還是不夠素，上面元素過多。

ss：好的 ，我傳達給tt了，她理解了，在找圖重新做效果了。

Part4：通過舉例相似的設(shè)計意圖，試圖加快設(shè)計過程。

yb：參考這個——

ss：

ss：

ss：全屏背景圖的放在UI 圖里整體看特別突兀 ，這樣的我看著還行。

ss：上邊那兩張個人信息效果圖您看怎么樣？

yb：

yb：這個好點。

yb：下面的輸入框要啊。

yb：上面的模糊處理太過了。

ss：是不是類似搜索那種輸入框，點擊就進入一個新頁面。

ss：

yb：

yb：往下啊。

ss：

yb：好一些了。

yb：

yb：期待與您溝通。

yb：類似的文字。

yb：這個頁面的設(shè)計意圖是這樣：上面其實是用戶在我們的系統(tǒng)的映射，下面是和我們聯(lián)系，潛意識告訴用戶，你的樣子是這樣的，在這里你可以成長，如果有不順利的請告訴我，我會專門給你提供服務(wù)。

ss：

ss：這個意思？

yb：好，有點意思了。

Part5：貌似終于只剩下UI層的問題，開始摳一些UI細(xì)節(jié)。

yb：

yb：客服電話可撥打的效果。

yb：

ss：那從哪進入編輯用戶信息的頁面??？

yb：直接點整個圖片。

yb：

yb：標(biāo)題換成英文試試。

ss：英文就是，Mine，了。

ss：my。

yb：嗯。

yb：試試。

yb：

yb：這張圖很不錯。

ss：

yb：

yb：

ss：這個圖會有版權(quán)問題的。

yb：先試試。

yb：沒事。

yb：好看的話，照著找圖。

yb：類似的大海航行的圖能找到。

yb：還在弄嗎？

ss：在找航海圖。

yb：直接用那張圖，先看效果。

yb：直接用那張圖P，可以把這張圖的設(shè)計過程寫個文章，應(yīng)該能發(fā)表了，這個也可以是運營的素材，體現(xiàn)咱們多么精益求精。

yb：效果圖還在做嗎？

ss：在做在做。

yb：需要我過去一趟嗎？

ss：現(xiàn)在么。

yb：嗯。

yb：需要嗎？

ss：正在改，你要不要看一下改的行不行再決定。

yb：好，我等著。

ss:

Part6：搞笑并無奈的結(jié)尾，還是到現(xiàn)場溝通。

yb：你們可以等嗎？

yb：我打車過去。

Part7：現(xiàn)場溝通，歷時一個下午到晚上，頁面終于誕生。

晚上11點，終于出來第一個版本：

一小段日常的溝通，展現(xiàn)的不只是產(chǎn)品的事情。見微知著，組織結(jié)構(gòu)、協(xié)調(diào)運轉(zhuǎn)這些都能體現(xiàn)出來。都知道創(chuàng)業(yè)的風(fēng)險大，創(chuàng)業(yè)失敗的時候，我們往往喜歡分析商業(yè)模式或者關(guān)鍵步驟，但也許成功的秘密就掩蓋在這些瑣碎之中。

本文由 @YB 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議