當界面信息點爆滿時,如何利用“間距設計”把內容講清楚
編輯導語:在日常設計中,對于界面信息點密集時,我們需要對每個元素的設計掌握得當,元素的間距同樣也需要我們深思熟慮。本文從幾點講清楚如何利用“間距設計”把內容講清楚,讓整個界面的信息傳達更加高效,一起來看看。
優秀的界面設計體現在每個維度。
除了對元素的設計,元素的間距也同樣需要經過我們的深思熟慮。
如果我們處理好界面中的各種間距和留白區域,整個界面的信息傳達將更高效、便于人們使用。
一、遵循接近法則
界面中的元素間距可展示出元素之間的關聯性。
如下圖,當我們的設計遵循接近法則時,更便于用戶理解界面中的邏輯關系。
(留白區域與字號、字重和顏色密切相關,它能傳達界面中元素的結構層級)
該如何做:相關聯的元素間隔更小,反之亦然;同一類型的元素應均分間隔。
二、利用留白強調
留白也是一種有效的強調方式,它與其他吸引用戶注意力的方式如:加大字號、修改顏色、文字加粗等具有同樣的效果,甚至可以作為一種替代的方式。
比如現在對這句話的留白就是一個例子。
其實讓某個元素變得更大或使用顏色去強化它,并不是吸引用戶注意力的唯一方法。
試想想,當所有內容都變得更大、更高亮的時候,其實什么都突出不了。
該如何做:通過留白可以讓用戶把注意力集中在特定內容上,而不是一味地通過加大、高亮的形式突出內容。
三、統一測量方法
通常,文本之間的間距可以用兩種方法來測量:
(帶有“邊界框”的文本)
(實際行高的文本)
1. 以“邊界框”為測量基準
在設計師使用的軟件中,文本會帶有這種邊界框,它在文本的頂部和底部還留有一定的空間,這導致邊界框的高度遠大于實際的文本高度而引起測量誤差。
2. 以實際行高為測量基準
這種方法雖然更精確,但可能開發實現的時候會更復雜化。
該如何做:確保設計和開發都使用相同的測量方法,才能讓設計得到更好的還原。
四、使用柵格系統
柵格系統指在設計中使用一組具有遞進關系的間距值,為界面帶來統一協調的感覺。
(在柵格系統中只需要設定少量的值)
該如何做:柵格系統可以讓你只需在有限選項中做出設計決策,這使得設計迭代更快、更系統化。
五、避免相似間距
當不同間隔的數值差距過小時,用戶將很難感知到界面中的邏輯分組關系。
如果你希望區分兩個不同的模塊,那么不止是要設置不同的間距,你還需要讓這些間距的差異能讓人明確地感知到。
(每行按鈕的上下間距差異過小,讓人很難理解這些按鈕是與上方的還是下方的內容關聯)
(每行按鈕在下方留出足夠大的間距,幫助人們區分按鈕與上下內容的關聯)
該如何做:我們可以在柵格系統中設置更大的區間值,使相鄰的間距值之間具有明顯的視覺差異。
六、行高比例非固定
行高不一定是隨著文本變大而增加的。如果整個頁面統一保持同一個行高比例,那么每行大文本之間會有太多的空白。
(文字行距太大了)
(當標題使用較小的行距時,兩行才會被看作一個整體內容)
該如何做:一般大標題的行高比例需要小于正文的行高比例。
七、密集≠雜亂
請記住,一個信息密集的界面不一定要讓人感到雜亂或不知所措。
(通過調整間距、字號并添加分割線來打造視覺秩序)
除了利用間距,還可以通過這些方法傳達元素間的關系,例如:
- 將相關的元素放進一個模塊里
- 使用分割線或字符區分元素間的邊界
- 調整文本大小、字重或顏色來區分元素層級
每一個讓人“感覺不錯”的界面背后,需要我們花費大量的時間和精力不斷打磨。
有個有效的練習方法就是:找一個你喜歡的app或網站頁面,根據里面的功能按你自己的想法進行重新設計,并將以上關于留白的8個方法加以實踐。
你將會發現,這個過程中有許多設計決策和細節需要你仔細考量。
總結:
- 間距需遵循接近法則
- 利用留白讓用戶將注意力集中在特定內容上
- 確保設計和開發使用相同的測量方法
- 使用柵格系統限制與規范設計
- 避免使用過于相近的間距值
- 行高不一定是隨著文本變大而增加的
- 頁面信息密集不等于要讓人感到雜亂
本文由 @SDL藝術實驗室 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自 Pexels,基于CC0協議
第六點,32行高看著比較舒服
這篇文章實用性太強了,收藏起來好好學習!
看起來很有深度,作者大大太厲害了!需要多讀幾遍才能完全理解。
有用,很多東西不實際操作是發現不了的