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

UI設計中使用留白的最佳方法

發(fā)布時間：2024-04-09 09:28:00 瀏覽量：194次

UI設計中的留白

使用留白的最佳方法

留白就像配角，他們的職責是讓明星脫穎而出。

在交互設計中，空白或“負空間”是指設計或頁面布局元素之間的空白，即在網(wǎng)頁中的段落、圖片、按鈕、圖標和其他項目之間的空白。它經(jīng)常被忽略和忽視。

盡管它的名字里有“白”，但是留白不僅僅是白色。它可以是任何顏色、 紋理、 圖案或甚至背景圖像。

設計師、 客戶和經(jīng)理之間的爭議

設計師愛它，網(wǎng)站所有者想要填滿它。留白似乎是設計的一個最有爭議的方面?！狿aul Boag

設計師相信用優(yōu)雅的留白能夠確保用戶體驗的質(zhì)量。不幸的是，很多客戶和經(jīng)理把留白視為空間浪費。

這篇文章將要討論的是如何巧妙地使用留白，并且教你如何在和設計團隊一起工作的時候養(yǎng)成留白的習慣。

在首屏中使用留白的最佳設計方法

事實上，留白在不同需求中概念是不同的。例如，著陸頁上可能有大量的留白，以便將指引按鈕（“下載”或“了解更多”等）或其他主要信息突出。

蘋果官方網(wǎng)站是最好的例子

另一方面，由于還有很多需要精簡的內(nèi)容，電商類網(wǎng)站并沒有那么多可以留白的地方。

雖然不會像其他案例中使用地那么頻繁，但這類網(wǎng)站仍需要留白。

不只是Bill Blass這類時尚的電商類網(wǎng)站，像沃爾瑪這種大型電商網(wǎng)站也需要利用留白保持精美，使產(chǎn)品信息更清晰、易讀、吸引人。

簡而言之，聯(lián)系上下文我們能夠明白，留白的應用沒有固定的規(guī)則。但是有一些小技巧我們可以記?。?/p>

1.給頁面分配不多于15個注意點

設計師 Paul Boag建議你可以將頁面的注意點限制在15個以內(nèi)。

他說：每當你向頁面里添加一個元素時，消耗一個關注點。如果屏幕中的一個元素比另一個元素更重要，則需要向它分配格外的注意，使它脫引而出。

只提供有限注意點的結(jié)果就是：很明顯你不能說所有的東西都要放在頁面上，空白不需要被排除在等式之外。

讓我們用MailChimp 網(wǎng)站舉個例子 （讓我告訴你為什么我個人很喜歡他們的網(wǎng)站！）

這是14個用戶關注點在頁面上的放置方式，任何額外新增的元素只應取代較其他次要的東西。這是確?？隙ú粫陧撁胬锶胩鄡?nèi)容的一種方法。

2.優(yōu)先考慮易讀性和可讀性

在開始設計前先建立一個界面元素庫，它是你的界面片段和元素的合集。這不僅為一個健全的設計系統(tǒng)奠定了基礎，促進了一致性，而且可以告知設計師界面內(nèi)容的范圍。

下一步是創(chuàng)建大致內(nèi)容框架，用來評估易讀性（如何使用戶能辨別字母和單詞）和可讀性（如何使用戶掃描到內(nèi)容）對空間的要求。

在優(yōu)化文本內(nèi)容的段落邊距和行間距時，有兩件事情需要牢記。調(diào)整行間距可以大大提高文本正文的易讀性。一般來說，越大的行間距在閱讀時會給用戶提供越好的閱讀體驗，但是行間距太大時會打破頁面的統(tǒng)一，使設計斷開。再次，調(diào)整間距只在尋找完美的平衡。

Medium在這方面是最好的例子

3.打破留白

使用對比色、不同字體大小和不對稱的白色空間將額外的樣式添加到設計中。留白是靈活性的設計元素，它會影響用戶對周圍所有元素的感知。

當有疑問時，我總是看看其他設計師如何在設計中使用留白。Awwwards是我個人最喜歡的靈感來源。

4.確認留白是否符合要求

美觀只是留白的一個方面，更重要的是使主要內(nèi)容和指引按鈕突出。一個設計是否做到這點，只能通過用戶測試來驗證。

CanvasFlip是一個可以幫助設計師驗證他們的設計是否達到了預期的效果的工具!對于一個設計師來說，一個具有高交互作用的熱圖顯然是一個A +的成績單：）。

Designed by https://bouguessa.com | 使用 CanvasFlip測試

結(jié)論

留白并不是指一張空白的畫布，它是一個強大的設計工具。留白可能很難掌握:它是科學和藝術同時的應用。真正了解應該怎樣在設計中較好地使用留白需要練習。熟能生巧（The more you design, the more you’ll learn）。

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

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