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

產(chǎn)品經(jīng)理為什么要懂設(shè)計(jì)？

• 懂點(diǎn)設(shè)計(jì)原理，更好的和設(shè)計(jì)師溝通
• 讓設(shè)計(jì)師更準(zhǔn)確的把握產(chǎn)品格調(diào)

學(xué)習(xí)過(guò)程

刷課，學(xué)習(xí)地圖：基礎(chǔ)概念 → 設(shè)計(jì)規(guī)范 → 審美 → 提升用戶(hù)體驗(yàn) → 品牌設(shè)計(jì)。

看書(shū)：

• 入門(mén)：設(shè)計(jì)心理學(xué)（1-4），寫(xiě)給大家看的設(shè)計(jì)書(shū)
• 進(jìn)階：About Face 4 交互設(shè)計(jì)精髓、用戶(hù)體驗(yàn)的要素
• 超越：簡(jiǎn)約至上：交互設(shè)計(jì)四策略、社會(huì)心理學(xué)、情感化設(shè)計(jì)—移動(dòng)應(yīng)用的設(shè)計(jì)與開(kāi)發(fā)

關(guān)于設(shè)計(jì)的思考

（1）設(shè)計(jì)是從有效輸入開(kāi)始

設(shè)計(jì)師的有效輸入是從臨摹開(kāi)始，在臨摹中思考。產(chǎn)品經(jīng)理不需要實(shí)際操作，有效的輸入是看大廠(chǎng)產(chǎn)品的界面和產(chǎn)品定位巧妙結(jié)合。

在不知道UI方面知識(shí)之前，從來(lái)不知道為什么這個(gè)App主題色是這樣的？為什么App會(huì)采用這樣的icon樣式？

舉個(gè)例子，永輝超市選用橙色作為主題色，其主要的用戶(hù)群體是以家庭為主的女性用戶(hù)。一般來(lái)說(shuō)，女性喜歡偏亮色，男性喜歡偏暗色。永輝超市的橙色是給人是溫暖的、舒適的，很符合其產(chǎn)品女性群體的定位。

（2）UI設(shè)計(jì)是有邊界，重視UI規(guī)范

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

如還沒(méi)有UI規(guī)范，產(chǎn)品經(jīng)理需給UI設(shè)計(jì)師施于一定的壓力，哪怕是簡(jiǎn)易版本，基本的字號(hào)大小、主題色、輔助色的規(guī)定，彈窗樣式等。

產(chǎn)品經(jīng)理驗(yàn)收時(shí)，除了查看有無(wú)功能錯(cuò)漏，更需要注意細(xì)節(jié)的檢查。如字體是否顯示有序，按鈕注意顏色是否突兀……

（3）格式塔心理學(xué)理論應(yīng)用，使界面被正確的認(rèn)知

格式塔心理學(xué)理論比較龐雜，用在UI設(shè)計(jì)中，簡(jiǎn)單理解：人看圖片是一開(kāi)始看到的是眼睛和大腦處理過(guò)的簡(jiǎn)單整體，而后才是細(xì)節(jié)。

在一個(gè)界面里，人只能接收少數(shù)不規(guī)則的視覺(jué)信息，太多的不規(guī)則信息如大腦無(wú)法形成整體認(rèn)知，從而會(huì)覺(jué)得界面不友好。

所以，產(chǎn)品經(jīng)理判斷：

• 界面的信息第一眼是否呈現(xiàn)成易理解的整體？
• 相似信息是否保持整體性和一致性（大小、形狀、色彩）？
• 相似內(nèi)容（文字、按鈕）要合理布局，有序排版，表達(dá)清楚內(nèi)容之間的關(guān)系，是從屬關(guān)系還是平行、遞進(jìn)關(guān)系？
• 信息指引是否精準(zhǔn)傳達(dá)，視覺(jué)的焦點(diǎn)是否在主要內(nèi)容？

（4）審美的開(kāi)始是審丑

先要知道什么是丑的設(shè)計(jì)，這里不是指?jìng)€(gè)人審美的美丑，而是是否符合產(chǎn)品調(diào)性，是否符合基本的美學(xué)原理。如排版清晰有序，不干擾信息的獲取或閱讀，是否帶有時(shí)代的痕跡（過(guò)時(shí)）等。

眼界是一個(gè)人審美的上限，平時(shí)要多注意提高審美。去看大量好的設(shè)計(jì)，看能接觸到的最美設(shè)計(jì)，如一些國(guó)際設(shè)計(jì)大獎(jiǎng)的獲獎(jiǎng)作品。

關(guān)于色彩

（1）每個(gè)色彩都有冷暖

了解色盤(pán)，基本的冷色、暖色是什么感覺(jué)，可能有工作很多年的設(shè)計(jì)師也不清楚如何判斷冷色、暖色。同樣的橙色，往黃色方向偏點(diǎn)就是暖色；往綠色方向就是冷色。

一個(gè)界面里是冷冷色搭配、暖暖色搭配，才會(huì)和諧、舒適、順眼。

（2）色彩是有味道的——酸甜苦辣咸

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

看設(shè)計(jì)圖時(shí)，產(chǎn)品經(jīng)理需著眼整體氛圍，根據(jù)其具體的色彩情緒去判斷是否符合產(chǎn)品要求。

隨意從網(wǎng)易云音樂(lè)中截取了兩張輪播圖，同樣是紅色，前者是漫威的宣傳，紅黑搭配有熱血的氛圍，黃色點(diǎn)睛；后者是Blossoms的輕音樂(lè)，歌曲清新自然，紅白的搭配營(yíng)造清新的韻律。

這就是氛圍的營(yíng)造，試想下，這兩者紅色反過(guò)來(lái)搭配，會(huì)及其不協(xié)調(diào)，氛圍很詭異。

（3）配色是可數(shù)據(jù)化

有一個(gè)小技巧，可以搭配出統(tǒng)一風(fēng)格的配色——HSB調(diào)色法。

HSB又稱(chēng)HSV，表示一種顏色模式：在HSB模式中，H（hues）表示色相，S（saturation）表示飽和度，B（brightness）表示亮度HSB模式對(duì)應(yīng)的媒介是人眼。

HSB模式中S和B呈現(xiàn)的數(shù)值越高，飽和度明度越高，頁(yè)面色彩強(qiáng)烈艷麗，對(duì)視覺(jué)刺激是迅速的，醒目的效果，但不益于長(zhǎng)時(shí)間的觀(guān)看。

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

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

以上就是近期學(xué)習(xí)UI的心得，再總結(jié)下：

• 設(shè)計(jì)是從有效輸入開(kāi)始
• UI設(shè)計(jì)是有邊界，重視UI規(guī)范
• 格式塔心理學(xué)理論應(yīng)用，使界面被正確的認(rèn)知
• 審美的開(kāi)始是審丑
• 關(guān)于色彩：每個(gè)色彩都有冷暖；色彩是有味道的——酸甜苦辣咸；配色是可數(shù)據(jù)化

如果喜歡我的文字，如果你也是產(chǎn)品小白，一起升級(jí)打怪啊~

作者：xlin，公眾號(hào)：曉途

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

題圖來(lái)自Unsplash，基于CC0協(xié)議