最近做的一个谷歌地图的练习，效果如下：  

  主类的代码：   [codesyntax lang=”actionscript3” lines_start=”1” tab_width=”10”]

package com.sqstudio.control
{
import com.google.maps.Color;
import com.google.maps.InfoWindowOptions;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.NavigationControl;
import com.google.maps.controls.OverviewMapControl;
import com.google.maps.controls.ScaleControl;
import com.google.maps.services.ClientGeocoder;
import com.google.maps.services.GeocodingEvent;
import com.google.maps.services.GeocodingResponse;
import com.google.maps.services.Placemark;
import com.sqstudio.common.IPProxy;
import com.sqstudio.common.SysConfig;
import com.sqstudio.vo.IpVo;

import flash.events.Event;
import flash.geom.Point;
import flash.text.TextFormat;

import flashx.textLayout.formats.TextAlign;

public class MapController
{
private var googleMap:Map;
private var geocoder:ClientGeocoder;
private var ipVo:IpVo;
public function MapController()
{
init();
}
private function init():void{
googleMap = new Map();
googleMap.sensor = “false”;
googleMap.key = SysConfig.MAP_API_KEY;
googleMap.addEventListener(MapEvent.MAP_READY, mapReadyHandler);
googleMap.setSize(new Point(SysConfig.STAGE.stageWidth, SysConfig.STAGE.stageHeight));

//NavigationControl - ScaleControl 为一组UI
//ZoomControl - PositionControl 为一组UI

googleMap.addControl(new ScaleControl());
googleMap.addControl(new NavigationControl());
//googleMap.addControl(new ZoomControl());
//googleMap.addControl(new PositionControl());
//
googleMap.addControl(new MapTypeControl());//地图类型
googleMap.addControl(new OverviewMapControl());//小型地图-缩略图
SysConfig.STAGE.addChild(googleMap);
googleMap.visible = false;
}
/**
*地图准备就绪
* @param event
*
*/
private function mapReadyHandler(event:Event):void
{
geocoder = new ClientGeocoder();
geocoder.addEventListener(GeocodingEvent.GEOCODING_SUCCESS, geocodingSuccessHandler);
geocoder.addEventListener(GeocodingEvent.GEOCODING_FAILURE, geocodingFailHandler);
var ipProxy:IPProxy = new IPProxy();
ipProxy.getIp(getIpResult);
}
/**
*获得IP地址，进行解析
* @param ipVo
*
*/
private function getIpResult(ipVo:IpVo):void{
this.ipVo = ipVo;
geocoder.geocode(this.ipVo.cip);
}
/**
*解析地址成功
* @param event
*
*/
private function geocodingSuccessHandler(event:GeocodingEvent):void
{
googleMap.visible = true;
var place:Placemark = GeocodingResponse(event.response).placemarks[0];
googleMap.setCenter(place.point,9);//10-缩放级别

var infoWindowOptions:InfoWindowOptions = new InfoWindowOptions();
infoWindowOptions.title = “欢迎访问斯樵工坊(SQStudio.com)”;
var titleFmt:TextFormat = new TextFormat(null,12,Color.BLUE);
titleFmt.align = TextAlign.CENTER;
infoWindowOptions.titleFormat = titleFmt;
infoWindowOptions.content = “你的位置：”+place.address;
infoWindowOptions.content += “\n经纬度：”+place.point;
infoWindowOptions.width = 260;
infoWindowOptions.hasShadow = true;

googleMap.openInfoWindow(place.point,infoWindowOptions);
}
/**
*解析地址失败
* @param event
*
*/
protected function geocodingFailHandler(event:GeocodingEvent):void
{
if(!this.ipVo.isIpError){
trace(“解析IP失败：”+event.name);
this.ipVo.isIpError = true;
geocoder.geocode(String(this.ipVo.cname));
}else if(!this.ipVo.isNameError){
trace(“解析城市名称失败：”+event.name);
this.ipVo.isNameError = true;
geocoder.geocode(“北京市”);//解析失败默认北京
}
}
}
}

[/codesyntax] 谷歌Map 中文AS3 API地址： http://code.google.com/intl/zh-CN/apis/maps/documentation/flash/reference.html 获得本地IP方式：

2.几个IP查询接口（JS）： （注意： 这三个接口中，只有新浪接口下有crossdomain.xml文件，所以如果用AS3直接访问的话，建议选择新浪接口，不然会遇到安全沙箱哦！）

腾讯的IP地址API接口地址：http://fw.qq.com/ipaddress
新浪的IP地址查询接口：http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js（还有json和xml格式）
新浪多地域测试方法：http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js&ip=12.130.132.30
搜狐IP地址查询接口（默认GBK）：http://pv.sohu.com/cityjson
搜狐IP地址查询接口（可设置编码）：http://pv.sohu.com/cityjson?ie=utf-8
搜狐另外的IP地址查询接口：http://txt.go.sohu.com/ip/soip

这是一次内部分享，新部门的同学们希望我聊聊我过去从事的交互设计，做个了面对入门者等级的PPT，和各位简单聊了聊。发到微博上，也敦促自己对交互设计从业经历做个简单总结。——类似的文章，貌似自己在三年前也写过…… **　　一. 什么是交互设计** 要谈什么是交互设计，先要了解这几个概念。

　　网页设计年代，大概是从2004年开始热起来了，等到我毕业的2006年，满大街都已经是电脑培训机构，记得当时北大青鸟的百日千才培训就在我每日下班必经的十字路口。 网页设计年代重视的是特效，说白了就是特效背后的技术，君不见当时的网页是让人看得眼花缭乱啊，这里bling bling闪闪的，漂浮框乱跳的。然后就是套各种网页设计模版，做出很多复杂的类似于右边这种典型的政府网站出来。

美工时代： yixieshi 网页设计时代，大批的“美工”涌现。显然人们有了更高的追求，光是bling bling的眼花缭乱的动画效果已经看厌了，网页也是需要装饰美化的。虽然网页设计论坛(www.68design.net)当时很火，但是网页设计师这 个头衔仍然是一厢情愿的叫法。大多数时候，仍然是老板和客户嘴里的“美工”。 美工时代重视的是：视觉效果。并且，原来对网页设计一窍不通的老板们纷纷成了资深的视觉鉴赏家。美工时代“美工”很痛苦——单纯靠视觉效果去评价作品好坏，太主观，太随意。于是他们通常会做N个版本，反复修改，直至美工崩溃或者老板崩溃。

历史迈入了伟大的UI年代。 yixieshi 大概是在2005年，我崇拜的网络名人从擅长鼠绘的小非变成了图标达人Rokey(时光倒流到2005年，我正在看这篇文章：灵感来源于生活-微软亚洲工程院移动设备组UI设计师张伟)。也自学了关于UI的若干知识，开始迷恋起PS像素级的奇妙世界。 UI=User Interface. 已经将User即用户纳入界面设计考虑的重要要素。但是对于精致、质感的无极限的追求，依然会让人顾此失彼，忘记了从用户的视角去审视一个UI的作品。于是，经常会看到虽然很精致，但是很难用的软件界面。 用户看到的部份，无可挑剔。但是实际上，使用的感受并不好。而感受部份，可以从几个角度去阐释： ● 他们知道不知道这个是什么东西?他们感觉到迷惑吗? ● 他们是否清楚能够通过此物做什么? ● 是否清楚如何做到? yixieshi ● 当他们有兴趣去尝试时，他们知道如何开始吗? ● 当他们开始后，知道如何进行下一步吗? ● 当不想要使用时，能够快速明白如何退出吗? yixieshi ● 当他们退出后，下次来用，是否需要重新去学习掌握如何操作? ● 每一步操作时，他们心理会感觉到愉悦还是枯燥乏味? 互联网的一些事 当然，我们崇尚软件操作过程中的效率，但是若用户感觉到愉悦，也许就不会觉得效率太低，其实，效率是个相对的说法。归根结底，这就是用户体验。

　　UED时代——用户体验制胜 我们不缺技术，我们不缺另人震撼的视觉，这些虽然过去是我们孜孜追求的东西，如今已经不足为奇。但是我们缺用户来用，我们缺用户持续来关注，我们缺用户体验。用户体验过去一直在产生影响，但是未能得到足够的重视。 互联网的一些事 2007年，开始关注www.ucdchina.com. UED是套方法论，UCD是指导思想——User-centered Design. 不再是BCD-Boss-Centered Design.老板说了算，除非老板能够代表目标客户。这和市场营销学发展的历程有点像，从生产主导到市场主导。

　　以下是我在用户体验设计?——是什么不是什么里用到的图片。WEB2.0后，用户的参与度越来越高，用户从被动的接受者变成了主笔，主编，摄影 师，作家……他们是主角，使用中遇到问题，当然不可能靠网站的客服电话或帮助教程搞定，他们需要自助，所以，降低使用门槛，消除使用障碍，吸引他们重复使 用，是每个网站致力的方向。

　　以下是在用户体验设计答疑对话(半吊子和纯外行)一文中的配图。从广义来讲，一个网站的任何部门都是在为用户体验服务，从战略层的布局开始，用户体验已经开始。而狭义的用户体验设计，也就是UED部门做的事情，大部分是围绕到结构、框架以及表面层。

　　UED部门的组织架构基本如下，解决用户易用(交互、文案)，以及想用(视觉，交互)的问题。而用户研究是帮我们看清用户特征、洞察及挖掘用户需求，前端是伟大的实现者。 互联网的一些事 文案对于用户体验的重要性经常被忽视，所以，文案撰写在UED团队是很稀缺的资源。目前据我了解，只有支付宝的UED团队有此配置，其他团队大部分是由产品经理担任此职。 互联网的一些事

那么，交互设计到底是什么呢? yixieshi 我突然打了一下你，你肯定会有一定的反应。首先，你的表现会吃惊或者生气，你的吃惊或者生气的程度也会受我下手的轻重和方式影响。 我呢，对你的反应会有一定的预期，下手的时候，没有期望你会突然哈哈大笑——这就是人与人之间的交互。 人和物也是一样，我按下电视的开关键，我预期电视会打开，并且电视如期望发生运转。若我按下电视的开关键，突然电视成了静音，这就是非期望的交互行为。 yixieshi

二. 为什么需要交互设计?

　　人可以经由训练，改变自己对于行为的反馈，比如，妈妈教育婴儿对于他人的礼物回报以“谢谢”和微笑，不要跟着陌生叔叔走等。如果你送一个小孩子礼物，他却对于大骂，你会觉得这个小子怎么这么没教养。 机器、系统没有生命力，则需要被赋予对于各种行为的反馈机制。将用户的期望赋予给它，让它给出合理的反馈行为。 然而不幸的是，我们的生活里，没有教养的产品实在太多太多……

　　上图左侧是一个杯子。我让现场的同学猜这个杯子的成本价，答案集中在10元左右。但是不幸的是，我为这个杯子花费了不下600元。原因正在于不良交互。 杯子的把手处仅容两个手指塞入，当倒入热茶后，我端起此杯，把手上部是光滑无比的玻璃，而手指又被杯壁烫了一下，结果杯子倾斜，将热茶倒入了笔记本电脑键盘里——修键盘花费了580元。 考虑到这里，设计杯子的设计师可以考虑把把手做成磨砂玻璃，增加卖点。 yixieshi

　　上图是公司内部的门。基本上去个卫生间都要从此门经过，那么基本上每个员工每天进出此门不下6次吧。 在场的同学声称每次都很紧张——为什么?怕被撞啊。你看不到对面有没有人，怕推门撞别人。自己也担心被人撞。所以，途径此门，瞳孔会不会由于紧张放大呢?还有，此门推也可拉也可，上面的“拉”字其实形同虚设。 每天反复扇动，座位靠近此门的同学们夏天感觉到热，冬天感觉到冷。严重不低碳环保。 原因也是不良交互设计。 改进此门，可以设置透明的玻璃窗。或者用自动开启的推拉门代替。

　　上面是一个电梯事件。要知道电梯是个最讲究习惯统一的地方。你要经常在不同的大楼用不同的电梯。若A电梯用这种按键，B电梯用那种按键，基本上 你都要重新适应。然而这个适应你又无法持续，因为你到了C电梯，仍然要重新学习。所以电梯的按键设计，基本上要有行业标准的。 然而华星路的创业大厦就是特立独行的。大多数电梯将开门、关门的按键放到了数字键的上部。而创业大厦则是将报警按键放到此处，开门关门则放到了数字键的最下方。 我2008年到阿里巴巴上班(当时公司就在创业大厦)，觉得这里的同事很不友好。好几次晚到一步，电梯门即将合上，我大步向前，边跑边叫等一下。里面的人面带笑容，靠门的MM伸手一按键，电梯门无情地关上了。 这里的人都太不友好了——我一直怀抱如此恶念。直到有一次我上了电梯，电梯门即将关闭时，有几个迟到的同事飞奔过来，我二话不说，直接按开门键——叮呤呤，居然响起了铃声，有个声音问：什么事?我定睛一看，原来本以为是开门键的地方，是个报警的按键!原来如此! 上图右下方我写了一个HISTORY, 历史。这是开个玩笑。假设某人暗恋已久的人向TA飞奔过来，希望电梯等一下，结果由于此不良设计，让这个暗恋的人心存纠结，错过美好姻缘。本来两个人结合有可能生出一个能够改变历史的天才，结果错失了。 去年11月底我再去创业大厦，发现此电梯的故事还在继续——毕竟更换电梯成本太高了!而且在报警的按钮下方，被保安贴了一张醒目的即时贴，上面 写着几个大字：这是报警用的!哈哈，看来保安也不堪忍受“假报警”。但是没用，贴着这个提示并不能有效阻止错误发生——用户首先是凭借习惯，其次才是认知 和学习。 **　　原因正是不良交互设计。** 互联网的一些事

　　上图是今年去千岛湖outting拍的酒店里的门以及开关。酒店的门打开貌似是在教我们做肢体协调操，需要两个手同时按指示操作才能打开。试问 门的安全性在于防止外面的人破门而入，不是为了防止屋内的人出门。不晓得这个过度设计有何作用。总之，妈妈不再敢把小孩子留在房间自己不带房卡出门。因为 一个8岁以下的孩子，基本上不会开此门。 互联网的一些事 右下角是大部份酒店都有的变态的灯。你不知道什么状态是开，什么状态是关。当然，由于酒店系统，某处灯光是由多个按键控制，无法用统一的交互解决。但是这是系统的问题，不是用户的问题。 网页上的无教养的表现更多了…… 某日我看到一封邮件。我大概一瞄，我就看到几个关键词：免费，即可获得，10元，立即领取。 (我和大部分用户一样，不会逐字去阅读什么什么介绍，基本上都是在抓关键词，要提高效率，请精简网页文案，强调文案重点)。 yixieshi

　　但是，当我点击立即领取之后，直接给我一个添堵的页面：我没有资格。(文案的重要性!) 互联网的一些事 我不知道是不是不登陆造成的，当时的设计应该考虑各种风险给出周全的解决方案。 从数据上去看，也许会看到活动的转化率很低很低，也许活动方会认为是投放人群不对，页面不够吸引人，或者10元的力度不够等等。但是只要认真去找问题，也许会发现不良交互产生了严重影响。

　　当然，我还搞不明白，像UIGARDEN这种盈利模式单一急需用户注册的网站为何会在注册页面和用户过不去。 你链接不上GMAIL的服务器是你的不对，别说用户的EMAIL是无效的好不?

　　再看麦考林糟糕的经历，我不知道具体的数据如何，但是麦考林肯定有大量非商品质量问题，也非服务问题造成的退货。 也是由于糟糕的交互设计引起的。 yixieshi

　　我填写了收货地址后，上图是让我指定送货方式。麦考林给出了两个方式可选，我毫不犹豫选择了邮局方式——因为EMS太贵了嘛。谁知道这邮局还真 的是邮局——5天后，我收到前台给我签收的一个包裹单，让我去邮局凭借身份证领取包裹。要知道，快递送货上门时代，我怎么可能去邮局领包裹?打电话给麦 网，客服小姐说，因为我的收货地址不支持快递，所以只能让我选邮局。 我这才知道是怎么回事。原来麦网为了解决用户选的配送方式不可用的问题(淘宝也经常存在这个问题)，故作聪明使用了邮编去匹配配送方式的方法。我填写的邮编他们系统解读不支持快递，因此下个页面就不给我这个选项。 邮编在今天已经是用户认为很不重要的字段，他们会不确认就随便写。另外，麦网要避免这个问题，也可以让顾客明白有哪些配送方式不可用且告诉原因而不是简单隐藏了事。 **　　所以，我们需要交互设计去做什么呢?** **　　1. 发现并解决这些问题** 上面的那些交互的问题，有些人根本发现不了。有些人发现了并不知道如何解决嗯。 交互设计师需要发现并有一套方法去解决。 **　　2. 平衡——引入用户视角和方法。**还是那个老图： 互联网的一些事

3. 控制成本，降低风险

　　交互的系统方法，让交互的输出物快速迭代呈现，并且低成本。不需要开发，不需要视觉，就能够将抽象的想法具像呈现原型，方便的且低成本的工作方法，方便项目组进行多种可能性的探索。 互联网的一些事 在一轮轮的评审和讨论中让决策人和参与方根据项目的阶段逐步聚焦。最终输出一个最终版的原型。 互联网的一些事 **　　4. 术业有专攻** yixieshi 当然，产品经理和视觉设计师若有可能多做一些，也可以不需要交互设计师。事实上，大多数创业型的公司，确实是没有交互设计师的。但这不意味着交 互设计缺失，有可能是产品经理或者视觉承担了此阶段的工作。但是，产品经理在平衡商业和用户的点上，往往会更多站在老板或者KPI的角度，而视觉设计师感 性大于理性，更加纠结于各种视觉细节，会不自觉在项目前期就引入太多视觉元素，让项目组在讨论中偏离核心方向。 总归来说，他们的专攻方向是不一样的。

三. 什么是交互设计

　　我个人认为交互设计师的工作围绕以上四件事情展开。入门的人，很容易将重点落到第二点：快速迭代呈现上，所以他们会直接问：你们都用什么工具?能给我们培训一下工具吗? 其实工具真的不是重点，想法若有，发现白纸和笔都是最好的工具。所以进阶的交互设计师后来会明白这一点，他们会回归到需求本源：这是什么?为什么要做?我们要解决的是什么问题?非要如此解决吗? 举个例子，若有需求方说：帮我设计一个花瓶。小A设计师就直接去做花瓶去了。小B多问了几句：多大的花瓶?什么材质的?什么时候要?预算是多 少?小C则问：你要花瓶做什么的?是放鲜花还是做室内装饰用的?小A肯定做出了花瓶，但是未必是顾客想要的。小B也做了花瓶，顾客也买单了，已经合格了。 但是小C则有可能让顾客惊喜。顾客表面要的是花瓶，但是实际上是在寻求一种解决方案。他要解决的问题有可能是风水问题，有可能是美化家庭，有可能是装一束 鲜花……若不了解这个背后，你也许只能给他一个花瓶，而不是其他的更加适合他但是他描述不出来的，甚至没意识到的。 在实践中，我曾遇到一个需求，在一个新的频道即将发布前，需要做一个预热页面。这个预热页面比正式的页面提前几天发布。运营同事说需要提前让目标顾客知道一个新的频道要上线了，那么原来的设想就是在这个页面上介绍一下新的频道，以及新频道上线后的精彩活动。 yixieshi 追问：你的目标是让这些人知道有这件事情，还是让他们知道有这件事情并且在频道发布后回访呢?需求是后者。那么一个简单的介绍页面只能达到前者 的目标。这群人知道这件事情，但是一周后就会淡忘这件事情，这群人绝大多数不会成为正式频道发布后造访的那拨人，那为何还提前预热?要达成后者的目标，我 们则需要放钩子，比如在预热期间让用户抢积分，免费送积分，折扣券等，并且限定了积分或者折扣券只在正式发布那天有效等。 yixieshi 数据可以看出一些需求，但是数据是个有意思的武器。武器可以让用户的行为显像化直观化，但是你依然不了解这些数据的背后有什么样的顾客行为。比 如，数据显示某购物网站主流用户也许是集中在25岁到29岁。这是个事实。那么我们的产品有可能会认为就是要满足这类顾客的需求。但是有可能是我们在设计 上太偏重这个阶段的用户群，让其他用户更难去用我们的产品。 另外，交互要始终平衡的除了商业与用户、技术，就是ROI， 也即投入产出比。 解决一个问题，满足一个需求，有多种方法。有的属于过度设计。有的属于隔靴搔痒——需要多搔很长时间才能解决问题。所以交互需要有四两拨千金的意识，在探索阶段，不放过一个灵感，多做一些探索去求寻最佳解决方案。在后期则当快刀斩乱麻，当断则断。 互联网的一些事 **　　交互设计师的工作——**

　　在整个项目流程中，交互则在四个阶段有不同程度的参与，并且这几个阶段并不是严格的串行，而是并行中迭代的。

1. 需求阶段 参与讨论，了解并挖掘需求。进行用户需求分析(也会与BI部门以及用研配合，走访用户，做用户调研等)，任务分析，提供网站架构图(site map), 网页流程图(page flow)等，协助产品经理细化需求，从BRD(商业需求文档)到PRD(产品需求文档). yixieshi

2. 原型阶段 同步PRD进程，输出各阶段所需的产品原型，也即线框图(Wireframe). 探索满足需求的各种解决方案(包括任务流以及单页面交互)，并组织评审和讨论会，在评审和讨论后，输出一个确认版的线框图以及交互说明文档。 此阶段若有必要，也会配合用研进行可用性测试，以便提前发现问题。

3. 视觉-前端以及开发阶段 演变成为UED内部项目经理，对UED整体时间进度负责，讲解需求，答疑，验收视觉以及前端、开发成果。根据他们的反馈，改进交互设计，并与产品经理协调。

4. 优化阶段 观测核心数据变化，进行可用性测试和用户调研，以便优化下个版本。

　　先到这里，下一篇分享下交互常用的工具和方法。继续关注哦～

原文链接：http://www.yixieshi.com/ucd/9503.html

常用转移字符：（其中 换页符、制表符也不太常用）

转义序列        转义结果

\b           空格符
\f            换页符
\n            换行符
\r            回车符
\t            制表符(Tab)
\“           双引号
\‘            单引号
\\            反斜线符号(\)

附上部分例子： 一、空格符。\b

　　var str:String=”12345\b67890″

　　会输出：12345 67890

二、换页符。\f

　　var str:String=”12345\f67890″

　　输出：12345 67890

三、换行符。\n

　　var str:String=”12345\n67890″;
　 输出12345
　　　 67890

四、回车符。\r

　　var str:String=”12345\r67890″

　　输出：12345（此处和换行符效果类似）
       67890

五、制表符。\t

　　var str:String=”12345\t67890″

　　输出：12345 　　67890（间隔变大）

八、双引号。\” 九、单引号。\’ 十、单个反斜杠字符。\\

众所周知，位图放大会失真，AS3中的Scale9Grid属性会降低这种不好的影响。对于元件中的矢量图运用九宫格功能非常简单，只需要在元件属性中勾选该选项即可，而对于外部加载的位图来说，应用九宫格来降低放大失真的马赛克影响，就比较麻烦了，笔者也是在网上找的工具类，并进行了加工，来解决这个问题，特与大家共享。以下图片分别是对同一张图片在是否运用九宫格的情况下放大两倍的效果，直接上图，效果对比： 用法： [codesyntax lang=”actionscript3”]

package
{
import flash.display.Bitmap;
import flash.display.DisplayObject;
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.display.Sprite;
import flash.events.Event;
import flash.geom.Rectangle;
import flash.net.URLRequest;

public class Scale9 extends Sprite
{
public function Scale9()
{
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,comHandler);
loader.load(new URLRequest(“img/scale9.png”));
}
private function comHandler(e:Event):void{
var bitmap:Bitmap = LoaderInfo(e.currentTarget).content as Bitmap;
var dobj:DisplayObject = addChild(new Scale9GridDisplayObject(bitmap,new Rectangle(30,10,60,20)));
dobj.x = 100;
dobj.y = 20;
dobj.width *=2;
dobj.height *=2;

var oldBmp:Bitmap = new Bitmap(bitmap.bitmapData.clone());
dobj = addChild(oldBmp);
dobj.x = 100;
dobj.y = 170;
dobj.width *=2;
dobj.height *=2;
}
}
}

[/codesyntax] 工具类 [codesyntax lang=”actionscript3”]

package
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.DisplayObject;
import flash.display.PixelSnapping;
import flash.display.Sprite;
import flash.geom.Point;
import flash.geom.Rectangle;

public class Scale9GridDisplayObject extends Sprite
{
private var _sourceData:BitmapData;
private var rect:Rectangle;

private var grid00:DisplayObject;
private var grid10:DisplayObject;
private var grid20:DisplayObject;
private var grid01:DisplayObject;
private var grid11:DisplayObject;
private var grid21:DisplayObject;
private var grid02:DisplayObject;
private var grid12:DisplayObject;
private var grid22:DisplayObject;

private var _width:Number;
private var _height:Number;

private var _minWidth:Number;
private var _minHeight:Number;

public function Scale9GridDisplayObject(source:Object,rectangle:Rectangle = null)
{
if(source is BitmapData){
this._sourceData = BitmapData(source);
}else{
this._sourceData = new BitmapData(source.width+0.99999,source.height+0.99999,true,0);
this._sourceData.draw(visualize(source));
}

if(rectangle != null){
this.rect = rectangle;
}else if(null != source.scale9Grid){
this.rect = source.scale9Grid;
}else{
this.rect = new Rectangle(0,0,_sourceData.width,_sourceData.height);
}

this._width = _sourceData.width;
this._height = _sourceData.height;

grid00 = getBitmap(0,0,rect.left,rect.top);
grid01 = getBitmap(rect.left,0,rect.width,rect.top);
grid02 = getBitmap(rect.right,0,this._width - rect.right,rect.top);

grid10 = getBitmap(0,rect.top,rect.left,rect.height);
grid11 = getBitmap(rect.left,rect.top,rect.width,rect.height);
grid12 = getBitmap(rect.right,rect.top,this._width - rect.right,rect.height);

grid20 = getBitmap(0,rect.bottom,rect.left,this._height - rect.bottom);
grid21 = getBitmap(rect.left,rect.bottom,rect.width,this._height - rect.bottom);
grid22 = getBitmap(rect.right,rect.bottom,this._width - rect.right,this._height - rect.bottom);

this._minWidth = grid00.width+grid02.width;
this._minHeight = grid00.height + grid20.height;
}

public function getBitmap(x:Number,y:Number,width:Number,height:Number):DisplayObject{
if(width<=0height<=0){
return null
}
var bitmapData:BitmapData = new BitmapData(width,height,true,1);
bitmapData.copyPixels(this._sourceData,new Rectangle(x,y,width,height),new Point(0,0));
var bitmap:Bitmap = new Bitmap(bitmapData,PixelSnapping.NEVER);
bitmap.x = x;
bitmap.y = y;
this.addChild(bitmap);
return bitmap;
}

override public function set width(newWidth:Number):void{
if(newWidth>= this._minWidth){
update(newWidth - this._width,0);
this._width = newWidth;
}
}

override public function set height(newHeight:Number):void{
if(newHeight>= this._minHeight){
update(0,newHeight - this._height);
this._height = newHeight;
}
}

public function update(diffW:Number,diffH:Number):void{
if(diffW != 0){
diff(grid01,”width”,diffW);
diff(grid11,”width”,diffW);
diff(grid21,”width”,diffW);
diff(grid02,”x”,diffW);
diff(grid12,”x”,diffW);
diff(grid22,”x”,diffW);
}
if(diffH != 0){
diff(grid10,”height”,diffH);
diff(grid11,”height”,diffH);
diff(grid12,”height”,diffH);
diff(grid20,”y”,diffH);
diff(grid21,”y”,diffH);
diff(grid22,”y”,diffH);
}
}

public function diff(obj:DisplayObject,property:String,diffNum:Number):void{
obj[property] += diffNum;
}

public function visualize(src:Object):DisplayObject{
if(src== null) return null;
var target:DisplayObject;
if(src is DisplayObject) target = DisplayObject(src);
return target;
}
}
}

[/codesyntax]

在android平台上开发音乐播放器是一个全新的挑战。这次通过android QQ music项目实战，总结出一些方法和经验，希望能够对移动平台的设计尤其是多媒体这块提供一些有价值的参考和帮助。 一、**引入产品定义描述（**Application  Definition  Statement**）** 相信大多数设计师都有过这样的经历：在产品设计过程中，设计师和产品经理不断pk，各抒己见，甚至闹得脸红耳赤、拍桌翻脸，最后项目总结时又因达不 到“理想目标“双方深深自责，纷纷表示”缺少交流“。彼此不断pk，交流绝对足够，只是我们缺少有效沟通的工具。如果能在早期建立共识，口水仗爆发的频率 就会越少，真正花在产品上的时间也就越多。这一次，我们决定更早地切入，在最开始的产品规划层面，引入“产品定义描述”（关于ap-plication definition statement，请参考《iPhone Human Interface Guidelines》）。

注意： ADS的定义也是一个迭代的过程，外部环境的变化、后续过程产生的问题，都可能对原ADS产生影响，需要重新评估、修正，甚至否定再来，但无论如何，必须确保整个团队对ADS有一个共同的认识。 二、**细分场景，从场景推导需求，从需求推导设计** 从源头的战略层面上建立了统一的认知，我们接下来开展的工作就有根据了。既然核心是解决“移动场景听歌“的问题，我们必须首先弄清楚什么是”移动场 景“？移动环境和PC环境差异甚大，碎片时间的使用更为突出。用户一天是怎么活动的呢？每次拿起手机听音乐都是什么时间？上班的公车上、走路、晚上睡觉 前？在这些点上用户都会做些什么？简单的脑暴可以罗列各个可能的使用场景，但还比较粗糙。场景的构想需要建立在高度的认知上，这时候用研的切入显得相当关 键，用户特征、喜好、使用习惯…对用户越了解，场景就越能贴近真实、越能发现更多的细节。这些都为后续的设计决策提供了有力的依据。 客观构建的场景有很多有意思的发现,比如用户在播放本地歌曲时，挑选第一首歌往往比较犹豫，但对后续播放的歌曲却不太在意。从场景仔细分析和推敲， 很容易就可以明确产品的需求，对应上述的发现，推导如下需求：为用户提供“马上听歌”按钮引导用户直接听歌。需求的推导因为有用研的切入，避免了太多的个 人情感因素。 三、**敏捷原型设计，适应与借鉴并行** 用研的输出以及前面的ADS定义为功能筛选和设计取舍提供了强有力的决策依据。在需求框架大致决定的时候，我们接下来就进行方案设计了。正所谓“一图胜千言”，原型有时候会比面面俱到的文档更直观。不同的阶段，我们会进行不同精度的原型设计：

在原型迭代的过程中，需要注意android平台的UI尴尬。与其他平台（iPhone、symbian、windows mobile）不同，an-droid更加开放，不同的厂商不同的ROM版本界面规范并不统一。如果简单地将其他平台的设计规范移植过来，产品体验可能会 和整个系统“格格不入”。借鉴了android平台的一些优秀app（比如twitter和new york times）的设计策略，我们决定“适应与借鉴并行“：在大的基础体验上，保证与系统体验一致，尊重平台使用习惯；在细节体验上，尽量克服系统的操作困 难，保证局部体验的流畅。 四、视觉方案 在整个设计过程中，我们尝试了多套风格方案，比如“梦幻光影”、“清爽夏日”、“木质桌面”“蓝色海洋”等等， 由于beta1开发时间有限，最后选择了偏深绿色主色调的“梦幻光影”作为默认皮肤，这里奉上其他未曾谋面的方案，供参考。   4.1 主要界面模块划分 视觉方案的第一步是对界面各模块和控件进行作出符合审美原理和需要的的合理划分和尺寸设定，这里重点会落在正在播放界面和歌曲列表界面两块，虽然两 个界面功能和承载的信息都不相同，但是在造作上两个界面跳转和切换是紧密关联的，在各模块划分和空间比例上两个需要统筹安排，一方面考虑上下同样尺寸的 “标题行”和底部“控制行 / tab行”一方面要考虑歌曲列表界面的列表选择合适的行高和行数。在保证每一行歌曲信息能够有足够的空间显示的同时，还得保证一屏里面的歌曲行数是整数 行。

从上图区域划分和比例可以看出，播放器界面，封面/歌手图片的中心点在整个界面的高度是296，相对于整个界面的高480，这一比例基本是处在0.618：1的黄金分隔点上。 4.2 正在播放界面

用户使用音乐播放器，最大的关注点一般会落在正在播放/播放器界面上，这块在视觉上是整个产品的核心区域，在很大程度上代表了整款软件的品质、品位 和风格信息表达。而专辑封面/歌手头像又是正在播放界面的视觉中心，因此这块在设计上花了比较重的笔墨，用细腻的光照效果与晶莹剔透的质感精心营造了一种 符合我们QQ音乐在手机移动操作平台上的气质的效果。 4.3 系统菜单icon

菜单选项icon是另外一个视觉信息传达比较重要的地方，对整体风格的形成起着重要作用，这里做了两种效果的尝试，一种A方案：是空心边框形式，看起来弹出菜单很轻盈，一屏6个选项带文字不会觉得拥挤，缺点是单个图标的轮廓有的地方不连贯，有可能会造成辨识度降低。另外最后选用的方案B是 实心剪影的形式，这种表现方式整个icon看起来很整体，比较饱满，识别度较高，不过如果一屏图标过多的话可能会稍有拥挤的感觉，但如果以缩小的方式处 理，对于手指触摸操作来说是不合理的，这里icon作了圆角处理和镂空实心均衡化处理，能在视觉感受上弱化一下可能会产生的拥挤感。   4.4 出现“水波纹”的问题

色彩显示效果上Android系统的手机由于硬件和技术上的限制和问题，会在某些情况下产生令人抓狂的水波纹问题，在尝试的过程中大致总结了容易造 成水波纹的渐变使用，如上图左边两个图块：如果使用规则的径向渐变，程序贴图后极容易出现水波纹，另一种情况是如右边的两图块：渐变色差值过小，就是说渐 变特别的细腻不显著的话也很容易在切图程序贴图后出现明显的水波纹。所以后面在配色和设计过程中可以据此避免尽量这样的情况出现。 4.5 最终选用方案:

五、**后记** 这是我们第一次在android平台上的尝试，为了解决以前传统设计流程带来的问题，我们在项目开始之初就引入了 ADS，在移动场景分析中又得到了用研同学的大力支持，从抽象到具体，从概念到实现，一步一步的开展变得有依有据，对产品，对设计，都是获益良多。 本项目涉及到两地三方的合作，沟通成本比较大，严重感谢团队的每一位成员，感谢大家全心全意的付出。 临尾还是希望来句厚颜无耻的大声吆喝：也许，它不是最华丽的播放器，但一定最懂你:在路上，在等候的车站，在前往神秘的美好旅途中…QQ音乐，音乐你的移动生活。   本文是转载的，看过之后，感觉很不错，特地转载之！ 原文链接：http://cdc.tencent.com/?p=3234