編輯導(dǎo)讀：產(chǎn)品經(jīng)理和UI設(shè)計(jì)師都屬于互聯(lián)網(wǎng)時(shí)代下誕生的崗位，也都服務(wù)于互聯(lián)網(wǎng)產(chǎn)品。在日常產(chǎn)品工作中，UI和產(chǎn)品經(jīng)常會(huì)產(chǎn)生分歧，產(chǎn)品經(jīng)理如果知道一些UI設(shè)計(jì)技巧，有助于更好地與UI設(shè)計(jì)師進(jìn)行溝通。文章對(duì)相關(guān)的技巧進(jìn)行了梳理總結(jié)，與大家分享。

你會(huì)不會(huì)經(jīng)常會(huì)和你的設(shè)計(jì)師在爭執(zhí)到底這個(gè)圖設(shè)計(jì)的合不合理？層次是否分明？

不斷地把圖打回去修改，結(jié)果發(fā)現(xiàn)還不如第一版的！既讓你的設(shè)計(jì)小伙伴難過，又自己心塞的很。

那接下的幾個(gè)設(shè)計(jì)小技巧可以讓你在設(shè)計(jì)過程中做好前期準(zhǔn)備，還能讓你在設(shè)計(jì)階段與你的設(shè)計(jì)小伙伴更好的交流你理想中的設(shè)計(jì)想法。

01 使用顏色和重量來創(chuàng)建層次結(jié)構(gòu)，而不是大小

設(shè)計(jì)UI文本樣式時(shí)的一個(gè)常見錯(cuò)誤是過于依賴字體大小來控制層次結(jié)構(gòu)。

以下的兩句相必在日常工作中，各位會(huì)經(jīng)常聽到這類的話

• UI設(shè)計(jì)師：“這段文字重要嗎？ 讓我們做更大?！?/li>
• UI設(shè)計(jì)師：“此文字是次要的嗎？ 讓我們縮小它?！?/li>

但是我們產(chǎn)品經(jīng)理應(yīng)該在和設(shè)計(jì)師溝通時(shí)，不應(yīng)該將目的按照自己的觀念實(shí)質(zhì)化告訴設(shè)計(jì)師，只需要將你的目的描述點(diǎn)抽象化一些，留給設(shè)計(jì)師更大的空間去發(fā)揮他們的能力

那么在設(shè)計(jì)樣式時(shí)不要將所有繁重的工作留給字體大小，而應(yīng)嘗試使用顏色或字體粗細(xì)來完成。

• 產(chǎn)品經(jīng)理：“這段文字重要嗎？ 讓我們變得更大膽?！?/li>
• 產(chǎn)品經(jīng)理：“此文字是次要的嗎？ 讓我們使用較淺的顏色?！?/li>

可以建議設(shè)計(jì)師在對(duì)整個(gè)產(chǎn)品設(shè)計(jì)規(guī)范時(shí)嘗試并堅(jiān)持兩種或三種顏色：

1. 主要內(nèi)容為深色（而非黑色）（如文章標(biāo)題）
2. 次要內(nèi)容（如文章的發(fā)布日期）為灰色
3. 輔助內(nèi)容的淺灰色（可能是頁腳中的版權(quán)聲明）

同樣，兩個(gè)字體粗細(xì)通常足以完成UI工作：

• 大多數(shù)文本的常規(guī)字體粗細(xì)（400或500，取決于字體）
• 要強(qiáng)調(diào)的文字的字體粗細(xì)（600或700）

不建議用400以下的字體粗細(xì)來設(shè)計(jì)，因?yàn)樗鼈兛梢杂糜谳^大的標(biāo)題，但以較小的尺寸很難閱讀。

如果你的設(shè)計(jì)師正在考慮使用較小的粗細(xì)來去強(qiáng)調(diào)某些文本，可以建議你的設(shè)計(jì)師改用較淺的顏色或較小的字體。

說不定會(huì)對(duì)你的審美高看一眼，也就減少了出現(xiàn)【體驗(yàn)審美缺失部】的概率了

02 不要在彩色背景上使用灰色文字

將文字設(shè)為淺灰色是在白色背景上不加強(qiáng)調(diào)的一種好方法，但是在彩色背景上看起來并不那么好。

那是因?yàn)槲覀儗?shí)際上看到的白色灰色效果是降低了對(duì)比度，使文本更接近于背景顏色實(shí)際上有助于創(chuàng)建層次結(jié)構(gòu)，而不是使其成為淺灰色。

使用彩色背景時(shí)，有兩種方法可以降低對(duì)比度：

1. 減少白色文字的不透明度。使用白色文字并降低不透明度。 這樣可以使背景顏色略微流血，以不與背景發(fā)生沖突的方式去強(qiáng)調(diào)文本。
2. 手動(dòng)選擇一種基于背景色的顏色。這比在背景是圖像或圖案時(shí)降低不透明度更好，或者在降低不透明度會(huì)使文本感覺太暗淡或褪色時(shí)效果更好。

選擇與背景相同的顏色，并調(diào)整飽和度和亮度，直到看起來合適為止。

03 抵消你的陰影

可以使用垂直偏移量來代替使用較大的模糊和散布值來使框陰影更明顯，讓它看起來更自然，因?yàn)樗M了一個(gè)光源，就像我們過去在現(xiàn)實(shí)世界中所看到的那樣，從上方向下照射。

這適用于插入陰影，就像您可能在孔或表單輸入中使用的陰影一樣：

04 使用更少的邊框

當(dāng)需要在兩個(gè)元素之間創(chuàng)建分隔時(shí)，請(qǐng)嘗試阻止立即到達(dá)邊界。

邊框是區(qū)分兩個(gè)元素的一種好方法，但邊界并不是唯一的方法，過多使用邊框會(huì)使您的設(shè)計(jì)變得忙碌而混亂。

下次您發(fā)現(xiàn)自己要穿越邊界時(shí)，請(qǐng)嘗試以下一種方法：

（1）使用陰影

框陰影在概述元素（如邊框）??方面做得很好，但是可以更加微妙，可以實(shí)現(xiàn)相同的目標(biāo)而不會(huì)分散注意力。

（2）使用兩種不同的背景色

通常，只需要使相鄰元素的背景顏色略有不同即可，以區(qū)分它們。 如果除了邊框以外，您已經(jīng)在使用其他背景顏色，請(qǐng)嘗試刪除邊框； 您可能不需要它

（3）增加額外的間距

有什么比僅增加間隔更好的方法來在元素之間建立間隔？ 將事物隔開得更遠(yuǎn)是在根本不引入任何新UI的情況下在元素組之間進(jìn)行區(qū)分的好方法。

05 不要把本來應(yīng)該很小的圖標(biāo)放大

如果你要設(shè)計(jì)一些可能會(huì)使用一些大圖標(biāo)的東西（例如登錄頁面的“功能”部分），則可能會(huì)本能地獲取一個(gè)免費(fèi)的圖標(biāo)集，例如Font Awesome或Zondicons，然后增大大小，直到它們滿足你的需求。

它們畢竟是矢量圖像，所以如果增加尺寸對(duì)，質(zhì)量不會(huì)受到影響嗎？

的確，增大矢量圖像的質(zhì)量不會(huì)降低畫質(zhì)，但是以16–24px繪制的圖標(biāo)將其放大至其預(yù)期大小的3倍或4倍時(shí)，看起來就不會(huì)顯得非常專業(yè)。 他們?nèi)狈?xì)節(jié)，總是感到“矮胖”。

如果只有小圖標(biāo)，請(qǐng)嘗試將它們封裝在另一個(gè)形狀中，并為該形狀提供背景顏色：

這樣，你就可以使實(shí)際圖標(biāo)更接近其預(yù)期大小，同時(shí)仍可以填充較大的空間。

如果你有預(yù)算，還可以使用設(shè)計(jì)用于較大尺寸的高級(jí)圖標(biāo)集，例如Heroicons或Iconic。

06 使用強(qiáng)調(diào)邊框?yàn)槠降脑O(shè)計(jì)增添色彩

作為一名產(chǎn)品經(jīng)理，你如何將其他設(shè)計(jì)從精美攝影或彩色插圖中獲得的視覺效果添加到你的UI中？

一個(gè)可以起作用的簡單技巧是在界面的各個(gè)部分添加彩色的強(qiáng)調(diào)邊框，否則它們會(huì)顯得有些平淡。

例如，在警報(bào)消息的旁邊或者突出顯示活動(dòng)的導(dǎo)航項(xiàng)目，甚至整個(gè)布局的頂部

在用戶界面上添加彩色矩形不需要任何圖形設(shè)計(jì)人才，并且可以大大提高您的網(wǎng)站的“設(shè)計(jì)感”。

很難挑選顏色嗎？ 嘗試從受限制的調(diào)色板（例如Dribbble的顏色搜索）中進(jìn)行選擇，以免因傳統(tǒng)拾色器的無窮可能性而感到不知所措

07 并非每個(gè)按鈕都需要背景色

當(dāng)用戶可以在一個(gè)頁面上執(zhí)行多個(gè)動(dòng)作時(shí)，很容易陷入純粹基于語義來設(shè)計(jì)這些動(dòng)作的陷阱。

諸如Bootstrap之類的框架通過在每次添加新按鈕時(shí)提供一個(gè)語義樣式菜單供您選擇來鼓勵(lì)這種情況：

• “這是積極的行動(dòng)嗎？ 將按鈕設(shè)為綠色?！?/li>
• “這會(huì)刪除數(shù)據(jù)嗎？ 將按鈕設(shè)為紅色?！?/li>

語義是按鈕設(shè)計(jì)的重要組成部分，但還有一個(gè)通常被遺忘的更重要的維度：層次結(jié)構(gòu)。

頁面上的每個(gè)動(dòng)作都位于重要的金字塔中。 大多數(shù)頁面只有一個(gè)真正的主要?jiǎng)幼?，幾個(gè)次要的次要?jiǎng)幼?，以及很少使用的三次?dòng)作。

在設(shè)計(jì)這些動(dòng)作時(shí)，重要的是傳達(dá)它們?cè)趯哟谓Y(jié)構(gòu)中的位置。

主要?jiǎng)幼鲬?yīng)該很明顯。 純色，高對(duì)比度的背景色在這里效果很好。

次要行動(dòng)應(yīng)明確但不突出。 輪廓樣式或較低對(duì)比度的背景色是不錯(cuò)的選擇。

第三行動(dòng)應(yīng)該是可發(fā)現(xiàn)的，但不要太過分。 設(shè)置鏈接等這些動(dòng)作的樣式通常是最好的方法。

以上總結(jié)的UI小技巧，大家可以平時(shí)多實(shí)踐一下，其實(shí)對(duì)于我們產(chǎn)品經(jīng)理來說更多是設(shè)計(jì)的理念保持一致就好，具體的細(xì)節(jié)讓UI設(shè)計(jì)師去把控。但是我們需要知道哪些是美的~

作者：麥栗的大狗子，一個(gè)初創(chuàng)公司的產(chǎn)品小跑腿，歡迎關(guān)注我的微信公眾號(hào)：麥栗的大狗子

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

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