火星網(wǎng)校
學(xué)會(huì)交互設(shè)計(jì)UI設(shè)計(jì)字體排版實(shí)用技巧，提升設(shè)計(jì)界面的可讀性
發(fā)布時(shí)間：2024-05-14 12:53:04 瀏覽量：282次
做了這么久的設(shè)計(jì)師，如果有人把設(shè)計(jì)師稱作“作圖的”，小編一定會(huì)毫不猶豫地沖上去和他大打一架，然后大聲喊著：設(shè)計(jì)師才不是“作圖的”的呢！
設(shè)計(jì)師是排版的…
老實(shí)說，作為一個(gè)交互設(shè)計(jì)師，特別是負(fù)責(zé)UI界面的設(shè)計(jì)，每天最多思考學(xué)習(xí)的就是怎么排版才會(huì)更加好看。網(wǎng)絡(luò)上超過95%的信息是書面文字語言，文字排版就成了重中之重。好的文字排版可以讓用戶的閱讀行為更加輕松，而糟糕的文字排版只會(huì)讓用戶感到厭煩，優(yōu)化文字排版就是優(yōu)化用戶界面的重要工作。
知道文字排版這事兒多么重要了吧，本著人道主義互助的精神，小編拿出來珍藏多年壓箱底的10條排版秘籍，和你嘮嘮該怎么給網(wǎng)頁做文字排版，讓你設(shè)計(jì)的界面也能有好的可讀性！
-01-千萬不要用各種各樣的字體
使用超過3種不同的字體來設(shè)計(jì)你的交互界面，會(huì)使得它們看起來沒有秩序感，也顯得不夠?qū)I(yè)。盡可能地將字體種類數(shù)目限制到最低，一個(gè)字體通常是足夠的，最多，也就是使用兩個(gè)字體。
如果你選擇使用兩個(gè)字體，請(qǐng)記得選擇兩個(gè)可以相互配合協(xié)調(diào)的字體，具有同樣的視覺風(fēng)格，不要讓其中一個(gè)搶了另一個(gè)字體的風(fēng)頭。
-02-嘗試使用標(biāo)準(zhǔn)字體
設(shè)計(jì)工具里為我們?cè)O(shè)計(jì)師提供了很多有趣的字體，這些字體也許給我們的設(shè)計(jì)結(jié)果帶來許多新鮮有趣、意想不到的設(shè)計(jì)變化，但這些趣味的字體也許會(huì)給你的設(shè)計(jì)帶來錯(cuò)誤的影響。過于花哨的字體會(huì)分散用戶的閱讀注意力，用戶更多地會(huì)思考設(shè)計(jì)師使用的字體，而不是專心閱讀文字信息。所以，最好堅(jiān)持使用安全的系統(tǒng)標(biāo)準(zhǔn)字體。
-03-控制好每一行的長度
一行文本的長度、字符數(shù)量是文本可讀性的關(guān)鍵。限制文本寬度影響設(shè)計(jì)可讀性，適當(dāng)?shù)拈L度能提高用戶閱讀體驗(yàn)。保持一行約60個(gè)字符左右的閱讀量適中。
-04-選擇各種尺寸的字體
不同文本元素要賦予不同字體尺寸，幫助用戶閱讀文本信息，找到主次關(guān)系。
選擇可在不同大小和字重下都具有可讀性和可用性的字體，確保清晰可辨。避免選擇難以閱讀的花體手寫體。
-05-使用字母好區(qū)分的字體
在選擇字體類型時(shí)，檢查文本字母區(qū)分度，確保字體不會(huì)給用戶造成閱讀困難。
-06-避免所有字母使用大寫
全大寫的拼寫影響用戶閱讀速度，謹(jǐn)慎使用，最好在特定場(chǎng)景下強(qiáng)調(diào)使用。
-07-控制好行與行之間的間距
正確使用空白空間提高閱讀理解能力，兩行文本之間的間距即行距，通常采用字母高度的30%作為間距。
-08-確保文字有足夠的顏色對(duì)比度
別用相似顏色的文本與背景，顏色對(duì)比度提高可見度，加快閱讀速度。在多設(shè)備上測(cè)試顏色準(zhǔn)確性。
-09-避免使用紅色或者綠色的文字
色盲是常見現(xiàn)象，避免使用紅綠色傳達(dá)信息，建議使用其他顏色強(qiáng)調(diào)信息。
-10-避免使用閃爍的文本
閃爍的文字可能引發(fā)一些用戶不適，影響閱讀體驗(yàn)，建議避免使用。
好了，未來的交互設(shè)計(jì)師們，小編這份秘籍，你一定要收好哦！希望，會(huì)給你未來的設(shè)計(jì)探索，提供幫助。
熱門課程推薦
熱門資訊
-
1. 10個(gè)免費(fèi)學(xué)習(xí)UI設(shè)計(jì)的網(wǎng)站 提升你的設(shè)計(jì)能力
怎樣可以提升你的UI設(shè)計(jì)能力!第一個(gè):站酷站酷想必是設(shè)計(jì)師都知道的一個(gè)網(wǎng)站,里面不止有UI設(shè)計(jì)的資源,還有其他設(shè)計(jì)的,不如:平面設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、字體...
-
2. iPhone6的UI設(shè)計(jì)尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計(jì)的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計(jì)尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
3. 移動(dòng)端UI設(shè)計(jì)中常見的5種APP界面類型，你get到了嗎？
通過介紹移動(dòng)端UI設(shè)計(jì)中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計(jì)的基本知識(shí)
-
4. 12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個(gè)絕佳的UI設(shè)計(jì)網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個(gè)面向設(shè)計(jì)師的...
-
5. 移動(dòng)端列表頁和表單頁設(shè)計(jì)秘訣:讓你的APP點(diǎn)擊率翻倍
在移動(dòng)端設(shè)計(jì)中,列表頁和表單頁是不可或缺的部分。一個(gè)好的列表頁和表單頁設(shè)計(jì)能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
-
6. 史上最全，平面設(shè)計(jì)UI設(shè)計(jì)必備的77個(gè)國內(nèi)外素材、設(shè)計(jì)資源網(wǎng)站
ui設(shè)計(jì)社區(qū),大神太多了。3、behance: https://www.behance.net/ ,著名設(shè)計(jì)... 對(duì)于品牌設(shè)計(jì)師來說,除了圖案素材收集之外,還有一個(gè)很重要的,就是設(shè)計(jì)故...
-
7. 推薦10本適合UI設(shè)計(jì)師看的書籍，輕松掌握技能!
對(duì)于想要提高自己的設(shè)計(jì)能力和創(chuàng)造力的小白和UI設(shè)計(jì)師來說,這本書是一個(gè)很好的選擇。4.《設(shè)計(jì)的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
8. 設(shè)計(jì)中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計(jì)應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計(jì)應(yīng)用。通過對(duì)色彩在早期文明社會(huì)中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計(jì)中的重要性以及新興技...
-
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. 零基礎(chǔ)學(xué)UI設(shè)計(jì)要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計(jì)培訓(xùn)的時(shí)長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會(huì)。
最新文章
