初學者必備,UI設計中字體的相關屬性!

2020-12-26 上海千鋒教育

對於一名UI設計師來說,字體是一門基本語言,更是設計師需要掌握的基本技能之一。目前常用的字體有很多種,比如黑體、宋體、楷體等。在平時的項目設計中,為了讓頁面中的字體更加貼合業務場景,設計師需要對字體的字距字高進行調整。接下來千鋒就給大家講解一下字體的相關屬性。

1、字體基礎結構詳解

一般來說,為了保持字體的完整展示,字體設計師都會給字體預留一定的安全距離,設定合適的升部線及降部線距離,讓字體展示的更為平衡。

在設計輸出的時候,如果沒有調整line值,是可以直接藉助sketch的標註插件sketch measure,來實時導出相應的參數,這樣的參數最接近開發效果。如果沒有Mac的同學,可以利用PS選中文字,那麼選中的深色底就是字體本身的間距。

2、字體的行高行距參數詳解

在一些文字較多的頁面,為了讓閱讀更為順暢,我們需要對文字的字高字距進行調整。通過sketch及動效編程軟體Origami中的可配置參數時只需要配置好Charater(字間距)、line(行高)、paragraph(行距)三個值即可。

3、字號大小如何設定

我們在做設計時,字號的單位需遵循原子理論,也就是使用一個基數作為倍增,如2、4、6、8、10 或者3、6、9、12。但其實我們在做移動端設計時,單位需要遵循偶數原則,因為開發中的單位是以一倍圖的基數來進行計算。那麼其實在制定字體規範中,使用2為單位會導致字號過多,不易管理,且2號字體的差異化不大。

所以在字號方面我們使用4作為單位是比較合適的:一是適配後在@2x跟@3x不會出現半像素,二是使用4為單位,能滿足字體大小的均衡。

4、合理配置字體拉開層級關係

在移動端的界面設計中,除了使用間距網格來拉開不同內容的層級外,對字體樣式進行適當的調整也是個很不錯的選擇。通過調整字重、字色,能讓頁面的視覺邏輯變為更加的清晰明了、主次分明,降低因視覺給用戶帶來的幹擾,提升頁面的可操作性。如何來設定這兩塊呢?1)儘量減少頁面中的不同色相的顏色數量;2)使用不同的字重來區分內容。

當然,隨著用戶體驗度的變化以及技術的革新,字體運用也會出現新的趨勢,比如更大更粗的標題、更明顯的字重層級、用字體明度做內容上的信息區分等。

綜上所述,想要成為一個合格的UI設計師絕不是只會使用PS、AI軟體就可以,你還要注意各種細節。關注千鋒學習更多UI設計相關知識,讓你理論與實戰兼備,搭建屬於你的職場高起點。

相關焦點

  • Auto.js教程(第14期)-UI界面的編寫
    5.子控制項/父布局的相關概念"ui";ui.layout( <horizontal>            <text id="t1" text="" />            <button id="b1" /> </horizontal>)
  • UI設計中配色設計攻略
    最近研究了一下配色方法,今天我就針對UI設計中配色設計攻略進行簡單的說明,希望能幫助到一部分小夥伴。有個有趣的研究成果 —— 「七秒鐘定律」:人們在挑選商品和服務時 ,只需要 7 秒鐘就可以確定是否感興趣,而在這短暫的 7 秒鐘內,色彩的作用佔到了 67%。
  • 教程 ui設計專業—Mugeda 製作gif 圖
    1. http://www.mugeda.com/   打開Mugeda雲端H5互動設計平臺,進入設計舞臺
  • 字體設計——創意裝飾型與筆畫共用型
    這類型的字體不僅具有裝飾物的外觀特徵,還很直白地表現出了文字的含義,有點類似於「象形文字」,只是這裡的文字更現代化。創意裝飾型字體概述創意裝飾型字體,從字體名字中可以分解出兩個詞,即創意和裝飾,也就是說這類型的字體不僅需要裝飾物來修飾,裝飾物還必須具有一定的創意。
  • UI設計 | 製作更好的UI卡片的簡單設計技巧
    卡片設計提示使用相關圖像基於卡的設計通常嚴重依賴視覺效果(圖像或視頻),因為視覺效果是用戶掃描卡時首先注意到的。選擇相關的圖像非常重要-可以一目了然地傳達單元含義的圖像。使用簡單的排版內容通常,建議對卡中的文本使用sans-serif字體,因為這樣的文本在大屏幕和小屏幕上看起來都一樣好。
  • 中文字設計:電影海報中的字體
    下面就針對電影海報中的字體設計進行探討,分析優秀的字體設計如何在海報設計中扮演重要角色。  書法字本就是一種平面藝術形式,具有很強的設計感與藝術表現力,在海報設計中被經常採用,在電影海報設計中則更是如此,一些具有歷史文化背景或是有較為濃重情感訴求的電影往往會選擇書法字來表現,既能給電影海報提升視覺表現,
  • 學UI設計需要會手繪嗎
    經常有很多人在問:學ui設計需要手繪嗎?一直以來都有人問類似的問題。那麼到底ui設計需要手繪能力嗎?手繪不好是不是不能做UI?不是科班出身,沒有手繪基礎怎麼學UI?今天我就針對UI設計要不要手繪能力做一些回答。
  • 電影海報中的字體設計
    今天,我們就和大家解讀一下那些以字體為主的海報。本文由壹手設計 tongnixcv 原創,轉載請註明。007:大破天幕殺機 Skyfall 2012估計歪果仁不流行躺槍的說法,2012年的007系列影片《007:大破天幕殺機》,海報中刻意強化的「系列感」和弱化的片名,表明了電影的屬性
  • 電影海報中的字體設計賞析
    優秀電影海報的字體設計,對我們在品牌設計或頁面設計時面對字體的處理,有著很好借鑑與參考意義。下面就針對電影海報中的字體設計進行探討,分析優秀的字體設計如何在海報設計中扮演重要角色。既然是關於字體設計,那麼就得從文字的歷史說起。我國是一個多民族的國家,文字種類很多,漢字是其中應用最廣泛的,也是中國的官方文字。漢字,亦稱中文字、中國字,是漢字文化圈廣泛使用的一種文字。
  • 【海報設計】聊聊電影海報中的字體設計
    「系列感」和弱化的片名,表明了電影的屬性,不過看完電影的同學都會驚呼「天塌了」!一代宗師 (2013)不管3D重映是不是騙錢的表現,我們都能從海報中的字體設計捕捉到「功夫」的精髓,組中有細,收放自如,重返20歲 (2015)很有童話味道的一部電影,字體的設計俏皮可愛,飾以舞臺中的閃光燈,輕鬆是電影的主題,講道理的事留給別人吧。
  • 遊戲UI的字體版權認知
    我們身邊會有很多版權意識薄弱的設計師,在界面設計時隨意使用字體,不知不覺中已經埋下了字體侵權的隱患。
  • 字體設計——拉長型與纖細型
    拉長型字體操作概述這種類型的字體操作起來比較簡單,效果非常明顯,字體特色也較易實現。在設計時我們一般會把字變細,然後做上下拉長處理,呈現出類似條形碼的感覺。拉長型字體的特點拉長型字體顯著的特點就是細長,筆畫的結構不一定勻稱,但是卻不影響美觀,而這反而具有一定的特色。雖然該字體有拉長的特點,但是文字內的筆畫也需要均衡分布,否則會出現頭重腳輕、胖瘦不均的情況,所以設計的時候要特別注意每一個筆畫的位置。
  • 嘗試把這四種風格設計用於ppt中
    我們在製作PPT時可以吸收UI設計中的技巧、理念。UI設計主要分類有平面設計、Web前端設計、移動端設計、互動設計。目前流行的設計風格有Merto、 Material Design、ios等,這裡分析一些常見U的設計元素,並闡述如何將其應用到PPT中。
  • UI設計師必備的6個配色網站
    對於程式設計師來說,UI設計我們有必要懂嗎,答案是肯定的,不管你是後端開發也好,前端那就更不用說,一定要學會有審美的細胞,雖然UI不是我們後端的必須懂的,但我還是建議你知道它的一些常用的配色網站,有時候我們也得自己修改前端代碼,也需要知道顏色的值,今天我給大家分享6個常用的配色網站,對於想從事
  • 聊聊那些電影海報中的字體設計
    007:大破天幕殺機 Skyfall 2012估計歪果仁不流行躺槍的說法,2012年的007系列影片《007:大破天幕殺機》,海報中刻意強化的「系列感」和弱化的片名,表明了電影的屬性一代宗師 (2013)不管3D重映是不是騙錢的表現,我們都能從海報中的字體設計捕捉到「功夫」的精髓,組中有細,收放自如,略帶透視的字體組合顯得很有動感,視覺效果非常另類。
  • 30個案例實操,讓你秒懂手寫字體設計的商業變現技巧!
    隨著智慧財產權相關法律的完善和版權保護意識的提升,字體「公函警告」「律師函警告」的現象也越來越常見。2007年,方正起訴暴雪字體侵權,最終判決暴雪公司賠償方正公司經濟損失200萬元。2012年,熱門影片《失戀33天》,因片頭字幕、簡訊字幕等使用了未授權字體,最終賠付版權方2萬元。2016年,《九層妖塔》因使用了未授權字體中的7個字,就被索賠51萬元。
  • 【PPT】燈管霓虹效果的字體在PPT中的創意設計
    今天我們要在PPT中製作燈管霓虹效果的字體,設計一個創意的PPT作品。我們看一下作品,如下圖:接下來,我們就要設計今天的主要創意元素了:燈管霓虹字體。這個霓虹字體的設計也不難,精髓在於顏色和氛圍的把控。我們先來拆解一個筆畫。如下圖:
  • 字體設計——經典常規型與幾何線趣型
    經典常規型字體的特點這類字形是非常常見的,筆畫形式多種多樣,有橫平豎直的,也有在宋體字筆畫上做了基礎變形的,整體看起來簡潔直觀,識別性好。同時,這類字體有別於普通字庫字體,嚴謹又不失其個性和特色,不管是作為單獨的品牌標誌還是搭配圖形,這類字體的使用都是比較普遍和常見的。
  • 字體太多怎麼選?十幾年的設計總監最擅長用這七種字體
    關注「百家號」的設計師朋友們如果讀了我們發的《版式設計系列課程2:版式設計中的「三定一執行」是什麼意思?》這篇文章,那一定會留意到在文中的海報和文末留出的問題。沒錯,就是關於字體選擇的問題。那麼今天就來聊聊版式設計中的「字體選擇」這個話題。
  • 十分鐘 - 帶你掌握精準選擇字體的方法
    之前網友們設計的海報其中不乏一些精彩的作品一起和好玩君來欣賞欣賞吧【免費資源】15套易拉寶設計素材模板矢量素材打包下載ui設計規範文檔、勞動節、520、小滿、兒童節、父親節插畫1、插畫2互動設計1ui工具包10圖標1、圖標2、圖標3、Helvetica