分享Shandy Tsai的個(gè)人學(xué)習(xí)心得。從求學(xué)、第一份工作，第一次換工作，中間經(jīng)過許多挫折與吸取教訓(xùn)的心路歷程。

犯錯(cuò)是必須的，成長是辛苦也值得的。這次通過插畫的方式，輕松地帶大家認(rèn)識(shí)產(chǎn)品設(shè)計(jì)師的各種辛酸血淚lol

圖1. 媽我真的不想再改了…

一、看到Behance, Dribbble的美麗prototype，不再興奮地跳起來

剛開始學(xué)習(xí)UX/UI時(shí)，常常會(huì)瀏覽Dribble?,?Behance等設(shè)計(jì)作品網(wǎng)站，看到華麗的動(dòng)畫、優(yōu)雅的排版，會(huì)非常興奮地想學(xué)習(xí)效仿。

直到工作一陣子后，發(fā)現(xiàn)最具挑戰(zhàn)的是把設(shè)計(jì)真正實(shí)現(xiàn)的開發(fā)過程、考慮到不同的使用情境，及與多方團(tuán)隊(duì)合作的溝通技巧。

當(dāng)然，不是說這些理想prototype不再重要，而是更加了解實(shí)際開發(fā)的過程及挑戰(zhàn)。

圖2. 「什么動(dòng)效？代碼能實(shí)現(xiàn)的才是好動(dòng)效」

二、發(fā)現(xiàn)Wireframe只有設(shè)計(jì)師看得懂

Wireframe是設(shè)計(jì)過程中很重要的環(huán)節(jié)，進(jìn)行思考、初階成品，讓設(shè)計(jì)師可以專注于使用流程及互動(dòng)。還記得在學(xué)校、求職的過程，都會(huì)要求要做線框圖，以解釋設(shè)計(jì)流程。

但是 . . . 我發(fā)現(xiàn)好像只有我看得懂? ? ?

「Shandy你在呈現(xiàn)設(shè)計(jì)時(shí)，請(qǐng)盡量使用高保真設(shè)計(jì)原型」還記得剛?cè)肼殨r(shí)，PM跟我這么說，當(dāng)時(shí)的我百思不得其解。后來與各部門溝通經(jīng)驗(yàn)多了，才逐漸明白：

1. 大部分的人是視覺動(dòng)物

大多數(shù)人需要擬真的設(shè)計(jì)原型，才能感受、想像產(chǎn)品交互，提供真實(shí)回饋

2. 需要更多步驟去解釋產(chǎn)品交互

通常Wireframe只有簡略的少數(shù)畫面，但實(shí)際產(chǎn)品包含了畫面切換，甚至是一個(gè)下拉選單dropdown、search bar搜尋列，都有可能影響到用戶體驗(yàn)。

3. 有時(shí)候視覺元素會(huì)影響用戶體驗(yàn)

雖然說Wireframe盡可能減少視覺元素，但視覺設(shè)計(jì)是用戶使用產(chǎn)品的第一印象，包含圖片、插畫、色調(diào)等

當(dāng)有足夠經(jīng)驗(yàn)時(shí)，你會(huì)漸漸明白使用Wireframe的適當(dāng)時(shí)機(jī)。如果是產(chǎn)品團(tuán)隊(duì)在開發(fā)階段、重視流程或是功能性>外觀，這時(shí)候使用Wireframe是快速及有效的方式；但如果需要跨部門討論、進(jìn)行用戶訪談時(shí)，盡量使用高寶真的prototype，會(huì)得到更真實(shí)的想法及回饋。

圖3. 設(shè)計(jì)提案報(bào)告完了，大家好像都似懂非懂，原來是什么都不懂?

三、工程師是你最要好的朋友

有些設(shè)計(jì)師會(huì)認(rèn)為工程師是敵人，他們總是問一大堆問題、提出需求、甚至打擊你的設(shè)計(jì)：「如果按這個(gè)按鈕，界面應(yīng)該要長怎么樣？」、「可不可以給我這個(gè)圖片的svg檔」、「這個(gè)功能技術(shù)端無法實(shí)現(xiàn)」…等。聽到這些問題，差點(diǎn)又多長了幾根白頭發(fā)。

好的產(chǎn)品是設(shè)計(jì)、工程與商業(yè)的結(jié)晶，缺一不可！

不同的意見是很正常的，因?yàn)槟銈兂霭l(fā)的角度不同，目的都是為了讓產(chǎn)品更完善。工程師考慮各種使用情境，與交互細(xì)節(jié)。他們會(huì)從元件的角度去思考，盡量重復(fù)利用，減省資源及時(shí)間，他們是產(chǎn)品的建造者及捍衛(wèi)者。

學(xué)習(xí)理解開發(fā)者的角度及思考邏輯、試著理清問題、解釋設(shè)計(jì)理由，相信你們可以一起”搬磚”的很愉悅順利！

圖4. 好的產(chǎn)品是一個(gè)團(tuán)隊(duì)共同努力的成果，試著站在對(duì)方的角度思考

四、沒有一次到位的設(shè)計(jì)

剛開始接觸UX/UI的朋友，會(huì)認(rèn)為做好用戶研究、資訊架構(gòu)、競(jìng)爭者分析后，畫出來的設(shè)計(jì)圖就是最后定案。

NO NO NO 這是一個(gè)常見設(shè)計(jì)迷思

與視覺設(shè)計(jì)很不同的是，產(chǎn)品設(shè)計(jì)是多方合作的過程。與PM討論功能目的、和工程師理清各種使用情境、與QA確認(rèn)設(shè)計(jì)細(xì)節(jié)、聆聽使用者回饋等。

所以當(dāng)設(shè)計(jì)提案被打回時(shí)，是非常非常非常正常的。記住，大家都是為了讓產(chǎn)品更好，或者想要貢獻(xiàn)產(chǎn)品想法。許多時(shí)候是在于溝通技巧，如何有效呈現(xiàn)設(shè)計(jì)與捍衛(wèi)設(shè)計(jì)。因此，理清真正的問題、適時(shí)聆聽是很重要的。

圖5. 怎么沒有一次射中靶的…

五、產(chǎn)品是迭代(永無止盡)的過程

這點(diǎn)跟第四點(diǎn)有相關(guān)，也就是說當(dāng)你設(shè)計(jì)完了、也開發(fā)完了，用戶也使用到新功能了，你深深嘆了一口氣：「啊～終于結(jié)束了這三個(gè)月的折磨日子」

殊不知，這時(shí)真正的產(chǎn)品大魔王才開始…

直到用戶使用產(chǎn)品，我們才會(huì)得到真正的數(shù)據(jù)，了解實(shí)際使用情境及回饋。有可能需要修改設(shè)計(jì)、或是增加輔助功能等。能盡量減少修改次數(shù)的方法之一，就是在推出前做User Testing，提早了解產(chǎn)品缺陷及即時(shí)修正。最著名的例子—??Netflix做了非常多的A/B Testing，去理解用戶、最佳化用戶體驗(yàn)。

圖6. 山這么高、這么遠(yuǎn)，我腿這么短是要怎么爬過去

結(jié)語Conclusion

話說了這么多，想要成為一個(gè)優(yōu)秀的產(chǎn)品設(shè)計(jì)師，不只需要精進(jìn)設(shè)計(jì)實(shí)力，還要考慮現(xiàn)實(shí)狀況、學(xué)習(xí)與各部門溝通技巧，及“非常良好”的耐心細(xì)心，才能領(lǐng)導(dǎo)團(tuán)隊(duì)創(chuàng)造一次又一次更好的產(chǎn)品。

沒有最好的產(chǎn)品，只有更好的產(chǎn)品

好，我知道聽起來壓力很大

還是先來放松一下，來～～～跟我深吸一口氣，吐一口氣～～～

．

．

．

快給我回去認(rèn)真工作?。?！

圖7. 最好的解決辦法就是戴上耳機(jī)，動(dòng)動(dòng)屁股，讓腦袋靜一靜