火星網(wǎng)校
UI設(shè)計中正確運用留白的技巧，讓你的設(shè)計更高級更清晰
發(fā)布時間：2024-05-16 18:53:45 瀏覽量：175次
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)，相關(guān)元素應(yīng)相距較近，不相關(guān)的元素應(yīng)隔開，相同“類型”的元素應(yīng)均勻間隔。請遵循這些基本規(guī)則，以幫助用戶輕松組織和感知UI中的邏輯分組。
空白與文本的大小、粗細(xì)和顏色緊密配合，以傳達(dá)界面中元素的層次結(jié)構(gòu)。
#02 確定留白基線
基線可以讓你的設(shè)計保持疏松和呼吸感，改善界面可用性的可靠方法是，確保所有元素之間都有足夠的留白空間。
此處的控件間隔適當(dāng)，因此效果更舒適。對于大多數(shù)UI來說，擁有正確的留白通常比沒有留白要美觀、工整很多。
#03 集中特定設(shè)計元素
頁面上較少的信息和元素可以讓界面清楚和突出重點，并讓用戶注意到顯示在頁面上的信息和元素。留白也是一種強調(diào)文本的有效方法，它可以與提高文本大小或更改文本的顏色、大小寫或粗細(xì)結(jié)合使用，甚至可以替代。這句話被空白包圍著，就是一個很好的例子。
#04 統(tǒng)一測量空間方法
相鄰文本元素之間的間距，可以通過在相鄰的“邊界框”之間或在相鄰文本高度之間進(jìn)行測量。在設(shè)計和實現(xiàn)中使用相同的空間測量方法，可以確保將設(shè)計準(zhǔn)確地轉(zhuǎn)換為代碼。
在間距系統(tǒng)中只需要幾個值。上圖案例中使用四個不同的間距值，即12、16、32和56，構(gòu)建了間距系統(tǒng)。間距系統(tǒng)會迫使你從一組受約束的選項中做出UI設(shè)計決策，使設(shè)計迭代更快，更系統(tǒng)。
#05 使用間距系統(tǒng)
間距系統(tǒng)指定要在設(shè)計中使用的一組視覺觀感較好的間距值，使用間距系統(tǒng)可以幫助給UI帶來一致性和和諧感。
當(dāng)間距值在數(shù)學(xué)上不同，但在視覺上過于相似時，用戶在UI中感知邏輯分組的方式可能會變得模棱兩可。對比很重要！
這是一個非線性間隔系統(tǒng)，具有從一個間隔值到下一個間隔值的逐漸增大的增量。
#06 避免相似間距值
當(dāng)間距值在數(shù)學(xué)上不同，但在視覺上過于相似時，用戶在UI中感知邏輯分組的方式可能會變得模棱兩可。對比很重要！如果你要使兩個間距值不同，則需要很明顯地看出它們實際上是不同的。
每個“動作行”下方都有足夠的空間，有助于闡明每個視頻及其相關(guān)動作之間的關(guān)系?？紤]使間距系統(tǒng)中的值“散布”區(qū)域更寬，這可以使得相鄰間距值之間在視覺上有明顯的差異。
當(dāng)使用較小的行高時，兩行文本被視為一個視覺組。
#07 適當(dāng)調(diào)整行距
UI設(shè)計中，不需要可以保持相同的比例行高，因為增加文本大小將導(dǎo)致字號較大的每行文本之間有太多空白。在實際操作中遵循字號越大，比例行高越小的原則，比如大標(biāo)題的比例行高通常應(yīng)小于正文的行高。
這兩行文字彼此相距太遠(yuǎn)。
#08 適元素關(guān)聯(lián)
在信息密集的UI中，除了空白以外，還需要依靠其他技術(shù)來傳達(dá)界面中的元素如何相互關(guān)聯(lián)，例如：在一組相關(guān)元素周圍添加填充或邊框；使用一條線將垂直排列緊密的相鄰元素分開，或者使用（“·”）分隔水平排列的相鄰元素；更改文本的大小、大小寫、粗細(xì)或顏色，以關(guān)聯(lián)或區(qū)分UI元素。
通過減少空格、減小文本大小以及添加細(xì)微的水平線來確保相鄰行在視覺上彼此不同，提高信息密度。使信息更加密集可以提高其使用效率，信息密集的界面只要通過合理的信息分層，不一定會令人感到混亂或不堪重負(fù)。
了解空白的一種有效方法是臨摹練習(xí)：從你喜歡的設(shè)計中選擇一個或多個界面，然后完整地重新創(chuàng)建它。通過這種練習(xí)，你將深入了解許多設(shè)計中容易忽視的小細(xì)節(jié)，并了解空白技巧如何在精心設(shè)計的UI中發(fā)揮作用。
為什么界面“看起來正確”背后一定是有原因的，通過經(jīng)驗和實踐，可以磨練如何在設(shè)計中應(yīng)用留白的視覺感和直覺。
火星時代教育，致力于數(shù)字藝術(shù)教育領(lǐng)域，提供游戲設(shè)計、動畫培訓(xùn)、影視后期等課程。想了解更多？點擊咨詢
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 10個免費學(xué)習(xí)UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
4. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 設(shè)計中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
-
8. 零基礎(chǔ)學(xué)UI設(shè)計要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機會。
-
9. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
10. 武漢UI設(shè)計培訓(xùn)班費用怎么樣？想學(xué)UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓(xùn)班的費用是多少嗎？不知道學(xué)UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓(xùn)班的學(xué)費價格以及學(xué)習(xí)內(nèi)容。
最新文章
