火星網校
「交互設計」UI設計字體排版實用技巧
發(fā)布時間：2024-01-24 12:45:15 瀏覽量：232次
做了這么久的設計師，如果有人把設計師稱作“作圖的”，小編一定會毫不猶豫地沖上去和他大打一架，然后大聲喊著：設計師才不是“作圖的”的呢！
設計師是排版的…
老實說，作為一個交互設計師，特別是負責ui界面的設計，每天最多思考學習的就是怎么排版才會更加好看。網絡上超過95%的信息是書面文字語言，文字排版就成了重中之重。好的文字排版可以讓用戶的閱讀行為更加輕松，而糟糕的文字排版只會讓用戶感到厭煩，優(yōu)化文字排版就是優(yōu)化用戶界面的重要工作。
知道文字排版這事兒多么重要了吧，本著人道主義互助的精神，小編拿出來珍藏多年壓箱底的10條武功秘籍，哦不對，排版秘籍，和你嘮嘮該這么給網頁做文字排版，讓你設計的界面也能有好的可讀性！
-01-千萬不要用各種各樣的字體
使用超過3種不同的字體來設計你的交互界面，就會使得他們看起來沒有秩序感，也顯得不夠專業(yè)。同樣，太多的字體大小和樣式也會破壞布局。盡可能地將字體種類數(shù)目限制到最低，一個字體通常是足夠的，最多，也就是使用兩個字體。
如果你選擇使用兩個字體，請記得選擇兩個可以相互配合協(xié)調的字體，具有同樣的視覺風格，不要讓其中一個搶了另一個字體的風頭。
-02-嘗試使用標準字體
設計工具里為我們設計師提供了很多有趣的字體，這些字體也許給我們的設計結果帶來許多新鮮有趣、意想不到的設計變化，但這些趣味的字體也許會給你的設計帶來錯誤的影響。過于花哨的字體會分散用戶的閱讀注意力，用戶更多地會思考設計師使用的字體，而不是專心閱讀文字信息。所以，如果除非是你的品牌或者交互產品有目的地、迫切地需要一個自定義字體，你還是最好堅持使用這些安全的系統(tǒng)標準字體吧。用好的文字排版、閱讀體驗吸引讀者關注內容，而不是用炫技式的文字字體來呈現(xiàn)。
-03-控制好每一行的長度
你之前可能沒有想到，一行文本的長度、字符數(shù)量是文本可讀性的關鍵。即使你在其他部分的設計再巧妙，如果限制了文本的寬度，也會影響到你的設計可讀性。如果一行太短，眼睛不得不頻繁地換行，打亂了使用者的閱讀節(jié)奏，如果一行太長，就會增加用戶的閱讀疲憊感，使得用戶很難專注。如下圖，一行60個字符左右的閱讀量剛剛好，如果是在移動設備當中，30-40個字母就好了。
-04-選擇各種尺寸的字體
大多數(shù)用戶界面都會有各種各樣的文本元素，按鈕、正文、標簽、標題，這么多的文本元素，要給它們賦予不同的文字尺寸大小，會更好地幫助用戶閱讀文本信息，找到信息的主次關系。
既然如此，你要選擇一種可以在不同大小和字重下都具有可讀性和可用性的字體，這十分重要！你要保證你選擇的這個字體，即使在很小的情況也能清晰分明，像草書、花體手寫體就不要選擇了：它們雖然很漂亮，但真的很難閱讀??！
-05-使用字母好區(qū)分的字體
講真的，有些字體里的字母真的不好區(qū)分，特別是下圖當中i和l，真的很難區(qū)分啊！
因此，在選擇字體類型的時候，作為設計者你應該在不同的文本字母中檢查你選擇的這個字體是不是合適，這樣才會確保這個字體不會給你的用戶造成閱讀困難。
-06-避免所有字母使用大寫
全大寫的拼寫會給人一種極強的視覺沖擊，如果不涉及上下文內容的閱讀，單單是強調一詞或者一句，效果是很好的?？墒窃诖蠖挝淖之斨?，與小寫字體相比，全大寫的字體會大大影響用戶的閱讀速度。
-07-控制好行與行之間的間距
事實證明，在段落之間，正確使用空白空間可以提高20%的閱讀理解能力，幫助用戶快速吸收理解文字信息，剝離無關緊要的信息。而這個空白空間，就是指的兩行文本之間的間距，也就是行距。通常，我們會采用字母高度的30%作為行與行之間的空白間距。
-08-確保你的文字有足夠的顏色對比度
記住，不要把你的文本和背景使用相同相似的顏色。顏色對比更鮮明，文本越可見，用戶閱讀速度就越快。如果你做好了選好了顏色，最好放在大多數(shù)設備上，與真實用戶一起進行測試。測試中發(fā)現(xiàn)了問題，會好過實際應用當中出現(xiàn)了問題。
-09-避免使用紅色或者綠色的文字
紅配綠，很鮮艷是不？恭喜色覺正常的你，可是你的一部分色盲癥用戶就沒這個感受了。色盲是個很常見的現(xiàn)象，特別是在男性當中，8%的男性是色盲，尤其是紅綠色盲者，這是最常見的色盲種類。所以，作為設計師，你應該避免用紅色和綠色來傳達信息。如果有可能，不止是避免紅綠色，建議你使用顏色以外的區(qū)分方法來強調重要的信息。
-10-避免使用閃爍的文本
blingbling閃爍的文字是不是看起來很酷炫？可是它可不是文字效果里的好選擇。閃爍的文字內容可能會引起一部分敏感特殊用戶群的癲癇發(fā)作。就算你的用戶沒有癲癇癥，閃爍的內容也可能會讓他們感到煩躁惱火，或者是分散他們的閱讀注意力。
好了，未來的交互設計師們，小編這份秘籍，你一定要收好哦！希望，會給你未來的設計探索，提供幫助。
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數(shù)字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
-
9. 物聯(lián)網APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
10. 武漢UI設計培訓班費用怎么樣？想學UI設計要多少錢？
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
最新文章
