APP界面的字體規範!

2020-12-07 設計智造

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

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

很多剛做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。

相關焦點

  • 界面設計必備,常用字體規範
    設計 by 王鐸很多剛做APP界面的設計師,經常會因為字號,字體顏色,間距而困擾。字體樣式太多,導致頁面雜亂2. 使用的字體不易識別3. 字體樣式和內容的氣氛或規範不匹配怎麼避免這樣的結果發生呢?1. 了解不同平臺的常用字體設計規範2. 在每個項目設計中只使用1-2個字體樣式,而在品牌字有明確的規範的情況下,只需要一種字體貫穿全文,通過對字體放大來強調重點文案。3.
  • 《常用字體規範》——版式界面設計必備
    拿到設計需求後,開始進行設計,不知道從何去調整界面的字號和行間距等。容易碰到的問題是頁面和頁面的字號調著調著就大小或顏色不統一了。並且容易導致設計稿反覆得修改。設計出來的效果圖文字左右間距層次不齊,導致與預期不符等。這小節我將和大家理一理界面中常用的字體,字號,字體顏色及間距對齊的一些小經驗。希望能對大家有些幫助。
  • APP界面的設計風格 & 界面互動設計規範
    不同的是男喜好黑色,女喜好紫色;男討厭紫色,女討厭灰色。圖表僅供參考,在本人的產品體驗考察來看,在女性的顏色偏好中有著不可撼動的地位卻是紅色、粉紅色。如使用紅色作為主要設計風格的女性app:要確保設計風格匹配用戶人群的喜好,符合APP的定位以及給用戶傳遞APP正面良好的形象。確定設計風格階段,產品經理和設計師花費再多的時間和精力來折騰也是值得的。
  • 最新常用字體規範
    一個App,不同部分的字體字號你能準確地說出來嗎?很多剛做APP界面的設計師,經常會因為字號,字體顏色,間距而困擾。拿到設計需求後,開始進行設計,不知道從何去調整界面的字號和行間距等。容易碰到的問題是頁面和頁面的字號調著調著就大小或顏色不統一了。並且容易導致設計稿反覆得修改。設計出來的效果圖文字左右間距層次不齊,導致與預期不符等。
  • 阿多比設計學院告訴你:蘋果iOS界面規範
    華為的鴻蒙系統雖然早就上線,但是還沒有真正運用在手機移動端上,小阿在這裡期待著,希望有一天也能寫「華為『鴻蒙系統』的界面尺寸規範。」這兩者之間有一個明顯的區別就是iOS系統是非開源的,簡單來說就是不能別隨意改動的,連圖標都是必須帶圓角的,對互動設計師很友好的。
  • 優秀UI設計師必知的字體設計規範
    這些都固然重要但是似乎忽略了什麼,沒錯那就是字體!今天胡老師就和大家聊聊優秀UI設計師必知的字體設計規範。字體為什麼重要?字體不僅僅只是字體,它更是用戶界面設計的重要組成部分。好的排版將建立強大的視覺層次,為網站提供圖形平衡,並設置產品的整體色調。
  • 界面視覺設計要素:字體篇
    本文總結了字體設計的重要性、界面常用字體推薦以及國內外權威設計體系中對字號、行高、字重的選擇和設置。如果你想對界面字體設計有更深一步地了解和運用,本文將會提供一些幫助。一、字體1.界面常用字體推薦字體的選擇是由產品屬性或品牌特性的關鍵詞而決定。一般中文字體種類分為:黑體、宋體、仿宋、楷體等;英文字體種類分為:無襯線體、襯線體、義大利斜體、手寫體、黑字體等。中文字體推薦線上中文字體推薦使用 思源黑體、華文黑體、冬青黑體、微軟雅黑、蘋方-簡、黑體-簡、方正蘭亭黑。
  • 給每個app分別配置不同字體,這也行?
    我們已經提到過,使用手機自帶的主題系統換字體,或者通過substratum等方式換字體,都存在不能全局換字體的問題。
  • APP界面設計思路!
    文/陳巖 手機界面在人機互動的過程中,是進行信息輸入和輸出的重要媒介。任何手機信息交換的大部分過程都是通過手機界面進行的,不同種類的手機界面也將帶給人不同的視覺感受。我們在對手機APP 界面進行設計時,需要考慮APP本身的使用特點,保證大多數用戶都能獲得使用體驗,界面中應儘量減少按鍵數量,保證APP功能的合理性,這樣的界面會使得用戶操作更加方便流暢,也能相應地減少手機的運算負擔。②內涵豐富,寓意明確。設計時應在有限的二維空間中調整圖形、文字、按鍵、符號等元素的位置關係和比例大小,增加對界面內容表達的準確性和界面操控的靈活性。
  • app界面設計的流行趨勢
    app界面設計的流行趨勢,界面作為我們認識app的第一道門檻,是app的「面子」,更是不可忽視的一項重點設計,為了建立有效的ui,設計師需要根據移動端app本身的特性和當下趨勢,作出不一樣的改變。但當今設計趨勢瞬息萬變,在沒有統一標準的設計規則之下,緊跟設計趨勢,才能保證ui對用戶的吸引力常在。
  • 手機字體軟體哪款好用?3款字體app推薦
    《手跡造字》是由北京方正手跡數位技術有限公司出品的一款個人字庫製作工具app。UI設計非常乾淨,字體封面也十分簡約自然。手跡造字有著個人字體生成指南,用視頻和文字的方式進行說明,讓用戶能快速掌握創建字體方法。在動態裡還能欣賞其他人的字體了,碰見自己喜歡的字體還可以點讚比心。當你寫完初級字庫時,就能擁有一款自己的手寫字體,生成的手寫字體以及在軟體發現頁面看到的熱門字體,你可以下載到手機上,還可以替換掉手機系統字體。
  • APP扁平化界面設計方法!
    ②簡潔清晰的界面元素。扁平化界面設計中的元素追求簡潔清晰,其中的圖標、文字、按鈕、按鈕使用效果和背景都製作的非常簡潔清晰,降低用戶的認知障礙。③優化排版。在扁平化界面設計當中,我們多採用網格化的排版方式,這種方式有利於對空間的合理利用,也有利於對於軟體中常用功能的凸顯。
  • 適合WEB和APP設計的字體與排版指南
    今天的文章將比較全面的講解WEB和APP設計的字體與排版的知識,作為這行業的設計師,如果本文的規範還不懂的話,我想你的設計還是沒有入門,請大家認真看完哦。字號大小決定了信息的層級和主次關係,合理有序的字號設置能讓界面信息清晰易讀、層次分明;相反,糟糕無序的字號使用會讓界面混亂不堪,影響閱讀體驗。
  • 餓了麼高級設計師:界面視覺設計 5 要素之字體篇
    字體是界面設計中重要的構成要素之一,它能輔助信息的傳遞,是文字的外在表現形式;字體還可以通過其獨有的藝術魅力,表達情感體驗,並塑造品牌形象。本文總結了字體設計的重要性、界面常用字體推薦以及國內外權威設計體系中對字號、行高、字重的選擇和設置。如果你想對界面字體設計有更深一步地了解和運用,本文將會提供一些幫助。---文字是信息內容的載體,是記錄思想、交流思想、承載語言的圖像或符號,而字體則是文字的外在形式特徵,是文字的視覺風格表現。合適的字體可以輔助文字,將信息清晰、準確地傳遞給用戶。
  • win10系統的ps界面字體太小怎麼辦? 如何解決?
    win10系統的ps界面字體太小怎麼辦? 如何解決?時間:2017-08-11 16:45   來源:三聯   責任編輯:沫朵 川北在線核心提示:原標題:win10系統的ps界面字體太小怎麼辦? 如何解決?
  • iOS7界面概念設計:多彩圓形App圖標
    iOS7界面概念設計:多彩圓形App圖標 2013-11-15 11:20 | 作者:瑪莎 | 來源:265G QQ群號:624022706 | 我要分享:
  • 這麼精緻的植物app界面,先欣賞(lin)完(mo)再說
    作為APP設計師,有沒有想要設計一種關於植物app的衝動呢?今天學堂君跟大家分享一些設計非常精緻的植物app界面給大家。欣賞花草的同時,還可以把這些植物app設計出色的地方學(lin)習(mo)了。1、植物電商app設計界面欣賞
  • APP界面設計就該那麼美妙!
    以下是AnyForWeb為大家精心挑選的APP界面設計,供大家欣賞評論。1.第一個案例在背景上完全沒有任何的修飾成分,在色彩上也只是比較傳統的使用方法,它的特別之處就在於字體的變化上。如果想把一個APP做的儘量簡潔化,大多數設計師會選擇藉助於簡單的顏色或清晰的布局,很少設計師會主要在字體上做文章。
  • app字體大小產生的問題的一種解決方案
    好不容易通過基本測試,然後發給用戶試用的app,可能會因為字體問題遭客戶投訴。今天我就遇到了一種:當用戶將手機系統字體設置為大號時,使用app就會出現文字重疊和文字越界的問題,而且排版相當的不美觀。對於這種無法估計用戶會設置什麼型號字體的情況,淘寶等著名app提供的方案是統一使用規定大小的字體字號,而且禁止系統字體設置對自己的app產生影響。這裡講一下我用到的ionic怎麼禁止用戶修改系統字體,即是app不隨系統字體改變。
  • 第九期臨摹練習:視覺規範
    本期主題:視覺規範經過上幾次關於主題性質APP界面的作業,發現大家一直在一些很基礎的地方出問題,所以這次聯繫的主題就是視覺規範。其實嚴格來說並不是臨摹,因為要求是自己選一款市面上成熟的app,或者網站,反推出他們的視覺規範來。