《APP界面设计规范二Android版样本.doc》由会员分享，可在线阅读，更多相关《APP界面设计规范二Android版样本.doc（15页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、资料内容仅供您学习参考，如有不当之处，请联系改正或者删除。一、 Android设计常识开始介绍之前先帮大家梳理一下Android常见单位, 方便各位亲们更好的掌握并了解Android端设计规范。1.1 Android常见单位1.1.1.PPI(pixels per inch): 数字影像的解析度, 也就是每英寸所拥有的像素数, 即像素密度; PPI计算公式: ppi=( 长度像素数2+ 宽度像素数2) /屏幕对角线英寸数1.1.2.DPI(dots per inch): 是指印刷上的计量单位, 也就是每英寸上能印刷的网点数, 我们设计用于显示器的默认为( 72像素/英寸) 就好了; 1.1.3
2、.屏幕尺寸( Screen Size) : 一般我们所说的手机屏幕尺寸, 比如3英寸、 5.5英寸等, 都是指对角线的长度, 而不是手机的面积; 1.1.4.分辨率( Resolution) : 是指手机屏幕垂直和水平方向上的像素个数, 比如分辨率为: 720*1280, 是指设备水平方向有720个像素点, 垂直方向有1280个像素点1.1.5.px(pixels): 像素, 不同设备显示效果相同1.1.6.pt( point) : 一个标准的长度单位, ios的逻辑单位, 1Pt=1/72英寸, 用于印刷业, 非常简单易用; 标注字体大小( 72是早期台式机的DPI) 1.1.7.sp( S
3、caled-independentpixels) : 放大像素, 安卓的字体单位; 1.1.8.Dp( Density-independentpixels) : 是指设备的独立像素, 不同的设备有不同的显示效果, 它与设备硬件有关系; sp和dp基本一样, 是android开发里特有的单位, 都是为了保证文字在不同密度的显示屏上显示相同的效果; dp与设备硬件有关, 与屏幕密度无关, sp与屏幕密度和设备硬件均无关; 1.2 换算关系android开发中, 文字大小的单位是sp, 非文字的尺寸单位用dp, 可是我们在设计稿用的单位是px。这些单位如何换算, 是设计师、 开发者需要了解的关键。*
4、 dp: 以160PPI屏幕为标准, 则1dp=1px。dp和px的换算公式 : dp*ppi/160 = px。对于320ppi的屏幕, 1dp x 320ppi/160= 2px。* sp: 它是安卓的字体单位, 以160PPI屏幕为标准, 当字体大小为 100%时, 1sp=1px。sp 与 px 的换算公式: sp*ppi/160= px。对于320ppi的屏幕, 1sp x 320ppi/160 = 2px。简单理解的话, px( 像素) 是我们UI设计师在PS里使用的, 同时也是手机屏幕上所显示的, dp是开发写layout的时候使用的尺寸单位。dp和px的换算公式 : dp*pp
5、i/160 =px或者px=dp*ppi/160。 为什么要把sp和dp代替px? 原因是她们不会因为ppi的变化而变化, 在相同物理尺寸和不同ppi下, 她们呈现的高度大小是相同。也就是说更接近物理呈现, 而px则不行。根据单位换算方法, 可总结出: 当运行在mdpi模式下时, 1dp=1px : 也就是说设计师在PS里定义一个item高48px, 开发就会定义该item高48dp ; 当运行在hdpi模式下时, 1dp=1.5px : 也就是说设计师在PS里定义一个item高72px, 开发就会定义该item高48dp ; 当运行在xhdpi模式下时, 1dp=2px : 也就是说设计师在
6、PS里定义一个item高96px, 开发就会定义该item高48dp ; 具体换算关系如下: ldpi模式下1dp=0.75pxmdpi模式下(baseline) 1dp=1pxhdpi模式下 1dp=1.5pxxhdpi模式下 1dp=2pxxxhdpi模式下 1dp=3pxXxxhdpi模式下 1dp=4px小结: 其实对于我们设计师来讲, 我们做效果图的单位依然是px, 那些sp、 dp、 pt单位都是Android开发中所使用到的单位, 可是我们必须要了解每种单位的含义以及它们之间的关系, 这样才能使我们的设计更加统一和完美。1.3 Android屏幕分辨率Android按照DPI分为
7、了LDP、 MDPI、 HDPI、 XHDP和XXHDPI五类, Android 4.3还添加了XXXHDPI这个新的DPI分类。下面是Android界面尺寸详细总结: 当前主流的安卓手机分辨率有以下3种: hdpi, 对应480*800的手机。主流机型: 小米1 , 1s 三星 htc 等xdpi, 对应720*1280的手机。主流机型: 三星Galaxy系列和华为p6等xxdpi, 对应1080*1920的手机。主流机型: 小米手机, 华为荣耀手机系列为主加上 htc one下面是当面流行的安卓手机的屏幕尺寸和分辨率: 1.4 设计稿基本元素的尺寸设置Android手机那么多, 具体怎么分
8、? 哪些手机是几倍的倍率呢? 我们设计人员需要按照哪个尺寸进行设计? 我们先看一张表, 这是友盟 10月到 03月的数据: 从友盟的分辨率占比数据来看: 720*1280的手机占比最高为31.9%, 800*480的手机占比为18.5%位居第二, 而540*960的手机占比最少为9.8% , xxdhpi模式的高分辨率1080 *1920手机占比也越来越高, 当前为10.2% 。因此我没能够得出结论: 当前Android主流手机屏幕分辨率为: xdhpi模式的高分辨率720*1280。在当前我们的安卓APP设计项目当中, 我们并不会去为每一种分辨率去设计一套UI界面。为每一种分辨率单独设计一套
9、UI界面, 这是一种追求完美和理想的状态。因此, 这个时候我们需要学会变通, 为了适应多分辨率, 我们一般选择一个较合适的分辨率最为基准, 以下3种方法分别是我经常见到的方式, 仅供大家参考: 方法1以中间尺寸( xdpi: 720*1280px) 作为基准, 然后放大或缩小, 以适应到其它尺寸; 不足之处是, 对于更高分辨率的手机, 图标被放大后会导致质量不高。方法2以较大尺寸( xxdpi: 1080*1920px) 作为基准, 然后缩小, 并适应到所需的最小屏幕尺寸; 缺点是, 图标等若都是最大尺寸, 加载时速度慢且耗费流量较多, 对于小分辨率的用户也不够好。方法3有些时候我们也会在实际
10、开发过程中, Android和ios的设计稿若无太大差异, 也可从ios的分辨率( 750*1334px) 开始, 再调整设计稿的比例, 适应其它分辨率; 不足之处: 在切图的时候需要做一些图片的调整, 如果不是矢量图的原件, 需要重新按照720*1280的尺寸设计下。结合友盟的分辨率占比数据、 也为了方便换算到android开发中的尺寸单位, 推荐设计稿的画布尺寸选用 720X1280px, 分辨率为72ppi( 像素/英寸) 。一、 Android设计规范2.1界面基本组成元素Android的APP界面和iphone的界面基本相同: 状态栏+导航栏+主菜单栏+内容区域具体大小请参照1.3中
11、Android界面尺寸2.2字体设计规范安卓4.0之后用的字体是Roboto。中文字体: 方正兰亭黑体, 是谷歌自己的字体, 与微软雅黑很像。2.3界面图标规范界面中图形的实现由两种, 一种是用图片, 另一种是代码画出来。代码画的方式比较耗费程序员脑力和代码量, 图片则耗费空间, 增加APP 的体积。一般是偏重使用图片, 可是一些简单形状的按钮能够直接让程序员画出来即可。2.3.1切图要点1.有一些小的icon式按钮, 不能只切到icon边缘, 而是要考虑到最终实现的时候, 是把这个图片做成按钮, 和用户交互。因此必须要多留一些透明的边, 让能点击的图片在8888以上, 这样用户才保证比较好点
12、到。2.对于不改变可见图形而又需要加大点击区域的图。那么切图的时候建议在可见图形的四周都加上1像素的透明, 这是为了放大拉伸而不产生可见区域的图像失真。3.切图的高度。对于一个通用的背景图, 如文字圆角边框背景, 那么切图的时候并不是效果图上有多高就切多高, 为了通用而是只需切一行文字的高度就能够了。不过这也不是绝正确, 准确的说应该切的高度为H=paddingTop+textHeight+paddingBottom, 及文字相对背景的上边距+一行文字的高度+文字相对背景的下边距。4.切图的宽度。如果是一个通用的背景图, 那么她的宽度应该是她在效果图中的最小宽度, 也就是说这个背景可能在多处使
13、用到了, 就取最小的那个宽度就能够了。比较麻烦的是铺满全屏的时候, 这就需要看看你做的效果图的宽屏宽度, 因此说做效果图的时候最好是做小屏幕的效果图。有人可能会问点9的图不是能够拉伸、 压缩吗, 为什么需要参考最小的宽度呢? 根据个人经验发现, 一个大图在屏幕小的情况下点9图中拉伸的部分会变得颜色更深。5.以每个模块分开创立文件夹存放切图资源; 这样更有助于程序员在每个模块的时候找到相应的图片; 6.所有切图尺寸必须是偶数, 一般是png-24格式; 2.3.2底部工具栏icon切图( 有两种方法) 方法1: icon单独切, 有默认和选中两种状态方法2: icon + 文字一起切, 有默认和
14、选中两种状态2.3.3切图命名规范: 下面是常见的一些命名缩写: 导航栏: nav 主菜单栏: tab 背景: bg 按钮: btn按钮常态: nor 按钮选中: sel 按钮按下: down 图标: icon搜索: search 个人资料: proflie 用户: user 弹出: pop返回: back 刷新: refresh 删除: delete 编辑: edit例如: nav_bg、 tab_btn_sel2.3.4点九切图: 首先我们要知道什么是点9图: 点九图是andriod平台的应用软件开发里的一种特殊的图片形式, 是一种可拉抻而不失真的图, 文件扩展名为: .9.png。其实相
15、当于把一张png图分成了9个部分( 九宫格) , 分别为4个角( 图中: 1、 3、 6、 8) , 4条边( 图中: 2、 4、 5、 7) , 以及一个中间区域( 图中: 9) 。比如我们的微信、 QQ的聊天气泡就是典型的点9图, 因为聊天气泡需要随文字的多少进行拉抻。一般图在整体放大时会出现失真的情况, 而点9图是把图中某些部分进行拉抻, 而不重复的地方, 比如圆角和光泽等部分都不做变化, 以此来实现图片的放大, 不会出现失真的情况。接着我们来说一下点9图的绘制方法: 当然点9图的绘制方法也有很多种, 直接用点9切图的软件, 譬如: draw9patch、 cutterman等, 安卓开
16、发中的SDK里有tools文件夹, 里面有一个draw9patch.bat, 或者直接用ps绘制点9切图; 我个人还是习惯用ps直接绘制点9图, 因为软件有时候自己把握不好尺寸导致点9图在程序中识别出现问题。Ps绘制点9图的步骤: 确定切图后直接改变图片的画布大小; 手动将上下左右各增加1px留白; 使用铅笔工具, 手动绘制拉伸区域, 色值必须为黑色( #000000) , 透明度100%; 左上为拉伸区域, 右下为内容显示区域存储为web所用格式, 选择png-24, 储存时手动将后缀名改为xxx.9.png; 2.4 48dp规律48dp规律: 一般把48dp作为可触摸的UI元件的标准。为
17、什么要用48dp呢? 一般来说, 48dp转化为一个物理尺寸约9毫米。建议的目标大小为7-10毫米的范围, 这是一个用户手指能准确而且舒适触摸的区域。如果你设计的元素高和宽至少48dp, 你就能够保证: ( 1) 触摸目标绝不会比建议的最低目标( 7mm) 小, 无论在什么屏幕上显示。( 2) 在整体信息密度和触摸目标大小之间取得了一个很好的平衡。而每个UI元素之间的空白一般是8dp。2.5标注规范一般APP设计都会涉及到多个分辨率兼容开发的问题, 因此设计的时候, 要定好规范。最好建立相关文档, 记录使用的字体、 颜色, 常见的字号和间距, 给出编号A1 A2 A3 B1 B2 B3, 不同分辨率下换算的结果, 便于技术人员进行开发。如需对设计稿进行后期的标注, 则可使用该套规范, 对设计稿中的字号、 颜色、 间距进行标注。Ps:如果想做一个好的UI设计师, 一定要从规范入手。很多都是细节的东西, 在于积累。