起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)UI設(shè)計(jì)師和PM都應(yīng)該有的思維方式
編輯導(dǎo)語：對(duì)于一個(gè)產(chǎn)品來說，不論是產(chǎn)品經(jīng)理還是設(shè)計(jì)師，都對(duì)產(chǎn)品有著很大的影響；產(chǎn)品經(jīng)理掌握著產(chǎn)品的各項(xiàng)需求，需要與設(shè)計(jì)師進(jìn)行合理的溝通以及雙方的理解，才能保證產(chǎn)品的順利進(jìn)行；本文作者分享了關(guān)于產(chǎn)品經(jīng)理與設(shè)計(jì)師在工作過程中的思維方式，我們一起來看一下。
今天給大家分享的案例非常給力又有趣，很可能會(huì)改變你未來UI設(shè)計(jì)過程中的思考方式。
而且，如果你常常感覺被PM或者需求方牽著走，自己總是在做執(zhí)行，那這篇文章會(huì)讓你找到突破方法。
一、案例解析
分享案例之前，我們先了解一下PM角色的職業(yè)特征，接觸的PM多了會(huì)發(fā)現(xiàn)，很多PM工作中會(huì)給人一種目的性很強(qiáng)的感覺；比如他們?cè)谙蚪换鬟f需求或自己畫原型圖時(shí)，常常是A重要的就把A放到最明顯的地方，看似合理，其實(shí)很多時(shí)候交互邏輯是缺失體驗(yàn)的。
當(dāng)然他們形成的這種思維方式是可以理解的，PM常常被各方需求纏身，沒有時(shí)間深入考慮體驗(yàn)層面。
所以PM非常需要與交互、UI配合，這樣才能更好的完成產(chǎn)品設(shè)計(jì)。
但是，很多產(chǎn)品經(jīng)理缺少與設(shè)計(jì)師建立配合的意識(shí)，而是習(xí)慣讓設(shè)計(jì)師去執(zhí)行自己的設(shè)計(jì)想法。
更可怕的是，還不能讓設(shè)計(jì)師理解他設(shè)計(jì)的目的，這就導(dǎo)致設(shè)計(jì)師常常被帶跑偏。
1. 開始案例分享
下圖是交互設(shè)計(jì)師按照產(chǎn)品經(jīng)理的想法設(shè)計(jì)的原型圖，此頁面是會(huì)員成長(zhǎng)值的得分統(tǒng)計(jì)。
頁面的功能目的是引導(dǎo)用戶做任務(wù)，從而得到更高的分值，升到更高的會(huì)員等級(jí)。
原型圖分為三個(gè)部分，上面是五維圖（蜘蛛圖），中間是平臺(tái)的推薦任務(wù)，下面是對(duì)應(yīng)五維度的五個(gè)Tab任務(wù)。
身為UI設(shè)計(jì)師拿到原型圖，你會(huì)從哪些方面著手進(jìn)行設(shè)計(jì)呢？
按原型圖來設(shè)計(jì)，最終的設(shè)計(jì)稿是下圖的樣子：
1）按原型圖設(shè)計(jì)稿
頁面中五維圖與下面的五個(gè)Tab是聯(lián)動(dòng)關(guān)系，用戶點(diǎn)擊五維圖可以控制Tab切換。
然而，現(xiàn)在中間插了一個(gè)“推薦任務(wù)”模塊，這就會(huì)給人一種割裂感。
2）設(shè)計(jì)稿問題解析
從體驗(yàn)的角度來看，這樣的設(shè)計(jì)無法過關(guān)，與產(chǎn)品經(jīng)理商討調(diào)整“推薦任務(wù)”位置，他完全不同意。
他的理由是，推薦任務(wù)是系統(tǒng)匹配給用戶最適合當(dāng)前完成的任務(wù)，必須放到首屏這個(gè)位置；產(chǎn)品經(jīng)理的表述 “必須放到首屏這個(gè)位置”這就是讓設(shè)計(jì)師執(zhí)行他的目的方案，而不是與設(shè)計(jì)師配合來解決這個(gè)需求。
遇到產(chǎn)品經(jīng)理這樣“有理有據(jù)”的表述，相信很多UI設(shè)計(jì)師都會(huì)妥協(xié)，這時(shí)其實(shí)就被產(chǎn)品經(jīng)理帶坑里了。
產(chǎn)品經(jīng)理落實(shí)需求的思考方式往往是直接了斷的，這就很容易缺失體驗(yàn)，所以，交互設(shè)計(jì)師的價(jià)值就會(huì)體現(xiàn)于此。
但無論有沒有交互設(shè)計(jì)師來梳理交互，UI設(shè)計(jì)師都需要帶著交互思維進(jìn)一步去驗(yàn)證設(shè)計(jì)。
回到案例，雖然產(chǎn)品經(jīng)理很強(qiáng)勢(shì)，但如果有問題，設(shè)計(jì)師還是應(yīng)該去驗(yàn)證并改正問題，以下是幾種改正方案。
方案一
方案一：雖然符合產(chǎn)品的布局邏輯，但是無法滿足產(chǎn)品需求。
因?yàn)橥扑]是算法得出最適合用戶的任務(wù)，不出現(xiàn)在首屏就不能及時(shí)曝光，也就會(huì)降低用戶提升成長(zhǎng)值的速度。
方案二
方案二：產(chǎn)品布局邏輯合理，但加標(biāo)簽提示，只能曝光當(dāng)前Tab的推薦任務(wù)，所以同樣會(huì)降低提升速度。
方案三（定稿）
方案三：把推薦任務(wù)放到Tab中，不僅符合產(chǎn)品邏輯，也能在首屏充分曝光，能夠滿足產(chǎn)品需求。
當(dāng)時(shí)把第三個(gè)方案給產(chǎn)品經(jīng)理看后，他微微一笑欣然接受，相信下次他會(huì)多聽聽設(shè)計(jì)師的想法。
總結(jié)：
優(yōu)秀的產(chǎn)品經(jīng)理善于讓設(shè)計(jì)師明白他的需求目的，或是同設(shè)計(jì)師一起去探討設(shè)計(jì)方案，而不是強(qiáng)勢(shì)的讓設(shè)計(jì)師去遵循他的目的方案。
而作為設(shè)計(jì)師，要善于挖掘需求目的，多思考并驗(yàn)證上游的產(chǎn)出，為他人把關(guān)就是提升自己的價(jià)值。
2. 一個(gè)更有趣的案例
如果上一個(gè)案例，沒能讓你有所感悟，那讓下面這個(gè)案例來直擊你的靈魂。
先說一個(gè)事，曾經(jīng)與產(chǎn)品經(jīng)理開會(huì)過原型圖，當(dāng)有人質(zhì)疑為什么這個(gè)頁面不能調(diào)轉(zhuǎn)到另一個(gè)頁面時(shí)。
產(chǎn)品經(jīng)理隨口就說，“那在這個(gè)頁面加個(gè)按鈕入口就行了”，然后需求方都認(rèn)同的說，“嗯，這樣邏輯上就走通了”。
這樣的思考方式，我稱之為補(bǔ)窟窿思維，當(dāng)產(chǎn)品中出現(xiàn)一個(gè)問題時(shí)，馬上在問題的基礎(chǔ)上找解決辦法。
這樣往往會(huì)因?yàn)闆]有做到全局思考，而影響到其他功能體驗(yàn)，久而久之產(chǎn)品還會(huì)變得臃腫難用。
接下來要分享的就是一個(gè)典型案例，產(chǎn)品經(jīng)理和設(shè)計(jì)師都愛在這點(diǎn)上踩坑，領(lǐng)悟到這個(gè)案例的精髓，會(huì)讓你的思維更開闊。
下圖是線上版本的推薦醫(yī)師頁面，現(xiàn)在的需求是在此頁面增加一個(gè)用戶歷史預(yù)約入口，方便用戶找到曾經(jīng)用過的醫(yī)師。
線上頁面
增加歷史預(yù)約入口，按照產(chǎn)品經(jīng)理的想法設(shè)計(jì)，是下圖的樣子。
產(chǎn)品經(jīng)理的設(shè)計(jì)方案
UI設(shè)計(jì)師認(rèn)為產(chǎn)品經(jīng)理的設(shè)計(jì)方案，不夠好看，視覺上過于突兀，還破壞了頁面結(jié)構(gòu)。
UI設(shè)計(jì)師的想法是，把歷史預(yù)約入口換成圖標(biāo)形式，放到頁面右上角，如下圖所示。
UI設(shè)計(jì)師的設(shè)計(jì)方案
以上兩種方案你會(huì)更傾向誰呢？
如果我選，我選擇產(chǎn)品經(jīng)理的設(shè)計(jì)方案，雖然有點(diǎn)突兀，但可以滿足產(chǎn)品需求，因?yàn)闈M足產(chǎn)品需求才是最重要的。
UI設(shè)計(jì)師的想法也可以理解，確實(shí)使用圖標(biāo)不會(huì)破壞頁面結(jié)構(gòu)，美觀度也不錯(cuò)，但用戶的理解成本過高，會(huì)失去功能性。
二、敲黑板！重點(diǎn)來了
產(chǎn)品經(jīng)理的設(shè)計(jì)方案雖然好一些，但未必是最好的設(shè)計(jì)方案。
現(xiàn)在我們拋去在當(dāng)前頁面中加入口的思維方式，把此頁面當(dāng)成0-1重新思考設(shè)計(jì)。
通過整合梳理會(huì)發(fā)現(xiàn)，頁面中其實(shí)是兩大功能模塊即“推薦醫(yī)師”和“歷史預(yù)約”。
推薦醫(yī)師與歷史預(yù)約
所以，其實(shí)把兩個(gè)功能模塊設(shè)計(jì)成Tab切換更為合適，這樣既能突出功能滿足需求，也不會(huì)突兀，如下圖所示。
Tab切換體驗(yàn)更好（定稿）
問題來了！
Tab切換是非常常見的設(shè)計(jì)形式，為什么開始產(chǎn)品經(jīng)理和UI設(shè)計(jì)師都沒想到呢？
其原因就是他們把思維局限在了頁面加入口上，沒有從整合全局功能的思考方式出發(fā)。
所以，當(dāng)頁面上加功能時(shí)，一定要站在全局視角思考設(shè)計(jì)方案，而且是必須這樣思考。
#專欄作家#
吳星辰，微信公眾號(hào)：互聯(lián)網(wǎng)設(shè)計(jì)幫，人人都是產(chǎn)品經(jīng)理專欄作家。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
作者寫的太棒了！但是我有個(gè)疑問，第一個(gè)案例中感覺推薦和另外幾個(gè)tab 并不是同一層級(jí)的 放在一起不對(duì)吧？誰能給我解答下～～感謝哦
（1）第一次想到的解決方式不一定是最好的解決方式。（2）頁面加功能時(shí)，思維不僅要局限到打補(bǔ)丁入口上。從全局功能分類再整合的角度出發(fā)。
哇偶?。。。。。。?！
都是好用的干貨
寫的真好 確實(shí)是我踩過的坑
受教