Android 系统UI设计规则

1. Android UI技巧

1.1 不应作什么

1.2 该作什么

2. Android UI 设计理念和注意事项

2.1 Android UI设计理念

2.2 优秀UI设计准则

2.3 设计须要考虑

3. Android UI 框架特性/界面布局

4. Android UI 图标设计原则

4.1 图标的尺寸规则和密度

4.2 图标的设计规则

5. Android UI 开发的GUI工具包，图标，字体和工具

5.1 视觉开发工具

5.2 Android 模板、PSD、矢量工具

5.3 Android的图形用户界面图标集

5.4 Android的字体工具

 

 

1. Android UI技巧

   1.1 不应作什么

• 不要照搬你在其它平台的UI设计，应该让用户使用感受是在真正使用一个 Android软件，在你的LOGO显示和平台总体观感之间作好平衡
• 不要过分使用模态对话框
• 不要使用px单位，使用dp或者为文本使用sp
• 不要使用固定的绝对定位的布局
• 不要使用过小的字体

1.2 该作什么

• 要为高分辨率的屏幕建立资源
• 要使用适当的间距
• 要正确管理活动（Activity）
• 要正确处理屏幕的方向变化
• 须要点击的元素要够大
• 图标设计要遵循Android的准则
• 要支持D-pad和trackball导航
• 使用主题/样式，尺寸和颜色资源来减小多余的

 

1. Android UI 设计理念和注意事项

   2.1 Android UI设计理念

• 干净而不过简单
• 关注内容而非修饰
• 保存一致，让用户容易投入其中，可附加少量变化
• 使用云端服务（存储和同步用户资料）来增强用户体验

2.2 优秀UI设计准则

• 关注用户

  了解你的用户年龄，技能文化，对你的应用的需求没使用的设备

  什么时候何地如何使用设备

  用户优先的设计心态，用户一般是任务导向的行为模式

  更早，更频繁的由真是用户来测试

• 显示正确的内容

  最经常使用的操做须要最快被用户看到而且可用

  不太长用的功能能够放到菜单里面

• 给予用户适当的回馈

  交互的UI元素最少要反映4种不一样的状态

  保证操做的结果清晰可见

  多给予用户进度提示，但不要干扰他们当前的操做

   

• 有章可循的行为模式

  行为模式遵循用户的指望，正确的操做活动，显示用户指望看到的信息和动做

  使用合适的方式来增强功能的可见性，能够点击的元素看起来是能够点击的

  若是用户完成一项须要复杂的操做，从新思考你的设计

• 容忍错误

  只容许有意义的操做，适当禁用一些按钮

  尽可能减小不可回退的操做

  容许回退比使用肯定的对话框更好，实际上，应该尽可能少用肯定对话框，它是对用户是一种干扰

  若是有错误发生，那就会有人犯错误

2.3 设计须要考虑

• 了解屏幕尺寸和密度的分类
• 屏幕的方向（竖向和横向）
• 主要的UI交互方式
• 软键盘仍是物理键盘
• 了解不一样设备之间的相异之处是很是重要的

Android主流机型分辨率:

经常使用主流机型
分辨率	320x480	480x800	640x960	480x854	320x240	600x1024

 

1. Android UI 框架特性/界面布局

   相对布局和线性布局是Android里面经常使用的两种布局，线性布局比较简单，而相对布局能够作出比较复杂的布局管理，因此仅仅了解线性布局，不少时候是不够的。

   为了适应各式各样的界面风格，Android系统提供了5种布局，这5种布局分别是：

• LinearLayout (线性布局)
• TableLayout (表格布局)
• RelativeLayout (相对布局)
• AbsoluteLayout (绝对布局)
• FrameLayout (框架布局)

利用这五种布局，能够在屏幕上将控件为所欲为的摆放，并且控件的大小和位置会随着屏幕大小的变化做出相应的调整。

下面是这五个布局在View的继承体系中的关系：

 

1. Android UI 图标设计原则

   Android系统被设计在一系列屏幕尺寸和分辨率不一样的设备上运行的。当你为本身的应用设计图标时，必须知道，你的应用有可能在任何设备上安装运行。正如支持多屏幕， Android 为你直接提供这样的图标，他们会在任何设备上正确的显示，不管这些设备的屏幕大小和分辨率如何。

   通常来讲，推荐的方式是为三种广泛的屏幕密度中的每一种都创造一套独立的图标。而后，把他们储存在你的应用中特定的资源目录下。当你的应用运行时，Android平台将会检查设备屏幕的特性，从而加载特定密度资源目录下相应的图标。

   4.1 图标的尺寸规则和密度

   Android 设备的屏幕密度基线是中等。

   所以，一种被推荐的为多种屏幕密度创造图标方式是：

• 首先为基准密度设计图标（看表一为实际的像素尺寸设计的图标）。
• 把图标放在你的应用的默承认绘制资源中，而后在 Android 可视化设备（AVD）或者HVGA设备如 T-Mobile G1中运行应用。
• 根据须要测试和调整你的基准图标。
• 当你对在基准密度下建立的图标感到满意的时候，为其余密度创造副本。

把基准图标按比例增长为150％，创造一个高密度版本。

把基准图标按比例缩小为75％，创造一个低密度版本。

• 把图标放入你的应用的特定密度资源目录中。例如：

中密度版本在 res/drawable-mdpi/ 目录下运行

高密度版本在 res/drawable-hdpi/目录下运行。

高密度版本在res/drawable-ldpi/目录下运行。

（或在默认 res/drawable/ 目录下运行）

• 若是须要，测试和调整高密度和低密度的图标。

对于广泛的屏幕密度标准版本尺寸(像素表示)

分类	低密度屏幕(ldpi)	中密度屏幕(mdpi)	高密度屏幕(hdpi)
启动器	36 x 36 px	48 x 48 px	72 x 72 px
菜单	36 x 36 px	48 x 48 px	72 x 72 px
状态栏	24 x 24 px	32 x 32 px	48 x 48 px
标签	24 x 24 px	32 x 32 px	48 x 48 px
对话	24 x 24 px	32 x 32 px	48 x 48 px
列表视图	24 x 24 px	32 x 32 px	48 x 48 px

 

4.2 图标的设计规则

Android 2.0和之后的平台的新规定: Android启动器图标应该面向前方，透视很是小，并且应该顶部照明。此外，注意全部图标应该有独立的文字标签，而不是把文字设计嵌入到图标里面，把努力用在使图标有特点和难忘中去。

Android图标是...

现代的，简约的，不平坦的，有触感，和质感的面向前方和顶部明亮，总体而言，色彩在必定的色谱中

Android 图标不是...

过期的，过度复杂，光滑的，平坦的,旋转的, 剪裁不正的,过于深色的

 

 

"作这些和不要作这些"

在为你的应用作菜单图标时，下面是一些"作这些和不要作这些"要考虑的例子。

状态

 

1. Android UI 开发的GUI工具包，图标，字体和工具

   Android视觉开发工具，可视化开发工具，包括设计图形用户界面，图标图标，VISIO在设计，字体等的工具集合，

   5.1视觉开发工具：

   DroidDraw：图形用户界面编辑器的机器人  （Android的图形界面编辑器DroidDraw）

   官网地址： http://www.droiddraw.org/

   AnDroidDraw 是DroidDraw的一款内嵌插件，让你设计的用户界面能直接运行在模拟器上：

   官网地址： http://www.droiddraw.org/androiddraw.html

      

    

    

   5.2 Android 模板、PSD、矢量工具：

   Android的线框模板：机器人模拟器模板设计，用来设计不一样分辨率，不一样虚拟键盘的手机用的，能让你的应用程序的测试环境更加贴近真机。

   下载地址：

    http://gliderguns.files.wordpress.com/2010/01/android_wireframe_templates3.pdf

   Android的图形用户界面PSD的矢量工具包：

   下载地址：

    http://www.smashingmagazine.com/2009/08/18/android-gui-psd-vector-kit/

    

   谷歌Android的图形用户界面密码：矢量化的图形用户界面设计工具

   官网地址： http://chrisbrummel.com/google-android-gui-psd

   Android的模板：模板，界面图像都被重绘，并且文件夹也加上了机器人的独有元素

   官网地址： http://unitid.nl/2009/11/fireworks-template-for-android/

   
   谷歌Android的模板为Omnigfaffle

   官网地址： http://graffletopia.com/stencils/498

   素描模具版本的Andr​​oid 1.0 Omnigfaffle

   官网地址： http://graffletopia.com/stencils/578

    

   Android的图形用户界面原型的Visio模具：机器人Visio的界面设计器

   官网地址： http://www.artfulbits.com/Android/Stencil.aspx

    

   5.3 Android的图形用户界面图标集

   Android开发图标模板包

   该 机器人图标模板包 是一个集合，模板设计准则，过滤器和设置，使您更容易地建立图标符合Android的设计给出的通常规格。
   有三个图标，在下载套餐，标准发射器的图标，标准菜单图标和状态栏图标的标准包括套。
   您能够预览图标集以下。

   
   下载»

   
   下载»

   
   下载»

   Android开发者共同图标集

   
   在这些图标的设计和风格都基于对那些在Android SDK中包含的一些图标。 总共有24个巴纽铭文与如下尺寸的选项：。16 × 16，24 × 24，32和32 × 48 × 48像素。
   下载»

   Android开发者共同图标集二

   
   此图标集包含中使用的图标设计的菜单，列表，标签（选择和反选）或对话框，用适当的标记的文件夹到正确的大小排序。
   总共有15个象形文字，全部以。png格式。
   下载»

   Android的图标

   
   这个机器人开发一套包括30个图标。巴纽菜单图标，加上其余源文件（。集）为进一步定制。
   下载

   Glyphish

   
   该Glyphish图标集设计并精心设计就在iPhone应用程序的工具栏和标签栏使用专门的，但也将Android的发展完善。
   130个图标是24位。PNG图像约30​​ × 30像素的标签栏图标，大约20 × 20像素的图标，工具栏和导航。
   下载»

   Android应用程序图标集

   
   下载»

   Android的iDroid图标

   
   下载»

    

    

   Android的图标模板

   
   下载»

   Android的图标套装II
   下载 »

    

    

    

    

    

   Gesturecons - 多触摸图标

   
   这些基于矢量图标的创建都是为了帮助设计，开发，实施和多点触摸界面推广。 您可使用在你的应用程序Gesturecons为了向用户展现如何完成的行动或促使他们与应用程序交互时，他们的作法了。 您能够缩放到任意大小和它们以任何方式改变你想他们。
   下载包内有52个高分辨率矢量图标彻底可扩展和可变（。PDF格式。人工智能。EPS文件类型。）。
   下载»

    

    

    

    

    

   5.4 Android的字体工具

   Android 字体家庭套餐

   这是一个 Android的字体下载包。 A字型系列官方已设计和优化的网络操做系统中使用的应用程序菜单，为Android浏览器和其余屏幕上的文字。 包中还包括是 droid.css 和 droid.sass CSS3的文件与 @字体面声明。
   你能够看到下面的Android字体预览：

   
   下载Droid字体家庭»

   预览

   
   下载Droid字体家庭»

   预览

   
   Droid下载»

   Droid的衬线字体免费由谷歌Android @ fontsquirrel

   
   Droid的衬线字体免费由谷歌Android @ fontsquirrel »