Windows Phone 31 Weeks 教程
@arturot 一直在更新一套windows phone设计有关的教程，非常不错。需要注意的是在最新一章中选用的案例是来自我们团队开发的Kulercream App。
原文链接：
31 Weeks of Windows Phone Metro Design | 15 Designing Windows Phone Icons
Experience10 Creative, Develop, UX, Wireframe, Productivity
#WP7
你不知道的metro design细节 – Grid
metro设计风格所定义的页面由网络系统(Grid)组成，其中所定义的每个单元的大小是20x20px。而每一个单位格中又以5x5px为单位定义更小单位的子单元。在一个标准的1366×768屏幕上，单元格数量为68.25×38.5
内容区域的上边距为7个单元格
页面顶部的高度为5个单元格
页面的左边距为6个单元格
紧凑的列表项目中的二个元素的间距为一个单元格
适中型列表中的元素间距每隔一个元素，对齐到下一单元格 (1.5个单元格)
宽松型列表中的元素，间距为每二个单元格
设计Metro应用
当计划一个Metro应用的时候，尽可能的去思考你的应用给你的用户带来什么样的体验，而不是考虑这个应用会有什么样的功能。如果你还没准备了，你可以先阅读What are Metro style apps?
1. 定义你的用户体验目标
假设你正在创建一个照片相关应用。你会思考你的用户使用该应用的原因，如保存和分享，以及你会设想你的用户希望通过照片来回忆及与朋友交流，以及保证照片的安全性。这些正是你的应用的独到之处，你将这些想法作为你的用户体验的核心目标贯穿在整个设计过程中。
常用的技巧包括：脑力风暴、关系流程图及脑图。
你的应用到底是做什么的？从一个最广泛的问题开始，列出所有你设想的你希望用户使用你应用的原因。例如，你想创建一个帮助人们设计旅程行程的应用，当你设想这样一个应用的时候，你也许会产生下面这些想法：
- 应用将帮助你获得将所有你的航班到达的城市的地图来帮助你旅行。
- 找到你要去的城市中的有趣的活动。
- 帮助你创建一个可分享的参加活动的列表，或是一定要参观的景点列表。
- 帮助你整理照片并与朋友和家庭分享。
- 根据航班价格获得推荐的目的地列表。
- 找到你的目的地的餐馆、商店和活动以及折扣信息。
你的应用程序好在哪里？再回去看看你的想法，看看这 些场景真的能让你的应用程序出色吗？挑战一下自己尝试去除一些场景，专注在唯一的一个真正重要的场景上。在整个过程中你可能会获得无数个想法，但一定要学会对这些想法说“NO”，才能帮助你获得最好的想法。
你会专注在单一的使用场景，来向人们介绍你的应用到底是什么样的，例如：
- 我的旅行应用最棒的卖点是能让我的朋友与我一起协同创建团队出游计划。
- 我的健身应用最棒之处是能让我和朋友们记录我们的健身进度，目标以及分享。
- 我的购物应用最棒之处帮助我的家庭组织超市购物活动，不会让大家重复购买或漏掉重要的物品。
这便是所谓的“最棒”之处，来帮助你对你整个应用程序的设计和开发做出有用的决策。专注在用户的使用场景，小心别陷入了过份多的功能的设计。应当永远去考虑，你的用户在做什么，而不是你的应用在做什么。
2. 决定应用与用户的交互方式与流程
流程指的是你的用户在使用你的应用达成目标的一组交互场景。每一个流程应当充分展现所谓的“最棒”之处。最好的应用程序应当是让用户简单学习并以最少的步骤完成目标。
技术：
- 关键流程图：从哪里进入，哪里退出？
- 故事板流程图：用户在你的UI上如何操作及完成交互的？
- 原型：使用快速原型进行试用测试。
用户能做什么？例如，你的旅行应用是关于“帮助我和我和朋友协同创建团队出游计划”。让我们列出会有什么样的情况发生：
- 创建行程的基本信息。
- 邀请朋友加入行程。
- 加入朋友的行程。
- 查看其它人推荐的行程安排。
- 将目的地及相关活动加入到行程中。
- 编辑和评估别人创建的目的地及活动。
- 分享行程给朋友，让他们follow。
3. 决定如何设计应用的界面
这是有关于如何把应用最基础的事情做好。现在你已经知道你应用的最棒之处，以及你将提供什么样的流程，接下来可以开始思考一些基础。
应当如何组织你的UI内容？大部分应用内容可以以成组或是上下层级的方式来组织内容。你所决定的应用程序第一层应当完全与你所思考的应用程序最棒之处相吻合。最棒的内容最先让用户看到。
使用旅行应用举例，有多种方式来组织行程单。如果应用的专注点是有关发现有趣的目的地，那么你也许会按兴趣点来组织你的内容。如冒险、阳光行程或浪漫旅行。但，因为应用程序是针对于与好友一起制定行程，所以更好的思路也许是根据你的社交圈来组织，如家庭、同学或同事。
当选择了使用何种方式来组织内容的时候，也就是选择了有多少个页面或是视图来展现你的应用。在Microsoft Visual Studio 11 Express中提供的一些项目模板能帮助你使用一些通用的UI设计模式来设计你的应用。
你需要什么样的UI外观和操作？评估你之前的流程，针对每个流程画出用户在每个步骤中能进行的操作。
例如这个有关“分享行程给朋友，让他们follow”的流程。我们假设用户已经创建了行程。那么分享就需要以下的一些步骤：
- 用户打开应用程序，查看到他创建的所有行程列表。
- 用户点击其中一个想分享的行程。
- 显示出行程详情。
- 用户通过UI上的点击，开始进行分享画面。
- 选择朋友的电子邮箱。
- 通过点击UI来完成分享操作。
- 应用在行程的细节中展现了她刚分享给了哪些朋友。
通过这样的过程，你已经看到了你的UI将会如何呈现（就像给朋友写一个如何使用你应用的教程一样）。你同样可以继续减少一些步骤。也许用户在分享前根本不必看到行程详细。越简单越方便使用。
查看 Choosing the right UI surfaces 去了解如何使用不同的UI样式。
如何组织操作？描述出每个流程中的步骤来找到你需要设计哪些必要的操作。然后思考这些操作命令如何体验在你的应用程序中。
- 永远尝试先使用内容。只要可能，让用户直接与内容进行操作，而不是添加各种新的按钮。例如在旅行应用中，让用户直接在行程列表中拖动单个行程来移动位置，而不是选择某个行程，再使用上下按钮进行操作。
- 如何不能使用内容，再尝试放置按钮：
- 放置在app bar上：尽可能将按钮放在app bar上。app bar一般会隐藏起来直到用户向上滑动。
- 放在应用的画面上：如何用户的操作集中在UI上的单个操作上，可以将这些操作以按钮或其它方式呈现在画面上，当然，越少越好。
- 关联菜单上：可以使用关联菜单操作剪贴板（Cut, Copy, Paste)，或一些不能直接被选择的操作（如在地图上放置记号）。
设计每个视图的界面。Windows Developer Preview支持横向、纵向、Snapped及fill view。用户应当能在任何时候使用这些视图，而你也会希望你的应用在任何一个视图下都能表现良好。这意味着你需要针对每个视图都精心设计UI元素及实现。当你做到这些后，你的应用程序在视图间的切换会非常平滑。
了解更多，查看 Supporting views, Choosing a layout, and Guidelines for snapped and fill views.
4. 决定在你的流程中如何使应用及Windows提供的功能特性
如何让应用脱颖而出？
你已经知道了如何设计符合你用户需求的应用，现在可以尝试看看在Windows平台上所提供的特有的功能，看看哪些可以被你的应用程序所使用。并确保每一个实施都符合相关的用户体验规范。
通用技术：
- 平台调研：找到哪些功能是平台能提供给你的。
- 关联流程图：从流程图中找到与这些功能连接的地方。
- 原型：确保这些功能是你所需要的。
App contracts 你的应用程序可以通过app contracts功能来进行跨应用、跨功能的用户流程操作。
- Search 让用户能够在使用操作系统的时候从你的应用中搜索相关的内容，包括从其它应用中操作。
- Share 让用户分享内容给其它人，或接受从其它处来的分享内容。
- Play To 从你的应用中播放媒体内容，或是从其它设备及家庭风格中获得内容。
- Settings 让用户使用系统标准的设置面板来进行应用程序级别的设置工作。
- File Picker and Picker extensions 让用户读取或保存文件。同时你可以提供相应的扩展，让其它应用程序能直接从你的应用中读取内容。
更多信息，访问 Windows application contracts or File Pickers.
针对不同设备的视图 Windows Developer Preview让用户能够充分使用你的应用。你也希望你的应用能够在任何设备、分辨率及设备方向上完美呈现。了解更多designing for different form factors.
触控优先 Windows Developer Preview提供了独特的触摸体验与鼠标控制能完好的结合。
例如，semantic zoom是专门针对大量内容的触摸操作进行优化的交互方式。用户可以平移或滚动来浏览内容，然后放大进入每个分类了解更多详情。你可以使用这种方式让你的信息呈现更视觉化而来替代传统的tab式导航。
当然，你可以使用更多触控的手势来完成更多的操作，如rotate, pan, swipe, cross-slide等，了解更多有关touch features.
新鲜的体验 在使用标准体验的情况下，让用户感觉到新鲜感：
- 动画 使用我们的动画样式库来保证画面的流畅。帮助用户理解画面间的视觉转换。了解更多animating your UI.
- 通知 使用通知让用户第一时间知道与特定时间有关的，或是与其个人相关的内容相关的即时消息，从而引导用户返回你的应用程序。
- content tiles 将有趣和内容放置在开始菜单的tiles上，当用户点击tiles时，直接直接到相关的内容页。
- app tiles 提供新鲜和相关的更新，让用户返回到你的应用中。在下一章节将了解更多相关内容。
个性化
- 设置 让用户能够保证应用程序有关的设置。保证用户能使用统一的设置面板来进行操作。
- 移动 让应用使用起来更方便，无论用户在使用家庭电脑或移动设备，应用都应当保持着一致的设定和状态。
- User tiles 让应用本身变得更加个性化，如使用用户自己的图像。
最大化设备能力 保证你的应用能够使用当下设备的最大性能。
- Proximity gestures Let your users connect devices with the human gesture of a ‘tap’ to light up experiences where you expect multiple users to be physically nearby (multi-player games). Learn more about proximity gestures.
- 摄像头 连接设备摄像头，让用户可以视频录音或是头像拍照。
- 加速器与传感器 当下的设备有众多新的传感器可以使用。你的应用可以来调节亮度，或是针对显示器的变化来调整UI，或是对其它物理动作做出反映了解更多sensors.
- 地理信息 使用地理信息来帮助用户获得周边及地图的信息，或是周边的朋友，活动以及目的地等信息。
- SMS
让我们再返回旅行应用的例子。为了更好的帮助应用程序达成目标，你可以充分的考虑使用某些特性，如：
- 分享： 用户可以将他们的行程通过社交网络分享。
- Snapped, filled views: 用户可以将旅行应用放在画面的一边 ，同时在另一边上网冲浪进行订酒店等操作。
- 搜索：用户可以搜索其它公开的行程信息，并引用到自己的行程中。
- 通知：当同伴的行程更新时，用户可以获得提示。
- 设置：用户可以配置自己的行程的稳私信息等。
- User tiles: 用户可以使用自己的图像来代表自己。
Explore the Developing Metro style apps and Differentiating Metro style apps sections for more ideas.
5. 建立良好的第一映象
设想一下当用户第一次打开你的应用程序时所获得的信息。回到我们所谓的“最棒之处”。即时你没有办法在第一时间就能让用户体验到最棒之处，但仍然可以尽力做到一些：
Tile & 开始画面 tile是应用程序的脸面。试想在众多应用程序的tile中，为什么用户想要运行你的应用？确定你能够品牌化你的应用。确保tile能及时刷新，让用户一次又一次的返回并使用你的应用。
开始画面 开始画面是最好的展现应用品牌的地方。
首次启动 当用户注册和登录你的服务的时候还能看到什么？尝试展现你的应用程序的特性和信息。考虑展现一些样例内容让用户能够理解你应用的意图。
首页 首页是每次用户都将来到应用的入口。内容应当简明，专注以及第一时间告之用户你的应用所能达成的意图。让这个页面专注在最棒的一件事情之上，相信用户能够继续深入探索你的内部。尝试在首页解决过于混乱的问题，而不是解决内容可发现性的问题。
6. 结合设计规范与需求来校验你的设计
在你进入实现开发之前，你应当校验你的设计或是原型以避免未来不必要的重复工作。每一个功能都有相关的用户体验规范来帮助你进行优化。另外商店中的一些需求也来帮助你更好的在Windows Store中销售你的应用。你可以使用Windows App Certification Kit来进行技术测试。
使用 Checklist for design 来帮助你专注在最重要的特性上。
什么是Metro风格的应用
Metro风格的应用是针对你的用户需求而设计的全屏幕应用程序。他针对其所运行的设备所设计，针对触摸屏幕及Windows用户界面优化。Windows帮助你与你的用户进行交互，从而使用户与你的应用产生互动。本文将帮助你了解Metro风格的应用设计以及一些基本的开发技巧。
针对你的用户所设计的应用
当用户使用Metro应用时，他应该能体验到：
沉浸式：你的Metro应用应该是全屏幕的，让用户沉浸在你所创建的体验之中。在这种全屏体验中，用户能极力享受到他所喜爱的内容。为了充分展示你的内容，我们移除了不是必须的操作系统的边框。你的应用程序就是Windows的核心体验。请充分利用屏幕的空间来设计你的应用程序，但不要让他过于杂乱。让用户专注于他需要专注的任务之中。
增进与活跃：你的Metro应用能帮助用户找到他们关注的信息。Live titles的更新帮助用户在第一时间找到有用的兴趣，并引导用户进入你的应用程序。
开始画面帮助展示你应用最好的一面。App tiles上呈载了实时的状态与更新，来鼓励用户进入你的应用。当我们设计tiles，我们应当：
- 突出你的品牌。app tile能帮助你视觉化你的品牌。应当设计得有足够吸引力以及与其它应用的差异化。
- 在app tile上尽可能的展现用户关注的信息以及更新。你会寄希望于用户经常来查看你的tile，查看最新的应用中的更新。你寄希望于这些更新能吸引你的用户点击使用你的应用。考虑周全的信息设计能充分增进你的用户与应用的联系。
有关更多的设计app tile的信息，请查看 Guidelines and checklist for tiles 以及 Guidelines and checklist for notifications.
保持连接：你的用户能够分享内容到他的社交网络或设备上。了解更多有关Searching, sharing, and connecting (JavaScript).
交互性与触控优先：你的应用应当为触控以及自然操作方式而设计，Windows会自动针对键盘、鼠标及图像缩放进行处理。了解更多，请访问Designing for touch 以及 Responding to user interaction.
自动适应性视图：应用中的控件应当支持流式布局，这样内容会自然的根据不同的设备进行适应性排版。相应的平台上提供了自动缩放功能能帮助我们处理多分辨率以及屏幕方向问题。了解更多Designing for different form factors.
可信赖的应用：用户可以安全的下载、安全、使用及更新，而不会影响到其它应用。
为多任务而设计
当应用程序全屏幕运行时，Windows同时也能支持多任务操作。
- Snapped View。用户喜欢同时做多件事情。他们希望使用你的应用时同时还能聊天、上网、看视频或其它，所以请让你的snap view能满足用户的需求，同时在Snap以及非Snap状态时能流畅的切换。
- Filled View。用户可能将其它应用作为Snap View而把你的应用作为Filled View。注意考虑到水平方向减少面积时你的应用如何更好的适应。
为你定制的开发者体验
开发者同样能受益：
选择你钟爱的开发语言：你能够使用JavaScript加HTML5以及CS3，或C++/C#/VB加XAML。
新的布署方法：你的用户可以安全和简单的安装和删除应用。你无需过多的考虑系统性能。
- Metro应用发布方式：你的应用程序将使用全新的Metro应用的发布方式，安装、更新与删除的过程非常干净，不会改动操作系统。
- Windows Store
新的UI与触控输入：你可以直接按你用户所能接受操作方式来设计你的应用，所有的UI控件都直接支持这些操作方式。
本地化：你可以开发一次即可布署应用到不同的区域和语言。不仅如此，Windows Developer Preview提供的API能让你的应用响应用户的语言和文件设定——如日期、时间及货币格式，只需要简单的开发。最终的结果能让你开发国际化的应用程序。了解Globalizing your app.
开发工具：Microsoft Expression Blend与Microsoft Visual Studio 11 Express的预览版目前免费提供，你将获得完整的开发环境和模板来设计、开发、打包、调试及布署你的应用。
WP7新书已经上市
和微软的MVP们合著的一本WP7的书已经上市了，在里面负责了二个章节，还有封面设计。欢迎大家捧场。
Windows Phone 7应用开发指南
20个用于WP7原型与设计的工具
列举了20个用于原型与设计的模板和软件插件，其中还包含了年初我们团队制作的一个omnigraffle的Stencil，不得不支持一下
Kulercream@marketplace
Kulercream是我们创意团队自行开发的一个小型Windows Phone 7 应用，也是我前阵在写教程的一些内容。这是一个基于Adobe Kuler的API来帮助用户搜索有用的配色组合。这只是一个小小的尝试，功能也非常简单，但帮助整个团队积累了不少有关Windows Phone 7 设计方面的经验。有兴趣的，有WP7的可以下载试试
WP7上的Image使用技巧
部分翻译摘录自swick的blog
如果经常开发App，WP7上的Image显示造成的内存增大问题一定会遇到，以下是一些使用技巧帮助减少这类情况的发生：
JPG vs. PNG
如果不是必须要使用透明图片，JPG是最好的选择，WP7的JPG编码速度要大大快于PNG
Resource vs. Content
将图片(或其它种类资源)用何种类型进行XAP编译绑定的时候。Resource和Content有很大的不同，Resource会绑定到Dll之中，在显示图像时很快，但加载整个XAP包时很慢。而Content会使得加载XAP应用时很快，但加载图像时稍慢一些。根据情况选用，使用方法：
Content: <Image Source=”/ImagesAsContent/smiley1.png”/>
Resource: <Image Source=”..\ImagesAsResource\smiley3.png”/>
Async vs. Sync 异步或同步加载图片
BitmapImage.UriSource = uriSource; // 从URI中读取，异步加载
BitmapImage.SetSource(stream); // 从流中读取，同步加载
图片缓存
如果内存没有被回收，可以考虑主动释放:
BitmapImage bitmapImage = image.Source as BitmapImage;
bitmapImage.UriSource = null;
image.Source = null;
自定义编码
如果所需图片尺寸不需要很大，可以将来源进行重编码，使用PictureDecoder API可完成这个操作如下：
image.Source = PictureDecoder.DecodeJpeg(jpgStream, 192, 256);
WP7 性能提示
一组笔记：
- 永远在真实设备上测试性能
- 不要使用WebClient来做网络数据访问
- 尽量使用静止的背景替代Panorama的滑动背景
- List中尽量使用Visualize stackpanel替代StackPanel
- 尽量使用简单结构的用户控件，如果需要成组元素，考虑一下一个元素是否可以替代
- 不要在XAML中使用太多Converter
- 图片可以设定宽高，而不要让系统动态的计算
- 不要在刚开始就加载Bing Map
- 图片可以设为”Content”以加快程序启动速度
- 如果页面不常用，可以放在另一个Assembly之中
解决WP7渐变色深问题
由于部分Windows Phone 7 的硬件支持的色深只能到16位（部分设备支持32位），所以当一个渐变图片显示在设备上时容易出现条纹状效果，解决办法是在图片输出前做Dithering操作。另一方面是在PC上开发时就做好预防工作，先把模拟器的颜色从默认的32位改为16位，操作方式如下：
- 打开位于C:\Program Files (x86)\Microsoft XDE\1.0下面的WM7_Skin.xml文件
- 将displayDepth=”32″改为displayDepth=”16″
这样在模拟器上运行时就已经能观察到一些细微的变化以防止上机后出现问题：
真正解决渐变的问题，需要在Photoshop中对图片进行Dithering操作。具体的操作步骤见这里，但是不必要这么麻烦，我们可以下载这个已经做好的Photoshop Action动作文件，在输出前对渐变图片进行一次预处理，再置入到项目中输出，实际模拟器中的效果如下，手机上也经过测试没有问题：
