職場(chǎng)上,設(shè)計(jì)師應(yīng)有的技能

3 評(píng)論 9208 瀏覽 24 收藏 15 分鐘

最近團(tuán)隊(duì)來(lái)了很多有潛力的小萌新,想起以前自己一步步踩過(guò)的坑,真不想這些小朋友再踩一次。但同時(shí)自己有懶得一個(gè)個(gè)去說(shuō)工作要怎么入手blablabla(而且說(shuō)了別人也沒(méi)法一口氣消化完)。于是就寫(xiě)了關(guān)于設(shè)計(jì)師該有怎么樣的工作習(xí)慣這篇文章。在平臺(tái)潛水那么久,學(xué)了那么多前輩的經(jīng)驗(yàn),終于可以自己分享點(diǎn)什么了~

一、設(shè)計(jì)師“看”什么

1. 原型

(1)需求完整性

需求是否設(shè)計(jì)完整不僅會(huì)決定設(shè)計(jì)師能否高效交付,還會(huì)延長(zhǎng)開(kāi)發(fā)周期。所以團(tuán)隊(duì)里的人都有責(zé)任為需求的完整性負(fù)責(zé)。設(shè)計(jì)師在需求評(píng)審之前要認(rèn)真看原型,理解業(yè)務(wù)。

一次需求評(píng)審?fù)ǔ0粋€(gè)或多個(gè)功能,要保證每個(gè)功能的流程(正向/逆向)、狀態(tài)、權(quán)限等都有清晰的說(shuō)明。并要時(shí)刻保持全局思考,多維度的審查該功能操作時(shí)是否對(duì)其他模塊內(nèi)容有聯(lián)動(dòng)性,這樣的聯(lián)動(dòng)對(duì)現(xiàn)在的頁(yè)面和交互是否有影響。

(2)需求合理性

一個(gè)完整的需求不一定是完美的。產(chǎn)品人員利用原型傳遞需求,但他們的原型通常并不是最優(yōu)的信息呈現(xiàn)方式或者功能交互方式。設(shè)計(jì)師需要在完全理解業(yè)務(wù)需求后,站在用戶(hù)的角度思考最優(yōu)方式。

2. 設(shè)計(jì)規(guī)范

(1)交互規(guī)范

作圖時(shí)布局要符合交互規(guī)范。交互設(shè)計(jì)應(yīng)該遵守從大到小的原則進(jìn)行,結(jié)構(gòu)層—>框架層—>內(nèi)容呈現(xiàn)。

  1. 首先需要清晰知道將要設(shè)計(jì)的目標(biāo)頁(yè)面在整個(gè)項(xiàng)目結(jié)構(gòu)里面屬于哪一層,例如外層列表/詳情頁(yè)/抽屜層等;
  2. 頁(yè)面布局要符合當(dāng)前頁(yè)面層次的布局規(guī)范,例如模塊位置、標(biāo)題位置、操作區(qū)位置等;
  3. 模塊內(nèi)容呈現(xiàn)要符合交互規(guī)范里面的組件規(guī)范,優(yōu)先選擇組件庫(kù)的組件或者項(xiàng)目積累的業(yè)務(wù)組件。

(2)UI規(guī)范

頁(yè)面表現(xiàn)層的細(xì)節(jié)應(yīng)符合UI規(guī)范??碪I規(guī)范的時(shí)候除了要知道規(guī)范里面固定的值(比如字體大小有12px、14px、16px等),更重要的是要看這些值的使用場(chǎng)景(比如12px的字是備注型文案、14px是普通正文等),保持風(fēng)格統(tǒng)一就是從這些視覺(jué)元素的統(tǒng)一開(kāi)始的。

3. 競(jìng)品

設(shè)計(jì)師要具備一定的競(jìng)品分析意識(shí)和能力。競(jìng)品分析可以讓設(shè)計(jì)師更了解行業(yè)同類(lèi)產(chǎn)品在類(lèi)似的業(yè)務(wù)場(chǎng)景的解決方案,從側(cè)面獲取行業(yè)背景和目標(biāo)用戶(hù)的行為習(xí)慣等方面的參考。多看競(jìng)品也可以開(kāi)拓設(shè)計(jì)師的眼界,從交互和視覺(jué)上對(duì)認(rèn)識(shí)標(biāo)桿競(jìng)品,能更客觀的看待自己的設(shè)計(jì)質(zhì)量以及發(fā)現(xiàn)項(xiàng)目中存在的設(shè)計(jì)優(yōu)化點(diǎn)。

特別是初級(jí)設(shè)計(jì)師,在接到任務(wù)后最好不要馬上動(dòng)手??梢远嗫纯赐?lèi)型的競(jìng)品,看別人對(duì)同樣的功能是怎么做交互和視覺(jué)的,這樣可以更直觀的去理解業(yè)務(wù)需求(剛?cè)腴T(mén)通常看需求都會(huì)覺(jué)得太抽象難理解)。

4.?產(chǎn)品核心數(shù)據(jù)

設(shè)計(jì)師應(yīng)該重視自己輸出物的實(shí)際效果有沒(méi)有達(dá)到預(yù)期。最直觀的方法是看真實(shí)數(shù)據(jù)。一般在項(xiàng)目開(kāi)始時(shí)PD除了會(huì)說(shuō)本次產(chǎn)品目標(biāo),還會(huì)取相關(guān)數(shù)據(jù)期望值。如果PD沒(méi)有給出數(shù)據(jù)期望值的話(huà),設(shè)計(jì)也應(yīng)主動(dòng)留意落地后數(shù)據(jù)的變化,一般可以看以下幾種數(shù)據(jù):

  1. 用戶(hù)去留:頁(yè)面PV、UV;
  2. 用戶(hù)關(guān)注點(diǎn):用戶(hù)使用路徑/關(guān)鍵頁(yè)P(yáng)V、UV;
  3. 用戶(hù)轉(zhuǎn)化率:用戶(hù)流失步驟/頁(yè)面跳出量、流失原因(操作埋點(diǎn))。

5. 科學(xué)的設(shè)計(jì)理論

設(shè)計(jì)理論是整個(gè)設(shè)計(jì)的靈魂及核心,凸顯你的整個(gè)設(shè)計(jì)作品是以什么理論作為基礎(chǔ)及支撐的依據(jù)。就像你如果覺(jué)得自己是作為一個(gè)具備獨(dú)立思考能力及判斷能力的社會(huì)人,那應(yīng)該具備的三觀,這是你在整個(gè)社會(huì)上生活、工作、處事、待人、對(duì)物等等的原則及判斷基礎(chǔ)。

設(shè)計(jì)師應(yīng)該是感性的+理性的,很多優(yōu)秀的設(shè)計(jì)師都會(huì)把自己的工作經(jīng)驗(yàn)總結(jié)成方法論。缺少感性,設(shè)計(jì)師就會(huì)變成圖形的搬運(yùn)工;缺少理性,設(shè)計(jì)師就很容易陷入“我認(rèn)為我覺(jué)得”狀態(tài)。好的設(shè)計(jì)除了在視覺(jué)層打動(dòng)人,還要有對(duì)應(yīng)的設(shè)計(jì)理論做支持,才能讓更多的人讀懂設(shè)計(jì)師的勞動(dòng)成果。

6. 流行設(shè)計(jì)

設(shè)計(jì)師看流行設(shè)計(jì)是最基礎(chǔ)的職業(yè)素養(yǎng)。如果一直不接收外界信息,人的思維方式會(huì)固化、思考能力會(huì)鈍化。設(shè)計(jì)師要保持自己靈感源源不斷必須要多看好的設(shè)計(jì),潛移默化中吸取別人的優(yōu)點(diǎn),感受時(shí)代的設(shè)計(jì)潮流。這樣在我們進(jìn)行設(shè)計(jì)時(shí)才不至于固步自封閉門(mén)造車(chē),而且對(duì)待同樣的需求我們可以短時(shí)間內(nèi)發(fā)散性的思考解決方案,提高工作效率和質(zhì)量。

二、設(shè)計(jì)師“做”什么

1. 設(shè)計(jì)圖

無(wú)論是什么設(shè)計(jì)工作,都離不開(kāi)設(shè)計(jì)圖。就像老話(huà)說(shuō)的“字如其人”,當(dāng)設(shè)計(jì)圖給到很多協(xié)作人員看和使用的時(shí)候,它就代表了設(shè)計(jì)師的為人性格和處事風(fēng)格。如果不想?yún)f(xié)作人員對(duì)自己有不好的印象,設(shè)計(jì)師就要對(duì)設(shè)計(jì)圖有管理意識(shí)。

  1. 畫(huà)板、圖層命名是否讓人能看懂;有些設(shè)計(jì)師沒(méi)有命名習(xí)慣,設(shè)計(jì)圖里全是“未命名1、copy1”,就像天書(shū)一樣讓人無(wú)從閱讀,甚至有種想打人的沖動(dòng)。
  2. 畫(huà)板排列是否有一定邏輯;就算畫(huà)板命名好了,排列方式和順序也是很重要的。不同模塊應(yīng)該要明顯的分隔開(kāi),同樣頁(yè)面不同狀態(tài)應(yīng)該盡量放在靠近的位置,方便別人查看。

2. 清晰的設(shè)計(jì)說(shuō)明

無(wú)論設(shè)計(jì)圖做的多棒,交互多炫酷,沒(méi)有說(shuō)明都是耍流氓。設(shè)計(jì)說(shuō)明主要的服務(wù)對(duì)象是開(kāi)發(fā)人員,他們實(shí)現(xiàn)一張?jiān)O(shè)計(jì)圖的時(shí)間可能是我們的好幾倍,所以設(shè)計(jì)師應(yīng)該多為他們著想,不要再讓開(kāi)發(fā)擠出時(shí)間去猜你的設(shè)計(jì)怎么實(shí)現(xiàn)。

另一方面,要是設(shè)計(jì)說(shuō)明不夠全面和清晰,會(huì)導(dǎo)致開(kāi)發(fā)人員在多方評(píng)審時(shí)沒(méi)辦法準(zhǔn)確判斷方案可行性,最終實(shí)現(xiàn)效果與設(shè)計(jì)不符。這時(shí)候開(kāi)發(fā)可能會(huì)給三種態(tài)度——生無(wú)可戀但還是給你改、無(wú)語(yǔ)至極并表示沒(méi)時(shí)間以后再改、一臉正經(jīng)地說(shuō)做~不~了~

所以為了保持設(shè)計(jì)和開(kāi)發(fā)的友好邦交,說(shuō)明還是寫(xiě)清楚點(diǎn)吧。

設(shè)計(jì)說(shuō)明通常包括以下幾點(diǎn):

  1. 操作方式:鼠標(biāo)hover、點(diǎn)擊、滾動(dòng)、拖動(dòng)……
  2. 交互效果:頁(yè)面載入、出現(xiàn)、消失、跳轉(zhuǎn)到xxx、形變、變色……
  3. 動(dòng)態(tài)描述:(建議使用動(dòng)畫(huà)庫(kù))各種位移、漸隱漸顯、動(dòng)畫(huà)時(shí)長(zhǎng)、延時(shí)……
  4. 適配方式:頁(yè)面寬度改變時(shí),哪里固定寬高、哪里跟隨改變、有沒(méi)有最大最小值;滾動(dòng)頁(yè)面時(shí),誰(shuí)固定、誰(shuí)滾動(dòng)。
  5. 數(shù)據(jù)展示:默認(rèn)填充值、輸入內(nèi)容類(lèi)型、輸入極限……
  6. 錯(cuò)誤提示:提示方式(彈窗、toast、氣泡……)、提示文案。

3. 設(shè)計(jì)規(guī)范

設(shè)計(jì)師除了要懂得看規(guī)范,還要懂得做規(guī)范,做一個(gè)詳細(xì)的設(shè)計(jì)規(guī)范有很多的意義 :

  1. 對(duì)于同一家公司的多個(gè)產(chǎn)品線來(lái)說(shuō),有一個(gè)統(tǒng)一UI規(guī)范,可以對(duì)多個(gè)產(chǎn)品在圖標(biāo)、主題色彩等方面進(jìn)行規(guī)范,使得產(chǎn)品統(tǒng)一;
  2. 多個(gè)UI設(shè)計(jì)師共同合作時(shí),有一個(gè)既定的規(guī)則大家可以遵守,省得大家各做各的,做出來(lái)的東西不像一個(gè)產(chǎn)品;
  3. 有時(shí)UI規(guī)范也可以對(duì)研發(fā)和測(cè)試童鞋們的工作予以指導(dǎo)。
  4. 沒(méi)有一份設(shè)計(jì)規(guī)范能做到盡善盡美,遇到設(shè)計(jì)規(guī)范沒(méi)覆蓋的點(diǎn),無(wú)論是規(guī)范的制定者還是執(zhí)行者,都有義務(wù)去把它豐滿(mǎn)起來(lái)。

4. 嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)評(píng)審

嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)評(píng)審應(yīng)該包括三個(gè)步驟:自審、內(nèi)審、多方評(píng)審。

自審最能體現(xiàn)一個(gè)設(shè)計(jì)師是否對(duì)工作負(fù)責(zé)。工作過(guò)程中多少都有錯(cuò)誤和缺漏,這些問(wèn)題應(yīng)該先在自己能力范圍內(nèi)通過(guò)自查進(jìn)行修補(bǔ)。設(shè)計(jì)圖拿出去就代表著自己,沒(méi)有人是專(zhuān)門(mén)為別人的錯(cuò)漏買(mǎi)單。如果時(shí)間充足而不自審,是設(shè)計(jì)師工作態(tài)度問(wèn)題;如果時(shí)間不充足導(dǎo)致沒(méi)時(shí)間自審,那要么是設(shè)計(jì)師時(shí)間管理出了問(wèn)題,要么就是項(xiàng)目給予的設(shè)計(jì)時(shí)間不合理。

在內(nèi)審和多方評(píng)審時(shí),設(shè)計(jì)師應(yīng)該對(duì)設(shè)計(jì)評(píng)審保持開(kāi)放樂(lè)觀的心態(tài)。設(shè)計(jì)評(píng)審絕對(duì)不是為了吊打設(shè)計(jì)圖而存在的,設(shè)計(jì)評(píng)審上每個(gè)人都應(yīng)該追求業(yè)務(wù)實(shí)現(xiàn)的最佳方式,客觀地站在自己擅長(zhǎng)的位置上對(duì)設(shè)計(jì)圖提出建設(shè)性的建議。雖然評(píng)審時(shí)總有人會(huì)以非常主觀的思維說(shuō)出模棱兩可的評(píng)價(jià),例如不好看、不大氣、怪怪得……

這時(shí)候設(shè)計(jì)師應(yīng)該放寬心態(tài),耐心的引導(dǎo)他說(shuō)出具體的問(wèn)題所在,或者可以回歸到從產(chǎn)品目標(biāo)推導(dǎo)設(shè)計(jì)方案的過(guò)程,讓大家在統(tǒng)一的頻道里對(duì)話(huà)。

5. 100%的設(shè)計(jì)還原

設(shè)計(jì)師要對(duì)落地效果負(fù)責(zé)。設(shè)計(jì)圖交給開(kāi)發(fā)人員后,設(shè)計(jì)師還要對(duì)落地效果進(jìn)行跟蹤和控制。在跟蹤階段,開(kāi)發(fā)人員會(huì)因?yàn)榉N種原因?qū)υO(shè)計(jì)圖產(chǎn)生各種各樣的疑問(wèn)或者需要設(shè)計(jì)師提供更多的資源,設(shè)計(jì)師需要盡量快速地響應(yīng),解答他們疑惑、給予可行范圍內(nèi)的幫助,避免工期延長(zhǎng)。在落地效果控制階段,設(shè)計(jì)師應(yīng)該認(rèn)真做好UI測(cè)試,把與設(shè)計(jì)圖不符的地方記錄清楚,并把UI bug按照嚴(yán)重程度區(qū)分。在有限的項(xiàng)目時(shí)間內(nèi)讓開(kāi)發(fā)修改嚴(yán)重影響的bug,其他的可以在協(xié)商修改時(shí)間后再修改。

三、設(shè)計(jì)師“想”什么

1. 提煉設(shè)計(jì)亮點(diǎn)

設(shè)計(jì)師提煉自己的設(shè)計(jì)亮點(diǎn),不僅能時(shí)刻鞭策自己不要拿“路人設(shè)計(jì)圖”敷衍項(xiàng)目,還能提升自己對(duì)設(shè)計(jì)理論的實(shí)際理解,而且最重要的是讓項(xiàng)目決策者更透徹明白你的方案,提高過(guò)稿率。所以當(dāng)設(shè)計(jì)師完成任務(wù)后找不到自己一絲絲的亮點(diǎn),那就是出問(wèn)題了,好好自審一下吧。

設(shè)計(jì)師可以從以下幾點(diǎn)提煉出亮點(diǎn):

  1. 設(shè)計(jì)目標(biāo)是怎么推導(dǎo)出來(lái)的;
  2. 設(shè)計(jì)目標(biāo)在方案里是怎么體現(xiàn);
  3. 優(yōu)化前和優(yōu)化后的對(duì)比,優(yōu)化具有什么意義;
  4. 需求的復(fù)雜性及設(shè)計(jì)后的易用性;
  5. 為什么這個(gè)設(shè)計(jì)圖就這么美?。ㄒ曈X(jué)呈現(xiàn)用了什么方法、元素)

2. 挖掘產(chǎn)品體驗(yàn)優(yōu)化點(diǎn)

好的設(shè)計(jì)師對(duì)產(chǎn)品有owner意識(shí),根據(jù)市場(chǎng)競(jìng)爭(zhēng)、客戶(hù)使用等情況,產(chǎn)品需要穩(wěn)定的持續(xù)迭代才能保持活力和競(jìng)爭(zhēng)里,迭代過(guò)程中項(xiàng)目組每個(gè)人都有義務(wù)為產(chǎn)品的穩(wěn)定成長(zhǎng)出力。這時(shí)候設(shè)計(jì)師并不單純是一個(gè)接收指令的角色,設(shè)計(jì)師可以像產(chǎn)品一樣通過(guò)各種各樣的方法挖掘出產(chǎn)品的體驗(yàn)優(yōu)化點(diǎn),進(jìn)行記錄、分類(lèi)、積累,在下一版本策劃時(shí)提出來(lái)給項(xiàng)目決策人評(píng)估要不要做。

3. 總結(jié)項(xiàng)目經(jīng)驗(yàn)

項(xiàng)目是設(shè)計(jì)師成長(zhǎng)最快的途徑。不僅在做項(xiàng)目的過(guò)程中鍛煉設(shè)計(jì)師落地能力,項(xiàng)目結(jié)束后如果設(shè)計(jì)師能把經(jīng)驗(yàn)做適時(shí)的總結(jié),這些經(jīng)驗(yàn)就能得到很好的升華,可以成為下次項(xiàng)目的養(yǎng)分。這樣設(shè)計(jì)師每次開(kāi)始新的項(xiàng)目或者開(kāi)啟下一階段的工作時(shí)都會(huì)信心滿(mǎn)滿(mǎn),因?yàn)樗雷约褐笆裁醋龇ㄊ呛玫?,可以繼續(xù)使用。什么做法是不好的,要避免踩坑。

當(dāng)經(jīng)驗(yàn)積累到一定程度時(shí),很多做法可以連接起來(lái)形成一套有效的工作流程,這時(shí)候設(shè)計(jì)師不僅具備自己承擔(dān)項(xiàng)目落地角色,還可以幫助其他設(shè)計(jì)師知道他們的落地工作。

4. 發(fā)現(xiàn)自己的不足

人無(wú)完人,設(shè)計(jì)產(chǎn)物也會(huì)反應(yīng)出設(shè)計(jì)師各種各樣的缺點(diǎn),比如:缺乏邏輯思考的人畫(huà)的圖就會(huì)有流程上的狀態(tài)缺失,沖動(dòng)急性子的人設(shè)計(jì)圖上會(huì)有很多細(xì)節(jié)不完善等等。設(shè)計(jì)師要保持空杯心態(tài),時(shí)刻發(fā)現(xiàn)自己不足之處,并予以改正。

 

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

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 請(qǐng)問(wèn)動(dòng)畫(huà)庫(kù)是什么?

    回復(fù)
    1. https://daneden.github.io/animate.css/
      像這種,設(shè)計(jì)師可以跟前端用動(dòng)畫(huà)名稱(chēng)來(lái)交流,省事很多

      來(lái)自廣東 回復(fù)
    2. 謝謝哦

      來(lái)自江蘇 回復(fù)