很多的產(chǎn)品經(jīng)理認(rèn)為自己在視覺的問題不太專業(yè)，所以驗收的時候往往會忽視一些問題，那產(chǎn)品經(jīng)理要如何驗收設(shè)計稿呢？應(yīng)該怎樣去與設(shè)計師交流呢？

現(xiàn)在很多產(chǎn)品同學(xué)，在驗收設(shè)計稿的時候，經(jīng)常遇到以下問題：

• 設(shè)計規(guī)范：設(shè)計師說，我們現(xiàn)在設(shè)計規(guī)范就是這樣的，產(chǎn)品覺得，既然都是規(guī)范了，就用著吧。
• 不懂UI無法給出建議：產(chǎn)品也看不出來視覺的好壞，感覺這個設(shè)計稿跟產(chǎn)品調(diào)性看起來相差不大，唉，差不多先上線吧。
• UI抄原型：自己的原型畫得就很簡陋，UI照著原型出來，自己感覺很奇怪，但是又沒法說：畢竟人家照著你的原型畫的。
• 細(xì)節(jié)把握不準(zhǔn)確：這個地方是左對齊好，還是居中對齊好，還是兩端對齊好？
• 等等……

很多產(chǎn)品同學(xué)會覺得，產(chǎn)品經(jīng)理主要負(fù)責(zé)邏輯、流程上的問題，視覺的問題自己不專業(yè)，所以在驗收上就草草而行，保證沒有大錯就好。但是視覺是跟用戶體驗很近的，在視覺上給用戶清晰的認(rèn)知和良好的情感體驗，非常重要。

先說問題：如何驗收設(shè)計稿？

產(chǎn)品經(jīng)理作為“門外漢”，可以從以下幾個方面著手：

一、有一些涉及元素，是可以不符合“設(shè)計規(guī)范的”

比如：放在app首頁的一個特別重要的按鈕，需要很強(qiáng)的吸引用戶去點(diǎn)擊，但是app的設(shè)計規(guī)范中沒有涉及到這種可能性，是可以獨(dú)立做一個“只針對首頁”的按鈕的。如果其他地方要多次復(fù)用這個樣式，就可以把它寫進(jìn)設(shè)計規(guī)范中。

二、設(shè)計稿的信息架構(gòu)要與原型一致

展示哪些信息？哪些元素應(yīng)該突出？哪些元素應(yīng)該弱化？

這些內(nèi)容產(chǎn)品是應(yīng)該很了解的。尤其是對于商業(yè)產(chǎn)品，不要讓設(shè)計稿影響產(chǎn)品既定的流量分發(fā)。

三、遵守版式設(shè)計4大設(shè)計原則

設(shè)計是有一些原則的，設(shè)計師也要遵循一定的原則，并不是設(shè)計師腦洞一開就可以的。

一般來講設(shè)計需要符合以下幾個原則：

（1）對比（Contrast）

對比的基本思想是，要避免頁面上的元素太過相似，如果元素（字體、顏色、大小、線寬、形狀、空間等）不相同，那就干脆讓它們截然不同。

要讓頁面引人注目，對比通常是最重要的一個因素，對比能使讀者更能看懂這個頁面，不然整個頁面都長得差不多，分不出主次。

（2）重復(fù)（Repetition）

讓設(shè)計中的視覺要素在整個作品中重復(fù)出現(xiàn)，可以重復(fù)顏色、形狀、材質(zhì)、空間關(guān)系、線寬、字體、大小和圖片等等。這樣一來，既能增加條理性，還可以加強(qiáng)統(tǒng)一性。

舉個例子：我們之前運(yùn)營做了一個促銷的活動，活動的主色調(diào)是紫色。我們當(dāng)時app中很多icon都變成了淡紫色，首頁的banner也跟促銷的H5一致等。

（3）對齊（Alignment）

任何東西都不能在頁面上隨意安放，每個元素都應(yīng)當(dāng)與頁面上的另一個元素有某種視覺聯(lián)系。這樣能建立一種清晰、精巧而且清爽的外觀，盡量不要用居中對齊。

（4）親密性（Proximity）

彼此相關(guān)的項應(yīng)當(dāng)靠近，歸組在一起。如果多個項相互之間存在很近的親密性，它們就會成為一個視覺單元，而不是多個孤立的元素。這有助于組織信息，減少混亂，為讀者提供清晰的結(jié)構(gòu)。產(chǎn)品要搞清楚信息架構(gòu)，把相關(guān)的東西放在一起。

四、常見的設(shè)計細(xì)節(jié)，需要在交互中都考慮到，UI沒考慮到，不怪人家

該有點(diǎn)擊態(tài)的按鈕，是否有點(diǎn)擊態(tài)？

加載中、斷網(wǎng)、弱網(wǎng)等異常狀態(tài)的處理等；哪些元素需要放在一起，哪些元素要放在二級頁面等。這些需要在交互中考慮到（團(tuán)隊沒有交互設(shè)計師，就是產(chǎn)品的活了）。

五、設(shè)計中的隱喻

視覺稿中的隱喻是否正確？

隱喻是設(shè)計中很重要的一環(huán)，被隱喻的客體往往來源于現(xiàn)實生活。產(chǎn)品要經(jīng)?？匆恍┳龅帽容^好的視覺設(shè)計和工業(yè)設(shè)計，可以是時裝、家居、文具、海報等，提升自己的審美，同時對于設(shè)計中的一些細(xì)節(jié)和隱喻，都能很好的把握到。

比如：按鈕就隱喻了點(diǎn)擊；菊花條就隱喻了loading；哭臉就隱喻了“錯誤、失敗”等。

六、設(shè)計稿符合通行的設(shè)計規(guī)范

HIG、material design兩個設(shè)計規(guī)范總要符合一個，因為用戶已經(jīng)被這兩套教育過很多遍了，用通行的設(shè)計規(guī)范可以降低教育用戶的成本，讓用戶更容易上手。

最后給大家分享幾點(diǎn)我關(guān)于設(shè)計上的思考：

1. 為什么要有設(shè)計規(guī)范？哪些情況下要用設(shè)計規(guī)范？設(shè)計規(guī)范要做到什么樣的顆粒度？

一個公司可能有很多個團(tuán)隊會提出設(shè)計需求，設(shè)計團(tuán)隊中可能有很多設(shè)計師。為了保障用戶體驗的連貫（說白了就是要各個設(shè)計師的設(shè)計樣式看起來都差不多，不會出現(xiàn)用戶在A頁面看到按鈕是這個樣子而在B頁面看到按鈕是另一個樣子），所以需要存在一個“規(guī)則”——即大家都按照這個規(guī)則去設(shè)計，來保障產(chǎn)出都差不多。

所以設(shè)計規(guī)范本質(zhì)上是解決一個管理的問題。

可見，不是所有產(chǎn)品、所有團(tuán)隊、所有公司都需要設(shè)計規(guī)范，只有需要“管理”的，才要。

往小了說，筆者在做的app，就有幾種規(guī)定的按鈕樣式，這就是設(shè)計規(guī)范了；往大了說，比如：QQ，就有很詳細(xì)的視覺規(guī)范，包括logo怎么用都有涉及。

所以設(shè)計規(guī)范做到什么顆粒度，看團(tuán)隊而定，大多數(shù)團(tuán)隊做到按鈕樣式、文字大小的顆粒度就好了。

2. 給出設(shè)計師合理的意見和參考，保障原型質(zhì)量

產(chǎn)品在與設(shè)計師溝通前，需要跟各方提前溝通清楚產(chǎn)品的調(diào)性、頁面的信息架構(gòu)等；設(shè)計師主要是做視覺的部分就好了。

首先應(yīng)該要多給設(shè)計師輸入信息，比如：找一些類似的頁面或功能、找一些元素（比如：要給用戶傳達(dá)“成功”的概念，就找一些對勾、禮花等元素給設(shè)計師）。

其次要保障原型的質(zhì)量。不能自己原型上的兩句文案用一樣的字體字號字色，卻跟設(shè)計師說A文案要突出顯示，B文案要弱化顯示，這些都需要在你的原型上提現(xiàn)出來。

如果團(tuán)隊沒有交互設(shè)計師，產(chǎn)品就好想得更細(xì)，比如：各種異常狀態(tài)、各處的文案用詞的一致等。

總之，想得越細(xì)越好，但是這些特別細(xì)的東西未必都要提現(xiàn)在你的文檔上。

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

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