最近几个月一直在专注Windows phone产品设计和项目开发.在其中团队磨合和产品定位上也出现不少问题.一直难以抽出成块的时间来思考梳理.至此博客更新也从此中断.这两天因病在家休息.上周在微博[Fllow me]上提到自己翻译一些Wiki文档.目前尚未整理完毕.从本篇博客开始将把这些资源逐步迁移到Cnblogs上[在线Wiki资源因服务器不稳定不公开].主要涉及到Windows phone 应用开发技术和Metro设计细节. 以及在开发中碰到一些问题和相对应的解决方案. 这些资源都是我们设计和开发团队在实际项目操作中对Windows phone 这个新的技术平台理解和逐步积累的过程.可能有些地方给出答案并不是最准确 最好的.也走了不少弯路. 但是对于这个探索的过程有必要分享出来.

目前APPBub对国内已经开放.开发者可以通过招行Visa信用卡购买开发者账号,提交Windows phone 应用.上个月TechEd2011 和最近11月份关于Windows phone培训和线下活动比较多[会在微博动态更新].11月份MS官方推出Windows phone开发训练营活动[免费].包含国内大部分地区 也欢迎各位开发者报名参加. 届时线下交流":

微软Windows phone 开发训练营: [免费] 在线报名活动地址: http://msdn.microsoft.com/zh-cn/windowsphone/hh532262  11月11日北京.

ok.作为开篇章节.第一篇将在如下介绍一些Windows phone比较有意思的东西-Text To Speech[文本到语音转换].  相信大家最近一定对IPhone 4S 的Siri影响深刻.其实作为智能Smart Phone一个终极标准之一就是实现人类语言和机器语言的无障碍. 也就是第三次GUI革命-人机智能领域.这个我会稍后几篇提到Siri实现原理和Windows phone 在语音Tellme实现和发展情况.

相信作为手机用户你一定有这样的需求.当你打开手机屏幕看新闻或是其他文字信息时. 有没有想过我们能以语音的方式读取文字信息,而把我们眼睛从屏幕中解放出来.特别是针对盲人这样需求就更明显了.Text To Speech已经在IPhone和Android上已经成型的运用.Windows phone上如何来实现?

首先来看看在语音识别领域IPhone的苹果公司采用是语音识别巨头Nuance技术.具体实现作为商业机密.而微软Tellme和Google都是采用自己开发的技术.在QQ2011版本我上周偶然发现QQ在输入法加入语音识别输入的方式.但是效果不太好.

Windows phone中实现的方式大概有三到四种方式.本篇将采用最简单一种使用Bing在云端的服务方式来解决这个问题[因最近一直在看Windows Azure云平台].其他更多关于这方面实现将在后续几篇涉及到.

首先我们设计UI. 俗话说“工欲善其事必先利其器”那么Windows phone 在UI设计采用什么样设计工具. 这里不得不得不提到.Balsamiq Mockups-是Balsamiq工作室出品的一款手绘风格的产品原型设计工具。它适合于产品经理、产品设计师、用户体验设计师、交互设计师、网站前端设计师等等.

和常用的Visio、Axure RP等软件相比最大的特点就是涂鸦风格，并且使用起来非常简单，完全不需要了解太多技术就可以做出一个可审阅的原型图，非常适合快速设计简单的原型.

Balsamiq Mockups： Download Link：Balsamiq Mockupas Free Try Version  Design GuideLine Support Document：Balsamiq Mockupas Design GuideLine Blogs Design Handler Book: Balsamiq Mockupas Design Hanlder Book Document

设计原型工具[受众人群-UI设计团队]:

相对Balsamiq 收费软件.默认设计面向IPhone内置模板. 那么基于Windows 平台免费UI设计工具-Pencil 则也是手绘设计风格.同样可以用来对Windows phone做原型UI设计 同时支持在Firefox 插件方便使用 开源免费.:

Pencil Project: Download Link:Pencil UI Design Download Link Design User GuideLine:Pencil Design User GuideLine

设计工具界面:

 

 

可能在设计团队沟通时.Product Ower和开发Team 需要对产品进行多次讨论时. 这时一个统一流程设计工具就很重要.这样避免在讨论时出现不同设计工具图形元素照成不同理解而耽误时间.另外保存可以在任何时候都可以通过同一工具实现修改目的. 这点很重要. 使用这个工具受众一般是产品经理和开发团队居多-Gliffy:

Gliffy: Gliffy Draw Software Online Tool

Gliffy 是一款免费的在线流程设计工具.基本包含软件开发中UML 和开发流程 UI所有设计模型.支持在线存储. 方便多个团队沟通和交互工具初始化界面:

 

这个APP称为Text To Speech. 在确定UI设计之前.设计团队一定确认功能需求和必要UI流程 .原型设计目的产品设计成形之前的一个简单框架. 把这个功能需求拆解如下:

功能需求: [1]：把文本转换成语音输入 [2]: 指出多语言版本:英文和中文语音输出 [3]: 实现对用户文本可选记录存储和删除 [4]：……

 注意在UI设计过程.功能需求优先级最高.是产品原型设计最基本的要点. 这也是区别于效果图版本中最重要因素. 一般情况产品设计原型设计只有一个.也就是陈述这个产品价值和目的标准时统一的.可能在后期最终APP市场-用户群体定位和美化等其他因素考虑情况下.效果图往往会出现2-4版本或是多个版本都正常的.

那么windows phone 整个APP设计和开发Team如何来分工? . 

Windows phone 在基于Silverlight平台构建.MS官方SDK给出Express Bland 设计工具.有人曾多次问过我.UI效果图实现是否也应该交给开放团队来做?

当然这个问题也看具体团队安排和分工. 当然为了编程效率上考虑. 同时开发Team不可能每个人都能精通XAML标示语言. 这就需要一个BI角色实现设计团队效果图来和开发团队进行对接.BI 角色核心工作就是把设计团队效果图通过Express Bland 设计工具变成实际XAML code.然后交付给开发Team. 如果与设计效果图出现出入.开发Team只需要BI这个单独角色抽出来来设计Team进行交涉.避免分工导致整个开发团队进度停滞. 这种方式主要目的就是保证Code高效. 使我们在每次MileStroe里程碑都能持续交付成果.

当然这里谈到效果图:主要做到如下四点：

•UI操作流程和用户行为分析. •确定页面UI元素.-[BI参与] •美化效果和完善用户体验. •设计团队效果图-作为开发TeamExpress Bland 最终参考

所以BI这个角色不仅持续向开发团队交付良好UI界面.同时也完全屏蔽整个设计团队对开发过程的影响. 效果图是作为APP产品最终UI设计参考.设计团队可能对Windows phone控件元素不熟悉.这就需要BI配合.保证效果图和实际开发不存在脱节. 效果图也是最终定义这个APP设计意图.所以一但制定就是作为开发Team唯一参考. BI就很好的起到这个上下承接的作用.事实证明这种方式确实高效解决不少开发团队与设计Team沟通问题.

 

 

原型图采用Balsamip设计采用枢轴控件方式 效果如下:

 效果图 由UI设计团队完成 此处就略去[略]

 Now 我们现在通过BI已经拿到效果图.和已经实现的UI.剩下工作则由开发团队接手.如何实现这个Text To Speech. ok. 打开Visual Studio2010建立一个Pivot Windows phone Application. 在解决方案中出现一个Solution. 是否应该立即考虑Code实现. no. 我们在真正Code前需要好好规划我们的Solution.

在CodePlex上看到很多Windows phone OpenSource Project开源项目.发现在View种大多都使用MVVM Light框架. 而对UserControl却很少见到.这种现象曾让我这个Silverlight开发者感到困惑奇怪.不知有没有人做过把Silverlight版本Application向windows Phone移植的工作.那个时候你才后悔当初为何没有使用UserControl来对通用View进行封装.而是采用PhoneApplicationPage替代.如果你想自己写过WP7 View具有在未来项目中可移植 甚至在其他项目不断复用 扩展,. UserControl是一个很好选择.

另外一个就是不得不说的Windows phone Library类库.在开发Windows phone应用客户端时.总是会涉及到一些基本数据操作 Json/XML、IsolateStorageFile序列化/反序列化. Task基本调用. 数据列表缓存系统建立等等这些不断可重用的操作.必要模块化封装.是必不可少是.这将为我们项目开发节省大量时间. 这些封装类库DLL在不同项目移植就成不断可以重用的代码库.维护这些可重用代码库则将是一笔无形资产. 类库封装则分为System Level 系统级和Customer Level自定义. 关于这些类库封装在后面文章会详细说明封装技巧.

当然还有其他的注意是否做UnitTest. 以及自动化测试等.都在考虑行列……如上只是略做举例说明.项目规划必要性,.

作为本次则无需类库封装.Pivot APPlication则足以. 在使用Bing在云端服务器 来做Text To Speech 我们需要先申请一个ApplicationId. 然后通过该ApplicationId调用Ms云端的Translate翻译服务并保存可播放的语音文件wav在客户端播放.实现Text文本转换成语音效果.

打开Bing Developer Bing API： http://www.bing.com/toolbox/bingdeveloper/

找到Sign in-bing Search API 创建一个Application:

 创建成功后可以看到该Application的ApplicationId:

 有了ApplicationID.向Application程序添加云端的Translate服务引用:

Add Microsoft Translator Service: http://api.microsofttranslator.com/V2/Soap.svc

添加服务引用:

 引用成功后:

 在页面加载中首先获得支持语言类型.通过Translate Service服务中获取Client:

1. private void MainPage_Loaded(object sender, RoutedEventArgs e)    
2. {    
3.     var transalteServiceRef = new TranslatorService.LanguageServiceClient();    
4.     transalteServiceRef.GetLanguagesForSpeakCompleted += new EventHandler    
5.     <TranslatorService.GetLanguagesForSpeakCompletedEventArgs>(transalteServiceRef_GetLanguagesForSpeakCompleted);    
6.     transalteServiceRef.GetLanguagesForSpeakAsync(applictionid,transalteServiceRef);    
7. }    
8.     
9. void transalteServiceRef_GetLanguagesForSpeakCompleted(object sender,                                                                TranslatorService.GetLanguagesForSpeakCompletedEventArgs e)   
10.  {   
11.       //Get Service Client   
12.       var transalateClient = e.UserState as TranslatorService.LanguageServiceClient;   
13.       transalateClient.GetLanguageNamesCompleted += new EventHandler   
14.       <TranslatorService.GetLanguageNamesCompletedEventArgs>(transalateClient_GetLanguageNamesCompleted);   
15.       transalateClient.GetLanguageNamesAsync(applictionid, "en", e.Result, e.Result);   
16.  } 

获取支持语言列表:

1. Deployment.Current.Dispatcher.BeginInvoke(() =>     
2.  {    
3.      var CodeCols = e.UserState as ObservableCollection<string>;    
4.      if (CodeCols != null)    
5.      {    
6.          var languageNames = e.Result;    
7.          var languagesData = (from code in CodeCols    
8.                               let cindex = CodeCols.IndexOf(code)    
9.                               from name in languageNames   
10.                                   let nindex = languageNames.IndexOf(name)   
11.                               where cindex == nindex   
12.                               select new TranslatorLanguage()   
13.                                         {   
14.                                   Name = name,   
15.                                   Code = code   
16.                               }).ToArray();   
17.  
18.          //Update UI Element   
19.          this.LanguageList_LB.ItemsSource = languagesData;   
20.             } 

当用户输入文本内容后.点击Speech按钮把这段文本以语音方式播放出来，在点击事件内. 通过请求云端服务获取播放WAV文件Stream:数据. 并在客户端播放出来: 

1. private void SpeechTxt_BT_Click(object sender, RoutedEventArgs e)    
2.  {    
3.      var languageCode = "en";    
4.      var language = this.LanguageList_LB.SelectedItem as TranslatorLanguage;    
5.      if (language != null)    
6.         {    
7.             languageCode = language.Code;    
8.          }    
9.        var objTranslator = new TranslatorService.LanguageServiceClient();   
10.         objTranslator.SpeakCompleted += translator_SpeakCompleted;   
11.         objTranslator.SpeakAsync(applictionid, this.TextToSpeech_TB.Text, languageCode, "audio/wav",string.Empty);   
12.    }   
13.  
14.   void translator_SpeakCompleted(object sender, TranslatorService.SpeakCompletedEventArgs e)   
15.    {   
16.       var client = new WebClient();   
17.       client.OpenReadCompleted += ((s, args) =>   
18.        {   
19.            SoundEffect se = SoundEffect.FromStream(args.Result);   
20.             se.Play();   
21.        });   
22.       client.OpenReadAsync(new Uri(e.Result));   
23.    } 

ok.这种方式很好通过云端的服务来解决了把文本转换成语音输出.这样我们能够Azure封装导致一个瘦客户端.客户端只需要做很少的事.这需要在线连接网络.这也是初步看到云端.处理方式.

 当然这是处理文本语音最简单的方式.应该能够从这篇文章看出重点讲述Windows phone 从设计到开发完成中一些大概的细节. 以及主要流程.采用云端服务的方式来处理客户端.编程方式. 稍后几篇会介绍Windows phone Metro设计.编程技巧.

 源代码下载见附件。

本文转自chenkaiunion 51CTO博客，原文链接:http://blog.51cto.com/chenkai/763474