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

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

1. 原型

（1）需求完整性

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

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

（2）需求合理性

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

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

（1）交互規(guī)范

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

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

（2）UI規(guī)范

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

3. 競品

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

特別是初級設(shè)計師，在接到任務(wù)后最好不要馬上動手。可以多看看同類型的競品，看別人對同樣的功能是怎么做交互和視覺的，這樣可以更直觀的去理解業(yè)務(wù)需求（剛?cè)腴T通?？葱枨蠖紩X得太抽象難理解）。

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

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

1. 用戶去留：頁面PV、UV；
2. 用戶關(guān)注點：用戶使用路徑/關(guān)鍵頁PV、UV；
3. 用戶轉(zhuǎn)化率：用戶流失步驟/頁面跳出量、流失原因（操作埋點）。

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

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

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

6. 流行設(shè)計

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

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

1. 設(shè)計圖

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

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

2. 清晰的設(shè)計說明

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

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

所以為了保持設(shè)計和開發(fā)的友好邦交，說明還是寫清楚點吧。

設(shè)計說明通常包括以下幾點：

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

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

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

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

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

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

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

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

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

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

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

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

1. 提煉設(shè)計亮點

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

設(shè)計師可以從以下幾點提煉出亮點：

1. 設(shè)計目標(biāo)是怎么推導(dǎo)出來的；
2. 設(shè)計目標(biāo)在方案里是怎么體現(xiàn)；
3. 優(yōu)化前和優(yōu)化后的對比，優(yōu)化具有什么意義；
4. 需求的復(fù)雜性及設(shè)計后的易用性；
5. 為什么這個設(shè)計圖就這么美！（視覺呈現(xiàn)用了什么方法、元素）

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

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

3. 總結(jié)項目經(jīng)驗

項目是設(shè)計師成長最快的途徑。不僅在做項目的過程中鍛煉設(shè)計師落地能力，項目結(jié)束后如果設(shè)計師能把經(jīng)驗做適時的總結(jié)，這些經(jīng)驗就能得到很好的升華，可以成為下次項目的養(yǎng)分。這樣設(shè)計師每次開始新的項目或者開啟下一階段的工作時都會信心滿滿，因為他知道自己之前什么做法是好的，可以繼續(xù)使用。什么做法是不好的，要避免踩坑。

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

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

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

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

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