很多的產品經理認為自己在視覺的問題不太專業,所以驗收的時候往往會忽視一些問題,那產品經理要如何驗收設計稿呢?應該怎樣去與設計師交流呢?
現在很多產品同學,在驗收設計稿的時候,經常遇到以下問題:
設計規範:設計師說,我們現在設計規範就是這樣的,產品覺得,既然都是規範了,就用著吧。不懂UI無法給出建議:產品也看不出來視覺的好壞,感覺這個設計稿跟產品調性看起來相差不大,唉,差不多先上線吧。UI抄原型:自己的原型畫得就很簡陋,UI照著原型出來,自己感覺很奇怪,但是又沒法說:畢竟人家照著你的原型畫的。細節把握不準確:這個地方是左對齊好,還是居中對齊好,還是兩端對齊好?等等……
很多產品同學會覺得,產品經理主要負責邏輯、流程上的問題,視覺的問題自己不專業,所以在驗收上就草草而行,保證沒有大錯就好。但是視覺是跟用戶體驗很近的,在視覺上給用戶清晰的認知和良好的情感體驗,非常重要。
先說問題:如何驗收設計稿?
產品經理作為「門外漢」,可以從以下幾個方面著手:
一、有一些涉及元素,是可以不符合「設計規範的」
比如:放在app首頁的一個特別重要的按鈕,需要很強的吸引用戶去點擊,但是app的設計規範中沒有涉及到這種可能性,是可以獨立做一個「只針對首頁」的按鈕的。如果其他地方要多次復用這個樣式,就可以把它寫進設計規範中。
二、設計稿的信息架構要與原型一致
展示哪些信息?哪些元素應該突出?哪些元素應該弱化?
這些內容產品是應該很了解的。尤其是對於商業產品,不要讓設計稿影響產品既定的流量分發。
三、遵守版式設計4大設計原則
設計是有一些原則的,設計師也要遵循一定的原則,並不是設計師腦洞一開就可以的。
一般來講設計需要符合以下幾個原則:
(1)對比(Contrast)
對比的基本思想是,要避免頁面上的元素太過相似,如果元素(字體、顏色、大小、線寬、形狀、空間等)不相同,那就乾脆讓它們截然不同。
要讓頁面引人注目,對比通常是最重要的一個因素,對比能使讀者更能看懂這個頁面,不然整個頁面都長得差不多,分不出主次。
(2)重複(Repetition)
讓設計中的視覺要素在整個作品中重複出現,可以重複顏色、形狀、材質、空間關係、線寬、字體、大小和圖片等等。這樣一來,既能增加條理性,還可以加強統一性。
舉個例子:我們之前運營做了一個促銷的活動,活動的主色調是紫色。我們當時app中很多icon都變成了淡紫色,首頁的banner也跟促銷的H5一致等。
(3)對齊(Alignment)
任何東西都不能在頁面上隨意安放,每個元素都應當與頁面上的另一個元素有某種視覺聯繫。這樣能建立一種清晰、精巧而且清爽的外觀,儘量不要用居中對齊。
(4)親密性(Proximity)
彼此相關的項應當靠近,歸組在一起。如果多個項相互之間存在很近的親密性,它們就會成為一個視覺單元,而不是多個孤立的元素。這有助於組織信息,減少混亂,為讀者提供清晰的結構。產品要搞清楚信息架構,把相關的東西放在一起。
四、常見的設計細節,需要在交互中都考慮到,UI沒考慮到,不怪人家
該有點擊態的按鈕,是否有點擊態?
加載中、斷網、弱網等異常狀態的處理等;哪些元素需要放在一起,哪些元素要放在二級頁面等。這些需要在交互中考慮到(團隊沒有互動設計師,就是產品的活了)。
五、設計中的隱喻
視覺稿中的隱喻是否正確?
隱喻是設計中很重要的一環,被隱喻的客體往往來源於現實生活。產品要經常看一些做得比較好的視覺設計和工業設計,可以是時裝、家居、文具、海報等,提升自己的審美,同時對於設計中的一些細節和隱喻,都能很好的把握到。
比如:按鈕就隱喻了點擊;菊花條就隱喻了loading;哭臉就隱喻了「錯誤、失敗」等。
六、設計稿符合通行的設計規範
HIG、material design兩個設計規範總要符合一個,因為用戶已經被這兩套教育過很多遍了,用通行的設計規範可以降低教育用戶的成本,讓用戶更容易上手。
最後給大家分享幾點我關於設計上的思考:
1. 為什麼要有設計規範?哪些情況下要用設計規範?設計規範要做到什麼樣的顆粒度?
一個公司可能有很多個團隊會提出設計需求,設計團隊中可能有很多設計師。為了保障用戶體驗的連貫(說白了就是要各個設計師的設計樣式看起來都差不多,不會出現用戶在A頁面看到按鈕是這個樣子而在B頁面看到按鈕是另一個樣子),所以需要存在一個「規則」——即大家都按照這個規則去設計,來保障產出都差不多。
所以設計規範本質上是解決一個管理的問題。
可見,不是所有產品、所有團隊、所有公司都需要設計規範,只有需要「管理」的,才要。
往小了說,筆者在做的app,就有幾種規定的按鈕樣式,這就是設計規範了;往大了說,比如:QQ,就有很詳細的視覺規範,包括logo怎麼用都有涉及。
所以設計規範做到什麼顆粒度,看團隊而定,大多數團隊做到按鈕樣式、文字大小的顆粒度就好了。
2. 給出設計師合理的意見和參考,保障原型質量
產品在與設計師溝通前,需要跟各方提前溝通清楚產品的調性、頁面的信息架構等;設計師主要是做視覺的部分就好了。
首先應該要多給設計師輸入信息,比如:找一些類似的頁面或功能、找一些元素(比如:要給用戶傳達「成功」的概念,就找一些對勾、禮花等元素給設計師)。
其次要保障原型的質量。不能自己原型上的兩句文案用一樣的字體字號字色,卻跟設計師說A文案要突出顯示,B文案要弱化顯示,這些都需要在你的原型上提現出來。
如果團隊沒有互動設計師,產品就好想得更細,比如:各種異常狀態、各處的文案用詞的一致等。
總之,想得越細越好,但是這些特別細的東西未必都要提現在你的文檔上。
本文由 @破局 原創發布於人人都是產品經理。未經許可,禁止轉載
題圖來自 Pexels,基於 CC0 協議