火星網(wǎng)校
設(shè)計(jì)師要掌握的UI設(shè)計(jì)技巧:排版篇分享
發(fā)布時間：2024-08-21 11:20:37 瀏覽量：200次
大家好，我是Clippp，今天為大家分享的是「UI基礎(chǔ)系列2-排版篇」。在第一篇中，我們拆解了標(biāo)題的字號、樣式、行高、粗細(xì)應(yīng)該如何設(shè)計(jì)。最近有讀者催更還想看「UI基礎(chǔ)系列」，接下來我們開始分享第二部分：頁面排版。
排版中很重要的兩個因素是對齊和間距。對齊讓頁面內(nèi)容有序且合理，間距有助于拉開頁面中各個元素的空間和節(jié)奏，這兩個因素協(xié)同工作，來實(shí)現(xiàn)更好的用戶體驗(yàn)。
1) 避免長文本居中對齊
當(dāng)頁面中的文字內(nèi)容超過兩三行，盡量不要使用居中對齊的方式。當(dāng)大段的文字內(nèi)容居中對齊時，給人的第一感覺就是文字左右兩邊不規(guī)整，這樣的排版方式會導(dǎo)致讀者在閱讀時注意力下降。
2) 長文本使用左對齊
左對齊的排版方式具有更好的可讀性，而且現(xiàn)在的書籍、文章很多都是采用左對齊的方式。文本左對齊避免了用戶在瀏覽頁面時視線來回跳躍，更快速地瀏覽內(nèi)容。
3) 標(biāo)題和注釋使用居中對齊
居中對齊什么場景下可以用呢？當(dāng)標(biāo)題僅有一到兩行時，就可以考慮使用居中對齊。當(dāng)然如果標(biāo)題超過兩行，使用左對齊會更好。
例如在網(wǎng)站首頁設(shè)計(jì)中，經(jīng)常會看到這種功能亮點(diǎn)水平排列的設(shè)計(jì)，在這樣的場景下，標(biāo)題和注釋文字都可以使用居中對齊。如果其中一個注釋太長需要折行，考慮精簡文字信息，做到設(shè)計(jì)上的完全統(tǒng)一。
4) 右對齊數(shù)字和時間
在設(shè)計(jì)表格、卡片或儀表盤的時候，右對齊數(shù)字和時間。例如在設(shè)計(jì)涉及金額的表單時，將金額右對齊會讓數(shù)目信息更加一目了然。
5) 主標(biāo)題使用較大的間距
標(biāo)題和文字內(nèi)容之間留有一定間距有助于劃分內(nèi)容層級關(guān)系，讓標(biāo)題和文字之間形成更清晰的對比。
6) 副標(biāo)題使用較小的間距
副標(biāo)題的字體大小更接近文本內(nèi)容，使用較小的間距有助于突出顯示標(biāo)題內(nèi)容，并且不會破壞閱讀流程。
7) 定義通用的段間距
為了讓一大段內(nèi)容看起來統(tǒng)一，設(shè)置一個通用的段間距至關(guān)重要。大多數(shù)字體的理想行距是行高的30%-50%，例如文字的行高是24pt，那么段落間的間距為8、10、或12pt。
8) 在文本和圖像之間添加更多空間
圖像在視覺上比文本重，添加額外的空間有助于在圖像和上下文之間建立平衡，讓內(nèi)容更易于閱讀。文本和圖像之間留有一定的空間，可以防止文本受到視覺重量大的圖像的影響。
頁面排版是「UI基礎(chǔ)系列」的第二部分內(nèi)容，后續(xù)設(shè)計(jì)夾會分享更多頁面層級、布局、網(wǎng)格等一系列的設(shè)計(jì)技巧。
對「UI基礎(chǔ)系列」感興趣的小伙伴記得點(diǎn)贊關(guān)注一下接下來的文章。慢慢來比較快，希望對你有幫助！
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計(jì)尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計(jì)的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計(jì)尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計(jì)網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計(jì)網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計(jì)師的...
-
3. 移動端UI設(shè)計(jì)中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計(jì)中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計(jì)的基本知識
-
4. 10個免費(fèi)學(xué)習(xí)UI設(shè)計(jì)的網(wǎng)站 提升你的設(shè)計(jì)能力
怎樣可以提升你的UI設(shè)計(jì)能力!第一個:站酷站酷想必是設(shè)計(jì)師都知道的一個網(wǎng)站,里面不止有UI設(shè)計(jì)的資源,還有其他設(shè)計(jì)的,不如:平面設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、字體...
-
5. 移動端列表頁和表單頁設(shè)計(jì)秘訣:讓你的APP點(diǎn)擊率翻倍
在移動端設(shè)計(jì)中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計(jì)能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計(jì)師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計(jì)能力和創(chuàng)造力的小白和UI設(shè)計(jì)師來說,這本書是一個很好的選擇。4.《設(shè)計(jì)的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學(xué)UI設(shè)計(jì)要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計(jì)培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計(jì):創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗(yàn)
ui設(shè)計(jì)應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計(jì)過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
9. 武漢UI設(shè)計(jì)培訓(xùn)班費(fèi)用怎么樣？想學(xué)UI設(shè)計(jì)要多少錢？
想了解武漢UI設(shè)計(jì)培訓(xùn)班的費(fèi)用是多少嗎？不知道學(xué)UI設(shè)計(jì)要花多少錢？不妨看看這篇文章，了解UI設(shè)計(jì)培訓(xùn)班的學(xué)費(fèi)價(jià)格以及學(xué)習(xí)內(nèi)容。
-
10. 設(shè)計(jì)中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計(jì)應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計(jì)應(yīng)用。通過對色彩在早期文明社會中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計(jì)中的重要性以及新興技...
最新文章
