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

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

學(xué)習(xí)UI設(shè)計(jì)如何巧妙運(yùn)用留白技巧

發(fā)布時(shí)間：2024-04-09 13:04:23 瀏覽量：171次

優(yōu)秀的UI設(shè)計(jì)是在界面的所有尺度上，包括從組件到頁面，從微觀到宏觀，都要深思熟慮地使用留白。如果留白運(yùn)用得當(dāng)，能夠讓界面和諧、清晰，更重要的是有效和易用。


1.遵循相近法則

UI 中元素之間的留白量表明了元素之間的關(guān)系。根據(jù)鄰近法則：

1. 相關(guān)的元素之間的距離應(yīng)該更近。反之，不相關(guān)的元素應(yīng)該間隔較遠(yuǎn)。

2. 同一 "類型 "的元素應(yīng)該均勻地分開。

遵循這些基本規(guī)則，可以幫助用戶在你的 UI 中輕松地組織和感知邏輯分組。



白色空間與文本的大小、重量和顏色攜手合作，以表達(dá)界面中元素的層次結(jié)構(gòu)。


2.從增加頁面中的留白開始

讓你的設(shè)計(jì)有呼吸感。提高界面可用性的一個(gè)可靠方法是確保所有元素之間有適當(dāng)?shù)目瞻住?/span>



這里的表格控件間距太近



這里的表單控件間距適當(dāng)，因此在視覺上更舒適。


當(dāng)然，也有例外，但對于大多數(shù)用戶界面來說，使用大量的空白通常比沒什么空白要好。


3.使用空白將注意力集中在特定的設(shè)計(jì)元素上

減少頁面上的信息和元素，能夠讓頁面更清晰，并且讓用戶的注意力集中到頁面上的信息和元素上。


空白是一種能夠有效強(qiáng)調(diào)頁面中文本內(nèi)容的方式。它可以與調(diào)整文字大小，改變文字顏色和字重等結(jié)合使用，甚至替代以上方法。


這句被空白包圍的句子就是一個(gè)例子。


讓一個(gè)元素變大或變亮并不是吸引注意力的唯一方法?？紤]到當(dāng)所有的東西都更大、更亮、更重要時(shí)，其實(shí)所有內(nèi)容反而變得不重要了。


4.在設(shè)計(jì)和實(shí)現(xiàn)中使用相同的方法來測量空間

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


  • 相鄰 "邊界框"之間

這種方法是大多數(shù) UI 渲染引擎（例如網(wǎng)頁上的文檔對象模型）測量空間的方法。然而，這種方法并不是特別精確，因?yàn)樵诿總€(gè)邊界框的頂部和底部都有多余的空間 "未被計(jì)算"。



  • 測量相鄰 "界框 "之間的空間

相鄰“字母高度”之間

這種方法比較精確，但操作起來可能比較復(fù)雜。



測量相鄰“字母高度”之間的空間。


這兩種方法都是合理的，但有不同的取舍。重要的是，在設(shè)計(jì)和實(shí)現(xiàn)中都要使用相同的測量空間的方法。這是為了確保設(shè)計(jì)能夠準(zhǔn)確地轉(zhuǎn)化為代碼。


5.使用間距系統(tǒng)

間距系統(tǒng)規(guī)定了設(shè)計(jì)中可能使用的一組間距值。使用間距系統(tǒng)有助于為 UI 帶來一致性和和諧感。



在間距系統(tǒng)中，你只需要少量的數(shù)值。這里使用了四種不同的間距值，分別是12、16、32 和 56 。


間距系統(tǒng)對空白作用就像調(diào)色板對顏色的作用一樣。間距系統(tǒng)迫使你從一組有限的選項(xiàng)中做出 UI 設(shè)計(jì)決定。有了間距系統(tǒng)，在 UI 設(shè)計(jì)過程中，你只需要考慮系統(tǒng)中的少量間距值。這使得設(shè)計(jì)迭代更快、更系統(tǒng)。


6.避免使用視覺上過于相似的間距值

當(dāng)間距值在數(shù)字上不同，但在視覺上過于相似時(shí)，用戶對 UI 中邏輯分組的感知方式可能會變得模糊不清。對比很重要。如果你的意圖是讓兩個(gè)間距值不同，那么就要讓人很容易看出它們實(shí)際上是不同的。



每個(gè)操作，距離上下內(nèi)容的空間太過相似，不清楚每個(gè)動作行應(yīng)該與哪個(gè)視頻相關(guān)聯(lián)。



在每個(gè)操作下面有足夠的空間，有助于明確每個(gè)視頻及其相關(guān)動作之間的關(guān)系。

考慮在你的間距系統(tǒng)中，有更寬的數(shù)值 "分布"，相鄰間距值之間有明顯的視覺差異。



這是一個(gè)非線性間距系統(tǒng)，從一個(gè)間距值到下一個(gè)間距值的增量越來越大。


7.隨著文字大小的增加，降低行高

在保持相同比例的行高的同時(shí)增加文字大小，會導(dǎo)致每行文字之間有太多的白色空間。相對于文字大小，標(biāo)題的行高比例一般應(yīng)小于正文的行高。



兩行文字相隔太遠(yuǎn)



當(dāng)使用較小的行高時(shí)，兩行文字會被認(rèn)為是一個(gè)單一的視覺組。


8.在信息密集型的 UI 中，除了空白之外，還要依靠其他技術(shù)來表達(dá) UI 中的元素之間的關(guān)系


比如說：

  • 在一組相關(guān)元素周圍添加一個(gè)微妙的填充或邊框。
  • 使用一條線來分隔垂直方向緊密堆積的相鄰元素?；蛘?，使用一個(gè)穿插字符（"-"）來分隔水平排列的相鄰元素。
  • 改變文本的大小、大小寫、重量或顏色，以此來關(guān)聯(lián)或區(qū)分 UI 元素。



通過減少空白、縮小文字大小和增加一條微妙的水平線來增加信息密度，以確保相鄰的行在視覺上被認(rèn)為是彼此不同的。


使界面的信息密度更高，可以幫助提高界面的使用效率。請記住，一個(gè)信息密集的界面并不一定會讓人感覺到雜亂無章或不知所措。


學(xué)習(xí)空白的一個(gè)有效方法是創(chuàng)建一個(gè) "母版"：從任何應(yīng)用或網(wǎng)站中挑選一個(gè)或多個(gè)你所欣賞的界面，從頭開始重新制作它的全部內(nèi)容。你將深入了解許多小的設(shè)計(jì)細(xì)節(jié)，發(fā)現(xiàn)有趣的模式，并看到上述關(guān)于空白的提示如何在精心設(shè)計(jì)的用戶界面中實(shí)際發(fā)揮作用。


一個(gè)界面 "看起來是對的 "是有原因的。通過經(jīng)驗(yàn)和實(shí)踐，你可以磨練你的視覺感受和直覺，了解如何在你的設(shè)計(jì)中應(yīng)用空白。你的用戶會為此而感動的。

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

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