APP界面的字體規範!

2020-12-08 設計智造

文字設計是界面設計中最細節的部分,也是最不可忽視的基礎部分。在界面設計過程中要考慮兩大因素:文字辨識度和界面的易讀性。

在任何一個有效的界面裡,具有層次的設計可以將界面上重要的部分與次要的部分區分開來,可以從對齊、間距、顏色、縮進和字體等方面做文章。當所有這些都調整運用得適當時,可以提高整個界面的可讀性。

很多剛做APP界面的設計師,經常會因為字號、字體顏色、間距而困擾。拿到設計需求後,開始進行設計,不知道從何去調整界面的字號和行間距等。

常規字體

界面中的每一個文字、每一個字符都很重要。好的文本就是好的設計,文本是最根本的界面,需要我們設計師來塑造和打磨這些信息。字體之間最大的差異並不在於有無襯線,而在於字體與字體之間形體的差異。但是很多字體之間差異不大,有些新字體甚至是已有字體進行了細微的改造後產生的。

於是,就把字體分成了幾個大的系列,同一個系列中的字體大體相同,稱作通用字體系列。其中包括以下五個系列:

①帶襯線字體。Times New Roman是默認的s帶襯線字體,中文字體的話,是宋體、仿宋之類的字體。

②無襯線字體。默認的sans serl字體,中文字體中微軟雅黑、黑體等都是這類字體。

③等寬字體。這個字體裡面的每個字母都有相同的寬度,通常用於顯示程序代碼等。Courier是默認的等寬字體字體,而對於中文每個漢字都是等寬的。

④模仿手寫字體。手寫體比較有個性,通常用於標題、logo等等。這個字體系列沒有默認字體,英文來說,通常用 Comicsans,中文的話,行書系列、草書系列的字體等,都可以算作手寫字體。

⑤裝飾字體。多數用於標題,極具個性,字體繁多,為藝術字體。

常規字號

由於行動裝置空間小,環境光通常比較微弱,所以在字體與字號的選擇上更要多注意。文字大小只是一個範圍,這要根據設計的視覺效果來決定,字體大小沒有嚴格標準,但在APP設計中,涉及4種字號32px、28x和24px,字號要用偶數,都是4的倍數。

這裡需要給大家普及一下px的概念。px指像素單位,10px表示10個像素大小,常被用來表示字號,很方便很直觀。

間距與行寬

行寬是一行文字的長度,舒適閱讀的理想行寬是50個字符左右,行距的大小取決於文字的設計和間距;行距是行之間的空間,行距過緊或過寬都會給用戶造成閱讀障礙,標準的行距是1.4EM,在移動端界面設計中,我們通常用x的高度來代表;字間距沒有固定的數值,我們在界面設計時追求易讀性原則,通常不會調整字間距。

字體顏色

在界面中的文字分為三個層級,包括主文、副文、提示文案等。在白色的背景下,字體的顏色層次其實就是黑、深灰、灰色。常用的色值是#333333、#666666、#999999。

相關焦點

  • APP界面字體的規範使用
    一個好看的界面設計,文字的設計是不容忽視的,也是最細節的部分。針對文字設計,我們需要考慮的兩大因素:文字的辨識度和界面的易讀性。
  • APP界面設計:如何選符合產品氣質的字體
    iOS7字體設計規範以及APP設計中英文字體下載Android系統當中的APP界面設計字體:英文字體:Roboto         中文字體:Noto   (Android 5.0 Lollipop 思源黑體字體)也是目前安卓系統當中使用的最新字體,之前的字體還有如下Droid字體。字體設計也比較優雅。
  • 界面設計必備!全方位科普常用的字體規範
    很多剛做APP界面的設計師,經常會因為字號,字體顏色,間距而困擾。拿到設計需求後,開始進行設計,不知道從何去調整界面的字號和行間距等。容易碰到的問題是頁面和頁面的字號調著調著就大小或顏色不統一了。並且容易導致設計稿反覆得修改。設計出來的效果圖文字左右間距層次不齊,導致與預期不符等。
  • 移動界面尺寸!安卓720*1280界面尺寸規範參考
    今天25學堂的老譚童鞋跟大家繼續分享720*1080的界面設計尺寸規範。主要講解 屏幕分辨:1280×720像素(720P)  APP界面設計規範。這樣的手機又vivo智能收款機、三星Galaxy A5、華為榮耀等手機。
  • 界面好看,字體當然不能拖後腿
    字體作為設計中重要的模塊,卻很少被提及,大部分設計師遵循常規地進行字體的選擇。實際上,如果設計的字體出彩,那麼對設計而言將是錦上添花。一、字體的價值在界面設計中,字體應該是最被忽略的一個點,我們有圖標規範,設計規範,表單,顏色規範等等,但是對於字體規範少之又少。
  • 交互乾貨必收 | App界面互動設計規範
    在上篇《APP界面設計風格》確定下來後,產品經理(兼互動設計)還不用著急將所有的交互稿扔給設計師進行細緻的界面設計。在細節設計啟動前,拉上設計師和安卓前端開發、ios前端開發一起商議確定設計規範先吧!APP設計規範指對APP界面進行風格統一,對界面元素的樣式、顏色和大小設定統一的規範和使用原則。與設計、前端約定好統一的設計規範很重要,約定設計規範可以減少產品、設計、前端的溝通成本;可以使界面設計整潔、統一,減少界面元素的重複設計;可以減少設計素材,控制安裝包的大小。
  • 【設計必備】最新常用字體規範
    界面設計必備,常用字體規範》相信很多人都看過了。但是今天設計趨勢變化了,規範也改變了。你造嗎?所以今天老王必須擠出時間來更新一下這篇文章,並豐富一些使用規範。沒錯,還是那句話!一句話:通過常用字體規範可以幫助你做出符合要求的設計一.字不過三!很多大神說過色不過三,其實在同一個APP或在同一個設計作品中字體也不要過三種樣式,一般在每個項目設計中使用1-2個字體樣式就夠了,然後通過對字體大小或顏色來強調重點文案。
  • 界面視覺設計要素:字體篇
    字體是界面設計中重要的構成要素之一,它能輔助信息的傳遞,是文字的外在表現形式;字體還可以通過其獨有的藝術魅力,表達情感體驗,並塑造品牌形象。本文總結了字體設計的重要性、界面常用字體推薦以及國內外權威設計體系中對字號、行高、字重的選擇和設置。如果你想對界面字體設計有更深一步地了解和運用,本文將會提供一些幫助。一、字體1.
  • 譯文|界面設計中,關於字體設計的10 個錦囊
    字體作為界面設計的一個元素,對用戶的閱讀體驗起著至關重要的作用。本文是 UI 設計師 Viljami Salminen 分享的用戶界面字體設計的基本規則和技巧。在現代的交互界面中,文本即界面,字體設計則成為主要的設計規範。字體即界面設計的基石在用戶界面中,每一個單詞和字母都至關重要。好的字體等於好的設計。字體成了界面設計的基石,而我們設計師,則是這些這類「信息基石」的修造者。觀察下面這個例子,想像一下,把以下圖片中的元素拆解開來,看看會是什麼樣子——一個個單詞、兩張圖片、幾個圖標。
  • 乾貨:VR APP界面設計實踐指南
    一、VR app的類型從設計的角度講,VR app大致由「環境」與「界面」這兩部分所組成。你可以將「環境」理解為戴上VR頭顯之後所進入的那個世界,譬如你所身處的那個虛擬行星表面,或是正在帶你飛馳的過山車。「界面」指用戶為了遊歷環境或控制流程體驗而必須與之進行互動的一系列虛擬對象。
  • app界面設計的流行趨勢
    app界面設計的流行趨勢,界面作為我們認識app的第一道門檻,是app的「面子」,更是不可忽視的一項重點設計,為了建立有效的ui,設計師需要根據移動端app本身的特性和當下趨勢,作出不一樣的改變。app界面設計的流行趨勢,今天的分享就到這裡,希望能夠讓大家學習到新的知識。
  • B端設計|全方位講解下字體設計規範
    第二篇,我們就要回到 UI 整個類目裡最麻煩,也是最重要的規範類型——字體。
  • UI設計規範-字體
    文字是APP中最核心的元素,是產品傳達給用戶的主要內容,所以說文字在APP的設計中是非常重要的,那麼,文字的字體如何選擇,字號如何設定,是否加粗,顏色如何設置?關於字體:在iOS 9推出之前設計師普遍採用華文黑體、谷歌思源、冬青等字體進行設計,iOS 9推出了蘋果自己的字體——蘋方!自此之後蘋方字體被廣泛應用於移動端設計中。
  • 騰訊視頻字體大小設置
    如果是彈幕字體,在視頻播放界面點擊【...】-【彈幕設置】;左右滑動字號按鈕,就可以調整字號大小了。如果是軟體界面字體,軟體本身是不支持的,不過可以通過手機系統自帶的字體設置來調整大小。具體介紹如下:
  • Python+PyQt架構:使用圖標字體打造無邊框通用導航軟體界面
    圖標字體庫(Font Awesome字體庫)提供了一套漂亮、可縮放的矢量圖標,對於這些圖標可使用CSS所提供的所有特性對它們進行更改,包括:大小、顏色、陰影或者其它任何支持的效果。在Python語言中,使用PyQt界面庫搭配圖標字體庫,可以作出非常炫酷的界面程序。
  • 人人都能懂的設計方法論:界面 X 字體 X 創造力
    極客公園在上周 Audi City 舉行 Geek+ 線下活動,來自 eico design、方正字庫與 bong 的嘉賓們,帶來了一場關於界面、字體與創造力的技術連彈,與在場的 60 多名極客探討了「科技與設計的共生關係」。
  • 5款手機APP界面設計欣賞與手機APP設計學習
    讓我們快來欣賞一下這些漂亮的彩色系列的APP界面設計作品。25學堂分享的這5款精緻的APP界面設計,除了讓各位欣賞之外,更重要的是讓大家可以從這5組app界面設計當中學習到自己想要的設計表達方式和技巧。無論是APP配色和APP宣傳設計等等。第一款:4個不同風格色彩的APP界面設計欣賞。
  • 20個優秀手機界面扁平化設計,讓你一秒看懂扁平化
    襯線字體,色彩和大小形成對比,強化重要信息。2) Vault financial app design設計師:Higher所用工具:Sketch, PS, AI亮點:logo 「 V 」 的設計非常巧妙,凸顯主題Vault Financial app design,且配色簡單。純白背景色,留白空間。
  • 手機APP界面設計策略!
    在手機界面設計中,圖標被廣泛地運用,它可以單獨存在顯示信息,但是因為它對信息進行高度的濃縮,而對於用戶來說卻是負擔,所以它時常與文字進行配合使用。②文字元素。在手機界面設計中,文字是不可或缺的,但是它也不是通篇存在的,有時它會與圖標搭配使用,使用戶對圖標的含義有更加清晰地認識,有時它會單獨使用來顯示信息。③色彩元素。
  • 微信老外PM揭秘:機器人與APP聊天界面中的誤區
    「人們不需要每一個都對應單獨業務的app,」Facebook旗下Messenger負責人David Marcus表示,「在一個設計良好的產品裡互通信息,就比app的體驗要好。」他們認為,機器人將會驅動下一個「後 App」的時代。他們開放機器人API等做法也表明他們希望將人們帶入這樣一個時代。但或許他們都沒有注意到微信。