你會不會經(jīng)常會和你的設(shè)計師在爭執(zhí)到底這個圖設(shè)計的合不合理？層次是否分明？
不斷地把圖打回去修改，結(jié)果發(fā)現(xiàn)還不如第一版的！既讓你的設(shè)計小伙伴難過，又自己心塞的很。
那接下的幾個設(shè)計小技巧可以讓你在設(shè)計過程中做好前期準(zhǔn)備，還能讓你在設(shè)計階段與你的設(shè)計小伙伴更好的交流你理想中的設(shè)計想法。
01/
使用顏色和重量來創(chuàng)建層次結(jié)構(gòu)，而不是大小
設(shè)計UI文本樣式時的一個常見錯誤是過于依賴字體大小來控制層次結(jié)構(gòu)。
以下的兩句相必在日常工作中，各位會經(jīng)常聽到這類的話
但是我們產(chǎn)品經(jīng)理應(yīng)該在和設(shè)計師溝通時，不應(yīng)該將目的按照自己的觀念實質(zhì)化告訴設(shè)計師，只需要將你的目的描述點抽象化一些，留給設(shè)計師更大的空間去發(fā)揮他們的能力
那么在設(shè)計樣式時不要將所有繁重的工作留給字體大小，而應(yīng)嘗試使用顏色或字體粗細(xì)來完成。
產(chǎn)品經(jīng)理：“這段文字重要嗎？ 讓我們變得更大膽�！�
產(chǎn)品經(jīng)理：“此文字是次要的嗎？ 讓我們使用較淺的顏色。”
可以建議設(shè)計師在對整個產(chǎn)品設(shè)計規(guī)范時嘗試并堅持兩種或三種顏色：
主要內(nèi)容為深色（而非黑色）（如文章標(biāo)題）
次要內(nèi)容（如文章的發(fā)布日期）為灰色
輔助內(nèi)容的淺灰色（可能是頁腳中的版權(quán)聲明）
同樣，兩個字體粗細(xì)通常足以完成UI工作：
大多數(shù)文本的常規(guī)字體粗細(xì)（400或500，取決于字體）
要強調(diào)的文字的字體粗細(xì)（600或700）
不建議用400以下的字體粗細(xì)來設(shè)計，因為它們可以用于較大的標(biāo)題，但以較小的尺寸很難閱讀。
如果你的設(shè)計師正在考慮使用較小的粗細(xì)來去強調(diào)某些文本，可以建議你的設(shè)計師改用較淺的顏色或較小的字體。
說不定會對你的審美高看一眼，也就減少了出現(xiàn)【體驗審美缺失部】的概率了
02/
不要在彩色背景上使用灰色文字
將文字設(shè)為淺灰色是在白色背景上不加強調(diào)的一種好方法，但是在彩色背景上看起來并不那么好。
那是因為我們實際上看到的白色灰色效果是降低了對比度，使文本更接近于背景顏色實際上有助于創(chuàng)建層次結(jié)構(gòu)，而不是使其成為淺灰色。
使用彩色背景時，有兩種方法可以降低對比度：
減少白色文字的不透明度。使用白色文字并降低不透明度。 這樣可以使背景顏色略微流血，以不與背景發(fā)生沖突的方式去強調(diào)文本。
手動選擇一種基于背景色的顏色。這比在背景是圖像或圖案時降低不透明度更好，或者在降低不透明度會使文本感覺太暗淡或褪色時效果更好。
選擇與背景相同的顏色，并調(diào)整飽和度和亮度，直到看起來合適為止。
03/
抵消你的陰影
可以使用垂直偏移量來代替使用較大的模糊和散布值來使框陰影更明顯，讓它看起來更自然，因為它模擬了一個光源，就像我們過去在現(xiàn)實世界中所看到的那樣，從上方向下照射。
這適用于插入陰影，就像您可能在孔或表單輸入中使用的陰影一樣：
04/
使用更少的邊框
當(dāng)需要在兩個元素之間創(chuàng)建分隔時，請嘗試阻止立即到達邊界。
邊框是區(qū)分兩個元素的一種好方法，但邊界并不是唯一的方法，過多使用邊框會使您的設(shè)計變得忙碌而混亂。
下次您發(fā)現(xiàn)自己要穿越邊界時，請嘗試以下一種方法：
（1）使用陰影
框陰影在概述元素（如邊框）方面做得很好，但是可以更加微妙，可以實現(xiàn)相同的目標(biāo)而不會分散注意力。
（2）使用兩種不同的背景色
通常，只需要使相鄰元素的背景顏色略有不同即可，以區(qū)分它們。 如果除了邊框以外，您已經(jīng)在使用其他背景顏色，請嘗試刪除邊框； 您可能不需要它
（3）增加額外的間距
有什么比僅增加間隔更好的方法來在元素之間建立間隔？ 將事物隔開得更遠(yuǎn)是在根本不引入任何新UI的情況下在元素組之間進行區(qū)分的好方法。
05/
不要把本來應(yīng)該很小的圖標(biāo)放大
如果你要設(shè)計一些可能會使用一些大圖標(biāo)的東西（例如登錄頁面的“功能”部分），則可能會本能地獲取一個免費的圖標(biāo)集，例如Font Awesome或Zondicons，然后增大大小，直到它們滿足你的需求。
它們畢竟是矢量圖像，所以如果增加尺寸對，質(zhì)量不會受到影響嗎？
的確，增大矢量圖像的質(zhì)量不會降低畫質(zhì)，但是以16–24px繪制的圖標(biāo)將其放大至其預(yù)期大小的3倍或4倍時，看起來就不會顯得非常專業(yè)。 他們?nèi)狈?xì)節(jié)，總是感到“矮胖”。
如果只有小圖標(biāo)，請嘗試將它們封裝在另一個形狀中，并為該形狀提供背景顏色：
這樣，你就可以使實際圖標(biāo)更接近其預(yù)期大小，同時仍可以填充較大的空間。
如果你有預(yù)算，還可以使用設(shè)計用于較大尺寸的高級圖標(biāo)集，例如Heroicons或Iconic。
06/
使用強調(diào)邊框為平淡的設(shè)計增添色彩
作為一名產(chǎn)品經(jīng)理，你如何將其他設(shè)計從精美攝影或彩色插圖中獲得的視覺效果添加到你的UI中？
一個可以起作用的簡單技巧是在界面的各個部分添加彩色的強調(diào)邊框，否則它們會顯得有些平淡。
例如，在警報消息的旁邊或者突出顯示活動的導(dǎo)航項目，甚至整個布局的頂部
在用戶界面上添加彩色矩形不需要任何圖形設(shè)計人才，并且可以大大提高您的網(wǎng)站的“設(shè)計感”。
很難挑選顏色嗎？ 嘗試從受限制的調(diào)色板（例如Dribbble的顏色搜索）中進行選擇，以免因傳統(tǒng)拾色器的無窮可能性而感到不知所措
07/
并非每個按鈕都需要背景色
當(dāng)用戶可以在一個頁面上執(zhí)行多個動作時，很容易陷入純粹基于語義來設(shè)計這些動作的陷阱。
諸如Bootstrap之類的框架通過在每次添加新按鈕時提供一個語義樣式菜單供您選擇來鼓勵這種情況：
“這是積極的行動嗎？ 將按鈕設(shè)為綠色。”
“這會刪除數(shù)據(jù)嗎？ 將按鈕設(shè)為紅色�！�
語義是按鈕設(shè)計的重要組成部分，但還有一個通常被遺忘的更重要的維度：層次結(jié)構(gòu)。
頁面上的每個動作都位于重要的金字塔中。 大多數(shù)頁面只有一個真正的主要動作，幾個次要的次要動作，以及很少使用的三次動作。
在設(shè)計這些動作時，重要的是傳達它們在層次結(jié)構(gòu)中的位置。
主要動作應(yīng)該很明顯。 純色，高對比度的背景色在這里效果很好。
次要行動應(yīng)明確但不突出。 輪廓樣式或較低對比度的背景色是不錯的選擇。
第三行動應(yīng)該是可發(fā)現(xiàn)的，但不要太過分。 設(shè)置鏈接等這些動作的樣式通常是最好的方法。
以上總結(jié)的UI小技巧，大家可以平時多實踐一下，其實對于我們產(chǎn)品經(jīng)理來說更多是設(shè)計的理念保持一致就好，具體的細(xì)節(jié)讓UI設(shè)計師去把控。但是我們需要知道哪些是美的~
作者：麥栗的大狗子
全部評論