APP界面设计规范二Android版.docx

上传人:b****4 文档编号:4082608 上传时间:2022-11-27 格式:DOCX 页数:10 大小:813.94KB
下载 相关 举报
APP界面设计规范二Android版.docx_第1页
第1页 / 共10页
APP界面设计规范二Android版.docx_第2页
第2页 / 共10页
APP界面设计规范二Android版.docx_第3页
第3页 / 共10页
APP界面设计规范二Android版.docx_第4页
第4页 / 共10页
APP界面设计规范二Android版.docx_第5页
第5页 / 共10页
点击查看更多>>
下载资源
资源描述

APP界面设计规范二Android版.docx

《APP界面设计规范二Android版.docx》由会员分享,可在线阅读,更多相关《APP界面设计规范二Android版.docx(10页珍藏版)》请在冰豆网上搜索。

APP界面设计规范二Android版.docx

APP界面设计规范二Android版

一、Android设计常识

开始介绍之前先帮大家梳理一下Android常用单位,方便各位亲们更好的掌握并了解Android端设计规范。

1.1Android常用单位

1.1.1.

PPI(pixelsperinch):

数字影像的解析度,也就是每英寸所拥有的像素数,即像素密度;

PPI计算公式:

ppi=√(长度像素数2 +宽度像素数2)/屏幕对角线英寸数

1.1.2.

DPI(dotsperinch):

是指印刷上的计量单位,也就是每英寸上能印刷的网点数,我们设计用于显示器的默认为(72像素/英寸)就好了;

1.1.3.

屏幕尺寸(ScreenSize):

一般我们所说的手机屏幕尺寸,比如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(Scaled-independentpixels):

放大像素, 安卓的字体单位;

1.1.8.

Dp(Density-independentpixels):

是指设备的独立像素,不同的设备有不同的显示效果,它与设备硬件有关系;

sp和dp基本一样,是android开发里特有的单位,都是为了保证文字在不同密度的显示屏上显示相同的效果;dp与设备硬件有关,与屏幕密度无关,sp与屏幕密度和设备硬件均无关;

1.2换算关系

android开发中,文字大小的单位是sp,非文字的尺寸单位用dp,但是我们在设计稿用的单位是px。

这些单位如何换算,是设计师、开发者需要了解的关键。

*dp:

以160PPI屏幕为标准,则1dp=1px。

  dp和px的换算公式:

dp*ppi/160=px。

  对于320ppi的屏幕,1dpx320ppi/160=2px。

*sp:

它是安卓的字体单位,以160PPI屏幕为标准,当字体大小为100%时,1sp=1px。

   sp与px的换算公式:

sp*ppi/160=px。

   对于320ppi的屏幕,1spx320ppi/160=2px。

    简单理解的话,px(像素)是我们UI设计师在PS里使用的,同时也是手机屏幕上所显示的,dp是开发写layout的时候使用的尺寸单位。

dp和px的换算公式:

dp*ppi/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:

也就是说设计师在PS里定义一个item高96px,开发就会定义该item高48dp;

 

具体换算关系如下:

ldpi模式下                   1dp=0.75px

mdpi模式下(baseline)        1dp=1px

hdpi模式下                  1dp=1.5px

xhdpi模式下                 1dp=2px

xxhdpi模式下                1dp=3px

Xxxhdpi模式下               1dp=4px

小结:

其实对于我们设计师来讲,我们做效果图的单位仍然是px,那些sp、dp、pt单位都是Android开发中所使用到的单位,但是我们必须要了解每种单位的含义以及它们之间的关系,这样才能使我们的设计更加统一和完美。

 

1.3Android屏幕分辨率

 Android按照DPI分为了LDP、MDPI、HDPI、XHDP和XXHDPI五类,Android4.3还添加了XXXHDPI这个新的DPI分类。

下面是Android界面尺寸详细总结:

目前主流的安卓手机分辨率有以下3种:

hdpi,对应480*800的手机。

主流机型:

小米1,1s三星htc等

xdpi,对应720*1280的手机。

主流机型:

三星Galaxy系列和华为p6等

xxdpi,对应1080*1920的手机。

主流机型:

小米手机,华为荣耀手机系列为主加上htcone

 

下面是当面流行的安卓手机的屏幕尺寸和分辨率:

1.4设计稿基本元素的尺寸设置

Android手机那么多,具体怎么分?

哪些手机是几倍的倍率呢?

我们设计人员需要按照哪个尺寸进行设计?

我们先看一张表,这是友盟2014年10月到2015年03月的数据:

 从友盟的分辨率占比数据来看:

720*1280的手机占比最高为31.9%,800*480的手机占比为18.5%位居第二,而540*960 的手机占比最少为9.8%,xxdhpi模式的高分辨率1080* 1920手机占比也越来越高,目前为10.2%。

所以我没可以得出结论:

目前Android主流手机屏幕分辨率为:

xdhpi模式的高分辨率720*1280。

 

    在目前我们的安卓APP设计项目当中,我们并不会去为每一种分辨率去设计一套UI界面。

为每一种分辨率单独设计一套UI界面,这是一种追求完美和理想的状态。

所以,这个时候我们需要学会变通,为了适应多分辨率,我们一般选择一个较合适的分辨率最为基准,以下3种方法分别是我经常用到的方式,仅供大家参考:

方法1

以中间尺寸(xdpi:

720*1280px)作为基准,然后放大或缩小,以适应到其他尺寸;

不足之处是,对于更高分辨率的手机,图标被放大后会导致质量不高。

方法2

以较大尺寸(xxdpi:

1080*1920px)作为基准,然后缩小,并适应到所需的最小屏幕尺寸;

缺点是,图标等若都是最大尺寸,加载时速度慢且耗费流量较多,对于小分辨率的用户也不够好。

方法3

有些时候我们也会在实际开发过程中,Android和ios的设计稿若无太大差异,也可从ios的分辨率(750*1334px)开始,再调整设计稿的比例,适应其他分辨率;

不足之处:

在切图的时候需要做一些图片的调整,如果不是矢量图的原件,需要重新按照720*1280的尺寸设计下。

 

结合友盟的分辨率占比数据、也为了方便换算到android开发中的尺寸单位,推荐设计稿的画布尺寸选用720X1280px,分辨率为72ppi(像素/英寸)。

一、Android设计规范

2.1界面基本组成元素

Android的APP界面和iphone的界面基本相同:

状态栏+导航栏+主菜单栏+内容区域

具体大小请参照1.3中Android界面尺寸

2.2字体设计规范

安卓4.0之后用的字体是Roboto。

中文字体:

方正兰亭黑体,是谷歌自己的字体,与微软雅黑很像。

2.3界面图标规范

界面中图形的实现由两种,一种是用图片,另一种是代码画出来。

代码画的方式比较耗费程序员脑力和代码量,图片则耗费空间,增加APP的体积。

一般是偏重使用图片,但是一些简单形状的按钮可以直接让程序员画出来即可。

2.3.1切图要点

1.有一些小的icon式按钮,不能只切到icon边缘,而是要考虑到最终实现的时候,是把这个图片做成按钮,和用户交互。

所以必须要多留一些透明的边,让能点击的图片在88×88以上,这样用户才保证比较好点到。

2.对于不改变可见图形而又需要加大点击区域的图。

那么切图的时候建议在可见图形的四周都加上1像素的透明,这是为了放大拉伸而不产生可见区域的图像失真。

3.切图的高度。

对于一个通用的背景图,如文字圆角边框背景,那么切图的时候并不是效果图上有多高就切多高,为了通用而是只需切一行文字的高度就可以了。

不过这也不是绝对的,准确的说应该切的高度为H=paddingTop+textHeight+paddingBottom,及文字相对背景的上边距+一行文字的高度+文字相对背景的下边距。

4.切图的宽度。

如果是一个通用的背景图,那么他的宽度应该是他在效果图中的最小宽度,也就是说这个背景可能在多处使用到了,就取最小的那个宽度就可以了。

比较麻烦的是铺满全屏的时候,这就需要看看你做的效果图的宽屏宽度,所以说做效果图的时候最好是做小屏幕的效果图。

有人可能会问点9的图不是可以拉伸、压缩吗,为什么需要参考最小的宽度呢?

根据个人经验发现,一个大图在屏幕小的情况下点9图中拉伸的部分会变得颜色更深。

5.以每个模块分开创建文件夹存放切图资源;这样更有助于程序员在每个模块的时候找到相应的图片;

6.所有切图尺寸必须是偶数,一般是png-24格式;

2.3.2底部工具栏icon切图(有两种方法)

方法1:

icon单独切,有默认和选中两种状态

方法2:

icon+文字一起切,有默认和选中两种状态

2.3.3切图命名规范:

下面是常用的一些命名缩写:

导航栏:

nav       主菜单栏:

tab        背景:

bg     按钮:

btn

按钮常态:

nor    按钮选中:

sel    按钮按下:

down    图标:

icon

搜索:

search    个人资料:

proflie     用户:

user    弹出:

pop

返回:

back     刷新:

refresh      删除:

delete   编辑:

edit

例如:

nav_bg、tab_btn_sel

2.3.4点九切图:

  首先我们要知道什么是点9图:

点九图是andriod平台的应用软件开发里的一种特殊的图片形式,是一种可拉抻而不失真的图,文件扩展名为:

.9.png。

其实相当于把一张png图分成了9个部分(九宫格),分别为4个角(图中:

1、3、6、8),4条边(图中:

2、4、5、7),以及一个中间区域(图中:

9)。

  比如我们的微信、QQ的聊天气泡就是典型的点9图,因为聊天气泡需要随文字的多少进行拉抻。

一般图在整体放大时会出现失真的情况,而点9图是把图中某些部分进行拉抻,而不重复的地方,比如圆角和光泽等部分都不做变化,以此来实现图片的放大,不会出现失真的情况。

接着我们来说一下点9图的绘制方法:

当然点9图的绘制方法也有很多种,直接用点9切图的软件,譬如:

draw9patch、cutterman等,安卓开发中的SDK里有tools文件夹,里面有一个draw9patch.bat,或者直接用ps绘制点9切图;我个人还是习惯用ps直接绘制点9图,因为软件有时候自己把握不好尺寸导致点9图在程序中识别出现问题。

Ps绘制点9图的步骤:

※确定切图后直接改变图片的画布大小;

※手动将上下左右各增加1px留白;

※使用铅笔工具,手动绘制拉伸区域,色值必须为黑色(#000000),透明度100%;

 左上为拉伸区域,右下为内容显示区域

※存储为web所用格式,选择png-24,储存时手动将后缀名改为xxx.9.png;

2.448dp规律

48dp规律:

通常把48dp作为可触摸的UI元件的标准。

为什么要用48dp呢?

  一般来说,48dp转化为一个物理尺寸约9毫米。

建议的目标大小为7-10毫米的范围,这是一个用户手指能准确并且舒适触摸的区域。

如果你设计的元素高和宽至少48dp,你就可以保证:

(1)触摸目标绝不会比建议的最低目标(7mm)小,无论在什么屏幕上显示。

(2)在整体信息密度和触摸目标大小之间取得了一个很好的平衡。

而每个UI元素之间的空白通常是8dp。

2.5标注规范

通常APP设计都会涉及到多个分辨率兼容开发的问题,因此设计的时候,要定好规范。

最好建立相关文档,记录使用的字体、颜色,常用的字号和间距,给出编号A1A2A3B1B2B3,不同分辨率下换算的结果,便于技术人员进行开发。

  如需对设计稿进行后期的标注,则可使用该套规范,对设计稿中的字号、颜色、间距进行标注。

Ps:

如果想做一个好的UI设计师,一定要从规范入手。

很多都是细节的东西,在于积累。

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 农林牧渔 > 林学

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1