編輯導(dǎo)語(yǔ)：作為一名產(chǎn)品經(jīng)理，需要經(jīng)常與設(shè)計(jì)師打交道，一個(gè)成功的UI產(chǎn)品，需要靠產(chǎn)品經(jīng)理與UI設(shè)計(jì)師的共同努力完成。但每個(gè)人都有自己的想法，所以產(chǎn)品經(jīng)理懂一些UI知識(shí)，有利于站在對(duì)方的角度思考，能夠更加有效地完成產(chǎn)品。

作為一個(gè)產(chǎn)品經(jīng)理與設(shè)計(jì)師頻繁打交道不可避免，一個(gè)好的UI作品，很多時(shí)候都是設(shè)計(jì)師與產(chǎn)品兩個(gè)共同完成，但人是個(gè)體，對(duì)于設(shè)計(jì)師來(lái)說(shuō)，設(shè)計(jì)的UI圖有自己的想法，產(chǎn)品也會(huì)站在自己角度來(lái)思考問(wèn)題。

所以需要常常溝通，如果這個(gè)過(guò)程只是單純的設(shè)計(jì)圖，就變成簡(jiǎn)單任務(wù)交付的方式，失去了一體的意義。

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

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

這個(gè)副標(biāo)題的文案太大、顏色頁(yè)太深，導(dǎo)致主標(biāo)題弱化了，我們可以調(diào)成xx號(hào)的字體，顏色用灰色調(diào)一下試試”

所以作為一個(gè)產(chǎn)品經(jīng)理懂UI知識(shí)變得是一個(gè)必備技能，如果沒(méi)有自己的方法論，在溝通的時(shí)候可能會(huì)顯得不專業(yè)，可能會(huì)憑感覺(jué)走，不由自主的代入更多主觀感受，缺少客觀事實(shí)的表達(dá)方式，面向UI圖思考時(shí)有一些簡(jiǎn)單的方法，在這里羅列幾條，供參考。

一、分割線的應(yīng)用

在使用分割線時(shí)，我們常常會(huì)使用貫穿和非貫穿分割線兩種：

使用非貫穿分割線的主要原因是，這些消息是一體的，都是消息，但同時(shí)又是每個(gè)個(gè)體發(fā)送過(guò)來(lái)的消息，如果是用貫穿分割線，會(huì)讓內(nèi)容分割，有失整體性，比如：“支付的消息，使用的就是非貫穿分割線”。

（圖來(lái)自支付寶頁(yè)面截圖）

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

（圖來(lái)自支付寶和今日頭條頁(yè)面的截圖）

二、文字顏色的對(duì)比

文字顏色的對(duì)比，感受的細(xì)節(jié)，信息類別與內(nèi)容同時(shí)出現(xiàn)多文字時(shí)，內(nèi)容更為重要，用戶關(guān)心的是自己的信息，而類別是平臺(tái)為產(chǎn)生的信息作出的一種解釋，或者說(shuō)平臺(tái)自己想表達(dá)的信息，比如：“我們?cè)谑褂弥Ц豆ぞ邥r(shí)，支付完成后會(huì)有一個(gè)頁(yè)面提供具體明細(xì)”

（圖來(lái)自支付寶交易頁(yè)面截圖）

這種屬于強(qiáng)弱的對(duì)比方式，還有一種是顏色深淺的方式，常用的就是對(duì)文字進(jìn)行標(biāo)注紅色、藍(lán)色等字體來(lái)，這種比較醒目，常常是應(yīng)用到需要用戶特別注意到什么內(nèi)容才會(huì)使用，比如“支付寶在付款成功后，會(huì)有一個(gè)藍(lán)色字體引導(dǎo)用戶做下一步動(dòng)作?！?/p>

（圖來(lái)自支付寶交易頁(yè)面截圖）

三、合理圖文的順序

不同的圖文順序?qū)τ脩糸喿x體驗(yàn)有很大的影響，我們需要根據(jù)用戶的閱讀習(xí)慣來(lái)確定合理的順序，比如我們閱讀新聞資訊、還有公眾號(hào)文章，文字的信息會(huì)高于圖片，往往文字會(huì)排在前面。

（圖來(lái)自36氪APP頁(yè)面截圖）

對(duì)于新聞資訊如此，但是對(duì)于圖片類型的網(wǎng)站，還有電商類型的網(wǎng)站，視覺(jué)高于文字，因此圖片和文字的排版方式就會(huì)有所改變。

（圖來(lái)自京東APP商品列表頁(yè)截圖）

四、相關(guān)性

很多設(shè)計(jì)師在設(shè)計(jì)圖片的時(shí)候，都會(huì)使用與業(yè)務(wù)相同的icon，因?yàn)檫@樣識(shí)別起來(lái)就減少阻礙，比如“飛豬口令兌換，使用的圖標(biāo)與其接近”，現(xiàn)在很多平臺(tái)直接使用類似的圖片設(shè)計(jì)成icon，識(shí)別起來(lái)更簡(jiǎn)單，比如：“美團(tuán)買(mǎi)菜、叮咚買(mǎi)菜?！?/p>

（圖來(lái)自飛豬APP和叮咚買(mǎi)菜APP頁(yè)面截圖）

除了圖標(biāo)icon的相關(guān)性，從顏色上也可考慮做到相關(guān)性，不過(guò)顏色的相關(guān)性一般從兩個(gè)維度，大家強(qiáng)調(diào)的品牌色，另外一個(gè)就是從業(yè)務(wù)角度考慮，這樣也能快速傳遞信息，比如：“現(xiàn)在在健康碼，通過(guò)紅黃綠三種”。

（圖來(lái)自i深圳小程序頁(yè)面的截圖）

五、視覺(jué)層次對(duì)比

通過(guò)層次對(duì)比來(lái)彰顯重要信息，層次對(duì)比一般在關(guān)鍵詞時(shí)刻做得比較多，目前個(gè)類APP、網(wǎng)站應(yīng)用非常廣泛，比如我們熟悉的電商平臺(tái)，當(dāng)用戶在下單時(shí)，會(huì)將下單按鈕的顏色做得特別深，比如：“下方為非豬APP和騰訊理財(cái)通，在瀏覽頁(yè)面時(shí)下單按鈕比較醒目”。

視覺(jué)層次對(duì)比除了色塊上，有的時(shí)候文字上也會(huì)用到，通過(guò)加深重點(diǎn)信息來(lái)達(dá)到傳遞目的，比如：“拼多多APP會(huì)在用戶下單未完成選擇返回時(shí)的攔截提醒”。

六、相似性

相似性的原理構(gòu)成部分，主要是為“形狀、顏色、方向、紋理”，比如：“相同形狀但是不同顏色的圓形圖案，就屬于相似，不同形狀但是顏色相同，也屬于相似?！北热纾骸拔覀兛达w豬APP首頁(yè)的設(shè)計(jì)，在金剛區(qū)的下方，出現(xiàn)了很多黃色的icon圖標(biāo)，這類一般都會(huì)把它歸為一類，這是因?yàn)樗麄冾伾嗤薄?/p>

在UI設(shè)計(jì)規(guī)范中的控件組合成的組件，大部分會(huì)使用到相似原則，這樣統(tǒng)一視覺(jué)樣式，來(lái)表達(dá)功能的統(tǒng)一性，比如“標(biāo)簽欄，app底部的4個(gè)菜單欄”。

但是有的時(shí)候，我們想要凸顯其中一個(gè)元素出來(lái)，就會(huì)選擇不一樣的視覺(jué)來(lái)呈現(xiàn)，以此達(dá)到凸顯的效果，比如下方圖中：“抖音極速版的底部中間菜單欄就用一個(gè)大紅色的錢(qián)袋來(lái)區(qū)分，頭條在icon旁邊增加標(biāo)簽”，現(xiàn)在很多平臺(tái)會(huì)利用不同的手段來(lái)進(jìn)行區(qū)分，像小紅點(diǎn)、顏色加深、數(shù)字、動(dòng)效等方式來(lái)提醒用戶點(diǎn)擊。”

七、連續(xù)性

面對(duì)離散的碎片時(shí)，我們的視覺(jué)會(huì)更傾向于感知連續(xù)性的內(nèi)容，好的設(shè)計(jì)指引，會(huì)引導(dǎo)用戶感知事物的形狀和運(yùn)動(dòng)的方向。

尤其是，我們?cè)谝粋€(gè)頁(yè)面無(wú)法表達(dá)完全部信息時(shí)，這個(gè)時(shí)候一般都會(huì)應(yīng)用到連續(xù)性，目前連續(xù)性應(yīng)用已非常廣泛，比如：“多張banner圖滑動(dòng)的互動(dòng)模塊、以及滑動(dòng)組件和進(jìn)度條等等”，大概通過(guò)這幾類方式來(lái)引導(dǎo)用戶瀏覽被隱藏的內(nèi)容。

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

八、封閉性

人們?cè)谟^察一個(gè)事物時(shí)，會(huì)傾向于把一個(gè)不完整的局部當(dāng)作一個(gè)整體來(lái)感知，會(huì)將不連續(xù)性的信息和物體，以及敞開(kāi)的圖形形自動(dòng)補(bǔ)充，從而感知到它是完整的物體。因?yàn)?，我們?huì)將一個(gè)不完整等物體與我們認(rèn)知中的原型進(jìn)行相匹配，從而達(dá)成認(rèn)知。

當(dāng)如果我們應(yīng)用在設(shè)計(jì)圖中，就需要主義把握不完整的物體尺寸，避免太過(guò)于零散，導(dǎo)致用戶認(rèn)知時(shí)出現(xiàn)混亂，比如：“知名蘋(píng)果公司的logo，缺了一個(gè)口但是還能識(shí)別出是蘋(píng)果”。

封閉性的方式，會(huì)應(yīng)用在比較私密性的設(shè)計(jì)中，比如：“我們銀行卡賬戶，往往都會(huì)對(duì)部分?jǐn)?shù)字打星號(hào)，但是不會(huì)讓用戶不理解這是賬號(hào)，包括卡片的露半原則”，這樣其實(shí)有利于節(jié)省空間。

九、總結(jié)

關(guān)于對(duì)設(shè)計(jì)圖的一些思考整理到此，當(dāng)然知識(shí)遠(yuǎn)不止這些。最近還在閱讀一本書(shū)，叫做《設(shè)計(jì)心理學(xué)》，里面強(qiáng)調(diào)了從用戶習(xí)慣來(lái)思考，另外當(dāng)用戶來(lái)到這個(gè)頁(yè)面時(shí)，需要告訴用戶能干什么，以及在哪里干，而且需要在3秒的時(shí)間內(nèi)讓用戶知道，否則用戶會(huì)選擇離開(kāi)，用一個(gè)詞來(lái)表達(dá)就是“意符”。

所以好的設(shè)計(jì)，都離不開(kāi)告訴用戶干什么？在我們?nèi)粘．a(chǎn)品設(shè)計(jì)中，比如：“輸入框就知道輸入內(nèi)容、選擇框就知道是做選擇、這個(gè)>符號(hào)就知道還是可以點(diǎn)擊的等等”這些都是告訴用戶可以干什么比較好的例子。

不過(guò)這些比較寬泛，我們需要更具體的描述內(nèi)容，在日常設(shè)計(jì)師對(duì)接過(guò)程中，最忌諱的就是表達(dá)不清晰、過(guò)多強(qiáng)調(diào)與主觀感受，而不是用客觀事實(shí)的方式來(lái)進(jìn)行溝通。

當(dāng)遇到問(wèn)題的時(shí)候，一定要把抽象化的東西具象化表達(dá)出來(lái)，這樣才有理說(shuō)服對(duì)方，不然表達(dá)的內(nèi)容會(huì)空洞無(wú)力，站不住腳。

本文由 @讓腦闊再轉(zhuǎn)一會(huì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

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