手机设计字体规范.doc

上传人:F****n 文档编号:91018496 上传时间:2019-06-20 格式:DOCX 页数:12 大小:27.04KB
返回 下载 相关 举报
手机设计字体规范.doc_第1页
第1页 / 共12页
手机设计字体规范.doc_第2页
第2页 / 共12页
手机设计字体规范.doc_第3页
第3页 / 共12页
手机设计字体规范.doc_第4页
第4页 / 共12页
手机设计字体规范.doc_第5页
第5页 / 共12页
点击查看更多>>
资源描述

《手机设计字体规范.doc》由会员分享,可在线阅读,更多相关《手机设计字体规范.doc(12页珍藏版)》请在金锄头文库上搜索。

1、手机设计字体规范篇一:移动设计字体规范整理iOS&Android 移动设计字体规范整理大全 对于一位移动APP设计师来说,字体的把控非常重要。特别是app设计。因为不同的字体在不同的移动终端显示出来的效果真是百花齐放。终极没达到我们设计图的效果。所以,ios和android都有各自的设计规范。也是告诉各位一定APP设计和开发人员可以遵循这些规范来设计开发,尽量达到最佳显示效果。一、IOS版本的字体设计规范和常识 iOS 的 1 pt = 逻辑像素 1 px = 物理像素 1 px(非 Retina)或 2 px(Retina) 如果你新建 Photoshop 文档时将 PPI 设定为 72,则

2、文档中 1 pt = 1 px;如果你把 PPI 设为 144,则 1 pt = 2 px。单位术语:pt: point px: pixel PPI: pixels per inch Photoshop 默认使用 1 inch = 72 pt 的标准,所以为什么我们设计APP界面设计效果的时候,设置的分辨率就是72,主要是这样设计方便、免了换算之苦。1、如果你是iOS客户端开发人员,你在编程时使用的默认简体中文字体,就是常用的华文Heiti SC。2、如果你是iOS UI设计人员,你在设计时如果使用Photoshop,请选中“黑体-简”或Heiti SC,并设置为“细体”、“浑厚”是与iOS上

3、的实际效果最接近的(Heiti SC Thin)。或者是冬青黑简体、黑体等等。英文字体是 Helvetica NeueUltra Light。如今iphone6和iphone6+开始流行,我们设计的字体规范也有所改变。 因为iPhone6和iPhone 6Plus都有标准模式和放大模式2种分辨率:和iPhone5宽度一样,5只是比4高176像素,所以5和4一套规范即可;的放大模式分辨率是6401136,和iPhone5正好相同;的标准模式分辨率为750*1334,整体放大倍正好是iPhone6 Plus的放大模式1125*20XX。我们来看淘宝购物车的截图(从左到右依次为iPhone4、5、6

4、):总结: 我们可以看出iPhone 4、5、6是可以共用一套字体大小规范。而iPhone6 plus在放大模式下的字体正好是在此基础上放大 倍:如下我们来看下一般规律(72像素/英寸下的字号大小规律,即72ppt下面) 导航栏标题:大概34px-42px;现在标题越来越小,一般36比较合适。如果是iphone plus 那么字体大小应该是51-63px之间。 最合适的54px。 标签栏文字:2024px。ios自带应用都是20px。个人认为标签栏时(图标文字)形式的的话不要大于22比较合适。正文:28px36px,新闻类基本都在用36,比如网易新闻正文部分。除了新闻类,其他类型的APP正文列

5、表 表单 都可以是30-32px左右。二、安卓android APP字体设计规范安卓中文字体: droid sans fallback安卓英文字体:roboto安卓手机的默认中文字体都是droid sans fallback,是谷歌自己的字体,与微软雅黑很像,小米miui v5 用的也是这种字体。sp与px的换算公式:sp*ppi/160 = px如果想看下详细android字体:Android移动APP设计字体规范详解题外话:为什么android安卓机器上的字体没ios的好看,原因有2点 第一点:android分辨率很多,字体渲染机制不一样。第二点:和 iOS 相比,Android 的“字体

6、系统”最大的一个缺点其实是缺字。正好体现了 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)iOSHelveti

7、ca Neue 5(非 Retina display 的设备用 Helvetica) 华文黑体(该版本称作黑体-简,参见 4)AndroidDroid Sans( 之前)或 Roboto 6( 及更高版本)Droid Sans Fallback 1(文泉驿微米黑之母)篇二:手机端软件设计规范一、尺寸及分辨率iPhone界面尺寸:320*480、640*960、640*1136iPad界面尺寸:1024*768、2048*1536单位:像素72dpi,在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计。Ps:作图的

8、时候确保都是用形状工具(快捷键:U)画的,这样更方便后期的切图或者尺寸变更。二、界面基本组成元素iPhone的app界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏、内容区域。这里取用640*960的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸。状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40px导航栏:显示当前界面的名称,包含相应的功能或者页面间的跳转按钮。其高度为:88px主菜单栏:类似于页面的主菜单,提供整个应用的分类内容的快速跳转。其高度为:98px ?内容区域:展示应用提供的相应内容,整个应用中布局变更最为频繁,其高度为:734px至于我们经

9、常说的iPhone5/5s的640*1136的尺寸,其实就是中间的内容区域高度增加到910px。PS:在最新的iOS7的风格中,苹果已经开始慢慢弱化状态栏的存在,将状态栏和导航栏合在了一起,但是再怎么变,尺寸高度也还是没有变的,只不过大家在设计iOS7风格的界面的时候多多注意下三、字体大小Phone上的字体英文为:HelveticaNeue 。至于中文Mac下用的是黑体,Win下则为华文黑体。下图是百度用户体验做过的一个小调查,可以看出用户可接受的文字大小。其实还有个更简单的方法就是找你觉得好的app应用,手机截图后放进PS自己比对调节字体大小咯。我的音乐34px我的、淘歌、发现30pxMux

10、x34px本地音乐30px泡沫、邓紫棋24px总之,方法是自己找到的,想办法解决问题,自己实践,比别人告诉你印象更深刻不是么?一、尺寸及分辨率Android界面尺寸:480*800、720*1280、1080*1920。单位:像素Android比iPhone的寸尺多了很多套,建议取用720*1280这个尺寸,这个尺寸720*1280中显示完美,在1080*1920中看起来比较清晰,切图后的图片文件大小也适中,应用的内存消耗也不会过高。二、界面基本组成元素Android的app界面和iPhone的基本相同:状态栏、导航栏、主菜单、内容区域。Android中我们取用的720*1280的尺寸设计,那

11、我们就说说在这个尺寸下这些元素的尺寸。篇三:Android界面设计规范1、android分辨率Android的多分辨率,一向是设计师和开发者非常头疼的事儿。尽管如此,对于多分辨造成的复杂问题,也是大家要优先解决的。Android支持多种不同的dpi模式:ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi注意,ppi、dpi 是密度单位,不是度量单位 :* ppi :图像分辨率 (在图像中,每英寸所包含的像素数目) * dpi : 打印分辨率 (每英寸所能打印的点数,即打印精度)dpi主要应用于输出,重点是打印设备上;ppi对于设计师应该比较熟悉,photoshop

12、画布的分辨率常设置为72像素/英寸,这个单位其实就是ppi 。尽管概念不同,但是对于移动设备的显示屏,可以看作ppi=dpi 。ppi的运算方式是:PPI = (长度像素数2 + 宽度像素数2) / 屏幕对角线英寸数。即:长、宽各自平方之和的开方,再除以屏幕对角线的英寸数。以iphone5为例,其ppi=(1136px2 + 640px2)/4 in=326ppi(视网膜Retina屏) 对于android手机,一个不确切的分法是,720 x 1280 的手机很可能接近 320 dpi (xhdpi模式),480 x 800 的手机很可能接近 240 dpi (hdpi模式),而320 x 4

13、80 的手机则很接近 160 dpi(mdpi模式)。来自友盟指数20XX年3月份的数据:480 x 800的手机占比最高为%,720 x 1280的手机占比为%位居第二,而240 x 320的手机占比最少为% 。xxdhpi模式的高分辨率1080 x 1920手机占比也越来越高,目前为% 。2、单位换算方法android开发中,文字大小的单位是sp,非文字的尺寸单位用dp,但是我们在设计稿用的单位是px。这些单位如何换算,是设计师、开发者需要了解的关键。* dp:Density-independent pixels,以160PPI屏幕为标准,则1dp=1px。dp和px的换算公式 :dp*p

14、pi/160 = px。对于320ppi的屏幕,1dp x 320ppi/160 = 2px。* sp:Scale-independent pixels,它是安卓的字体单位,以160PPI屏幕为标准,当字体大小为 100%时, 1sp=1px。sp 与 px 的换算公式:sp*ppi/160 = px。对于320ppi的屏幕,1sp x 320ppi/160 = 2px。简单理解的话,px(像素)是我们UI设计师在PS里使用的,同时也是手机屏幕上所显示的,dp是开发写layout的时候使用的尺寸单位。为什么要把sp和dp代替px? 原因是他们不会因为ppi的变化而变化,在相同物理尺寸和不同pp

15、i下,他们呈现的高度大小是相同。也就是说更接近物理呈现,而px则不行。根据单位换算方法,可总结出:当运行在mdpi下时,1dp=1px :也就是说设计师在PS里定义一个item高48px,开发就会定义该item高48dp ;当运行在hdpi模式下时,1dp= :也就是说设计师在PS里定义一个item高72px,开发就会定义该item高48dp ;当运行在xhdpi模式下时,1dp=2px :也就是说设计师在PS里定义一个item高96px,开发就会定义该item高48dp ;当你的app需要适配多个dpi模式的时候,请参考图1的比例进行换算 。3、设计稿基本元素的尺寸设置为了适应多分辨率的手机,理想的方式是为每种分辨率做一套设计稿,包括所用到的icon、

展开阅读全文
相关资源
相关搜索

当前位置:首页 > 办公文档 > 事务文书

电脑版 |金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号