UI設計規範-字體

2020-12-09 快樂的小泥匠

文字是APP中最核心的元素,是產品傳達給用戶的主要內容,所以說文字在APP的設計中是非常重要的,那麼,文字的字體如何選擇,字號如何設定,是否加粗,顏色如何設置?

在一款APP中字號範圍一般在20-36之間(@2x),當然iOS 11中出現了大標題的設計,字號還是要根據產品屬性酌情設定。另外需要注意的一點是所有的字號設置都必須為偶數,上下級內容字號極差關係為2-4號。

關於字體:在iOS 9推出之前設計師普遍採用華文黑體、谷歌思源、冬青等字體進行設計,iOS 9推出了蘋果自己的字體——蘋方!自此之後蘋方字體被廣泛應用於移動端設計中。

一般情況下,我們要定義尺寸的字號包括:

1、標題文體,用於標題或都按鈕等

2、正文字體,主要用於界面中顯示的文字正文

3、列表分組標題,主要應用於列表區塊

4、次要文字信息,主要應用於一些提示信息的文字或者次要信息的文字

5、標籤文字,主要是應用在標籤上。

其它可能還有不同的類型,是需要大家結合自已的產品,具體情況而定。、

關於字體顏色和是否加粗:字體的顏色設置我們一般很少用純黑色,一般用深灰色和淺灰色、細體和粗體(注意要用字體本身的字重,不能用PS的加粗功能)來區分重要信息和次要信息,進行信息層級的劃分。

相關焦點

  • 優秀UI設計師必知的字體設計規範
    前幾期給大家分享了關於UI設計的排版、配色、流行趨勢、情感化設計等等。這些都固然重要但是似乎忽略了什麼,沒錯那就是字體!今天胡老師就和大家聊聊優秀UI設計師必知的字體設計規範。字體為什麼重要?字體不僅僅只是字體,它更是用戶界面設計的重要組成部分。好的排版將建立強大的視覺層次,為網站提供圖形平衡,並設置產品的整體色調。字體指導並通知用戶,優化可讀性和可訪問性,並確保出色的用戶體驗。
  • 一份超詳細的UI設計規範全攻略
    ▲https://www.materialui.co/相反差的字號會讓界面看起來山寨,關於字號的選擇,可以遵循iOS的規範大小,也可以根據自己產品個性去定義你的字號。假如你是電商產品,那麼你可能需要對價格字體單獨設置字號,如果你是金融產品,那麼對應的字號也需要定義好對應的大小層級!
  • WeUI 2.0.0 發布,微信 Web 應用設計 UI 庫
    WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫,由微信官方設計團隊為微信 Web 開發量身設計,可以令用戶的使用感知更加統一。新版更新內容如下: 【增強】 顏色規範、字體大小規範、間距規範對齊微信 7.0 新視覺風格 【增強】 更新按鈕 UI 【增強】 按鈕改為默認定寬184px,需要用回拉通型可加 classweui-btn_block 【增強】 新增行按鈕 UI 【增強】 更新圖標 UI 【優化】 weui-msg
  • 乾貨篇,最佳UI設計規範10例
    不得不承認,整理設計規範是UI設計師設計能力的一種體現,尤其是便隨項目越來越多的情況下,對設計規範的把控力,成為了設計師職業素養的一種體現。無論還是處於自己設計創作的階段,還是和程式設計師溝通推動產品開發的階段,設計規範完善與否,對產品的一致性和用戶體驗有著近乎於決定性的關鍵作用。在UI設計的過程中,設計規範是一個關鍵步驟。整理設計規範很苦惱?
  • 乾貨|如何構建UI組件設計規範
    視覺一致性包括UI的顏色、字體、大小、位置和其他視覺方面,它能幫助用戶識別UI元素並歸類。例如,某種字體顏色可以策略性地用於幫助用戶明白他們按下特定按鈕時會得到什麼。鑑於目前的行業情況,UI組件還可以作為用戶體驗組件,將功能和視覺一致性結合起來。
  • ...Segeo 字體打包下載 - 字體,字體下載,Metro UI,Metro,Segoe...
    今天我們就來折騰字體,2012年這個Win8年,不Metro就絕對是Out的事情了。但是如果要玩Metro,能離得開Segeo系列的字體麼?當然不能,所以今天IT之家就特別開通了字體下載分類,給大家提供18款Franmonzter提供的Segeo字體打包下載,要的拿去(尤其是搞設計的童鞋哦)——
  • UI設計規範10條
    偏重視覺概念,常見文檔或圖像格式呈現(還可以擴展) 內容:對設計作品的字體(Typeface)、字型(Font)、色板、品牌標識規範(Brand Guideline)、Icon等要素進行展示和說明 這個部分主要的功能是方便設計師與設計師之間,展示產品的視覺風格。
  • 說說UI設計規範的那些事兒
    什麼是UI設計規範通俗來說,設計規範是圍繞在某種風格或者大型設計項目下形成可視化、數據化的標準,針對相對獨立的體系建立的統一遵守條款。提高開發效率、解決代碼冗餘問題通過設計規範,程式設計師可以了解到哪些控制項是可以一次性寫好並能重複調用,同時在規範的輔助下,程式設計師在搭建全局共用元素時規則更會加清晰。例如icon、按鈕、行間距、字體大小、色值等等。這樣既可以提高開發效率,又可以減少客戶端安裝包的大小。
  • UI設計中的IOS14設計規範
    你了解UI設計的規範嗎? 很多新人在開始做移動端UI設計的時候,對界面的尺寸規範不是那麼清楚,很多時候都是憑藉自己的感覺和經驗去設計,導致做出來的頁面總是不那麼盡如人意,從而一遍遍修改,拉低了工作效率。 那麼,今天我就跟大家聊一聊,設計規範的那些事!
  • UI設計哪個學校好?零基礎學UI設計教程分享
    UI設計哪個學校好?零基礎學UI設計教程分享。沒有任何基礎到底適不適合學習ui設計,多久可以學會,如果零基礎想學習ui設計哪裡好呢?其實ui設計入門簡單,很多職場轉行和畢業的新手小白系統的學習幾個月都能學會,所以大家想學習ui設計其實不要太過於擔心。
  • 為什麼要制定UI設計規範
    1、多個設計師同步設計在同一個項目中存在多個設計師縱橫設計配合,一避免同一個項目中存在控制項混亂問題,方便吧視覺統一性,提高工作效率。2、提高開發效率,減少返工率以及縱向到前端開發他們有了規範約束後,在開發項目中會大大提高設計稿的還原度,以及規範建立他們的控制項庫,提高復用率,減少返工成本,如果做到了規範,程毓媛從視覺規範中了解到哪些控制項是可以一次性寫好的並可以反覆調用。
  • 一篇文章搞定UI文字設計規範
    原文地址:Echo的設計筆記(公眾號)作者:EchoUI設計中,文字設置是必不可少的一環。文字設置過程中涉及到字體類型、字號、字重、行高、行寬以及顏色等。本文講述的文字設計規範,包含以下部分:1、類型2、字號3、字重4、行高5、行寬6、顏色1、類型iOS設備的系統默認字體,中文為蘋方,英文&數字為SF UI Text。
  • 漢字設計原則規範!讓字體更有韻味
    文/嚴明軍 無規矩不成方圓,無理無據無設計。漢字設計設計之前,必須要對基本的原則規範有一個了解。①漢字的筆畫規範。所有的漢字都是由有規律的筆畫組成的,都可以歸納成八個筆畫,而這八個筆畫同時體現在永這個漢字上。八個筆畫分別是點、橫、豎、撇、捺、提、折、鉤,所以永字成了學習字體和書法的研究對象。
  • UI設計師工作流程規範,想轉行的小姐姐看過來
    序號 流程節點/事項規範/輸出備註1拿到原型分析流程分析用戶在使用產品過程中,需要進行的行為與認知過程修訂版備檔3詳細UI設計進行高保真設計稿設計工作,完善不同狀態下的頁面布局和內容展示、用戶操作反饋提示、通用或異常的場景等等。
  • 初學者必備,UI設計中字體的相關屬性!
    對於一名UI設計師來說,字體是一門基本語言,更是設計師需要掌握的基本技能之一。目前常用的字體有很多種,比如黑體、宋體、楷體等。在平時的項目設計中,為了讓頁面中的字體更加貼合業務場景,設計師需要對字體的字距字高進行調整。接下來千鋒就給大家講解一下字體的相關屬性。
  • PPT製作:企業PPT模板字體設計規範
    既然需要投影那你就得了解距離,因為今天小編所講的內容就是字體設計規範。距離的不同也標誌著字體的不同,至少你要讓吧別人看得清楚你的內容,所以不是Word合適的字體,PPT也適用。第一,PPT和Word不同,不再繼續使用默認的宋體和楷體,應該使用黑體系列。中文字體最常用的就是微軟雅黑,西文字體建議使用Arial,這倆就像一對小情侶是絕配,混排時就像一種字體。
  • IOS字體規範
    移動界面設計由於針對繁雜的設備尺寸,字體規範往往是新手容易頭疼的問題。
  • Get了這10點UI設計規範,你也能成為優秀的UI設計師
    產品發展日趨平穩時,產品定位和品牌形象已進入穩定狀態,參與設計的人越來越多,設計的統一性和效率的問題也漸漸顯現。因此,為了保證平臺設計統一性,提升團隊工作效率,打磨細節體驗,就需要我們定義和整理設計規範。1.確定規範內容UI 設計中,設計規範是一個關鍵步驟。
  • nuxt打包element-ui上傳阿里雲oss(CDN)上字體出現跨域問題
    1.先要理解vue和nuxt的assets文件夾和static文件夾的區別,asset是會被webpack打包,你只有將字體文件放到static就會當成靜態文件直接訪問,不會處理。所以我將element-ui的所以樣式都放到了static文件中,如下圖:這些字體你可以在node_modules文件中element-ui/lib/theme-chalk查找2.你需要將element-ui/lib/theme-chalk的樣式全部放到assets文件中3.在nuxt.config.js加入如下代碼/* ** Global
  • 全面戰爭三國UI字太小怎麼辦?字體大小修改方法分享
    字體大小修改方法分享 全面戰爭三國中UI字體大小要怎麼修改,修改字體大小的方法是什麼呢,我們來一起看下字體大小修改的具體流程步驟。1440P以下,解析度調低,ui_auto_scale false的話,字會變糊。另外大概就色差補正改100%會好很多。在%AppData%\Roaming\The Creative Assembly\ThreeKingdoms\scripts裡;有個preferences.script.txt。