国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

7個(gè)實(shí)用ui設(shè)計(jì)技巧用戰(zhàn)術(shù)，而不是天賦改進(jìn)你的設(shè)計(jì)。

每個(gè)Web開(kāi)發(fā)人員，都不可避免地遇到需要做出視覺(jué)設(shè)計(jì)決策的情況，也許你工作的公司沒(méi)有一個(gè)全職設(shè)計(jì)師，你需要自己實(shí)現(xiàn)一個(gè)新功能的UI。或者，也許你正在攻克一個(gè)編外項(xiàng)目，并希望它看起來(lái)比「另一個(gè)Bootstrap站點(diǎn)」更好。

很容易舉起雙手說(shuō)：

“我永遠(yuǎn)無(wú)法讓這個(gè)看起來(lái)很好，我不是一個(gè)藝術(shù)家！”

但事實(shí)證明，有很多技巧可以用來(lái)提升你的工作，不需要有平面設(shè)計(jì)的經(jīng)驗(yàn)。

這里有七個(gè)簡(jiǎn)單的想法可以用來(lái)改善你的設(shè)計(jì)。

一、使用顏色和粗細(xì)來(lái)創(chuàng)建層次結(jié)構(gòu)，而不是字體大小

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

“這段文字是重要的嗎？讓它大一點(diǎn)。 ”

“這段文字是次要的？讓它小一點(diǎn)。 ”

不要將所有繁重的工作都留在字號(hào)上，而是嘗試使用顏色或字重來(lái)實(shí)現(xiàn)相同效果。

“這段文字是重要的嗎？讓它粗一點(diǎn)。?”

“這段文字是次要的？讓它細(xì)一點(diǎn)。 ”

嘗試并堅(jiān)持兩種或三種顏色：

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

類似地，兩種字體權(quán)重通常足以用于UI工作：

1. 大多數(shù)文本的正常字重（400或500取決于字體）；
2. 較粗的字體（600或700）用于您要強(qiáng)調(diào)的文字。

UI設(shè)計(jì)上遠(yuǎn)離字重不超過(guò)400的字體 ，他們可以用在大標(biāo)題上，但在較小的字號(hào)下不易于閱讀。如果您正在考慮使用較輕的重量來(lái)淡化某些文字，請(qǐng)改為使用較淺的顏色或較小的字體。

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

使文本變?yōu)闇\灰色，是在白色背景上淡化它的好方法，但在彩色背景上看起來(lái)并不太好。這是因?yàn)槲覀儗?shí)際看到白色灰色的效果是對(duì)比度降低，使文本更接近背景色實(shí)際上有助于創(chuàng)建層次結(jié)構(gòu)，而不是使它變成淺灰色。

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

（1）減少白色文字的不透明度

使用白色文字并降低不透明度，這可以讓背景顏色滲透一點(diǎn)點(diǎn)，以不與背景沖突的方式減弱文字。

（2）選擇基于背景色的顏色

當(dāng)您的背景是圖像或圖案時(shí)，或者當(dāng)減少不透明度會(huì)使文字感覺(jué)過(guò)于枯燥或不適應(yīng)時(shí)，這會(huì)比減少不透明度效果更好。

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

三、偏移陰影

不要使用較大的模糊和擴(kuò)散值來(lái)使框陰影更明顯，請(qǐng)?zhí)砑哟怪逼啤Ｋ雌饋?lái)更自然，因?yàn)樗M了像我們以前在現(xiàn)實(shí)世界中看到的那樣從上方照射下來(lái)的光源。

這適用于表格輸入框：

如果您有興趣了解更多關(guān)于陰影設(shè)計(jì)的知識(shí)，google的“材料設(shè)計(jì)指南”是一本很棒的入門指南。

四、盡量少使用邊框

當(dāng)你需要在兩個(gè)元素之間創(chuàng)建分隔時(shí)，雖然邊框是區(qū)分兩個(gè)元素的好方法，但它們并不是唯一的方法，而使用它們太多會(huì)讓你的設(shè)計(jì)變得擁擠和混亂。

下一次你發(fā)現(xiàn)自己到達(dá)邊境時(shí)，請(qǐng)嘗試以下其中一個(gè)想法：

（1）使用盒子陰影

盒子陰影在繪制像邊框這樣的元素方面做得非常出色，但是可以更加微妙并且完成相同的目標(biāo)而不會(huì)讓人分心。

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

通常只需將相鄰元素的背景顏色略有不同，就可以在它們之間進(jìn)行區(qū)分。如果您已經(jīng)在邊框上使用不同的背景顏色，請(qǐng)嘗試刪除邊框，你可能不需要它。

（3）添加額外的間距

什么方法創(chuàng)建元素之間的分離比增加分離更好呢？

將事物劃分得更遠(yuǎn)，是一種在不引入任何新UI的情況下，創(chuàng)建元素組之間區(qū)別的好方法。

五、不要過(guò)渡放大圖標(biāo)

如果你正在設(shè)計(jì)一些可能使用一些大圖標(biāo)的東西（比如：可能是著陸頁(yè)上的“功能”部分），你可能會(huì)本能地采用一個(gè)像Font Awesome或Zondicons這樣的免費(fèi)圖標(biāo)集，并且調(diào)整大小直到它們符合你的需求。

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

雖然矢量圖像在增加尺寸時(shí)質(zhì)量不會(huì)降低，但是在16-24像素繪制的圖標(biāo)，在將它們放大3倍或4倍的預(yù)期尺寸時(shí)，會(huì)顯得非常不專業(yè)。他們?nèi)狈?xì)節(jié)，并總是感覺(jué)不成比例的“矮胖”。

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

這可以讓您保持實(shí)際的圖標(biāo)更接近其預(yù)期的尺寸，同時(shí)仍然填充更大的空間。如果您有預(yù)算，也可以使用專門用于較大尺寸的高級(jí)圖標(biāo)集，如：Heroicons或Iconic。

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

如果您不是平面設(shè)計(jì)師，那么您如何將其他設(shè)計(jì)從美麗的攝影或色彩豐富的插圖中，獲得的那種視覺(jué)風(fēng)格添加到您的用戶界面中？

一個(gè)可以產(chǎn)生巨大差異的簡(jiǎn)單訣竅是，在界面的某些部分添加色彩鮮明的重音邊框，否則會(huì)感覺(jué)有點(diǎn)平淡。例如：在提示消息的旁邊。

或突出顯示活動(dòng)的導(dǎo)航項(xiàng)目：

甚至是整個(gè)布局的頂部：

簡(jiǎn)單的為您的界面添加一個(gè)彩色矩形，不需要任何平面設(shè)計(jì)專業(yè)天才，但卻可以使您的網(wǎng)站更具有“設(shè)計(jì)感”。

難以挑選顏色？

嘗試從Dribbble的顏色搜索等受限調(diào)色板中進(jìn)行選擇，以避免被傳統(tǒng)顏色選擇器的無(wú)窮可能性所淹沒(méi)。

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

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

像Bootstrap這樣的框架通過(guò)為您提供一系列樣式供你選擇：

“這是一個(gè)積極的行動(dòng)？選個(gè)綠色的按鈕?！?/p>

“這會(huì)刪除數(shù)據(jù)？將按鈕設(shè)為紅色?！?/p>

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

網(wǎng)頁(yè)上的每個(gè)動(dòng)作都位于重要金字塔的某處，大多數(shù)頁(yè)面只有一個(gè)真正的主要操作，一些不太重要的次要操作，以及幾個(gè)很少使用的三級(jí)操作。

在設(shè)計(jì)這些行動(dòng)時(shí)，在層次結(jié)構(gòu)中傳達(dá)他們的位置很重要。

1. 主要行動(dòng)應(yīng)該很明顯。實(shí)心，高對(duì)比度的背景色在這里很有用。
2. 次要行動(dòng)應(yīng)該明確但不突出。輪廓樣式或較低的對(duì)比度背景色是很好的選擇。
3. 三級(jí)行動(dòng)應(yīng)該是可以發(fā)現(xiàn)但不顯眼的。將這些行為設(shè)計(jì)為鏈接通常是最好的方法。

那么消極行為按鈕呢？他們不應(yīng)該總是紅色嗎？

不必要！如果消極行為不是頁(yè)面上的主要行為，那么給它一個(gè)二級(jí)或三級(jí)按鈕治療可能會(huì)更好。

在當(dāng)負(fù)面行為實(shí)際上是界面中的主要行為時(shí)，（如在確認(rèn)對(duì)話框中）采用大的，紅色的和粗體的樣式：

作者：Adam Wathan & Steve Schoger

原文鏈接：《7 Practical Tips for Cheating at Design》

編譯：The_one

本文由 @The_one 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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