起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識作為一個產品經理，需要懂點UI知識！
編輯導語：作為一名產品經理，需要經常與設計師打交道，一個成功的UI產品，需要靠產品經理與UI設計師的共同努力完成。但每個人都有自己的想法，所以產品經理懂一些UI知識，有利于站在對方的角度思考，能夠更加有效地完成產品。
作為一個產品經理與設計師頻繁打交道不可避免，一個好的UI作品，很多時候都是設計師與產品兩個共同完成，但人是個體，對于設計師來說，設計的UI圖有自己的想法，產品也會站在自己角度來思考問題。
所以需要常常溝通，如果這個過程只是單純的設計圖，就變成簡單任務交付的方式，失去了一體的意義。
當面對對不合格的UI圖時，或者在設計之前進行溝通和說明的時候，就需要對設計圖的要求描述具體，哪怕覺得UI圖不好看，也需要讓對方清楚你在表達什么，盡量把抽象化的東西具像化描述出來，而不是表達一些模糊概念的詞匯，更不能只表達自己的感受，這樣失去了專業性，削減了設計師對我們的信任感。
比如：“感覺不好看、顏色太淡了、字體太小了、要有品牌主題色等等”，這些表達方式都是不夠具體，而且偏主觀感受，換一種方式，我們可以這樣來表達，比如：“希望突出按鈕點擊效果，按鈕的顏色加深，需要與背景色有層次分明。
這個副標題的文案太大、顏色頁太深，導致主標題弱化了，我們可以調成xx號的字體，顏色用灰色調一下試試”
所以作為一個產品經理懂UI知識變得是一個必備技能，如果沒有自己的方法論，在溝通的時候可能會顯得不專業，可能會憑感覺走，不由自主的代入更多主觀感受，缺少客觀事實的表達方式，面向UI圖思考時有一些簡單的方法，在這里羅列幾條，供參考。
一、分割線的應用
在使用分割線時，我們常常會使用貫穿和非貫穿分割線兩種：
使用非貫穿分割線的主要原因是，這些消息是一體的，都是消息，但同時又是每個個體發送過來的消息，如果是用貫穿分割線，會讓內容分割，有失整體性，比如：“支付的消息，使用的就是非貫穿分割線”。
（圖來自支付寶頁面截圖）
使用貫穿分割線時，一般會用在這些消息不屬于一類，會用貫穿分割線，比如：“今日頭條的新聞閱讀，微頭條和文章就會有貫穿分割線進行分割”，不過有的時候，我們也會使用卡片的方式進行分割，比如：“支付寶的首頁，滑動到下方的時候，會用卡片的樣式進行分類?！?/p>
（圖來自支付寶和今日頭條頁面的截圖）
二、文字顏色的對比
文字顏色的對比，感受的細節，信息類別與內容同時出現多文字時，內容更為重要，用戶關心的是自己的信息，而類別是平臺為產生的信息作出的一種解釋，或者說平臺自己想表達的信息，比如：“我們在使用支付工具時，支付完成后會有一個頁面提供具體明細”
（圖來自支付寶交易頁面截圖）
這種屬于強弱的對比方式，還有一種是顏色深淺的方式，常用的就是對文字進行標注紅色、藍色等字體來，這種比較醒目，常常是應用到需要用戶特別注意到什么內容才會使用，比如“支付寶在付款成功后，會有一個藍色字體引導用戶做下一步動作。”
（圖來自支付寶交易頁面截圖）
三、合理圖文的順序
不同的圖文順序對用戶閱讀體驗有很大的影響，我們需要根據用戶的閱讀習慣來確定合理的順序，比如我們閱讀新聞資訊、還有公眾號文章，文字的信息會高于圖片，往往文字會排在前面。
（圖來自36氪APP頁面截圖）
對于新聞資訊如此，但是對于圖片類型的網站，還有電商類型的網站，視覺高于文字，因此圖片和文字的排版方式就會有所改變。
（圖來自京東APP商品列表頁截圖）
四、相關性
很多設計師在設計圖片的時候，都會使用與業務相同的icon，因為這樣識別起來就減少阻礙，比如“飛豬口令兌換，使用的圖標與其接近”，現在很多平臺直接使用類似的圖片設計成icon，識別起來更簡單，比如：“美團買菜、叮咚買菜。”
（圖來自飛豬APP和叮咚買菜APP頁面截圖）
除了圖標icon的相關性，從顏色上也可考慮做到相關性，不過顏色的相關性一般從兩個維度，大家強調的品牌色，另外一個就是從業務角度考慮，這樣也能快速傳遞信息，比如：“現在在健康碼，通過紅黃綠三種”。
（圖來自i深圳小程序頁面的截圖）
五、視覺層次對比
通過層次對比來彰顯重要信息，層次對比一般在關鍵詞時刻做得比較多，目前個類APP、網站應用非常廣泛，比如我們熟悉的電商平臺，當用戶在下單時，會將下單按鈕的顏色做得特別深，比如：“下方為非豬APP和騰訊理財通，在瀏覽頁面時下單按鈕比較醒目”。
視覺層次對比除了色塊上，有的時候文字上也會用到，通過加深重點信息來達到傳遞目的，比如：“拼多多APP會在用戶下單未完成選擇返回時的攔截提醒”。
六、相似性
相似性的原理構成部分，主要是為“形狀、顏色、方向、紋理”，比如：“相同形狀但是不同顏色的圓形圖案，就屬于相似，不同形狀但是顏色相同，也屬于相似?！北热纾骸拔覀兛达w豬APP首頁的設計，在金剛區的下方，出現了很多黃色的icon圖標，這類一般都會把它歸為一類，這是因為他們顏色相同”。
在UI設計規范中的控件組合成的組件，大部分會使用到相似原則，這樣統一視覺樣式，來表達功能的統一性，比如“標簽欄，app底部的4個菜單欄”。
但是有的時候，我們想要凸顯其中一個元素出來，就會選擇不一樣的視覺來呈現，以此達到凸顯的效果，比如下方圖中：“抖音極速版的底部中間菜單欄就用一個大紅色的錢袋來區分，頭條在icon旁邊增加標簽”，現在很多平臺會利用不同的手段來進行區分，像小紅點、顏色加深、數字、動效等方式來提醒用戶點擊?！?/p>
七、連續性
面對離散的碎片時，我們的視覺會更傾向于感知連續性的內容，好的設計指引，會引導用戶感知事物的形狀和運動的方向。
尤其是，我們在一個頁面無法表達完全部信息時，這個時候一般都會應用到連續性，目前連續性應用已非常廣泛，比如：“多張banner圖滑動的互動模塊、以及滑動組件和進度條等等”，大概通過這幾類方式來引導用戶瀏覽被隱藏的內容。
下方案例為“同程APP，頂部多張圖片banner，以及文字菜單可往左滑動的”。
八、封閉性
人們在觀察一個事物時，會傾向于把一個不完整的局部當作一個整體來感知，會將不連續性的信息和物體，以及敞開的圖形形自動補充，從而感知到它是完整的物體。因為，我們會將一個不完整等物體與我們認知中的原型進行相匹配，從而達成認知。
當如果我們應用在設計圖中，就需要主義把握不完整的物體尺寸，避免太過于零散，導致用戶認知時出現混亂，比如：“知名蘋果公司的logo，缺了一個口但是還能識別出是蘋果”。
封閉性的方式，會應用在比較私密性的設計中，比如：“我們銀行卡賬戶，往往都會對部分數字打星號，但是不會讓用戶不理解這是賬號，包括卡片的露半原則”，這樣其實有利于節省空間。
九、總結
關于對設計圖的一些思考整理到此，當然知識遠不止這些。最近還在閱讀一本書，叫做《設計心理學》，里面強調了從用戶習慣來思考，另外當用戶來到這個頁面時，需要告訴用戶能干什么，以及在哪里干，而且需要在3秒的時間內讓用戶知道，否則用戶會選擇離開，用一個詞來表達就是“意符”。
所以好的設計，都離不開告訴用戶干什么？在我們日常產品設計中，比如：“輸入框就知道輸入內容、選擇框就知道是做選擇、這個>符號就知道還是可以點擊的等等”這些都是告訴用戶可以干什么比較好的例子。
不過這些比較寬泛，我們需要更具體的描述內容，在日常設計師對接過程中，最忌諱的就是表達不清晰、過多強調與主觀感受，而不是用客觀事實的方式來進行溝通。
當遇到問題的時候，一定要把抽象化的東西具象化表達出來，這樣才有理說服對方，不然表達的內容會空洞無力，站不住腳。
本文由 @讓腦闊再轉一會 原創發布于人人都是產品經理，未經作者許可，禁止轉載
題圖來自Unsplash，基于CC0協議
已經到了要產品來教設計師做設計的時候了嗎？果然是個人都能教設計師如何做設計。
理解太狹隘，設計達不到要求本質上是在教我們表達自己的實質需求，不是起指導作用
觀點不同
這只是一點兒討論，討論就沒有對錯之分，只有立場角度的區別。如果你打算秀優越感，建議還是帶著作品來吧。設計師的社會評價光鮮亮麗，可不代表個人能力。
我只想想從心理學出發表達一個觀點，就是任何行業的人都不喜歡被“外人”指指點點。當某個游戲你朋友玩但你不玩，偶然你看到你朋友的游戲界面一直黑屏，這時你對他指指點點，他的第一反義肯定是不會接受可能還會對你積累怨氣。如果你也玩該游戲并且實力顯然高他一截，這個時候你指點他，那么他大概率是會理性的思考的。
作者的標題“產品經理需要懂設計”是沒有任何問題的，但是文章中提到的用自己的設計知識說服別人就猶如云玩家教你玩游戲一樣，即使這個云玩家通過網上的攻略或者視頻看到的內容是正確的，并用他云來的知識指正你，你大概率還是會很不爽并且不接受的，只有當你是這個游戲的老手時，他才大概率會接受你的觀點。
所以產品要懂設計知識沒有問題，這是為了更好的考慮全局。但若要用來說服對方，刀槍直入往往不會有好結果，當然也不絕對，畢竟針對不同情況，不同性格的人處理方式也不會一樣。
產品經理什么都要懂但是什么都不專業，但產品經理的工作卻要給每個部門挑毛病，你要做的是讓別人意識到自己可以改進的地方，可不是通過理論知識去說服別人。