中國傳媒大學(xué)-用戶體驗與UI交互設(shè)計-課件-知識點5.4界面中的文字使用技巧

1、交互式界面設(shè)計西安郵電大學(xué)數(shù)字藝術(shù)學(xué)院知識點5.4：界面中的文字使用技巧PART 01引言目錄CONTENTSPART 02如何選擇字體PART 03合理設(shè)置文字字號PART 04文字的字距和行距設(shè)置技巧0102030405PART 05字體顏色的使用技巧 引言01在界面中，能夠讓用戶完成交互的是各種形式的按鈕，這些按鈕有些是圖標(biāo)，有些是文字，有些是圖標(biāo)與文字的組合。 引言文字邊緣區(qū)域重要橋梁文字其實也是一種視覺符號，與圖標(biāo)一樣具有審美性，但是界面中的說明文字要盡量簡練。 引言一個詞表達不要用一句話一句話表達不用一段話一種字體不用多種字體一種顏色的文字不用多種顏色如何選擇字體02此部分內(nèi)容作為

2、文字排版占位顯示 （建議使用主題字體）有襯線字體（serif）此部分內(nèi)容作為文字排版占位顯示 （建議使用主題字體）無襯線字體（sans serif） 字體的兩大類 現(xiàn)代主義的影響 20世紀(jì)上半葉，當(dāng)時整個德國，乃至歐洲都被“包豪斯主義”洗腦，也就是“現(xiàn)代主義”。建筑繪畫工業(yè)設(shè)計字體設(shè)計無襯線體為主流 字體的選擇技巧01菜單文字圖標(biāo)文字按鈕上的文字使用同一種字體 字體的選擇技巧02一個項目設(shè)計中最好只使用一種字體樣式，最多不超過兩種字體。03正文或大段文字適合選擇通用字體，如 微軟雅黑。處理標(biāo)題或短小文本，適合選用新穎字體打造差異化。例如輕芒雜志App就在標(biāo)題使用了方正新報宋來打造產(chǎn)品的差異化。

3、04標(biāo)題合理設(shè)置文字字號03底部標(biāo)簽欄輔助性文字使用20px；段落輔助性文字次要信息用24px；模塊描述、內(nèi)容說明等用26px；多段文字標(biāo)題如商品標(biāo)題等用28px；模塊標(biāo)題、列表名稱等用32px；頁面標(biāo)題、導(dǎo)航標(biāo)題、分類標(biāo)題等用36px。 文字字號的設(shè)置文字的字距與行距設(shè)置技巧04閱讀舒適字距行高提高可讀性快速獲取信息 要想文本閱讀的舒適離不開使用合適的字距和行高，以便于提高文字的可讀性，有利于用戶在使用的時候快速獲取信息。 設(shè)置字距和行距的重要性中文方塊字0.5字號小字號大0.5-0.5 設(shè)置字距的技巧 通常情況下，字距以0.5依次增加和縮減。 比如說字號比較小的時候可以把字距設(shè)置為 0.5

4、 讓字距變開一些，而在字號較大的標(biāo)題文字可以使用字距為 -0.5 的設(shè)置使文字更緊湊方便一眼就看完。在這個基礎(chǔ)上可以視字號設(shè)置字距為 -2、-1.5、-1、-0.5、0.5、1、1.5、2在這個基礎(chǔ)上靈活變化。但值得注意的是，除非你的版面有特殊要求，否則不要輕易改變字體默認(rèn)的字間距，字體設(shè)計師已經(jīng)充分考慮了這款字體所適合的字間距，如果不滿意可以更換字體。 設(shè)置字間距注意的問題 設(shè)置行距的技巧行距是行之間的空間，行距太緊湊，會讓視線難以從行尾掃視到下一行首。行距太寬松，字間距會開始形成隊列，產(chǎn)生了我們通常意義上的河流，阻斷了行的視覺流。通常情況下，界面中的多行文字一般設(shè)置 為1.5 倍的行高比較

5、常見。1.5倍行距字體顏色的使用技巧05 常用的字體顏色我們一般是依據(jù)文字信息的重要程度來設(shè)置文字顏色的，并將文字分為不同的等級，層級越低的文字顏色越淺，隨著層級的增高，文字顏色越深。#333333#666666#999999常見字體配色深黑色深灰色灰色第二步：畫一個矩形塊，填充吸取的顏色，并將矩形塊復(fù)制四個；#22282a#22282a#22282a#22282a第一步：選取一個和界面主色調(diào)相關(guān)的暗顏色，然后用吸管將這個顏色吸取下來； 設(shè)置字體顏色的小技巧第三步：按照 100% 、75%、55%、5%的不透明度，對色塊進行不透明度的調(diào)整。第四步：通過吸管工具吸取得到每一個色塊的顏色色值。100% 75%55%5%#22282a#595e5f#86898a#f4f4f4 設(shè)置字體顏色的小技巧 文字排版三原則為了追求移動