2018最新iOS端界面UI設計規范整理


在iPhone 6還沒出的時候,都是用640×1136 px來做設計稿的,自從6的發布,所有的設計稿尺寸以750×1334 px來做設計稿尺寸

以750x1334px作為設計稿標准尺寸的原由:

  1. 從中間尺寸向上和向下適配的時候界面調整的幅度最小,最方便適配。
  2. 大屏幕時代依然以小尺寸作為設計尺寸,會限制設計師的設計視角。
  3. 設計安卓版本時只需做最小的設計調整,提升設計效率。

所以做設計稿事請以750x1334px來做設計稿

iPhone界面設計規范:

images

iPhone 界面尺寸:

images

 

images

左右我習慣設置24 px的距離,我通過對國內外很多APP就行了對比,總結是24 px更合理,這個是我的個人習慣,所以也不要當做是明文規則,你設置為30 px,也是可以的。

然后就可以開始你的設計了.

關於設計字體

先來看一下字體的歷史演變過程

  • iOS 9:英文字體為Helvetica Neue
  • iOS 9:中文字體由為冬青黑
  • iOS 10:英文字體為San Francisco
  • iOS 10:中文字體為蘋方

 

設計稿標准文字

文字選用“蘋方(PingFang SC Light) ”標題可加粗選用“蘋方粗體”

文字搭配

一般用4和6的梯度搭配,例如:一般文字30px標題搭配26px詳情, 帶頭列表30px標題搭配22px輔助信息
詳情頁標題文字與詳情文字間距
間距為8的倍數,例如:24px、32px、40px等

 

行間距設定
行間距與字號比例為1.5倍

 

對齊原則
段落文字采用“兩端對齊左對齊”,避頭尾為“嚴格”,首行嚴禁放5標點

 

關於字體大小的問題:

    • 頂部操作欄文字大小:34-38px
    • 標題文字大小:28-34px
    • 正文文字大小:26-30px
    • 輔助性文字大小:0-24px
    • Tab bar文字大小:20px

 

引自:http://www.shui-mai.com/2018zuixiniosduanjiemianuishejiguifanzhengli/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM