中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

03 抵消你的陰影

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

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

04 使用更少的邊框

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

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

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

（1）使用陰影

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

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

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

（3）增加額外的間距

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

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

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

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

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

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

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

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

06 使用強調(diào)邊框為平淡的設(shè)計增添色彩

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

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

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

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

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

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

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

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

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

語義是按鈕設(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è)計的理念保持一致就好，具體的細節(jié)讓UI設(shè)計師去把控。但是我們需要知道哪些是美的~

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

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

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