當前位置:首頁>ps入門教程>ps基礎教程>設計知識>教程內(nèi)容

APP界面設計,IOS字體規(guī)范與多屏幕適配(1)(4)

來源:站酷 作者:Victor_J_C 學習:10486人次

移動界面設計由于針對繁雜的設備尺寸,適配和字體規(guī)范往往是新手容易頭疼的問題。這次主要介紹IOS的設計規(guī)范與流程。由于iphone 6的出現(xiàn),蘋果手機的分辨率也多了起來,適配進而也變的復雜。。。

先看市面上iPhone4、5、6、6 Plus的分辨率

分辨率與像素(分辨率單位是程序所說的單位——點即pt,像素為真實Pixel)

1.iphone4分辨率320*480pt,像素640*960px

2.iphone5分辨率320*568pt,像素640*1136px

3.iphone6分辨率375*667pt,像素750*1334px

4.iphone6 Plus分辨率414*736pt,像素1242*2208(注:Plus屏幕的實際分辨率只有1920*1080,實際情況是在此分辨率下渲染的圖像等比降低到1080P)

另外,iPhone6和iPhone 6Plus都有標準模式和放大模式2種分辨率:

APP界面設計,IOS字體規(guī)范與多屏幕適配(1)

看到如此多的分辨率,是不是有點暈的感覺,仔細拆分:

1.iPhone4和iPhone5寬度一樣,5只是比4高176像素,所以5和4一套規(guī)范即可;

2.iPhone6的放大模式分辨率是640*1136,和iPhone5正好相同;

3.iPhone6的標準模式分辨率為750*1334,整體放大1.5倍正好是iPhone6 Plus的放大模式1125*2001。

我們來看淘寶購物車的截圖(從左到右依次為iPhone4、5、6):

APP界面設計,IOS字體規(guī)范與多屏幕適配(1)

我們可以看出iPhone 4、5、6共用一套字體大小規(guī)范。

而iPhone6 plus在放大模式下的字體正好是在此基礎上放大了1.5倍:

APP界面設計,IOS字體規(guī)范與多屏幕適配(1)

看到這里明白了吧,對于字體我們只需要做一套iPhone 6的字號大小規(guī)范,Plus上直接放大1.5倍即可。

下面我們來看IOS上具體字體常用字號規(guī)律;

首先,一個視覺舒適的APP界面,字號大小對比要合適,并且各個不同界面大小對比要統(tǒng)一。

先說一般規(guī)律(72像素/英寸下的字號大小規(guī)律):

導航欄標題:大概34px-42px;現(xiàn)在標題越來越小,一般34或36比較合適。

標簽欄文字:20-24px。ios自帶應用都是20px。個人認為標簽欄時(圖標+文字)形式的的話不要大于22比較合適。

正文:28px-36px,新聞類基本都在用36,比如網(wǎng)易新聞正文部分。

下面是IOS人際界面指南上的具體要求:

1)正文樣式在大字號下使用 34 px字體大小,最小也不應小于 22 。

2)通常來說,每一檔文字大小設置的字體大小和行間距的差異是 2 px。一般為了區(qū)別開標題和正文字體大小差異要至少為4px。

3)標題和正文樣式使用一樣的字體大小。為了將其和正文樣式區(qū)分,標題樣式使用中等效果。(注意:mac電腦上默認使用黑體就有中等和細體2個選項)。

最后,最后關于字號大小規(guī)律,最好找比較好的應用截圖,然后量出現(xiàn)有規(guī)律直接套用即可:

APP界面設計,IOS字體規(guī)范與多屏幕適配(1)

關于多屏幕適配問題請看IOS字體規(guī)范與多屏幕適配(2).

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關注大神微博加入>>

網(wǎng)友求助,請回答!