之前有讀者問我：公司要做一個新產(chǎn)品，但是無從下手，該怎么辦？其實這也是很多設(shè)計師比較關(guān)心的一個問題。假如公司有個機會讓你去做新產(chǎn)品，你會怎么做？我工作這么些年，做過 7 個新產(chǎn)品，今天就給大家分享一些關(guān)于設(shè)計師如何做新產(chǎn)品的一些經(jīng)驗。

本文一共分三大部分：

開始前

• 產(chǎn)品定位
• 規(guī)范意識
• 競品調(diào)研
• 設(shè)計風(fēng)格
• 可延展性
• 開發(fā)實現(xiàn)
• 開源組件庫推薦

進行中

• 產(chǎn)品邏輯
• 設(shè)計方案不斷優(yōu)化
• 規(guī)范完善
• 不斷 push

上線后

• 設(shè)計復(fù)盤
• 注重結(jié)果
• 設(shè)計驗收
• 更新迭代
• 制作設(shè)計系統(tǒng)

好了，正文開始~

開始前

1. 產(chǎn)品定位

所屬行業(yè)

明確產(chǎn)品的所屬行業(yè)，每個行業(yè)都有獨特的行業(yè)屬性。比如電商行業(yè)，他的行業(yè)屬性關(guān)鍵詞是：官方正品、快速物流、好物秒殺...抓住行業(yè)關(guān)鍵詞，才不會讓整個產(chǎn)品邏輯走偏。

ToB or ToC

ToB 和 ToC 行業(yè)對接的用戶有著很大的區(qū)別。ToB 產(chǎn)品求穩(wěn)、用戶少、功能邏輯很重要；ToC 產(chǎn)品靈活、視覺比較活潑、用戶量更大。

用戶畫像

• 年齡：搞清楚用戶年齡分布，按比重決定風(fēng)格及交互走向。不是當(dāng)前最流行的風(fēng)格就一定適合自己的產(chǎn)品。
• 瀏覽設(shè)備：市場上主流的設(shè)備不一定是你的用戶使用的主流設(shè)備，所有一定要實際的去做調(diào)研，按本產(chǎn)品主流設(shè)備進行視覺輸出，保證最佳的使用體驗。
• 使用場景：考慮用戶的真實使用場景，是室內(nèi)還是室外？使用時間充裕與否？你要作為一個使用者去真實感受下。

2. 規(guī)范意識

一個產(chǎn)品的設(shè)計風(fēng)格能不能保持統(tǒng)一以及后期迭代，規(guī)范意識是很重要的。在產(chǎn)品設(shè)計初期一定要有，不要說現(xiàn)在先做，等以后再改，這樣后面改動的工作量太大。所以說前期一定要有足夠的規(guī)范意識。這個是至關(guān)重要的，尤其多個設(shè)計師協(xié)作的時候，你就會發(fā)現(xiàn)有個規(guī)范是多么幸福的事情。規(guī)范意識不僅是我們設(shè)計師要有，也要讓研發(fā)熟知它的重要性。一個有規(guī)范意識和沒有規(guī)范意識的研發(fā)對產(chǎn)品后期的迭代太重要了，誰用誰知道。

規(guī)范包括：

• 基礎(chǔ)樣式：顏色、字體、圖標(biāo)、柵格布局、尺寸等......
• 組件樣式：Button、input、tooltips 等常用組件。
• 這些規(guī)范可以在前期制定出來，有可能后面還會去改動，但是前期歸類做好了，后期也好改。

3. 競品調(diào)研

至少找 3 個行業(yè)內(nèi)知名產(chǎn)品，從產(chǎn)品定位、設(shè)計風(fēng)格、產(chǎn)品交互入手，深入的進行調(diào)研。輸出完整的調(diào)研報告，與部門內(nèi)人員進行討論分析，反復(fù)討論出一個完整的產(chǎn)品方向。

4. 設(shè)計風(fēng)格

設(shè)計風(fēng)格對于產(chǎn)品來說是至關(guān)重要的，所以整體風(fēng)格這部分一定要調(diào)研清楚，不僅要和設(shè)計師腦暴，也要收集設(shè)計師以外的建議。好的設(shè)計是大家都說好，而不只是設(shè)計師覺得好。

5. 可延展性

產(chǎn)品初期有可能只做 PC 端或移動端，但是要考慮后續(xù)業(yè)務(wù)發(fā)展，蔓延到其他端的情況，所以特別限制設(shè)備的設(shè)計，在設(shè)計的時候一定要慎重考慮。每個功能都會有極限情況，不要只考慮常規(guī)情況/最理想的情況，要考慮到極限情況下，產(chǎn)品視覺/交互上展示是沒有問題的。

6. 開發(fā)實現(xiàn)

實際項目中，時間是最大的阻礙因素。就算你有很好的 idea，沒有時間去開發(fā)，什么都是白扯。所以要綜合設(shè)計與開發(fā)，保證不影響上線時間的情況下 ，最大化的實現(xiàn)更好的設(shè)計方案。

7. 開源組件庫推薦

Ant Design：https://ant.design/index-cn

Element：https://element.eleme.cn/#/zh-CN

谷歌：https://material-ui.com/zh/

微軟：https://www.microsoft.com/design/fluent/#/

?Atlassian：https://atlassian.design/

進行中

1. 產(chǎn)品邏輯

不要以為設(shè)計師只要做好設(shè)計圖就好了，這只是基本的工作要求。設(shè)計師只有深入了解了產(chǎn)品邏輯，才能做出好用的產(chǎn)品。

2. 設(shè)計方案不斷優(yōu)化

在實現(xiàn)過程中會遇到各種沒有考慮到的設(shè)計問題，所以設(shè)計方案也要不斷的討論并優(yōu)化。不要覺得開發(fā)中遇到設(shè)計問題是個很尷尬的事情，這很正常，遇到問題解決問題就好。

3. 規(guī)范完善

前期規(guī)范一定是初期版本，肯定要不斷的完善才能滿足更多功能，所以規(guī)范一定是不斷完善的，產(chǎn)品優(yōu)化也是一個長期工作。

4. 不斷 push

作為設(shè)計師，要隨時和開發(fā)人員進行溝通，遇到問題及時解決，保證項目順利進行。同時做好項目推進，什么節(jié)點交付什么東西，這時候就需要你不斷的去“騷擾”開發(fā)小哥了。

上線后

1. 設(shè)計復(fù)盤

項目上線后，短時間內(nèi)盡量做一個設(shè)計復(fù)盤（時間久了就會遺忘一些細(xì)節(jié)）。設(shè)計復(fù)盤都包括哪幾方面？

• 產(chǎn)品邏輯
• 設(shè)計規(guī)范
• 設(shè)計風(fēng)格
• 產(chǎn)品交互
• 組件使用

設(shè)計復(fù)盤是一個很好的學(xué)習(xí)方法，可以很宏觀的分析總結(jié)出設(shè)計中的問題。發(fā)現(xiàn)問題解決問題，通過復(fù)盤，至少能提高 30% 的成長經(jīng)驗。

2. 注重結(jié)果

再好的設(shè)計沒有落地，也只是個飛機稿。所以要保證自己的設(shè)計方案能最好的呈現(xiàn)在落地項目中。

3. 設(shè)計驗收

這個環(huán)節(jié)不能少，一般公司都有專門的測試區(qū)驗收功能問題。所以設(shè)計師只需要驗收樣式、交互問題就好。設(shè)計實現(xiàn)后的效果一般情況下達不到 100%，但我們要讓還原度盡可能的高，畢竟上線后呈現(xiàn)的效果是設(shè)計師來背的。如果有時間，可以做兩次驗收，第二次為回歸驗收，看下之前提的問題有沒有達到預(yù)期的效果，并且看下有沒有改出來新問題。

4. 更新迭代

產(chǎn)品上線后，v1.0 算是結(jié)束了。但優(yōu)化永不停歇。產(chǎn)品風(fēng)格、設(shè)計規(guī)范、功能等都要不斷更新迭代，一個好的產(chǎn)品都是長期打磨出來的。

5. 制作設(shè)計系統(tǒng)

項目上線后，后續(xù)設(shè)計就要考慮效率提升以及設(shè)計統(tǒng)一性的問題，這個時候就需要一個設(shè)計系統(tǒng)了。用過設(shè)計系統(tǒng)的人都知道，簡直太好用了。雖然前期制作周期不斷，但是對于一個長期更新的產(chǎn)品來說，很有必要。（后面我會單獨出一期關(guān)于設(shè)計系統(tǒng)的制作及使用）。

總結(jié)

最后敲黑板，我來劃重點了，以下幾點是最關(guān)鍵的：

• 競品分析
• 規(guī)范意識
• 設(shè)計復(fù)盤
• 更新迭代

做一個新產(chǎn)品，前期準(zhǔn)備占很大比重，前期準(zhǔn)備工作做好了，后面就容易進行了。從 0 到 1 做一個產(chǎn)品，比做產(chǎn)品迭代更能學(xué)到東西，因為它是從整體去考慮一個產(chǎn)品。所以如果有做新產(chǎn)品的機會，一定不要錯過。

本次分享到這里就結(jié)束了，如果覺得有用，可以分享給朋友。你的支持是我最大的動力！我們下期見~

歡迎關(guān)注作者微信公眾號：「友設(shè)青年」