
1對1定制服務(wù),PC端+手機端+小程序多端應(yīng)用
關(guān)于如何在設(shè)計中使用空白來改善更好的用戶體驗的5個最佳技巧
2021年04月13日瀏覽:
空白(或“負空間”)是頁面元素之間和周圍的空白區(qū)域 。盡管許多人可能認為它浪費了寶貴的屏幕空間,但空白是設(shè)計中必不可少的元素。
“空白應(yīng)被視為一種主動元素,而不是被動背景”
在本文中,設(shè)計將分享五個技巧,說明如何在設(shè)計中使用空白可以帶來更好的用戶體驗。
1.強調(diào)某些元素
優(yōu)先考慮特定內(nèi)容或交互元素對于設(shè)計師來說是相當(dāng)常見的任務(wù)。當(dāng)設(shè)計人員制作頁面時,他們通常希望將用戶的注意力引向主要對象(例如內(nèi)容部分或號召性用語按鈕)。雖然設(shè)計師可以使用許多不同的視覺方法來聚焦特定對象,但實現(xiàn)此目標(biāo)的最有效方法之一是使用該對象周圍的空白量。
您可以使用一個簡單的技巧來實現(xiàn)該目標(biāo)——移除對象周圍的所有元素。特定區(qū)域中其他元素的缺乏使該區(qū)域中的現(xiàn)有元素更加突出。用戶的注意力會轉(zhuǎn)移到有物體的區(qū)域,因為在該區(qū)域沒有其他東西可看。
物體周圍的空白越多,人們就越會被它吸引。
看看谷歌搜索主頁。一旦您登陸此頁面,您的注意力就會放在搜索表單上。它是使表單彈出的空白。
當(dāng)人們訪問谷歌搜索主頁時,他們的目光會立即被頁面的中心——谷歌的搜索表單所吸引。
2. 明確對象之間的關(guān)系
當(dāng)我們檢查一個新的布局時,我們很少將其視為獨立元素的集合。我們通??吹降氖菍ο蟮慕M合。這是因為我們的大腦天生就可以創(chuàng)建不同對象之間的關(guān)系模型。最常見的關(guān)系是基于對象之間的相對距離創(chuàng)建的。認知心理學(xué)中有一種稱為格式塔原則的理論,它規(guī)定彼此靠近的對象將表現(xiàn)為一個“單元”。
看看這張照片:
您很可能會看到兩組圓圈(4 和 6),而不是 10 個圓圈。這些圓圈都是相同的,唯一區(qū)別它們的是分隔它們的空格數(shù)量。
這條定律幾乎可以應(yīng)用于圖形和交互設(shè)計的任何部分。讓我們看看它在數(shù)字表單的上下文中是如何工作的。大多數(shù)用戶發(fā)現(xiàn)長表格勢不可擋。當(dāng)用戶看到一個包含太多問題的長表單時,他們需要花費額外的時間來了解需要哪些信息。但是設(shè)計人員可以通過使用空格將相關(guān)字段組合在一起來簡化用戶的任務(wù)。這樣一個簡單的過程可以極大地提高表單的理解能力——用戶將花費更少的時間來分析他們需要哪些數(shù)據(jù)輸入。
檢查下面的示例。兩種表格的問題數(shù)量相同,但右側(cè)的表格給用戶留下了更好的印象——空白使掃描表格更容易。
如果您設(shè)計的表單有七個以上的問題,最好將相關(guān)問題分組到邏輯部分中。使用空格分隔邏輯部分。
3.提高可讀性
內(nèi)容為王。內(nèi)容是人們首先訪問您的網(wǎng)站或安裝您的應(yīng)用程序的原因。這就是為什么考慮內(nèi)容的可讀性如此重要的原因。很多因素都會影響可讀性——字體大小、字體粗細、顏色對比度等等。但是還有另一個對內(nèi)容可讀性有直接影響的重要因素——空白。
行距(段落中每一行之間的間距)可以極大地提高文本內(nèi)容的易讀性和可讀性。當(dāng)行距太緊時,人們閱讀文本變得更加困難。一般來說,導(dǎo)言越大,讀者在閱讀時的體驗就越好。
如果您比較從左右示例中閱讀文本的體驗,很明顯,適當(dāng)?shù)拈g距有助于可讀性。圖片來源:蘋果
段落之間和文本塊周圍的空白量在內(nèi)容理解中也起著重要作用。一項研究發(fā)現(xiàn),在段落之間正確使用空格可以提高近 20% 的理解力。
4.在不使用可見分隔符的情況下劃分元素
設(shè)計人員經(jīng)常使用可見線來分隔頁面上的部分或單個組件。雖然這種方法在大多數(shù)情況下都能正常工作,但它有一個主要缺點——可見的分隔線增加了額外的視覺重量。太多可見的分隔線會使整體設(shè)計感覺很重。
可以按元素和間距而不是線條來劃分。更少的線條和其他可見的分隔線總是會給您的界面帶來更干凈的感覺。
使用不同大小的元素有效地創(chuàng)建了視覺層次結(jié)構(gòu)。
5.營造優(yōu)雅的感覺
我們上面回顧的所有示例都有一個共同點——它們描述了如何使用空格來提高產(chǎn)品的可用性。但是空白也可以用于純粹的審美目的。具有大量空白的布局可能會傳達一種奢華感。許多奢侈品牌使用空白作為主要工具,將他們銷售的產(chǎn)品置于聚光燈下。
勞力士網(wǎng)站使用空白將用戶注意力引向他們希望訪問者看到的產(chǎn)品。
結(jié)論
空白是一個強大的設(shè)計工具;大方的空白可以使幾乎任何類型的布局都變得簡單而吸引人。但與任何其他設(shè)計工具類似,空白可能很難掌握。掌握空白需要練習(xí)。設(shè)計已經(jīng)與各個行業(yè)合作過,并且有一個經(jīng)過驗證的產(chǎn)生結(jié)果的過程。
如果您正在籌備新建網(wǎng)站,設(shè)計樂于為您服務(wù),最重要的是,在您簽署或支付任何費用之前,我們會為您的新網(wǎng)站提供免費的自定義模型,這是最好的部分。