Windows Phone 7 -UI设计入门
作者:蒋建华
在Windows Phone 7（简称WP7）开发环境与工具这篇文章中，介绍了使用Windows Phone Developer Tools Beta （WPDT Beta）来开发WP7的应用程序。不管是使用WPDT Beta开发Windows Phone应用程序，还是开发Windows Phone上的Silverlight应用程序和XNA 游戏程序，一个良好的用户界面（User Interface，UI）是开发Windows Phone应用程序的第一关。
我们从未停止过追求美丽事物的步伐，也从未停止过设计出更美、更炫的产品出来。拿微软来说，从Dos6.2到Windows 3.1、Windows 98、Windows XP以及2009年发布的Windows 7，用户界面越来越美观、漂亮，颜色越来越丰富，操作越来越方便，功能也越来越强大。这是微软不断追求用户体验的结果。在这篇文章中，将给大家介绍Windows Phone 7 UI设计中的几个重要问题，分成三个部分来介绍：Windows Phone 7 UI设计特色、Windows Phone 7 UI设计原则、Windows Phone 7应用程序控件。
Windows Phone 7 UI设计特点
在介绍WP7 UI设计特色之前，简单介绍一下UI设计及特点。
UI设计 (UI Design)是与交互设计(interactive design)、可用性研究(usability research)、人力因素(human factors)、信息结构工程师(information architect)相互联系又各有侧重的一些概念和职业，这里我们不去深究。UI设计着重体现人机交互、操作逻辑和界面美观三个方面。
UI设计更重要的是要理解用户与程序的关系。一个良好的用户界面关注的是用户目标的实现，包括视觉元素与功能操作在内的所有东西都需要完整一致。
WP7 中的UI设计也着重体现人机交换、操作逻辑和界面美观三个方面，具体说来有以下几个特点：
特点一：多种输入方式，为触摸而设计
WP 7的用户界面有四种输入方式：触摸手势、虚拟键盘、WP 7的硬件按钮和传感器。触摸手势是单指或者多个指头在触摸屏上进行一些移动。触摸手势是用户和WP 7进行交互的主要方式，支持的触摸有两种：单点触摸和多点触摸，其中单点触摸的手势有：单击、双击、平移、划动、长按；多点触摸的手势有：缩放。
特点二：三种屏幕方向
WP 7支持三种类型的屏幕方向：竖屏，向左的横屏和向右的横屏。向左横屏和向右横屏之间的区别是应用程序工具栏和系统托盘的方位不一样。应用程序不能指定只是支持向左横屏或者向右横屏的应用程序工具栏和系统托盘的方位，需要两种都同时支持。这可能是和在计算机上运行的程序UI很大不同的一个方面。
特点三：独特的页面框架及布局
WP 7的应用程序是基于 Silverlight 的页面浏览模式，用户可以在不同内容的屏幕上相互导向和浏览。WP 7的页面框架及布局如下图1所示：
图1 WP 7 页面框架及布局
在图1中，WP 7的页面中，包含了一个称为Frame Control（框架）的顶层容器控件，其可以承载 Page Control（页面）。在应用程序中，页面可以实现内容的分离。WP 7提供框架和页面类，以方便导航到独立的内容章节中。其实这类似于ASP.Net应用程序中的Master Page（母版页）。
特点四：使用主题
这个特点类似于ASP.Net应用程序中的主题，使用主题的优点是保持与 Metro 设计原则的一致性和兼容性，能确保用户界面元素以及控件呈现的一致性，防止不和谐的用户体验开发人员可以使用主题，也可以在应用程序级别使用代码来改变主题。
Windows Phone 7 UI设计原则
界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性。结合WP 7UI设计的特点，在WP7 UI设计中，应遵循以下原则：
原则一：支持多种输入，包括触摸、虚拟键盘、按钮和传感器。WP7的用户界面是为了触摸交互而设计的，所有的导航通过一系列手指手势的移动组合而完成。在使用触摸时就需要设计点击区域的大小，每一个可以被触摸的 UI 元素应该可以被手指方便的点击，如下图2所示：
图2 WP 7的输入设计
原则二：统一的配色、页面框架和整套文字
在计算机上的程序中需要使用统一的配色、页面框架和文字设置，在WP 7设计中一样要遵循这一原则。在WP 7的页面设计中，考虑容器控件、导航控件和页面布局的一致性，考虑列表的多种展现形式，如以列表显示或者拆分屏幕以形象的图片显示。
原则三：使用Metro主题控件作为交互元素
推荐您在应用程序中使用的标准Metro主题控件。这些控件已经为支持触摸交互并基于WP7 UI设计及人机交互指南手册做了优化调整。Metro主题控件设计UI如下图3所示：
图3 Metro 主题
除此之外，在《Windows Phone 7 UI设计及人机交换指南V1.0》中提到了一下三点需要注意的：
（1）要理解适当的利用语音语调可以创建一个更具吸引力的终端用户体验.开发人员应该精心开发应用程序，来提供清晰友好的用户界面。
（2）良好定义的标准化准则将使你的应用程序一致性，放置最终用户在使用时有粗糙的体验。
（3）UI设计中必须使用正确的标点符号，同样，在你的应用程序中要保持一致。
Windows Phone 7应用程序控件
WP 7应用程序开发的控件包括两类：WP7 应用程序控件和WP7 系统控件。WP7 应用的程序控件如下图4中左图所示：
图4 WP 7 标准控件与VS.Net标准控件
上图中右侧是VS.Net所带的标准控件，由上图比较我们可以看出：WP 7的控件比VS.Net标准控件要少，但是也有一些手机开发中使用的一些很有特点的控件：如Ellipse（椭圆）、Progress Bar（进度条）、Slider（滑动条）、Border（边框）。
除了应用控件，还有一些控件也属于WP 7的控件，这些控件是系统控件，包括：系统托盘和应用工具栏、上下文菜单、WP消息通知、进度显示器。
小结
在WP 7 UI设计过程中，我们一方面需要考虑屏幕的分辨率，另一方面还要考虑整体界面的风格，所幸WP 7提供了主题和metro标准控件来帮助我们设计风格统一并且支持个性化的UI。在UI设计的过程中，可以通过WPDT Beta以所见即所得的方式来进行UI的设计，还可以把UI设计与数据分离。
相关文章:
Silverlight for Windows Phone 7开发系列1：环境搭建
Silverlight for Windows Phone 7开发系列2：第一个Silverlight程序
Silverlight for Windows Phone 7开发系列3：多媒体开发
Silverlight for Windows Phone 7开发系列4：动画开发
Windows Phone 7多媒体开发
Windows Phone 7 控件设计与开发入门
[解决办法]
帮顶，沙发~~现在还只是做wm6.5,还没有开发WP7~感觉WM 末路啦~~
[解决办法]
Silverlight也可以开发手机应用程序吗？本人对Silverlight不太了解
------解决方案--------------------
mark 一下
[解决办法]
顶啊！SL开发WP7的程序真的是太舒服了
[解决办法]
WM已经末路，期待WP7全新的UI效果！
[解决办法]
顶啊，wm崛起崛起
[解决办法]
学习下...
[解决办法]
在Windows Phone 7（简称WP7）开发环境与工具这篇文章中，介绍了使用Windows Phone Developer Tools Beta （WPDT Beta）来开发WP7的应用程序。不管是使用WPDT Beta开发Windows Phone应用程序，还是开发Windows Phone上的Silverlight应用程序和XNA 游戏程序，一个良好的用户界面（User Interface，UI）是开发Windows Phone应用程序的第一关。
[解决办法]
不晓得WP7反响咋样
[解决办法]
哈哈这已经不是WM了啊.愿MS一路走好吧.
[解决办法]
wm6.5入门
标记此贴
[解决办法]
[解决办法]
崛起吧 这个很有用啊
[解决办法]
学习一下
[解决办法]
WP7 的手机界面也太雷人的。
还不如老款。
[解决办法]
学习一下
[解决办法]
哇，这个应该比较难，现在还在学vb，哈哈！
[解决办法]
学习，创新
[解决办法]
该挺呢 还是挺呢 还是挺呢？
[解决办法]
下载个文件这么难，我是刷分的。
[解决办法]
晕倒，升级速度也太快了！
[解决办法]
] Windows Phone 7 好吗？？
[解决办法]
飘过·····
··········
[解决办法]
两个目的，一是拿分。二是表示崇拜。
关注移动开发
[解决办法]
很郁闷，那个软件包无法下载
[解决办法]
看来学习Silverlight优势很大啊，现在又可以进行手机开发了，
[解决办法]
学习了！
[解决办法]
恩 不错 学习了
[解决办法]
值得学习1
[解决办法]
学习一下
[解决办法]
好专业哦！
[解决办法]
每天坚持顶帖
[解决办法]
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
------解决方案--------------------
DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
[解决办法]
WP ，很是期待。
[解决办法]
学习一下
[解决办法]
000
[解决办法]
不错的帖子，学习了
