让设计与开发顺利接轨的字体规范

小楼推荐 小楼一夜听春语 13612℃ 0评论

我们知道,用photoshop画效果图时,字体大小我们一般直接用“点”做单位,然而在开发中,一般采用“sp”做单位(有关安卓中的dp/sp/px。

Android中dip, dp, px, sp之间的区别:

dip: device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA、HVGA和QVGA 推荐使用这个,不依赖像素。
px: pixels(像素). 不同设备显示效果相同,一般我们HVGA代表320x480像素,这个用的比较多。
pt: point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用;
sp: scaled pixels(放大像素). 主要用于字体显示best for textsize,根据 google 的建议,TextView 的字号最好使用 sp 做单位,

过去,程序员通常以像素为单位设计计算机用户界面。例如,定义一个宽度为300像素的表单字段,列之间的间距为5个像素,图标大小为16×16像素 等。这样处理的问题在于,如果在一个每英寸点数(dpi)更高的新显示器上运行该程序,则用户界面会显得很小。在有些情况下,用户界面可能会小到难以看清 内容。
与分辨率无关的度量单位可以解决这一问题,Android支持下列所有单位:
px(像素):屏幕上的点。
in(英 寸):长度单位。
mm(毫米):长度单位。
pt(磅):1/72英寸。
dp(与密度无关的像素):一种基于屏幕密度的抽象 单位。在每英寸160点的显示器上,1dp = 1px。
dip:与dp相同,多用于android/ophone示例中。
sp(与 刻度无关的像素):与dp类似,但是可以根据用户的字体大小首选项进行缩放。

我来补充两句:说说dp和sp,dp也就是dip。这个和sp基本类似。如果设置表示长度、高度等属性时可以使用dp或sp。但如果设置字体,需要使用 sp。dp是与密度无关,sp除了与密度无关外,还与scale无关。如果屏幕密度为160,这时dp和sp和px是一样的。1dp=1sp=1px,但 如果使用px作单位,如果屏幕大小不变(假设还是3.2寸),而屏幕密度变成了320。那么原来TextView的宽度设成160px,在密度为320的 3.2寸屏幕里看要比在密度为160的3.2寸屏幕上看短了一半。但如果设置成160dp或160sp的话。系统会自动将width属性值设置成 320px的。也就是160 * 320 / 160。其中320 / 160可称为密度比例因子。也就是说,如果使用dp和sp,系统会根据屏幕密度的变化自动进行转换。

如何保证画图时的字号选择和手机适配效果一致呢?下面以几个常用应用的字体效果来说明在Photoshop中和开发中字号的选择。

(1)   列表的主标题

v  如微信、下厨房等应用首页的列表主标题,字号在photoshop中应采用22--24号左右,一行大概容纳18个字。然后开发程序中对应的字号是16sp。

m_1354807787810

v 百度新闻、QQ通讯录首页的列表主标题的字号在ps中应采用24--26号左右,一行大概容纳16个字。开发程序中对应的字号是18sp。

m_1354807877223

v  多米音乐首页的歌曲列表主标题的字号在ps中应采用26--28号左右,一行大概容纳14个字。开发程序中对应的字号是20号字。

m_1354807915149

(1)   列表的副标题:

列表的副标题的字号一般没有太多的要求,基本原则是保证字体颜色和字号小于主标题即可。

(2)   正文:

正文字号的大小一般需要保证每行不多于22个字,如果过小,影响阅读。在电脑设计中大概保证不小于16号字体,在开发程序中不小于12号字。

最后

m_1354808184156

找准以上对应关系,下次你就可以直接告诉开发者,这个页面中不同层级的内容分别用多大字号。很牛滴。

最后需要注意的是:同样的字号,不同的字体,显示的大小可能不一样,需要注意。这也是以上表格中没有对将点和sp完全一一对应的原因。如下是三类同样字号的字体的对比效果:

m_1354808247649


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师全新打造Axure RP 9精品课程,以独有的教学方法与技巧,帮助你以最短的时间高效的完成学习目标。

《Axure RP 9 萌新修炼视频》-----从零入门进阶的优质课程------【点此查看详情】


转载请注明:Axure原创教程网 » 让设计与开发顺利接轨的字体规范

喜欢 (13)or分享 (0)
头像
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址