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

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

UI設(shè)計(jì)中使用留白的最佳方法

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

UI設(shè)計(jì)中的留白

使用留白的最佳方法

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

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

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

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

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

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

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

在首屏中使用留白的最佳設(shè)計(jì)方法

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

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

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

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

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

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

1.給頁面分配不多于15個(gè)注意點(diǎn)

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

他說：每當(dāng)你向頁面里添加一個(gè)元素時(shí)，消耗一個(gè)關(guān)注點(diǎn)。如果屏幕中的一個(gè)元素比另一個(gè)元素更重要，則需要向它分配格外的注意，使它脫引而出。

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

讓我們用MailChimp 網(wǎng)站舉個(gè)例子 （讓我告訴你為什么我個(gè)人很喜歡他們的網(wǎng)站?。?/p>

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

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

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

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

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

Medium在這方面是最好的例子

3.打破留白

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

當(dāng)有疑問時(shí)，我總是看看其他設(shè)計(jì)師如何在設(shè)計(jì)中使用留白。Awwwards是我個(gè)人最喜歡的靈感來源。

4.確認(rèn)留白是否符合要求

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

CanvasFlip是一個(gè)可以幫助設(shè)計(jì)師驗(yàn)證他們的設(shè)計(jì)是否達(dá)到了預(yù)期的效果的工具!對于一個(gè)設(shè)計(jì)師來說，一個(gè)具有高交互作用的熱圖顯然是一個(gè)A +的成績單：）。

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

結(jié)論

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

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

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