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

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

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

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



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

以下是可以用來改善設(shè)計的七個設(shè)計小技巧

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


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

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


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

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




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


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


在白色背景上使用淺灰色的文本色是弱化它的好方法，但是在彩色的背景上并不好，因為我在白色上看到淺灰色的字其實是降低了對比度，所以被弱化。

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




在處理彩色背景時，有兩種方法可以減少對比度:

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

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

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

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

03、抵消陰影



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

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




04、使用更少的邊界


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

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

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

1. 使用方框陰影

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




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

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




3.添加額外的間距

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




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


我們經(jīng)常會在一些icon網(wǎng)站上下載一些icon來使用，有時候因為畫面需要，我們會將他們放大到很大的尺寸，直到可以填充滿你需要的畫面。因為他們都是矢量的icon，所以我們可以無線把他們放大。

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




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




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

06、 為邊框添加一條色彩



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

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



突出顯示活動導(dǎo)航項:



整個布局的頂部:



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

07、 不是每個按鈕都需要背景色


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

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




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

這是一個刪除的按鈕，因為需要設(shè)計成紅色

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

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

在設(shè)計這些操作按鈕時，理清楚它們在層次結(jié)構(gòu)中的位置非常重要。

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





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

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




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




感謝你的閱讀，希望對大家有幫助

本文由「像素有毒」公眾號翻譯撰寫,轉(zhuǎn)載請注明出處，謝謝

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定