tft每日頭條

 > 科技

 > 手機端頁面字體大小規範

手機端頁面字體大小規範

科技 更新时间:2024-09-10 19:10:33

手機端頁面字體大小規範(手機界面設計字體大小知多少)1

今天我們來讨論一下界面字體大小的問題,上篇文章我們讨論到使用什麼字體的問題,這篇文章我們主要讨論手機界面設計中字體應該多大的問題。

做移動界面和做網頁,平面最大的不同之處在于當你使用軟件設計的時候,你無法直觀的看到字體的大小,很多同學受限于網絡及設備的限制,無法實時預覽自己的效果圖,因此經常會出現一個問題,界面設計完成以後文字全部看起來偏小了一些,或是偏大一些,不太統一,因此在這裡我給大家做一個總結,希望能夠幫助到大家。

iOS系統文字單位pt,Android系統文字單位sp,以下文字都按照@1x倍率;

常規界面文字大小

手機端頁面字體大小規範(手機界面設計字體大小知多少)2

PS軟件一般設計基于@2x倍率尺寸,因此文字都需要乘以2,Sketch軟件設計的一般基于@1x倍率尺寸,因此直接使用上面文字大小即可。

但是實際操作的時候,我們也要學會靈活使用,不同風格的應用,字體大小是完全不一樣的,給人感覺也是不一樣的,隻有多去對比不同的應用,對比它們使用字體的大小,再加上反複對比手機預覽圖效果,才能更好的保證界面設計文字大小比例關系。

在這裡,我分别以58同城,知乎,字裡行間,今日頭條四款應用舉例,一起來分析一下它們對應的字體大小。

58同城

手機端頁面字體大小規範(手機界面設計字體大小知多少)3

大小:10,12,13,16,30

總結:58同城更新到現在這個版本後,圖标風格簡潔清爽,界面看起來很精緻,我很喜歡現在這個版本,但是由于産品屬于分類信息,涉及到的文字比較多,目前界面上的文字相對偏小,主體文字集中在10,12左右,看起來比較費眼,想必年紀大一些的用戶很容易就流失掉了。

知乎

手機端頁面字體大小規範(手機界面設計字體大小知多少)4

大小:10,13,14,15,16,17

總結:知乎這款應用大家可以發現,文字大小使用的字号相對較多,文字的變化也基本不是很大,有很多文字就隻是相差1pt之間的區别,字号多了以後顯得頁面比較碎,如果可以再删掉兩個字号,通過不同的顔色或是粗細處理,我覺得頁面看起來會更幹淨。

字裡行間

手機端頁面字體大小規範(手機界面設計字體大小知多少)5

大小:13,14,15,20,14

總結:字裡行間是非常好的一款應用,排版比訂閱号排版強太多了,界面整體設計也非常幹淨,符合2017當下最流行的風格,字體處理也很細膩,粗細運用是我覺得最好應用之一,推薦大家可以下載研究一下。

今日頭條

手機端頁面字體大小規範(手機界面設計字體大小知多少)6

大小:10,12,14,17,19,20

總結:今日頭條作為資訊類平台,文字信息很多,但目前來看除了頂部條信息比較多以外,其它地方排版還是比較幹淨的,圖文處理整潔幹淨,文字大小也是比較統一的,同時作為新聞類的平台,一般這一類型的應用文字都可以調整以适應不同的用戶,這是我覺得以後大部分文字型應用可以增加的一個很好地功能。

最後,我們需要注意的是,文字大小并不是一成不變的,不同的應用,文字大小可以有不同的變化,其次文字的字号最好固定在幾個尺寸以内,不要頻繁切換字号大小,保持頁面的整潔性,希望這篇文章能夠給你提供參考,更好的幫你處理好應用中文字大小比例。

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关科技资讯推荐

热门科技资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved