app界面設(shè)計(jì)字體規(guī)范

2022-05-27    分類: 網(wǎng)站建設(shè)

創(chuàng)新互聯(lián)編者今日為你推出《app界面設(shè)計(jì)字體規(guī)范

通過對不同類型的app進(jìn)行總結(jié),總結(jié)出app的字體規(guī)范。

一、字體選擇

1.IOS:蘋果ios 9系統(tǒng)開始,系統(tǒng)最新的默認(rèn)中文字體是:蘋方。英文字體是: San Francisco

移動(dòng)界面設(shè)計(jì)規(guī)范,手機(jī)界面字體規(guī)范,app界面設(shè)計(jì)字體規(guī)范

2.Android:英文字體:Roboto,中文字體:Noto

二、案例分析

1.以今日頭條界面為例,導(dǎo)航主標(biāo)題字號為40px,正文標(biāo)題為36px,輔助性說明文字為24px,小字(視頻長短,標(biāo)題欄按鈕名)為20px,頭像名為28px。字體大小代表的層級關(guān)系一目了然。



移動(dòng)界面設(shè)計(jì)規(guī)范,手機(jī)界面字體規(guī)范,app界面設(shè)計(jì)字體規(guī)范

移動(dòng)界面設(shè)計(jì)規(guī)范,手機(jī)界面字體規(guī)范,app界面設(shè)計(jì)字體規(guī)范


2.正文部分,導(dǎo)航欄標(biāo)題文字為36px,內(nèi)容標(biāo)題為48px,正文為36px,小字為22-20px。

(因app性質(zhì)不同,今日頭條作為閱讀類型的app,會(huì)更注重文本的閱讀便捷性。所以字號選擇上會(huì)偏大一些。)

3.再以微信為例,導(dǎo)航欄標(biāo)題文字為36px,內(nèi)容標(biāo)題文字為34px,內(nèi)容為28px,輔助性說明文字為24px。

4.最后以豆果美食為例,豆果美食是我認(rèn)為界面閱讀很漂亮的一個(gè)APP界面設(shè)計(jì)。文字閱讀給人一種很精致舒服的感覺。同閱讀類型的新聞app和工具類型的app在字號選擇上相比,它的文字選擇的要稍小一些。如導(dǎo)航欄的字號為30px,頁面大字號為34px(分類標(biāo)題),其次是32px,28px,24px,20px

這是豆果美食的內(nèi)容詳情頁,在正文標(biāo)題用到了36px,正文內(nèi)容為32px,次要文字為28px,其次是24px,22px,20px。

三、總結(jié)

總結(jié)如圖,選擇字體大小時(shí)應(yīng)根據(jù)app的性質(zhì),風(fēng)格,定位來進(jìn)行選擇,應(yīng)通過文字大小表現(xiàn)出內(nèi)容的輕重,層級劃分,做到層級關(guān)系明顯。除了對字體進(jìn)行字號大小的區(qū)別,還可對文字進(jìn)行樣式(加重字體)和顏色的區(qū)分。

文章名稱:app界面設(shè)計(jì)字體規(guī)范
標(biāo)題來源:http://muchs.cn/news/159521.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開發(fā)、網(wǎng)站營銷靜態(tài)網(wǎng)站、網(wǎng)站策劃、用戶體驗(yàn)、網(wǎng)頁設(shè)計(jì)公司

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)