`
zhouxiaoli521
  • 浏览: 561640 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

多图详解“Android UI“设计官方教程

阅读更多

  很多朋友都在寻找Android UI开发的教程,我们从Android的官方开发者博客找了一份幻灯片,介绍了一些Android UI设计,我们把这个教程整理出来,希望大家喜欢。

  作为开发者,为啥我们要关心UI,前面的一堆通通可以忽略掉,直接跳到最后一条。因为好的UI设计可以帮助我们卖出更多拷贝,赚到更多钱。


  简介

  这个教程包含5个部分:

  ◆该做什么,不该做什么

  ◆设计哲学和考量

  ◆你必须了解的 UI 框架特性

  ◆新的 UI 设计模式

  ◆图标和准则

 UI设计5不要

  ◆不要照搬你在其它平台的UI设计,应该让用户感觉是在真正使用一个 Android 软件,在你的商标显示和平台整体观感之间做好平衡

  ◆不要过度使用模态对话框

  ◆不要使用固定的绝对定位的布局

  ◆不要使用px单位,使用dp或者为文本使用sp

  ◆ 不要使用太小的字体

 

  UI设计9要素:

  ◆为高分辨率的屏幕创建资源(缩小总比放大好)

  ◆ 需要点击的元素要够大

  ◆图标设计遵循 Android 的准则

  ◆ 使用适当的间距(margins, padding)

  ◆ 支持D-pad和trackball导航

  ◆正确管理活动(activity)堆栈

  ◆ 正确处理屏幕方向变化

  ◆使用主题/样式,尺寸和颜色资源来减少多余的值

  ◆和视觉交互设计师合作!

 

4则Android UI的设计哲学:

  ◆干净而不过于简单

  ◆关注内容而非修饰

  ◆保存一致,让用户容易投入其中,可附加少许变化

  ◆使用云端服务(存储和同步用户资料)来加强用户体验

  优秀界面的设计5条准则:

  ◆关注用户

  ◆显示正确的内容

  ◆给予用户适当的回馈

  ◆有章可循的行为模式

  ◆容忍错误

  关注用户:

  ◆了解你的用户(年龄,技能,文化,对你的应用的需求,使用的设备,何时何地如何使用设备)

  ◆‘用户优先’的设计心态 (用户通常是任务导向的行为模式)

  ◆更早,更频繁的由真实用户来测试

   显示正确的内容:

  ◆最常用的操作需要最快被用户看到并且可用

  ◆不太常用的功能可以放到菜单里面

 

 给予用户适当的回馈:

  ◆交互式的UI元素最少需要反映出4种不同的状态 (default,disabled,focused,pressed)

  ◆保证操作的结果是清晰可见的

  ◆多给予用户进度提示,但是不要干扰他们当前的操作

  有章可循的行为模式:

  ◆行为模式遵循用户的期望(正确的操作活动堆栈,显示用户期望看到的信息和动作)

  ◆使用合适的方式来加强功能可见性(可点击的元素就应该看起来是可以点击的)

  ◆如果用户完成一项任务需要复杂的操作,重新思考你的设计!!!

 容忍错误:

  ◆只允许有意义的操作(适当禁用一些按钮)

  ◆尽量减少不可回退的操作

  ◆允许回退(undo)比使用确定对话框更好(实际上,应该尽量少用确定对话框,它对用户是一种干扰)

  “如果错误是可能发生的,那它就一定会发生。”

——Donald Norman, The Design of Everyday Things 作者

 

 

 设计需要考量的8地方:

  ◆屏幕的物理尺寸

  ◆屏幕密度

  ◆屏幕的方向(竖向和横向)

  ◆主要的UI交互方式(触屏还是使用D-pad/trackball)

  ◆软键盘还是物理键盘

 

  ◆了解不同设备之间的相异之处是非常重要的!

  ◆阅读CDD,学习设备可能差异的地方

  ◆了解屏幕尺寸和密度分类

  Android UI 框架特性

 

   你必须了解(使用)的 UI 框架特性。

   使用相对布局管理界面元素。

  译者注:相对布局和线性布局是Android里面常用的两种布局,线性布局比较简单,而相对布局可以做出比较复杂的布局管理,所以仅仅了解线性布局,很多时候是不够的。不过以作者之前Qt的经验来看,Android里面的布局管理功能都比较阳春也不太容易使用,不过这可能是跟移动平台的性能考量有关系。

 合理使用资源修饰符

   使用资源修饰符来修饰同一套资源的多个不同版本。

  ◆一个apk包里面会包含所有的资源文件。

  ◆系统在运行时会根据软硬件环境来自动选择相应修饰符版本的资源。

  译者注:最常用的修饰符可能是locale修饰符(制作多语文本),dpi修饰符(为不同密度的屏幕制作不同尺寸的图标和皮肤),orientation修饰符(为横屏和竖屏提供不同的UI布局)。如果系统找不到对应的修饰符版本,它就会选择无修饰符的版本,这个版本通常也是所谓的默认选择。

 

9-patch drawables

   使用 9-patch drawables – foo.9.png

  ◆9-patch drawables 的语法跟CSS3 border image 类似

  ◆根据边缘的像素宽度切割出不同的拉伸区域

  ◆最好同时提供 mdpi 和 hdpi 的版本

  译者注:drawables 在 Android 里面跟 WPF 里面的 Drawing 类似,用于定义一个可绘制的对象,包括位图,刷子,填充颜色或者以上物件的组合等等。所谓 9-patch drawables,就是将一个 drawable 按照定义的 4 个边缘的宽度大小切割成9个区域,包括4个角落,4条边缘和一个中心区域,当把这个 drawable 绘制到一个任意矩形区域时,drawable 的各个区域有不同的拉伸控制(角落不拉伸,横边横向拉伸,竖边竖向拉伸,中心区域横竖向都拉伸)。通常使用 9-patch drawable 一般是为了绘制出比较漂亮的带圆角背景,这样可以避免圆角及边缘被任意拉伸导致变形。当然,如果你的程序里面绘制的图像和目标区域大小完全一样,就不需要那么麻烦,不过以 Android 的状况来说,为了适应多种设备,最好不要事先假设目标区域的像素大小。

  使用状态列表和多层叠加来制作具备复杂效果的可绘制图像

  使用 Selector (state list) drawables (状态列表)来提供不同状态(normal,disabled,focused,pressed…)下的绘制图像。

  使用 Layer drawables (多层叠加)来制作具备复杂效果的可绘制图像。

  译者注:所谓多层叠加,使用PS来制作图标和皮肤的同学可能都清楚,比如说一个按钮的PS模板通常会包括所谓的background层定义底色,mask层定义轮廓,shine层定义前景的高亮效果。而 Android 里面允许你直接在 XML 脚本里面使用 Layer drawables 的语法来定义上述的多层叠加效果,这样可能比在PS里面直接做好要更灵活一些,并且有的层可以是来自png位图,有的层可以是直接通过 XML 脚本生成(比如纯色,过渡色等等)。

 

From:http://android.tgbus.com/Android/tutorial/201011/331386.shtml

分享到:
评论
1 楼 univasity 2011-08-04  
不错,说得很到位,谢谢分享。

相关推荐

    Android_ui.zip_android_android 界面_android ui_android 界面_android

    本资源"Android_ui.zip"包含了一个名为"Android用户界面详解.doc"的文档,它可能详细介绍了Android UI设计的基础知识,帮助开发者学习如何构建Android应用的用户界面。 首先,Android UI由多个组件构成,如布局...

    Android UI开发经典参考资料

    在Android应用开发中,UI(用户界面)设计是至关重要的,因为它直接影响到用户的使用体验。以下是一些关于Android UI开发的经典知识点,这些知识点都包含在提供的压缩包文件中。 1. **9-patch 图片**: Android 9-...

    Android大学生在线(包含UI效果图、原型图、接口文档、毕业设计)

    项目包含了UI设计效果图、原型图、接口文档以及毕业设计等多个组成部分,全面展示了从概念构思到实际开发的全过程。 1. **UI效果图与原型图** UI(用户界面)效果图是设计师呈现应用视觉风格和布局的成果,它展示...

    android+UI.pdf

    本章节将从Android UI的基础概念出发,深入探讨UI设计原理及其在Android平台上的实现方式。 #### 二、UI组件简介 1. **视图(View)**:是UI的基本组成单元,用于显示单一类型的界面元素。 2. **视图组(ViewGroup)**...

    Android中级教程之----Log图文详解

    "Android 中级教程之 Log 图文详解" Android 中的 Log 机制是 Android 开发中非常重要的一部分,它允许开发者在应用程序中输出日志信息,以便于调试和优化代码。Log 机制提供了多种输出级别,包括 VERBOSE、DEBUG...

    android ui psd

    【Android UI 设计详解】 Android用户界面(UI)设计是构建安卓应用不可或缺的一部分,它直接影响到用户的体验和应用的易用性。Android UI设计遵循一套规范和指导原则,旨在提供一致性和可预测性的交互,同时允许...

    Android 高级UI课程

    本课程旨在帮助学员深入理解Android UI开发的核心技术和设计理念,通过系统化的学习路径,使学员能够掌握高级UI设计技巧,提升应用程序的用户体验。课程适合有一定Android开发基础的学习者,通过实战项目驱动的方式...

    android应用程序界面UI详解.pdf

    《Android应用程序界面UI详解》 Android用户界面UI是开发者与用户交互的核心部分,它决定了应用的外观和用户体验。本文将深入解析Android UI开发的关键概念和技术,主要包括资源管理、图形绘制、显示机制以及控件...

    Android创意实例详解书籍源码

    1. **UI设计**:源码中可能包含自定义控件的实现,如滑动菜单、轮播图、炫酷过渡效果等,这有助于我们学习如何构建吸引用户的界面。 2. **动画效果**:Android支持多种动画类型,包括视图动画、属性动画等。实例...

    Android应用开发详解pdf

    这本书深入浅出地介绍了Android平台的基本概念、开发环境搭建、UI设计、数据存储、网络通信以及多媒体处理等多个核心领域,旨在帮助读者快速上手并构建自己的Android应用。 1. **Android平台介绍**:首先,书本会...

    android应用开发详解

    《Android应用开发详解》这本书是为初学者量身打造的一本指南,旨在深入浅出地介绍Android应用开发的各个环节。Android开发是一个庞大且复杂的领域,涵盖了许多不同的技术和工具,但本书将带你逐步走进这个领域,从...

    android UI设计

    ### Android UI设计技巧详解 #### 1. 使用`include`标签包含共享UI设计 在Android应用开发中,经常需要在多个界面中重复使用同一部分UI布局。为了提高代码的复用性和可维护性,可以使用`<include>`标签来包含共享...

    android优化技术详解

    Android 优化技术详解 Android 优化技术是指通过合理的编程和设计来提高 Android 应用程序的性能、内存和用户体验的一系列技术。下面是 Android 优化技术的详细解释: UI 布局优化 Android 的 UI 界面布局的优化...

    android课程设计图片显示器

    【Android课程设计:图片显示器详解】 在Android应用开发中,图片显示器是一个常见且重要的功能,它允许用户查看、浏览和处理图像。这个课程设计提供了一个现成的图片显示器,可以直接添加到项目中运行,无需进行...

    【Android UI设计与开发】顶部标题栏 ActionBar 一至四全集

    ### Android UI设计与开发之ActionBar详解 #### 一、ActionBar简介及基本概念 ActionBar作为Android应用界面中的一个重要组件,主要用于展示应用的品牌标识、提供主要的导航功能以及其他常见操作的访问入口。它...

    android-ui.zip

    【Android UI 开发详解】 Android UI(用户界面)是Android应用程序开发的重要组成部分,它决定了应用的外观和用户体验。"android-ui.zip"这个压缩包包含了与Android UI开发相关的源码和资源,可能是为了教学或者...

Global site tag (gtag.js) - Google Analytics