Widget组件及设计介绍

   以下仅代表个人的想法，仅供大家参考，如有不对之处请大家指出，这也是我调研的结果，加以总结:

我们可以看到Widget是一种展示在手机主屏的一种快速浏览的一个插件。

Widget的应用很广，可以应用到WEB、桌面和手机端。例如操作系统上的时钟、天气、资讯的小插件都属于Widget。

现在的智能手机就相当于一智能电脑，其桌面也可以填充格式各样的Widget，这里Android SDK1.5以上就提供了对Widget非常好的支持。

Widget有几大特点

1、身材微：一般的它们都比较小，在终端上嵌入十分的方便，运行快速。

2、形式多：Widget的展现形式多，可以自定义样式，如幻灯秀、视频、地图、新闻、小游戏等..

3、个性化：可以在桌面上展示个性化的服务，根据自己的需求来排列、显示。也可以设置一些widget的显示形式和更新频率。

4、连动性：对于一个主应用程序，其相当于是一个桌面窗口一样和主程序在实时连动，可以显示一些主要的信息内容，在不必要时不需要进入主程序。

Android上主流的一些APP Widget应用:

其中包括新浪微博、人人网、小米读书、墨迹天气、开关控件、QQ、日期等一些的应用。

Android上是怎么实现APP Widget的？

   实际上在Android发开包中，它把所有的一些控件包括button、txtarea、menu等等都叫做Widget，而我们实际上说的Widget 是属于 APP Widget（APPLIACTION），这个只要大家了解一下就可以了。     

Widget的实现对于Android 上并不是什么难事，在Android SDK1.5版本的时候就已经推出了Widget的功能，并且Android手机也自带了许多插件，虽然有些并不是很个性，美观，但是我们还可以选择很多第三方开发的Widget来个性化自己的桌面。

Android上的APP  Widget设计

首先设计尺寸规则有一个公示：最小尺寸（dip）=（格子数*74）-2

所谓的格子数就是指.主屏分为4X4的格子根据自己设计占的格子数来创建的。

标准Widget剖析

典型的AndroidWidget主要有三个组成部分:一个限位框,一个框架,还有Widget的图形控件以及其它元素.设计周全的Widget会在限位框边缘&框架之间,及框架内边缘&Widget的控件之间都保留一些内填充(内补白).Widget的外观被设计得与主屏幕的其它Widget相匹配,并以主屏幕的其它元素为依据对齐;它们亦使用标准的阴影效果.此文档说明了所有的相关细节.

                 标准Widget尺寸(纵向)

            标准Widget尺寸(横向)

设计一个Widget

◆为你的Widget选择限位框尺寸.

最有效的Widget会以最小型的尺寸来显示程序有用或及时的数据.用户会衡量Widget的有用性或它所占的屏幕空间,因此越小越好.

所有Widget必须符合限位框的六种尺寸之一,或者更好的是,或更好的是在一对纵向和横向的方位尺寸里,这样在用户切换屏幕方向时,你的Widget看起来也会更舒适.

标准Widget尺寸以图例说明了六种Widget尺寸的限位规格(三种纵向三种横向).

◆选择匹配的框架.

标准Widget框架以图例说明了六种Widget尺寸的标准框架,你可以下载此链接的副本备用.你的Widget并非都必须使用这些框架,但若你用了,你的Widget可能与其它Widget看起来更一致.

 

◆对图形应用标准阴影效果.

此外,你并非必须使用此效果,但标准Widget阴影说明了标准Widget使用的Photoshop设置.

◆若你的Widget包含按钮,需绘制按钮的三种状态(默认,按下,被选中).

你可以下载一个音乐Widget播放按钮的Photoshop文件(包含三种状态) ,用来分析三种标准按钮效果的Photoshop设置.

标准Widget尺寸

这里有六种基于4 x 4 (纵向)或 4 x 4 (横向)单元的主屏幕网格的标准Widget尺寸.这些规格为六种标准Widget尺寸的限位框.这些尺度是六种标准Widget尺寸限位框.典型Widget的内容并不绘制这些尺度的边缘线,但在限位框里填充一个框架正如设计一个Widget所说到的.

纵向方位时, 每个单元宽80像素高100像素(下图展示了一个纵向方位的单元). 纵向方位支持的三种Widget尺寸为:

 

   横向方位时,每个单元宽106像素高74像素.横向方位支持的三种Widget尺寸为:

 

标准Widget框架

针对六种标准Widget尺寸这里有标准的框架.你可以在以下内容点击框架图片来下载该框架的Photoshop 文件用在你的Widget上.

4x1_Widget_Frame_Portrait.psd

3x3_Widget_Frame_Portrait.psd

2x2_Widget_Frame_Portrait.psd

4x1_Widget_Frame_Landscape.psd

3x3_Widget_Frame_Landscape.psd

2x2_Widget_Frame_Landscape.psd

更多设计的细内容请参考此处

http://hi.baidu.com/tdskee/blog/item/575bbcaf758559d87cd92abe.html