移动设计字体规范整理.doc_第1页
移动设计字体规范整理.doc_第2页
移动设计字体规范整理.doc_第3页
移动设计字体规范整理.doc_第4页
移动设计字体规范整理.doc_第5页
已阅读5页,还剩1页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

iOS&Android 移动设计字体规范整理大全对于一位移动APP设计师来说,字体的把控非常重要。特别是app设计。因为不同的字体在不同的移动终端显示出来的效果真是百花齐放。终极没达到我们设计图的效果。所以,ios和android都有各自的设计规范。也是告诉各位一定APP设计和开发人员可以遵循这些规范来设计开发,尽量达到最佳显示效果。一、IOS版本的字体设计规范和常识iOS 的 1 pt = 逻辑像素 1 px = 物理像素 1 px(非 Retina)或 2 px(Retina)如果你新建 Photoshop 文档时将 PPI 设定为 72,则文档中 1 pt = 1 px;如果你把 PPI 设为 144,则 1 pt = 2 px。单位术语:pt: point px: pixel PPI: pixels per inchPhotoshop 默认使用 1 inch = 72 pt 的标准,所以为什么我们设计APP界面设计效果的时候,设置的分辨率就是72,主要是这样设计方便、免了换算之苦。1、如果你是iOS客户端开发人员,你在编程时使用的默认简体中文字体,就是常用的华文Heiti SC。2、如果你是iOS UI设计人员,你在设计时如果使用Photoshop,请选中“黑体-简”或Heiti SC,并设置为“细体”、“浑厚”是与iOS上的实际效果最接近的(Heiti SC Thin)。或者是冬青黑简体、黑体等等。英文字体是 Helvetica Neue Ultra Light。如今iphone6和iphone6+开始流行,我们设计的字体规范也有所改变。因为iPhone6和iPhone 6Plus都有标准模式和放大模式2种分辨率:1.iPhone4和iPhone5宽度一样,5只是比4高176像素,所以5和4一套规范即可;2.iPhone6的放大模式分辨率是6401136,和iPhone5正好相同;3.iPhone6的标准模式分辨率为750*1334,整体放大1.5倍正好是iPhone6 Plus的放大模式1125*2001。我们来看淘宝购物车的截图(从左到右依次为iPhone4、5、6):总结:我们可以看出iPhone 4、5、6是可以共用一套字体大小规范。而iPhone6 plus在放大模式下的字体正好是在此基础上放大 1.5倍:如下我们来看下一般规律(72像素/英寸下的字号大小规律,即72ppt下面)导航栏标题:大概34px-42px;现在标题越来越小,一般36比较合适。如果是iphone plus 那么字体大小应该是51-63px之间。 最合适的54px。标签栏文字:2024px。ios自带应用都是20px。个人认为标签栏时(图标文字)形式的的话不要大于22比较合适。正文:28px36px,新闻类基本都在用36,比如网易新闻正文部分。除了新闻类,其他类型的APP 正文 列表 表单 都可以是30-32px左右。二、安卓android APP字体设计规范安卓中文字体:droidsansfallback安卓英文字体:roboto安卓手机的默认中文字体都是droid sans fallback,是谷歌自己的字体,与微软雅黑很像,小米miui v5 用的也是这种字体。sp与px的换算公式:sp*ppi/160 = px如果想看下详细android字体:Android移动APP设计字体规范详解题外话:为什么android安卓机器上的字体没ios的好看,原因有2点第一点:android分辨率很多,字体渲染机制不一样。第二点:和 iOS 相比,Android 的“字体系统”最大的一个缺点其实是缺字。正好体现了 iOS 在 Android 字符数面前的优越感。附加各大主流的移动或者桌面操作系统的默认中英文字体以下列出的是西英文字体和简体中文字体:Windows(Vista 及更高版本)Segoe UI微软雅黑 1(Windows 8 开始用微软雅黑 UI 2)Windows(Vista 之前)Tahoma中易宋体(又称宋体、SimSun)Windows PhoneSegoe WP方正等线(简体中文 locale,详见 3)或微软雅黑 1(英语 locale)Mac OS XLucida Grande华文黑体(具体情况比较复杂,详见 4)iOSHelvetica Neue 5(非 Retina display 的设备用 Helvetica)华文黑体(该版本称作黑体-简,参见 4)AndroidDroid

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论