在UI設(shè)計中巧用留白的8個式例
時間：2023-09-05 07:12:01 | 來源：網(wǎng)站運營
時間：2023-09-05 07:12:01 來源：網(wǎng)站運營
在UI設(shè)計中巧用留白的8個式例：良好的UI設(shè)計是在界面的各個方面（從組件到頁面，從微觀到宏觀）的周到的留白運用。 如果正確使用空白，則結(jié)果是一個和諧，清晰易懂的界面，最重要的是，該界面有效且易于使用。
有關(guān)構(gòu)建自己的UX作品集的更多提示和建議，請關(guān)注我的專欄，持續(xù)輸出干貨，或查看文末的文章哦～
1 /遵循鄰近法則。
UI中元素之間的空白量指示元素之間如何關(guān)聯(lián)。該
感應(yīng)定律表明：
- 相關(guān)元素應(yīng)更近地隔開。相反，不相關(guān)的元素應(yīng)進(jìn)一步隔開。
- 相同“類型”的元素應(yīng)均勻間隔。
請遵循這些基本規(guī)則，以幫助用戶輕松組織和感知UI中的邏輯分組。
空白與文本的大小，粗細(xì)和顏色緊密配合，以傳達(dá)界面中元素的層次結(jié)構(gòu)。2 /從大量空白的基線開始。
讓你的設(shè)計呼吸。改善接口可用性的可靠方法是確保所有元素之間都有足夠的空白空間。
此處的表單控件之間的距離太近。此處的表單控件間隔適當(dāng)，因此在眼睛上更舒適。當(dāng)然也有例外（請參閱下面的最后一個技巧），但是對于大多數(shù)UI來說，擁有大量的空白通常比擁有過少的空白更好。
3 /使用空格將注意力集中在特定的設(shè)計元素上。
頁面上的信息較少和元素較少可以幫助使內(nèi)容更清晰，更集中，并吸引人們注意頁面上的信息和元素。
空格也可以是一種強調(diào)文本的有效方法。 它可以與提高文本大小或更改文本的顏色，大小寫或粗細(xì)結(jié)合使用，甚至可以替代。
?
?
?
這句話被空白包圍，就是一個很好的例子。?
?
?
?
變大或變亮不是吸引人們注意的唯一方法。 考慮到當(dāng)一切變得更大，更明亮，更重要時，實際上什么都沒有。
4 /在設(shè)計和實現(xiàn)中使用相同的方法來測量空間。
可以使用以下兩種方法之一來測量相鄰文本元素之間的間隔。
在相鄰的“邊界框”之間
大多數(shù)UI渲染引擎（例如，網(wǎng)頁上的文檔對象模型）都是通過這種方法來測量空間的。但是，此方法不是特別精確，因為每個邊界框的頂部和底部都存在“無法解決”的多余空間。
測量相鄰“邊界框”之間的空間。在相鄰瓶蓋高度之間
此方法更精確，但可能會使實現(xiàn)復(fù)雜化。
測量相鄰瓶蓋高度之間的空間。兩種方法都是合理的，但是要權(quán)衡取舍。這里重要的是
在設(shè)計和實現(xiàn)中都使用相同的空間測量方法。這是為了確?？梢詫⒃O(shè)計準(zhǔn)確地轉(zhuǎn)換為代碼。
5 /使用間距系統(tǒng)。
間距系統(tǒng)指定在設(shè)計中使用的一組可能的間距值。使用間距系統(tǒng)可以幫助給UI帶來一致性和和諧感。
在間隔系統(tǒng)中只需要幾個值。在此，使用四個不同的間距值，即12、16、32和56。間距系統(tǒng)是為了給空白空間設(shè)置調(diào)色板所要著色的顏色。 就像調(diào)色板一樣，間距系統(tǒng)會迫使您從一組受約束的選項中做出UI設(shè)計決策。 有了間距系統(tǒng)后，你只需在UI設(shè)計過程中考慮系統(tǒng)中的少數(shù)間距值。 這使設(shè)計迭代更快，更系統(tǒng)。
6 /避免使用看起來過于相似的間距值。
當(dāng)間距值在數(shù)學(xué)上不同但在視覺上過于相似時，用戶在UI中感知邏輯分組的方式可能會變得模棱兩可。對比很重要。如果你要使兩個間距值不同，則可以很明顯地看出它們實際上是不同的。
每個“動作行”上方和下方的空間過于相似，因此尚不清楚每個動作行應(yīng)與哪個視頻相關(guān)聯(lián)。每個“動作行”下方都有足夠的空間，有助于弄清每個視頻及其相關(guān)動作之間的關(guān)系。考慮在間距系統(tǒng)中具有更大的“分布”值，相鄰間距值之間在視覺上有明顯的差異。
這是一個非線性間隔系統(tǒng)，具有從一個間隔值到下一個間隔值的逐漸增大的增量。7 /隨著文本大小的增加，減小行高（即行距）。
在保持相同的比例行高的同時增加文本大小將導(dǎo)致每行文本之間的空白過多。相對于文本大小，標(biāo)題的比例行高通常應(yīng)小于正文的行高。
這兩行文字彼此相距太遠(yuǎn)。當(dāng)使用較小的行高時，兩行文本被視為一個視覺組。8 /在信息密集的UI中，除了空白以外，還需要依靠其他技術(shù)來傳達(dá)UI中的元素如何相互關(guān)聯(lián)。
- 在一組相關(guān)元素周圍添加微妙的填充或邊框。
- 使用一條線將垂直密集排列的相鄰元素分開?；蛘?，使用點間字符（“·”）分隔水平排列的相鄰元素。
- 更改文本的大小，大小寫，粗細(xì)或顏色，以關(guān)聯(lián)或區(qū)分UI元素。
通過減少空格，減小文本大小以及添加細(xì)微的水平線來確保相鄰行在視覺上彼此不同，從而提高信息密度。使接口的信息更加密集可以幫助提高其使用效率。請記住，信息密集的界面不一定需要變得混亂或不堪重負(fù)。
了解空白的一種有效方法（乃至一般而言，通常是UI設(shè)計）是創(chuàng)建“主副本”：使用您喜歡的界面從任何應(yīng)用程序或網(wǎng)站中選擇一個或多個屏幕，然后完整地重新創(chuàng)建它， 從頭開始??。您將深入了解已做出的許多小型設(shè)計決策，發(fā)現(xiàn)有趣的模式，并了解上述有關(guān)空白的技巧如何在精心設(shè)計的UI中實際發(fā)揮作用。
為什么界面“看起來正確”是有原因的。通過經(jīng)驗和實踐，你可以磨練關(guān)于如何在設(shè)計中應(yīng)用空白的視覺感和直覺。你的用戶將對此表示感謝。
譯自 Yuan Qing Lim https://uxdesign.cc/whitespace-in-ui-design-44e332c8e4a
有關(guān)構(gòu)建自己的UX作品集的更多提示和建議，請查看以下文章：- 20+優(yōu)質(zhì)作品集范例，藝術(shù)設(shè)計留學(xué)求職必看，收藏的都拿到offer啦
- 16個最佳UI / UX設(shè)計，以及可以從中可以學(xué)到什么？
- 用戶界面設(shè)計的一致性原理和標(biāo)準(zhǔn)
- UI設(shè)計的四個黃金法則
- 交互設(shè)計（用戶界面）10大可用性原則詳解
- 關(guān)于交互設(shè)計：學(xué)習(xí)和就業(yè)，邊看邊整理
- UX中視覺設(shè)計的5條原則
- 1篇搞定UI/UX設(shè)計中的顏色使用｜實用工具推薦
- 空間內(nèi)存：為什么它對UX設(shè)計很重要
- 6步創(chuàng)建UI設(shè)計新趨勢：玻璃擬態(tài)卡片 Glassmorphic Card
- UX（用戶體驗）寶典：如何正確設(shè)計和傳達(dá)錯誤消息
學(xué)長學(xué)姐成功申請經(jīng)驗：- Pratt全球最高獎Calarts,SAIC, OCAD（專業(yè)選擇、作品集準(zhǔn)備）
- 交互設(shè)計ACCD&CCA每年1.3w美元獎學(xué)金（專業(yè)選擇、作品集準(zhǔn)備、靈感來源）
最靠譜的作品集制作方案：
在線咨詢