產品經理,為什么要懂點UI設計?

4 評論 13417 瀏覽 114 收藏 9 分鐘

最近工作中總是發(fā)現(xiàn)自己與UI設計師溝通不順暢,想要的效果表達不清晰。導致整個項目的界面圖感覺十分違和,開始學習UI方面的知識。刷課刷了一個月,效果十分明顯,基本上可以跟UI設計師愉快而又專業(yè)的溝通啦,學了些小技巧還能帶著UI飛~

產品經理為什么要懂設計?

  • 懂點設計原理,更好的和設計師溝通
  • 讓設計師更準確的把握產品格調

學習過程

刷課,學習地圖:基礎概念 → 設計規(guī)范 → 審美 → 提升用戶體驗 → 品牌設計。

看書:

  • 入門:設計心理學(1-4),寫給大家看的設計書
  • 進階:About Face 4 交互設計精髓、用戶體驗的要素
  • 超越:簡約至上:交互設計四策略、社會心理學、情感化設計—移動應用的設計與開發(fā)

關于設計的思考

(1)設計是從有效輸入開始

設計師的有效輸入是從臨摹開始,在臨摹中思考。產品經理不需要實際操作,有效的輸入是看大廠產品的界面和產品定位巧妙結合。

在不知道UI方面知識之前,從來不知道為什么這個App主題色是這樣的?為什么App會采用這樣的icon樣式?

舉個例子,永輝超市選用橙色作為主題色,其主要的用戶群體是以家庭為主的女性用戶。一般來說,女性喜歡偏亮色,男性喜歡偏暗色。永輝超市的橙色是給人是溫暖的、舒適的,很符合其產品女性群體的定位。

(2)UI設計是有邊界,重視UI規(guī)范

UI設計不是天馬行空的,有UI規(guī)范約束的產品更有一致性、整體性。按鈕、文字等都需要有統(tǒng)一的規(guī)范,細節(jié)處的一致性更是展現(xiàn)品牌的穩(wěn)定性。

如還沒有UI規(guī)范,產品經理需給UI設計師施于一定的壓力,哪怕是簡易版本,基本的字號大小、主題色、輔助色的規(guī)定,彈窗樣式等。

產品經理驗收時,除了查看有無功能錯漏,更需要注意細節(jié)的檢查。如字體是否顯示有序,按鈕注意顏色是否突兀……

(3)格式塔心理學理論應用,使界面被正確的認知

格式塔心理學理論比較龐雜,用在UI設計中,簡單理解:人看圖片是一開始看到的是眼睛和大腦處理過的簡單整體,而后才是細節(jié)。

在一個界面里,人只能接收少數不規(guī)則的視覺信息,太多的不規(guī)則信息如大腦無法形成整體認知,從而會覺得界面不友好。

產品經理升級打怪之路——UI設計

所以,產品經理判斷:

  • 界面的信息第一眼是否呈現(xiàn)成易理解的整體?
  • 相似信息是否保持整體性和一致性(大小、形狀、色彩)?
  • 相似內容(文字、按鈕)要合理布局,有序排版,表達清楚內容之間的關系,是從屬關系還是平行、遞進關系?
  • 信息指引是否精準傳達,視覺的焦點是否在主要內容?

(4)審美的開始是審丑

先要知道什么是丑的設計,這里不是指個人審美的美丑,而是是否符合產品調性,是否符合基本的美學原理。如排版清晰有序,不干擾信息的獲取或閱讀,是否帶有時代的痕跡(過時)等。

眼界是一個人審美的上限,平時要多注意提高審美。去看大量好的設計,看能接觸到的最美設計,如一些國際設計大獎的獲獎作品。

關于色彩

(1)每個色彩都有冷暖

產品經理升級打怪之路——UI設計

了解色盤,基本的冷色、暖色是什么感覺,可能有工作很多年的設計師也不清楚如何判斷冷色、暖色。同樣的橙色,往黃色方向偏點就是暖色;往綠色方向就是冷色。

一個界面里是冷冷色搭配、暖暖色搭配,才會和諧、舒適、順眼。

(2)色彩是有味道的——酸甜苦辣咸

紅色是熱情又侵略的,黃色是陽光、希望,藍色是和平、穩(wěn)定,白色是簡潔、干凈,黑色是詭異、奢華……每種顏色都有不同的味道,可以營造不同的氛圍。

看設計圖時,產品經理需著眼整體氛圍,根據其具體的色彩情緒去判斷是否符合產品要求。

產品經理升級打怪之路——UI設計

產品經理升級打怪之路——UI設計

隨意從網易云音樂中截取了兩張輪播圖,同樣是紅色,前者是漫威的宣傳,紅黑搭配有熱血的氛圍,黃色點睛;后者是Blossoms的輕音樂,歌曲清新自然,紅白的搭配營造清新的韻律。

這就是氛圍的營造,試想下,這兩者紅色反過來搭配,會及其不協(xié)調,氛圍很詭異。

(3)配色是可數據化

有一個小技巧,可以搭配出統(tǒng)一風格的配色——HSB調色法。

HSB又稱HSV,表示一種顏色模式:在HSB模式中,H(hues)表示色相,S(saturation)表示飽和度,B(brightness)表示亮度HSB模式對應的媒介是人眼。

HSB模式中S和B呈現(xiàn)的數值越高,飽和度明度越高,頁面色彩強烈艷麗,對視覺刺激是迅速的,醒目的效果,但不益于長時間的觀看。

在PS中,色相就是色盤,0°—360°,飽和度和亮度都是0%—100%。輸入有規(guī)律的數值(整十、正數),可以得到有規(guī)律的色彩,調配出有規(guī)律的統(tǒng)一的顏色。

有興趣的小伙伴可以打開PS嘗試一下,看看輸入同樣的飽和度,有規(guī)律的輸入不同的色相、亮度,會有怎樣的變化。與之前憑感覺的色彩搭配相比是不是更穩(wěn)定,更有規(guī)律可循?

以上就是近期學習UI的心得,再總結下:

  • 設計是從有效輸入開始
  • UI設計是有邊界,重視UI規(guī)范
  • 格式塔心理學理論應用,使界面被正確的認知
  • 審美的開始是審丑
  • 關于色彩:每個色彩都有冷暖;色彩是有味道的——酸甜苦辣咸;配色是可數據化

如果喜歡我的文字,如果你也是產品小白,一起升級打怪啊~

 

作者:xlin,公眾號:曉途

本文由 @xlin 原創(chuàng)發(fā)布于人人都是產品經理。未經許可,禁止轉載

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 我也想學習一個月就能提高審美的課程。。。

    來自上海 回復
    1. 找個合適的課程,設計入門看看就好

      回復
  2. 看了之后有些許收獲,工作實踐中也會考慮這些要點,但不看你的文章就不能通過理論鞏固認知和提升溝通底氣。
    希望再進一步寫得更深入一些 ?? 加油

    來自海南 回復
    1. 謝謝,我會繼續(xù)努力的

      來自廣東 回復