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

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

UI交互設(shè)計中正確使用留白的技巧，如何速提升界面設(shè)計高級感

發(fā)布時間：2024-04-09 20:37:12 瀏覽量：179次

Less is more 是20世紀(jì)30年代著名的建筑師路德維希·密斯·凡德羅說過的一句話，意思是“少即多”這是一種提倡簡單，反對過度裝飾的設(shè)計理念。簡單的東西往往帶給人們的是更多的享受。


同樣少即是多也是一種高級的簡約的的UI設(shè)計風(fēng)格，這種思想指導(dǎo)下的界面設(shè)計，不會一味地要求設(shè)計師在界面上堆積元素，而是會從界面的各個方面（從組件到頁面，從微觀到宏）考慮如何恰當(dāng)?shù)丶尤肟瞻椎膽?yīng)用。



學(xué)會正確地使用留白，可以獲得一個和諧、清晰易讀的界面。更重要的是，這種思路下得到的界面，通常有效且易于使用。通過日常的教學(xué)，UXD老師為同學(xué)們總結(jié)了7個有用的設(shè)計留白技巧，包含：


01.遵循鄰近法則02.確定留白基線03.集中特定設(shè)計元素04.統(tǒng)一的測量空間方法05.使用間距系統(tǒng)06.避免相似間距值07.適當(dāng)調(diào)整行距


下面我們就逐一帶大家了解每個技巧的具體使用方法，幫助同學(xué)們找到界面設(shè)計過程中的節(jié)奏感。


#01遵循鄰近法則

UI中元素之間的空白量指示元素之間如何關(guān)聯(lián)，該定律表明：
1.相關(guān)元素應(yīng)相距較近，相反，不相關(guān)的元素應(yīng)隔開。2.相同“類型”的元素應(yīng)均勻間隔。
請遵循這些基本規(guī)則，以幫助用戶輕松組織和感知UI中的邏輯分組。


空白與文本的大小，粗細(xì)和顏色緊密配合，以傳達(dá)界面中元素的層次結(jié)構(gòu)。



#02確定留白基線


基線可以讓你的設(shè)計保持疏松和呼吸感，改善界面可用性的可靠方法是，確保所有元素之間都有足夠的留白空間。


此處的控件之間的距離太近。


此處的控件間隔適當(dāng)，因此效果更舒適。
對于大多數(shù)UI來說，擁有正確的留白通常比沒有留白要美觀、工整很多。


#03集中特定設(shè)計元素


頁面上較少的信息和元素可以讓界面清楚和突出重點，并讓用戶注意到顯示在頁面上的信息和元素。
留白也可以是一種強(qiáng)調(diào)文本的有效方法，它可以與提高文本大小或更改文本的顏色、大小寫或粗細(xì)結(jié)合使用，甚至可以替代。.
.
.
這句話被空白包圍著，就是一個很好的例子。...使元素變大或變亮并不是吸引人們注意的唯一方法，留白反而是即可以保證設(shè)計精致又能突出設(shè)計重點的方法。


#04統(tǒng)一測量空間方法


相鄰文本元素之間的間距，可以通過以下兩種方法之一進(jìn)行測量。

1.在相鄰的“邊界框”之間


大多數(shù)UI渲染引擎（例如，網(wǎng)頁上的文檔對象模型）都是通過這種方法來測量相鄰元素之前的間距的。但是此方法不是特別精確，因為每個邊界框的頂部和底部都存在多余空間。


測量相鄰“邊界框”之間的空間。

2.在相鄰文本高度之間


下面的這種測量元素間真實間隔的方法更精確，但可能實現(xiàn)起來比較復(fù)雜。


測量相鄰文本高度之間的空間。
兩種方法都是合理的，但是要權(quán)衡取舍。這里需要強(qiáng)調(diào)的是，在設(shè)計和實現(xiàn)中都使用相同的空間測量方法，這樣可以確保將設(shè)計準(zhǔn)確地轉(zhuǎn)換為代碼。


#05使用間距系統(tǒng)


間距系統(tǒng)指定要在設(shè)計中使用的一組視覺觀感較好的間距值，使用間距系統(tǒng)可以幫助給UI帶來一致性和和諧感。



在間距系統(tǒng)中只需要幾個值。上圖案例中使用四個不同的間距值，即12、16、32和56，構(gòu)建了間距系統(tǒng)。


間距系統(tǒng)會迫使你從一組受約束的選項中做出UI設(shè)計決策。有了間距系統(tǒng)后，你只需在UI設(shè)計過程中考慮系統(tǒng)中的少數(shù)間距值，這使設(shè)計迭代更快，更系統(tǒng)。



#06避免相似間距值

當(dāng)間距值在數(shù)學(xué)上不同，但在視覺上過于相似時，用戶在UI中感知邏輯分組的方式可能會變得模棱兩可。對比很重要！如果你要使兩個間距值不同，則需要很明顯地看出它們實際上是不同的。



每個“動作行”上方和下方的空間太相似，因此尚不清楚每個動作行應(yīng)與哪個視頻相關(guān)聯(lián)。



每個“動作行”下方都有足夠的空間，有助于闡明每個視頻及其相關(guān)動作之間的關(guān)系。
考慮使間距系統(tǒng)中的值“散布”區(qū)域更寬，這可以使得相鄰間距值之間在視覺上有明顯的差異。



這是一個非線性間隔系統(tǒng)，具有從一個間隔值到下一個間隔值的逐漸增大的增量。
#07適當(dāng)調(diào)整行距


UI設(shè)計中，不需要可以保持相同的比例行高，因為增加文本大小將導(dǎo)致字號較大的每行文本之間有太多空白。在實際操作中遵循字號越大，比例行高越小的原則，比如大標(biāo)題的比例行高通常應(yīng)小于正文的行高。


這兩行文字彼此相距太遠(yuǎn)。


當(dāng)使用較小的行高時，兩行文本被視為一個視覺組。


#08適元素關(guān)聯(lián)


在信息密集的UI中，除了空白以外，還需要依靠其他技術(shù)來傳達(dá)界面中的元素如何相互關(guān)聯(lián)，例如：


?在一組相關(guān)元素周圍添加填充或邊框；?使用一條線將垂直排列緊密的相鄰元素分開，或者，使用（“·”）分隔水平排列的相鄰元素；?更改文本的大小、大小寫、粗細(xì)或顏色，以關(guān)聯(lián)或區(qū)分UI元素。


通過減少空格，減小文本大小以及添加細(xì)微的水平線來確保相鄰行在視覺上彼此不同，從而提高信息密度。
使信息更加密集可以提高其使用效率，信息密集的界面只要通過合理的信息分層，不一定會令人感到混亂或不堪重負(fù)。


了解空白的一種有效方法（一般而言指UI設(shè)計）是臨摹練習(xí)：從你喜歡的設(shè)計中選擇一個或多個界面，然后完整地重新創(chuàng)建它。通過這種臨摹練習(xí)，你將深入了解許多這些優(yōu)秀的設(shè)計中容易讓人忽視的小細(xì)節(jié)，并了解上述有關(guān)空白的技巧如何在精心設(shè)計的UI中實際發(fā)揮作用。


為什么界面“看起來正確”背后一定是有原因的，通過經(jīng)驗和實踐，可以磨練如何在設(shè)計中應(yīng)用留白的視覺感和直覺。

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗證碼
x

同學(xué)您好！

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