手机ui设计字体大小规范一般多少像素

来源：蜘蛛抓取(WebSpider) 时间：2016-11-29 23:25 标签： ui设计字体规范
1.尺寸以及分辨率
　　iPhone的界面尺寸不用多说，640*960是基本OK的，也可以是适应5S的640*1136，马上iPhone 6也快来了（随便吐槽一下网上曝的真机谍照，真是丑到离谱...），只要宽度不变都好说。至于像素问题，网页和移动的UI用72px就可以了，不必纠结。
2.界面基本组成元素
　　iPhone的APP界面一般由状态栏、导航栏、主菜单栏和中间的内容区域组成。因为宽度是固定的，所以设计开发起来很方便。下面我们说说这些&栏&的尺寸吧：
　　状态栏：显示运营商、信号和电量的区域，高度 40px
　　导航栏：显示当前页面名称，包含页面&返回&等功能按钮，高度 88px
　　主菜单栏：显示在页面下方的区域，一般作为分类内容的快递导航，高度 98px
3.字体大小
　　iPhone上的英文字体为：HelveticaNeue，至于中文，一般是冬青黑体或是黑体-简。有关文字的大小根据不同类型的APP都有不同的定义，但是百度用户体验部提供了这样一份统计资料：阅读最舒适的长文本大小在32~34px之间，短文本为32px，注释等提示文本为28px。不管是否同意，至少人家有数据说话，你也可以把觉得好的应用截图放进PS里对比看，从而调试自己设计的文字大小。
　　总之，方法很多，个人的审美也不一样，有人故意把字做大以突出个性，自己实践，把数据作为参考，多做几款应用心中也就有数了，比看再说教程或者说明有用！
1.尺寸以及分辨率
　　提到Android的尺寸，让多少设计和开发抓耳挠腮，数不清的机型和尺寸，重复的适配。这里我们就说些主流的设计尺寸吧，比如480*800、720*128。很长一段时间内，我们都在用480*800，但是安卓手机分辨率的发展众所周知的越来越大，所以我建议使用720*1280这个尺寸来设计，切图上可以点9切图做到所有手机的适配。
2.界面基本组成元素
　　与ios的一样，还是有状态栏、导航栏和主菜单栏，以720*1280的尺寸来设计，那么状态栏的高度应为50px，导航栏的高度96px，主菜单栏的高度96px。因为是开源的系统，很多厂家都把安卓系统&玩坏&了，这里的数值也只能作为参考，比如魅族flyme状态栏是正常的两倍高，还有很多厂商也在界面上相近办法。
　　Android为了区别于IOS，从4.0开始提出了一套HOLO的UI风格设计风格，鼓励将底部的主菜单栏放到导航栏下面，从而避免点击下方材料误点虚拟按键，很多APP的新版中也采用了这一风格，比如微信。就前不久的I/O大会上，最新的Android L正式揭开面纱，宣布了安卓全面进入扁平化时代。
3.文字大小
　　Android的字体为：Droid sans fallback，这是谷歌自己的字体，与微软雅黑很像。同样百度也提供了一份统计数据，但是个人觉得已过期，现在没有太大意义，因为他们是以480*800的分辨率作为测试，测试结果是阅读最舒适的长文本为27px，短文本也是27px，注释备注文本21px。具体还是要大家将做好的界面放到同分辨率的手机上看为准！
阅读(...) 评论()发布者: mobileui
我们在做Android移动APP设计的时候，字号的选择也是很让人头疼，今天设计达人网整理了一份有关Android系统字体规范，如果在做Android项目的用户应该看看，如果有任何建议欢迎在留言处与我们交流探讨。
主要从以下几点做了分析：
1. 移动设计中与字号有关的基本概念
px：Pixels即像素，基本原色素及其灰度的基本编码。
DPI：dots per inch，是印刷上的记量单位，意思是每个英寸上，所能印刷的网点数。
PPI：pixels per inch 数字影像的解析度，意思是每英寸所拥有的像素数，即像素密度。
PPI = √（长度像素数? + 宽度像素数?） / 屏幕对角线英寸数
pt：Point，磅因，国际通行的印刷单位，是一个自然界标准的长度单位。
inch = 2.54cm = 25.4 mm = 72pt， 1pt≈0.35mm
Photoshop里的字体单位pt和point不一样。在Photoshop里，同样是10pt的字，只要变换字体，字的高度就会变化。
dp：Density-independent pixels，以160PPI屏幕为标准，则1dp=1px
dp和px的换算公式 ：dp*ppi/160 = px
sp：Scale-independent pixels.安卓的字体单位，以160PPI屏幕为标准，当字体大小为 100%时， 1sp=1px
sp 与 px 的换算公式：sp*ppi/160 = px
2. Android 系统默认字体 Rotobo,限定使用以下字号
3. Android 字体单位 sp 与 px 的换算
PPI = √（长度像素数? + 宽度像素数?） / 屏幕对角线英寸数
sp与px的换算公式：sp*ppi/160 = px
以三星Note2为例，PPI = √（1280? + 720?） / 5.5=267
经测量，三星Note2的字体高度确实如此，见下图：
4. 规范字号的意义
保证相同字号的字在不同PPI屏幕上显示的物理高度一致，下面来验证一下。
设定 PPI为 267 时，高度18sp（即 30px）的字的物理高度为 X，则：
一英寸里的像素数 267 / 一英寸里的毫米数 25.4mm = 30 / X
X ≈ 2.86mm
设定 PPI为 160 时，高度18sp（即 18px）的字的物理高度为 Y，则：
一英寸里的像素数 160 / 一英寸里的毫米数 25.4mm = 18 / Y
Y ≈ 2.86mm
综上，X = Y，这就证明了同为18sp的字在 PPI分别为 267 和 160 时，显示的物理高度都是 2.86mm
5. 印刷业的规范字号的用法
看书的时候眼睛距离书本的最佳距离为 33cm，书本的阅读距离比较接近于手机的阅读距离，所以我们来参考下书本上印刷文字的规范。
印刷业已经有成熟的行业字号标准，如下表所示：
其中正文常用的字号是六号（7.5p）、小五号（9p）、五号（10.5p），如下表所示：
6. Android 规范字号的近似用法
通过计算出 Android规范字号的物理高度，找到每个字号最接近的印刷字号：
再根据印刷字号的用途，近似得出Android 规范字号的用法
7. 如何向前端输出？
第一步：将sp 换算成px。但是px随PPI 变化而变化，这一点可以从sp 与px的换算公式“sp*ppi/160 = px ”看出来。我们不能算出所有的情况，所以只计算首选需要适配的ppi 对应的像素高度。
第二步：把算好的像素高度和换算公式“ sp * ppi/160 = px ”同时输出给前端，这样以后再换ppi，前端可以自动计算。另外，前端代码里定义字体高度用的也是px，所以设计师向前端输出以px计算的字号尺寸是非常合适的。例如：
8. 如何在里选择字号？
上文中，我们已经算出了字体像素高度，把这些像素高度画到ps 里，
再把你要使用的字体调到这样的像素高度，得出photoshop 里对应的字号，用于设计。也就是说Photoshop 里的字号都需要根据实际情况，手动调出来，没有捷径。例如ppi 为240 时，对应的像素高度和字体字号如下图所示：
如果ppi 变化，上面的图就不能用了，又要重新算，比较劳神费力，但我目前还没有更好的办法，欢迎大家拍砖，我会积极采纳意见，优化方案。
参考文献：
1.Android 设计指南：
http://www.sunjw.us/adchs/style/typography.html
2.维基百科：点（印刷）
3.百度文库《印刷文字的字体与字号规定》
作者： PDF版本：, ,
向您推荐：
sisi：曾看到网上一些帖子讨论UI设计师和平面设计师的差异，总结为思维方式的不同: UI设计师考虑...
如何成为一个合格的UX设计师，怎样才能从菜鸟转变为设计高手，每天都有无数的设计师思考着同样的问题。凡...
作为设计师，我们总说：我要让我的设计更漂亮和高大上，要完成老板的业务目标，要让多数用户的体验顺畅。我...
iOS从07年第一代iPhone发布时的iPhone OS，已发展到今天的iOS10，这些年来，iO...
莫贝网（）移动设备界面设计专业网站。为UI设计师提供手机界面设计，移动应用界面设计，平板电脑界面设计，导航界面设计等手持移动设备，移动终端界面设计相关知识的收集分享，共同学习的网站。
关注微博：畅言评论代码
怎么制作具有加密保护的U盘
怎么查看80端口被什么软件占用？
如何取消IE浏览器的360导航，看
怎么制作具有加密保护的U盘
谷歌网站提交接口技巧
网页FLASH广告设计教学
Jianzhan guide
Design Technology
Seo Optimization
Website Consulting
网站建设 疑难咨询iOS界面设计尺寸规范_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
iOS界面设计尺寸规范
上传于||暂无简介
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩5页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢

我要回帖

更多关于 ui设计字体规范 的文章

 

随机推荐