編輯導讀：產品經理和UI設計師都屬於互聯網時代下誕生的崗位，也都服務於互聯網產品。在日常產品工作中，UI和產品經常會產生分歧，產品經理如果知道一些UI設計技巧，有助於更好地與UI設計師進行溝通。文章對相關的技巧進行了梳理總結，與大家分享。

你會不會經常會和你的設計師在爭執到底這個圖設計的合不合理？層次是否分明？

不斷地把圖打回去修改，結果發現還不如第一版的！既讓你的設計小夥伴難過，又自己心塞的很。

那接下的幾個設計小技巧可以讓你在設計過程中做好前期準備，還能讓你在設計階段與你的設計小夥伴更好的交流你理想中的設計想法。

01 使用顏色和重量來創建層次結構，而不是大小

設計UI文本樣式時的一個常見錯誤是過於依賴字體大小來控制層次結構。

以下的兩句相必在日常工作中，各位會經常聽到這類的話

• UI設計師：“這段文字重要嗎？ 讓我們做更大。”
• UI設計師：“此文字是次要的嗎？ 讓我們縮小它。”

但是我們產品經理應該在和設計師溝通時，不應該將目的按照自己的觀念實質化告訴設計師，只需要將你的目的描述點抽象化一些，留給設計師更大的空間去發揮他們的能力

那麼在設計樣式時不要將所有繁重的工作留給字體大小，而應嘗試使用顏色或字體粗細來完成。

• 產品經理：“這段文字重要嗎？ 讓我們變得更大膽。”
• 產品經理：“此文字是次要的嗎？ 讓我們使用較淺的顏色。”

可以建議設計師在對整個產品設計規範時嘗試並堅持兩種或三種顏色：

1. 主要內容爲深色（而非黑色）（如文章標題）
2. 次要內容（如文章的發佈日期）爲灰色
3. 輔助內容的淺灰色（可能是頁腳中的版權聲明）

同樣，兩個字體粗細通常足以完成UI工作：

• 大多數文本的常規字體粗細（400或500，取決於字體）
• 要強調的文字的字體粗細（600或700）

不建議用400以下的字體粗細來設計，因爲它們可以用於較大的標題，但以較小的尺寸很難閱讀。

如果你的設計師正在考慮使用較小的粗細來去強調某些文本，可以建議你的設計師改用較淺的顏色或較小的字體。

說不定會對你的審美高看一眼，也就減少了出現【體驗審美缺失部】的概率了

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

將文字設爲淺灰色是在白色背景上不加強調的一種好方法，但是在彩色背景上看起來並不那麼好。

那是因爲我們實際上看到的白色灰色效果是降低了對比度，使文本更接近於背景顏色實際上有助於創建層次結構，而不是使其成爲淺灰色。

使用彩色背景時，有兩種方法可以降低對比度：

1. 減少白色文字的不透明度。使用白色文字並降低不透明度。 這樣可以使背景顏色略微流血，以不與背景發生衝突的方式去強調文本。
2. 手動選擇一種基於背景色的顏色。這比在背景是圖像或圖案時降低不透明度更好，或者在降低不透明度會使文本感覺太暗淡或褪色時效果更好。

選擇與背景相同的顏色，並調整飽和度和亮度，直到看起來合適爲止。

03 抵消你的陰影

可以使用垂直偏移量來代替使用較大的模糊和散佈值來使框陰影更明顯，讓它看起來更自然，因爲它模擬了一個光源，就像我們過去在現實世界中所看到的那樣，從上方向下照射。

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

04 使用更少的邊框

當需要在兩個元素之間創建分隔時，請嘗試阻止立即到達邊界。

邊框是區分兩個元素的一種好方法，但邊界並不是唯一的方法，過多使用邊框會使您的設計變得忙碌而混亂。

下次您發現自己要穿越邊界時，請嘗試以下一種方法：

（1）使用陰影

框陰影在概述元素（如邊框）​​方面做得很好，但是可以更加微妙，可以實現相同的目標而不會分散注意力。

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

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

（3）增加額外的間距

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

05 不要把本來應該很小的圖標放大

如果你要設計一些可能會使用一些大圖標的東西（例如登錄頁面的“功能”部分），則可能會本能地獲取一個免費的圖標集，例如Font Awesome或Zondicons，然後增大大小，直到它們滿足你的需求。

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

的確，增大矢量圖像的質量不會降低畫質，但是以16–24px繪製的圖標將其放大至其預期大小的3倍或4倍時，看起來就不會顯得非常專業。 他們缺乏細節，總是感到“矮胖”。

如果只有小圖標，請嘗試將它們封裝在另一個形狀中，併爲該形狀提供背景顏色：

這樣，你就可以使實際圖標更接近其預期大小，同時仍可以填充較大的空間。

如果你有預算，還可以使用設計用於較大尺寸的高級圖標集，例如Heroicons或Iconic。

06 使用強調邊框爲平淡的設計增添色彩

作爲一名產品經理，你如何將其他設計從精美攝影或彩色插圖中獲得的視覺效果添加到你的UI中？

一個可以起作用的簡單技巧是在界面的各個部分添加彩色的強調邊框，否則它們會顯得有些平淡。

例如，在警報消息的旁邊或者突出顯示活動的導航項目，甚至整個佈局的頂部

在用戶界面上添加彩色矩形不需要任何圖形設計人才，並且可以大大提高您的網站的“設計感”。

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

07 並非每個按鈕都需要背景色

當用戶可以在一個頁面上執行多個動作時，很容易陷入純粹基於語義來設計這些動作的陷阱。

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

• “這是積極的行動嗎？ 將按鈕設爲綠色。”
• “這會刪除數據嗎？ 將按鈕設爲紅色。”

語義是按鈕設計的重要組成部分，但還有一個通常被遺忘的更重要的維度： 層次結構 。

頁面上的每個動作都位於重要的金字塔中。 大多數頁面只有一個真正的主要動作，幾個次要的次要動作，以及很少使用的三次動作。

在設計這些動作時，重要的是傳達它們在層次結構中的位置。

主要動作應該很明顯。 純色，高對比度的背景色在這裏效果很好。

次要行動應明確但不突出。 輪廓樣式或較低對比度的背景色是不錯的選擇。

第三行動應該是可發現的，但不要太過分。 設置鏈接等這些動作的樣式通常是最好的方法。

以上總結的UI小技巧，大家可以平時多實踐一下，其實對於我們產品經理來說更多是設計的理念保持一致就好，具體的細節讓UI設計師去把控。但是我們需要知道哪些是美的~

作者：麥慄的大狗子，一個初創公司的產品小跑腿，歡迎關注我的微信公衆號：麥慄的大狗子

本文由 @麥慄的大狗子 原創發佈於人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基於CC0協議。