日本久久久久久,热99视频国产视频,亚精产品一三三三三区av久久久,国产一第1页一草草影院

對(duì)于網(wǎng)頁(yè)設(shè)計(jì)，有時(shí)候不僅僅是UI設(shè)計(jì)師的任務(wù)，有時(shí)候還可能是Web開(kāi)發(fā)人員的任務(wù)，因此這篇文章將除了適合學(xué)UI的同學(xué)閱讀，還適合研究H5的同學(xué)。

有時(shí)候，在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，很容易就陷入了設(shè)計(jì)的瓶頸，尤其是當(dāng)自己的設(shè)計(jì)被一次又一次的打回，而自己痛苦地在電腦桌前表示，“我永遠(yuǎn)都不能讓這看起來(lái)很好！”但事實(shí)證明，你可以用很多技巧來(lái)提升你的工作水平。

這里就有7個(gè)方法，改善你的設(shè)計(jì)

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

樣式UI文本的一個(gè)常見(jiàn)錯(cuò)誤是過(guò)分依賴字體大小來(lái)控制層次結(jié)構(gòu)。很多都會(huì)有這樣的思路

“這個(gè)文字很重要嗎？讓它變得更大?！?/span>“這個(gè)文字是次要的嗎？讓它變小?！?/span>

不要僅僅將所有繁重的工作留在字體大小上，而是嘗試使用顏色或字體粗細(xì)來(lái)完成同樣的工作。

“這個(gè)文字很重要嗎？讓它更粗點(diǎn)?！?/span>“這個(gè)文字是次要的嗎？讓它更淺點(diǎn)?！?/span>

嘗試并堅(jiān)持兩種或三種顏色：主要內(nèi)容的深色（但不是黑色）（如文章標(biāo)題）；二級(jí)內(nèi)容的灰色（如文章發(fā)布日期）；輔助內(nèi)容的淺灰色（可能是頁(yè)腳中的版權(quán)聲明）

同樣，兩個(gè)字體權(quán)重通常足以用于UI工作：大多數(shù)文本的正常字體粗細(xì)（400或500，具體取決于字體）；要強(qiáng)調(diào)的文本較重的字體粗細(xì)（600或700）

在設(shè)計(jì)中，避免使用400以下的字體粗細(xì); 它們可以用于大標(biāo)題，但是在較小的尺寸下會(huì)變得難以閱讀。如果你正在考慮使用較細(xì)的字體來(lái)減弱某些文本，請(qǐng)使用較淺的顏色或較小的字體大小。

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

在白色背景上，使文本變成淺灰色是強(qiáng)調(diào)它的好方法，但這個(gè)顏色的字體在彩色背景上看起來(lái)并不那么友好。那是因?yàn)槲覀儗?shí)際上在白色背景上看到灰色字體的會(huì)產(chǎn)生降低對(duì)比度的效果。而使文本更接近背景顏色實(shí)際上有助于創(chuàng)建層次結(jié)構(gòu)，而不是使其變?yōu)闇\灰色。

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

1.減少白色文本的不透明度

使用白色文本并降低不透明度。這樣可以讓背景顏色稍微滲透，以不與背景沖突的方式去強(qiáng)調(diào)文本。

2.手工挑選基于背景顏色的顏色

當(dāng)背景是圖像或圖案時(shí)，或者當(dāng)降低不透明度使文本感覺(jué)太鈍或褪色時(shí)，這比減少不透明度更好。

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

改善陰影的樣式

不使用較大的模糊和展開(kāi)值來(lái)使框陰影更明顯，而是添加垂直偏移。它看起來(lái)更自然，因?yàn)樗M了一個(gè)從上面照射下來(lái)的光源，就像我們以前在現(xiàn)實(shí)世界中看到的一樣。

這適用于您可能在井或表格輸入上使用的插入陰影：

使用較少的邊框

當(dāng)你需要分離兩個(gè)元素時(shí)，嘗試避免突然看到邊框。雖然邊框是區(qū)分兩個(gè)元素的好方法，但它們不是唯一的方法，使用太多邊框可能會(huì)讓你的設(shè)計(jì)感到繁雜和混亂。

當(dāng)你下次需要解決方法時(shí)時(shí)，請(qǐng)嘗試以下其中一個(gè)想法：

1.使用box shadow

box shadow可以很好地實(shí)現(xiàn)像邊框元素那樣的功能，但也可以更精細(xì)，并且實(shí)現(xiàn)相同的目的而不會(huì)分散注意力。

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

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

3.增加額外的間距

有什么更好的方法來(lái)分離元素，而不只是簡(jiǎn)單地隔開(kāi)？將事物間隔得更遠(yuǎn)是不引入任何新UI的情況下創(chuàng)建元素組之間區(qū)別的好方法。

不要放大那些小圖標(biāo)

如果你正在設(shè)計(jì)一些可以使用一些大圖標(biāo)的東西（比如登陸頁(yè)面的“功能”部分），你可能會(huì)本能地使用免費(fèi)圖標(biāo)集，然后放大尺寸直到滿足你的需求。但是它們是矢量圖像，如果增加尺寸，難道質(zhì)量不會(huì)受到影響嗎？

雖然矢量圖像在增加尺寸時(shí)不會(huì)降低質(zhì)量，但在16-24px處繪制的圖標(biāo)在將它們放大到原本尺寸的3倍或4倍時(shí)會(huì)看起來(lái)非常不專業(yè)。因?yàn)檫@些圖缺乏細(xì)節(jié)，總有種不成比例的“矮胖”。

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

這使您可以使實(shí)際圖標(biāo)更接近其預(yù)期大小，同時(shí)仍然可以填充更大的空間。如果您有預(yù)算，您還可以使用設(shè)計(jì)用于較大尺寸的高級(jí)圖標(biāo)集，當(dāng)然是要錢的那種。

用有色彩的重點(diǎn)邊框改善平淡的設(shè)計(jì)

如果你不是一名平面設(shè)計(jì)師，你如何在你的設(shè)計(jì)中添加那些從美麗的攝影或彩色插圖中獲得的視覺(jué)效果？一個(gè)可以產(chǎn)生重大影響的簡(jiǎn)單技巧是為界面的某些部分添加色彩鮮艷的邊框，否則會(huì)感覺(jué)有點(diǎn)乏味。

例如，在警告消息的旁邊：

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

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

它不需要任何圖形設(shè)計(jì)人才來(lái)為您的UI添加彩色矩形，它可以大大有助于使您的網(wǎng)站更“設(shè)計(jì)”。

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

當(dāng)用戶可以在頁(yè)面上執(zhí)行多個(gè)操作時(shí)，很容易陷入純粹基于語(yǔ)義設(shè)計(jì)這些操作的陷阱。無(wú)論何時(shí)添加新按鈕，都可以選擇：

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

語(yǔ)義是按鈕設(shè)計(jì)的一個(gè)重要部分，但是有一個(gè)更常見(jiàn)的重要維度：層次結(jié)構(gòu)。

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

在設(shè)計(jì)這些操作時(shí)，在層次結(jié)構(gòu)中傳達(dá)它們的位置非常重要。

主要行動(dòng)應(yīng)該是明顯的。堅(jiān)固，高對(duì)比度的背景色在這里工作得很好。次要行動(dòng)應(yīng)該清楚但不突出。輪廓樣式或較低對(duì)比度的背景顏色是很好的選擇。三級(jí)行動(dòng)應(yīng)該是可發(fā)現(xiàn)的，但不引人注目。像鏈接一樣設(shè)置這些操作通常是最好的方法。

“破壞性的行動(dòng)怎么樣，他們不應(yīng)該總是變紅嗎？”

不必要！如果破壞性操作不是頁(yè)面上的主要操作，則最好給它進(jìn)行二級(jí)或三級(jí)按鈕處理。

最重要的是保存大，紅色和粗體樣式，以便當(dāng)負(fù)面操作實(shí)際上是界面中的主要操作時(shí)，就像在確認(rèn)對(duì)話框中一樣：

這7個(gè)方法希望對(duì)你以后的工作以及學(xué)習(xí)有幫助，希望同學(xué)們可以設(shè)計(jì)出自己滿意，領(lǐng)導(dǎo)滿意，甲方滿意的作品。