旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計(jì) > 出色的UI設(shè)計(jì)字體排版技巧有哪些

出色的UI設(shè)計(jì)字體排版技巧有哪些

時(shí)間:2020-02-01來源:www.5wd995.cn點(diǎn)擊量:作者:sissi
時(shí)間:2020-02-01點(diǎn)擊量:作者:sissi




  數(shù)字接口對(duì)我們的生活產(chǎn)生了巨大影響。我們經(jīng)常使用網(wǎng)站或數(shù)字應(yīng)用程序來實(shí)現(xiàn)某些目標(biāo)。確實(shí),當(dāng)與軟件界面進(jìn)行交互時(shí),我們被軟件的樣式和排版所包圍,我們的經(jīng)驗(yàn)是由我們閱讀和理解的文字和消息所驅(qū)動(dòng)的。AAA教育小編姐姐整理一下相關(guān)的信息整理成這篇文章,接下來我們?cè)敿?xì)的介紹了出色的UI設(shè)計(jì)字體排版技巧有哪些,確認(rèn)了排版在所有網(wǎng)站中的重要性:
 

  網(wǎng)頁設(shè)計(jì)是95%的版式。
 

  UI設(shè)計(jì)
 

  排版的工作原理,因?yàn)樗窃O(shè)計(jì)師最重要的資產(chǎn)之一,可以傳達(dá)清晰,有效的信息,使人們情感投入并在我們?cè)O(shè)計(jì)的界面中傳達(dá)適當(dāng)?shù)钠放铺卣?。不幸的是,由于許多設(shè)計(jì)師和開發(fā)人員忽略了版式的重要性,我注意到幾個(gè)網(wǎng)站顯示出脫節(jié)的外觀和情感。
 

  因此,這些網(wǎng)站的溝通效率低下,并影響用戶體驗(yàn)和品牌認(rèn)知度。
 

  出色的UI設(shè)計(jì)字體排版技巧有哪些的目的是幫助設(shè)計(jì)人員和開發(fā)人員了解如何使用字體,以創(chuàng)建出色的界面。
 

  一、版式,品牌和用戶
 

  當(dāng)用戶與界面進(jìn)行交互時(shí),他還與品牌進(jìn)行交互和聯(lián)系。為了優(yōu)化用戶體驗(yàn),字體必須與網(wǎng)站品牌的語氣和聲音保持一致。我認(rèn)為,MailChimp是說明此概念的最佳示例之一。他們?cè)诰W(wǎng)站上通過選擇標(biāo)題為“ Cooper light”的字體來做到這一點(diǎn)。這種字體具有一定的個(gè)性,并傳達(dá)出該品牌聲稱的友好而平易近人的風(fēng)格。
 

ui設(shè)計(jì)培訓(xùn)
 

  由于人們不是來網(wǎng)站欣賞設(shè)計(jì)而是在閱讀內(nèi)容,因此選擇字體以了解我們希望他們?cè)陂喿x時(shí)的感受非常重要。例如,我們是否希望他們感到放松,快樂或煩躁?這應(yīng)該與網(wǎng)站的品牌屬性和藝術(shù)方向保持一致。
 

  這里的要點(diǎn)是,無論何時(shí)選擇字體,都要先列出單詞列表,以提醒您品牌的語調(diào)和聲音。這將幫助您用整個(gè)設(shè)計(jì)中文本的字體描述您想提煉的感覺和心情。
 

  通過了解字體,用戶和品牌之間的關(guān)系,您將能夠自信地選擇最佳字體,這將幫助您的設(shè)計(jì)實(shí)現(xiàn)其目標(biāo)。
 

  二、選擇正確的字體
 

  要選擇正確的字體,最基本的是要考慮使用的上下文和界面中字體的用途。您應(yīng)該經(jīng)常問自己:我選擇的字體是否將應(yīng)用于標(biāo)題,正文,鏈接,號(hào)召性用語或?qū)Ш?這些問題將幫助您在設(shè)計(jì)中正確應(yīng)用字體。
 

  選擇正確的字體還意味著要考慮針對(duì)擴(kuò)展文本優(yōu)化的一組字體,因?yàn)閷?duì)于在屏幕上閱讀的用戶而言,在某些時(shí)候可能會(huì)很累,尤其是在網(wǎng)站內(nèi)容繁多的情況下。
 

  要搜索字體,我通常喜歡探索Google字體或Adobe Fonts(Typekit)中的字體。它們都提供了針對(duì)網(wǎng)絡(luò)優(yōu)化的高質(zhì)量字體選擇。我避免使用任何來自免費(fèi)網(wǎng)站或未知資源的字體,因?yàn)樗鼈兺ǔ2粫?huì)提供經(jīng)過良好測(cè)試的出色字體。另外,根據(jù)經(jīng)驗(yàn),建議最大選擇兩個(gè)字體,以保持界面設(shè)計(jì)的一致性。
 

  使用Web排版時(shí),作為設(shè)計(jì)師,您必須知道兩個(gè)主要原則,以使內(nèi)容可訪問和易讀:可讀性和易讀性。
 

  三、易讀性
 

  易讀性是讀者在閱讀時(shí)區(qū)分字母形式的能力。以下是造成字體易讀性的因素:
 

  四、顯示字體
 

  我們稱“顯示字體”為大尺寸使用而設(shè)計(jì)的字體。這些標(biāo)題清晰,引人注目并且脫穎而出,非常適合標(biāo)題。但是,這些字體在較小的尺寸下可讀性較差,因此不應(yīng)用于正文復(fù)制。我最喜歡的標(biāo)題字體之一是“ BEBAS NEUE”。

UI設(shè)計(jì)培訓(xùn)
 

  五、襯線和無襯線字體
 

  在網(wǎng)絡(luò)上,我們主要使用兩組字體:Serif和Sans Serif。傳統(tǒng)上,襯線字體一直更加清晰易讀,并且經(jīng)常用于印刷文本中較長的文字。隨著Web和設(shè)計(jì)趨勢(shì)的發(fā)展,我們可以找到更多使用Serif字體進(jìn)行正文復(fù)制的網(wǎng)站。如果選擇適當(dāng),則效果很好。

UI設(shè)計(jì)培訓(xùn)

  但是,Sans-serif字體因其簡(jiǎn)單的字母形式而更常用于正文。選擇帶有輕微“個(gè)性感”但不帶有裝飾性的字體非常好,因?yàn)樗鼤?huì)增加用戶的認(rèn)知負(fù)擔(dān)并影響他們的閱讀體驗(yàn)。
 

UI設(shè)計(jì)培訓(xùn)

  根據(jù)我對(duì)字體的經(jīng)驗(yàn),如有必要,我更傾向于使用Sans-serif字體作為正文文本,使用Serif字體作為標(biāo)題。最后,嘗試一些組合,并判斷哪種方法最適合您的設(shè)計(jì)。
 

  六、X高度
 

  X高度是評(píng)估字體時(shí)要考慮的重要特征。最適合正文復(fù)制的字體是x高度較大的字體。x高度越高,字體往往越清晰。為正文選擇字體時(shí)要記住的重要規(guī)則。

UI設(shè)計(jì)培訓(xùn)

  七、可讀性
 

  僅僅因?yàn)樽煮w清晰易讀,并不意味著它是可讀的。實(shí)際上,可讀性是某人閱讀文本時(shí)的理解和視覺舒適度。如果發(fā)現(xiàn)自己停止欣賞字體而不是閱讀文本,則可能是字體不可讀。這是兩個(gè)示例,可以直觀地查看上面的說明:
 

  八、線高
 

  行高也稱為前導(dǎo),它定義了文本塊中基線之間的間隔。真正的理想行高并不存在,因?yàn)槊糠N字體都不同。但是,線高的理想起點(diǎn)是1.2到1.8。行高過小會(huì)使文本難以閱讀,因?yàn)樾斜舜丝拷?。一般而言,如果用戶在閱讀應(yīng)用于網(wǎng)站文本的字體時(shí)遇到麻煩,他們會(huì)認(rèn)為該內(nèi)容難以閱讀和理解。

UI設(shè)計(jì)培訓(xùn)

  九、行間距
 

  行距是段落之間的間隔。始終將段落間距保持在字體大小的.75倍至1.25倍之間。
 

  十、尺寸
 

  使用字體時(shí),大小很重要。我們需要考慮所有年齡段的人都可以閱讀我們的內(nèi)容。對(duì)于字體大小,最好保持最小為16px或1em。字體應(yīng)足夠大以方便閱讀。瀏覽網(wǎng)站時(shí),人們很忙碌,這就是為什么使內(nèi)容清晰且易于閱讀很重要的原因。

UI設(shè)計(jì)培訓(xùn)

  十一、線長
 

  另一個(gè)提高可讀性的常規(guī)做法是防止段落的水平線過寬。實(shí)際上,如果一條線太長,會(huì)拉長用戶的眼睛并引起疲勞。經(jīng)驗(yàn)法則是將行長度設(shè)置為最大40到70個(gè)字符。
 

  十二、層次結(jié)構(gòu)和對(duì)比
 

  良好的字體對(duì)比度對(duì)于可讀性至關(guān)重要。這是在網(wǎng)站內(nèi)容上創(chuàng)建良好且一致的層次結(jié)構(gòu)時(shí)要理解的重要原則。成功的層次結(jié)構(gòu)將內(nèi)容組織為易于消化的部分,易于掃描,并且用戶可以訪問。
 

  十三、結(jié)論
 

  以我的經(jīng)驗(yàn),我注意到,一旦您理解了這些原理并掌握了Web的排版,由于排版是內(nèi)容,內(nèi)容是UX,您的設(shè)計(jì)將變得更加強(qiáng)大和有吸引力。
 

  必須記住,您并不是將網(wǎng)站設(shè)計(jì)得漂亮,而是要幫助用戶實(shí)現(xiàn)特定目標(biāo)。您可以瀏覽和探索以下資源,這些資源每天都可以幫助我提高印刷術(shù)的技能:
 

  Websites:
 

  Typewolf

  Typographica

  Font In Use

  Fontpair

  Fontstand

  Myfonts



 

預(yù)約申請(qǐng)免費(fèi)試聽課

填寫下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號(hào):京ICP備12034770號(hào)

?2007-2022/ www.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號(hào)

網(wǎng)站地圖