編輯導語：作為一名產品經理，需要經常與設計師打交道，一個成功的UI產品，需要靠產品經理與UI設計師的共同努力完成。但每個人都有自己的想法，所以產品經理懂一些UI知識，有利于站在對方的角度思考，能夠更加有效地完成產品。

作為一個產品經理與設計師頻繁打交道不可避免，一個好的UI作品，很多時候都是設計師與產品兩個共同完成，但人是個體，對于設計師來說，設計的UI圖有自己的想法，產品也會站在自己角度來思考問題。

所以需要常常溝通，如果這個過程只是單純的設計圖，就變成簡單任務交付的方式，失去了一體的意義。

當面對對不合格的UI圖時，或者在設計之前進行溝通和說明的時候，就需要對設計圖的要求描述具體，哪怕覺得UI圖不好看，也需要讓對方清楚你在表達什么，盡量把抽象化的東西具像化描述出來，而不是表達一些模糊概念的詞匯，更不能只表達自己的感受，這樣失去了專業性，削減了設計師對我們的信任感。

比如：“感覺不好看、顏色太淡了、字體太小了、要有品牌主題色等等”，這些表達方式都是不夠具體，而且偏主觀感受，換一種方式，我們可以這樣來表達，比如：“希望突出按鈕點擊效果，按鈕的顏色加深，需要與背景色有層次分明。

這個副標題的文案太大、顏色頁太深，導致主標題弱化了，我們可以調成xx號的字體，顏色用灰色調一下試試”

所以作為一個產品經理懂UI知識變得是一個必備技能，如果沒有自己的方法論，在溝通的時候可能會顯得不專業，可能會憑感覺走，不由自主的代入更多主觀感受，缺少客觀事實的表達方式，面向UI圖思考時有一些簡單的方法，在這里羅列幾條，供參考。

一、分割線的應用

在使用分割線時，我們常常會使用貫穿和非貫穿分割線兩種：

使用非貫穿分割線的主要原因是，這些消息是一體的，都是消息，但同時又是每個個體發送過來的消息，如果是用貫穿分割線，會讓內容分割，有失整體性，比如：“支付的消息，使用的就是非貫穿分割線”。

（圖來自支付寶頁面截圖）

使用貫穿分割線時，一般會用在這些消息不屬于一類，會用貫穿分割線，比如：“今日頭條的新聞閱讀，微頭條和文章就會有貫穿分割線進行分割”，不過有的時候，我們也會使用卡片的方式進行分割，比如：“支付寶的首頁，滑動到下方的時候，會用卡片的樣式進行分類?！?/p>

（圖來自支付寶和今日頭條頁面的截圖）

二、文字顏色的對比

文字顏色的對比，感受的細節，信息類別與內容同時出現多文字時，內容更為重要，用戶關心的是自己的信息，而類別是平臺為產生的信息作出的一種解釋，或者說平臺自己想表達的信息，比如：“我們在使用支付工具時，支付完成后會有一個頁面提供具體明細”

（圖來自支付寶交易頁面截圖）

這種屬于強弱的對比方式，還有一種是顏色深淺的方式，常用的就是對文字進行標注紅色、藍色等字體來，這種比較醒目，常常是應用到需要用戶特別注意到什么內容才會使用，比如“支付寶在付款成功后，會有一個藍色字體引導用戶做下一步動作?！?/p>

（圖來自支付寶交易頁面截圖）

三、合理圖文的順序

不同的圖文順序對用戶閱讀體驗有很大的影響，我們需要根據用戶的閱讀習慣來確定合理的順序，比如我們閱讀新聞資訊、還有公眾號文章，文字的信息會高于圖片，往往文字會排在前面。

（圖來自36氪APP頁面截圖）

對于新聞資訊如此，但是對于圖片類型的網站，還有電商類型的網站，視覺高于文字，因此圖片和文字的排版方式就會有所改變。

（圖來自京東APP商品列表頁截圖）

四、相關性

很多設計師在設計圖片的時候，都會使用與業務相同的icon，因為這樣識別起來就減少阻礙，比如“飛豬口令兌換，使用的圖標與其接近”，現在很多平臺直接使用類似的圖片設計成icon，識別起來更簡單，比如：“美團買菜、叮咚買菜?！?/p>

（圖來自飛豬APP和叮咚買菜APP頁面截圖）

除了圖標icon的相關性，從顏色上也可考慮做到相關性，不過顏色的相關性一般從兩個維度，大家強調的品牌色，另外一個就是從業務角度考慮，這樣也能快速傳遞信息，比如：“現在在健康碼，通過紅黃綠三種”。

（圖來自i深圳小程序頁面的截圖）

五、視覺層次對比

通過層次對比來彰顯重要信息，層次對比一般在關鍵詞時刻做得比較多，目前個類APP、網站應用非常廣泛，比如我們熟悉的電商平臺，當用戶在下單時，會將下單按鈕的顏色做得特別深，比如：“下方為非豬APP和騰訊理財通，在瀏覽頁面時下單按鈕比較醒目”。

視覺層次對比除了色塊上，有的時候文字上也會用到，通過加深重點信息來達到傳遞目的，比如：“拼多多APP會在用戶下單未完成選擇返回時的攔截提醒”。

六、相似性

相似性的原理構成部分，主要是為“形狀、顏色、方向、紋理”，比如：“相同形狀但是不同顏色的圓形圖案，就屬于相似，不同形狀但是顏色相同，也屬于相似?！北热纾骸拔覀兛达w豬APP首頁的設計，在金剛區的下方，出現了很多黃色的icon圖標，這類一般都會把它歸為一類，這是因為他們顏色相同”。

在UI設計規范中的控件組合成的組件，大部分會使用到相似原則，這樣統一視覺樣式，來表達功能的統一性，比如“標簽欄，app底部的4個菜單欄”。

但是有的時候，我們想要凸顯其中一個元素出來，就會選擇不一樣的視覺來呈現，以此達到凸顯的效果，比如下方圖中：“抖音極速版的底部中間菜單欄就用一個大紅色的錢袋來區分，頭條在icon旁邊增加標簽”，現在很多平臺會利用不同的手段來進行區分，像小紅點、顏色加深、數字、動效等方式來提醒用戶點擊?！?/p>

七、連續性

面對離散的碎片時，我們的視覺會更傾向于感知連續性的內容，好的設計指引，會引導用戶感知事物的形狀和運動的方向。

尤其是，我們在一個頁面無法表達完全部信息時，這個時候一般都會應用到連續性，目前連續性應用已非常廣泛，比如：“多張banner圖滑動的互動模塊、以及滑動組件和進度條等等”，大概通過這幾類方式來引導用戶瀏覽被隱藏的內容。

下方案例為“同程APP，頂部多張圖片banner，以及文字菜單可往左滑動的”。

八、封閉性

人們在觀察一個事物時，會傾向于把一個不完整的局部當作一個整體來感知，會將不連續性的信息和物體，以及敞開的圖形形自動補充，從而感知到它是完整的物體。因為，我們會將一個不完整等物體與我們認知中的原型進行相匹配，從而達成認知。

當如果我們應用在設計圖中，就需要主義把握不完整的物體尺寸，避免太過于零散，導致用戶認知時出現混亂，比如：“知名蘋果公司的logo，缺了一個口但是還能識別出是蘋果”。

封閉性的方式，會應用在比較私密性的設計中，比如：“我們銀行卡賬戶，往往都會對部分數字打星號，但是不會讓用戶不理解這是賬號，包括卡片的露半原則”，這樣其實有利于節省空間。

九、總結

關于對設計圖的一些思考整理到此，當然知識遠不止這些。最近還在閱讀一本書，叫做《設計心理學》，里面強調了從用戶習慣來思考，另外當用戶來到這個頁面時，需要告訴用戶能干什么，以及在哪里干，而且需要在3秒的時間內讓用戶知道，否則用戶會選擇離開，用一個詞來表達就是“意符”。

所以好的設計，都離不開告訴用戶干什么？在我們日常產品設計中，比如：“輸入框就知道輸入內容、選擇框就知道是做選擇、這個>符號就知道還是可以點擊的等等”這些都是告訴用戶可以干什么比較好的例子。

不過這些比較寬泛，我們需要更具體的描述內容，在日常設計師對接過程中，最忌諱的就是表達不清晰、過多強調與主觀感受，而不是用客觀事實的方式來進行溝通。

當遇到問題的時候，一定要把抽象化的東西具象化表達出來，這樣才有理說服對方，不然表達的內容會空洞無力，站不住腳。

本文由 @讓腦闊再轉一會 原創發布于人人都是產品經理，未經作者許可，禁止轉載

題圖來自Unsplash，基于CC0協議