分享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)屁股,讓腦袋靜一靜
全站高品質(zhì)素材免費(fèi)下載!