激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

UI設(shè)計(jì)須掌握的7個(gè)設(shè)計(jì)技巧

發(fā)布時(shí)間：2024-01-24 13:20:25 瀏覽量：243次



大家在日常的計(jì)中，都不可避免地遇到需要做出視覺(jué)設(shè)計(jì)決策的情況，這個(gè)時(shí)候，我們可以通過(guò)一些技巧來(lái)提升你的設(shè)計(jì)

以下是可以用來(lái)改善設(shè)計(jì)的七個(gè)設(shè)計(jì)小技巧

01、用顏色和字體粗細(xì)區(qū)分層次


在UI設(shè)計(jì)的過(guò)程中，設(shè)計(jì)師有時(shí)候會(huì)太過(guò)依賴字體的大小來(lái)控制設(shè)計(jì)的主次結(jié)構(gòu)。

比如這段文字很重要，因此字體要大這段文字比較次要，因此文字要小


設(shè)計(jì)畫(huà)面的主次結(jié)構(gòu)中，決定文字字體大小的時(shí)候不能單單只看內(nèi)容，而是要放到整個(gè)設(shè)計(jì)當(dāng)中去考量與思考，因?yàn)橛袑?duì)比才產(chǎn)生畫(huà)面中的主次之分。

  • 在顏色的選擇上，我們可以使用3種顏色來(lái)進(jìn)行主次的區(qū)




  • 標(biāo)題 / 重要的內(nèi)文信息，通過(guò)以加粗的樣式呈現(xiàn)
  • 輔助信息 / 次要信息，通常以較細(xì)的字體呈現(xiàn)


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


在白色背景上使用淺灰色的文本色是弱化它的好方法，但是在彩色的背景上并不好，因?yàn)槲以诎咨峡吹綔\灰色的字其實(shí)是降低了對(duì)比度，所以被弱化。

在日常設(shè)計(jì)中，使文本色更接近背景顏色實(shí)際上有助于創(chuàng)建層次結(jié)構(gòu)。




在處理彩色背景時(shí)，有兩種方法可以減少對(duì)比度:

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

使用白色文字，降低不透明度。這樣可以讓背景色滲透一點(diǎn)，在不與背景沖突的情況下降低文本的強(qiáng)調(diào)度。

2. 根據(jù)背景顏色手動(dòng)選擇一種顏色

當(dāng)你的背景是一幅圖像或圖案時(shí)，或者當(dāng)降低不透明度使文本感覺(jué)太枯燥或被洗掉時(shí)，使用手動(dòng)選擇效果會(huì)更好。

03、抵消陰影



不要使用很大的陰影模糊和擴(kuò)展值來(lái)讓陰影更明顯，嘗試添加一個(gè)垂直（Y值）的偏移量。這樣讓它看起來(lái)更自然，因?yàn)樗M了一個(gè)光源從上面照下來(lái)，就像在真實(shí)世界中受到光源投影的樣子。

這適用于嵌入陰影，比如下圖的輸入框的陰影:




04、使用更少的邊界


當(dāng)你需要在兩個(gè)元素之間創(chuàng)建分隔時(shí)，請(qǐng)盡量避免設(shè)計(jì)觸及邊界。

雖然邊框是區(qū)分兩個(gè)元素的好方法，但這并不是唯一的方法，使用太多邊框會(huì)讓您的設(shè)計(jì)感覺(jué)繁忙和混亂。

下次當(dāng)你發(fā)現(xiàn)自己要到設(shè)計(jì)邊界時(shí)，不妨試試下面的方法:

1. 使用方框陰影

陰影可以很好地勾勒元素的輪廓，就像描邊的邊框一樣，但陰影可以更真實(shí)貼近現(xiàn)實(shí)的物理情況，在不分散注意力的情況下實(shí)現(xiàn)相同的目標(biāo)。




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

給相鄰的元素稍微不同的背景顏色，并嘗試把線條去除。




3.添加額外的間距

除了簡(jiǎn)單地增加元素之間的分離之外，還有什么更好的方法來(lái)區(qū)分不用的區(qū)域呢?在不引入任何新元素的情況下，將組塊之間的距離拉大，可以幫助我們區(qū)分開(kāi)不用的內(nèi)容。




05、不要過(guò)度放大沒(méi)有細(xì)節(jié)的圖標(biāo)


我們經(jīng)常會(huì)在一些icon網(wǎng)站上下載一些icon來(lái)使用，有時(shí)候因?yàn)楫?huà)面需要，我們會(huì)將他們放大到很大的尺寸，直到可以填充滿你需要的畫(huà)面。因?yàn)樗麄兌际鞘噶康膇con，所以我們可以無(wú)線把他們放大。

雖然矢量圖像的質(zhì)量不會(huì)隨著尺寸的增大而下降，但是當(dāng)你把它們放大到原來(lái)的3倍或4倍時(shí)，16-24px繪制的圖標(biāo)看起來(lái)就不那么專(zhuān)業(yè)了。缺乏細(xì)節(jié)。




如果你只有小圖標(biāo)，可以嘗試著把它們包圍在另一個(gè)形狀，給形狀一個(gè)背景色




這樣可以使實(shí)際圖標(biāo)更接近其預(yù)期大小，同時(shí)仍然填充更大的空間。

06、 為邊框添加一條色彩



如何使一個(gè)簡(jiǎn)單的設(shè)計(jì)更加彩色呢？下面這個(gè)簡(jiǎn)單的技巧可以給到你答案，那就是在界面的某些部分添加色彩鮮艷的邊框，這樣可以使界面不這么乏味平淡，增添色彩。

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



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



整個(gè)布局的頂部:



在你的設(shè)計(jì)中添加一個(gè)彩色矩形并不需要任何的思考，它可以讓你的視覺(jué)高更加出彩在色彩的選擇上，可以使用公司的品牌色或者輔助色。

07、 不是每個(gè)按鈕都需要背景色


當(dāng)用戶可以在一個(gè)頁(yè)面上執(zhí)行多個(gè)操作時(shí)，很容易陷入基于按鈕含義來(lái)定義按鈕顏色的陷阱

Bootstrap這樣的框架鼓勵(lì)你這樣做，當(dāng)你添加一個(gè)新按鈕時(shí)，它會(huì)給你一個(gè)語(yǔ)義風(fēng)格的菜單供你選擇:




這是一個(gè)確定按鈕，因此按鈕要設(shè)計(jì)成綠色

這是一個(gè)刪除的按鈕，因?yàn)樾枰O(shè)計(jì)成紅色

按鈕的文案是決定按鈕設(shè)計(jì)的重要組成部分，但還有一個(gè)更重要的維度通常容易被遺忘:層次結(jié)構(gòu)。

頁(yè)面上的每個(gè)動(dòng)作都位于一個(gè)重要的結(jié)構(gòu)關(guān)系之中。大多數(shù)頁(yè)面只有一個(gè)真正的主操作按鈕、兩個(gè)不太重要的次要操作按鈕和很少使用的第三個(gè)操作按鈕。

在設(shè)計(jì)這些操作按鈕時(shí)，理清楚它們?cè)趯哟谓Y(jié)構(gòu)中的位置非常重要。

1、主要按鈕應(yīng)該是顯而易見(jiàn)的。純色、高對(duì)比度的背景色在這里效果非常好。2、次要按鈕應(yīng)明確，但不應(yīng)突出。輪廓樣式或低對(duì)比度的背景色都是不錯(cuò)的選擇。3、三級(jí)按鈕應(yīng)該是可發(fā)現(xiàn)的，但不應(yīng)該太突兀。將這些操作樣式化為鏈接通常是最好的方法。





“那么刪除和退出等按鈕?它們不應(yīng)該總是紅色的嗎?”

答案是不一定的!如果刪除或退出按鈕不是頁(yè)面上的主要操作，那么最好對(duì)其進(jìn)行次要或三級(jí)按鈕處理。




如下圖，當(dāng)時(shí)刪除按鈕作為界面的主要按鈕和動(dòng)作時(shí)，才需對(duì)它進(jìn)行設(shè)計(jì)。




感謝你的閱讀，希望對(duì)大家有幫助

本文由「像素有毒」公眾號(hào)翻譯撰寫(xiě),轉(zhuǎn)載請(qǐng)注明出處，謝謝

熱門(mén)課程推薦

熱門(mén)資訊

請(qǐng)綁定手機(jī)號(hào)

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動(dòng)，老師會(huì)在第一時(shí)間與您取得聯(lián)系，請(qǐng)保持電話暢通！
確定