從6個方面著手:產(chǎn)品經(jīng)理應(yīng)如何與設(shè)計師溝通?

7 評論 8691 瀏覽 58 收藏 9 分鐘

很多的產(chǎn)品經(jīng)理認為自己在視覺的問題不太專業(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照著原型出來,自己感覺很奇怪,但是又沒法說:畢竟人家照著你的原型畫的。
  • 細節(jié)把握不準確:這個地方是左對齊好,還是居中對齊好,還是兩端對齊好?
  • 等等……

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

先說問題:如何驗收設(shè)計稿?

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

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

比如:放在app首頁的一個特別重要的按鈕,需要很強的吸引用戶去點擊,但是app的設(shè)計規(guī)范中沒有涉及到這種可能性,是可以獨立做一個“只針對首頁”的按鈕的。如果其他地方要多次復(fù)用這個樣式,就可以把它寫進設(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)系、線寬、字體、大小和圖片等等。這樣一來,既能增加條理性,還可以加強統(tǒng)一性。

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

(3)對齊(Alignment)

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

(4)親密性(Proximity)

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

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

該有點擊態(tài)的按鈕,是否有點擊態(tài)?

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

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

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

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

比如:按鈕就隱喻了點擊;菊花條就隱喻了loading;哭臉就隱喻了“錯誤、失敗”等。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 【高階產(chǎn)品1元福利好課:產(chǎn)品管理者的溝通技巧!!】

    ? 奇魚微辦公產(chǎn)品副總裁@黃喆老師
    ? 1小時產(chǎn)品管理者溝通技巧拆解!
    ? 原價108元,特惠1元!

    立即點擊預(yù)約聽課>>>http://3.woshipm.cn/byy26b

    來自廣東 回復(fù)
  2. 很多不專業(yè)做APP的公司,為了項目快速上線和落地,產(chǎn)品設(shè)計、視覺UI和APP開發(fā),竟然是一個人!而APP的需求,往往是公司領(lǐng)導(dǎo)的一個想法或指令。

    來自廣東 回復(fù)
    1. 要撕!

      來自廣東 回復(fù)
  3. 高手,一語點醒夢中人!

    回復(fù)
    1. 這……這是……水軍么……

      來自廣東 回復(fù)
  4. 優(yōu)秀的設(shè)計師不單單是做視覺效果。前期還要做分析需求,最后還要檢查測試版,收集數(shù)據(jù)迭代更新。

    回復(fù)
    1. 所以現(xiàn)在一些公司的設(shè)計思路,從用戶體驗轉(zhuǎn)為用戶增長。

      來自廣東 回復(fù)