又是一枚标题党,囧~( ╯□╰ )~

最近在弄个人博客APP初稿,简单的功能已经初步实现,先记录一下。

事起有因:

暑期前我对Android的了解基本停留在知道这个东西和它的简单语法特点,并未有实战经验,一切基本都得从头开始。为不负众望,同时也希望能拓宽自己的专业领域和提高水平,于是暑假一开始就开始Android开发学习。自此,垃圾桶型的绿色机器人向我打了声招呼:“Hello World”。

但纸上得来终觉浅。斟酌再三,决定把矛头指向了个人博客。可以先从简单的功能做起,以后再做修改。

水了那么多废话,终于可以进入正题了。

——————–我是华丽丽的分割线—————————–

要做了一个人博客APP,首先得有设计稿。

正好借这个机会了解一下设计师是怎么设计Android版页面的,知己知彼嘛。

官方设计规范在此:http://developer.android.com/design/index.html

一. Android手机分辨率

在设计之初, Android系统就被设计为一个可以在多种不同分辨率的设备上运行的操作系统。对于应用程序来说,系统平台向它们提供的是一个稳定的、跨平台的运行环境,而关于如何将程序以正确的方式显示到它所运行的平台上所需要的大部分技术细节,都由系统本身进行了处理,无需程序的干预。当然,系统本身也为程序提供了一系列API,所以在目标平台的分辨率是可以完全确定的情况下,程序也可以精确的控制自身在目标平台上的 界面显示方式。 这样你就可以用一个单独的.apk文件,将你的程序发布到所有的平台上。

下面来归类一下几个术语:

(1) 屏幕尺寸(Screen size):屏幕的物理尺寸,以屏幕的对角线长度作为依据;

(2) 屏幕长宽比(Aspect ratio):屏幕的物理长度与物理宽度的比例;

(3) 分辨率(Resolution):屏幕上拥有的像素的总数。注意,虽然大部分情况下分辨率都被表示为“宽度×长度”,但分辨率并不意味着屏幕长宽比。在Android系统中,程序一般并不直接处理分辨率;

(4) 密度(Density):以屏幕分辨率为基础,沿屏幕长宽方向排列的像素;

(5) 设备独立像素(Density-independent pixel, dp):应用程序可以用来定义UI组件的虚拟像素单元,通过密度无关的方式来描述布局尺寸和位置。一个设备独立像素相当于一个160 dpi屏幕上的物理像素。

一个与密度无关的像素(dp),在逻辑尺寸上,与一个位于像素密度为160DPI的屏幕上的像素是一致的,这也是Android平台所假定的默认显示设备。在运行的时候,平台会以目标屏幕的密度作为基准,“透明地”处理所有需要的DIP缩放操作。要把密度无关像素转换为屏幕像素,可以使用这样一个简单的公式:pixels = dips * (density /160)。

Android上常见度量单位:

px(像素):屏幕上的点,绝对长度,与硬件相关;

in(英寸):长度单位;

mm(毫米):长度单位;

pt(磅):1/72英寸,point;

dp(与密度无关的像素):一种基于屏幕密度的抽象单位。在每英寸160点的显示器上,1dp = 1px;

dip:Density-independent pixel,同dp相同;

sp:在dp的基础上,与比例无关;

Android手机的屏幕密度各有差异,其中主流的有160dpi、240dpi、320dpi、480dpi、640dpi,分别对应屏幕等级:mdpi、hdpi、xhdpi、xxhdpi、xxxdpi。具体如下表所示:

屏幕等级 倍屏 屏幕密度 分辨率
ldpi 0.75× 120dpi
mdpi 160dpi 320×480
hdpi 1.5× 240dpi 480×800
xhdpi 320dpi
xxhdpi 480dpi 1080×1920
xxxhdpi 640dpi 3840×2160


图片摘自:http://developer.android.com/design/media/devices_displays_density@2x.png

Android的主流屏幕逻辑像素为360×640px。为了适配更好的屏幕密度,设计Android应用的最佳实践是画布定义为1080×1920(三倍图),再根据调节倍率,通过图像大小的DPI控制。当然,也有人为了适应高分屏而采用画布大小为2160×3840(六倍图)。

二. Android尺寸规范

在Android设计中,图片宽高和位置建议以dp为尺寸单位,字体建议使用sp为单位。

Android 4.0以后,Android的设计规范中建议使用四种字号:12sp、14sp、18sp、22sp,使用Roboto字体;图标的笔画不应小于2dp,最好使用填充图标而不是用细线条勾勒的;

为了避免因比例换算产生0.x px导致图片失真模糊(因为px一定是整数),在设计稿中所有图标和位置都应该是偶数。

1. 可触摸控件:

以48dp为基础单位,界面元素之间留白8dp;

2. 启动图标:

在移动设备上,启动图标必须是48×48dp;在Play商店中,启动图标必须是512×512dp;

3. 手机操作栏图标:

整体图标大小为32×32dp。图形区域为24×24dp;

4. 标记“重要”的图标:

整体图标大小为16×16dp,图形区域为12×12dp;

5. 通知栏图标(必须是白色图标):

整体大小为24×24dp。图形大小为22×22dp;

三. 交互设计

(1) 对于Activity之间的转场应有一定的动画,但适可而止。因为Activity跳转之间的属性动画对内存消耗较大;

(2) 菜单栏应有不同的状态标识,以让用户更好地分辨出当前所在的栏目位置;

(3) 适当留白;

(4) 菜单栏与内容区域之间的颜色应有一定的反差,便于分辨;

四. 标注

如果设计师能给出元素之间的边距、色块的色值和透明元素的透明度,设计与开发之间的交流会更高效。

标注工具推荐使用马克鳗或者Pxcook。

五. 拙作

开始设计的第一步是需求分析,然后是画布局草图,最后修稿。

我对Photoshop不是很熟悉,在限定图标大小时并没有找到简捷的方法。为了快速定稿,特设计下面五个界面以便后面布局所用,APP特征色是#2175bc:

 


引导页


APP首页


APP内容页


APP内容列表页


APP关于作者页

 

备注:大图可查阅我的站酷地址~

 

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/others/mobile/android/185